/*
 * Brand Color System
 *
 * To change the main brand color, update --orby-lime in styles/orby-brand-tokens.css
 * (and ORBY_LIME in scripts/constants.js for studio defaults).
 * Also update --brand-secondary for the secondary accent (currently orange #ff4500).
 *
 * All accent-related colors (--accent, --accent-strong, --accent-border, etc.)
 * will automatically derive from these two base colors using CSS color-mix().
 *
 * Semantic palette (Orby Pink family — see orby-brand-tokens.css):
 * - --danger: Softer Orby Pink for inline error/destructive hints
 * - --warning: Orby Pink for critical notices; same hue as bug-report “blocker” severity
 *
 * Note: color-mix() requires modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+)
 * For older browser support, you may need to manually set the derived colors.
 * 
 * IMPORTANT: The logotype SVG animation (assets/animations/data.json) has embedded colors.
 * To change the logotype color, you'll need to either:
 * 1. Update the fill colors in the Lottie JSON file directly, OR
 * 2. Use CSS filters on .drop-logo and .demo-logotype (see below)
 */

@import url('./styles/orby-brand-tokens.css');
@import url('./styles/orby-home-padding-x.css');
@import url('./styles/orby-ultra-wide-home.css');
@import url('./styles/orby-mobile-landing-shell.css');

@font-face {
  font-family: 'Mattone Regular';
  src: url('./assets/fonts/Mattone-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Mattone Bold';
  src: url('./assets/fonts/Mattone-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Geist UI (SIL OFL) — Light default, Regular for emphasis; weights 500–700 reuse Regular */
@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/Geist-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/GeistMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/GeistMono-Light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/GeistMono-Light.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  font-weight: 300;
  --brand-font-headline: 'Mattone Bold', 'Cal Sans', 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-font-mattone-regular: 'Mattone Regular', 'Cal Sans', 'Geist', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --danger: var(--orby-pink-muted);
  /* Critical alerts — matches bug-report severity “blocker” dot */
  --warning: var(--orby-pink);
  /* Right-hand settings shelf and centered modals (paste scene settings, bug report) */
  --app-settings-chrome-radius: 18px;
  /* Object shelf Scene / Export pills, modal footers — keep in sync */
  --ui-accent-action-font-size: 0.8rem;
  /* Settings shelf: control row labels (Brightness, Color, …) */
  --shelf-label-font-size: 14px;
  /* Lime section headlines (.block-title) and compact preset grids (Lens, ISO, …) */
  --shelf-headline-font-size: 12px;
  /* Native selects + custom combobox triggers (shelf pills, support forms) */
  --orby-dropdown-height: 24px;
  /* Tab name only (Object, Studio, …) — 28px @ 2560×1440 reference */
  --shelf-tab-title-font-size: 28px;
  /* Horizontal gap between paired large CTAs (marketing CTA, dropzone, fullscreen prompts) */
  --orby-big-dual-btn-gap: 36px;
  /* Paired magic pills — equal width (Browse/Load sample, Stay/Go Home, …) */
  --orby-big-dual-btn-min-width: calc(12ch + 3.75rem);
  /* Fullscreen thank-you / Return home — headline → CTA row (studio overlays only) */
  --orby-big-message-headline-actions-gap: 5rem;
  /* Flat orby pill — compact base; normal = home; xl = fullscreen big-message modals */
  --ui-orby-pill-font-size: var(--ui-accent-action-font-size);
  --ui-orby-pill-pad-block: 0.52rem;
  --ui-orby-pill-pad-inline: 1.9rem;
  --ui-orby-pill-font-size-normal: calc(var(--ui-orby-pill-font-size) * 1.2);
  --ui-orby-pill-pad-block-normal: calc(var(--ui-orby-pill-pad-block) * 1.2);
  --ui-orby-pill-pad-inline-normal: calc(var(--ui-orby-pill-pad-inline) * 1.2);
  --ui-orby-pill-font-size-xl: calc(var(--ui-orby-pill-font-size-normal) * 1.25);
  --ui-orby-pill-pad-block-xl: calc(var(--ui-orby-pill-pad-block-normal) * 1.25);
  --ui-orby-pill-pad-inline-xl: calc(var(--ui-orby-pill-pad-inline-normal) * 1.25);
  /* Legacy aliases — home dropzone legacy gray pill */
  --ui-hero-pill-font-size: var(--ui-orby-pill-font-size-normal);
  --ui-hero-pill-pad-block: var(--ui-orby-pill-pad-block-normal);
  --ui-hero-pill-pad-inline: var(--ui-orby-pill-pad-inline-normal);
  /* Multiply caption opacity inside muted .subsection / .panel-block (two ×~25% steps vs full captions) */
  --muted-section-text-scale: 0.5625;
  /* Studio shelf / settings chrome — 1 on mobile landing; scaled on desktop (see below) */
  --studio-ui-scale: 1;
  /* Home hero frame insets — see orby-home-padding-x.css (--orby-home-padding-x) */
  --orby-home-padding-y: var(--orby-home-padding);
  /* Hero credits — same gutter as showcase gallery (--orby-marketing-col-gap); 112px @ 2560 */
  --orby-hero-credit-gutter-wide-factor: clamp(
    0.84,
    calc(0.84 + 0.16 * (100vw - 120rem) / 40rem),
    1
  );
  --orby-hero-credit-gutter-scale: clamp(
    0.65,
    min(
      1,
      calc(
        (min(1, 100vw / 90rem) * 1.48 - 0.48) * var(--orby-hero-credit-gutter-wide-factor)
      )
    ),
    1
  );
  --orby-hero-credit-inset: calc(112px * var(--orby-hero-credit-gutter-scale));
  /* Bottom-left viewport chrome — home frame; studio overrides on html:not(.mobile-landing) */
  --viewport-chrome-inset-x: var(--orby-home-padding-x);
  --viewport-chrome-inset-y: var(--orby-home-padding-y);
  --viewport-load-spinner-lift: 120px;
  --shelf-inset: 48px;
}

/* Big screens: extra horizontal inset only — vertical inset follows height */
@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
    --orby-home-padding-y: min(
      calc(
        0.06 * 100vh + 0.8 * clamp(0.35rem, calc((100vh - 500px) / 12), 4.5rem)
      ),
      max(0.35rem, calc((100vh - 460px) / 2))
    );
  }
}

@media (min-width: 1600px) {
  :root {
    --orby-home-padding-y: min(
      calc(
        0.1 * 100vh + 0.8 * clamp(3rem, calc((100vh - 720px) / 10 + 3rem), 5rem)
      ),
      max(0.35rem, calc((100vh - 460px) / 2))
    );
  }
}

html:not(.mobile-landing) body.dropzone-visible {
  --viewport-chrome-inset-x: var(--orby-home-padding-x);
  --viewport-chrome-inset-y: var(--orby-home-padding-y);
}

/*
 * Studio UI density — designed @ 2560×1440; scale shelf + settings chrome on smaller
 * desktops so 1080p feels like the 2560 layout (dropzone keeps its own hero factor).
 */
html:not(.mobile-landing) {
  --orby-studio-ref-width: 160rem; /* 2560px */
  --orby-studio-ref-height: 90rem; /* 1440px */
  --studio-ui-scale: clamp(
    0.72,
    min(100vw / var(--orby-studio-ref-width), 100dvh / var(--orby-studio-ref-height)),
    1
  );
  --shelf-inset: calc(48px * var(--studio-ui-scale));
  --viewport-chrome-inset-x: var(--shelf-inset);
  --viewport-chrome-inset-y: var(--shelf-inset);
  --viewport-load-spinner-lift: calc(120px * var(--studio-ui-scale));
  --ui-frosted-blur: calc(15px * var(--studio-ui-scale));
  --app-settings-chrome-radius: calc(18px * var(--studio-ui-scale));
  --shelf-label-font-size: calc(14px * var(--studio-ui-scale));
  --shelf-headline-font-size: calc(12px * var(--studio-ui-scale));
  --shelf-tab-title-font-size: calc(28px * var(--studio-ui-scale));
  --ui-accent-action-font-size: calc(0.8rem * var(--studio-ui-scale));
  --color-chip-w: calc(184px * var(--studio-ui-scale));
  --ui-orby-pill-pad-block: calc(0.52rem * var(--studio-ui-scale));
  --ui-orby-pill-pad-inline: calc(1.9rem * var(--studio-ui-scale));
}

/*
 * Studio overlays (bug report, paste settings, shell veil, Return Home, 404 card).
 * `scale` shrinks uniformly @ 1920; 2560 stays 1. Separate from `transform` so GSAP modal wipes still work.
 */
html:not(.mobile-landing) .load-settings-modal {
  padding: calc(2rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .load-settings-modal .load-settings-content {
  scale: var(--studio-ui-scale);
}

html:not(.mobile-landing) .bug-report-thank-you-layer {
  padding: calc(2rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .orby-sr {
  padding: clamp(
    calc(1rem * var(--studio-ui-scale)),
    calc(4vw * var(--studio-ui-scale)),
    calc(2rem * var(--studio-ui-scale))
  );
}

html:not(.mobile-landing) .orby-sr__panel {
  scale: var(--studio-ui-scale);
}

html:not(.mobile-landing) .orby-not-found-page {
  padding: clamp(
    calc(1.25rem * var(--studio-ui-scale)),
    calc(3vw * var(--studio-ui-scale)),
    calc(2.5rem * var(--studio-ui-scale))
  );
}

html:not(.mobile-landing) .orby-not-found-copy {
  scale: var(--studio-ui-scale);
}

html:not(.mobile-landing) .bug-report-thank-you-stack,
html:not(.mobile-landing) #orbyFullscreenPrompt .orby-fullscreen-prompt-stack {
  --orby-big-message-stack-scale: var(--studio-ui-scale);
  scale: var(--studio-ui-scale);
}

html:not(.mobile-landing) body.orby-not-found-active #orbyFullscreenPrompt .bug-report-thank-you-stack {
  --orby-big-message-stack-scale: calc(1.25 * var(--studio-ui-scale));
  transform: none;
  scale: calc(1.25 * var(--studio-ui-scale));
}

.brand-font-headline {
  font-family: var(--brand-font-headline);
  font-weight: 700;
  line-height: 1;
}

/* Text selection color - on-brand lime highlight */
::selection {
  background-color: var(--text-link);
  color: var(--text);
}

::-moz-selection {
  background-color: var(--text-link);
  color: var(--text);
}

:root,
body[data-theme='violet'],
body[data-theme='aqua'] {
  /* Default near-black — UI chrome, buttons on lime, overlays (not the viewport canvas) */
  --orby-black: #080808;
  --orby-app-bg: var(--orby-black);
  /* Studio viewport canvas backing — JS overrides via syncStudioBackgroundColor; defaults to Orby black for transitions */
  --orby-studio-bg: var(--orby-black);
  /* 21∶9 cinematic letterbox — always pure black, not studio backdrop */
  --cinematic-letterbox-black: #000;
  /* FAQ panels, tooltips — softer than app black so hints don’t read as errors */
  --orby-surface-muted: #202020;
  /* Neutral control fills — buttons, slider rails, toggle tracks, selects */
  --ui-control-surface: rgba(255, 255, 255, 0.15);
  --ui-control-surface-hover: rgba(255, 255, 255, 0.22);
  /* Frosted dark chrome — shelf, toasts, and other main-UI overlays */
  --ui-frosted-blur: 15px;
}

:root,
body[data-theme='violet'] {
  /* Brand Colors — lime from orby-brand-tokens.css; secondary accent here */
  --brand-primary: var(--orby-lime);
  --brand-secondary: #ff4500;
  
  /* Official purple — inverted brand lime */
  --brand-primary-inverted: var(--orby-purple);
  
  /* Base Colors */
  --bg: var(--orby-app-bg);
  --panel: #0d081f;
  --panel-alt: #160c2f;
  /* Shelf hierarchy: dark frosted shell; cards slightly lifted (--ui-control-surface brightest) */
  --ui-frosted-bg: rgba(8, 8, 8, 0.78);
  --shelf-bg: var(--ui-frosted-bg);
  --shelf-card-bg: rgba(255, 255, 255, 0.054);
  --shelf-picker-tile-bg: rgba(255, 255, 255, 0.08);
  --stroke: var(--ui-control-surface);
  --text: #f5f1ff;
  --text-dim: rgba(245, 241, 255, 0.6);
  
  /* Accent Colors - Derived from brand-primary */
  --accent: var(--brand-primary);
  --accent-strong: var(--brand-secondary);
  --accent-border: color-mix(in srgb, var(--brand-primary) 50%, transparent);
  --accent-shadow: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --accent-muted: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --accent-glow: color-mix(in srgb, var(--brand-secondary) 22.5%, transparent);
  /* Brighter hover color for links / interactive text */
  --accent-hover: color-mix(in srgb, var(--brand-primary) 40%, white 60%);
  --brand-glow: color-mix(in srgb, var(--brand-primary) 65%, transparent);
  /* Perf: no outer halo on button/slider hovers — color fill only */
  --ui-accent-outer-glow: none;
  --ui-accent-outer-glow-compact: none;
  
  /* Brand Text Color - Auto-detects if brand is bright (needs dark text) */
  /* For bright colors like yellow, set to #000 or dark color */
  /* For dark colors like purple, set to #fff or light color */
  --brand-text: var(--orby-black);
  
  /* Drop Zone Colors - Now derived from brand colors */
  --drop-gradient-start: color-mix(in srgb, var(--brand-primary) 20%, var(--bg) 80%);
  --drop-gradient-end: color-mix(in srgb, var(--bg) 96%, transparent);
  --drop-outline: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  --drop-outline-active: color-mix(in srgb, var(--brand-secondary) 85%, transparent);
  --drop-fill: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --drop-fill-active: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
}

body[data-theme='aqua'] {
  --brand-primary: var(--orby-lime);
  --brand-secondary: #ff4500;
  --brand-primary-inverted: var(--orby-purple);
  
  /* Base Colors */
  --bg: var(--orby-app-bg);
  --panel: #0d111c;
  --panel-alt: #121726;
  --ui-frosted-bg: rgba(8, 8, 8, 0.82);
  --shelf-bg: var(--ui-frosted-bg);
  --shelf-card-bg: rgba(255, 255, 255, 0.048);
  --shelf-picker-tile-bg: rgba(255, 255, 255, 0.08);
  --stroke: var(--ui-control-surface);
  --text: #f1f4ff;
  --text-dim: rgba(241, 244, 255, 0.6);
  
  /* Accent Colors - Derived from brand-primary */
  --accent: var(--brand-primary);
  --accent-strong: var(--brand-secondary);
  --accent-border: color-mix(in srgb, var(--brand-primary) 50%, transparent);
  --accent-shadow: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --accent-muted: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --accent-glow: color-mix(in srgb, var(--brand-secondary) 17.5%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  --ui-accent-outer-glow: none;
  --ui-accent-outer-glow-compact: none;
  
  /* Brand Text Color - Auto-detects if brand is bright (needs dark text) */
  --brand-text: var(--orby-black);
  
  /* Drop Zone Colors - Now derived from brand colors */
  --drop-gradient-start: color-mix(in srgb, var(--brand-primary) 15%, var(--bg) 85%);
  --drop-gradient-end: color-mix(in srgb, var(--bg) 92%, transparent);
  --drop-outline: color-mix(in srgb, var(--brand-primary) 40%, transparent);
  --drop-outline-active: color-mix(in srgb, var(--brand-primary) 80%, transparent);
  --drop-fill: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --drop-fill-active: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
}

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

/* Full-height chain avoids a 1px body strip at the top on some DPR/100vh cases */
html {
  height: 100%;
  overflow: hidden;
  /* Covers overscroll/gutters before body paints; keeps boot from flashing UA gray */
  background: var(--orby-app-bg);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100dvh;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}

body.dropzone-visible #webgl {
  opacity: 0;
  pointer-events: none;
}

/* No WebGL surface until the studio boots on first model load */
html:not(.orby-studio-active) #webgl {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

body.orby-not-found-active {
  background: var(--orby-app-bg);
  overflow: hidden;
}

body.orby-not-found-active #orby-marketing,
body.orby-not-found-active .orby-marketing-scroll-nav,
body.orby-not-found-active .orby-marketing-scroll-cue {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

body.orby-not-found-active #orby-sr-root,
body.orby-not-found-active .dropzone,
body.orby-not-found-active .shelf,
body.orby-not-found-active .top-bar,
body.orby-not-found-active #demoLogotype {
  display: none !important;
}

body.orby-not-found-active #webgl {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 2000ms ease;
}

body.orby-not-found-active.orby-not-found-fade-ready #webgl {
  opacity: 1 !important;
}

.orby-not-found-page {
  position: fixed;
  inset: 0;
  z-index: 230;
  pointer-events: none;
  display: grid;
  place-items: end center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 35%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.52) 52%, rgba(0, 0, 0, 0.88) 100%);
}

.orby-not-found-page[hidden] {
  display: none !important;
}

.orby-not-found-copy {
  pointer-events: auto;
  width: min(720px, 100%);
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(
    180deg,
    rgba(10, 8, 20, 0.74) 0%,
    rgba(3, 2, 8, 0.66) 100%
  );
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 3vw, 2rem);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 24px color-mix(in srgb, var(--orby-lime) 12%, transparent);
}

.orby-not-found-title {
  margin: 0 0 0.5rem 0;
  font-family: var(--brand-font-headline);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 4.2rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
}

.orby-not-found-message {
  margin: 0;
  font-size: clamp(0.92rem, 2.2vw, 1.05rem);
  line-height: 1.2;
  color: rgba(245, 241, 255, 0.92);
}

.orby-not-found-message .orby-not-found-emphasis,
.bug-report-thank-you-message .orby-not-found-emphasis {
  color: var(--accent);
  font-weight: 700;
}

.orby-not-found-btn {
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

body.orby-not-found-active #orbyFullscreenPrompt {
  /* Keep the full-screen prompt, but remove blur for the 404 void look. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* 50% of prior 404 scrim (0.24 → 0.12). JS also sets inline for reliability. */
  background: rgba(0, 0, 0, 0.12) !important;
}

body.orby-not-found-active #orbyFullscreenPrompt .bug-report-thank-you-stack {
  /* About 20% wider measure on large displays (kept in step with default prompt width). */
  max-width: min(78rem, 96vw);
  transform: scale(1.25);
  transform-origin: center center;
}

body.orby-not-found-active #orbyFullscreenPrompt .bug-report-thank-you-message {
  max-width: 100%;
  line-height: 1.2;
}

body.orby-not-found-active #orbyFullscreenPrompt .orby-not-found-symbol {
  display: block;
  width: 144px;
  height: 144px;
  margin: 0 auto -25px auto;
  animation: orbyNotFoundSymbolSpin 36s linear infinite;
}

body.orby-not-found-active #orbyFullscreenPrompt #orbyFullscreenPromptNo {
  display: none !important;
}

body.orby-not-found-active #orbyFullscreenPrompt .orby-fullscreen-prompt-actions {
  display: flex;
  justify-content: center;
}

@keyframes orbyNotFoundSymbolSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.orby-not-found-active #orbyFullscreenPrompt .orby-not-found-symbol {
    animation: none;
  }
}


.top-bar {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand img {
  filter: drop-shadow(0 0 16px var(--brand-glow));
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-tagline {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.top-bar__cluster {
  display: flex;
  gap: 0.6rem;
}

.top-bar__status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.status-title {
  font-weight: 500;
}

.status-detail {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Secondary buttons - transparent style */
.ghost-btn {
  border-radius: 12px;
  border: none;
  background: var(--ui-control-surface);
  color: var(--text);
  padding: 0.75rem 1.25rem;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s ease, filter 0.2s ease;
  width: 100%;
}

.ghost-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ghost-btn.small {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  width: auto;
}

/* Same dim label tone as Reset Studio (.accent-action-btn at rest) / secondary UI */
#gridSnap.ghost-btn,
#isoOrbitStep.ghost-btn,
#isoAssetRotateStep.ghost-btn,
#isoPanUnlock.ghost-btn,
#creativeLookPauseAnimations.ghost-btn,
#exportPreviewPauseAll.ghost-btn,
#fontExtrudePauseAllAnimations.ghost-btn,
#fontExtrudeResetAnimations.ghost-btn,
#lensFlareKeyLightConnect.ghost-btn,
.slider-snap-btn {
  color: var(--text-dim);
  /* Match .ghost-btn / .accent-action-btn 0.2s; opacity eases mute ↔ unmute */
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s ease;
}

/* Match bottom settings accent CTAs on hover — full lime fill + dark label */
#gridSnap.ghost-btn:hover:not(:disabled):not(.is-disabled),
#isoOrbitStep.ghost-btn:hover:not(:disabled):not(.is-disabled),
#isoAssetRotateStep.ghost-btn:hover:not(:disabled):not(.is-disabled),
#isoPanUnlock.ghost-btn:hover:not(:disabled):not(.is-disabled),
#creativeLookPauseAnimations.ghost-btn:hover:not(:disabled):not(.is-disabled),
#exportPreviewPauseAll.ghost-btn:hover:not(:disabled):not(.is-disabled),
#fontExtrudePauseAllAnimations.ghost-btn:hover:not(:disabled):not(.is-disabled),
#fontExtrudeResetAnimations.ghost-btn:hover:not(:disabled):not(.is-disabled),
#lensFlareKeyLightConnect.ghost-btn:hover:not(:disabled):not(.is-disabled),
.slider-snap-btn:hover:not(:disabled):not(.is-disabled) {
  background: var(--accent);
  color: var(--brand-text);
  box-shadow: var(--ui-accent-outer-glow);
}

.ghost-btn.active {
  background: var(--accent-muted);
  color: var(--accent);
}

/* Primary button - gradient style (for play/pause) */
.primary-btn {
  border-radius: 12px;
  border: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: var(--brand-text);
  padding: 0.4rem 0.9rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s, box-shadow 0.2s ease;
  box-shadow: none;
}

.primary-btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--ui-accent-outer-glow);
}

.primary-btn.icon-btn {
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  gap: 0.25rem;
}

.primary-btn.icon-btn i {
  font-size: 1.1rem;
  color: var(--brand-text);
}

.animation-play-btn {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  background: var(--ui-control-surface);
  color: var(--text-dim);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.animation-play-btn i {
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  color: inherit;
}

.animation-play-btn:hover:not(:disabled):not(.is-active) {
  background-color: var(--accent-muted);
  color: var(--brand-primary);
  opacity: 1;
}

.animation-play-btn:active:not(:disabled),
.animation-play-btn.is-active:not(:disabled) {
  background-color: var(--accent);
  color: var(--brand-text);
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.animation-play-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.orby-sr {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  margin: 0;
  box-sizing: border-box;
  background: var(--orby-app-bg);
  pointer-events: auto;
}

.orby-sr__panel {
  width: 100%;
  max-width: 420px;
  padding: 1.75rem 1.5rem;
  border-radius: var(--app-settings-chrome-radius);
  background: var(--orby-black);
  border: 1px solid var(--stroke);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-primary) 12%, transparent),
    0 12px 48px rgba(0, 0, 0, 0.55),
    0 0 80px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.orby-sr__title {
  font-family: var(--brand-font-headline);
  margin: 0 0 0.35rem 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
}

.orby-sr__hint {
  margin: 0 0 1.25rem 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.orby-sr__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.orby-sr__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 241, 255, 0.55);
}

.orby-sr__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgb(22, 22, 22);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.orby-sr__input:focus {
  border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.orby-sr__msg {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.82rem;
  color: var(--danger);
}

.orby-sr__btn {
  margin-top: 0.35rem;
  width: 100%;
  justify-content: center;
}

.orby-sr .accent-action-btn {
  opacity: 1;
}

html.orby-sr-on .orby-sr,
#orby-sr-root[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Load Settings Modal */
/* Popup chrome drop shadows: use --popup-chrome-shadow-alpha (0–1) — animated by modalReveal.js */
.load-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  --modal-backdrop-blur: 8px;
  backdrop-filter: blur(var(--modal-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
  padding: 2rem;
  margin: 0;
  box-sizing: border-box;
}

/* Thank-you overlay: hide modal panel so it isn’t visible through the translucent layer */
.load-settings-modal.bug-report-modal.bug-report-modal--thank-you-mask {
  visibility: hidden !important;
  pointer-events: none !important;
}

.load-settings-content {
  background: rgba(10, 10, 10, 0.6);
  border: none;
  border-radius: var(--app-settings-chrome-radius);
  padding: 1.2rem;
  width: 100%;
  max-width: 650px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: none;
  position: relative;
  overflow-y: auto;
}

.load-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.load-settings-header h3 {
  font-family: var(--brand-font-headline);
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  text-transform: none;
}

.load-settings-description {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.close-btn {
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.35rem -0.35rem 0 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}

.close-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.close-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Thin “×” — no icon font, no filled tile */
.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5px;
  height: 0.875rem;
  margin: 0;
  background: currentColor;
  border-radius: 1px;
}

.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.load-settings-content textarea {
  width: 100%;
  min-height: 300px;
  padding: 1rem;
  background: var(--ui-control-surface);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', ui-monospace, 'Menlo', 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.load-settings-content textarea:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.2);
}

.load-settings-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.load-settings-actions .ghost-btn {
  min-width: 100px;
  width: auto;
  margin-top: 0;
}

/* Modal footers: same label typography as Object panel Scene buttons (.accent-action-btn) */
.load-settings-modal .load-settings-actions button {
  font-family: inherit;
  font-size: var(--ui-accent-action-font-size);
  font-weight: 700;
}

/* Fatal boot error — shown before UIManager is ready */
.orby-boot-error {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--orby-black) 72%, transparent);
  backdrop-filter: blur(10px);
}

.orby-boot-error__card {
  width: min(28rem, 100%);
  padding: 1.35rem 1.5rem 1.5rem;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: var(--panel);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--orby-black) 55%, transparent);
}

.orby-boot-error__title {
  margin: 0 0 0.65rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--warning);
}

.orby-boot-error__message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

.orby-boot-error__detail {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.orby-boot-error__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

html.orby-boot-failed .workspace,
html.orby-boot-failed .dropzone {
  visibility: hidden;
}

/* Tablet gate — desktop site, studio blocked */
.orby-mobile-desktop-only-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.38rem, env(safe-area-inset-top, 0px)) 1.25rem
    max(1.38rem, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--orby-black) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.orby-mobile-desktop-only-modal[hidden] {
  display: none !important;
}

.orby-mobile-desktop-only-modal__panel {
  box-sizing: border-box;
  width: min(100%, 22rem);
  padding: 1.65rem 1.35rem 1.49rem;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-align: center;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--orby-black) 55%, transparent);
}

.orby-mobile-desktop-only-modal__title {
  margin: 0 0 0.83rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--warning);
}

.orby-mobile-desktop-only-modal__body {
  margin: 0 0 1.27rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

.orby-mobile-desktop-only-modal__dismiss {
  margin: 0;
  padding: 0.65rem 1.35rem;
  border: 1.5px solid var(--brand-primary);
  border-radius: 999px;
  background: transparent;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--brand-primary);
  cursor: pointer;
}

.orby-mobile-desktop-only-modal__dismiss:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
  outline-offset: 3px;
}

html.orby-mobile-modal-open {
  overflow: hidden;
}

html.orby-mobile-modal-open body {
  overflow: hidden;
}

/* Dismissible long-message dialog (same shell as paste-settings / bug report) */
.message-alert-modal {
  /* Blur only — no dim scrim or animated darkening wipe */
  background: transparent;
}

.message-alert-modal .message-alert-content {
  max-width: min(28rem, 92vw);
}

.message-alert-modal .load-settings-header h3 {
  /* Brand headline at dialog scale — smaller than paste-settings (2rem) */
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--warning);
}

.message-alert-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: min(50vh, 22rem);
  overflow-y: auto;
  padding-right: 0.2rem;
}

/* Big-message template: one extra line of air between body copy and OK */
.message-alert-actions {
  justify-content: flex-end;
  flex-shrink: 0;
  margin-top: 1.1rem;
}

.message-alert-actions .accent-action-btn {
  min-width: 5.5rem;
}

/* Confirm dialogs — equal-width pill pair (Keep / Replace, Yes / No, …) */
.message-alert-actions:has(#messageAlertCancel:not([hidden])) {
  gap: 0.75rem;
}

.message-alert-actions:has(#messageAlertCancel:not([hidden])) button {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  border-radius: 999px;
}

.message-alert-actions.message-alert-actions--wide {
  flex-direction: column;
  align-items: stretch;
}

.message-alert-actions.message-alert-actions--wide .accent-action-btn {
  width: 100%;
  min-width: 0;
}

/* Bug report — Information panel + modal */
.bug-report-panel-description {
  margin: 0 0 var(--shelf-section-gap);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.bug-report-panel-block .bug-report-panel-open.accent-action-btn {
  width: 100%;
  margin-top: 0;
}

.bug-report-content {
  max-width: 520px;
}

.bug-report-content .load-settings-description {
  margin: 0 0 0.75rem 0;
  /* Match big-message template body (.message-alert-body) */
  font-size: 0.95rem;
  line-height: 1.55;
}

.bug-report-content .bug-report-intro-emphasis {
  color: #fff;
  font-weight: 600;
}

.bug-report-thank-you-layer {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  /* Single dim + blur over the app — avoid stacking with the modal panel */
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bug-report-thank-you-layer.bug-report-thank-you-layer--under-modal {
  z-index: 9999;
  pointer-events: none;
  cursor: default;
}

.bug-report-thank-you-layer[hidden] {
  display: none !important;
}

.bug-report-thank-you-stack {
  --orby-big-message-stack-scale: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*
   * Stack uses `scale` on desktop — flex gap scales too (404 @ 1.25× → 120px reads as 150px).
   * Divide so the measured headline → CTA distance stays at --orby-big-message-headline-actions-gap.
   */
  gap: calc(
    var(--orby-big-message-headline-actions-gap) / var(--orby-big-message-stack-scale)
  );
  max-width: min(64rem, 96vw);
  pointer-events: none;
  cursor: default;
}

.bug-report-thank-you-stack .orby-magic-btn--on-dark,
.orby-fullscreen-prompt-stack .orby-magic-btn--on-dark {
  pointer-events: auto;
}

.orby-fullscreen-prompt-stack .orby-fullscreen-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--orby-big-dual-btn-gap);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  pointer-events: auto;
}

.orby-fullscreen-prompt-stack .orby-fullscreen-prompt-actions .orby-magic-btn--on-dark {
  box-sizing: border-box;
  width: var(--orby-big-dual-btn-min-width);
  min-width: var(--orby-big-dual-btn-min-width);
  max-width: 100%;
}

.bug-report-thank-you-message {
  margin: 0;
  max-width: 100%;
  text-align: center;
  /* Match landing .drop-primary */
  font-family: var(--brand-font-headline);
  font-size: clamp(2.28rem, 5.28vw, 4.32rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--text);
  text-wrap: wrap;
  pointer-events: none;
}

.bug-report-thank-you-message .orby-stagger-word {
  display: inline-block;
}

/* Slightly wider measure — ~one extra word per line at headline sizes */
#orbyFullscreenPrompt .orby-fullscreen-prompt-stack {
  max-width: min(72rem, 96vw);
}

.bug-report-content #bugReportForm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  --bug-report-dropdown-height: 30px;
}

/* Pull actions block one step closer to the word meter (one flex-gap less) */
.bug-report-content .bug-report-field:has(#bugReportMessage) {
  margin-bottom: -0.75rem;
}

.bug-report-content textarea {
  min-height: 12.5rem; /* ~20% taller than prior ~168px */
  box-shadow: none;
  filter: none;
}

.bug-report-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bug-report-field label,
.bug-report-field-label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.bug-report-field input,
.bug-report-field select {
  width: 100%;
  border-radius: 8px;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
}

.bug-report-field input:not([type='hidden']) {
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.12);
}

.bug-report-field input:not([type='hidden']):focus {
  background: rgba(255, 255, 255, 0.16);
}

.bug-report-message-block {
  width: 100%;
  box-sizing: border-box;
}

.bug-report-message-stage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  filter: none;
}

.bug-report-word-meter {
  width: 100%;
  height: 4px;
  margin-top: 0.5rem;
  border-radius: 999px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.bug-report-word-meter-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  /* Red → Moderate amber (same as severity dot); lime only when 5 words via ::after */
  background: linear-gradient(90deg, var(--warning) 0%, #ca8a04 100%);
  transition: width 0.22s ease;
  box-shadow: none;
}

.bug-report-word-meter-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.bug-report-word-meter-fill.bug-report-word-meter-fill--complete::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bug-report-word-meter-fill {
    transition: none;
  }

  .bug-report-word-meter-fill::after {
    transition: none;
  }
}

.bug-report-field textarea,
.bug-report-field .bug-report-message-textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  box-sizing: border-box;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.bug-report-field textarea:focus,
.bug-report-field .bug-report-message-textarea:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.bug-report-message-stage--sending .bug-report-message-textarea {
  /* Keep opacity 1 — translucent text over dark modal reads as a muddy “drop shadow” fringe; dimming is the overlay’s job */
  pointer-events: none;
}

.bug-report-message-sending-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  pointer-events: none;
  box-shadow: none;
  filter: none;
}

.bug-report-message-sending-overlay[hidden] {
  display: none !important;
}

.bug-report-message-sending-bar-track {
  width: min(14rem, 78%);
  height: 3px;
  border-radius: 999px;
  background: var(--ui-control-surface);
  overflow: hidden;
}

.bug-report-message-sending-bar-fill {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-primary) 40%, transparent),
    var(--brand-primary)
  );
}

.bug-report-message-stage--sending .bug-report-message-sending-bar-fill {
  animation: bug-report-progress-slide 1.08s ease-in-out infinite;
}

/* Custom comboboxes — Category + Severity share pill triggers and list panels */
.bug-report-combo,
.bug-report-severity-combo {
  position: relative;
}

.bug-report-combo-trigger,
.bug-report-severity-trigger {
  width: 100%;
  border-radius: 999px;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: var(--bug-report-dropdown-height, 30px);
  outline: none;
  box-sizing: border-box;
  height: var(--bug-report-dropdown-height, 30px);
  min-height: var(--bug-report-dropdown-height, 30px);
  padding: 0 2rem 0 0.85rem;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
  cursor: pointer;
  text-align: left;
}

.bug-report-combo-trigger:focus,
.bug-report-severity-trigger:focus {
  background-color: rgba(255, 255, 255, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
}

.bug-report-combo-trigger:focus-visible,
.bug-report-severity-trigger:focus-visible {
  outline: none;
}

.bug-report-combo-trigger-text,
.bug-report-severity-trigger-inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  pointer-events: none;
}

.bug-report-combo-trigger-text {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bug-report-severity-trigger-text {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bug-report-severity-level {
  font-weight: 700;
}

.bug-report-severity-desc {
  font-weight: 400;
}

.bug-report-combo-listbox,
.bug-report-severity-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border-radius: 12px;
  border: none;
  background: var(--orby-app-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-height: min(16rem, 70vh);
  overflow-y: auto;
  outline: none;
}

.bug-report-combo-listbox:focus,
.bug-report-severity-listbox:focus {
  outline: none;
}

.bug-report-combo-option,
.bug-report-severity-list-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}

.bug-report-combo-option:hover,
.bug-report-combo-option:focus,
.bug-report-severity-list-option:hover,
.bug-report-severity-list-option:focus {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.bug-report-combo-option[aria-selected='true'],
.bug-report-severity-list-option[aria-selected='true'] {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.bug-report-severity-trigger .bug-report-severity-dot,
.bug-report-combo-option .bug-report-severity-dot,
.bug-report-severity-list-option .bug-report-severity-dot {
  margin-top: 0;
}

.bug-report-severity-dot {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Serious → low severity (hue ramp); blocker uses semantic --warning */
.bug-report-severity-dot[data-severity='blocker'] {
  background: var(--warning);
}

.bug-report-severity-dot[data-severity='major'] {
  background: #ea580c;
}

.bug-report-severity-dot[data-severity='moderate'] {
  background: #ca8a04;
}

.bug-report-severity-dot[data-severity='minor'] {
  background: #65a30d;
}

.bug-report-severity-dot[data-severity='cosmetic'] {
  background: #16a34a;
}

/* Cloudflare Turnstile — fixed top-right; not embedded in bug-report modal */
.orby-turnstile-host {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), var(--orby-hero-credit-inset, 1rem));
  right: max(env(safe-area-inset-right, 0px), var(--orby-hero-credit-inset, 1rem));
  left: auto;
  z-index: 10050;
  margin: 0;
  pointer-events: auto;
  transform-origin: top right;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.orby-turnstile-host[hidden] {
  display: none !important;
}

.orby-turnstile-host:not([hidden]) {
  display: block;
  min-height: 4rem;
}

.orby-turnstile-host.orby-turnstile-host--faded {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
}

.bug-report-status {
  margin: 0;
  min-height: 1.15rem;
  font-size: 0.82rem;
}

.bug-report-status-text {
  min-width: 0;
}

@keyframes bug-report-progress-slide {
  0% {
    transform: translateX(-130%);
  }

  100% {
    transform: translateX(340%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bug-report-message-stage--sending .bug-report-message-sending-bar-fill {
    animation: none;
    width: 100%;
    opacity: 0.5;
    transform: none;
  }
}

.bug-report-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.75rem;
  margin-top: 0;
  width: 100%;
}

.bug-report-actions > .orby-magic-btn,
.bug-report-actions .bug-report-submit-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.bug-report-actions .orby-magic-btn {
  --orby-magic-btn-pad-block: 0;
  --orby-magic-btn-pad-inline: 1.35rem;
  --orby-magic-btn-min-height: 54px;
  --orby-magic-btn-inner-gap: 0.5rem;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 54px;
  min-height: 54px;
  font-size: var(--ui-accent-action-font-size);
}

.bug-report-actions .orby-magic-btn__inner {
  height: 100%;
  min-height: 0;
  padding-block: 0;
  padding-inline: var(--orby-magic-btn-pad-inline);
  width: 100%;
  justify-content: center;
}

.bug-report-actions .orby-magic-btn__arrow {
  width: 1.125rem;
  height: 1.125rem;
}

/* Wrapper so native tooltip works on disabled Send (hover hits the span, not the dead button) */
.bug-report-submit-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
}

.bug-report-submit-wrap .orby-magic-btn:disabled {
  pointer-events: none;
}

.bug-report-submit-wrap:has(.orby-magic-btn:disabled) {
  cursor: not-allowed;
}

.bug-report-actions .orby-magic-btn--outline-dark:disabled {
  background: transparent;
  color: rgba(255, 255, 255, 0.34);
  cursor: not-allowed;
}

.bug-report-actions .orby-magic-btn--outline-dark:disabled .orby-magic-btn__ring {
  border-color: rgba(255, 255, 255, 0.16);
}

@media (hover: hover) and (pointer: fine) {
  .bug-report-actions .orby-magic-btn--outline-dark:disabled:hover,
  .bug-report-actions .orby-magic-btn--outline-dark:disabled:focus-visible {
    background: transparent;
    color: rgba(255, 255, 255, 0.34);
    filter: none;
  }

  .bug-report-actions .orby-magic-btn:disabled:hover .orby-magic-btn__inner,
  .bug-report-actions .orby-magic-btn:disabled:hover .orby-magic-btn__arrow,
  .bug-report-actions .orby-magic-btn:disabled:focus-visible .orby-magic-btn__inner,
  .bug-report-actions .orby-magic-btn:disabled:focus-visible .orby-magic-btn__arrow {
    transform: none;
  }
}

.primary-btn {
  border: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: var(--brand-text);
  font-weight: 700;
  box-shadow: none;
}

.primary-btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--ui-accent-outer-glow);
}

/* Unified Accent Action Buttons (Export, Scene controls) - Slim, compact style */
.accent-action-btn {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 999px; /* Fully rounded */
  border: none;
  background: var(--ui-control-surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--ui-accent-action-font-size);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: none;
  box-sizing: border-box;
  min-height: 2.5rem; /* Explicit height to match toggle buttons */
  opacity: 0.6;
}

.accent-action-btn:hover {
  background: var(--accent);
  color: var(--brand-text);
  box-shadow: var(--ui-accent-outer-glow);
  opacity: 1;
}

.accent-action-btn:active {
  filter: brightness(0.95);
}

.accent-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
  box-shadow: none;
}

.accent-action-btn:disabled:hover {
  background: var(--ui-control-surface);
  color: var(--text);
  box-shadow: none;
  opacity: 0.35;
}

/* ColorChecker “Reference colors” — full-width toggle; On = filled accent like hover */
.effect-foldout .color-checker-raw-toggle {
  margin-bottom: var(--shelf-section-gap);
}

.color-checker-raw-toggle.color-checker-raw-toggle--on {
  opacity: 1;
  background: var(--accent);
  color: var(--brand-text);
  box-shadow: var(--ui-accent-outer-glow);
}

/* Accent action button icons - smaller size (12px) */
.accent-action-btn i {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Export button specific spacing — gap on .export-controls owns rhythm */
#exportPng {
  margin-top: 0;
}

/* Flat orby pill — accent / ghost; --normal (home) / --xl (fullscreen big-message) */
.orby-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.orby-pill-btn--normal {
  font-size: var(--ui-orby-pill-font-size-normal);
  padding: var(--ui-orby-pill-pad-block-normal) var(--ui-orby-pill-pad-inline-normal);
}

.orby-pill-btn--xl {
  font-size: var(--ui-orby-pill-font-size-xl);
  padding: var(--ui-orby-pill-pad-block-xl) var(--ui-orby-pill-pad-inline-xl);
}

.orby-pill-btn--accent {
  background: var(--brand-primary);
  color: var(--brand-text);
}

.orby-pill-btn--accent:hover,
.orby-pill-btn--accent:focus-visible {
  background: #fff;
  color: var(--brand-text);
  filter: none;
  box-shadow: var(--ui-accent-outer-glow);
  outline: none;
}

.orby-pill-btn--accent:active {
  transform: scale(0.98);
}

.orby-pill-btn--danger {
  background: var(--warning);
  color: var(--brand-text);
}

.orby-pill-btn--danger:hover,
.orby-pill-btn--danger:focus-visible {
  background: #fff;
  color: var(--brand-text);
  filter: none;
  box-shadow: var(--ui-accent-outer-glow);
  outline: none;
}

.orby-pill-btn--danger:active {
  transform: scale(0.98);
}

.orby-pill-btn--ghost {
  background: rgba(0, 0, 0, 0.42);
  color: var(--text);
}

.orby-pill-btn--ghost:hover,
.orby-pill-btn--ghost:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.orby-pill-btn--ghost:active {
  transform: scale(0.98);
}

/* Home magic Browse — scales with --drop-hero-wide-factor (full @ 2560, ~78% @ 1920) */
.dropzone .orby-magic-btn-host,
.dropzone .orby-magic-btn.dropzone-btn {
  --orby-magic-btn-bleed: calc(6px * var(--drop-hero-wide-factor));
  --orby-magic-btn-glow-blur: calc(10px * var(--drop-hero-wide-factor));
  --orby-magic-btn-rim-a: calc(5px * var(--drop-hero-wide-factor));
  --orby-magic-btn-rim-b: calc(10px * var(--drop-hero-wide-factor));
  --orby-magic-btn-rim-c: calc(16px * var(--drop-hero-wide-factor));
  --orby-magic-btn-stroke: calc(1.5px * var(--drop-hero-wide-factor));
}

.dropzone .orby-magic-btn.dropzone-btn {
  /* Width grows with label — same min footprint as section CTAs (.orby-magic-btn) */
  font-size: var(--orby-marketing-support-size, clamp(0.75rem, 1.2vw, 0.9rem));
}

.dropzone-actions .orby-magic-btn.dropzone-btn .orby-magic-btn__inner {
  font-size: inherit;
}

.dropzone-actions .orby-magic-btn.dropzone-btn .orby-magic-btn__arrow {
  width: 1.125em;
  height: 1.125em;
}

/* Orby magic pill — default CTA on dark backgrounds (dropzone + marketing) */
@property --orby-magic-btn-rotate {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Bleed box for ::before/::after blur + rim — Safari clips glow on <button> bounds */
.orby-magic-btn-host {
  --orby-magic-btn-bleed: 6px;
  --orby-magic-btn-glow-blur: 10px;
  --orby-magic-btn-rim-c: 16px;
  --orby-magic-btn-glow-pad: calc(
    var(--orby-magic-btn-bleed) + var(--orby-magic-btn-glow-blur) * 1.5 + var(--orby-magic-btn-rim-c)
  );
  display: inline-flex;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: content-box;
  padding: var(--orby-magic-btn-glow-pad);
  margin: calc(-1 * var(--orby-magic-btn-glow-pad));
  overflow: visible;
}

.orby-magic-btn {
  --orby-magic-btn-spin: 12s;
  --orby-magic-btn-spin-hover: 8s;
  --orby-magic-btn-bleed: 6px;
  --orby-magic-btn-glow-blur: 10px;
  --orby-magic-btn-rim-a: 5px;
  --orby-magic-btn-rim-b: 10px;
  --orby-magic-btn-rim-c: 16px;
  --orby-magic-btn-stroke: 1.5px;
  --orby-magic-btn-fill-speed: 0.16s;
  /* Content-sized pill — width from label + padding (no min-width) */
  --orby-magic-btn-pad-block: 1.5rem;
  --orby-magic-btn-pad-inline: 1.75rem;
  --orby-magic-btn-inner-gap: 0.5rem;
  --orby-magic-btn-min-height: 4rem;

  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: 100%;
  min-height: var(--orby-magic-btn-min-height);
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--brand-primary, var(--orby-lime));
  font-family: inherit;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  isolation: isolate;
  z-index: 2;
  opacity: 1;
  transform: none;
  animation: none;
  box-shadow: none;
  transition: color var(--orby-magic-btn-fill-speed) cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn__fill {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-primary, var(--orby-lime));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--orby-magic-btn-fill-speed) cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--orby-magic-btn-inner-gap);
  box-sizing: border-box;
  padding: var(--orby-magic-btn-pad-block) var(--orby-magic-btn-pad-inline);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn__label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.orby-magic-btn__arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  color: inherit;
  transform: translateX(0);
  transition:
    color var(--orby-magic-btn-fill-speed) cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.orby-magic-btn::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: calc(-1 * var(--orby-magic-btn-bleed));
  border-radius: 999px;
  background-image:
    radial-gradient(
      ellipse 175% 115% at 50% 108%,
      color-mix(in srgb, var(--orby-magic-accent) 34%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(
      var(--orby-magic-btn-rotate),
      var(--brand-primary) 0%,
      var(--orby-magic-accent) 32%,
      transparent 40%,
      transparent 46%,
      transparent 51%,
      transparent 58%,
      var(--brand-primary) 100%
    );
  filter: blur(var(--orby-magic-btn-glow-blur));
  opacity: 0.4;
  pointer-events: none;
  animation: orbyMagicBtnSpin var(--orby-magic-btn-spin) linear infinite;
  transition:
    opacity 0.28s ease,
    filter 0.28s ease,
    animation-duration 0.22s ease;
}

.orby-magic-btn::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  border: var(--orby-magic-btn-stroke) solid transparent;
  background:
    linear-gradient(var(--orby-black), var(--orby-black)) padding-box,
    linear-gradient(
        var(--orby-magic-btn-rotate),
        var(--brand-primary) 0%,
        var(--orby-magic-accent) 32%,
        transparent 40%,
        transparent 46%,
        transparent 51%,
        transparent 58%,
        var(--brand-primary) 100%
      )
      border-box;
  background-origin: padding-box, border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
  pointer-events: none;
  animation: orbyMagicBtnSpin var(--orby-magic-btn-spin) linear infinite;
  box-shadow:
    0 0 var(--orby-magic-btn-rim-a) color-mix(in srgb, var(--brand-primary) 30%, transparent),
    0 0 var(--orby-magic-btn-rim-b) color-mix(in srgb, var(--orby-magic-accent) 16%, transparent),
    0 0 var(--orby-magic-btn-rim-c) color-mix(in srgb, var(--orby-magic-accent) 9%, transparent);
  transition:
    box-shadow 0.28s ease,
    animation-duration 0.22s ease;
}

@keyframes orbyMagicBtnSpin {
  to {
    --orby-magic-btn-rotate: 360deg;
  }
}

@media (hover: hover) and (pointer: fine) {
  .orby-magic-btn:hover,
  .orby-magic-btn:focus-visible {
    --orby-magic-btn-spin: var(--orby-magic-btn-spin-hover);
    color: var(--brand-text, var(--orby-black));
    outline: none;
  }

  .orby-magic-btn:hover .orby-magic-btn__fill,
  .orby-magic-btn:focus-visible .orby-magic-btn__fill {
    opacity: 1;
  }

  .orby-magic-btn:hover .orby-magic-btn__inner,
  .orby-magic-btn:focus-visible .orby-magic-btn__inner {
    transform: translateX(4px);
  }

  .orby-magic-btn:hover .orby-magic-btn__arrow,
  .orby-magic-btn:focus-visible .orby-magic-btn__arrow {
    transform: translateX(9px);
  }

  /* Hover: motion + fill only — no intensified rim / blur (perf) */
  .orby-magic-btn:hover::before,
  .orby-magic-btn:focus-visible::before {
    box-shadow:
      0 0 var(--orby-magic-btn-rim-a) color-mix(in srgb, var(--brand-primary) 30%, transparent),
      0 0 var(--orby-magic-btn-rim-b) color-mix(in srgb, var(--orby-magic-accent) 16%, transparent),
      0 0 var(--orby-magic-btn-rim-c) color-mix(in srgb, var(--orby-magic-accent) 9%, transparent);
  }

  .orby-magic-btn:hover::after,
  .orby-magic-btn:focus-visible::after {
    opacity: 0.4;
    filter: blur(var(--orby-magic-btn-glow-blur));
  }
}

/* Touch press — filled pill + dark label (avoid sticky :hover on coarse pointers) */
.orby-magic-btn:active:not(.orby-magic-btn--on-lime):not(.orby-magic-btn--mono) {
  color: var(--brand-text, var(--orby-black));
  filter: brightness(0.96);
}

.orby-magic-btn:active:not(.orby-magic-btn--on-lime):not(.orby-magic-btn--mono) .orby-magic-btn__fill {
  opacity: 1;
}

/* Safari: half glow radius + opacity so blur/rim fit inside compositor bounds */
html.safari-browser .orby-magic-btn-host {
  --orby-magic-btn-bleed: 3px;
  --orby-magic-btn-glow-blur: 5px;
  --orby-magic-btn-rim-c: 8px;
  --orby-magic-btn-glow-pad: calc(
    var(--orby-magic-btn-bleed) + var(--orby-magic-btn-glow-blur) * 1.2 + var(--orby-magic-btn-rim-c) * 0.65
  );
}

html.safari-browser .orby-magic-btn {
  --orby-magic-btn-spin: 18s;
  --orby-magic-btn-spin-hover: 12s;
  --orby-magic-btn-bleed: 3px;
  --orby-magic-btn-glow-blur: 5px;
  --orby-magic-btn-rim-a: 2.5px;
  --orby-magic-btn-rim-b: 5px;
  --orby-magic-btn-rim-c: 8px;
}

html.safari-browser .orby-magic-btn::after {
  opacity: 0.2;
}

html.safari-browser .orby-magic-btn::before {
  box-shadow:
    0 0 calc(var(--orby-magic-btn-rim-a) * 0.65)
      color-mix(in srgb, var(--brand-primary) 15%, transparent),
    0 0 calc(var(--orby-magic-btn-rim-b) * 0.65)
      color-mix(in srgb, var(--orby-magic-accent) 8%, transparent),
    0 0 calc(var(--orby-magic-btn-rim-c) * 0.65)
      color-mix(in srgb, var(--orby-magic-accent) 4.5%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  html.safari-browser .orby-magic-btn:hover::after,
  html.safari-browser .orby-magic-btn:focus-visible::after {
    opacity: 0.2;
  }

  html.safari-browser .orby-magic-btn:hover::before,
  html.safari-browser .orby-magic-btn:focus-visible::before {
    box-shadow:
      0 0 calc(var(--orby-magic-btn-rim-a) * 0.65)
        color-mix(in srgb, var(--brand-primary) 15%, transparent),
      0 0 calc(var(--orby-magic-btn-rim-b) * 0.65)
        color-mix(in srgb, var(--orby-magic-accent) 8%, transparent),
      0 0 calc(var(--orby-magic-btn-rim-c) * 0.65)
        color-mix(in srgb, var(--orby-magic-accent) 4.5%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orby-magic-btn::before,
  .orby-magic-btn::after {
    animation: none !important;
  }

  .orby-magic-btn__inner,
  .orby-magic-btn__arrow {
    transform: none !important;
  }

  .orby-magic-btn__fill {
    transition: none !important;
  }
}

/* Flat inverted pills on lime marketing surfaces — same shell as magic btn, no glow */
.orby-magic-btn--on-lime::before,
.orby-magic-btn--on-lime::after {
  display: none;
  content: none;
}

.orby-magic-btn--on-lime .orby-magic-btn__fill {
  display: none;
}

.orby-magic-btn--on-lime .orby-magic-btn__inner {
  /* Safari: min-height 100% overflows the pill and clips bottom border */
  min-height: 0;
}

.orby-magic-btn--on-lime.orby-magic-btn--solid-lime {
  background: var(--brand-text, var(--orby-black));
  color: var(--brand-primary, var(--orby-lime));
  transition:
    background 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn--on-lime.orby-magic-btn--outline-lime {
  background: transparent;
  color: var(--brand-text, var(--orby-black));
  border: none;
  overflow: visible;
  transition:
    background 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Outline ring as a child span — Safari clips <button> borders and inset shadows */
.orby-magic-btn--on-lime.orby-magic-btn--outline-lime .orby-magic-btn__ring {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  border: var(--orby-magic-btn-stroke) solid var(--brand-text, var(--orby-black));
  pointer-events: none;
  box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
  .orby-magic-btn--on-lime.orby-magic-btn--solid-lime:hover,
  .orby-magic-btn--on-lime.orby-magic-btn--solid-lime:focus-visible {
    background: color-mix(in srgb, var(--brand-text, var(--orby-black)) 86%, white);
    color: var(--brand-primary, var(--orby-lime));
    outline: none;
  }

  .orby-magic-btn--on-lime.orby-magic-btn--outline-lime:hover,
  .orby-magic-btn--on-lime.orby-magic-btn--outline-lime:focus-visible {
    background: var(--brand-text, var(--orby-black));
    color: var(--brand-primary, var(--orby-lime));
    outline: none;
  }

  .orby-magic-btn--on-lime:hover .orby-magic-btn__inner,
  .orby-magic-btn--on-lime:focus-visible .orby-magic-btn__inner {
    transform: translateX(4px);
  }

  .orby-magic-btn--on-lime:hover .orby-magic-btn__arrow,
  .orby-magic-btn--on-lime:focus-visible .orby-magic-btn__arrow {
    transform: translateX(9px);
  }
}

.orby-magic-btn--on-lime.orby-magic-btn--solid-lime:active {
  background: color-mix(in srgb, var(--brand-text, var(--orby-black)) 86%, white);
  color: var(--brand-primary, var(--orby-lime));
  filter: brightness(0.96);
}

.orby-magic-btn--on-lime.orby-magic-btn--outline-lime:active {
  background: var(--brand-text, var(--orby-black));
  color: var(--brand-primary, var(--orby-lime));
  filter: brightness(0.96);
}

/* Flat inverted pills on dark scrims — mirror of --on-lime (lime stroke, hover fill + slide) */
.orby-magic-btn--on-dark::before,
.orby-magic-btn--on-dark::after {
  display: none;
  content: none;
}

.orby-magic-btn--on-dark .orby-magic-btn__fill {
  display: none;
}

.orby-magic-btn--on-dark .orby-magic-btn__inner {
  min-height: 0;
}

.orby-magic-btn--on-dark.orby-magic-btn--solid-dark {
  background: var(--brand-primary, var(--orby-lime));
  color: var(--brand-text, var(--orby-black));
  transition:
    background 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn--on-dark.orby-magic-btn--outline-dark {
  background: transparent;
  color: var(--brand-primary, var(--orby-lime));
  border: none;
  overflow: visible;
  transition:
    background 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn--on-dark.orby-magic-btn--outline-dark .orby-magic-btn__ring {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  border: var(--orby-magic-btn-stroke) solid var(--brand-primary, var(--orby-lime));
  pointer-events: none;
  box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
  .orby-magic-btn--on-dark.orby-magic-btn--solid-dark:hover,
  .orby-magic-btn--on-dark.orby-magic-btn--solid-dark:focus-visible {
    background: color-mix(in srgb, var(--brand-primary, var(--orby-lime)) 86%, white);
    color: var(--brand-text, var(--orby-black));
    outline: none;
  }

  .orby-magic-btn--on-dark.orby-magic-btn--outline-dark:hover,
  .orby-magic-btn--on-dark.orby-magic-btn--outline-dark:focus-visible {
    background: var(--brand-primary, var(--orby-lime));
    color: var(--brand-text, var(--orby-black));
    outline: none;
  }

  .orby-magic-btn--on-dark:hover .orby-magic-btn__inner,
  .orby-magic-btn--on-dark:focus-visible .orby-magic-btn__inner {
    transform: translateX(4px);
  }

  .orby-magic-btn--on-dark:hover .orby-magic-btn__arrow,
  .orby-magic-btn--on-dark:focus-visible .orby-magic-btn__arrow {
    transform: translateX(9px);
  }
}

.orby-magic-btn--on-dark.orby-magic-btn--solid-dark:active {
  background: color-mix(in srgb, var(--brand-primary, var(--orby-lime)) 86%, white);
  color: var(--brand-text, var(--orby-black));
  filter: brightness(0.96);
}

.orby-magic-btn--on-dark.orby-magic-btn--outline-dark:active {
  background: var(--brand-primary, var(--orby-lime));
  color: var(--brand-text, var(--orby-black));
  filter: brightness(0.96);
}

/* Dialog / full-screen confirm — same shell as magic btn, existing flat colors, no glow */
.orby-magic-btn--dialog::before,
.orby-magic-btn--dialog::after {
  display: none;
  content: none;
}

.orby-magic-btn--dialog-accent .orby-magic-btn__fill {
  display: none;
}

.orby-magic-btn--dialog-ghost {
  background: rgba(0, 0, 0, 0.42);
  color: var(--brand-primary, var(--orby-lime));
  transition: color var(--orby-magic-btn-fill-speed) cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn--dialog-ghost .orby-magic-btn__fill {
  display: block;
  opacity: 0;
  transition: opacity var(--orby-magic-btn-fill-speed) cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn--dialog-ghost:hover,
.orby-magic-btn--dialog-ghost:focus-visible {
  color: var(--brand-text, var(--orby-black));
  filter: none;
  outline: none;
}

.orby-magic-btn--dialog-ghost:hover .orby-magic-btn__fill,
.orby-magic-btn--dialog-ghost:focus-visible .orby-magic-btn__fill {
  opacity: 1;
}

.orby-magic-btn--dialog-ghost:active {
  filter: none;
}

.orby-magic-btn--dialog-ghost:active .orby-magic-btn__fill {
  background: color-mix(in srgb, var(--brand-primary, var(--orby-lime)) 92%, var(--orby-black));
}

.orby-magic-btn--dialog-accent {
  background: var(--brand-primary, var(--orby-lime));
  color: var(--brand-text, var(--orby-black));
  transition:
    background 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.orby-magic-btn--dialog-accent:hover,
.orby-magic-btn--dialog-accent:focus-visible {
  background: #fff;
  color: var(--brand-text, var(--orby-black));
  box-shadow: none;
  outline: none;
}

.orby-magic-btn--dialog:hover .orby-magic-btn__inner,
.orby-magic-btn--dialog:focus-visible .orby-magic-btn__inner {
  transform: translateX(4px);
}

.orby-magic-btn--dialog:hover .orby-magic-btn__arrow,
.orby-magic-btn--dialog:focus-visible .orby-magic-btn__arrow {
  transform: translateX(9px);
}

.orby-magic-btn--dialog:active {
  filter: brightness(0.96);
}

.orby-magic-btn--dialog-accent:active {
  filter: none;
  transform: scale(0.98);
}

.dropzone-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--orby-big-dual-btn-gap);
  flex-wrap: wrap;
  overflow: visible;
}

.dropzone-actions .orby-magic-btn {
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(-15px);
  animation: none;
}

/* Legacy gray pill — footer on lime, etc. */
.dropzone-btn:not(.orby-magic-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--ui-hero-pill-pad-block) var(--ui-hero-pill-pad-inline);
  border-radius: 999px;
  border: none;
  background: var(--ui-control-surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--ui-hero-pill-font-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
  opacity: 0;
  transform: translateY(-15px);
  animation: dropRevealButton 1s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
  min-height: auto;
  box-shadow: none;
  position: relative;
  z-index: 2;
}

.dropzone-actions .dropzone-btn:not(.orby-magic-btn) {
  width: 12rem;
  justify-content: center;
}

@keyframes dropReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logotypeReveal {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes demoLogotypeFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes demoLogotypeFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes dropRevealButton {
  to {
    opacity: 0.6;
    transform: translateY(0);
  }
}

.dropzone-btn:not(.orby-magic-btn):hover {
  background: var(--accent) !important;
  color: var(--brand-text) !important;
  box-shadow: var(--ui-accent-outer-glow) !important;
  opacity: 1 !important;
}

.drop-link {
  color: var(--text-link);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
  opacity: 0.9;
}

.drop-link:hover,
.drop-link:focus-visible {
  color: var(--text-link-hover);
  opacity: 1;
}

.dropzone-btn:not(.orby-magic-btn):active {
  filter: brightness(0.95);
}

.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* While start menu hides the dropzone (shell prep) */
html.orby-dropzone-shell-pending .workspace {
  background: var(--orby-app-bg);
}

.viewport {
  position: relative;
  flex: 1;
  background: var(--orby-studio-bg);
  min-height: 0;
  min-width: 0;
  /* Clip dropzone paints (blur / shadows); inset(0) reinforces overflow in WebKit. */
  overflow: hidden;
  clip-path: inset(0);
  container-type: size;
  container-name: orby-viewport;
}

/* Marketing → studio transitions — Orby black until load + dropzone hide complete */
html.orby-page-transition .workspace,
html.orby-page-transition .viewport,
html.orby-page-transition #webgl,
html:not(.orby-studio-active) .viewport,
html.orby-dropzone-shell-pending .viewport,
html:has(.dropzone.hiding) .workspace,
html:has(.dropzone.hiding) .viewport,
html:has(.dropzone.hiding) #webgl,
html.orby-studio-reveal-active:has(.viewport-load-spinner.is-visible) .viewport,
html.orby-studio-reveal-active:has(.viewport-load-spinner.is-visible) #webgl,
html.orby-page-transition:has(.viewport-load-spinner.is-visible) .viewport,
html.orby-page-transition:has(.viewport-load-spinner.is-visible) #webgl {
  background: var(--orby-app-bg) !important;
}

/* Marketing → studio — fade out from Orby black once load + dropzone hide complete */
.workspace-studio-reveal-scrim {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: var(--orby-black);
  opacity: 0;
  transition: opacity var(--studio-reveal-fade-duration, 500ms)
    cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace-studio-reveal-scrim.is-visible {
  opacity: 1;
  transition-duration: 0ms;
}

.workspace-studio-reveal-scrim.is-visible.is-fading {
  transition-duration: var(--studio-reveal-fade-duration, 500ms);
  opacity: 0;
}

/* Hold studio chrome until the black scrim finishes — avoids shelf / viewport chrome popping early */
html.orby-studio-reveal-active .shelf,
html.orby-studio-reveal-active #demoLogotype,
html.orby-studio-reveal-active .viewport-fullscreen-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Marketing dropzone must stay dismissed for the whole studio session (see _finalizeDropzoneHidden). */
html.orby-studio-active body:not(.dropzone-visible) .dropzone,
html.orby-studio-reveal-active body:not(.dropzone-visible) .dropzone {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.orby-studio-active .orby-marketing-scroll-nav {
  display: none !important;
}

/* Spinner stays above the black reveal scrim while mesh / blank canvas loads. */
html.orby-studio-reveal-active .viewport-load-spinner.is-visible {
  z-index: 100062;
}

/* Marketing entrance — shelf / chrome snap in when the 1.5s black fade completes (no extra slide). */
html.orby-studio-reveal-instant-chrome .shelf:not(.is-shelf-hidden),
html.orby-studio-reveal-instant-chrome #demoLogotype,
html.orby-studio-reveal-instant-chrome .viewport-fullscreen-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-studio-reveal-scrim {
    transition-duration: 0ms !important;
  }
}

/* 21∶9 “cinema” mattes — fits largest 21∶9 rect in viewport (letterbox on 16∶9). */
.viewport-letterbox {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  /* Durations: exit synced from CSS in ViewportFramingOverlays (getComputedStyle). */
  --viewport-lb-in-duration: 0.25s;
  --viewport-lb-out-duration: calc(0.25s / 1.5);
}

.viewport-letterbox__bar {
  position: absolute;
  background: var(--cinematic-letterbox-black);
  transition-property: transform;
  transition-timing-function: ease-out;
  transition-duration: var(--viewport-lb-in-duration);
}

/* Exit: 50% faster than enter (1.5× speed → 2/3 duration) */
.viewport-letterbox.viewport-letterbox--exiting .viewport-letterbox__bar--top,
.viewport-letterbox.viewport-letterbox--exiting .viewport-letterbox__bar--bottom,
.viewport-letterbox.viewport-letterbox--exiting .viewport-letterbox__bar--left,
.viewport-letterbox.viewport-letterbox--exiting .viewport-letterbox__bar--right {
  transition-duration: var(--viewport-lb-out-duration);
}

/* Explicit rest + off-screen poses (translate3d) so left/right interpolate like top/bottom. */
.viewport-letterbox.viewport-letterbox--shown .viewport-letterbox__bar--top,
.viewport-letterbox.viewport-letterbox--shown .viewport-letterbox__bar--bottom,
.viewport-letterbox.viewport-letterbox--shown .viewport-letterbox__bar--left,
.viewport-letterbox.viewport-letterbox--shown .viewport-letterbox__bar--right {
  transform: translate3d(0, 0, 0);
}

.viewport-letterbox:not(.viewport-letterbox--shown) .viewport-letterbox__bar--top {
  transform: translate3d(0, -100%, 0);
}

.viewport-letterbox:not(.viewport-letterbox--shown) .viewport-letterbox__bar--bottom {
  transform: translate3d(0, 100%, 0);
}

.viewport-letterbox:not(.viewport-letterbox--shown) .viewport-letterbox__bar--left {
  transform: translate3d(-100%, 0, 0);
}

.viewport-letterbox:not(.viewport-letterbox--shown) .viewport-letterbox__bar--right {
  transform: translate3d(100%, 0, 0);
}

.viewport-letterbox__bar--top {
  top: 0;
  left: 0;
  right: 0;
  height: max(0px, calc((100cqh - 100cqw * 9 / 21) / 2));
}

.viewport-letterbox__bar--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: max(0px, calc((100cqh - 100cqw * 9 / 21) / 2));
}

.viewport-letterbox__bar--left {
  top: 0;
  bottom: 0;
  left: 0;
  width: max(0px, calc((100cqw - 100cqh * 21 / 9) / 2));
}

.viewport-letterbox__bar--right {
  top: 0;
  bottom: 0;
  right: 0;
  width: max(0px, calc((100cqw - 100cqh * 21 / 9) / 2));
}

#webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Match .viewport; backs transparent WebGL clears (renderer alpha: true) */
  background: var(--orby-studio-bg);
  outline: none;
}

/* Last live frame while offline capture clears #webgl (renderToScreen=false) */
.viewport-capture-freeze {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  object-fit: fill;
}

.viewport-capture-freeze[hidden] {
  display: none !important;
}

/* Offline PNG sequence: hide live WebGL (renderToScreen=false clears canvas each frame) */
.viewport.is-offline-export-capture #webgl {
  visibility: hidden;
}

html:has(.viewport.is-offline-export-capture) .viewport-load-spinner {
  display: none;
}

.viewport-offline-export[hidden] {
  display: none !important;
}

.viewport-export-preview-banner[hidden] {
  display: none !important;
}

.viewport-export-preview-banner {
  position: absolute;
  top: max(var(--viewport-chrome-inset-y, 1.5rem), env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 16;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(36rem, calc(100% - 2 * var(--viewport-chrome-inset-x, 1.5rem)));
  padding: 0.45rem;
  transform: translateX(-50%);
  background: var(--ui-frosted-bg);
  border-radius: 999px;
  color: var(--text);
  letter-spacing: -0.01em;
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  box-shadow: 0 10px 36px color-mix(in srgb, var(--orby-black) 42%, transparent);
  pointer-events: auto;
}

.viewport-export-preview-banner__spinner {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.viewport-export-preview-banner__spinner img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  animation: viewport-load-spin 0.6s linear infinite;
}

.viewport-export-preview-banner.is-paused .viewport-export-preview-banner__spinner img {
  animation: none;
  opacity: 0.72;
}

.viewport-export-preview-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.viewport-export-preview-banner__title {
  font-size: var(--ui-accent-action-font-size);
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-primary);
}

.viewport-export-preview-banner__hint {
  font-size: var(--shelf-label-font-size);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-dim);
}

.viewport-export-preview-banner__exit.accent-action-btn {
  width: auto;
  flex-shrink: 0;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .viewport-export-preview-banner__spinner img {
    animation: none;
  }
}

@media (max-width: 520px) {
  .viewport-export-preview-banner__hint {
    white-space: normal;
  }
}

.viewport-offline-export {
  --viewport-offline-export-section-gap: 54px;
  --viewport-offline-export-info-font-size: 16px;
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(1.5rem, 6vw, 6rem);
  padding: clamp(1rem, 4vw, 4.5rem);
  box-sizing: border-box;
  background: var(--orby-app-bg);
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  pointer-events: none;
}

/* Dropzone debug — hide hero so the export overlay layout is visible */
body.export-overlay-debug #dropzone {
  visibility: hidden;
  pointer-events: none;
}

.viewport-offline-export__center {
  display: flex;
  flex-direction: column;
  gap: var(--viewport-offline-export-section-gap);
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: min(60rem, 58%);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  padding-bottom: 0.5rem;
  pointer-events: auto;
}

.viewport-offline-export__preview {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: clamp(20rem, 38vw, 52rem);
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}

.viewport-offline-export__preview[hidden] {
  display: none !important;
}

.viewport-offline-export__preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--orby-black);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--orby-black) 60%, transparent);
}

.viewport-offline-export__preview-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

.viewport-offline-export__preview-caption {
  margin: 0;
  font-family: var(--brand-font-mattone-regular);
  font-size: var(--viewport-offline-export-info-font-size);
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* Narrow viewports: drop the side preview, let the info box reclaim the width */
@media (max-width: 720px) {
  .viewport-offline-export {
    flex-direction: column;
    align-items: stretch;
    gap: var(--viewport-offline-export-section-gap);
  }

  .viewport-offline-export__center {
    max-width: 100%;
    width: min(100%, 54rem);
  }

  .viewport-offline-export__preview {
    display: none !important;
  }
}

.viewport-offline-export__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--orby-big-dual-btn-gap);
  width: min(100%, 14rem);
  flex-shrink: 0;
  pointer-events: auto;
}

.viewport-offline-export__footer.is-cancelled {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 28rem);
}

.viewport-offline-export__footer.is-preview {
  display: none;
}

.viewport-offline-export__footer .orby-pill-btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-self: stretch;
}

.viewport-offline-export__footer .orby-pill-btn[hidden] {
  display: none !important;
}

.viewport-offline-export__footer:not(.is-cancelled) .viewport-offline-export__go-back {
  display: none;
}

.viewport-offline-export__footer.is-cancelled .viewport-offline-export__go-back {
  display: inline-flex;
}

.viewport-offline-export__cancel.is-disabled,
.viewport-offline-export__cancel:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.viewport-offline-export__progress.is-cancelled .viewport-offline-export__spinner {
  animation-play-state: paused;
  background-color: var(--warning);
}

.viewport-offline-export__section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.viewport-offline-export__title {
  margin: 0 0 0.65em;
  font-family: var(--brand-font-mattone-regular);
  font-size: var(--viewport-offline-export-info-font-size);
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.viewport-offline-export__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.45em;
  margin: 0;
  line-height: 1.25;
}

.viewport-offline-export__progress-leading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.viewport-offline-export__spinner {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--brand-lime);
  -webkit-mask-image: url('./assets/images/favicon.svg');
  mask-image: url('./assets/images/favicon.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: viewport-load-spin 0.6s linear infinite;
}

.viewport-offline-export__stat {
  font-family: var(--brand-font-mattone-regular);
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.95);
  font-variant-numeric: tabular-nums;
}

.viewport-offline-export__stat.is-cancelled {
  color: var(--warning);
}

.viewport-offline-export__elapsed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  margin: 0 0 0.55em;
  font-family: var(--brand-font-mattone-regular);
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.viewport-offline-export__elapsed-label {
  color: rgba(255, 255, 255, 0.95);
}

.viewport-offline-export__elapsed-value {
  color: var(--brand-lime);
}

.viewport-offline-export__elapsed.is-cancelled .viewport-offline-export__elapsed-value {
  color: var(--warning);
}

.viewport-offline-export__helper {
  margin: 0;
  max-width: 42rem;
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: var(--viewport-offline-export-info-font-size);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.42);
}

.viewport-offline-export__helper + .viewport-offline-export__helper {
  margin-top: 0.75em;
}

.viewport-offline-export__helper strong {
  font-family: inherit;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .viewport-offline-export__spinner {
    animation-duration: 3s;
  }
}

.viewport-offline-export__table-wrap {
  width: 100%;
  padding-block: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.viewport-offline-export__filename {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.65em;
  align-items: baseline;
  padding: 0 0.85rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--viewport-offline-export-info-font-size);
  line-height: 1.4;
}

.viewport-offline-export__filename[hidden] {
  display: none !important;
}

.viewport-offline-export__filename-label {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

.viewport-offline-export__filename-value {
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}

.viewport-offline-export__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--viewport-offline-export-info-font-size);
  line-height: 1.4;
}

.viewport-offline-export__section-row th {
  padding: 0 0.85rem 0.35rem;
  font-family: inherit;
  font-size: var(--shelf-headline-font-size);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  color: var(--accent);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.viewport-offline-export__section-row:first-child th {
  border-top: none;
  padding-top: 0;
}

.viewport-offline-export__table tbody tr:last-child td,
.viewport-offline-export__table tbody tr:last-child th[scope='row'] {
  padding-bottom: 0.22rem;
}

.viewport-offline-export__table th[scope='row'] {
  width: 42%;
  padding: 0.22rem 0.65rem 0.22rem 0.85rem;
  font-weight: inherit;
  text-align: left;
  vertical-align: top;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

.viewport-offline-export__table td {
  padding: 0.22rem 0.85rem 0.22rem 0;
  vertical-align: top;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}

.viewport-offline-export__table tbody tr:not(.viewport-offline-export__section-row):hover td,
.viewport-offline-export__table tbody tr:not(.viewport-offline-export__section-row):hover th[scope='row'] {
  background: rgba(255, 255, 255, 0.03);
}


#webgl:focus,
#webgl:focus-visible {
  outline: none;
}

/* 16×9 composition aid — thirds + circle in frame; cross + diagonals full viewport */
.composition-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  /* Definite size for cqw/cqh so the frame tracks viewport panel resizes */
  container-type: size;
  container-name: composition-grid;
  /* Picture height (largest 16×9 in panel) — matches .composition-grid-overlay__frame math */
  --comp-pic-h: min(100cqh, calc(100cqw * 9 / 16));
  /* Opacity fade only (no stroke trim). JS reads this for hide timeout. */
  --composition-grid-fade-duration: 0.1s;
  --comp-guide-alpha: 0.52;
  --comp-guide-alpha-muted: 0.26;
  /* Centered square — half opacity of primary guides (lower-importance framing aid) */
  --comp-guide-alpha-thumb: calc(var(--comp-guide-alpha) * 0.5);
}

/* Only when visible: `display: flex` must not apply while `[hidden]` or it overrides UA display:none */
.composition-grid-overlay:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--composition-grid-fade-duration) ease-out;
}

.composition-grid-overlay--fade-in:not([hidden]) {
  opacity: 1;
}

.composition-grid-overlay--instant:not([hidden]) {
  transition: none !important;
}

/* Cross + diagonals: normalized viewBox stretched to panel — corners track window aspect ratio. */
.composition-grid-overlay__viewport-guides {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  shape-rendering: geometricPrecision;
}

.composition-grid-overlay__viewport-guides line {
  fill: none;
  stroke: rgba(255, 255, 255, var(--comp-guide-alpha));
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.composition-grid-overlay--inverted .composition-grid-overlay__viewport-guides line {
  stroke: rgba(0, 0, 0, var(--comp-guide-alpha));
}

/* Centered square — largest fit in viewport; matches shape-library thumb center-crop */
.composition-grid-overlay__thumb-safe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, var(--comp-guide-alpha-thumb));
  pointer-events: none;
}

.composition-grid-overlay--inverted .composition-grid-overlay__thumb-safe {
  border-color: rgba(0, 0, 0, var(--comp-guide-alpha-thumb));
}

@supports not (width: 1cqw) {
  .composition-grid-overlay__thumb-safe {
    width: min(100%, 100vh);
    height: min(100%, 100vh);
    aspect-ratio: 1;
  }
}

/* Full-width horizontal thirds — avoids SVG meet-letterboxing shortening lines on wide panels */
.composition-grid-overlay__thirds-horizontal {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.composition-grid-overlay__thirds-horizontal-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, var(--comp-guide-alpha));
  transform: translateY(-50%);
}

.composition-grid-overlay__thirds-horizontal-line--upper {
  top: calc((100cqh - var(--comp-pic-h)) / 2 + var(--comp-pic-h) / 3);
}

.composition-grid-overlay__thirds-horizontal-line--lower {
  top: calc((100cqh - var(--comp-pic-h)) / 2 + 2 * var(--comp-pic-h) / 3);
}

.composition-grid-overlay--inverted .composition-grid-overlay__thirds-horizontal-line {
  background: rgba(0, 0, 0, var(--comp-guide-alpha));
}

@supports not (width: 1cqw) {
  .composition-grid-overlay__thirds-horizontal-line--upper {
    top: 33.333%;
  }

  .composition-grid-overlay__thirds-horizontal-line--lower {
    top: 66.667%;
  }
}

/* Largest 16×9 rectangle that fits inside the viewport (letterbox / pillarbox outside this). */
.composition-grid-overlay__frame {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  height: min(100cqh, calc(100cqw * 9 / 16));
  width: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}

/* 9∶16 center-crop preview — nested in the 16×9 frame (portrait video export). */
.composition-grid-overlay__portrait-crop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  display: none;
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
  pointer-events: none;
}

.composition-grid-overlay--portrait-crop .composition-grid-overlay__portrait-crop {
  display: block;
}

.composition-grid-overlay__portrait-crop-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--orby-black) 42%, transparent);
  pointer-events: none;
}

.composition-grid-overlay__portrait-crop-shade--left {
  right: 100%;
  width: 50vw;
}

.composition-grid-overlay__portrait-crop-shade--right {
  left: 100%;
  width: 50vw;
}

.composition-grid-overlay__portrait-crop-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.composition-grid-overlay__portrait-crop-svg line,
.composition-grid-overlay__portrait-crop-svg circle {
  fill: none;
  stroke: rgba(255, 255, 255, var(--comp-guide-alpha));
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.composition-grid-overlay__portrait-crop-svg .composition-grid-overlay__action-safe {
  fill: none;
  stroke: rgba(255, 255, 255, var(--comp-guide-alpha-muted));
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.composition-grid-overlay--inverted .composition-grid-overlay__portrait-crop-svg line,
.composition-grid-overlay--inverted .composition-grid-overlay__portrait-crop-svg circle {
  stroke: rgba(0, 0, 0, var(--comp-guide-alpha));
}

.composition-grid-overlay--inverted .composition-grid-overlay__portrait-crop-svg .composition-grid-overlay__action-safe {
  stroke: rgba(0, 0, 0, var(--comp-guide-alpha-muted));
}

/* Older engines without container query units: SVG still letterboxes inside full overlay */
@supports not (width: 1cqw) {
  .composition-grid-overlay__frame {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: 16 / 9;
  }
}

.composition-grid-overlay__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Axis-aligned lines stay sharp */
  shape-rendering: geometricPrecision;
}

/* Hairline strokes in screen px (not viewBox units — avoids “fat” lines when scaled). */
.composition-grid-overlay__lines line,
.composition-grid-overlay__lines circle {
  fill: none;
  stroke: rgba(255, 255, 255, var(--comp-guide-alpha));
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.composition-grid-overlay--inverted .composition-grid-overlay__lines line,
.composition-grid-overlay--inverted .composition-grid-overlay__lines circle {
  stroke: rgba(0, 0, 0, var(--comp-guide-alpha));
}

/* Broadcast action safe — 90% of 16×9 picture (5% inset); half opacity of primary guides */
.composition-grid-overlay__action-safe {
  fill: none;
  stroke: rgba(255, 255, 255, var(--comp-guide-alpha-muted));
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.composition-grid-overlay--inverted .composition-grid-overlay__action-safe {
  stroke: rgba(0, 0, 0, var(--comp-guide-alpha-muted));
}

.dropzone {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: var(--orby-app-bg);
  background-image: none;
  border: 0;
  text-align: center;
  pointer-events: auto;
  opacity: 0;
  /* Reveal timing is driven by StartMenuController (after shell prep); avoids first-paint animation before JS. */
  /* Must use x/y — from 1600px up they differ from --dropzone-padding; keep in sync with ::before / ::after */
  padding: var(--dropzone-padding-y) var(--dropzone-padding-x);
  box-sizing: border-box;
  /* Clip blurred glow to this layer (glow still fills inner padding; inset is inside this box). */
  overflow: hidden;
}

.dropzone.hiding {
  animation: dropzoneHide 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  pointer-events: none !important;
}

@keyframes dropzoneReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dropzoneHide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.dropzone {
  /* Aliases :root --orby-home-padding* (frame insets + marketing site width) */
  --dropzone-padding: var(--orby-home-padding);
  --dropzone-padding-x: var(--orby-home-padding-x);
  --dropzone-padding-y: var(--orby-home-padding-y);
  /* Magic-card style frame (CodePen gayane-gasparyan/jOmaBQK) — stroke & radius preserved */
  --dropzone-frame-stroke: 2px;
  --dropzone-frame-radius: clamp(16px, 4.375vw, 112px);
  /*
   * Hero scale — full @ 2560; ~78% @ 1920 (logo, headline, Browse pill, frosted frame).
   */
  --drop-hero-wide-factor: clamp(
    0.78,
    calc(0.78 + 0.22 * (100vw - 120rem) / 40rem),
    1
  );
  /* 0 @ 1920px → 1 @ 2560px — smooth corner deco position/size (px — matches viewport, not rem root) */
  --drop-hero-deco-ramp: clamp(0, calc((100vw - 1920px) / 640px), 1);
  /* Corner JPGs only — ~20% larger @ 1920 than drop UI factor; full @ 2560 */
  --drop-hero-deco-wide-factor: clamp(
    0.936,
    calc(0.936 + 0.064 * ((100vw - 120rem) / 40rem)),
    1
  );
  /* Scroll-nav link inset — conservative estimate for content-sized Browse pill */
  --drop-hero-magic-btn-width: calc(12ch + 3.75rem);
  --dropzone-frost-blur: calc(20px * var(--drop-hero-wide-factor));
  --dropzone-frost-fill: color-mix(in srgb, var(--orby-app-bg) 50%, transparent);
  isolation: isolate;
  /* Cyan drag accents on ::before only (full-bleed box-shadow on .dropzone escapes clip → edge haze) */
  --dropzone-drag-rim-cyan-a: calc(12.375px * var(--drop-hero-wide-factor));
  --dropzone-drag-rim-cyan-b: calc(21.375px * var(--drop-hero-wide-factor));
  --dropzone-drag-rim-cyan-c: calc(31.5px * var(--drop-hero-wide-factor));
  /* Landing logotype + headline */
  --drop-logo-min: 140px;
  --drop-logo-max: 440px;
  --drop-logo-vw-ratio: 0.171875; /* 440 / 2560 */
  --drop-headline-min: 1.9rem;
  --drop-headline-max: 3.6rem;
  --drop-headline-vw: 4.4;
  --drop-headline-cqi-cap: 3.8;
  --drop-headline-offset: 0.15rem;
  container-type: inline-size;
  container-name: orby-dropzone;
}

/* Frosted frame — blurs hero deco behind; static lime stroke (no outer glow ring). */
.dropzone::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: var(--dropzone-padding-y);
  right: var(--dropzone-padding-x);
  bottom: var(--dropzone-padding-y);
  left: var(--dropzone-padding-x);
  border-radius: var(--dropzone-frame-radius);
  border: var(--dropzone-frame-stroke) solid
    color-mix(in srgb, var(--brand-primary) 28%, transparent);
  -webkit-backdrop-filter: blur(var(--dropzone-frost-blur)) saturate(1.1);
  backdrop-filter: blur(var(--dropzone-frost-blur)) saturate(1.1);
  background: linear-gradient(var(--dropzone-frost-fill), var(--dropzone-frost-fill));
  pointer-events: none;
}

.dropzone > * {
  position: relative;
  z-index: 2;
}

.dropzone-disclaimer {
  /* Gallery gutter — matches footer logotype + scroll nav (--orby-hero-credit-inset on :root) */
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), var(--orby-hero-credit-inset));
  left: max(env(safe-area-inset-left, 0px), var(--orby-hero-credit-inset));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  color: var(--text-dim);
  font-size: var(--orby-dropzone-secondary-size, 16px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

.dropzone-disclaimer__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  color: var(--orby-pink);
}

body:not(.dropzone-visible) .dropzone-disclaimer {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

body.dropzone-visible .dropzone-disclaimer {
  visibility: visible;
}

.dropzone > .dropzone-disclaimer {
  position: absolute;
  z-index: 4;
  align-self: auto;
}

html:not(.mobile-landing) .dropzone-disclaimer {
  opacity: 0;
  animation: none !important;
}

html.mobile-landing .dropzone-disclaimer {
  display: none !important;
}

/*
 * Desktop home — scaled corner deco (especially LL dragon) extends above the frame;
 * default .dropzone / .viewport overflow:hidden hard-crops horns. Frost stays on ::before.
 */
html:not(.mobile-landing) body.dropzone-visible .workspace,
html:not(.mobile-landing) body.dropzone-visible .viewport,
html:not(.mobile-landing) body.dropzone-visible .dropzone {
  overflow: visible;
  clip-path: none;
}

/*
 * Home scroll perf — clip the 200dvh hero-deco slab once scroll moves the hero
 * (html.orby-dropzone-viewport-clipped toggled in StartMenuController).
 */
html.orby-home-scroll.orby-dropzone-viewport-clipped:not(.mobile-landing)
  body.dropzone-visible
  .workspace,
html.orby-home-scroll.orby-dropzone-viewport-clipped:not(.mobile-landing)
  body.dropzone-visible
  .viewport,
html.orby-home-scroll.orby-dropzone-viewport-clipped:not(.mobile-landing)
  body.dropzone-visible
  .dropzone {
  overflow: hidden;
  clip-path: inset(0);
}

/*
 * One hero deco inside .dropzone (z 0) — visible behind frost ::before (z 1).
 * Tall box + overflow:visible lets corners continue into intro on home scroll.
 */
.dropzone > .dropzone-hero-deco {
  --orby-home-hero-deco-height: calc(200dvh - clamp(5rem, 11vh, 9.5rem));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--orby-home-hero-deco-height);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

html.orby-home-scroll .dropzone > .dropzone-hero-deco .dropzone-hero-deco__slot--ll {
  bottom: auto;
  left: 90px;
  top: 0;
}

.dropzone-hero-deco__slot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
}

/* Corner-anchored into gutter; inset pulls back toward frame edge */
.dropzone-hero-deco__slot--ur {
  top: 100px;
  right: 115px;
}

.dropzone-hero-deco__slot--ll {
  bottom: -160px;
  left: 90px;
}

.dropzone-hero-deco__img {
  display: block;
  width: auto;
  height: clamp(
    calc(192px * var(--drop-hero-deco-wide-factor)),
    min(
      calc(36vw * var(--drop-hero-deco-wide-factor)),
      calc(48vh * var(--drop-hero-deco-wide-factor))
    ),
    calc(600px * var(--drop-hero-deco-wide-factor))
  );
  max-width: min(
    calc(76vw * var(--drop-hero-deco-wide-factor)),
    calc(840px * var(--drop-hero-deco-wide-factor))
  );
  object-fit: contain;
  background-color: transparent;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.92;
}

/* Hidden until GSAP fade-in — avoids gray decode placeholder over black */
html:not(.mobile-landing) .dropzone-hero-deco__img {
  opacity: 0;
  visibility: hidden;
}

.look-filter-tile__thumb:not([src]) {
  visibility: hidden;
}

.dropzone-hero-deco__slot--ur .dropzone-hero-deco__img {
  transform: translate(6%, -4%) scale(calc(2 * var(--drop-hero-deco-wide-factor)));
  transform-origin: 100% 0%;
}

.dropzone-hero-deco__slot--ll .dropzone-hero-deco__img {
  transform: translate(-6%, 12%) scale(calc(2 * var(--drop-hero-deco-wide-factor)));
  transform-origin: 0% 100%;
}

/*
 * 1920–2560 — fluid scale + position (2560 anchors unchanged; 1920 nudged toward frame).
 * min-width in px so 1920×1080 DevTools matches even when root rem ≠ 16px.
 */
@media (min-width: 1920px) {
  /* UR — @1920: 100px up + 100px out from frame; @2560: same corner anchor */
  .dropzone-hero-deco__slot--ur {
    top: -150px;
    right: -100px;
  }

  html.orby-home-scroll .dropzone > .dropzone-hero-deco .dropzone-hero-deco__slot--ll {
    /* LL — @1920: 60 / 190; @2560: 90 / 230 (ramp 0→40px over 1920–2560) */
    top: calc(190px + 40px * var(--drop-hero-deco-ramp));
    left: calc(60px + 30px * var(--drop-hero-deco-ramp));
  }

  html.orby-home-scroll
    .dropzone
    > .dropzone-hero-deco
    .dropzone-hero-deco__slot--ll
    .dropzone-hero-deco__img {
    transform: translate(-6%, -2%) scale(calc(2 * var(--drop-hero-deco-wide-factor)));
    transform-origin: 0% 0%;
  }
}

/* Hero credits — right gutter; 1fr | auto | 1fr pins copy to viewport vertical center */
body.dropzone-visible #dropzone > .dropzone-hero-credits {
  position: absolute;
  top: 0;
  right: var(--orby-hero-credit-inset);
  bottom: 0;
  left: auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-columns: max-content;
  justify-items: end;
  width: max-content;
  max-width: none;
  z-index: 3;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

body:not(.dropzone-visible) .dropzone-hero-credits,
html:not(.orby-home-scroll) .dropzone-hero-credits {
  display: none;
}

.dropzone-hero-credit {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--text-dim) 50%, var(--orby-app-bg));
  font-size: var(--orby-marketing-support-size, 12px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* Center on the inline (vertical) axis so the column grows equally up/down */
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: text;
  pointer-events: auto;
}

.dropzone-hero-credit__label,
.dropzone-hero-credit__sep {
  color: inherit;
}

.dropzone-hero-credit a {
  color: var(--text-link);
  /* No underline — vertical-rl + word-stagger spans leak purple decoration pixels at link starts */
  text-decoration: none;
}

.dropzone-hero-credit a:hover,
.dropzone-hero-credit a:focus-visible {
  color: var(--brand-primary);
}

@media (min-width: 1920px) and (max-width: 2559px) {
  .dropzone-hero-credit {
    font-size: 12px;
  }
}

/*
 * Below 1920 — MacBook band (~1710): corner art, credits, fine-tuned positions.
 * 1920–2560 rules above are unchanged.
 */
@media (max-width: 1919px) {
  html:not(.mobile-landing) .dropzone {
    --drop-hero-deco-narrow-scale: clamp(0.78, calc(100vw / 1920px), 1);
    --drop-hero-deco-ramp: 0;
    --drop-hero-deco-wide-factor: calc(0.936 * var(--drop-hero-deco-narrow-scale));
    /* Frost frame + inner copy — 48px taller total (−24px top/bottom inset) */
    --dropzone-padding-y: max(0.35rem, calc(var(--orby-home-padding-y) - 24px));
  }

  html:not(.mobile-landing) body.dropzone-visible #dropzone > .dropzone-hero-credits {
    --orby-hero-credit-inset: var(--orby-marketing-edge-inset, var(--orby-hero-credit-inset));
  }

  html:not(.mobile-landing) .dropzone-hero-credit {
    font-size: 14px;
  }

  /* Girl (UR) — +50px down, +100px right vs 1920-band anchor */
  html:not(.mobile-landing) .dropzone-hero-deco__slot--ur {
    top: calc(-150px * var(--drop-hero-deco-narrow-scale) + 50px);
    right: calc(-100px * var(--drop-hero-deco-narrow-scale) - 100px);
  }

  html:not(.orby-home-scroll):not(.mobile-landing) .dropzone-hero-deco__slot--ll {
    bottom: calc(-160px * var(--drop-hero-deco-narrow-scale) - 40px);
    left: calc(90px * var(--drop-hero-deco-narrow-scale) - 100px);
  }

  /* Dragon (LL) — +190px down, −100px left vs 1920-band anchor */
  html.orby-home-scroll:not(.mobile-landing)
    .dropzone
    > .dropzone-hero-deco
    .dropzone-hero-deco__slot--ll {
    top: calc(190px * var(--drop-hero-deco-narrow-scale) + 190px);
    left: calc(60px * var(--drop-hero-deco-narrow-scale) - 100px);
  }

  html.orby-home-scroll:not(.mobile-landing)
    .dropzone
    > .dropzone-hero-deco
    .dropzone-hero-deco__slot--ll
    .dropzone-hero-deco__img {
    transform: translate(-6%, -2%) scale(calc(2 * var(--drop-hero-deco-wide-factor)));
    transform-origin: 0% 0%;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  border: 0;
  white-space: nowrap;
}

.dropzone.drag-active::before {
  filter: brightness(1.1) saturate(1.2);
  box-shadow:
    0 0 var(--dropzone-drag-rim-cyan-a) color-mix(in srgb, #00eaff 42%, transparent),
    0 0 var(--dropzone-drag-rim-cyan-b) color-mix(in srgb, var(--brand-primary) 28%, transparent),
    0 0 var(--dropzone-drag-rim-cyan-c) color-mix(in srgb, var(--orby-magic-accent, var(--orby-purple-bright)) 16%, transparent);
}

/* Pause Browse pill glow spins while scrolling; Lottie paused in StartMenuController */
html.orby-dropzone-glow-scrolling body.dropzone-visible .orby-magic-btn::before,
html.orby-dropzone-glow-scrolling body.dropzone-visible .orby-magic-btn::after {
  animation-play-state: paused;
}

html.orby-dropzone-glow-off-screen body.dropzone-visible .orby-magic-btn::before,
html.orby-dropzone-glow-off-screen body.dropzone-visible .orby-magic-btn::after,
html.orby-dropzone-glow-tab-hidden body.dropzone-visible .orby-magic-btn::before,
html.orby-dropzone-glow-tab-hidden body.dropzone-visible .orby-magic-btn::after {
  animation-play-state: paused;
}

html.orby-window-resizing body.dropzone-visible .orby-magic-btn::before,
html.orby-window-resizing body.dropzone-visible .orby-magic-btn::after {
  animation-play-state: paused;
}

/* Reduced tier — solid frame fill instead of live backdrop-filter over hero deco */
html.orby-marketing-reduced body.dropzone-visible .dropzone::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --dropzone-frost-fill: var(--orby-app-bg);
}

.drop-logo {
  /* Full size @ 2560; scales down 2560→1920 via --drop-hero-wide-factor */
  width: min(
    92%,
    calc(
      clamp(
          var(--drop-logo-min),
          max(
            calc(100vw * var(--drop-logo-vw-ratio)),
            calc(17.19 * 1cqi)
          ),
          var(--drop-logo-max)
        ) * var(--drop-hero-wide-factor)
    ),
    48vh
  );
  height: auto;
  margin-bottom: 0;
  opacity: 0;
  transform: scale(0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
}

.drop-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.drop-logo.reveal {
  animation: logotypeReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.drop-primary {
  font-family: var(--brand-font-headline);
  font-weight: 700;
  font-size: clamp(
    calc(var(--drop-headline-min) * var(--drop-hero-wide-factor)),
    min(
      calc(var(--drop-headline-max) * var(--drop-hero-wide-factor)),
      calc(var(--drop-headline-vw) * 1vw * var(--drop-hero-wide-factor)),
      calc(
        (var(--drop-headline-cqi-cap) * 1cqi + var(--drop-headline-offset)) *
          var(--drop-hero-wide-factor)
      )
    ),
    calc(var(--drop-headline-max) * var(--drop-hero-wide-factor))
  );
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(-15px);
  animation: dropReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
  max-width: 92%;
  line-height: 1.2;
  text-align: center;
}

.drop-primary-line {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

.drop-primary-line--second {
  margin-top: 0.06em;
}

@supports not (container-type: inline-size) {
  .drop-logo {
    width: min(
      92%,
      calc(
        max(
            var(--drop-logo-min),
            min(var(--drop-logo-max), calc(100vw * var(--drop-logo-vw-ratio)))
          ) * var(--drop-hero-wide-factor)
      ),
      48vh
    );
  }

  .drop-primary {
    font-size: clamp(
      calc(var(--drop-headline-min) * var(--drop-hero-wide-factor)),
      min(
        calc(var(--drop-headline-max) * var(--drop-hero-wide-factor)),
        calc(var(--drop-headline-vw) * 1vw * var(--drop-hero-wide-factor))
      ),
      calc(var(--drop-headline-max) * var(--drop-hero-wide-factor))
    );
  }
}

.brand-highlight {
  color: var(--brand-primary);
}

.drop-secondary strong.brand-highlight {
  font-weight: 700;
}

/* Construction notice on dropzone secondary copy */
.drop-secondary .drop-under-construction {
  color: var(--orby-pink);
  font-weight: 700;
}

.drop-secondary {
  color: var(--text-dim);
  font-size: var(
    --orby-dropzone-secondary-size,
    var(--orby-marketing-support-size, clamp(0.75rem, 1.2vw, 0.9rem))
  );
  letter-spacing: -0.01em;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-10px);
  animation: dropReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards;
  margin-top: calc(clamp(0.65rem, 2vmin, 1.1rem) + 1.5em);
  margin-top: calc(clamp(0.65rem, 2vmin, 1.1rem) + 1lh);
  /* Responsive margin: scales down on smaller screens */
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  max-width: min(52rem, 92vw);
}

.drop-shortcuts-inline strong {
  color: var(--accent);
  font-weight: 700;
}

.drop-note {
  color: var(--text-dim);
  /* Responsive font size: scales down on smaller screens */
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  letter-spacing: -0.01em;
  text-align: center;
  opacity: 0;
  transform: translateY(-10px);
  animation: dropReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
  /* Responsive max-width: scales down on smaller screens */
  max-width: clamp(90%, 85vw, 680px);
  line-height: 1.5;
}

body:not(.dropzone-visible) .drop-secondary {
  opacity: 0;
  pointer-events: none;
}

/* Desktop dropzone — headline uses GSAP word stagger; other intro blocks use scripted fades (same order as legacy CSS timeline) */
#dropzone .orby-stagger-word {
  display: inline-block;
}

html:not(.mobile-landing) .drop-primary {
  opacity: 0;
  transform: none;
  animation: none !important;
}

html:not(.mobile-landing) .drop-secondary {
  opacity: 0;
  transform: translateY(-10px);
  animation: none !important;
}

html:not(.mobile-landing) .dropzone-actions .orby-magic-btn,
html:not(.mobile-landing) .dropzone-btn:not(.orby-magic-btn) {
  animation: none !important;
  opacity: 0;
  transform: translateY(-15px);
}

html:not(.mobile-landing) .dropzone-hero-credit {
  opacity: 0;
  animation: none !important;
}

html:not(.mobile-landing) .dropzone-hero-credit .orby-stagger-word {
  display: inline-block;
}

/* Narrow or short desktop windows: hide keyboard legend; less bottom margin on secondary
   so logo + copy stay visually centered in the dropzone */
@media (max-width: 1140px), (max-height: 950px) {
  html:not(.mobile-landing) body.dropzone-visible .drop-shortcuts-row {
    display: none !important;
  }

  html:not(.mobile-landing) body.dropzone-visible .drop-secondary {
    margin-bottom: clamp(0.35rem, 1.5vw, 0.85rem);
  }
}

.shelf {
  /* Inset of panel box from the browser chrome (top / right / bottom) — --shelf-inset on :root / html */
  /* ── Control row layout (.select-line, .color-line, .map-slot-row) — 3-col grid.
   * .slider-line with range: stacked header + full-width track.
   * .slider-line without range: --shelf-row-grid-toggle (label | control). See .cursor/rules/shelf-non-slider-rows.mdc */
  --shelf-row-value-col: 2.5rem;
  --slider-value-col: var(--shelf-row-value-col);
  --shelf-row-label-col: minmax(0, 1fr);
  --shelf-row-control-col: minmax(0, 1fr);
  --shelf-slider-stack-gap: calc(0.4rem + var(--shelf-vertical-extra)); /* label/value row → track */
  /* Figma-style pill slider — track height = thumb diameter */
  --shelf-slider-size: 12px;
  --shelf-slider-size-muted: 10px;
  --shelf-slider-track-bg: var(--ui-control-surface);
  --shelf-slider-track-bg-muted: color-mix(in srgb, var(--text-dim) 28%, transparent);
  /* WebKit centering: margin-top = (trackH − thumbH) / 2. Pill rail: track === thumb → 0. */
  --shelf-slider-thumb-offset: calc((var(--shelf-slider-size) - var(--shelf-slider-size)) / 2);
  --shelf-row-col-gap: 0.45rem;
  --shelf-row-grid: var(--shelf-row-label-col) var(--shelf-row-control-col) var(--shelf-row-value-col);
  --shelf-place-label: 1;
  --shelf-place-control: 2;
  --shelf-place-value: 3;
  --shelf-span-control: 2;
  --shelf-span-control-full: 2 / -1;
  --shelf-span-label-toggle: 1 / 3;
  /* Non-slider rows: label spans former slider column — toggle/select/color sit in value col */
  --shelf-span-label-wide: 1 / 3;
  --shelf-row-grid-toggle: minmax(0, 1fr) auto;
  --shelf-toggle-track-height: calc(0.65rem + 0.5rem);
  --shelf-dropdown-pill-height: var(--orby-dropdown-height);
  --shelf-select-inner-stroke: 2px;
  --shelf-vertical-extra: 4px; /* +breathing room on vertical shelf rhythm */
  /* Vertical rhythm — 28px @ 2560 ref (24 + --shelf-vertical-extra): headlines, dividers, control rows */
  --shelf-section-gap: calc(24px + var(--shelf-vertical-extra));
  /* Card inset from shelf chrome — independent of section gap */
  --shelf-shell-rhythm: 12px;
  --shelf-control-gap: var(--shelf-section-gap); /* same rhythm as control rows — flex stacks, export groups, foldouts */
  --shelf-pill-grid-gap: 0.4rem; /* horizontal gap in .segmented + .export-button-group (Turntable, Export pills) */
  --shelf-rhythm: var(--shelf-shell-rhythm);
  --shelf-g: calc(var(--shelf-rhythm) / 2);
  --shelf-panel-gutter: calc(var(--shelf-shell-rhythm) * 14 / 12);
  /* Stacked .accent-action-btn rows — same rhythm as card-to-card section gutter */
  --shelf-accent-action-gap: var(--shelf-panel-gutter);
  /* Inset inside lighter panel cards (.panel-block) */
  --shelf-card-padding: 1.2rem;
  /* Headline inset — match card horizontal padding for symmetric section headers */
  --shelf-section-inset: var(--shelf-card-padding); /* horizontal card inset only — not vertical headline rhythm */
  --shelf-scrollbar-edge-offset: 12px;
  --shelf-scroll-end-pad: calc(1.25rem + var(--shelf-vertical-extra));
  /* Panel footer: last card → version line, logo → shelf bottom (symmetrical) */
  --shelf-footer-outer-gap: calc(1.75rem + var(--shelf-vertical-extra));
  /* HDRI grid (Studio tab) — 2560×1440 reference */
  --shelf-hdri-sphere-img: 78px;
  --shelf-hdri-sphere-ring: 92px;
  --shelf-hdri-grid-gap-x: 1rem;
  --shelf-hdri-grid-gap-y: 32px; /* thumbnail edge-to-edge @ 2560×1440 */
  /* Shader Lab + Object Display pickers — smaller (4-up / dense grids) */
  --shelf-picker-sphere-img: 54px;
  --shelf-picker-sphere-ring: 70px;
  --shelf-sphere-ring-border: 3px;
  --shelf-picker-grid-gap: 8px;
  /* Match show ↔ hide: opacity/transform animate; visibility must not flip until the hide finishes */
  --shelf-reveal-dur: 0.45s;
  --shelf-reveal-ease: cubic-bezier(0.4, 0, 0.2, 1);
  width: clamp(320px, 23vw, 380px);
  background: var(--ui-frosted-bg);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  /* Fallback for browsers without dvh, then prefer dynamic viewport height */
  height: calc(100vh - 2 * var(--shelf-inset));
  height: calc(100dvh - 2 * var(--shelf-inset));
  /* --shelf-panel-gutter inset: sole H gutter for scroll cards (.panels does not add horizontal pad) */
  padding: var(--shelf-panel-gutter) var(--shelf-panel-gutter) 0 var(--shelf-panel-gutter);
  position: absolute;
  top: var(--shelf-inset);
  right: var(--shelf-inset);
  border-radius: var(--app-settings-chrome-radius);
  border: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  /* Explicit so first reveal after load isn’t stuck behind inherited visibility from the hidden state */
  visibility: visible;
  transition: opacity var(--shelf-reveal-dur) var(--shelf-reveal-ease),
    transform var(--shelf-reveal-dur) var(--shelf-reveal-ease),
    visibility 0s;
  overflow: hidden;
}

.shelf.is-shelf-hidden {
  opacity: 0;
  transform: translate3d(36px, 0, 0);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--shelf-reveal-dur) var(--shelf-reveal-ease),
    transform var(--shelf-reveal-dur) var(--shelf-reveal-ease),
    visibility 0s linear var(--shelf-reveal-dur);
}

html:not(.mobile-landing) .shelf {
  font-size: calc(1rem * var(--studio-ui-scale));
  --shelf-vertical-extra: calc(4px * var(--studio-ui-scale));
  /* 28px @ 2560, ~23px @ 1920 (includes --shelf-vertical-extra) */
  --shelf-section-gap: calc(
    19.2px + 4.8px * max(0, (var(--studio-ui-scale) - 0.75) / 0.25) + var(--shelf-vertical-extra)
  );
  --shelf-shell-rhythm: calc(10px + 2px * max(0, (var(--studio-ui-scale) - 0.75) / 0.25));
  --shelf-g: calc(var(--shelf-shell-rhythm) / 2);
  --shelf-rhythm: var(--shelf-shell-rhythm);
  --shelf-panel-gutter: calc(var(--shelf-shell-rhythm) * 14 / 12);
  /* 16px @ 1920, 1.2rem @ 2560 — card inner gutter */
  --shelf-card-padding: calc(16px + 3.2px * max(0, (var(--studio-ui-scale) - 0.75) / 0.25));
  --shelf-section-inset: var(--shelf-card-padding); /* horizontal card inset only — not vertical headline rhythm */
  --shelf-scrollbar-edge-offset: calc(12px * var(--studio-ui-scale));
  --shelf-scroll-end-pad: calc(1.25rem * var(--studio-ui-scale) + var(--shelf-vertical-extra));
  --shelf-footer-outer-gap: calc(1.75rem * var(--studio-ui-scale) + var(--shelf-vertical-extra));
  --shelf-hdri-sphere-img: round(78px * var(--studio-ui-scale), 1px);
  --shelf-hdri-sphere-ring: round(92px * var(--studio-ui-scale), 1px);
  --shelf-hdri-grid-gap-x: calc(1rem * var(--studio-ui-scale));
  --shelf-hdri-grid-gap-y: round(calc(32px * var(--studio-ui-scale)), 1px);
  --shelf-picker-sphere-img: round(54px * var(--studio-ui-scale), 1px);
  --shelf-picker-sphere-ring: round(70px * var(--studio-ui-scale), 1px);
  --shelf-sphere-ring-border: round(3px * var(--studio-ui-scale), 1px);
  --shelf-picker-grid-gap: calc(8px * var(--studio-ui-scale));
  --shelf-toggle-track-height: calc(1.15rem * var(--studio-ui-scale));
  --shelf-dropdown-pill-height: calc(var(--orby-dropdown-height) * var(--studio-ui-scale));
  --shelf-select-inner-stroke: calc(2px * var(--studio-ui-scale));
  --shelf-slider-stack-gap: calc(0.4rem * var(--studio-ui-scale) + var(--shelf-vertical-extra));
  --shelf-slider-size: calc(12px * var(--studio-ui-scale));
  --shelf-slider-size-muted: calc(10px * var(--studio-ui-scale));
  width: calc(380px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf.is-shelf-hidden {
  transform: translate3d(calc(36px * var(--studio-ui-scale)), 0, 0);
}

html:not(.mobile-landing) .shelf .tab i {
  font-size: calc(20px * var(--studio-ui-scale)) !important;
  width: calc(20px * var(--studio-ui-scale)) !important;
  height: calc(20px * var(--studio-ui-scale)) !important;
}

html:not(.mobile-landing) .shelf .accent-action-btn i {
  font-size: calc(12px * var(--studio-ui-scale)) !important;
  width: calc(12px * var(--studio-ui-scale)) !important;
  height: calc(12px * var(--studio-ui-scale)) !important;
}

html:not(.mobile-landing) .shelf .panel-block {
  border-radius: calc(6px * var(--studio-ui-scale));
  contain-intrinsic-size: auto calc(400px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .color-chip {
  height: calc(18px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf input.color-chip:not(.is-disabled-handle):is(:hover, :focus-visible) {
  width: calc(var(--color-chip-w) + 8px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .rotation-notch {
  width: calc(26px * var(--studio-ui-scale));
  height: calc(22px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .rotation-notch i {
  width: calc(16px * var(--studio-ui-scale));
  height: calc(16px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .slider-line input[type='range'] {
  height: var(--shelf-slider-size);
}

html:not(.mobile-landing) .shelf .slider-line input[type='range']::-webkit-slider-runnable-track,
html:not(.mobile-landing) .shelf .slider-line input[type='range']::-moz-range-progress {
  background: transparent;
}

html:not(.mobile-landing) .shelf .slider-line input[type='range']::-moz-range-track {
  height: var(--shelf-slider-size);
  border-radius: calc(var(--shelf-slider-size) / 2);
}

html:not(.mobile-landing) .shelf .slider-line input[type='range']::-webkit-slider-thumb {
  width: var(--shelf-slider-size);
  height: var(--shelf-slider-size);
  margin-top: var(--shelf-slider-thumb-offset, 0);
}

html:not(.mobile-landing) .shelf .slider-line input[type='range']::-moz-range-thumb {
  width: var(--shelf-slider-size);
  height: var(--shelf-slider-size);
  transform: translateY(var(--shelf-slider-thumb-offset, 0));
}

html:not(.mobile-landing) .shelf .subsection.is-muted .slider-line input[type='range'],
html:not(.mobile-landing) .shelf .panel-block.is-muted .slider-line input[type='range'],
html:not(.mobile-landing) .shelf .slider-line.is-muted input[type='range'],
html:not(.mobile-landing) .shelf .is-muted .slider-line input[type='range'] {
  height: var(--shelf-slider-size);
}

html:not(.mobile-landing) .shelf .subsection.is-muted .slider-line input[type='range']::-webkit-slider-runnable-track,
html:not(.mobile-landing) .shelf .panel-block.is-muted .slider-line input[type='range']::-webkit-slider-runnable-track,
html:not(.mobile-landing) .shelf .slider-line.is-muted input[type='range']::-webkit-slider-runnable-track,
html:not(.mobile-landing) .shelf .is-muted .slider-line input[type='range']::-webkit-slider-runnable-track,
html:not(.mobile-landing) .shelf .subsection.is-muted .slider-line input[type='range']::-moz-range-track,
html:not(.mobile-landing) .shelf .panel-block.is-muted .slider-line input[type='range']::-moz-range-track,
html:not(.mobile-landing) .shelf .slider-line.is-muted input[type='range']::-moz-range-track,
html:not(.mobile-landing) .shelf .is-muted .slider-line input[type='range']::-moz-range-track {
  height: var(--shelf-slider-size);
  border-radius: calc(var(--shelf-slider-size) / 2);
}

html:not(.mobile-landing) .shelf .subsection.is-muted .slider-line input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .panel-block.is-muted .slider-line input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .slider-line.is-muted input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .is-muted .slider-line input[type='range']::-webkit-slider-thumb {
  width: var(--shelf-slider-size);
  height: var(--shelf-slider-size);
  margin-top: var(--shelf-slider-thumb-offset, 0);
}

html:not(.mobile-landing) .shelf .subsection.is-muted .slider-line input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .panel-block.is-muted .slider-line input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .slider-line.is-muted input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .is-muted .slider-line input[type='range']::-moz-range-thumb {
  width: var(--shelf-slider-size);
  height: var(--shelf-slider-size);
  transform: translateY(var(--shelf-slider-thumb-offset, 0));
}

html:not(.mobile-landing) .shelf input[type='range']::-webkit-slider-thumb {
  width: calc(12px * var(--studio-ui-scale));
  height: calc(12px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .slider-line input[type='range']::-webkit-slider-thumb {
  margin-top: var(--shelf-slider-thumb-offset, 0);
}

html:not(.mobile-landing) .shelf input[type='range']::-moz-range-thumb {
  width: calc(12px * var(--studio-ui-scale));
  height: calc(12px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .subsection.is-muted .slider-line input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .panel-block.is-muted .slider-line input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .slider-line.is-muted input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .is-muted .slider-line input[type='range']::-webkit-slider-thumb {
  width: calc(12px * var(--studio-ui-scale));
  height: calc(12px * var(--studio-ui-scale));
  margin-top: var(--shelf-slider-thumb-offset, 0);
}

html:not(.mobile-landing) .shelf .subsection.is-muted .slider-line input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .panel-block.is-muted .slider-line input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .slider-line.is-muted input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .is-muted .slider-line input[type='range']::-moz-range-thumb {
  width: calc(12px * var(--studio-ui-scale));
  height: calc(12px * var(--studio-ui-scale));
  transform: translateY(var(--shelf-slider-thumb-offset, 0));
}

html:not(.mobile-landing) .shelf .slider-line--temperature input[type='range'],
html:not(.mobile-landing) .shelf .slider-line--tint input[type='range'],
html:not(.mobile-landing) .shelf .slider-line--saturation input[type='range'] {
  height: var(--shelf-gradient-rail-thumb-size);
}

html:not(.mobile-landing) .shelf .slider-line--temperature input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .slider-line--tint input[type='range']::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .slider-line--saturation input[type='range']::-webkit-slider-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  margin-top: var(--shelf-gradient-rail-thumb-offset);
}

html:not(.mobile-landing) .shelf .slider-line--temperature input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .slider-line--tint input[type='range']::-moz-range-thumb,
html:not(.mobile-landing) .shelf .slider-line--saturation input[type='range']::-moz-range-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  transform: translateY(var(--shelf-gradient-rail-thumb-offset));
}

html:not(.mobile-landing) .shelf .slider-line .value-inline-input {
  width: calc(4.25rem * var(--studio-ui-scale));
  min-width: calc(2.75rem * var(--studio-ui-scale));
  max-width: calc(4.25rem * var(--studio-ui-scale));
  height: calc(16px * var(--studio-ui-scale));
  border-radius: calc(4px * var(--studio-ui-scale));
}

/* Toggles use rem (root-sized) — scale track/thumb with studio factor */
html:not(.mobile-landing) .shelf .effect-toggle {
  --toggle-thumb-size: calc(var(--toggle-track-height) - 0.3rem * var(--studio-ui-scale));
  --toggle-thumb-offset: calc(0.15rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .effect-toggle .effect-indicator::before {
  box-shadow: 0 calc(2px * var(--studio-ui-scale)) calc(4px * var(--studio-ui-scale))
    rgba(0, 0, 0, 0.2);
}

html:not(.mobile-landing) .shelf .effect-toggle input:focus-visible + .effect-indicator {
  outline-width: calc(2px * var(--studio-ui-scale));
  outline-offset: calc(2px * var(--studio-ui-scale));
}

/* Tab headline (Object, Studio, …) — 28px @ 2560; scales with --studio-ui-scale */
html:not(.mobile-landing) .shelf .panel-header-title {
  font-size: var(--shelf-tab-title-font-size);
  margin: 0.95rem 0 var(--shelf-section-gap) 0;
}

html:not(.mobile-landing) .shelf .hdri-grid {
  gap: var(--shelf-hdri-grid-gap-y) var(--shelf-hdri-grid-gap-x);
  margin-bottom: var(--shelf-section-gap);
  padding: calc(0.75rem * var(--studio-ui-scale)) 0 0;
}

html:not(.mobile-landing) .shelf .mode-icons,
html:not(.mobile-landing) .shelf #creativeLookGrid .hdri-grid {
  gap: var(--shelf-picker-grid-gap);
  padding: 0;
}

/* Shader Lab — grouped preset sections + 4-up picker grid per section */
.creative-look-grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--shelf-section-gap) * 0.85);
  margin-bottom: var(--shelf-section-gap);
}

.creative-look-grid-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--shelf-section-gap) * 0.45);
}

.creative-look-grid-section-label {
  margin: 0;
  font-size: var(--shelf-label-font-size);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}

#creativeLookGrid .hdri-grid {
  /* Fixed tracks — match Object Display; equal H/V edge-to-edge via --shelf-picker-grid-gap */
  grid-template-columns: repeat(4, var(--shelf-picker-sphere-ring));
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: var(--shelf-picker-grid-gap);
  padding: 0;
  margin-bottom: 0;
}

html:not(.mobile-landing) .shelf .hdri-icon--upload .hdri-icon__plus {
  font-size: calc(1.45rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .hdri-icon--upload .hdri-icon__check {
  font-size: calc(1.35rem * var(--studio-ui-scale));
}

/* Scene / Object accent buttons — card-to-card gutter rhythm */
html:not(.mobile-landing) .shelf .scene-controls,
html:not(.mobile-landing) .shelf .scene-controls,
html:not(.mobile-landing) .shelf .export-controls:not(:has(> .export-option-group, > .export-section-title)),
html:not(.mobile-landing) .shelf .map-slots-action-row {
  gap: var(--shelf-accent-action-gap);
}

html:not(.mobile-landing) .shelf .export-controls:has(> .export-option-group, > .export-section-title),
html:not(.mobile-landing) .shelf .export-controls:has(> .panel-block-divider) {
  gap: var(--shelf-section-gap);
}

html:not(.mobile-landing) .shelf .accent-action-btn {
  padding: calc(0.5rem * var(--studio-ui-scale)) calc(1rem * var(--studio-ui-scale));
  min-height: calc(2.5rem * var(--studio-ui-scale));
  gap: calc(0.4rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .select-line select {
  font-size: var(--shelf-headline-font-size);
  height: var(--shelf-dropdown-pill-height);
  min-height: var(--shelf-dropdown-pill-height);
  padding-block: 0;
  line-height: var(--shelf-dropdown-pill-height);
  padding-inline: calc(0.65rem * var(--studio-ui-scale)) calc(1.35rem * var(--studio-ui-scale));
  background-position: right calc(0.45rem * var(--studio-ui-scale)) center;
  background-size: calc(10px * var(--studio-ui-scale)) calc(10px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .select-line select:focus-visible {
  background-color: var(--ui-control-surface-hover);
}

html:not(.mobile-landing) .shelf .font-extrude-family-trigger {
  font-size: var(--shelf-headline-font-size);
  min-height: var(--shelf-dropdown-pill-height);
  height: var(--shelf-dropdown-pill-height);
  padding-block: 0;
  padding-inline: calc(0.65rem * var(--studio-ui-scale)) calc(1.35rem * var(--studio-ui-scale));
  background-position: right calc(0.45rem * var(--studio-ui-scale)) center;
  background-size: calc(10px * var(--studio-ui-scale)) calc(10px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .font-extrude-family-trigger:focus-visible {
  background-color: var(--ui-control-surface-hover);
}

/* Segmented pills (Turntable, etc.) — min-height/padding were root rem */
html:not(.mobile-landing) .shelf .segmented {
  gap: calc(var(--shelf-pill-grid-gap) * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .segmented label {
  padding: calc(0.5rem * var(--studio-ui-scale)) calc(0.4rem * var(--studio-ui-scale));
  min-height: calc(2.5rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .export-option-btn {
  padding: calc(0.5rem * var(--studio-ui-scale)) calc(0.4rem * var(--studio-ui-scale));
  min-height: calc(2.5rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .export-button-group {
  gap: calc(var(--shelf-pill-grid-gap) * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .info-version-tag {
  font-size: calc(0.69rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .info-orby-mark {
  margin-top: calc(1.65rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .info-orby-mark img {
  width: calc(28px * var(--studio-ui-scale));
  height: calc(28px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .info-orby-mark:focus-visible {
  outline-offset: calc(3px * var(--studio-ui-scale));
}

/* Information tab — prose/shortcuts use root rem or inline px */
html:not(.mobile-landing) .shelf .panel[data-panel='info'] .about-content {
  font-size: calc(0.9rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .about-content h4 {
  font-size: calc(0.95rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .about-content ul.info-prose-nested {
  padding-left: calc(1.5rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .about-content kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(1.5rem * var(--studio-ui-scale));
  height: calc(1.35rem * var(--studio-ui-scale));
  padding: 0 calc(0.35rem * var(--studio-ui-scale));
  margin: 0 calc(0.1rem * var(--studio-ui-scale));
  border: 1px solid var(--stroke);
  border-radius: calc(4px * var(--studio-ui-scale));
  background: rgba(255, 255, 255, 0.1);
  font-family: 'Geist Mono', 'SF Mono', ui-monospace, 'Menlo', 'Courier New', monospace;
  font-size: calc(0.7rem * var(--studio-ui-scale));
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 calc(1px * var(--studio-ui-scale)) calc(2px * var(--studio-ui-scale))
    rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .bug-report-panel-description {
  font-size: calc(0.88rem * var(--studio-ui-scale));
  margin-bottom: var(--shelf-section-gap);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .shortcut-note {
  font-size: calc(0.75rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .shortcuts-grid {
  gap: 0;
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .shortcut-row {
  gap: calc(1rem * var(--studio-ui-scale));
  padding-top: 0;
  padding-bottom: calc(var(--shelf-section-gap) / 2);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .shortcut-row:last-child {
  padding-bottom: 0;
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .shortcut-row + .shortcut-row,
html:not(.mobile-landing)
  .shelf
  .panel[data-panel='info']
  .panel-block
  + .panel-block:not(:has(> .block-title))
  > .shortcuts-grid
  > .shortcut-row:first-child {
  border-top: 1px solid var(--stroke);
  padding-top: calc(var(--shelf-section-gap) / 2);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .shortcut-keys kbd {
  min-width: calc(1.75rem * var(--studio-ui-scale));
  height: calc(1.75rem * var(--studio-ui-scale));
  padding: 0 calc(0.5rem * var(--studio-ui-scale));
  font-size: calc(0.75rem * var(--studio-ui-scale));
  border-radius: calc(4px * var(--studio-ui-scale));
  box-shadow: 0 calc(1px * var(--studio-ui-scale)) calc(2px * var(--studio-ui-scale))
    rgba(0, 0, 0, 0.1);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-list {
  gap: var(--shelf-section-gap);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-list dt {
  margin-bottom: calc(0.25rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-list dd {
  margin: 0;
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-logotype-container {
  padding: calc(2rem * var(--studio-ui-scale)) calc(1rem * var(--studio-ui-scale));
  margin-bottom: var(--shelf-section-gap);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-logotype {
  width: var(--info-logotype-width);
  max-width: var(--info-logotype-width);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .microcopy {
  font-size: calc(0.75rem * var(--studio-ui-scale));
  margin-bottom: var(--shelf-section-gap);
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .panel-header p {
  font-size: calc(0.65rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-panel-block--compact {
  contain-intrinsic-size: auto calc(11rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-panel-block--medium {
  contain-intrinsic-size: auto calc(17rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-panel-block--tall {
  contain-intrinsic-size: auto calc(26rem * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .panel[data-panel='info'] .info-panel-block--faq-part {
  contain-intrinsic-size: auto calc(20rem * var(--studio-ui-scale));
}

/* Viewport chrome (studio) — dropzone keeps its own hero scale */
html:not(.mobile-landing) .viewport > .viewport-fullscreen-btn {
  top: calc(1.2rem * var(--studio-ui-scale));
  left: calc(1.5rem * var(--studio-ui-scale));
  width: calc(32px * var(--studio-ui-scale));
  height: calc(32px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .viewport > .viewport-fullscreen-btn i {
  font-size: calc(14px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .viewport > .demo-logotype {
  bottom: var(--viewport-chrome-inset-y);
  left: var(--viewport-chrome-inset-x);
  width: min(
    calc(440px * var(--studio-ui-scale)),
    calc(100vw - 2rem * var(--studio-ui-scale)),
    max(calc(160px * var(--studio-ui-scale)), calc(38vw * var(--studio-ui-scale)))
  );
  max-width: calc(440px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .viewport-load-spinner {
  position: fixed;
  bottom: calc(
    max(var(--viewport-chrome-inset-y), env(safe-area-inset-bottom, 0px)) +
      var(--viewport-load-spinner-lift)
  );
  left: max(var(--viewport-chrome-inset-x), env(safe-area-inset-left, 0px));
  z-index: 16;
  gap: calc(12px * var(--studio-ui-scale));
  width: auto;
  height: calc(70px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .viewport-load-spinner img {
  width: calc(70px * var(--studio-ui-scale));
  height: calc(70px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .viewport-load-spinner__elapsed {
  font-size: calc(22px * var(--studio-ui-scale));
}

@media (prefers-reduced-motion: reduce) {
  .shelf,
  .shelf.is-shelf-hidden {
    transition: none;
  }
}

.tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: calc(-1 * var(--shelf-panel-gutter)) calc(-1 * var(--shelf-panel-gutter)) 0
    calc(-1 * var(--shelf-panel-gutter));
  padding: 0;
  background: transparent;
}

.tab {
  /* Inherit shelf frosted shell — no solid tab bar fill */
  background-color: transparent;
  border: none;
  color: var(--text-dim);
  padding: var(--shelf-section-gap) 0;
  font-size: var(--shelf-label-font-size);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-radius 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 1;
}

.tab:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--brand-primary);
}

/* Tab icons - larger size (20px) */
.tab i {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tab.active {
  color: var(--brand-text);
  background-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.tab.active:first-child {
  border-top-left-radius: var(--app-settings-chrome-radius);
}

.tab.active:last-child {
  border-top-right-radius: var(--app-settings-chrome-radius);
}

.tab.active i {
  stroke: var(--brand-text);
}

.shortcuts-grid {
  display: grid;
  gap: 0;
  margin: 0;
}

.shortcut-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-top: 0;
  padding-bottom: calc(var(--shelf-section-gap) / 2);
}

.shortcut-row:last-child {
  padding-bottom: 0;
}

/* Divider centered in 24px band — half padding above/below each rule */
.shortcut-row + .shortcut-row,
.panel-block + .panel-block:not(:has(> .block-title)) > .shortcuts-grid > .shortcut-row:first-child {
  border-top: 1px solid var(--stroke);
  padding-top: calc(var(--shelf-section-gap) / 2);
}

.shortcut-action {
  color: var(--text);
  font-size: var(--shelf-label-font-size);
  line-height: 1.4;
}

.shortcut-note {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.1rem;
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-size: var(--shelf-label-font-size);
  color: var(--text);
}

.shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--stroke);
  border-radius: 4px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', ui-monospace, 'Menlo', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shortcut-keys kbd:only-child {
  min-width: auto;
}

.info-logotype-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  margin-bottom: var(--shelf-section-gap);
  overflow: hidden;
}

.info-logotype {
  width: var(--info-logotype-width, 66%);
  max-width: var(--info-logotype-width, 66%);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.info-logotype svg {
  width: 100%;
  height: auto;
  display: block;
}

.info-list {
  display: grid;
  gap: var(--shelf-section-gap);
  margin: 0;
}

.info-list dt {
  font-weight: 600;
  color: var(--text);
  font-size: var(--shelf-label-font-size);
  margin-bottom: 0.25rem;
}

.info-list dd {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--shelf-label-font-size);
  line-height: 1.4;
}

.info-list dd:last-child {
  margin-bottom: 0;
}

.about-content {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Prose / inline anchors — shared with .drop-link, Information tab, modals */
.about-content a,
.about-content a:visited,
a,
a:visited {
  color: var(--text-link);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--text-link-hover);
  opacity: 1;
}

.about-highlight {
  color: #fff;
  font-weight: 700;
}

/* Credit / bold links: same purple → lime as other text links */
a.about-highlight {
  color: var(--text-link);
  font-weight: 700;
}

a.about-highlight:hover,
a.about-highlight:focus-visible {
  color: var(--text-link-hover);
}

.microcopy {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0 0 var(--shelf-section-gap);
}

.about-content p {
  margin: 0 0 1rem 0;
}

.about-content p:last-child {
  margin-bottom: 0;
}

.about-content code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Geist Mono', ui-monospace, 'Menlo', 'Courier New', monospace;
}

.shelf-scroll {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Export video preview — floats over scroll area (AE-style), content scrolls behind */
.export-video-preview-dock {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--shelf-panel-gutter);
  background: #252525;
  border-radius: var(--app-settings-chrome-radius);
}

.export-video-preview-dock[hidden] {
  display: none;
}

.export-video-preview-dock__inner {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-panel-gutter);
}

.export-video-preview-dock .block-title.export-section-title {
  margin-bottom: 0;
}

.export-video-preview-dock .ghost-btn {
  font-size: var(--shelf-label-font-size);
}

.export-video-preview-dock .animation-timeline {
  margin-bottom: 0;
}

/* 3D type animation preview — Object tab shelf dock (reveal + looping motion) */
.font-extrude-animation-preview-dock {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--shelf-panel-gutter);
  background: #252525;
  border-radius: var(--app-settings-chrome-radius);
}

.font-extrude-animation-preview-dock[hidden] {
  display: none;
}

.font-extrude-animation-preview-dock__inner {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-panel-gutter);
}

.font-extrude-animation-preview-dock .block-title.font-extrude-section-title {
  margin-bottom: 0;
}

.font-extrude-animation-preview-dock .ghost-btn {
  font-size: var(--shelf-label-font-size);
}

.font-extrude-animation-preview-dock .animation-timeline {
  margin-bottom: 0;
}

.font-extrude-animation-preview-dock .animation-transport-btns {
  gap: 0.5rem;
}

.font-extrude-animation-preview-dock .font-extrude-preview-transport-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0;
}

.font-extrude-animation-preview-dock .font-extrude-pause-all-btn,
.font-extrude-animation-preview-dock .font-extrude-reset-animations-btn {
  margin-top: 0;
}

/* Reset-scope wrapper must not flatten the dock's column rhythm */
.font-extrude-animation-preview-dock .font-extrude-reset-scope {
  display: contents;
}

.shelf.has-export-preview-dock {
  --export-preview-dock-reserve: calc(
    2 * var(--shelf-panel-gutter) + var(--shelf-panel-gutter) + 2.6rem + 2.6rem + 1.75rem
  );
}

.shelf.has-font-animation-preview-dock {
  --font-animation-preview-dock-reserve: calc(
    2 * var(--shelf-panel-gutter) + var(--shelf-panel-gutter) + 2.6rem + 2.6rem + 1.75rem
  );
}

.shelf.has-export-preview-dock .export-video-preview-dock,
.shelf.has-font-animation-preview-dock .font-extrude-animation-preview-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.shelf:is(.has-export-preview-dock, .has-font-animation-preview-dock) .panels {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.shelf:is(.has-export-preview-dock, .has-font-animation-preview-dock) .shelf-scroll {
  /* Reserve dock height so last card can scroll clear; content passes under the overlay */
  --shelf-scroll-end-pad: var(--shelf-preview-dock-reserve);
}

.panels {
  flex: 1 1 0;
  /* Column flex items default min-width:auto — long unbroken mesh metadata can widen
     past the shelf, break scrolling, and make the accent scrollbar paint as a solid block. */
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  margin: 0;
  /* Top gutter under tabs; horizontal inset is only on .shelf (no double pad) */
  padding: var(--shelf-panel-gutter) 0 var(--shelf-scroll-end-pad) 0;
  scroll-padding-bottom: var(--shelf-scroll-end-pad);
  background: transparent;
  border-top: none;
  border-bottom-left-radius: calc(var(--app-settings-chrome-radius) - var(--shelf-panel-gutter));
  border-bottom-right-radius: calc(var(--app-settings-chrome-radius) - var(--shelf-panel-gutter));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.panels::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

/* Custom rail — native ::-webkit-scrollbar offset is ignored in Chrome 121+ */
.shelf-scrollbar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * var(--shelf-scrollbar-edge-offset));
  width: 2px;
  pointer-events: none;
  z-index: 2;
}

.shelf-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: transparent;
  will-change: transform;
}

.shelf-scrollbar.is-revealed .shelf-scrollbar-thumb {
  background: var(--accent);
}

.panel {
  display: none;
}

.panel.visible {
  display: block;
}

/* Shelf panel CTAs (Snap to Mesh, etc.) — match control label size */
.panels .ghost-btn {
  font-size: var(--shelf-label-font-size);
}

.panel[data-panel='info'] {
  position: relative;
  /* Information tab logotype — ~two-thirds of shelf content width @ all breakpoints */
  --info-logotype-width: 66%;
}

/* Tab name only (Object, Studio, …). Do not use --brand-font-headline for in-panel section labels — those are .block-title. */
.panel-header-title {
  font-family: var(--brand-font-headline);
  display: none;
  font-size: var(--shelf-tab-title-font-size);
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  margin: 0.95rem 0 var(--shelf-section-gap) 0;
  padding: 0;
}

.panel-header-title.visible {
  display: block;
}

.panel-header-title .orby-stagger-word {
  display: inline-block;
}

.panel-header h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.panel-header p {
  margin: 0.2rem 0 1rem;
  color: var(--text-dim);
  letter-spacing: -0.01em;
  font-size: 0.65rem;
}

.panel-block {
  border: none;
  border-radius: 6px;
  padding: 28px var(--shelf-card-padding, 1.2rem);
  /* Section-to-section gutter stays in sync with the shelf's right inset (--shelf-panel-gutter) */
  margin-bottom: var(--shelf-panel-gutter);
  background: var(--shelf-card-bg);
  /* Skip layout/paint for off-screen cards while scrolling .panels (placeholder height avoids thumb jump) */
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Scroll end breathing room lives on the last card, not below the scrollport */
.panel.visible > .panel-block:last-child {
  margin-bottom: var(--shelf-panel-gutter);
}

/* In-block separator — full-bleed 1px hairline seam. */
.panel-block-divider,
.font-extrude-divider,
.font-extrude-reveal-preview-divider,
.font-extrude-reveal-emissive-divider {
  margin: var(--shelf-section-gap) calc(-1 * var(--shelf-section-inset));
  padding: 0;
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  max-width: none;
}

/* Separator that wraps content below the rule (e.g. font Surface / Bevel blocks).
   Full-bleed; the ::before knocks a 1px see-through slot at the wrapper's top edge,
   horizontal padding re-insets the wrapped content to row alignment. */
.font-extrude-surface-group,
.extrude-bevel-group {
  position: relative;
  margin: 0 calc(-1 * var(--shelf-section-inset));
  padding: var(--shelf-section-gap) var(--shelf-section-inset) 0;
  border-top: none;
}

.font-extrude-surface-group::before,
.extrude-bevel-group::before,
.advanced-glass-controls:not([hidden])::before,
.export-video-foldout:not(.export-video-foldout--borderless)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.extrude-bevel-group > :last-child,
.font-extrude-surface-group > :last-child {
  margin-bottom: 0;
}

/* Row before an in-block rule group — gap lives on the group padding-top only */
:is(.slider-line, .select-line, .color-line):has(+ .extrude-bevel-group),
:is(.slider-line, .select-line, .color-line):has(+ .font-extrude-surface-group),
.font-extrude-post-gen > :is(.slider-line, .select-line):has(+ .font-extrude-surface-group) {
  margin-bottom: 0;
}

/* Mount after a standalone divider — gap comes from the divider only */
.panel-block-divider + .surface-controls-mount {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Headline immediately after an in-block divider — avoid double vertical gap */
.panel-block-divider + .block-title,
.panel-block-divider + .subsection > .block-title:first-child,
.panel-block-divider + :not(.surface-controls-mount) > .block-title:first-child,
.panel-block-divider + :not(.surface-controls-mount) > .subsection > .block-title:first-child {
  margin-top: 0;
}

/* Flex stacks (.export-controls) — gap owns rhythm; divider is a full-bleed line only */
:is(.export-controls, .scene-controls) > .panel-block-divider {
  margin: 0 calc(-1 * var(--shelf-section-inset));
}

/* Toggle-only subsections — symmetric gap above & below the rule (equal headline padding) */
.subsection:has(> .block-title.has-toggle) + .panel-block-divider:has(+ .subsection > .block-title.has-toggle) {
  margin-block: var(--shelf-section-gap);
}

/* Last toggle headline in a card — card padding owns bottom inset */
.panel-block > .subsection:last-child > .block-title:last-child {
  margin-bottom: 0;
}

/* Subsection within merged panel blocks - can be muted individually */
.subsection {
  position: relative;
}

/* Adjacent subsections in one card — full section gap before the next headline */
.subsection + .subsection {
  margin-top: var(--shelf-section-gap);
}

.shelf .modifier-mesh-actions {
  display: flex;
  align-items: stretch;
  gap: var(--shelf-pill-grid-gap);
  margin-top: var(--shelf-section-gap);
}

.shelf .modifier-mesh-actions .accent-action-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Muted UI logic removed - will be reimplemented later */

/*
 * Shelf section headings (all tabs): body font stack. Never use --brand-font-headline here—that
 * is only for .panel-header-title and dropzone/marketing headlines.
 * Vertical rhythm: --shelf-section-gap (28px ref) — never --shelf-section-inset.
 */
.block-title {
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  margin-bottom: var(--shelf-section-gap);
  font-weight: 400;
}

/* In-panel sub-section headings (Export video, Font/SVG extrude) — below card titles */
.block-title:is(.export-section-title, .font-extrude-section-title) {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.block-title.font-extrude-section-title.has-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.block-title.font-extrude-section-title.has-reset > span:first-child {
  min-width: 0;
}

.subsection .block-title,
.panel-block .block-title {
  transition: color 0.2s ease;
}

/*
 * Muted shelf sections — captions use --muted-section-text-scale; .block-title stays full strength.
 * Scoped to .subsection / .panel-block (not export foldouts that reuse .is-muted).
 */
.subsection.is-muted .block-title,
.panel-block.is-muted .block-title {
  opacity: 1;
  color: color-mix(in srgb, var(--accent) 25%, var(--text-dim) 75%);
}

/* Only dim the reset icon while muted *if it is currently shown* (`.is-dirty`).
   Without `.is-dirty` this selector would otherwise win over `.block-reset-btn`'s
   default `opacity: 0`, leaking the icon through on every muted section at
   startup (Fresnel, Grid, Base, Backdrop, DoF, Bloom, …) before the user
   has touched anything. */
.subsection.is-muted .block-title .block-reset-btn.is-dirty:not(:disabled):not(.is-disabled),
.panel-block.is-muted .block-title .block-reset-btn.is-dirty:not(:disabled):not(.is-disabled) {
  opacity: calc(0.75 * var(--muted-section-text-scale));
}

.panel-block[data-block="base"] .base-placement-controls {
  padding-top: var(--shelf-section-gap);
}

.panel-block[data-block="base"].is-muted .base-placement-controls {
  display: none;
}

.panel-block[data-block="base"] .base-placement-controls:has(+ .effect-foldout) > :last-child {
  margin-bottom: 0;
}

.panel-block[data-block="base"] .base-placement-controls + .effect-foldout.effect-foldout--expanded {
  padding-top: 0;
}

.subsection.is-muted :where(
    .slider-line > span:first-child,
    .slider-line > .slider-line-label,
    .slider-line > .block-title-name,
    .slider-line .value,
    .color-line > span:first-child,
    .color-line input.color-chip:not(.is-disabled-handle),
    .select-line > span:first-child,
    .select-line select,
    .ghost-btn:not(:disabled):not(.is-disabled),
    .panel-hint,
    .map-slot-label,
    .map-slot-choose,
    .map-slot-file,
    .advanced-import-details summary,
    .svg-extrude-note,
    .look-filter-tile
  ),
.panel-block.is-muted :where(
    .slider-line > span:first-child,
    .slider-line > .slider-line-label,
    .slider-line > .block-title-name,
    .slider-line .value,
    .color-line > span:first-child,
    .color-line input.color-chip:not(.is-disabled-handle),
    .select-line > span:first-child,
    .select-line select,
    .ghost-btn:not(:disabled):not(.is-disabled),
    .panel-hint,
    .map-slot-label,
    .map-slot-choose,
    .map-slot-file,
    .advanced-import-details summary,
    .svg-extrude-note,
    .look-filter-tile
  ) {
  opacity: var(--muted-section-text-scale);
}

/* Snap-to-mesh CTAs: dimmer than other muted captions (−25% vs --muted-section-text-scale) */
.subsection.is-muted #gridSnap.ghost-btn:not(:disabled):not(.is-disabled),
.subsection.is-muted .slider-snap-btn:not(:disabled):not(.is-disabled),
.subsection.is-muted #creativeLookPauseAnimations.ghost-btn:not(:disabled):not(.is-disabled),
.subsection.is-muted #lensFlareKeyLightConnect.ghost-btn:not(:disabled):not(.is-disabled),
.panel-block.is-muted #gridSnap.ghost-btn:not(:disabled):not(.is-disabled),
.panel-block.is-muted .slider-snap-btn:not(:disabled):not(.is-disabled),
.panel-block.is-muted #creativeLookPauseAnimations.ghost-btn:not(:disabled):not(.is-disabled),
.panel-block.is-muted #lensFlareKeyLightConnect.ghost-btn:not(:disabled):not(.is-disabled) {
  opacity: calc(var(--muted-section-text-scale) * 0.75);
}

/* Shader Lab — blocked Cam/FX rows show not-allowed + click tooltip */
[data-shader-lab-blocked] {
  cursor: not-allowed;
}

/* Pink exclamation — feature still under development (tooltip on .dev-badge) */
.block-title-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
}

.dev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--orby-pink);
  line-height: 1;
  cursor: help;
}

.dev-badge i {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.dev-badge:focus-visible {
  outline: 1px solid var(--orby-pink);
  outline-offset: 2px;
  border-radius: 2px;
}

.subsection.is-muted .block-title .dev-badge,
.panel-block.is-muted .block-title .dev-badge,
.subsection.is-muted .dev-badge,
.panel-block.is-muted .dev-badge {
  opacity: calc(0.75 * var(--muted-section-text-scale));
}

.block-title.has-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.block-title.has-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block-reset-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  width: 26px;
  height: 22px;
  padding: 0 0 1px 0;
  border-radius: 0;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  cursor: pointer;
  font-family: inherit;
  /* Hidden until the section has drifted from defaults; ResetControls
     toggles `.is-dirty`. We keep layout space (no display: none) so the
     title row never reflows when the icon appears. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, color 0.2s;
}

.block-reset-btn.is-dirty {
  opacity: 1;
  pointer-events: auto;
}

.block-reset-btn:hover {
  background: transparent;
  color: var(--accent);
}

.block-reset-btn i {
  width: 16px;
  height: 16px;
  color: inherit;
  stroke: currentColor;
  transition: color 0.2s, stroke 0.2s;
}

/* Optical nudge: the reset arrow glyph reads 1px low inside its bounding box,
   both in per-section `.block-reset-btn` icons and in the footer Reset
   Object/Studio/Camera buttons. Lift it 1px so it sits visually centered. */
.block-reset-btn .fa-rotate-left,
.accent-action-btn .fa-rotate-left {
  position: relative;
  top: -1px;
}

.block-reset-btn:hover i {
  color: var(--accent);
  stroke: var(--accent);
}

.block-reset-btn:disabled,
.block-reset-btn.is-disabled {
  cursor: not-allowed;
}

.block-reset-btn.is-dirty:disabled,
.block-reset-btn.is-dirty.is-disabled {
  opacity: 0.6;
}

.block-reset-btn:disabled:hover,
.block-reset-btn.is-disabled:hover {
  color: var(--text-dim);
}

.block-reset-btn:disabled:hover i,
.block-reset-btn.is-disabled:hover i {
  color: var(--text-dim);
  stroke: var(--text-dim);
}

/* Toggle base — stay full strength inside muted sections; avoid extra compositor layers (scroll perf) */
.effect-toggle {
  --toggle-track-height: var(--shelf-toggle-track-height, calc(0.65rem + 0.5rem));
  --toggle-thumb-size: calc(var(--toggle-track-height) - 0.3rem);
  --toggle-thumb-offset: 0.15rem;
  position: relative;
  display: inline-block;
  width: calc(var(--toggle-track-height) * 2);
  height: var(--toggle-track-height);
  flex-shrink: 0;
  margin-left: auto;
  cursor: pointer;
  justify-self: end;
  opacity: 1 !important;
  filter: none !important;
}

.effect-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
  z-index: 2;
}

.effect-toggle .effect-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ui-control-surface); /* unchecked — checked state overrides */
  border-radius: 999px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  z-index: 1;
}

.effect-toggle .effect-indicator::before {
  position: absolute;
  content: '';
  height: var(--toggle-thumb-size);
  width: var(--toggle-thumb-size);
  left: var(--toggle-thumb-offset);
  bottom: var(--toggle-thumb-offset);
  background-color: var(--brand-text);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  opacity: 1;
  filter: none;
}

.effect-toggle input:checked + .effect-indicator {
  background-color: var(--brand-primary) !important; /* Always yellow when checked */
}

.effect-toggle input:checked + .effect-indicator::before {
  transform: translateX(calc(var(--toggle-track-height) * 2 - var(--toggle-thumb-size) - var(--toggle-thumb-offset) * 2));
}

.effect-toggle:hover .effect-indicator {
  background-color: var(--ui-control-surface-hover);
}

/* Muted blocks: checked toggles stay readable but not full lime (guides off + letterbox on, etc.). */
.subsection.is-muted .effect-toggle input:checked + .effect-indicator,
.panel-block.is-muted .effect-toggle input:checked + .effect-indicator {
  background-color: color-mix(
    in srgb,
    var(--brand-primary) 40%,
    var(--ui-control-surface)
  ) !important;
}

.subsection.is-muted .effect-toggle:hover input:checked + .effect-indicator,
.panel-block.is-muted .effect-toggle:hover input:checked + .effect-indicator {
  background-color: color-mix(
    in srgb,
    var(--brand-primary) 48%,
    var(--ui-control-surface-hover)
  ) !important;
}

.subsection.is-muted .effect-toggle:hover input:not(:checked) + .effect-indicator,
.panel-block.is-muted .effect-toggle:hover input:not(:checked) + .effect-indicator {
  background-color: var(--ui-control-surface-hover) !important;
}

.effect-toggle input:focus-visible + .effect-indicator {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--shelf-pill-grid-gap);
  min-width: 0;
  max-width: 100%;
}

.segmented.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented.segmented--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmented.segmented--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Segmented pill row → control rows below (Animation playback speed, Turntable, …) */
.subsection > .segmented,
.panel-block > .segmented {
  margin-bottom: var(--shelf-section-gap);
}

.segmented label {
  border: none;
  padding: 0.5rem 0.4rem;
  border-radius: 999px;
  text-align: center;
  font-size: var(--shelf-headline-font-size);
  cursor: pointer;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--ui-control-surface);
  transition: color 0.2s, background 0.2s, opacity 0.2s, box-shadow 0.2s ease;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.5rem; /* Match other pill buttons */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unselected hover: muted lime wash; label text goes brand lime (not white) */
.segmented label:hover:not(:has(input:checked)) {
  color: var(--brand-primary);
  background: var(--accent-muted);
  opacity: 1;
  box-shadow: none;
}

.segmented input {
  appearance: none;
  position: absolute;
}

.segmented input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.segmented input:checked + span,
.segmented label:has(input:checked) {
  border: none;
  background: var(--accent);
  color: var(--brand-text);
  box-shadow: none !important;
  opacity: 1;
  isolation: isolate;
  overflow: hidden;
}

/* Object Display — 4-up; smaller picker tokens than Studio HDRI */
.mode-icons {
  display: grid;
  /* Fixed tracks — 1fr columns stretch and widen horizontal gaps vs row gap */
  grid-template-columns: repeat(4, var(--shelf-picker-sphere-ring));
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0;
  width: 100%;
  gap: var(--shelf-picker-grid-gap);
}

.mode-icon {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--shelf-picker-sphere-ring);
  height: var(--shelf-picker-sphere-ring);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  flex: none;
  overflow: visible;
}

.mode-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-picker-sphere-ring);
  height: var(--shelf-picker-sphere-ring);
  border-radius: 50%;
  border: var(--shelf-sphere-ring-border) solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

/* Full ring hit target — img is smaller than the ring; absolute children alone miss the outer band */
.mode-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-picker-sphere-ring);
  height: var(--shelf-picker-sphere-ring);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.mode-icon img,
.mode-icon__flat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-picker-sphere-img);
  height: var(--shelf-picker-sphere-img);
  display: block;
  border-radius: 50%;
  margin: 0;
  transition: transform 0.2s ease;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.mode-icon img {
  object-fit: cover;
  /* Free floating - no background or border when unselected */
}

/* Unlit — flat brand lime disc (replaces modeicon-unlit.png) */
.mode-icon__flat {
  background: var(--orby-lime);
}

.mode-icon:hover,
.mode-icon:focus-within {
  z-index: 3;
}

.mode-icon:not(:has(input:checked)):hover img,
.mode-icon:not(:has(input:checked)):focus-within img,
.mode-icon:not(:has(input:checked)):hover .mode-icon__flat,
.mode-icon:not(:has(input:checked)):focus-within .mode-icon__flat {
  transform: translate(-50%, -50%) scale(1.1);
}

.mode-icon input {
  appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Selected state - brand yellow stroked ring around icon */
.mode-icon:has(input:checked)::before {
  border-color: var(--accent);
  transform: translate(-50%, -50%);
}

/* Maps pin preview — hide Display ring while a map channel is active on the mesh */
.mode-icons.is-map-inspect-active .mode-icon:has(input:checked)::before {
  border-color: transparent;
}

.panel-hint.map-slots-hint {
  margin: 0 0 var(--shelf-section-gap);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-dim);
}

.panel-hint.advanced-import-hint,
.panel-hint.advanced-glass-hint {
  margin: 0 0 var(--shelf-section-gap);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-dim);
}

.panel-hint.advanced-section-title,
.panel-hint.map-slots-tuning-title {
  margin: 0 0 var(--shelf-section-gap);
  font-size: var(--shelf-label-font-size);
  color: var(--text-muted);
}

.topology-warnings-block {
  margin: 0;
}

.topology-warnings-actions {
  margin-bottom: 0;
}

.topology-warnings-actions + .topology-warnings-actions {
  margin-top: var(--shelf-accent-action-gap);
}

.topology-warnings-scan {
  width: 100%;
  justify-content: center;
  gap: 0.45rem;
}

.topology-warnings-scan.is-active {
  opacity: 1;
  background: color-mix(in srgb, var(--warning) 18%, var(--panel-alt));
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
}

.topology-warnings-scan.is-active:hover:not(:disabled) {
  background: var(--warning);
  border-color: var(--warning);
  color: #fff;
  box-shadow: none;
}

.topology-warnings-results {
  margin-top: var(--shelf-section-gap);
}

.topology-warnings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.topology-warnings-tab {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-left: 2px solid var(--warning);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--panel-alt) 72%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.topology-warnings-tab:hover {
  background: color-mix(in srgb, var(--panel-alt) 92%, transparent);
}

.topology-warnings-tab.is-selected {
  border-color: color-mix(in srgb, var(--text) 50%, transparent);
  border-left-color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--panel-alt));
}

.topology-warnings-tab.is-selected .topology-warnings-list__label {
  color: var(--text);
}

.topology-warnings-tab:not(.is-selected) .topology-warnings-list__label {
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.topology-warnings-list__item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--panel-alt) 72%, transparent);
  font-size: 0.76rem;
  line-height: 1.35;
}

.topology-warnings-list__item.is-issue {
  border-left: 2px solid var(--warning);
}

.topology-warnings-list__item.is-ok {
  border-left: 2px solid var(--brand-primary, var(--orby-lime));
}

.topology-warnings-list__item.is-info {
  border-left: 2px solid color-mix(in srgb, var(--text-dim) 55%, transparent);
}

.topology-warnings-list__label {
  font-weight: 600;
  color: var(--text);
}

.topology-warnings-list__item.is-issue .topology-warnings-list__label {
  color: var(--warning);
}

.topology-warnings-list__detail {
  color: var(--text-dim);
}

.topology-warnings-list__mesh {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--text-dim) 88%, transparent);
}

.advanced-import-details {
  margin: 0;
  font-size: var(--shelf-label-font-size);
}

.advanced-import-details summary {
  cursor: pointer;
  color: var(--text-dim);
  margin-bottom: 0;
  /* list-item keeps the disclosure marker. flex/grid on <summary> steals
     clicks from controls inside <details> (Chromium / WebKit). */
  display: list-item;
  list-style-position: outside;
}

.advanced-import-details[open] summary {
  margin-bottom: var(--shelf-section-gap);
}

.advanced-import-details .slider-line {
  margin-top: 0;
}

.advanced-import-details .slider-line:last-child {
  margin-bottom: 0;
}

.advanced-glass-controls:not([hidden]) {
  position: relative;
  margin: var(--shelf-section-gap) calc(-1 * var(--shelf-section-inset)) 0;
  padding: var(--shelf-section-gap) var(--shelf-section-inset) 0;
  border-top: none;
}

/* Mesh → Advanced — open Information tab at Transparency section */
button.advanced-info-doc-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  display: inline;
  text-align: left;
}

.map-slot-row {
  display: grid;
  grid-template-columns: var(--shelf-row-grid);
  column-gap: var(--shelf-row-col-gap);
  align-items: center;
  margin-bottom: var(--shelf-section-gap);
  font-size: var(--shelf-label-font-size);
}

.map-slot-label {
  grid-column: var(--shelf-place-label);
  color: var(--text-dim);
  letter-spacing: -0.01em;
}

.map-slot-control {
  grid-column: var(--shelf-span-control);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

/* Map Slots are texture pickers only — never shelf color chips */
#fbxMapSlotsSubsection input[type='color'],
#fbxMapSlotsSubsection .color-chip {
  display: none !important;
}

.map-slot-choose,
.map-slot-file {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: var(--shelf-label-font-size);
  line-height: 1.2;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease;
}

.map-slot-choose {
  flex: 0 0 auto;
  color: var(--text-dim);
}

.map-slot-file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--text);
}

.map-slot-choose:hover,
.map-slot-choose:focus-visible,
.map-slot-file:hover,
.map-slot-file:focus-visible {
  color: var(--accent);
  outline: none;
}

.map-slot-clear[hidden] {
  display: none !important;
}

.map-slot-file[hidden] {
  display: none !important;
}

.map-slot-clear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.62rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    color 0.12s ease,
    background 0.12s ease;
}

.map-slot-control--has-file:hover .map-slot-clear:not([hidden]),
.map-slot-control--has-file:focus-within .map-slot-clear:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.map-slot-clear:hover,
.map-slot-clear:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: none;
}

/* Map Slots actions — same pill buttons as Object/Studio Scene (.export-controls + .accent-action-btn). */
.map-slots-action-row {
  margin-bottom: 0;
}

/*
 * Surface control mounts — plain wrappers; spacing comes from .panel-block-divider
 * or .font-extrude-surface-group. Rows inside use normal .slider-line rhythm.
 */
.effect-foldout > .surface-controls-mount:has(+ .panel-block-divider) {
  margin-bottom: 0;
}

/* Section-ending mount — card padding owns bottom inset (match Base Glass rhythm) */
:is(.effect-foldout, .subsection) > .surface-controls-mount:last-child {
  margin-bottom: 0;
}

/* Small sections (Background, …) — uses default .block-title rhythm */
.panel-block--compact-head > .block-title {
  margin-bottom: var(--shelf-section-gap);
}

.subsection > .block-title:has(+ :is(.slider-line, .select-line, .color-line) + .effect-foldout) {
  margin-bottom: var(--shelf-section-gap);
}

/*
 * Shelf vertical rhythm — margin-bottom between siblings only.
 * Dividers own --shelf-section-gap above/below the rule; rows/grids/segmented before a
 * divider (or card edge) must not stack an extra row-gap on top.
 */
:is(.panel-block, .subsection, .effect-foldout, .export-option-group)
  > :is(.slider-line, .color-line, .select-line, .map-slot-row):last-child,
/* Trailing [hidden] placeholders (e.g. font Circular wrap → post-gen) are not :last-child */
:is(.panel-block, .subsection, .effect-foldout, .export-option-group)
  > :is(.slider-line, .color-line, .select-line, .map-slot-row):not(:has(~ :not([hidden]))),
:is(.panel-block, .subsection, .effect-foldout)
  > :is(.slider-line, .color-line, .select-line):has(+ .effect-foldout, + .clip-planes-foldout),
:is(.panel-block, .subsection, .effect-foldout)
  > :is(.slider-line, .color-line, .select-line, .map-slot-row):has(+ .panel-block-divider),
.effect-foldout > :is(.slider-line, .color-line, .select-line, .map-slot-row):has(+ .creative-look-foldout--collapsed),
:is(.panel-block, .subsection, .effect-foldout)
  > :is(.segmented, .view-preset-grid, .lens-preset-grid, .iso-controls-stack):has(+ .panel-block-divider),
:is(.panel-block, .subsection)
  > :is(.segmented, .view-preset-grid, .lens-preset-grid, .iso-controls-stack):last-child,
.subsection:has(+ .panel-block-divider) > :last-child {
  margin-bottom: 0;
}

:is(.panel-block, .subsection) > .effect-foldout:last-child
  :is(.slider-line, .color-line, .select-line, .map-slot-row):last-child,
:is(.panel-block, .subsection)
  > .effect-foldout:has(~ :last-child[hidden])
  :is(.slider-line, .color-line, .select-line, .map-slot-row):last-child,
:is(.effect-foldout, .subsection) > .surface-controls-mount:last-child
  :is(.slider-line, .color-line, .select-line, .map-slot-row):last-child,
.effect-foldout > .surface-controls-mount:has(+ .panel-block-divider)
  :is(.slider-line, .color-line, .select-line, .map-slot-row):last-child {
  margin-bottom: 0;
}

/*
 * Shelf control rows — selects/colors/map slots use 3-col grid.
 * Sliders: label + value header row, full-width track below (toggle rows keep 3-col).
 */
.color-line,
.select-line {
  display: grid;
  grid-template-columns: var(--shelf-row-grid);
  column-gap: var(--shelf-row-col-gap);
  row-gap: 0;
  align-items: center;
  margin-bottom: var(--shelf-section-gap);
  font-size: var(--shelf-label-font-size);
}

/*
 * Base row margin lives here (specificity 0,1,0) — same level as .color-line/.select-line —
 * so container overrides like `.creative-look-foldout-body > .slider-line` (0,2,0) and
 * `> :last-child`/`:has(+ divider)` zeroing rules still win. The :has()/:not(:has()) layout
 * rules below set grid only — never re-declare margin-bottom there (it would beat 0,2,0 zeroing).
 */
.slider-line {
  margin-bottom: var(--shelf-section-gap);
}

/* Author `display: grid` must not override the `hidden` attribute (see composition-grid-overlay). */
.slider-line[hidden] {
  display: none !important;
}

/* Stacked slider — header row + edge-to-edge track */
.slider-line:has(> input[type='range']):not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--shelf-row-col-gap);
  row-gap: var(--shelf-slider-stack-gap);
  align-items: center;
  font-size: var(--shelf-label-font-size);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Toggle / label-only rows — label | control (no wasted slider column) */
.slider-line:not(:has(> input[type='range'])):not([hidden]) {
  display: grid;
  grid-template-columns: var(--shelf-row-grid-toggle);
  column-gap: var(--shelf-row-col-gap);
  row-gap: 0;
  align-items: center;
  font-size: var(--shelf-label-font-size);
}

/* Labels — ellipsis on stacked slider headers only; non-slider rows get full label width */
.slider-line:has(> input[type='range']) > :is(span:first-child, .slider-line-label, .block-title-name),
.select-line > span:first-child,
.color-line > span:first-child,
.map-slot-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slider-line:not(:has(> input[type='range'])) > :is(span:first-child, .slider-line-label, .block-title-name) {
  grid-column: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.slider-line:has(> input[type='range']) > :is(span:first-child, .slider-line-label, .block-title-name) {
  grid-column: 1;
  grid-row: 1;
}

.slider-line:has(> input[type='range']) > :is(span:first-child, .slider-line-label, .block-title-name):has(.slider-snap-btn) {
  overflow: visible;
  text-overflow: clip;
}

.slider-line:not(:has(> input[type='range'])) > :is(span:first-child, .slider-line-label, .block-title-name),
.select-line > span:first-child,
.color-line > span:first-child,
.map-slot-label {
  grid-column: var(--shelf-place-label);
}

/* Non-slider shelf rows — label uses slider column too (see --shelf-span-label-wide) */
.select-line:not(:has(> .value:not(:empty))) > span:first-child,
.color-line > span:first-child {
  grid-column: var(--shelf-span-label-wide);
  overflow: visible;
  text-overflow: clip;
}

.slider-line > :is(span:first-child, .slider-line-label, .block-title-name) {
  align-self: center;
  text-align: left;
  color: var(--text-dim);
}

.slider-line-label:not(.block-title-name) {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  max-width: 100%;
}

/* Neutral info icon — extra detail on hover/focus for select shelf controls */
.feature-info-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.12em;
  line-height: 1;
  color: color-mix(in srgb, var(--text-dim) 82%, var(--orby-app-bg));
  cursor: help;
}

.feature-info-hint i {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.feature-info-hint:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--text-dim) 55%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}

.color-line span:first-child,
.select-line > span:first-child {
  letter-spacing: -0.01em;
  color: var(--text-dim);
}

/* Value readouts — stacked sliders: header row right; toggle rows: trailing column */
.slider-line:has(> input[type='range']) > .value,
.slider-line:has(> input[type='range']) > .slider-value-group {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.slider-line:not(:has(> input[type='range'])) .value,
.slider-line:not(:has(> input[type='range'])) .slider-value-group,
.select-line > .value {
  grid-column: var(--shelf-place-value);
}

.slider-line .slider-value-group .value {
  grid-column: auto;
}

/* Dropdowns — same row as label; right edge aligned with toggles (value column) */
.select-line select,
.font-extrude-family-line .font-extrude-family-picker {
  grid-column: var(--shelf-place-value);
  justify-self: end;
  width: fit-content;
  max-width: 14rem;
  min-width: min(100%, 5.25rem);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.color-line .color-chip {
  grid-column: var(--shelf-place-value);
  justify-self: end;
  min-width: 0;
}

/* Select row with its own value readout — dropdown stays in the control column only */
.select-line:has(> .value:not(:empty)) select {
  grid-column: var(--shelf-span-control);
  max-width: 100%;
}

.select-line:not(:has(> span:first-child)) {
  grid-template-columns: minmax(0, 1fr);
}

.select-line:not(:has(> span:first-child)) select {
  grid-column: var(--shelf-place-value);
  justify-self: end;
}

.select-line,
.font-extrude-family-line {
  overflow: visible;
}

.select-line select {
  border: none;
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-block;
  height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  min-height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  padding-block: 0;
  padding-inline: 0.65rem 1.35rem;
  color: var(--text);
  font-family: inherit;
  font-size: var(--shelf-headline-font-size);
  line-height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  appearance: none;
  -webkit-appearance: none;
  /* Native popup list on Windows/Chromium reads color-scheme from the select, not :root */
  color-scheme: dark;
  background-color: var(--ui-control-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px 10px;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 0 transparent;
}

.select-line select option {
  background-color: rgb(22, 22, 24);
  color: var(--text);
}

.select-line select:focus-visible {
  outline: none;
  background-color: var(--ui-control-surface-hover);
}

.select-line > .value:empty {
  display: none;
}

/* Toggles — switch in trailing column; label uses full row minus control */
.slider-line.slider-line--toggle-only .value {
  display: none;
}

.slider-line:not(:has(> input[type='range'])) > .effect-toggle {
  grid-column: 2;
  justify-self: end;
}

.slider-line--surface-detail input[type='range'] {
  direction: rtl;
}

/* Shelf control rows — never grow wider than the card (overflow clips on .panels / .effect-foldout). */
.shelf :is(.select-line, .slider-line, .color-line, .map-slot-row) {
  min-width: 0;
  max-width: 100%;
}

/* Smooth mute ↔ unmute for controls that dim inside shelf subsections / panel blocks */
.subsection :where(
    .slider-line > span:first-child,
    .slider-line > .slider-line-label,
    .slider-line > .block-title-name,
    .slider-line .value,
    .color-line > span:first-child,
    .select-line > span:first-child,
    .select-line select,
    .panel-hint,
    .map-slot-label,
    .map-slot-choose,
    .map-slot-file,
    .advanced-import-details summary,
    .svg-extrude-note
  ),
.panel-block :where(
    .slider-line > span:first-child,
    .slider-line > .slider-line-label,
    .slider-line > .block-title-name,
    .slider-line .value,
    .color-line > span:first-child,
    .select-line > span:first-child,
    .select-line select,
    .panel-hint,
    .map-slot-label,
    .map-slot-choose,
    .map-slot-file,
    .advanced-import-details summary,
    .svg-extrude-note
  ) {
  transition: opacity 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

/* Removed - all toggles now use .effect-toggle system */

.slider-line input[type='range'] {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
  position: relative;
  /* Remove default track styling */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  /* Focus ring: track highlight only (see :focus-visible on runnable-track), not browser outline */
  outline: none;
  /* Pairs with :disabled opacity + mute orchestration — avoids one-frame pops */
  transition: opacity 0.2s ease;
}

.subsection.is-muted .slider-line input[type='range'],
.panel-block.is-muted .slider-line input[type='range'],
.slider-line.is-muted input[type='range'],
.is-muted .slider-line input[type='range'] {
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
}

/* Figma-style pill track — rail height matches thumb (--shelf-slider-size) */
.slider-line input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 0%,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 100%
  );
  transition: background 0.2s ease;
}

/* Active drag or keyboard focus: brighter track (no focus outline on the input) */
.slider-line input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 0%,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 100%
  );
}

/* Muted / inactive shelf sections and export rows: gray fill + gray rail (same pill size) */
.subsection.is-muted .slider-line input[type='range']::-webkit-slider-runnable-track,
.panel-block.is-muted .slider-line input[type='range']::-webkit-slider-runnable-track,
.slider-line.is-muted input[type='range']::-webkit-slider-runnable-track,
.is-muted .slider-line input[type='range']::-webkit-slider-runnable-track,
.slider-line input[type='range']:is(:disabled, .is-disabled-handle)::-webkit-slider-runnable-track {
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 0%,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--text-dim) 45%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--text-dim) 45%, transparent) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 100%
  );
}

/* Muted shelf sections: active / keyboard focus */
.subsection.is-muted .slider-line input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track,
.panel-block.is-muted .slider-line input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track,
.slider-line.is-muted input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track,
.is-muted .slider-line input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 0%,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-start, 0%),
    var(--text-dim) var(--slider-fill-start, 0%),
    var(--text-dim) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 100%
  );
}

/* Firefox slider track with fill effect */
.slider-line input[type='range']::-moz-range-progress {
  background: transparent;
}

.slider-line input[type='range']::-moz-range-track {
  width: 100%;
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 0%,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 100%
  );
  border: none;
  transition: background 0.2s ease;
}

/* Active drag or keyboard focus */
.slider-line input[type='range']:is(:active, :focus-visible)::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 0%,
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg, var(--ui-control-surface)) 100%
  );
}

/* Muted blocks: use gray fill instead of accent color */
.subsection.is-muted .slider-line input[type='range']::-moz-range-track,
.panel-block.is-muted .slider-line input[type='range']::-moz-range-track,
.slider-line.is-muted input[type='range']::-moz-range-track,
.is-muted .slider-line input[type='range']::-moz-range-track,
.slider-line input[type='range']:is(:disabled, .is-disabled-handle)::-moz-range-track {
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 0%,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--text-dim) 45%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--text-dim) 45%, transparent) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 100%
  );
}

/* Muted blocks: active / keyboard focus */
.subsection.is-muted .slider-line input[type='range']:is(:active, :focus-visible)::-moz-range-track,
.panel-block.is-muted .slider-line input[type='range']:is(:active, :focus-visible)::-moz-range-track,
.slider-line.is-muted input[type='range']:is(:active, :focus-visible)::-moz-range-track,
.is-muted .slider-line input[type='range']:is(:active, :focus-visible)::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 0%,
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-start, 0%),
    var(--text-dim) var(--slider-fill-start, 0%),
    var(--text-dim) var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent))
      var(--slider-fill-end, 0%),
    var(--shelf-slider-track-bg-muted, color-mix(in srgb, var(--text-dim) 28%, transparent)) 100%
  );
}

/* Temperature, Tint, and Saturation sliders keep custom gradients (pill rail).
   Gradient is held in a custom property so the base + active/focus rules can
   never drift apart. WebKit and Firefox pseudo-elements MUST stay in separate
   rules: a single comma-grouped list with both vendor pseudo-elements is
   invalid per engine and gets dropped wholesale (that silently killed the
   Kelvin gradient). */
.slider-line--temperature {
  --rail-gradient: linear-gradient(90deg, #1d5bff, #f6f2ff, #ffbb6b);
}

.slider-line--tint {
  --rail-gradient: linear-gradient(90deg, #36d681, #f6f2ff, #d56bff);
}

.slider-line--saturation {
  --rail-gradient: linear-gradient(90deg, #525252, #949494, var(--orby-purple-bright, #9d80ff));
}

/* Gradient-rail sliders — match .orby-color-picker__hue-thumb: white hollow ring on the rail */
.slider-line--temperature,
.slider-line--tint,
.slider-line--saturation {
  --shelf-gradient-rail-thumb-size: calc(14px * var(--studio-ui-scale, 1));
  --shelf-gradient-rail-thumb-border: calc(2px * var(--studio-ui-scale, 1));
  --shelf-gradient-rail-thumb-offset: calc(
    (var(--shelf-slider-size, 12px) - var(--shelf-gradient-rail-thumb-size)) / 2
  );
}

/* Thumb drop shadow — solid lime thumbs on standard shelf sliders */
.slider-line {
  --thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.slider-line--temperature input[type='range']::-webkit-slider-runnable-track,
.slider-line--tint input[type='range']::-webkit-slider-runnable-track,
.slider-line--saturation input[type='range']::-webkit-slider-runnable-track {
  background: var(--rail-gradient);
}

.slider-line--temperature input[type='range']::-moz-range-track,
.slider-line--tint input[type='range']::-moz-range-track,
.slider-line--saturation input[type='range']::-moz-range-track {
  background: var(--rail-gradient);
}

/* While dragging (:active) or focused the generic track rule would replace the
   gradient with the lime fill — re-assert the gradient here (higher source
   order, equal specificity) and brighten it for the focus/drag affordance. */
.slider-line--temperature input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track,
.slider-line--tint input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track,
.slider-line--saturation input[type='range']:is(:active, :focus-visible)::-webkit-slider-runnable-track {
  background: var(--rail-gradient);
  filter: brightness(1.14);
}

.slider-line--temperature input[type='range']:is(:active, :focus-visible)::-moz-range-track,
.slider-line--tint input[type='range']:is(:active, :focus-visible)::-moz-range-track,
.slider-line--saturation input[type='range']:is(:active, :focus-visible)::-moz-range-track {
  background: var(--rail-gradient);
  filter: brightness(1.14);
}

/* Shelf slider thumb — same diameter as pill rail (Figma-style) */
.slider-line input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  margin-top: var(--shelf-slider-thumb-offset, 0);
  border-radius: 50%;
  background-color: var(--accent);
  background: var(--accent);
  border: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
  transition:
    transform 0.15s ease,
    width 0.15s ease,
    height 0.15s ease,
    background 0.2s ease,
    box-shadow 0.15s ease;
}

.slider-line input[type='range']::-moz-range-thumb {
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  transform: translateY(var(--shelf-slider-thumb-offset, 0));
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
  transition:
    transform 0.15s ease,
    width 0.15s ease,
    height 0.15s ease,
    background 0.2s ease,
    box-shadow 0.15s ease;
}

.subsection.is-muted .slider-line input[type='range']::-webkit-slider-thumb,
.panel-block.is-muted .slider-line input[type='range']::-webkit-slider-thumb,
.slider-line.is-muted input[type='range']::-webkit-slider-thumb,
.is-muted .slider-line input[type='range']::-webkit-slider-thumb {
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  margin-top: var(--shelf-slider-thumb-offset, 0);
  background-color: #999 !important;
  background: #999 !important;
  box-shadow: none !important;
  opacity: 1;
  transform: none;
}

.subsection.is-muted .slider-line input[type='range']::-moz-range-thumb,
.panel-block.is-muted .slider-line input[type='range']::-moz-range-thumb,
.slider-line.is-muted input[type='range']::-moz-range-thumb,
.is-muted .slider-line input[type='range']::-moz-range-thumb {
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  background-color: #999 !important;
  background: #999 !important;
  box-shadow: none !important;
  opacity: 1;
  transform: translateY(var(--shelf-slider-thumb-offset, 0));
}

/* Disabled sliders — solid gray thumb; dim rail via track gradient (not input opacity) */
.slider-line input[type='range']:is(:disabled, .is-disabled-handle) {
  opacity: 1;
  cursor: not-allowed;
}

.slider-line input[type='range']:disabled::-webkit-slider-thumb,
.slider-line input[type='range'].is-disabled-handle::-webkit-slider-thumb {
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  margin-top: var(--shelf-slider-thumb-offset, 0);
  background-color: #999 !important;
  background: #999 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.slider-line input[type='range']:disabled::-moz-range-thumb,
.slider-line input[type='range'].is-disabled-handle::-moz-range-thumb {
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  background-color: #999 !important;
  background: #999 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
  transform: translateY(var(--shelf-slider-thumb-offset, 0));
}

.slider-line input[type='range']:is(:disabled, .is-disabled-handle):is(:hover, :active)::-webkit-slider-thumb,
.slider-line input[type='range']:is(:disabled, .is-disabled-handle):is(:hover, :active)::-moz-range-thumb {
  transform: none;
  box-shadow: none !important;
}

.slider-line.is-muted > :is(span:first-child, .slider-line-label, .block-title-name),
.slider-line.is-muted .value {
  opacity: var(--muted-section-text-scale);
}

.slider-line input[type='range']:hover::-webkit-slider-thumb {
  transform: scale(1.083);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
}

.slider-line input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.083);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
}

.slider-line input[type='range']:hover::-moz-range-thumb {
  transform: translateY(var(--shelf-slider-thumb-offset, 0)) scale(1.083);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
}

.slider-line input[type='range']:active::-moz-range-thumb {
  transform: translateY(var(--shelf-slider-thumb-offset, 0)) scale(1.083);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
}

/* Gradient-rail sliders — taller hit area so the ring thumb is not clipped by the input box */
.slider-line--temperature input[type='range'],
.slider-line--tint input[type='range'],
.slider-line--saturation input[type='range'] {
  height: var(--shelf-gradient-rail-thumb-size);
}

.slider-line--temperature input[type='range']::-webkit-slider-thumb,
.slider-line--tint input[type='range']::-webkit-slider-thumb,
.slider-line--saturation input[type='range']::-webkit-slider-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  margin-top: var(--shelf-gradient-rail-thumb-offset);
  background: transparent;
  background-color: transparent;
  border: var(--shelf-gradient-rail-thumb-border) solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.slider-line--temperature input[type='range']::-moz-range-thumb,
.slider-line--tint input[type='range']::-moz-range-thumb,
.slider-line--saturation input[type='range']::-moz-range-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  background: transparent;
  background-color: transparent;
  border: var(--shelf-gradient-rail-thumb-border) solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translateY(var(--shelf-gradient-rail-thumb-offset));
}

.slider-line--temperature input[type='range']:is(:hover, :active)::-webkit-slider-thumb,
.slider-line--tint input[type='range']:is(:hover, :active)::-webkit-slider-thumb,
.slider-line--saturation input[type='range']:is(:hover, :active)::-webkit-slider-thumb {
  transform: scale(1.083);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.slider-line--temperature input[type='range']:is(:hover, :active)::-moz-range-thumb,
.slider-line--tint input[type='range']:is(:hover, :active)::-moz-range-thumb,
.slider-line--saturation input[type='range']:is(:hover, :active)::-moz-range-thumb {
  transform: translateY(var(--shelf-gradient-rail-thumb-offset)) scale(1.083);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.subsection.is-muted .slider-line--temperature input[type='range']::-webkit-slider-thumb,
.panel-block.is-muted .slider-line--temperature input[type='range']::-webkit-slider-thumb,
.slider-line--temperature.is-muted input[type='range']::-webkit-slider-thumb,
.is-muted .slider-line--temperature input[type='range']::-webkit-slider-thumb,
.subsection.is-muted .slider-line--tint input[type='range']::-webkit-slider-thumb,
.panel-block.is-muted .slider-line--tint input[type='range']::-webkit-slider-thumb,
.slider-line--tint.is-muted input[type='range']::-webkit-slider-thumb,
.is-muted .slider-line--tint input[type='range']::-webkit-slider-thumb,
.subsection.is-muted .slider-line--saturation input[type='range']::-webkit-slider-thumb,
.panel-block.is-muted .slider-line--saturation input[type='range']::-webkit-slider-thumb,
.slider-line--saturation.is-muted input[type='range']::-webkit-slider-thumb,
.is-muted .slider-line--saturation input[type='range']::-webkit-slider-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  margin-top: var(--shelf-gradient-rail-thumb-offset);
  background: transparent !important;
  background-color: transparent !important;
  border: var(--shelf-gradient-rail-thumb-border) solid #999;
  box-shadow: none !important;
}

.subsection.is-muted .slider-line--temperature input[type='range']::-moz-range-thumb,
.panel-block.is-muted .slider-line--temperature input[type='range']::-moz-range-thumb,
.slider-line--temperature.is-muted input[type='range']::-moz-range-thumb,
.is-muted .slider-line--temperature input[type='range']::-moz-range-thumb,
.subsection.is-muted .slider-line--tint input[type='range']::-moz-range-thumb,
.panel-block.is-muted .slider-line--tint input[type='range']::-moz-range-thumb,
.slider-line--tint.is-muted input[type='range']::-moz-range-thumb,
.is-muted .slider-line--tint input[type='range']::-moz-range-thumb,
.subsection.is-muted .slider-line--saturation input[type='range']::-moz-range-thumb,
.panel-block.is-muted .slider-line--saturation input[type='range']::-moz-range-thumb,
.slider-line--saturation.is-muted input[type='range']::-moz-range-thumb,
.is-muted .slider-line--saturation input[type='range']::-moz-range-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  background: transparent !important;
  background-color: transparent !important;
  border: var(--shelf-gradient-rail-thumb-border) solid #999;
  box-shadow: none !important;
  transform: translateY(var(--shelf-gradient-rail-thumb-offset));
}

.slider-line--temperature input[type='range']:is(:disabled, .is-disabled-handle)::-webkit-slider-thumb,
.slider-line--tint input[type='range']:is(:disabled, .is-disabled-handle)::-webkit-slider-thumb,
.slider-line--saturation input[type='range']:is(:disabled, .is-disabled-handle)::-webkit-slider-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  margin-top: var(--shelf-gradient-rail-thumb-offset);
  background: transparent !important;
  background-color: transparent !important;
  border: var(--shelf-gradient-rail-thumb-border) solid #999;
  box-shadow: none !important;
}

.slider-line--temperature input[type='range']:is(:disabled, .is-disabled-handle)::-moz-range-thumb,
.slider-line--tint input[type='range']:is(:disabled, .is-disabled-handle)::-moz-range-thumb,
.slider-line--saturation input[type='range']:is(:disabled, .is-disabled-handle)::-moz-range-thumb {
  width: var(--shelf-gradient-rail-thumb-size);
  height: var(--shelf-gradient-rail-thumb-size);
  background: transparent !important;
  background-color: transparent !important;
  border: var(--shelf-gradient-rail-thumb-border) solid #999;
  box-shadow: none !important;
  transform: translateY(var(--shelf-gradient-rail-thumb-offset));
}

.slider-line .value {
  align-self: center;
  min-width: 0;
  height: auto;
  max-height: none;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slider-line:has(> input[type='range']) .value {
  justify-self: end;
  width: auto;
  max-width: none;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--text);
}

.slider-line:not(:has(> input[type='range'])) .value {
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  font-size: var(--shelf-label-font-size);
  line-height: 1.25;
  color: var(--text-dim);
}

.slider-line .value:hover {
  cursor: text;
}

.slider-line:has(> input[type='range']) .value:not(.is-editing) {
  min-width: 2.25rem;
  padding-block: 1px;
}

.slider-line .value.is-editing {
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

.slider-line .value-inline-input {
  display: block;
  flex: 0 0 auto;
  width: 4.25rem;
  min-width: 2.75rem;
  max-width: 4.25rem;
  height: 16px;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.22rem;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  line-height: 1.25;
  background: rgba(20, 16, 34, 0.9);
  color: var(--text);
  font-size: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.slider-line .value-inline-input:focus {
  outline: none;
  border-color: var(--accent);
}

.slider-line .slider-value-group {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.slider-line .slider-value-group .value {
  grid-column: auto;
  margin-left: 4px;
}

.slider-snap-btn {
  border: none;
  background: transparent;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}

.slider-snap-btn i {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

.slider-snap-btn:disabled,
.slider-snap-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.slider-snap-btn:disabled:hover,
.slider-snap-btn.is-disabled:hover {
  background: transparent;
  color: var(--text-dim);
  box-shadow: none;
}

#svgExtrudeColorDepths {
  margin-top: 0;
}

/*
 * SVG Extrude — flat control stack: no in-block rules between geometry rows;
 * mount wrappers participate in subsection rhythm via display: contents.
 */
[data-subsection='svg-extrude'] #svgExtrudeCoreControlsMount,
[data-subsection='svg-extrude'] .extrude-bevel-group {
  display: contents;
}

/*
 * display: contents drops .extrude-bevel-group's box, so its ::before hairline anchors to
 * .subsection (position: relative) and paints at the subsection top — a line above the headline.
 * SVG extrude has no in-block rule before bevel rows; suppress the stray pseudo.
 */
[data-subsection='svg-extrude'] .extrude-bevel-group::before {
  content: none;
  display: none;
}

[data-subsection='svg-extrude'] :is(.slider-line, .select-line):has(+ .extrude-bevel-group) {
  margin-bottom: var(--shelf-section-gap);
}

[data-subsection='svg-extrude'] .extrude-bevel-group > :last-child {
  margin-bottom: var(--shelf-section-gap);
}

/* Color Override + trailing foldout is last — no extra margin when collapsed (panel padding only). */
[data-subsection='svg-extrude'] > :is(.slider-line, .select-line, .color-line):last-child {
  margin-bottom: 0;
}

/*
 * Font Extrude — post-gen mounts use block/flex stacks; standard row gap or flex row-gap,
 * panel-block-divider between sections.
 */
[data-subsection='font-extrude'] .extrude-bevel-group {
  display: contents;
}

/*
 * Same display: contents leak as SVG extrude: dropping the bevel group's box re-anchors its
 * ::before hairline to .subsection (position: relative), painting a stray rule above the
 * "Type Creator" headline once the foldout expands. Bevel sits mid-"3D Shape" section
 * with no separator before it — suppress the pseudo.
 */
[data-subsection='font-extrude'] .extrude-bevel-group::before {
  content: none;
  display: none;
}

[data-subsection='font-extrude'] .font-extrude-post-gen:not([hidden]) {
  display: block;
}

[data-subsection='font-extrude'] .font-extrude-animation {
  display: block;
}

[data-subsection='font-extrude'] .font-extrude-constant,
[data-subsection='font-extrude'] .font-extrude-reveal-emissive {
  display: flex;
  flex-direction: column;
  row-gap: var(--shelf-section-gap);
}

/*
 * Reveal rows — explicit rhythm (animation ends with tracking; emissive mounts after looping motion).
 */
[data-subsection='font-extrude'] .font-extrude-animation > :is(.slider-line, .select-line) {
  margin-bottom: var(--shelf-section-gap);
}

[data-subsection='font-extrude'] .font-extrude-animation > :is(.slider-line, .select-line):has(+ .panel-block-divider) {
  margin-bottom: 0;
}

/*
 * Flex row-gap owns rhythm inside emissive / constant mounts — zero row margins so foldout
 * “trailing row” rules cannot collapse those stacks.
 */
[data-subsection='font-extrude']
  :is(.font-extrude-constant, .font-extrude-reveal-emissive)
  > :is(.slider-line, .color-line, .select-line) {
  margin-bottom: 0;
}

#fontExtrudePanel.panel-block:has(.effect-foldout--expanded) {
  content-visibility: visible;
  contain-intrinsic-size: auto 240rem;
}

[data-subsection='font-extrude'] :is(.slider-line, .select-line):has(+ .extrude-bevel-group) {
  margin-bottom: var(--shelf-section-gap);
}

[data-subsection='font-extrude'] .extrude-bevel-group > :last-child {
  margin-bottom: var(--shelf-section-gap);
}

/*
 * display: contents makes the Bevel Type row the :last-child of .extrude-bevel-group, so the
 * "foldout last row → no bottom margin" rule (specificity 0,5,0) over-matches it and collapses
 * the gap against the Polygon Count row that actually follows. Restore the section gap with a
 * higher-specificity, font-scoped override when the bevel group is followed by Polygon Count.
 */
[data-subsection='font-extrude']
  .effect-foldout
  .extrude-bevel-group:has(+ .font-extrude-outline-quality-line)
  > :last-child {
  margin-bottom: var(--shelf-section-gap);
}

[data-subsection='font-extrude'] .font-extrude-surface-post-gen:not([hidden]) {
  display: contents;
}

#svgExtrudeColorDepths .slider-line {
  margin-bottom: var(--shelf-section-gap);
}

/* Per-fill reset — sits inline after the "Depth N" label; resets that fill only. */
.svg-fill-reset {
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 0;
  margin-left: 0.4em;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.2s ease;
}

.svg-fill-reset:hover {
  color: var(--accent);
}

.svg-fill-reset i {
  font-size: 10px;
  line-height: 1;
  color: inherit;
}

.svg-extrude-note {
  margin: 0 0 var(--shelf-section-gap);
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Scrollport ends at logo; outer footer gap is on version (top) + orby mark (bottom) */
.panels:has(.info-orby-mark) {
  padding-bottom: 0;
  scroll-padding-bottom: var(--shelf-footer-outer-gap);
}

.info-version-tag {
  display: block;
  margin-top: var(--shelf-footer-outer-gap);
  font-size: 0.69rem;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text-dim);
  opacity: 0.6;
  position: static;
  padding-top: 0;
  background: none;
}

.info-orby-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1.65rem;
  margin-bottom: var(--shelf-footer-outer-gap);
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
  color: inherit;
}

.info-orby-mark:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 65%, transparent);
  outline-offset: 3px;
}

.info-orby-mark img {
  width: 28px;
  height: 28px;
  display: block;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .info-orby-mark:hover img,
  .info-orby-mark:focus-visible img {
    animation: info-orby-mark-spin 1.1s linear infinite;
  }
}

@keyframes info-orby-mark-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fullscreen toggle button (bottom-left of viewport) */
.viewport-fullscreen-btn {
  position: absolute;
  top: 1.2rem;
  left: 1.5rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-dim);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0.75;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.2s,
    opacity 0.2s;
  z-index: 12;
}

.viewport-fullscreen-btn i {
  font-size: 14px;
}

.viewport-fullscreen-btn:hover {
  background: var(--accent);
  color: var(--brand-text);
  box-shadow: var(--ui-accent-outer-glow);
  opacity: 1;
  transform: translateY(1px);
}

.viewport-fullscreen-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}

body:not(.dropzone-visible) .viewport-fullscreen-btn {
  opacity: 0.9;
}

/* Load indicator — favicon, bottom-left (fixed like .toast; lifted above notification toasts) */
.viewport-load-spinner {
  position: fixed;
  bottom: calc(
    max(var(--viewport-chrome-inset-y, clamp(1rem, 4vw, 4.5rem)), env(safe-area-inset-bottom, 0px)) +
      var(--viewport-load-spinner-lift, 120px)
  );
  left: max(var(--viewport-chrome-inset-x, clamp(1rem, 4vw, 4.5rem)), env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: auto;
  height: 70px;
  z-index: 16;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.94);
  transform-origin: left bottom;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}

.viewport-load-spinner__elapsed {
  font-family: var(--brand-font-mattone-regular);
  font-size: 22px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.viewport-load-spinner__elapsed[hidden] {
  display: none;
}

.viewport-load-spinner.is-visible {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0s;
}

.viewport-load-spinner img {
  display: block;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  object-fit: contain;
  /* 100 RPM → 0.6s per revolution */
  animation: viewport-load-spin 0.6s linear infinite;
}

@keyframes viewport-load-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewport-load-spinner {
    transform: none;
    transition:
      opacity 0.2s ease,
      visibility 0s linear 0.2s;
  }

  .viewport-load-spinner.is-visible {
    transform: none;
    transition:
      opacity 0.2s ease,
      visibility 0s linear 0s;
  }

  .viewport-load-spinner img {
    animation-duration: 3s;
  }
}

/* Demo Logotype - Bottom Left Corner */
.demo-logotype {
  position: absolute;
  bottom: var(--viewport-chrome-inset-y, clamp(1rem, 4vw, 4.5rem));
  left: var(--viewport-chrome-inset-x, clamp(1rem, 4vw, 4.5rem));
  width: min(440px, calc(100vw - 2rem), max(160px, 38vw));
  max-width: 440px;
  height: auto;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
  will-change: opacity, transform;
  transform: translateZ(0); /* Force GPU acceleration */
}

.demo-logotype svg {
  width: 100%;
  height: auto;
  display: block;
}

.demo-logotype.visible {
  opacity: 1;
  pointer-events: auto;
  animation: demoLogotypeFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.demo-logotype.hiding {
  animation: demoLogotypeFadeOut 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Watermark Overlay - logo on the chosen side, credit on the opposite side */
.watermark-overlay {
  position: absolute;
  bottom: var(--viewport-chrome-inset-y, clamp(1rem, 4vw, 4.5rem));
  left: var(--viewport-chrome-inset-x, clamp(1rem, 4vw, 4.5rem));
  right: var(--viewport-chrome-inset-x, clamp(1rem, 4vw, 4.5rem));
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.watermark-overlay.is-visible {
  opacity: 1;
}

/* Watermark replaces the legacy demo logotype — never show both. */
.viewport:has(.watermark-overlay.is-visible) #demoLogotype {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

.watermark-overlay[data-placement='right'] {
  flex-direction: row-reverse;
}

.watermark-overlay__logo {
  position: relative;
  flex: 0 0 auto;
  width: min(220px, calc(100vw - 2rem), 34vw);
  max-width: 220px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
  transform: scale(var(--watermark-logo-scale, 1));
  transform-origin: left bottom;
}

.watermark-overlay[data-placement='right'] .watermark-overlay__logo {
  transform-origin: right bottom;
}

/* Exactly one logo layer — never stack Orby + custom vertically. */
.watermark-overlay[data-logo='orby'] .watermark-overlay__custom,
.watermark-overlay[data-logo='custom'] .watermark-overlay__orby {
  display: none !important;
}

.watermark-overlay__orby,
.watermark-overlay__custom {
  width: 100%;
}

.watermark-overlay__orby[hidden],
.watermark-overlay__custom[hidden] {
  display: none !important;
}

.watermark-overlay__orby svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Uploaded custom SVG. By default it renders in its own colors (we never
 * change someone's brand colors unasked). Only once the user picks a Logotype
 * Color do we flatten it to a single tint via a CSS mask.
 * The animated Orby Lottie mark keeps its own brand colors (not recolorable). */
.watermark-overlay__custom {
  aspect-ratio: var(--watermark-custom-aspect, 1.6);
  display: block;
  background: var(--watermark-custom-mask, none);
}

.watermark-overlay[data-logo-tint='on'] .watermark-overlay__custom {
  background: var(--watermark-logo-color, #c4ff00);
  -webkit-mask: var(--watermark-custom-mask, none);
  mask: var(--watermark-custom-mask, none);
}

.watermark-overlay__credit {
  flex: 1 1 auto;
  min-width: 0;
  align-self: flex-end;
  font-family: var(
    --brand-font-mattone-regular,
    'Mattone Regular',
    'Cal Sans',
    'Geist',
    system-ui,
    sans-serif
  );
  font-size: calc(16px * var(--watermark-credit-scale, 1));
  line-height: 1.35;
  color: var(--watermark-credit-color, #fff);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(0, 0, 0, 0.35);
  text-align: right;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.watermark-overlay[data-placement='right'] .watermark-overlay__credit {
  text-align: left;
}

.watermark-custom-btn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bare slider/color rows in the watermark controls — let the .export-controls
 * flex gap own vertical rhythm (matches .export-option-group convention) so
 * row margins don't stack on top of the gap. */
[data-export-section='watermark'] .export-controls > :is(.slider-line, .color-line) {
  margin-bottom: 0;
}

/* Credit input + scale + color rows share the foldout with even section-gap
 * rhythm. The parent .export-controls flex already supplies one section gap
 * above the foldout, so zero the foldout's own padding-top to avoid a doubled
 * gap between the "Credit" toggle row and the input field.
 * When collapsed, keep the foldout out of flex layout (hidden) so .export-controls
 * gap does not stack an extra section gap under the Credit toggle — same as
 * animation frame reference (#animationTimeReferenceSection). */
.watermark-credit-foldout.effect-foldout--expanded {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-section-gap);
  padding-top: 0;
}

.watermark-credit-foldout > :is(.slider-line, .color-line) {
  margin-bottom: 0;
}

.watermark-credit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #fff);
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.watermark-credit-input::placeholder {
  color: var(--text-dim, rgba(255, 255, 255, 0.45));
}

.watermark-credit-input:focus-visible {
  outline: none;
  border-color: var(--accent, #c4ff00);
  background: color-mix(in srgb, var(--accent, #c4ff00) 8%, transparent);
}

.rotation-notch {
  border: none;
  background: var(--ui-control-surface);
  color: var(--text);
  width: 26px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.rotation-notch:hover {
  background: rgba(255, 255, 255, 0.1);
}

.rotation-notch i {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  stroke: var(--text-dim);
}

.color-chip {
  width: var(--color-chip-w, 184px);
  max-width: 100%;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 1;
}

input.color-chip {
  transition:
    width 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}

/* Grid aligns chips to the end of the row — extra width grows left (expand toward the label). */
input.color-chip:not(.is-disabled-handle):is(:hover, :focus-visible) {
  width: calc(var(--color-chip-w) + 8px);
}

.color-chip::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
  padding: 0;
}

.color-chip::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: inherit;
  background: transparent;
}

.color-chip::-moz-color-swatch {
  border: none;
  border-radius: inherit;
}

#svgExtrudeColorDepths .color-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  margin-right: 0.35rem;
  overflow: hidden;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}


.control-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stats-block dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--shelf-section-gap);
}

.stats-block dl > div {
  min-width: 0;
}

.stats-block dt {
  font-size: var(--shelf-label-font-size);
  letter-spacing: -0.01em;
  color: var(--text-dim);
}

.stats-block dd {
  margin: 0.2rem 0 0;
  font-size: var(--shelf-headline-font-size);
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Object Info — compact scroll placeholder when collapsed; full paint when foldout animates open */
.stats-block:has(.effect-foldout--collapsed) {
  contain-intrinsic-size: auto 4.5rem;
}

.stats-block:has(.effect-foldout--expanded) {
  content-visibility: visible;
}

.scene-controls .hide-object-btn {
  width: 100%;
}

.animation-controls {
  display: flex;
  gap: var(--shelf-section-gap);
  align-items: center;
  margin-bottom: var(--shelf-section-gap);
}

#animationScrub {
  flex: 1;
}

.animation-timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--shelf-section-gap);
  align-items: center;
  margin-bottom: var(--shelf-section-gap);
}

.animation-transport-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.animation-timeline .animation-transport-btns {
  grid-column: 1;
}

.animation-timeline .animation-controls {
  display: contents;
  margin-bottom: 0;
}

.animation-timeline #animationScrub,
.animation-timeline #exportPreviewScrub,
.animation-timeline #fontExtrudeRevealScrub {
  width: 100%;
  min-width: 0;
  flex: unset;
  align-self: center;
  justify-self: stretch;
  grid-column: 2;
  position: relative;
  height: 2px;
  border-radius: 1px;
  appearance: none;
  background: transparent;
  outline: none;
  transition: opacity 0.2s ease;
}

.animation-timeline #animationScrub::-webkit-slider-runnable-track,
.animation-timeline #exportPreviewScrub::-webkit-slider-runnable-track,
.animation-timeline #fontExtrudeRevealScrub::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(
    to right,
    var(--ui-control-surface) 0%,
    var(--ui-control-surface) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-end, 0%),
    var(--ui-control-surface) var(--slider-fill-end, 0%),
    var(--ui-control-surface) 100%
  );
  transition: background 0.2s ease;
}

.animation-timeline #animationScrub:is(:active, :focus-visible, .is-scrub-playing)::-webkit-slider-runnable-track,
.animation-timeline #exportPreviewScrub:is(:active, :focus-visible, .is-scrub-playing)::-webkit-slider-runnable-track,
.animation-timeline #fontExtrudeRevealScrub:is(:active, :focus-visible, .is-scrub-playing)::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--ui-control-surface) 0%,
    var(--ui-control-surface) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-end, 0%),
    var(--ui-control-surface) var(--slider-fill-end, 0%),
    var(--ui-control-surface) 100%
  );
}

.animation-timeline #animationScrub::-moz-range-track,
.animation-timeline #exportPreviewScrub::-moz-range-track,
.animation-timeline #fontExtrudeRevealScrub::-moz-range-track {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(
    to right,
    var(--ui-control-surface) 0%,
    var(--ui-control-surface) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-end, 0%),
    var(--ui-control-surface) var(--slider-fill-end, 0%),
    var(--ui-control-surface) 100%
  );
  border: none;
  transition: background 0.2s ease;
}

.animation-timeline #animationScrub:is(:active, :focus-visible, .is-scrub-playing)::-moz-range-track,
.animation-timeline #exportPreviewScrub:is(:active, :focus-visible, .is-scrub-playing)::-moz-range-track,
.animation-timeline #fontExtrudeRevealScrub:is(:active, :focus-visible, .is-scrub-playing)::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--ui-control-surface) 0%,
    var(--ui-control-surface) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-end, 0%),
    var(--ui-control-surface) var(--slider-fill-end, 0%),
    var(--ui-control-surface) 100%
  );
}

.animation-timeline #animationScrub::-webkit-slider-thumb,
.animation-timeline #exportPreviewScrub::-webkit-slider-thumb,
.animation-timeline #fontExtrudeRevealScrub::-webkit-slider-thumb {
  margin-top: -5px;
}

.animation-timeline #animationScrub::-moz-range-thumb,
.animation-timeline #exportPreviewScrub::-moz-range-thumb,
.animation-timeline #fontExtrudeRevealScrub::-moz-range-thumb {
  transform: translateY(-1px);
}

html:not(.mobile-landing) .shelf .animation-timeline #animationScrub,
html:not(.mobile-landing) .shelf .animation-timeline #exportPreviewScrub {
  height: calc(2px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .animation-timeline #animationScrub::-webkit-slider-runnable-track,
html:not(.mobile-landing) .shelf .animation-timeline #exportPreviewScrub::-webkit-slider-runnable-track,
html:not(.mobile-landing) .shelf .animation-timeline #animationScrub::-moz-range-track,
html:not(.mobile-landing) .shelf .animation-timeline #exportPreviewScrub::-moz-range-track {
  height: calc(2px * var(--studio-ui-scale));
  border-radius: calc(1px * var(--studio-ui-scale));
}

html:not(.mobile-landing) .shelf .animation-timeline #animationScrub::-webkit-slider-thumb,
html:not(.mobile-landing) .shelf .animation-timeline #exportPreviewScrub::-webkit-slider-thumb {
  margin-top: calc(-5px * var(--studio-ui-scale));
}

#animationTime,
#exportPreviewTime,
#fontExtrudeRevealTime {
  grid-column: 3;
  font-size: var(--shelf-label-font-size);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 2.8ch;
  text-align: right;
}

#exportPreviewTime {
  min-width: 5ch;
}

.export-preview-pause-all-row {
  display: flex;
  margin-top: 0;
}

.export-capture-preview-thumb {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.export-capture-preview-thumb-frame {
  width: 100%;
  max-width: 20rem;
  overflow: hidden;
}

.export-capture-preview-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 11.25rem;
  object-fit: contain;
  object-position: center;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--text-dim) 28%, transparent);
  background: var(--orby-black);
}

.export-capture-preview-thumb img[hidden] {
  display: none;
}

/* Empty state before the first capture — eye placeholder instead of a broken <img> glyph. */
.export-capture-preview-thumb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.35rem;
  border: 1px dashed color-mix(in srgb, var(--text-dim) 32%, transparent);
  background: var(--orby-black);
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
  padding: 0.5rem;
}

.export-capture-preview-thumb-empty i {
  font-size: 1.6rem;
  opacity: 0.65;
}

.export-capture-preview-thumb-empty[hidden] {
  display: none;
}

.export-capture-preview-thumb--transparent img {
  background-color: #808080;
  background-image:
    linear-gradient(45deg, #666 25%, transparent 25%),
    linear-gradient(-45deg, #666 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #666 75%),
    linear-gradient(-45deg, transparent 75%, #666 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
}

.export-capture-preview-thumb-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.animation-time-reference-foldout.effect-foldout--expanded {
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}

.animation-time-reference-line {
  /* Exception: custom 2-col row (frame numbers + pill select), not --shelf-row-grid */
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.45rem;
  align-items: center;
}

#animationBlock .select-line.animation-time-reference-line {
  margin-bottom: 0;
  min-height: 0;
}

.animation-time-reference-foldout.effect-foldout--expanded + #animationClipModeSegmented {
  margin-top: var(--shelf-section-gap);
}

#animationBlock .animation-time-reference-line > .animation-frame-numbers {
  grid-column: 1;
  min-width: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-family: 'Geist Mono', 'SF Mono', ui-monospace, 'Menlo', 'Courier New', monospace;
  font-size: calc(28px * var(--studio-ui-scale, 1));
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 1;
  white-space: nowrap;
}

.animation-time-reference-line select {
  grid-column: 2;
  justify-self: end;
  box-sizing: border-box;
  width: auto;
  min-width: calc(5.25rem * var(--studio-ui-scale, 1));
  max-width: 100%;
  height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  min-height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  padding-block: 0;
  padding-inline: 0.7rem 1.6rem;
  line-height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  font-size: var(--shelf-headline-font-size);
  flex-shrink: 0;
}

.hdri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--shelf-hdri-grid-gap-y) var(--shelf-hdri-grid-gap-x);
  margin-bottom: var(--shelf-section-gap);
  /* Top inset only — card padding handles bottom inset (same as segmented / accent buttons) */
  padding: 0.75rem 0 0;
}

.hdri-icon {
  position: relative;
  display: block;
  box-sizing: border-box;
  /* Row height tracks the thumbnail (78px @ 2560); selection ring overflows into gap */
  width: 100%;
  height: var(--shelf-hdri-sphere-img);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  transition: opacity 0.2s ease, filter 0.2s ease;
  overflow: visible;
}

.hdri-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-hdri-sphere-ring);
  height: var(--shelf-hdri-sphere-ring);
  border-radius: 50%;
  border: var(--shelf-sphere-ring-border) solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.hdri-icon img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-hdri-sphere-img);
  height: var(--shelf-hdri-sphere-img);
  display: block;
  border-radius: 50%;
  margin: 0;
  transition: transform 0.2s ease;
  z-index: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  object-fit: cover;
}

.hdri-icon:not(.active):hover:not(:disabled):not(.is-disabled) img {
  transform: translate(-50%, -50%) scale(1.1);
}

.hdri-icon:disabled,
.hdri-icon.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: saturate(0.35);
}

.hdri-icon.active::before {
  border-color: var(--accent);
  transform: translate(-50%, -50%);
}

.hdri-icon__sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-hdri-sphere-img);
  height: var(--shelf-hdri-sphere-img);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Shader Lab presets — same smaller metrics + centered hover scale as Object Display */
#creativeLookGrid .hdri-icon {
  display: block;
  width: var(--shelf-picker-sphere-ring);
  height: var(--shelf-picker-sphere-ring);
}

#creativeLookGrid .hdri-icon::before {
  width: var(--shelf-picker-sphere-ring);
  height: var(--shelf-picker-sphere-ring);
}

#creativeLookGrid .hdri-icon img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-picker-sphere-img);
  height: var(--shelf-picker-sphere-img);
  margin: 0;
  transform: translate(-50%, -50%);
}

#creativeLookGrid .hdri-icon:not(.active):hover:not(:disabled):not(.is-disabled) img {
  transform: translate(-50%, -50%) scale(1.1);
}

.hdri-icon__sphere--placeholder {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--text-dim) 35%, var(--orby-black)) 0%,
    color-mix(in srgb, var(--text-dim) 18%, var(--orby-black)) 100%
  );
  box-shadow: inset 0 -0.35rem 0.75rem rgba(0, 0, 0, 0.35);
}

.hdri-icon__sphere--placeholder + img {
  position: relative;
  z-index: 1;
}

/* Custom HDRI upload — same gray family as .ghost-btn, spherical */
.hdri-icon--upload .hdri-icon__disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shelf-hdri-sphere-img);
  height: var(--shelf-hdri-sphere-img);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  border: none;
  background: var(--ui-control-surface);
  box-shadow: none;
  transition: background 0.2s ease;
}

.hdri-icon--upload .hdri-icon__plus,
.hdri-icon--upload .hdri-icon__check {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.hdri-icon--upload .hdri-icon__plus {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: var(--text-dim);
}

.hdri-icon--upload .hdri-icon__check {
  display: none;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: #1a6b32;
}

.hdri-icon--upload:hover:not(:disabled):not(.is-disabled) .hdri-icon__disc {
  background: var(--accent-muted);
}

.hdri-icon--upload:hover:not(:disabled):not(.is-disabled)::before {
  border-color: var(--accent);
}

.hdri-icon--upload.is-loaded .hdri-icon__disc {
  background: var(--accent);
  box-shadow: var(--ui-accent-outer-glow-compact);
}

.hdri-icon--upload.is-loaded .hdri-icon__plus {
  display: none;
}

.hdri-icon--upload.is-loaded .hdri-icon__check {
  display: block;
}

.hdri-icon--upload.is-loaded:hover:not(:disabled):not(.is-disabled) .hdri-icon__disc {
  background: var(--accent);
  box-shadow: var(--ui-accent-outer-glow);
}

.hdri-icon--upload.active::before {
  border-color: var(--accent);
}

.export-format-sub {
  margin: 0 0 1rem 0;
  font-size: var(--shelf-label-font-size);
  line-height: 1.45;
  color: var(--text-dim);
  letter-spacing: -0.01em;
}

.export-format-warning {
  color: var(--warning);
}

/* Export tab — compact scroll placeholder when a section is collapsed */
.panel-block[data-export-section]:has(> .effect-foldout--collapsed) {
  contain-intrinsic-size: auto 4.5rem;
}

/* Expanded export cards — disable content-visibility sizing (video block exceeds 400px placeholder) */
.panel-block[data-export-section]:has(> .effect-foldout--expanded) {
  content-visibility: visible;
}

/* Video export is the tallest shelf block — grow to content so FPS / Resolution never clip */
.panel-block[data-export-section='video'] .effect-foldout--expanded {
  max-height: max-content;
}

/* Font extrude — grow to content so Reveal emissive at the bottom never clips when post-gen is open */
[data-effect-foldout='font-extrude'].effect-foldout--expanded.effect-foldout--xl {
  max-height: max-content;
}

/* Export — uniform section gap between groups and inside option groups */
.export-controls {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-section-gap);
}

.export-controls:not(:has(> .export-option-group, > .export-section-title)) {
  gap: var(--shelf-accent-action-gap);
}

.export-controls:has(> .export-option-group, > .export-section-title),
.export-controls:has(> .panel-block-divider) {
  gap: var(--shelf-section-gap);
}

/* Video export — lime section headlines (match Typography / .block-title) */
.export-controls > .export-section-title.block-title {
  margin-bottom: 0;
}

.export-controls > .panel-block-divider + .export-section-title.block-title {
  margin-top: 0;
}

.export-video-camera-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-section-gap);
}

.export-video-camera-sliders > :is(.slider-line, .color-line, .select-line) {
  margin-bottom: 0;
}

.export-video-preview-actions .accent-action-btn {
  width: 100%;
}

/* Scene footer controls — stacked accent buttons (Studio tab, Export camera actions, …) */
.scene-controls {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-accent-action-gap);
}

.export-option-group {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-section-gap);
}

/* Flex gap owns row rhythm here — .slider-line margin-bottom would stack on top of gap */
.export-option-group > :is(.slider-line, .color-line, .select-line, .map-slot-row) {
  margin-bottom: 0;
}

.export-label {
  font-size: var(--shelf-label-font-size);
  color: var(--text-dim);
  letter-spacing: -0.01em;
}

.export-button-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--shelf-pill-grid-gap);
}

.export-button-group--triple {
  grid-template-columns: repeat(3, 1fr);
}

.export-button-group--quad {
  grid-template-columns: repeat(4, 1fr);
}

/* Export buttons use same styling as HDRI buttons */
.export-option-btn {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.4rem;
  letter-spacing: -0.01em;
  font-size: var(--shelf-headline-font-size);
  color: var(--text);
  background: var(--ui-control-surface);
  cursor: pointer;
  transition: box-shadow 0.2s, color 0.2s, opacity 0.2s, background 0.2s;
  text-align: center;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.5rem; /* Match accent-action-btn exactly */
}

.export-option-btn:hover:not(:disabled):not(.is-disabled):not(.active) {
  color: var(--text);
  background: var(--accent-muted);
  opacity: 1;
}

.export-option-btn.active {
  border: none;
  color: var(--brand-text);
  background: var(--accent);
  box-shadow: none !important;
  opacity: 1;
  isolation: isolate;
  overflow: hidden;
}

/* Mouse focus — avoid ring/glow on click; Tab still uses :focus-visible where the UA shows it */
.export-option-btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.light-chip {
  flex-shrink: 1;
  min-width: 0;
}

.color-chip.is-disabled-handle {
  opacity: 0.5;
  pointer-events: none;
  filter: saturate(0.35);
}

.export-block {
  text-align: center;
}

.export-block p {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: var(--shelf-section-gap);
  letter-spacing: -0.01em;
}

.export-option-btn.is-disabled,
.export-option-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: saturate(0.3);
}

.export-video-foldout {
  position: relative;
  margin: 0 calc(-1 * var(--shelf-section-inset));
  border-top: none;
  padding: var(--shelf-section-gap) var(--shelf-section-inset) 0;
  display: flex;
  flex-direction: column;
  gap: var(--shelf-section-gap);
}

.export-video-foldout--borderless {
  border-top: none;
  padding-top: 0;
}

.export-video-foldout.is-muted {
  opacity: 0.6;
}

#exportMeshAnimationsSettings[hidden] {
  display: none !important;
}

/* Transparent background — fixed vertical slot; muted unless .PNG format */
.export-png-transparent {
  transition: opacity 0.2s ease;
}

.export-png-transparent.is-muted {
  opacity: 0.52;
}

/* Still-image transparent framing — muted unless transparent + alpha format */
.export-image-transparent-framing {
  transition: opacity 0.2s ease;
}

.export-image-transparent-framing.is-muted {
  opacity: 0.52;
}

/* Video PNG transparent framing — muted unless PNG + transparent */
.export-video-transparent-framing {
  transition: opacity 0.2s ease;
}

.export-video-transparent-framing.is-muted {
  opacity: 0.52;
}

/* Output folder — fixed vertical slot; muted unless .PNG format */
.export-png-folder {
  transition: opacity 0.2s ease;
}

.export-png-folder.is-muted {
  opacity: 0.52;
}

.export-path-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.export-path-label {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.35;
  word-break: break-word;
}

.export-length-clip-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.export-path-choose {
  flex: 0 0 auto;
  min-width: 6.5rem;
}

.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.help-card {
  background: rgba(8, 10, 18, 0.8);
  border: 1px solid var(--stroke);
  border-radius: 1rem;
  max-width: 420px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.help-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.help-card h3 {
  font-family: var(--brand-font-headline);
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1;
}

.help-card ol {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.toast {
  --toast-bottom: max(var(--viewport-chrome-inset-y, 1.5rem), env(safe-area-inset-bottom, 0px));
  --toast-inline: var(--viewport-chrome-inset-x, 1.5rem);
  position: fixed;
  bottom: var(--toast-bottom);
  left: var(--toast-inline);
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: min(28rem, calc(100vw - 2 * var(--toast-inline)));
  padding: 0.62rem 1.05rem 0.62rem 0.72rem;
  background: var(--ui-frosted-bg);
  border: none;
  border-radius: 999px;
  color: var(--text);
  letter-spacing: -0.01em;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  box-shadow: 0 10px 36px color-mix(in srgb, var(--orby-black) 42%, transparent);
  animation: toast 3s ease forwards;
  pointer-events: none;
  z-index: 15;
}

.toast-icon {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
}

.toast-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.toast-icon--success {
  color: var(--brand-primary);
}

.toast-icon--info {
  color: color-mix(in srgb, var(--text) 42%, transparent);
}

.toast[data-toast-icon="success"] .toast-icon--success,
.toast[data-toast-icon="info"] .toast-icon--info {
  display: inline-flex;
}

.toast:not([data-toast-icon]) {
  padding-inline: 1.05rem;
}

.toast-message {
  min-width: 0;
}

.toast--persistent {
  pointer-events: auto;
}

.toast-isometric-cluster {
  --toast-bottom: max(var(--viewport-chrome-inset-y, 1.5rem), env(safe-area-inset-bottom, 0px));
  --toast-inline: var(--viewport-chrome-inset-x, 1.5rem);
  position: fixed;
  bottom: var(--toast-bottom);
  left: var(--toast-inline);
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(36rem, calc(100vw - 2 * var(--toast-inline)));
  z-index: 15;
  pointer-events: auto;
  animation: toast-persistent-in 0.28s ease forwards;
}

.toast-isometric-cluster .toast--isometric-hint {
  position: static;
  bottom: auto;
  left: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(24rem, calc(100vw - 2 * var(--toast-inline) - 9.5rem));
  animation: none;
}

.toast-isometric-unlock-btn.orby-pill-btn {
  flex: 0 0 auto;
  font-size: 0.75rem;
  padding: 0.52rem 0.9rem;
  letter-spacing: -0.01em;
}

.toast--isometric-hint .toast-status-on {
  color: var(--brand-primary);
  font-weight: 700;
}

.toast--isometric-hint .toast-dismiss.close-btn {
  width: 1.65rem;
  height: 1.65rem;
  margin: -0.15rem -0.35rem -0.15rem 0.1rem;
}

.toast--isometric-hint .toast-dismiss.close-btn::before,
.toast--isometric-hint .toast-dismiss.close-btn::after {
  height: 0.7rem;
}

body:has(.toast-isometric-cluster) .toast:not(.toast--isometric-hint) {
  bottom: calc(var(--toast-bottom) + 3.1rem);
}

@keyframes toast-persistent-in {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Marketing home — same frame inset as studio UI */
html.orby-home-scroll .toast,
html.orby-home-scroll .toast-isometric-cluster {
  z-index: 100060;
}

/* Marketing home — pin load spinner to viewport (not the scrollable dropzone stack) */
html.orby-home-scroll:not(.mobile-landing) .viewport-load-spinner {
  z-index: 100061;
}

@keyframes toast {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  10%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Tooltip System */
.tooltip {
  position: absolute;
  padding: 0.5rem 0.75rem;
  background: var(--orby-surface-muted, #202020);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10051;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  max-width: 300px;
  white-space: normal;
  word-wrap: break-word;
}

.tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Viewport bone/joint hover — mono white-on-black pill, instant show (no enter delay) */
.tooltip.tooltip--viewport {
  font-family: 'Geist Mono', 'SF Mono', ui-monospace, 'Menlo', 'Courier New', monospace;
  font-size: 1.125rem; /* 18px at 16px root — 20% above prior 0.9375rem (15px) */
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  background: var(--orby-black);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  white-space: nowrap;
  max-width: none;
  transition: none;
}

.joint-name-labels {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}

.light-indicator-hud-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
  --light-indicator-hud-size: 2.875rem;
  --light-indicator-hud-hit-slop: 0.4rem;
  --light-indicator-hud-frosted-idle: rgba(8, 8, 8, 0.58);
  --light-indicator-hud-frosted-pinned: rgba(8, 8, 8, 0.48);
  --light-indicator-hud-shadow: 0 4px 12px color-mix(in srgb, var(--orby-black) 55%, transparent);
  --light-indicator-hud-intensity-width: 10.125rem;
  --light-indicator-hud-lift: 2.75rem;
  --light-indicator-hud-slider-size: var(--shelf-slider-size, 12px);
  --light-indicator-hud-slider-track-bg: var(--shelf-slider-track-bg, var(--ui-control-surface));
  --light-indicator-hud-slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.light-indicator-hud__cluster {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.light-indicator-hud {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transform: translate(-50%, calc(-50% - var(--light-indicator-hud-lift)));
  pointer-events: none;
  flex-shrink: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.light-indicator-hud--flip-y {
  transform: translate(-50%, calc(-50% + var(--light-indicator-hud-lift)));
}

.light-indicator-hud--edge-pinned {
  transform: translate(-50%, calc(-50% - var(--light-indicator-hud-lift))) scale(0.75);
  transform-origin: center center;
  transition: opacity 0.12s ease, transform 0.15s ease;
}

.light-indicator-hud--edge-pinned.light-indicator-hud--flip-y {
  transform: translate(-50%, calc(-50% + var(--light-indicator-hud-lift))) scale(0.75);
}

.light-indicator-hud--edge-pinned .light-indicator-hud__btn--shadow,
.light-indicator-hud--edge-pinned .light-indicator-hud__btn--bulb,
.light-indicator-hud--edge-pinned .light-indicator-hud__intensity {
  background: var(--light-indicator-hud-frosted-pinned);
}

.light-indicator-hud__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}

.light-indicator-hud__intensity {
  display: flex;
  flex-shrink: 0;
  width: var(--light-indicator-hud-intensity-width);
  height: var(--light-indicator-hud-size);
  border-radius: 999px;
  pointer-events: auto;
  background: var(--light-indicator-hud-frosted-idle);
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  box-shadow: var(--light-indicator-hud-shadow);
  align-items: center;
  justify-content: center;
  padding: 0 0.65rem;
  box-sizing: border-box;
  transition: background 0.12s ease, transform 0.12s ease;
}

.light-indicator-hud__intensity-range {
  width: 100%;
  height: var(--light-indicator-hud-slider-size);
  margin: 0;
  border-radius: calc(var(--light-indicator-hud-slider-size) / 2);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  touch-action: none;
  cursor: ew-resize;
}

/* Beat generic input[type='range'] { height: 2px; margin-top: -5px } — pill track = thumb diameter */
.light-indicator-hud__intensity input.light-indicator-hud__intensity-range {
  height: var(--light-indicator-hud-slider-size);
  background: transparent;
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--light-indicator-hud-slider-size);
  border-radius: calc(var(--light-indicator-hud-slider-size) / 2);
  border: none;
  background: linear-gradient(
    to right,
    var(--light-indicator-hud-slider-track-bg) 0%,
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) 100%
  );
  transition: background 0.2s ease;
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range:is(:active, :focus-visible)::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--light-indicator-hud-slider-track-bg) 0%,
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) 100%
  );
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range::-moz-range-track {
  width: 100%;
  height: var(--light-indicator-hud-slider-size);
  border-radius: calc(var(--light-indicator-hud-slider-size) / 2);
  border: none;
  background: linear-gradient(
    to right,
    var(--light-indicator-hud-slider-track-bg) 0%,
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 50%, transparent) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) 100%
  );
  transition: background 0.2s ease;
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range:is(:active, :focus-visible)::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--light-indicator-hud-slider-track-bg) 0%,
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-start, 0%),
    color-mix(in srgb, var(--accent) 75%, transparent) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) var(--slider-fill-end, 0%),
    var(--light-indicator-hud-slider-track-bg) 100%
  );
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range::-webkit-slider-thumb {
  appearance: none;
  width: var(--light-indicator-hud-slider-size);
  height: var(--light-indicator-hud-slider-size);
  margin-top: 0;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--light-indicator-hud-slider-thumb-shadow);
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range::-moz-range-thumb {
  width: var(--light-indicator-hud-slider-size);
  height: var(--light-indicator-hud-slider-size);
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  transform: none;
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--light-indicator-hud-slider-thumb-shadow);
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range:is(:hover, :active)::-webkit-slider-thumb {
  transform: scale(1.083);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--light-indicator-hud-slider-thumb-shadow);
}

.light-indicator-hud__intensity input.light-indicator-hud__intensity-range:is(:hover, :active)::-moz-range-thumb {
  transform: scale(1.083);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--light-indicator-hud-slider-thumb-shadow);
}

.light-indicator-hud__btn {
  position: relative;
  width: var(--light-indicator-hud-size);
  height: var(--light-indicator-hud-size);
  padding: 0;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: var(--light-indicator-hud-shadow);
  transform: none;
  transition: background 0.12s ease, transform 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
  touch-action: manipulation;
}

.light-indicator-hud__btn::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--light-indicator-hud-hit-slop));
  border-radius: inherit;
}

.light-indicator-hud--edge-pinned .light-indicator-hud__btn::after {
  inset: calc(-1 * var(--light-indicator-hud-hit-slop) * 1.35);
}

.light-indicator-hud__btn--shadow,
.light-indicator-hud__btn--bulb {
  background: var(--light-indicator-hud-frosted-idle);
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  color: var(--text-dim);
}

.light-indicator-hud__btn--shadow.light-indicator-hud__btn--active,
.light-indicator-hud__btn--bulb.light-indicator-hud__btn--active {
  background: var(--accent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--brand-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    var(--light-indicator-hud-shadow);
}

.light-indicator-hud__btn--color {
  background: color-mix(in srgb, var(--light-chip, #ffffff) 62%, transparent);
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--orby-black) 18%, transparent),
    var(--light-indicator-hud-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .light-indicator-hud__btn--shadow:not(.light-indicator-hud__btn--active):hover,
  .light-indicator-hud__btn--shadow:not(.light-indicator-hud__btn--active):focus-visible,
  .light-indicator-hud__btn--bulb:not(.light-indicator-hud__btn--active):hover,
  .light-indicator-hud__btn--bulb:not(.light-indicator-hud__btn--active):focus-visible {
    background: var(--ui-frosted-bg);
    color: var(--brand-primary);
    transform: scale(1.08);
  }

  .light-indicator-hud__btn--shadow.light-indicator-hud__btn--active:hover,
  .light-indicator-hud__btn--shadow.light-indicator-hud__btn--active:focus-visible,
  .light-indicator-hud__btn--bulb.light-indicator-hud__btn--active:hover,
  .light-indicator-hud__btn--bulb.light-indicator-hud__btn--active:focus-visible {
    transform: scale(1.08);
  }

  .light-indicator-hud__btn--color:hover,
  .light-indicator-hud__btn--color:focus-visible {
    background: color-mix(in srgb, var(--light-chip, #ffffff) 78%, transparent);
    transform: scale(1.08);
  }

  .light-indicator-hud__intensity:hover,
  .light-indicator-hud__intensity:focus-within {
    background: var(--ui-frosted-bg);
    transform: scale(1.04);
  }
}

.light-indicator-hud__btn:active {
  transform: scale(1.04);
}

.light-indicator-hud__btn i {
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}

.light-shadow-badges {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

.light-shadow-badge {
  position: absolute;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  color: #fff;
  background: var(--orby-black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: 0.5;
  /* Screen-space HUD — fixed px size, not perspective-scaled with world depth */
  transform: translate(-50%, -50%) scale(1.125);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.light-shadow-badge--active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.5);
}

.light-shadow-badge i {
  font-size: 1.425rem;
  line-height: 1;
  pointer-events: none;
}

.joint-name-label {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  font-family: 'Geist Mono', 'SF Mono', ui-monospace, 'Menlo', 'Courier New', monospace;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  background: var(--orby-black);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.tooltip[data-position="top"] {
  transform: translateY(4px);
}

.tooltip[data-position="top"].tooltip--visible {
  transform: translateY(0);
}

.tooltip[data-position="bottom"] {
  transform: translateY(-4px);
}

.tooltip[data-position="bottom"].tooltip--visible {
  transform: translateY(0);
}

.tooltip[data-position="left"] {
  transform: translateX(4px);
}

.tooltip[data-position="left"].tooltip--visible {
  transform: translateX(0);
}

.tooltip[data-position="right"] {
  transform: translateX(-4px);
}

.tooltip[data-position="right"].tooltip--visible {
  transform: translateX(0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

input[type='range'] {
  appearance: none;
  height: 2px;
  border-radius: 999px;
  background: var(--ui-control-surface);
  outline: none;
}

input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: none;
  transition:
    transform 0.15s ease,
    width 0.15s ease,
    height 0.15s ease,
    background 0.2s ease,
    box-shadow 0.15s ease;
  /* Center the thumb vertically on the track: (12 - 2) / 2 = 5px */
  margin-top: -5px;
}

input[type='range']:disabled::-webkit-slider-thumb {
  background: #999;
  box-shadow: none;
  cursor: not-allowed;
}

/* Muted shelf sections: gray thumbs (2px smaller than active) */
.subsection.is-muted input[type='range']::-webkit-slider-thumb,
.panel-block.is-muted input[type='range']::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -4px;
  background: #999 !important;
  box-shadow: none !important;
}

.subsection.is-muted input[type='range']::-moz-range-thumb,
.panel-block.is-muted input[type='range']::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: #999 !important;
  box-shadow: none !important;
}

input[type='range']::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform 0.15s ease,
    width 0.15s ease,
    height 0.15s ease,
    background 0.2s ease,
    box-shadow 0.15s ease;
}

input[type='range']:disabled::-moz-range-thumb {
  background: #999;
  box-shadow: none;
  cursor: not-allowed;
}

input[type='range']:hover::-webkit-slider-thumb {
  transform: scale(1.083); /* 13px / 12px */
  box-shadow: var(--ui-accent-outer-glow-compact);
}

input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.333); /* 16px / 12px */
  box-shadow: var(--ui-accent-outer-glow-compact);
}

input[type='range']:hover::-moz-range-thumb {
  transform: scale(1.083); /* 13px / 12px */
  box-shadow: var(--ui-accent-outer-glow-compact);
}

input[type='range']:active::-moz-range-thumb {
  transform: scale(1.333); /* 16px / 12px */
  box-shadow: var(--ui-accent-outer-glow-compact);
}

input[type='range'].is-disabled-handle::-webkit-slider-thumb {
  background: #999 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

input[type='range'].is-disabled-handle::-moz-range-thumb {
  background: #999 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/*
 * Shelf stacked sliders (.slider-line) — pill rail must follow generic input[type='range']
 * (2px legacy) in the cascade. Re-assert full contract here so active/muted/disabled rows
 * share one track height and centered thumb (export camera sliders, studio shelves, …).
 */
.shelf .slider-line input[type='range'] {
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
  background: transparent;
  appearance: none;
}

.shelf .slider-line input[type='range']::-webkit-slider-runnable-track {
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
}

.shelf .slider-line input[type='range']::-moz-range-track {
  height: var(--shelf-slider-size, 12px);
  border-radius: calc(var(--shelf-slider-size, 12px) / 2);
}

.shelf .slider-line input[type='range']::-webkit-slider-thumb {
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  margin-top: var(--shelf-slider-thumb-offset, 0);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
}

.shelf .slider-line input[type='range']::-moz-range-thumb {
  width: var(--shelf-slider-size, 12px);
  height: var(--shelf-slider-size, 12px);
  transform: translateY(var(--shelf-slider-thumb-offset, 0));
}

.shelf .slider-line input[type='range']:is(:hover, :active)::-webkit-slider-thumb,
.shelf .slider-line input[type='range']:is(:hover, :active)::-moz-range-thumb {
  transform: scale(1.083);
  box-shadow:
    0 0 0 1px rgba(120, 120, 120, 0.95),
    var(--thumb-shadow);
}

.shelf .slider-line input[type='range']:is(:hover, :active)::-moz-range-thumb {
  transform: translateY(var(--shelf-slider-thumb-offset, 0)) scale(1.083);
}

@media (max-width: 960px) {
  .workspace {
    flex-direction: column;
  }
  .shelf,
  html:not(.mobile-landing) .shelf {
    width: 100%;
    height: 45vh;
  }
  .viewport {
    height: 55vh;
    min-height: 0;
  }
}

/* Hide UI on mobile and vertical tablet (smallest window sizes) */
/* Hide when width is small OR when screen is very short (mobile portrait) */
@media (max-width: 1024px), (max-height: 500px) {
  .shelf {
    display: none !important;
  }
  .viewport {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
}

body.ui-hidden .top-bar,
body.ui-hidden #dropzone {
  pointer-events: none;
  opacity: 0;
}

body.ui-hidden .shelf {
  pointer-events: none;
}

/* Histogram visualization */
.histogram-container {
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.histogram-container--expanded {
  /* Tall enough for 16:9 canvas at full panel width (column layout shelf = 100% vw);
   * fixed 320px used to clip the canvas bottom when width × 9/16 > 320. */
  max-height: min(60vh, 640px);
  opacity: 1;
  padding-top: var(--shelf-section-gap);
  padding-bottom: 0.5rem;
}

@supports (container-type: inline-size) {
  .histogram-container {
    container-type: inline-size;
  }

  .histogram-container--expanded {
    /* Match canvas aspect-ratio + a few px for rounding; vh cap for very short viewports */
    max-height: min(calc((100cqw * 9) / 16 + 8px), 92vh);
  }
}

.histogram-container--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Camera & FX — toggle-revealed effect settings */
.effect-foldout {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  min-width: 0;
  /* Animate to intrinsic content height (Chrome 129+); other engines expand
   * fully without the tween — never clip. See --md/--lg/--xl note below. */
  interpolate-size: allow-keywords;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.effect-foldout--expanded {
  /* Grow to natural height so tall / nested foldouts (e.g. Lights rig) can never
   * crop their bottom rows. The --md/--lg/--xl classes are kept for markup
   * compatibility but no longer impose a fixed ceiling. */
  max-height: max-content;
  opacity: 1;
  padding-top: var(--shelf-section-gap);
  overflow: visible;
}

/* Wireframe / UV Checker / … — row then foldout: one row-gap, not title inset + row margin */
:is(.panel-block, .subsection)
  > :is(.slider-line, .color-line, .select-line)
  + .effect-foldout.effect-foldout--expanded {
  padding-top: var(--shelf-section-gap);
}

.effect-foldout--expanded.effect-foldout--md,
.effect-foldout--expanded.effect-foldout--lg,
.effect-foldout--expanded.effect-foldout--xl {
  max-height: max-content;
}

.effect-foldout--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  pointer-events: none;
}

/* Keep section header toggles above expanded foldouts from subsections below (overflow: visible). */
.subsection > .block-title.has-toggle {
  position: relative;
  z-index: 2;
}

/*
 * Row toggle + collapsed foldout + more controls (Advanced → UV Checker → Transparency).
 * The row before the foldout has margin-bottom: 0; restore shelf rhythm before the next block.
 * Skip [hidden] wrappers (e.g. #stlSmoothingControls) so the next visible row still gets gap.
 */
:is(.panel-block, .subsection)
  > .effect-foldout.effect-foldout--collapsed
  + :not(.effect-foldout):not([hidden]),
:is(.panel-block, .subsection)
  > .effect-foldout.effect-foldout--collapsed
  + [hidden]
  + :not(.effect-foldout):not([hidden]),
:is(.panel-block, .subsection)
  > .effect-foldout.effect-foldout--collapsed
  + [hidden]
  + [hidden]
  + :not(.effect-foldout):not([hidden]) {
  margin-top: var(--shelf-section-gap);
}

/* Expanded foldout with siblings below (Camera → Exposure, then Auto Exposure) */
:is(.panel-block, .subsection)
  > .effect-foldout.effect-foldout--expanded:not(:last-child) {
  margin-bottom: var(--shelf-section-gap);
}

/*
 * Toggle + foldout rows — stable header position (collapsed or expanded).
 * Vertical inset comes from .panel-block padding; title gap to controls lives on
 * the foldout (padding-top when expanded), not title margin.
 */
.block-title.has-toggle:has(
    + .effect-foldout,
    + .base-placement-controls,
    + .histogram-container,
    + .look-filter-presets-container,
    + .tone-curve-foldout,
    + .clip-planes-foldout,
    + .creative-look-foldout
  ) {
  margin-bottom: 0;
}

/* Camera — manual render distance near/far sliders */
.clip-planes-foldout {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* Grow to content (Chrome 129+ animates; other engines expand instantly) so the
   * Near / Far Clip rows are never cropped — matches .effect-foldout behavior. */
  interpolate-size: allow-keywords;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.clip-planes-foldout--expanded {
  max-height: max-content;
  opacity: 1;
  padding-top: var(--shelf-section-gap);
  overflow: visible;
}

.clip-planes-foldout--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}

/* Tone curve — fold-out panel (like histogram) */
.tone-curve-foldout {
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.tone-curve-foldout--expanded {
  max-height: min(90vh, 640px); /* full-width square canvas; taller than old 400px cap */
  opacity: 1;
  padding-top: var(--shelf-section-gap);
  margin-bottom: 0.25rem;
}

.tone-curve-foldout--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}

/* Look filter presets (Camera & FX) */
.look-filter-presets-container {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.look-filter-presets-container--expanded {
  max-height: 40rem;
  opacity: 1;
  padding-top: var(--shelf-section-gap);
}

.look-filter-presets-container--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}

/* Shader Lab — grow parent card when foldout is open (content-visibility placeholder is 400px). */
.panel-block:has([data-subsection='creative-look'] .creative-look-foldout--expanded) {
  content-visibility: visible;
}

.panel-block:has([data-subsection='creative-look'] #creativeLookTransmissionControls:not([hidden])) {
  content-visibility: visible;
}

/* Object tab — Shader Lab fold-out (matches Look Filters behavior) */
.creative-look-foldout {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.creative-look-foldout--expanded {
  max-height: max-content;
  opacity: 1;
  padding-top: var(--shelf-section-gap);
  padding-bottom: 0;
  overflow: visible;
  interpolate-size: allow-keywords;
  content-visibility: visible;
}

.creative-look-foldout--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}

.creative-look-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.creative-look-heading-start {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.creative-look-bake-thumbs-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--orby-black) 88%, var(--accent) 12%);
  color: var(--text-dim);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.creative-look-bake-thumbs-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.creative-look-bake-thumbs-btn:disabled {
  opacity: 0.45;
  cursor: wait;
}

.dev-tools-modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10000;
  width: min(300px, 38vw);
  display: none;
  pointer-events: auto;
}

.dev-tools-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem 1.1rem;
  background: color-mix(in srgb, var(--orby-black) 92%, var(--panel) 8%);
  border-right: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.28);
  overflow-y: auto;
  box-sizing: border-box;
}

.dev-tools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dev-tools-header h3 {
  font-family: var(--brand-font-headline);
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.dev-tools-lead {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.dev-tools-lead code {
  font-size: 0.82em;
  color: var(--text);
}

.dev-tools-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.15rem;
}

.dev-tools-section + .dev-tools-section {
  border-top: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  padding-top: 0.85rem;
}

.dev-tools-section-title {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.dev-tools-section-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.dev-tools-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dev-tools-action-label {
  font-size: 0.84rem;
  color: var(--text);
}

.dev-tools-action-buttons,
.dev-tools-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.dev-tools-stack {
  flex-direction: column;
}

.dev-tools-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--orby-black) 88%, var(--accent) 12%);
  color: var(--text-dim);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.38rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.dev-tools-btn--wide {
  width: 100%;
  text-transform: none;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  text-align: left;
}

.dev-tools-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.dev-tools-btn:disabled {
  opacity: 0.45;
  cursor: wait;
}

.dev-tools-link {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
}

.dev-tools-link:hover {
  color: var(--accent);
}

.dev-tools-shortcut-hint {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: right;
}

.dev-tools-shortcut-hint kbd {
  font-size: 0.68rem;
}

.gobo-panel-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  width: 26px;
  height: 22px;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  opacity: 1;
  pointer-events: auto;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.gobo-panel-btn:hover,
.gobo-panel-btn.is-active {
  color: var(--text);
}

.gobo-panel-btn i {
  font-size: 0.875rem;
  line-height: 1;
  width: 16px;
  text-align: center;
}

.creative-look-foldout-body {
  display: flex;
  flex-direction: column;
  gap: var(--shelf-section-gap);
}

/* Foldout uses flex gap — drop per-row margin so spacing matches shelf rhythm once. */
.creative-look-foldout-body > :is(.slider-line, .select-line, .color-line) {
  margin-bottom: 0;
}

/* Flex gap owns spacing — avoid stacking margin-bottom on grid blocks inside the foldout */
.creative-look-foldout-body > .creative-look-grid {
  margin-bottom: 0;
}

/* Preset sliders (Sketch stroke / raster) participate in foldout flex rhythm — no wrapper gap. */
.creative-look-preset-sliders {
  display: contents;
}

.creative-look-transmission-controls {
  display: contents;
}

.creative-look-transmission-controls[hidden] {
  display: none !important;
}

.creative-look-transmission-controls > :is(.slider-line, .panel-hint) {
  margin-top: 0;
  margin-bottom: 0;
}

.creative-look-preset-sliders[hidden] {
  display: none !important;
}

.creative-look-preset-slider[hidden] {
  display: none !important;
}

.creative-look-preset-ink[hidden] {
  display: none !important;
}

.creative-look-preset-sliders > :is(.slider-line, .color-line) {
  margin-top: 0;
  margin-bottom: 0;
}

.creative-look-foldout-body > .creative-look-pause-btn {
  align-self: flex-start;
}

.look-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.4rem;
}

.look-filter-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 7.5rem;
  color: var(--text-dim, #9a9a9a);
  font-size: var(--shelf-headline-font-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.2s ease;
}

.look-filter-tile:hover {
  color: var(--text, #e8e8e8);
  background: rgba(255, 255, 255, 0.04);
}

.look-filter-tile.is-selected {
  border: none;
  color: var(--text, #e8e8e8);
  box-shadow: none;
  background: var(--accent-muted);
}

.look-filter-tile.is-selected .look-filter-tile__label {
  color: var(--accent);
}

.look-filter-tile__thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border: none;
  border-radius: 0;
  margin: 0;
  vertical-align: top;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
}

.look-filter-tile__thumb--clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orby-black);
  color: color-mix(in srgb, white 42%, var(--orby-black));
  box-shadow: inset 0 -0.35rem 0.75rem rgba(0, 0, 0, 0.35);
}

.look-filter-tile--clear.is-selected .look-filter-tile__thumb--clear {
  color: var(--accent);
}

.look-filter-tile--clear .look-filter-tile__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.look-filter-tile__label {
  line-height: 1.2;
  padding: 0.3rem 0.2rem 0.32rem;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.2);
}

/* Camera → Lens / View Presets: compact preset grid */
.lens-preset-grid,
.view-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: var(--shelf-section-gap);
}

.lens-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 2.65rem;
  margin: 0;
  padding: 0.38rem 0.25rem;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    opacity 0.2s ease;
}

.lens-preset-btn:hover:not(:disabled):not(.is-selected) {
  color: var(--brand-primary);
  background: var(--accent-muted);
}

.lens-preset-btn.is-selected {
  background: var(--accent);
  color: var(--brand-text);
}

.lens-preset-btn.is-selected .lens-preset-btn__label {
  color: var(--brand-text);
  opacity: 0.85;
}

.lens-preset-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lens-preset-btn__focal {
  font-size: var(--shelf-headline-font-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.lens-preset-btn__label {
  font-size: var(--shelf-headline-font-size);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  opacity: 0.9;
}

.subsection.is-muted .lens-preset-btn,
.panel-block.is-muted .lens-preset-btn,
.subsection.is-muted .view-preset-grid .lens-preset-btn,
.panel-block.is-muted .view-preset-grid .lens-preset-btn {
  opacity: 0.45;
}

/* Camera → Isometric: 2×3 uniform tile grid (presets + actions) */
.iso-controls-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: var(--shelf-section-gap);
}

.iso-preset-grid,
.iso-action-row {
  display: contents;
}

.iso-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.1rem;
  min-height: 3.35rem;
  margin: 0;
  padding: 0.42rem 0.45rem 0.38rem;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    opacity 0.2s ease;
}

.iso-preset-btn:hover:not(:disabled):not(.is-selected) {
  color: var(--brand-primary);
  background: var(--accent-muted);
}

.iso-preset-btn.is-selected {
  background: var(--accent);
  color: var(--brand-text);
}

.iso-preset-btn.is-selected .iso-preset-btn__subtitle {
  color: var(--brand-text);
  opacity: 0.88;
}

.iso-preset-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.iso-preset-btn__title {
  font-size: var(--shelf-headline-font-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.iso-preset-btn__subtitle {
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.25;
  opacity: 0.88;
}

.subsection.is-muted .iso-preset-btn,
.subsection.is-muted .iso-action-row .ghost-btn.small,
.subsection.is-muted #isoPanUnlock.ghost-btn,
.panel-block.is-muted .iso-preset-btn,
.panel-block.is-muted .iso-action-row .ghost-btn.small,
.panel-block.is-muted #isoPanUnlock.ghost-btn {
  opacity: 0.45;
}

#isoPanUnlock.ghost-btn {
  margin-top: 0.4rem;
}

.iso-action-row .ghost-btn.small {
  width: 100%;
  min-height: 3.35rem;
  margin: 0;
  padding: 0.42rem 0.45rem;
  border-radius: 6px;
  font-size: var(--shelf-headline-font-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}

#isoPanUnlock.ghost-btn.active,
#lensFlareKeyLightConnect.ghost-btn.active {
  background: var(--accent);
  color: var(--brand-text);
  box-shadow: var(--ui-accent-outer-glow);
}

.subsection.is-muted .iso-preset-btn.is-selected,
.panel-block.is-muted .iso-preset-btn.is-selected {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  box-shadow: none;
}

.subsection.is-muted .iso-preset-btn.is-selected .iso-preset-btn__subtitle,
.panel-block.is-muted .iso-preset-btn.is-selected .iso-preset-btn__subtitle {
  color: var(--text-dim);
  opacity: 0.88;
}

/*
 * Information tab — collapsible sections (details.info-section) + content-visibility when expanded.
 */
.panel[data-panel='info'] details.info-section:not([open]) {
  contain-intrinsic-size: auto 3.75rem;
}

.panel[data-panel='info'] details.info-section[open].info-panel-block--compact {
  contain-intrinsic-size: auto 11rem;
}

.panel[data-panel='info'] details.info-section[open].info-panel-block--medium {
  contain-intrinsic-size: auto 17rem;
}

.panel[data-panel='info'] details.info-section[open].info-panel-block--tall {
  contain-intrinsic-size: auto 26rem;
}

.panel[data-panel='info'] details.info-section[open].info-panel-block--faq-part {
  contain-intrinsic-size: auto 20rem;
}

.panel[data-panel='info'] details.info-section {
  content-visibility: auto;
}

.panel[data-panel='info'] details.info-section > .info-section__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}

.panel[data-panel='info'] details.info-section > .info-section__summary::-webkit-details-marker {
  display: none;
}

.panel[data-panel='info'] details.info-section > .info-section__summary::marker {
  content: '';
}

.panel[data-panel='info'] details.info-section > .info-section__summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  margin-right: 0.15rem;
  border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.panel[data-panel='info'] details.info-section[open] > .info-section__summary::after {
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}

.panel[data-panel='info'] details.info-section > .info-section__summary .block-title {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.panel[data-panel='info'] details.info-section > .info-section__body {
  padding-top: var(--shelf-section-gap);
}

.panel[data-panel='info'] details.info-section > .info-section__body > .shortcuts-grid:first-child,
.panel[data-panel='info'] details.info-section > .info-section__body > .about-content:first-child {
  margin-top: 0;
}

.panel[data-panel='info'] {
  /* Information prose — same 24px rhythm as shelf control rows */
  --info-prose-gap: var(--shelf-section-gap);
  --info-prose-section-gap: var(--shelf-section-gap);
}

.panel[data-panel='info'] .about-content {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.panel[data-panel='info'] .about-content > p {
  margin: 0 0 var(--info-prose-gap);
}

.panel[data-panel='info'] .about-content > p:last-child {
  margin-bottom: 0;
}

.panel[data-panel='info'] .about-content > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--info-prose-gap);
}

.panel[data-panel='info'] .about-content > ul:last-child {
  margin-bottom: 0;
}

.panel[data-panel='info'] .about-content ul > li {
  margin-bottom: var(--info-prose-gap);
}

.panel[data-panel='info'] .about-content ul > li:last-child {
  margin-bottom: 0;
}

.panel[data-panel='info'] .about-content ul.info-prose-nested {
  padding-left: 1.5rem;
  margin-top: var(--info-prose-gap);
}

.panel[data-panel='info'] .about-content > div + div {
  margin-top: var(--info-prose-section-gap);
}

.panel[data-panel='info'] .about-content h4 {
  margin: 0 0 var(--info-prose-gap);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}

.panel[data-panel='info'] .about-content > div > p {
  margin: 0;
}

.panel[data-panel='info'] .info-panel-stack > .panel-block + .panel-block {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: var(--info-prose-section-gap);
}

/* Split feature / FAQ lists — stack markup (before initInfoSections) */
.panel[data-panel='info'] .info-panel-stack > .panel-block:not(:last-child) .about-content > ul:last-child > li:last-child {
  margin-bottom: var(--info-prose-gap);
}

.panel[data-panel='info'] .info-panel-stack > .panel-block + .panel-block:has(> .about-content > ul:first-child) {
  padding-top: 0;
}

/* Same rhythm after info-panel-stack is flattened into details.info-section */
.panel[data-panel='info'] .info-section__body > .about-content:not(:last-child) > ul:last-child > li:last-child {
  margin-bottom: var(--info-prose-gap);
}

.panel[data-panel='info'] .info-section__body > .about-content + .about-content > ul:first-child {
  margin-top: 0;
  padding-top: 0;
}

.panel[data-panel='info'] .info-panel-stack > .panel-block:not(:last-child) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0;
}

.panel[data-panel='info'] .info-panel-stack > .panel-block:first-child {
  padding-bottom: 0;
}

.panel[data-panel='info'] .info-panel-stack {
  margin-bottom: var(--shelf-panel-gutter);
}

.histogram-container canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: var(--orby-black);
}

/* Tone curve block — divider above handles spacing from Histogram */
.tone-curve-sub {
  margin-top: 0;
}

.tone-curve-canvas-wrap {
  margin-top: 0.25rem;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, var(--orby-black) 35%, transparent);
}

.tone-curve-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  cursor: crosshair;
  touch-action: none;
  vertical-align: top;
  background: transparent;
}

.histogram-warning {
  position: absolute;
  top: 4px;
  right: 8px;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  pointer-events: none;
  z-index: 10;
}

.histogram-warning--overexposed {
  background: var(--orby-pink);
}

.histogram-warning--close {
  background: #ff9632;
}

/* Object panel — Type Creator (live editor = canvas + transparent textarea) */
.font-extrude-live-editor {
  position: relative;
  margin: 0 0 var(--shelf-section-gap);
  width: 100%;
  height: 7.5rem;
  min-height: 7.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--orby-black) 55%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  overflow: hidden;
  box-sizing: border-box;
}

.font-extrude-live-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.font-extrude-live-editor .font-extrude-preview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.font-extrude-live-editor textarea {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0.65rem 0.75rem;
  resize: none;
  overflow: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  outline: none;
  box-sizing: border-box;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Typed glyphs render on the canvas; keep textarea text transparent once a font is loaded. */
.font-extrude-live-editor.font-extrude-live-editor--preview-active textarea {
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Metrics/padding are synced in JS to match the canvas layout. */
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.font-extrude-live-editor textarea::placeholder {
  color: color-mix(in srgb, var(--text) 42%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--text) 42%, transparent);
}

.font-extrude-live-editor textarea::selection {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
}

.font-extrude-live-editor.font-extrude-live-editor--preview-active textarea::selection {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.font-extrude-circular-wrap-controls > :last-child {
  margin-bottom: 0;
}

.font-extrude-live-editor textarea:focus {
  outline: none;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.font-extrude-typo-row {
  display: grid;
  gap: var(--shelf-section-gap);
  margin-bottom: var(--shelf-section-gap);
}

.font-extrude-typo-row--pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.font-extrude-typo-row > :where(.select-line, .slider-line) {
  margin-bottom: 0;
}

.font-extrude-typo-row--pair .select-line,
.font-extrude-typo-row--pair .slider-line {
  min-width: 0;
  min-height: auto;
}

.font-extrude-typo-row--pair .select-line {
  grid-template-columns: 1fr;
  gap: 0.3rem;
}

.font-extrude-typo-row--pair .select-line > span:first-child {
  font-size: 0.73rem;
  color: var(--text-dim);
}

.font-extrude-action-row {
  margin-top: var(--shelf-section-gap);
}

.font-extrude-file-fallback {
  margin: 0;
}

.font-extrude-system-fonts-prompt {
  margin: 0 0 var(--shelf-section-gap);
}

/* Type Creator — family picker with lazy typeface previews */
.font-extrude-family-line .font-extrude-family-picker {
  position: relative;
}

.font-extrude-style-line select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.font-extrude-bevel-type-line select option:disabled {
  color: color-mix(in srgb, var(--text) 42%, transparent);
}

@media (max-width: 520px) {
  .font-extrude-typo-row--pair {
    grid-template-columns: 1fr;
  }
}

.font-extrude-family-trigger {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  border: none;
  border-radius: 999px;
  padding-block: 0;
  padding-inline: 0.65rem 1.35rem;
  color: var(--text);
  font-family: inherit;
  font-size: var(--shelf-headline-font-size);
  line-height: var(--shelf-dropdown-pill-height, var(--orby-dropdown-height));
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--ui-control-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px 10px;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 0 0 0 transparent;
}

.font-extrude-family-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.font-extrude-family-trigger:focus-visible {
  outline: none;
  background-color: var(--ui-control-surface-hover);
}

.font-extrude-family-trigger--opening {
  opacity: 0.55;
  cursor: wait;
}

.font-extrude-family-trigger-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  color: var(--text);
}

/* Figma-style font panel — portaled on body; pops left of shelf */
/* Never render the picker panel inside the shelf — it must live in #orby-font-picker-portal */
.shelf .font-extrude-family-panel,
.font-extrude-family-picker .font-extrude-family-panel {
  display: none !important;
}

#orby-font-picker-portal {
  position: static;
  z-index: 12000;
}

#orby-font-picker-portal .font-extrude-family-panel {
  display: none;
  position: fixed;
  z-index: 12000;
  min-width: 0;
  box-sizing: border-box;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--app-settings-chrome-radius);
  border: none;
  background: var(--ui-frosted-bg);
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  overflow: hidden;
  pointer-events: auto;
}

#orby-font-picker-portal .font-extrude-family-panel.is-open {
  display: flex;
}

.font-extrude-family-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.65rem 0.75rem 0.45rem;
}

.font-extrude-family-panel-title {
  font-size: var(--shelf-headline-font-size);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.font-extrude-family-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.font-extrude-family-panel-close:hover,
.font-extrude-family-panel-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  outline: none;
}

.font-extrude-family-panel-search-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 0.45rem 0.65rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  background: color-mix(in srgb, var(--orby-black) 35%, transparent);
}

.font-extrude-family-search {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
  outline: none;
}

.font-extrude-family-search:focus {
  border-color: var(--accent-border);
  background: var(--ui-control-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.font-extrude-family-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.font-extrude-family-list-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.font-extrude-family-listbox {
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  height: 100%;
  overflow-y: auto;
  outline: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.font-extrude-family-listbox::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

/* Match shelf .panels custom rail — 2px lime thumb, reveal on scroll only */
.font-extrude-family-scrollbar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  pointer-events: none;
  z-index: 1;
}

.font-extrude-family-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: transparent;
  will-change: transform;
}

.font-extrude-family-scrollbar.is-revealed .font-extrude-family-scrollbar-thumb {
  background: var(--accent);
}

.font-extrude-family-listbox:focus-visible {
  outline: none;
}

.font-extrude-family-option {
  --font-extrude-family-check-col: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.65rem 0.42rem 0.5rem;
  margin: 0;
  cursor: pointer;
  transition: background 0.12s ease;
}

.font-extrude-family-option:hover,
.font-extrude-family-option:focus {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.font-extrude-family-option.is-selected {
  background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.06));
}

.font-extrude-family-option.is-filtered-match.is-search-lead {
  background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.06));
}

.font-extrude-family-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--font-extrude-family-check-col);
  height: var(--font-extrude-family-check-col);
  opacity: 0;
}

.font-extrude-family-option-check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--orby-black);
  font-size: 0.58rem;
  line-height: 1;
}

.font-extrude-family-option-check-badge .fa-check {
  font-size: 0.58rem;
}

.font-extrude-family-option.is-selected .font-extrude-family-option-check {
  opacity: 1;
}

.font-extrude-family-option-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  line-height: 1.3;
}

.font-extrude-family-option-label-text {
  display: inline;
}

.font-extrude-family-option-mark {
  padding: 0 0.05em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--orby-black);
  font-weight: 600;
}

.font-extrude-post-gen[hidden],
.font-extrude-surface-post-gen[hidden] {
  display: none !important;
}

.font-extrude-reveal-loop-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.font-extrude-reveal-loop-control .font-extrude-reveal-loop-label {
  font-size: var(--shelf-label-font-size);
  color: var(--text-dim);
  user-select: none;
}

.font-extrude-reveal-loop-control .effect-toggle {
  margin-left: 0;
}

.font-extrude-generate {
  margin: 0;
}

.font-extrude-generate.is-loading {
  pointer-events: none;
  opacity: 0.72;
}

.font-extrude-generate.is-loading span::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.45em;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -0.12em;
  animation: font-extrude-spin 0.7s linear infinite;
}

@keyframes font-extrude-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Orby color picker — custom popover for shelf color chips ── */
#orby-color-picker-portal {
  position: fixed;
  inset: 0;
  z-index: 12001;
  pointer-events: none;
}

.orby-color-picker {
  --orby-color-picker-gap-x: calc(8px * var(--studio-ui-scale, 1));
  --orby-color-picker-gap-y: calc(14px * var(--studio-ui-scale, 1));
  --orby-color-picker-recent-gap: var(--orby-color-picker-gap-x);
  --orby-color-picker-pad: calc(14px * var(--studio-ui-scale, 1));
  --orby-color-picker-pad-x: var(--orby-color-picker-pad);
  --orby-color-picker-radius: var(--app-settings-chrome-radius);
  --orby-color-picker-control-radius: calc(6px * var(--studio-ui-scale, 1));
  --orby-color-picker-scale-w: calc(58px * var(--studio-ui-scale, 1));
  /* Hue rail — same layering as shelf gradient sliders: pill track + larger ring thumb on top */
  --orby-color-picker-hue-track-height: calc(12px * var(--studio-ui-scale, 1));
  --orby-color-picker-hue-thumb-size: calc(14px * var(--studio-ui-scale, 1));
  --orby-color-picker-hue-thumb-border: calc(2px * var(--studio-ui-scale, 1));
  position: fixed;
  z-index: 12001;
  box-sizing: border-box;
  border-radius: var(--orby-color-picker-radius);
  border: none;
  background: var(--ui-frosted-bg);
  backdrop-filter: blur(var(--ui-frosted-blur));
  -webkit-backdrop-filter: blur(var(--ui-frosted-blur));
  box-shadow: 0 10px 36px color-mix(in srgb, var(--orby-black) 42%, transparent);
  pointer-events: auto;
  overflow: hidden;
  visibility: hidden;
}

.orby-color-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--studio-ui-scale, 1));
  flex-shrink: 0;
  padding: var(--orby-color-picker-pad) var(--orby-color-picker-pad-x);
}

.orby-color-picker__title.block-title {
  margin: 0;
  padding: 0;
  min-width: 0;
  line-height: 1;
  font-size: var(--shelf-label-font-size);
}

.orby-color-picker__close.close-btn {
  width: calc(1.25rem * var(--studio-ui-scale, 1));
  height: calc(1.25rem * var(--studio-ui-scale, 1));
  margin: 0;
  flex-shrink: 0;
  align-self: center;
  border-radius: calc(4px * var(--studio-ui-scale, 1));
}

.orby-color-picker__close.close-btn::before,
.orby-color-picker__close.close-btn::after {
  height: calc(0.65rem * var(--studio-ui-scale, 1));
}

.orby-color-picker__close.close-btn:hover {
  color: var(--accent);
  background: transparent;
}

.orby-color-picker__close.close-btn:focus-visible {
  color: var(--accent);
  background: transparent;
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.orby-color-picker__body {
  display: flex;
  flex-direction: column;
  gap: var(--orby-color-picker-gap-y);
  padding: var(--orby-color-picker-pad) var(--orby-color-picker-pad-x)
    var(--orby-color-picker-pad);
  --orby-color-picker-control-height: calc(30px * var(--studio-ui-scale, 1));
}

.orby-color-picker__sv {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  background-clip: padding-box;
  flex-shrink: 0;
}

.orby-color-picker__sv-thumb,
.orby-color-picker__hue-thumb {
  position: absolute;
  box-sizing: border-box;
  width: var(--orby-color-picker-hue-thumb-size, 14px);
  height: var(--orby-color-picker-hue-thumb-size, 14px);
  border: var(--orby-color-picker-hue-thumb-border, 2px) solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.orby-color-picker__hue {
  --hue-ratio: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: var(--orby-color-picker-hue-thumb-size);
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  overflow: visible;
}

.orby-color-picker__hue-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--orby-color-picker-hue-track-height);
  transform: translateY(-50%);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(
    to right,
    #f00 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  );
  pointer-events: none;
}

.orby-color-picker__hue-thumb {
  top: 50%;
  left: calc(
    var(--orby-color-picker-hue-thumb-size, 14px) / 2 +
      (100% - var(--orby-color-picker-hue-thumb-size, 14px)) * var(--hue-ratio, 0)
  );
}

.orby-color-picker__inputs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--orby-color-picker-scale-w);
  align-items: stretch;
  gap: var(--orby-color-picker-gap-x);
  width: 100%;
}

.orby-color-picker__eyedropper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--orby-color-picker-control-height);
  height: var(--orby-color-picker-control-height);
  min-width: var(--orby-color-picker-control-height);
  align-self: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.12s ease;
}

.orby-color-picker__eyedropper:hover,
.orby-color-picker__eyedropper:focus-visible {
  color: var(--accent);
  background: transparent;
  outline: none;
}

.orby-color-picker__eyedropper:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 1px;
}

.orby-color-picker__eyedropper i {
  display: block;
  font-size: calc(16px * var(--studio-ui-scale, 1));
  line-height: 1;
}

.orby-color-picker[data-color-scale='hex'] .orby-color-picker__fields-wrap {
  min-width: calc(7ch + 2 * 8px * var(--studio-ui-scale, 1));
}

.orby-color-picker__fields-wrap {
  position: relative;
  min-width: 0;
}

.orby-color-picker__fields-wrap .orby-color-picker__fields {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--orby-color-picker-gap-x);
  min-width: 0;
  width: 100%;
}

.orby-color-picker__fields-wrap .orby-color-picker__fields.is-visible {
  display: grid;
}

.orby-color-picker__fields--hex {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.orby-color-picker[data-color-scale='hex'] .orby-color-picker__fields-wrap .orby-color-picker__fields {
  width: 100%;
}

.orby-color-picker__scale-combo {
  position: relative;
  flex: 0 0 var(--orby-color-picker-scale-w);
  width: var(--orby-color-picker-scale-w);
  min-width: var(--orby-color-picker-scale-w);
}

.orby-color-picker__hex,
.orby-color-picker__channel,
.orby-color-picker__scale-trigger {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: var(--orby-color-picker-control-height);
  padding: 0 calc(8px * var(--studio-ui-scale, 1));
  border-radius: var(--orby-color-picker-control-radius);
  border: none;
  background: var(--ui-control-surface);
  color: var(--text);
  font: inherit;
  font-size: calc(12px * var(--studio-ui-scale, 1));
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

.orby-color-picker__hex {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: left;
  width: 100%;
  min-width: calc(7ch + 2 * 8px * var(--studio-ui-scale, 1));
  max-width: none;
}

.orby-color-picker__channel {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.orby-color-picker__scale-trigger {
  padding-left: calc(6px * var(--studio-ui-scale, 1));
  padding-right: calc(18px * var(--studio-ui-scale, 1));
  cursor: pointer;
  text-align: center;
  background-color: var(--ui-control-surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 10px) calc(50% - 2px),
    calc(100% - 6px) calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.orby-color-picker__scale-combo.is-open .orby-color-picker__scale-trigger,
.orby-color-picker__scale-trigger:hover,
.orby-color-picker__scale-trigger:focus-visible {
  outline: none;
  background-color: var(--ui-control-surface-hover);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 10px) calc(50% - 2px),
    calc(100% - 6px) calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.orby-color-picker__scale-list {
  position: absolute;
  z-index: 2;
  top: calc(100% + calc(4px * var(--studio-ui-scale, 1)));
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: calc(4px * var(--studio-ui-scale, 1)) 0;
  list-style: none;
  border: none;
  border-radius: var(--orby-color-picker-control-radius);
  background: color-mix(in srgb, var(--orby-black) 8%, rgb(22, 22, 24));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.orby-color-picker__scale-option {
  padding: calc(6px * var(--studio-ui-scale, 1)) calc(10px * var(--studio-ui-scale, 1));
  font-size: calc(12px * var(--studio-ui-scale, 1));
  line-height: 1.2;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.orby-color-picker__scale-option:hover,
.orby-color-picker__scale-option:focus-visible {
  background: var(--ui-control-surface);
  outline: none;
}

.orby-color-picker__scale-option.is-selected {
  color: var(--accent);
}

.orby-color-picker__hex:focus-visible,
.orby-color-picker__channel:focus-visible {
  outline: none;
  background-color: var(--ui-control-surface-hover);
}

.orby-color-picker__recent {
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--studio-ui-scale, 1));
}

.orby-color-picker__recent-rule {
  height: 1px;
  background: color-mix(in srgb, var(--stroke, rgba(255, 255, 255, 0.12)) 70%, transparent);
}

.orby-color-picker__recent-swatches {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--orby-color-picker-recent-gap);
}

.orby-color-picker__recent-swatch {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.orby-color-picker__recent-swatch:hover {
  transform: scale(1.06);
}

.orby-color-picker__recent-swatch:focus-visible {
  outline: none;
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--ui-control-surface-hover);
}