/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter/inter-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter/inter-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter/inter-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The complete production-style editor moves as one screen. Its photograph
   and native masks stay together, then settle flat for precise interaction. */
.rd-scroll-story {
  position: relative;
  width: 100%;
  max-width: 125rem;
  height: auto;
  margin-inline: auto;
  --reveal-progress: 0;
  --frame-progress: 1;
  --deconstruct-progress: 0;
  --scene-photo-opacity: 1;
  --scene-piece-opacity: 0;
  --opening-photo-opacity: 0;
  --exit-progress: 0;
  --exit-opacity: 1;
  --exit-frame-opacity: 1;
  --exit-housing-opacity: 1;
  --exit-detail-opacity: 1;
  --exit-glass: 0;
  --exit-brightness: 1;
  --exit-saturation: 1;
  --exit-sheen-position: -35%;
  --exit-blur: 0px;
  --model-spread: 1;
  --dock-top: 110px;
}
.rd-frame-rig { position: relative; width: 100%; }
.rd-frame-housing { display: none; }
.rd-segment-lift { display: none; pointer-events: none; }
/* The normal editor image is visible from first paint. Entrance-only copies
   never cover its selectable surfaces, including while JavaScript loads. */
.rd-opening-photo,
.rd-opening-thumb { display: none !important; }

.hp_hero_visual.hero-showcase {
  position: relative;
  display: block;
  width: 100%;
  max-width: 125rem;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border: 10px solid #090909;
  border-radius: 32px;
  background: #0a0a0a;
  box-shadow: 0 28px 70px #30243b33, 0 5px 10px #0002;
  color: #eee;
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  scroll-margin-top: 110px;
}

.hero-showcase * { box-sizing: border-box; font-family: inherit; }
.hero-showcase button,
.hero-showcase a { -webkit-tap-highlight-color: transparent; }
.hero-showcase button { font: inherit; color: inherit; cursor: pointer; }
.hero-showcase button:disabled { cursor: default; }
.hero-showcase button:focus-visible,
.hero-showcase a:focus-visible,
.hero-showcase select:focus-visible { outline: 2px solid #c5a9ff; outline-offset: 3px; }
.hero-showcase svg { width: 17px; height: 17px; flex-shrink: 0; }

.rd-app {
  display: grid;
  grid-template-columns: minmax(170px, 18%) minmax(0, 1fr) minmax(215px, 22%);
  height: clamp(460px, calc(100svh - 190px), 760px);
  min-width: 0;
  background: #0a0a0a;
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 1280px) {
  /* Production uses a 280px settings sidebar so paired control values fit. */
  .rd-app { grid-template-columns: 280px minmax(0, 1fr) 320px; }
}

/* Give large displays a properly sized workspace while keeping the native
   editor panels at readable widths. Height must not depend on --dock-top. */
@media (min-width: 1800px) and (min-height: 1000px) {
  .section_hp-hero .container-large { max-width: min(88vw, 1880px); }
  .rd-scroll-story,
  .hp_hero_visual.hero-showcase { max-width: none; }
  .rd-app {
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    height: min(calc(100svh - 240px), 1040px);
  }
}
@media (min-width: 3000px) and (min-height: 1400px) {
  .section_hp-hero .container-large { max-width: min(80vw, 2400px); }
  .rd-app { height: min(calc(100svh - 320px), 1280px); }
}

.rd-left,
.rd-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0d0d0d;
}
.rd-left { border-right: 1px solid #ffffff0d; }
.rd-right { border-left: 1px solid #ffffff0d; }
.rd-project {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  border-bottom: 1px solid #ffffff0d;
  font-size: 12px;
  font-weight: 500;
}
.rd-project > span { color: #888; font-size: 24px; font-weight: 300; }
.rd-project small { display: block; color: #777; font-size: 10px; font-weight: 400; }
.rd-settings {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
.rd-settings > * { flex-shrink: 0; }
.rd-field { display: grid; gap: 8px; }
.rd-label { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: #b0b0b0; font-size: 11px; font-weight: 500; }
.rd-label > span { color: #737373; }
.rd-model,
.rd-select { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 9px 10px; border: 1px solid #ffffff06; border-radius: 8px; background: #171717; color: #bababa; font-size: 10px; white-space: nowrap; }
.rd-model small { margin-left: 4px; padding: 3px; border-radius: 3px; background: #242424; color: #999; font-size: 8px; }
.rd-base-thumb { display: block; width: 100%; height: auto; aspect-ratio: 2048 / 1373; object-fit: cover; border-radius: 8px; }
.rd-image-pair { position: relative; display: block; }
.rd-image-pair .rd-opening-thumb { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.rd-settings .rd-image-pair { height: 140px; overflow: hidden; border: 1px solid #ffffff0d; border-radius: 8px; background: #171717; }
.rd-settings .rd-base-thumb { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.rd-prompt { min-height: 76px; padding: 10px; border: 1px solid #ffffff06; border-radius: 8px; background: #171717; color: #aaa; font-size: 11px; line-height: 1.6; }
.rd-empty { display: flex; align-items: center; gap: 8px; padding: 11px 9px; border: 1px solid #ffffff05; border-radius: 8px; background: #161616; color: #858585; font-size: 10px; }
.rd-empty small { margin-left: auto; color: #777; font-size: 8px; }
.rd-setting-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.hero-showcase select.rd-select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding-inline: 12px 22px;
  border-color: #ffffff0d;
  border-radius: 6px;
  background: #ffffff0d;
  color: #d4d4d4;
  color-scheme: dark;
  appearance: auto;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
}
.hero-showcase select.rd-select:disabled { opacity: .5; cursor: default; }
.hero-showcase select.rd-select option { background: #1a1a1a; color: #d4d4d4; }
.hero-showcase select.rd-select-native[hidden] { display: none !important; }
.rd-setting-grid .rd-label { margin-bottom: 0; }

/* The production editor's trigger, menu and preset-preview styling. Menus are
   portalled outside the moving tablet so their edges remain unclipped. */
.hero-showcase button.rd-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #ffffff0d;
  border-radius: 6px;
  background: #ffffff0d;
  color: #d4d4d4;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: start;
  transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hero-showcase .rd-select-trigger[data-empty=true] { color: #737373; }
.hero-showcase .rd-select-trigger:hover:not(:disabled),
.hero-showcase .rd-select-trigger:focus-visible,
.hero-showcase .rd-select-trigger[aria-expanded=true] {
  color: #fff;
  border-color: #5555554d;
  box-shadow: 0 4px 12px #7f56d926;
}
.hero-showcase .rd-select-trigger:focus-visible { outline: 1px solid #7f56d9; outline-offset: 2px; }
.hero-showcase .rd-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
.rd-settings { scrollbar-width: thin; scrollbar-color: #555 transparent; }
.rd-settings::-webkit-scrollbar { width: 6px; }
.rd-settings::-webkit-scrollbar-thumb { background: #555; border-radius: 6px; }
.rd-select-value { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-showcase .rd-select-chevron { flex: 0 0 16px; width: 16px; height: 16px; opacity: .5; transition: opacity .3s ease; }
.rd-select-trigger:hover .rd-select-chevron,
.rd-select-trigger[aria-expanded=true] .rd-select-chevron { opacity: 1; }
.rd-select-menu {
  position: fixed;
  z-index: 10010;
  box-sizing: border-box;
  min-width: 160px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid #ffffff1a;
  border-radius: 6px;
  background: #1a1a1a;
  color: #d4d4d4;
  box-shadow: 0 4px 6px -1px #0003, 0 2px 4px -2px #0003;
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: start;
  scrollbar-width: thin;
  scrollbar-color: #ffffff29 #ffffff0a;
  transform-origin: top center;
  animation: rd-select-open .15s ease-out;
}
.rd-select-menu * { box-sizing: border-box; font-family: inherit; }
.rd-select-menu[hidden] { display: none; }
.rd-select-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  padding-inline-end: 32px;
  border-radius: 4px;
  color: #d4d4d4;
  font-size: 14px;
  line-height: 20px;
  cursor: default;
  user-select: none;
  outline: none;
}
.rd-select-option-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rd-select-option:hover,
.rd-select-option[data-active=true] { background: #ffffff1a; color: #fff; }
.rd-select-option[aria-selected=true] { color: #fff; }
.rd-select-option[aria-disabled=true] { opacity: .5; pointer-events: none; }
.rd-select-option .rd-select-check { position: absolute; inset-inline-end: 8px; top: calc(50% - 8px); width: 16px; height: 16px; color: #7f56d9; opacity: 0; pointer-events: none; }
.rd-select-option[aria-selected=true] .rd-select-check { opacity: 1; }
.rd-select-menu--preset {
  display: flex;
  width: 620px;
  height: min(480px, calc(100dvh - 200px));
  padding: 0;
  overflow: hidden;
  border-color: #c084fc59;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px #3b076433;
}
.rd-preset-list { flex: 0 0 260px; max-width: 46%; min-width: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ffffff29 #ffffff0a; }
.rd-preset-list .rd-select-option { min-height: 32px; padding-block: 8px; padding-inline-start: 12px; border-radius: 0; font-size: 12px; line-height: 16px; }
.rd-preset-list .rd-select-option[aria-selected=true] { background: #ffffff12; color: #e5e5e5; }
.rd-preset-list .rd-select-option:hover,
.rd-preset-list .rd-select-option[data-active=true] { background: #ffffff0d; }
.rd-preset-preview { flex: 1; min-width: 0; padding: 20px; border-inline-start: 1px solid #ffffff0d; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff29 #ffffff0a; }
.rd-preset-placeholder { display: block; width: 100%; height: 200px; margin: 0 0 16px; padding: 72px; border-radius: 12px; background: #171717; color: #404040; }
.rd-preset-title { display: block; margin: 0 0 8px; color: #e5e5e5; font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; }
.rd-preset-description { margin: 0; color: #a3a3a3; font-size: 11px; font-weight: 400; line-height: 1.625; overflow-wrap: anywhere; }
@keyframes rd-select-open { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } }
.rd-advanced { display: flex; justify-content: space-between; margin-top: 8px; color: #888; font-size: 10px; }
.rd-render { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; margin: 10px 12px 12px; padding: 10px 6px; border: 1px solid #ffffff08; border-radius: 8px; background: #222; color: #ccc; font-size: 11px; font-weight: 500; text-decoration: none; transition: background .18s ease, color .18s ease; }
.rd-render:hover { background: #7f56d9; color: #fff; }
.rd-render svg { width: 15px; height: 15px; }

.rd-editor { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0a0a0a; }
.rd-toolbar { position: absolute; z-index: 3; top: 14px; left: 50%; display: flex; align-items: center; gap: 3px; padding: 5px; transform: translateX(-50%); border: 1px solid #ffffff12; border-radius: 10px; background: #1b1b1bf2; box-shadow: 0 4px 14px #0003; white-space: nowrap; }
.rd-tool { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #b2b2b2; }
.rd-tool-active { background: #3a3a3a; color: #fff; }
button.rd-tool:hover:not(:disabled),
button.rd-fit:hover:not(:disabled) { background: #333; color: #fff; }
.rd-tool:disabled { opacity: .35; }
.rd-toolbar-divider { width: 1px; height: 19px; margin: 0 3px; background: #383838; }
.rd-fit { display: flex; align-items: center; justify-content: center; min-width: 45px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: #c7c7c7; font-size: 11px !important; font-variant-numeric: tabular-nums; }
.rd-stage { position: absolute; inset: 58px 0 76px; overflow: hidden; background: #0a0a0a; touch-action: pan-y; }
.rd-viewport { position: absolute; inset: 0; transform: none; transform-origin: 50% 50%; transition: transform .18s ease; }
.rd-scene-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; transform: none; object-fit: contain; object-position: center; pointer-events: none; user-select: none; }
.rd-opening-photo { z-index: 2; opacity: 0; background: #0a0a0a; }
.rd-segment-canvas { position: absolute; z-index: 1; inset: 0; touch-action: pan-y; }
.rd-segment-canvas canvas,
.hero-segment-canvas { display: block; width: 100%; height: 100%; outline: none; }
.rd-flat-overlay { position: absolute; z-index: 2; inset: 0; opacity: 0; pointer-events: none; background: #7f56d964; mask-mode: luminance; mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
.hero-showcase[data-flat-selection=true] .rd-flat-overlay { opacity: 1; }
.rd-scene-hint { position: absolute; right: 12px; bottom: 62px; left: 12px; color: #999; font-size: 10px; text-align: center; pointer-events: none; }
.rd-version-strip { position: absolute; bottom: 13px; left: 50%; padding: 4px; transform: translateX(-50%); border: 1px solid #ffffff13; border-radius: 8px; background: #1a1a1a; }
.rd-version-strip img { display: block; width: 45px; height: 30px; object-fit: cover; border: 1px solid #c9b5fb; border-radius: 4px; }

.rd-panel-title { display: flex; align-items: center; flex-shrink: 0; min-height: 54px; padding: 14px 13px; border-bottom: 1px solid #ffffff05; color: #ddd; font-size: 12px; }
.rd-segmap { display: grid; flex-shrink: 0; gap: 7px; padding: 14px 12px; }
.rd-segments-label { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 6px; padding: 5px 13px 10px; color: #999; font-size: 11px; }
.rd-segment-actions { display: flex; align-items: center; gap: 4px; }
.rd-segment-actions button { display: flex; align-items: center; justify-content: center; min-width: 26px; height: 28px; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: #aaa; font-size: 10px; }
.rd-segment-actions button:hover:not(:disabled) { background: #ffffff0d; color: #fff; }
.rd-segment-actions button:disabled { opacity: .35; }
.rd-segment-actions svg { width: 15px; height: 15px; }
.rd-segments { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 0 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.rd-segment { display: flex; flex: 0 0 auto; flex-direction: column; gap: 5px; width: 100%; min-width: 0; min-height: 62px; padding: 12px; border: 1px solid #ffffff0d; border-radius: 8px; background: #ffffff0d; color: #aaa !important; font-size: 12px !important; text-align: left; transition: border-color .16s ease, background .16s ease, opacity .2s ease; }
.rd-segments { position: relative; }
.rd-segment[hidden], .rd-search-empty[hidden] { display: none; }
.rd-segment-search { flex-shrink: 0; display: block; margin: 0 12px 12px; }
.hero-showcase .rd-segment-search input { width: 100%; min-width: 0; height: 38px; padding: 8px 11px; border: 1px solid #ffffff18; border-radius: 7px; background: #161616; color: #eee; font: inherit; font-size: 11px; outline: none; }
.hero-showcase .rd-segment-search input:focus-visible { border-color: #bca1f5; box-shadow: 0 0 0 2px #7f56d92b; }
.rd-segment-search input::placeholder { color: #8b8b8b; }
.rd-search-empty { padding: 12px; color: #aaa; font-size: 11px; }
.rd-segment-heading { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; font-size: 12px; line-height: 16px; }
.rd-segment-heading > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-segment-grip { flex-shrink: 0; color: #5f5f5f; font-size: 13px; }
.rd-segment-swatch { flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px; background: #7f56d9; }
.rd-segment-detail { padding-left: 23px; color: #818181; font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; }
.rd-segment:hover:not(:disabled) { border-color: #444; color: #eee !important; }
.rd-segment[aria-pressed=true] { border-color: #555; background: #ffffff12; color: #eee !important; }
.rd-segment[data-revealed=false] { opacity: .55; }
.rd-segment[data-revealed=true],
.rd-segment[aria-pressed=true],
.rd-segment[data-hovered=true] { opacity: 1; }
.rd-segment[data-hovered=true] { border-color: #a38acb; box-shadow: inset 0 0 0 1px #7f56d92b; color: #eee !important; }
.rd-selection-note { display: flex; align-items: flex-start; flex-shrink: 0; gap: 7px; padding: 12px 14px; color: #858585; font-size: 10px; }
.rd-note-dot { flex-shrink: 0; width: 4px; height: 4px; margin-top: 6px; border-radius: 50%; background: #7f56d9; }

/* One surface stays in view. Material choices replace the long proposal list. */
.rd-surface-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 14px 12px 12px; }
.rd-surface-controls > .rd-label { grid-column: 1 / -1; }
.rd-material-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.rd-selected-surface { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px; border: 1px solid #555; border-radius: 8px; background: #ffffff12; text-align: start; }
.hero-showcase:not([data-selected]) .rd-selected-surface,
.hero-showcase[data-selected=""] .rd-selected-surface { display: none; }
.rd-surface-preview { position: relative; grid-column: 1; grid-row: 1; width: 32px; height: 32px; overflow: hidden; border: 0; border-radius: 4px; background: #141414; }
.rd-surface-preview > div { position: absolute; background: url('/images/hero-depth/demo-house.webp') center / 100% 100%; mask-size: 100% 100%; mask-mode: luminance; mask-repeat: no-repeat; }
.rd-material-scroll .rd-segments { display: block; grid-column: 2; flex: none; max-height: none; padding: 0; overflow: visible; }
.rd-material-scroll .rd-segment { min-height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #d4d4d4 !important; text-align: start; }
.rd-material-scroll .rd-segment[data-hovered=true] { box-shadow: none; }
.rd-material-scroll .rd-segment-heading { font-size: 12px; font-weight: 500; }
.rd-material-scroll .rd-segment-detail { display: block; padding: 0; padding-inline-start: 24px; color: #737373; font-size: 10px; }
.rd-material-scroll .rd-segment-grip { display: none; }
.rd-material-scroll .rd-segment-swatch { width: 16px; height: 16px; border-radius: 2px; }
.rd-surface-empty { display: grid; place-items: center; gap: 10px; min-height: 130px; padding: 18px 10px; border: 1px dashed #ffffff1a; border-radius: 8px; color: #888; text-align: center; }
.rd-surface-empty svg { width: 26px; height: 26px; color: #b6a1dc; }
.rd-surface-empty p { margin: 0; font-size: 11px; }
.rd-material-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 14px 0 9px; }
.hero-showcase .rd-material-reset { padding: 4px; border: 0; background: transparent; color: #aaa; font-size: 10px; }
.rd-material-reset:disabled { opacity: .35; }
.rd-material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero-showcase .rd-material { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: #fff; text-align: center; font-size: 9px; line-height: 13px; transition: background .2s ease, box-shadow .2s ease; }
.rd-material img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 0; border-radius: 8px; transition: filter .2s ease; }
.rd-material:hover:not(:disabled) { background: #ffffff0d; }
.rd-material:hover:not(:disabled) img { filter: brightness(1.1); }
.hero-showcase .rd-material[aria-pressed=true] { background: #ffffff1a; box-shadow: 0 10px 15px -3px #73737333; }
.rd-material:disabled { opacity: .4; }
.rd-material-assignment { display: flex; grid-column: 2; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #737373; font-size: 10px; line-height: 14px; }
.hero-showcase .rd-material-assignment img { flex: 0 0 16px; width: 16px; min-width: 16px; max-width: 16px; height: 16px; border-radius: 2px; object-fit: cover; }
.rd-material-assignment > div { min-width: 0; overflow-wrap: anywhere; }
.rd-material-assignment .rd-label { display: none; }
.rd-surface-preview[hidden], .rd-surface-empty[hidden], .rd-material-assignment[hidden] { display: none; }

/* Production material browsing: one segment card, then categories, materials
   and an explicit preview/apply step. The render action remains in its footer. */
.rd-right { position: relative; overflow: hidden; }
.rd-right [hidden] { display: none !important; }
.rd-panel-header { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 50px; padding: 16px 16px 12px; border-bottom: 1px solid #ffffff0d; color: #a3a3a3; font-size: 11px; font-weight: 500; line-height: 16px; text-align: start; }
.rd-panel-header > [data-segments-title] { flex: 1; }
.rd-panel-header [data-selected-title] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e5e5e5; }
.hero-showcase .rd-material-back { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #a3a3a3; font-size: 11px; font-weight: 400; }
.rd-material-back svg { width: 14px; height: 14px; }
.rd-material-back:hover { color: #fff; }
.rd-material-crumb { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; color: #525252; font-size: 11px; font-weight: 400; }
.rd-material-crumb [data-material-surface-title] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e5e5e5; font-weight: 500; }
.rd-right-body { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ffffff1a transparent; }
.rd-right-body::-webkit-scrollbar { width: 6px; }
.rd-right-body::-webkit-scrollbar-track { background: transparent; }
.rd-right-body::-webkit-scrollbar-thumb { border-radius: 6px; background: #ffffff1a; }
.rd-right-body .rd-material-scroll { display: block; padding: 0; overflow: visible; }
.rd-right-body .rd-surface-controls { padding: 0 0 16px; }
.rd-right-body .rd-selected-surface { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 8px; }
.rd-selected-surface .rd-surface-preview { display: none; }
.rd-selected-surface .rd-segments { display: block; grid-column: 1 / -1; min-height: 0; max-height: none; padding: 0; overflow: visible; }
.rd-selected-surface .rd-segment { min-height: 32px; padding: 0; border: 0; background: transparent; }
.hero-showcase .rd-material-browse { display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 7px 10px; border: 1px solid #ffffff0d; border-radius: 6px; background: #ffffff0d; color: #a3a3a3; font-size: 11px; line-height: 16px; transition: background .2s ease, color .2s ease; }
.rd-material-browse svg { width: 14px; height: 14px; }
.rd-material-browse:hover:not(:disabled) { background: #ffffff1a; color: #fff; }
.rd-material-browse:disabled { opacity: .5; }
.rd-right-body .rd-selected-surface .rd-segments { grid-column: 1; grid-row: 1; }
.hero-showcase .rd-selected-surface .rd-material-browse { grid-column: 2; grid-row: 1; align-self: start; width: 24px; min-height: 24px; height: 24px; padding: 4px; border: 0; background: transparent; }
.rd-selected-surface .rd-material-browse > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-showcase .rd-material-prompt { grid-column: 1 / -1; display: block; width: 100%; min-width: 0; height: 40px; padding: 8px; border: 1px solid #ffffff0d; border-radius: 4px; outline: none; background: #0d0d0d; color: #d4d4d4; font: inherit; font-size: 12px; font-weight: 400; line-height: 18px; }
.rd-material-prompt::placeholder { color: #525252; }
.hero-showcase .rd-material-prompt:focus-visible { border-color: #ffffff33; outline: 1px solid #7f56d9; outline-offset: 2px; }
.rd-material-prompt:disabled { opacity: .5; }
.hero-showcase .rd-selected-surface .rd-material-assignment { grid-column: 1; min-width: 0; min-height: 24px; padding: 4px 8px; border: 1px solid transparent; color: #737373; font-size: 10px; text-align: start; cursor: pointer; }
.rd-selected-surface .rd-material-assignment:hover { border-color: #ffffff1a; background: #ffffff08; }
.rd-selected-surface [data-assigned-name] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-material-assignment > span { flex: 1; min-width: 0; }
.hero-showcase .rd-selected-surface [data-material-reset] { grid-column: 2; display: grid; place-items: center; width: 24px; min-height: 24px; height: 24px; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: #525252; }
.rd-selected-surface [data-material-reset] svg { width: 12px; height: 12px; }
.rd-selected-surface [data-material-reset]:hover:not(:disabled) { background: #ffffff1a; color: #a3a3a3; }
.rd-material-search-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.rd-material-search-row > svg { width: 14px; height: 14px; color: #525252; }
.hero-showcase .rd-material-search-row input { flex: 1; min-width: 0; width: 100%; height: 32px; padding: 6px 10px; border: 1px solid #ffffff0d; border-radius: 6px; outline: none; background: #ffffff0d; color: #e5e5e5; font: inherit; font-size: 12px; line-height: 18px; }
.rd-material-search-row input::placeholder { color: #525252; }
.hero-showcase .rd-material-search-row input:focus-visible { border-color: #ffffff33; outline: 1px solid #7f56d9; outline-offset: 2px; }
.hero-showcase .rd-material-search-row button { display: grid; flex: 0 0 auto; place-items: center; min-width: 28px; min-height: 32px; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: #737373; font-size: 10px; }
.rd-material-search-row button:hover { background: #ffffff0d; color: #fff; }
.rd-material-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hero-showcase .rd-material-category { position: relative; display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid transparent; border-radius: 12px; background: #262626; color: #fff; text-align: start; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.rd-material-category > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rd-material-category::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000c, #0005 45%, transparent); pointer-events: none; }
.rd-category-caption { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; }
.rd-category-caption strong { font-size: 11px; font-weight: 600; line-height: 1.25; text-shadow: 0 2px 3px #0006; overflow-wrap: anywhere; }
.rd-category-caption small { margin-top: 2px; color: #d4d4d4; font-size: 9px; font-weight: 400; line-height: 13px; }
.rd-material-category:hover:not(:disabled) { transform: scale(1.02); border-color: #ffffff33; box-shadow: 0 10px 15px -3px #0005; }
.rd-material-category:hover:not(:disabled) > img { transform: scale(1.1); }
.rd-material-category:disabled { opacity: .5; }
.rd-material-category-nav { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 12px; color: #e5e5e5; font-size: 11px; font-weight: 500; line-height: 16px; text-align: start; }
.hero-showcase .rd-material-category-nav button { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #a3a3a3; font-size: 11px; font-weight: 400; }
.rd-material-category-nav button svg { width: 14px; height: 14px; }
.rd-material-category-nav button:hover { color: #fff; }
.rd-material-no-results { margin: 0; padding: 32px 4px; color: #737373; font-size: 12px; line-height: 18px; text-align: center; }
.hero-showcase .rd-material[data-previewed=true] { background: #ffffff1a; box-shadow: 0 10px 15px -3px #73737333; }
.rd-material-preview { position: absolute; z-index: 4; inset-inline: 0; bottom: 64px; padding: 20px 16px 24px; background: #0d0d0d; text-align: center; }
.rd-material-preview::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 64px; background: linear-gradient(to top, #0d0d0d, #0d0d0dcc 35%, transparent); pointer-events: none; }
.rd-material-sphere { position: relative; width: 176px; height: 176px; margin: 0 auto; overflow: hidden; border-radius: 50%; background-color: #737373; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset -30px -30px 60px #0009, inset 15px 15px 30px #ffffff26, inset -5px -5px 15px #0006, 0 20px 40px #0008, 0 5px 15px #0005; animation: rd-material-sphere-turn 300s linear infinite; }
.rd-material-sphere::before { content: ""; position: absolute; top: 16px; left: 32px; width: 64px; height: 32px; border-radius: 50%; background: linear-gradient(to bottom, #ffffffcc, transparent); opacity: .3; filter: blur(8px); pointer-events: none; }
.rd-material-sphere::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 12px 6px at 60px 38px, #ffffff73, transparent), linear-gradient(135deg, transparent 40%, #ffffff1a); pointer-events: none; }
.rd-material-preview-name { margin: 16px 0 10px; color: #e5e5e5; font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; }
.hero-showcase .rd-material-apply { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 6px 16px; border: 1px solid #ffffff1a; border-radius: 6px; background: #ffffff1a; color: #e5e5e5; font-size: 12px; font-weight: 400; line-height: 18px; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.rd-material-apply .rd-note-dot,
.rd-material-apply > span:first-child:not(:last-child):empty { flex: 0 0 8px; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: #7f56d9; }
.rd-material-apply:hover:not(:disabled) { border-color: #ffffff33; background: #ffffff26; box-shadow: 0 4px 12px #7f56d926; }
.rd-material-apply:disabled { opacity: .5; }
.hero-showcase .rd-material-preview-close { position: absolute; top: 4px; inset-inline-end: 12px; display: grid; place-items: center; width: 28px; min-height: 28px; height: 28px; padding: 6px; border: 0; border-radius: 50%; background: #ffffff1a; color: #a3a3a3; }
.rd-material-preview-close svg { width: 16px; height: 16px; }
.rd-material-preview-close:hover { background: #ffffff33; color: #fff; }
.rd-right:has(.rd-material-preview:not([hidden])) .rd-right-body { padding-bottom: 340px; }
.rd-right > .rd-render { display: flex; flex: 0 0 40px; min-height: 40px; margin: 12px 16px; padding: 8px 12px; border-color: #ffffff0d; border-radius: 8px; background: #ffffff1a; color: #a3a3a3; font-size: 12px; font-weight: 500; }
.rd-right > .rd-render:hover { border-color: #ffffff26; background: #ffffff1a; color: #fff; box-shadow: 0 0 10px 5px #7f56d940, 0 0 20px #7f56d926; }
@keyframes rd-material-sphere-turn { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (min-width: 768px) and (max-height: 900px) {
  /* Short editors retain the same preview controls without covering results. */
  .rd-material-preview { position: relative; inset: auto; flex: 0 0 auto; padding: 12px 16px 14px; border-top: 1px solid #ffffff0d; }
  .rd-material-preview::before { display: none; }
  .rd-material-sphere { width: 96px; height: 96px; }
  .rd-material-sphere::before { top: 8px; left: 16px; width: 36px; height: 18px; }
  .rd-material-preview-name { margin-top: 10px; font-size: 12px; line-height: 16px; }
  .rd-right:has(.rd-material-preview:not([hidden])) .rd-right-body { padding-bottom: 16px; }
}

.rd-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-showcase:not([data-enhanced]) .rd-segment,
.hero-showcase:not([data-enhanced]) button.rd-tool,
.hero-showcase:not([data-enhanced]) button.rd-fit { pointer-events: none; opacity: .55; }

/* The controller opts into the hold only when motion is permitted. An explicit
   ?showcase-motion=on preview can enable it without changing device settings. */
/* The cinematic hold adds scroll distance during enhancement. Preserve the
   visitor's restored scroll position instead of anchoring a later section. */
html:has(.rd-scroll-story[data-scroll-hold=true]) { overflow-anchor: none; }
@media (min-width: 1000px) and (min-height: 720px) {
  .rd-scroll-story[data-scroll-hold=true] {
    /* A short outgoing effect follows the ready-to-use editor. Native scrolling
       releases it as the segments separate; there is no entrance sequence. */
    height: calc(var(--frame-height, 650px) + 20vh);
    isolation: isolate;
  }
  /* Stage light remains behind the physical screen and moves with its approach. */
  .rd-scroll-story[data-scroll-hold=true]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: min(80vh, 850px);
    background: radial-gradient(ellipse at 50% 38%, #dac8ff9e, transparent 67%);
    mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
    transform: translateY(calc(var(--frame-progress) * 180px));
    opacity: calc((.2 + (1 - var(--frame-progress)) * .8) * var(--exit-detail-opacity));
    pointer-events: none;
  }
  .rd-scroll-story[data-scroll-hold=true] > .rd-frame-rig {
    --frame-depth: calc(1 - var(--frame-progress));
    position: sticky;
    top: var(--dock-top, 110px);
    transform-origin: 50% 48%;
    /* Do not add opacity/filter/isolation/overflow clipping here: it flattens the shell. */
    overflow: visible;
    transform-style: preserve-3d;
    transform: perspective(1400px)
      translate3d(var(--camera-x, 0px), var(--camera-y, 0px), var(--camera-z, 0px))
      rotateX(var(--camera-rx, 0deg))
      rotateY(var(--camera-ry, 0deg))
      rotateZ(var(--camera-rz, 0deg))
      scale(var(--camera-scale, 1));
  }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase {
    opacity: calc((1 - var(--deconstruct-progress) * .24) * var(--exit-frame-opacity));
    filter: blur(var(--exit-blur)) brightness(var(--exit-brightness)) saturate(var(--exit-saturation));
    box-shadow:
      0 0 0 1px #ddd6e9,
      0 calc(24px + var(--frame-depth) * 70px) calc(65px + var(--frame-depth) * 60px) #30243b45,
      0 5px 10px #0002;
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-frame-housing {
    display: block;
    position: absolute;
    inset: 0;
    border: 1px solid #82798f;
    border-radius: 32px;
    background: linear-gradient(130deg, #554a62, #26212d 35%, #0e0c12 62%, #695970);
    transform: translateZ(calc(var(--housing-z) * var(--frame-depth)));
    backface-visibility: hidden;
    pointer-events: none;
    opacity: var(--exit-housing-opacity);
    filter: blur(var(--exit-blur));
  }
  .rd-frame-housing-back { --housing-z: -64px; }
  .rd-frame-housing-mid { --housing-z: -44px; }
  .rd-frame-housing-edge { --housing-z: -24px; }
  .rd-frame-housing-lip { --housing-z: -8px; }
  .rd-scroll-story[data-scroll-hold=true] > .rd-frame-rig[data-frame-ready=false] {
    will-change: transform;
  }
  .hero-showcase[data-frame-ready=false] {
    cursor: pointer;
  }
  .hero-showcase[data-frame-ready=false] .rd-app,
  .hero-showcase[data-frame-ready=false] .rd-app * { pointer-events: none !important; }
  /* No transform or transition at rest: native mask coordinates stay exact. */
  .rd-scroll-story[data-scroll-hold=true] > .rd-frame-rig[data-frame-ready=true] {
    transform: none;
    transform-style: flat;
  }
  .rd-frame-rig[data-frame-ready=true] .rd-frame-housing { display: none; }
  .rd-scroll-story[data-exit-complete=true] .hero-showcase,
  .rd-scroll-story[data-exit-complete=true] .rd-frame-housing,
  .rd-scroll-story[data-exit-complete=true] .rd-segment-lift { visibility: hidden; }
  /* The first stop is the real, flat editor. Only further page scrolling
     reveals the source photograph as an exploded set of architectural cutouts. */
  .rd-scroll-story[data-scroll-hold=true] .rd-viewport { transition: none; }
  .rd-scroll-story[data-scroll-hold=true] .rd-scene-image,
  .rd-scroll-story[data-scroll-hold=true] .rd-segment-canvas,
  .rd-scroll-story[data-scroll-hold=true] .rd-flat-overlay {
    opacity: var(--scene-photo-opacity);
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-flat-overlay { opacity: 0; }
  .rd-scroll-story[data-scroll-hold=true] .rd-opening-photo,
  .rd-scroll-story[data-scroll-hold=true] .rd-opening-thumb { opacity: var(--opening-photo-opacity); }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase[data-opening-active=true] .rd-segment-canvas,
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase[data-opening-active=true] .rd-flat-overlay { visibility: hidden; }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase[data-flat-selection=true] .rd-flat-overlay {
    opacity: var(--scene-photo-opacity);
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-left,
  .rd-scroll-story[data-scroll-hold=true] .rd-right,
  .rd-scroll-story[data-scroll-hold=true] .rd-toolbar,
  .rd-scroll-story[data-scroll-hold=true] .rd-version-strip {
    opacity: calc(1 - var(--deconstruct-progress) * .86);
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 54% 62%, #3b342e 0%, #211d25 42%, #0a0a0a 82%);
    opacity: var(--deconstruct-progress);
    pointer-events: none;
  }
  .rd-scroll-story[data-scroll-hold=true] .rd-frame-rig[data-deconstruct-active=true] .rd-segment-lift[data-ready=true][data-positioned=true] {
    display: block;
    position: absolute;
    transform-style: preserve-3d;
  }
  .rd-lift-piece {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: calc(var(--scene-piece-opacity) * var(--exit-opacity));
    filter: blur(var(--exit-blur)) brightness(var(--exit-brightness)) saturate(var(--exit-saturation));
    transform: translate3d(calc(var(--piece-lift) * var(--piece-x) * var(--model-spread)), calc(var(--piece-lift) * var(--piece-y) * var(--model-spread)), calc(var(--piece-lift) * var(--piece-z) * var(--model-spread)))
      rotateX(calc(var(--piece-lift) * var(--piece-rx))) rotateY(calc(var(--piece-lift) * var(--piece-ry))) rotateZ(calc(var(--piece-lift) * var(--piece-rz)));
    --piece-rx: 0deg; --piece-ry: 0deg; --piece-rz: 0deg;
  }
  .rd-lift-piece.is-roof { --piece-lift: var(--lift-roof, 0); --piece-x: 0px; --piece-y: -86px; --piece-z: 560px; --piece-rx: -6deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-balcony { --piece-lift: var(--lift-balcony, 0); --piece-x: 10px; --piece-y: -25px; --piece-z: 365px; --piece-rx: -6deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-glazing { --piece-lift: var(--lift-glazing, 0); --piece-x: 45px; --piece-y: 32px; --piece-z: 320px; --piece-ry: 4deg; }
  .rd-lift-piece.is-garage { --piece-lift: var(--lift-garage, 0); --piece-x: -25px; --piece-y: 108px; --piece-z: 255px; --piece-rx: 4deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-retaining-wall { --piece-lift: var(--lift-retaining-wall, 0); --piece-x: -95px; --piece-y: 75px; --piece-z: 160px; --piece-ry: 14deg; }
  .rd-lift-piece.is-stair-wall { --piece-lift: var(--lift-stair-wall, 0); --piece-x: 85px; --piece-y: 78px; --piece-z: 165px; --piece-ry: -8deg; }
  .rd-lift-piece.is-forecourt { --piece-lift: var(--lift-forecourt, 0); --piece-x: 0px; --piece-y: 55px; --piece-z: 0px; --piece-rx: -2deg; }
  .rd-lift-piece.is-front-louvers { --piece-lift: var(--lift-surface-076, 0); --piece-x: -16px; --piece-y: -74px; --piece-z: 400px; --piece-ry: 4deg; }
  .rd-lift-piece.is-concrete-pier { --piece-lift: var(--lift-surface-089, 0); --piece-x: -10px; --piece-y: 58px; --piece-z: 245px; --piece-ry: 4deg; }
  .rd-lift-piece.is-corner-louvers { --piece-lift: var(--lift-surface-090, 0); --piece-x: -38px; --piece-y: -55px; --piece-z: 360px; --piece-ry: 10deg; }
  .rd-lift-piece.is-wing-roof { --piece-lift: var(--lift-surface-094, 0); --piece-x: 45px; --piece-y: -5px; --piece-z: 345px; --piece-rx: -6deg; --piece-ry: 4deg; }
  .rd-lift-piece.is-entry { --piece-lift: var(--lift-surface-099, 0); --piece-x: 45px; --piece-y: 90px; --piece-z: 230px; --piece-ry: 4deg; }
  /* Rotate each cutout around its recorded foreground centroid. */
  .rd-lift-piece.is-roof { transform-origin: 57.42042% 38.999835%; }
  .rd-lift-piece.is-balcony { transform-origin: 63.999498% 51.570733%; }
  .rd-lift-piece.is-glazing { transform-origin: 62.499369% 60.821568%; }
  .rd-lift-piece.is-garage { transform-origin: 39.885914% 78.986518%; }
  .rd-lift-piece.is-retaining-wall { transform-origin: 6.354189% 83.992331%; }
  .rd-lift-piece.is-stair-wall { transform-origin: 84.869171% 75.310929%; }
  .rd-lift-piece.is-forecourt { transform-origin: 53.794947% 93.560388%; }
  .rd-lift-piece.is-front-louvers { transform-origin: 58.737297% 44.39593%; }
  .rd-lift-piece.is-concrete-pier { transform-origin: 47.64835% 59.478491%; }
  .rd-lift-piece.is-corner-louvers { transform-origin: 46.92824% 45.063835%; }
  .rd-lift-piece.is-wing-roof { transform-origin: 86.728262% 58.811801%; }
  .rd-lift-piece.is-entry { transform-origin: 74.586282% 78.760572%; }
  .rd-lift-piece.is-upper-lintel { --piece-lift: var(--lift-surface-026, 0); --piece-x: 45px; --piece-y: -86px; --piece-z: 455px; --piece-rx: -6deg; --piece-ry: 4deg; transform-origin: 65.656063% 42.34401%; }
  .rd-lift-piece.is-upper-middle-window { --piece-lift: var(--lift-surface-039, 0); --piece-x: 4px; --piece-y: -82px; --piece-z: 410px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 53.327866% 44.139148%; }
  .rd-lift-piece.is-upper-right-window { --piece-lift: var(--lift-surface-052, 0); --piece-x: 45px; --piece-y: -66px; --piece-z: 390px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 65.645057% 46.216195%; }
  .rd-lift-piece.is-garage-left-pier { --piece-lift: var(--lift-surface-065, 0); --piece-x: -65px; --piece-y: 110px; --piece-z: 270px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 14.400019% 78.36867%; }
  .rd-lift-piece.is-garage-right-pier { --piece-lift: var(--lift-surface-048, 0); --piece-x: 5px; --piece-y: 110px; --piece-z: 270px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 67.947906% 78.620294%; }
  .rd-lift-piece.is-stair-recess { --piece-lift: var(--lift-surface-069, 0); --piece-x: 90px; --piece-y: 115px; --piece-z: 210px; --piece-rx: 0deg; --piece-ry: -8deg; transform-origin: 90.38548% 82.248605%; }
  .rd-lift-piece.is-wing-louvers { --piece-lift: var(--lift-surface-070, 0); --piece-x: 60px; --piece-y: 48px; --piece-z: 290px; --piece-rx: 0deg; --piece-ry: 4deg; transform-origin: 83.179917% 64.339459%; }
  .rd-lift-piece.is-boundary-wall { --piece-lift: var(--lift-surface-098, 0); --piece-x: 115px; --piece-y: 95px; --piece-z: 125px; --piece-rx: 0deg; --piece-ry: -8deg; transform-origin: 96.623911% 82.241527%; }
  .rd-lift-piece.is-west-facade { --piece-lift: var(--lift-surface-081, 0); --piece-x: -80px; --piece-y: 45px; --piece-z: 245px; --piece-rx: 0deg; --piece-ry: 10deg; transform-origin: 40.573952% 59.27307%; }
  .rd-lift-piece.is-west-upper-panel { --piece-lift: var(--lift-surface-022, 0); --piece-x: -75px; --piece-y: -22px; --piece-z: 325px; --piece-rx: 0deg; --piece-ry: 10deg; transform-origin: 39.579436% 52.277889%; }
  .rd-lift-piece.is-west-steps { --piece-lift: var(--lift-surface-035, 0); --piece-x: -95px; --piece-y: 88px; --piece-z: 170px; --piece-rx: 0deg; --piece-ry: 10deg; transform-origin: 32.823599% 63.955293%; }
  .rd-lift-piece.is-parapet-end { --piece-lift: var(--lift-surface-023, 0); --piece-x: 115px; --piece-y: 70px; --piece-z: 180px; --piece-rx: -6deg; --piece-ry: -8deg; transform-origin: 98.440057% 72.906805%; }
  .rd-cutout-skin {
    position: absolute; inset: 0;
    filter: drop-shadow(0 1px 0 #fff0dcaa) drop-shadow(0 16px 12px #14101c66);
    pointer-events: none;
  }
  .rd-lift-photo {
    position: absolute;
    inset: 0;
    background: url('../images/hero-depth/demo-house.webp') center / 100% 100% no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-mode: luminance;
    pointer-events: none;
  }
  /* The light crosses only the actual surface silhouettes, never a rectangle
     behind them. Its pulse is zero at both ends and on returning to selection. */
  .rd-lift-photo::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(110deg,
        transparent calc(var(--exit-sheen-position) - 24%),
        rgb(224 235 255 / calc(var(--exit-glass) * .55)) calc(var(--exit-sheen-position) - 7%),
        rgb(255 255 255 / calc(var(--exit-glass) * .9)) var(--exit-sheen-position),
        rgb(238 226 255 / calc(var(--exit-glass) * .4)) calc(var(--exit-sheen-position) + 9%),
        transparent calc(var(--exit-sheen-position) + 26%)),
      linear-gradient(128deg, #fff2da22, transparent 38%, #57436514);
  }
  /* Explicitly opted-in material study. These procedural finishes are visual
     mockups; replace them with verified same-view Rendero outputs for launch.
     Effects stay inside each masked leaf, preserving the shared 3D scene. */
  [data-material-study=true] :is(.is-roof, .is-balcony, .is-wing-roof, .is-concrete-pier) .rd-lift-photo::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(4deg, transparent 0 4px, #69563a24 4.5px, transparent 5px 11px),
      linear-gradient(#d7cdb9, #d7cdb9),
      url('../images/hero-depth/demo-house.webp');
    background-size: 100% 100%;
    background-blend-mode: soft-light, color, normal;
    filter: brightness(1.52) contrast(.8);
    opacity: var(--material-stone, 0);
  }
  [data-material-study=true] :is(.is-front-louvers, .is-corner-louvers, .is-wing-louvers, .is-garage) .rd-lift-photo::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(90deg, #160f0966 0 1px, transparent 1px 5px, #e7cfa629 6px, transparent 7px 12px),
      linear-gradient(#655447cc, #655447cc),
      url('../images/hero-depth/demo-house.webp');
    background-size: 100% 100%;
    background-blend-mode: soft-light, multiply, normal;
    filter: saturate(.45) brightness(.95);
    opacity: var(--material-timber, 0);
  }
  [data-material-study=true] .is-garage .rd-lift-photo::before {
    opacity: var(--material-garage, 0);
  }
  /* Drawing annotations are explicitly illustrative. Dimensions stay on the
     original piece; the connecting gaps are never labelled as physical sizes. */
  .rd-model-datum {
    position: absolute; left: -9%; top: 77%; width: 118%; height: 45%;
    border: 1px solid #c8c0b466;
    background: linear-gradient(#ded3bd30 1px, transparent 1px), linear-gradient(90deg, #ded3bd30 1px, transparent 1px);
    background-size: 12.5% 25%;
    transform-origin: 50% 0;
    transform: translate3d(0, calc(var(--deconstruct-progress) * 55px * var(--model-spread)), -34px) rotateX(52deg);
    opacity: calc(var(--deconstruct-progress) * .5 * var(--exit-detail-opacity));
    filter: blur(var(--exit-blur));
    pointer-events: none;
  }
  .rd-assembly-link {
    display: none; position: absolute; width: 1px;
    transform-origin: 50% 0;
    background: #c9bdd7;
    opacity: calc(var(--annotation-progress, 0) * .62 * var(--exit-detail-opacity));
    filter: blur(var(--exit-blur));
    pointer-events: none;
  }
  .rd-assembly-link[data-connection-ready=true] { display: block; }
  .rd-assembly-link::before,
  .rd-assembly-link::after {
    content: ""; position: absolute; left: -1px; width: 3px; height: 3px;
    border-radius: 50%; background: #eee3ce;
  }
  .rd-assembly-link::before { top: -1px; }
  .rd-assembly-link::after { bottom: -1px; }
  .rd-piece-dimensions {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    overflow: visible; opacity: var(--annotation-progress, 0); pointer-events: none;
  }
  .rd-piece-dimensions path { fill: none; vector-effect: non-scaling-stroke; }
  .rd-dimension-extension { stroke: #e0d4baaa; stroke-width: .6; }
  .rd-dimension-line { stroke: #eee2c8; stroke-width: .8; }
  .rd-dimension-tick { stroke: #f4e6c8; stroke-width: 1; }
  .rd-dimension-label text {
    fill: #f4ead8; font: 300 16px "Segoe UI", Arial, sans-serif;
    font-variant-numeric: tabular-nums; letter-spacing: .5px;
    stroke: none;
    /* Local Y stays below the dimension line even when its label is rotated. */
    transform: translateY(calc(.5em + 8px));
  }
  .is-roof .rd-dimension-label text { fill: #645b6d; }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::before,
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::after {
    content: "";
    position: absolute;
    z-index: 5;
    pointer-events: none;
  }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::before {
    inset: 0;
    border-radius: 20px;
    box-shadow: inset 1px 1px 0 #e5d4ff80, inset -1px -1px 0 #b29ac03b;
    background: radial-gradient(ellipse at 50% 0%, #d4b4ff18, transparent 65%);
    opacity: var(--frame-depth);
  }
  .rd-scroll-story[data-scroll-hold=true] .hero-showcase::after {
    inset: -45%;
    background: linear-gradient(180deg, transparent 35%, #f9efff18 48%, #ffffff06 54%, transparent 65%);
    transform: translateY(calc(40% - var(--frame-progress) * 100%));
    opacity: calc(var(--frame-depth) * .65);
  }
}

@media (min-width: 3000px) and (min-height: 1400px) {
  /* The taller workspace places the roof annotation over the dark tablet. */
  .is-roof .rd-dimension-label text { fill: #f4ead8; }
}

@media (min-width: 1000px) and (max-width: 1300px) {
  .rd-scroll-story { --model-spread: .76; }
  .rd-piece-dimensions [data-dimension-priority="2"] { display: none; }
  .rd-dimension-label text { font-size: 20px; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .rd-scroll-story { --model-spread: .72; }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  .rd-scroll-story { --model-spread: .64; }
}

@media (max-width: 1099px) and (min-width: 768px) {
  .rd-app { grid-template-columns: 155px minmax(0, 1fr) 200px; }
  .rd-settings { gap: 11px; padding: 12px 10px; }
  .rd-reference,
  .rd-advanced { display: none; }
  .rd-empty { gap: 5px; font-size: 9px; }
  .rd-empty svg { width: 14px; height: 14px; }
  .rd-setting-grid { gap: 8px; }
  .rd-segmap { padding: 12px 10px; }
  .rd-segment-heading { gap: 6px; }
  .rd-segment-detail { padding-left: 20px; }
}

@media (max-width: 767px) {
  .hp_hero_visual.hero-showcase { border-width: 6px; border-radius: 20px; }
  .hero-showcase button { min-height: 44px; }
  .rd-app { display: flex; flex-direction: column; height: auto; }
  .rd-editor { order: 0; }
  .rd-right { order: 1; }
  .rd-left { order: 2; padding: 11px; border-right: 0; border-top: 1px solid #ffffff12; }
  .rd-left > :not(.rd-settings),
  .rd-left .rd-settings > :not(.rd-setting-grid):not(.rd-field:has([data-demo-setting])) { display: none; }
  .rd-left .rd-settings { flex: none; gap: 12px; padding: 0; overflow: visible; }
  .rd-left .rd-label { font-size: 11px; }
  .rd-left .rd-setting-grid { gap: 12px; }
  .rd-left .rd-setting-grid .rd-label { margin-bottom: 0; }
  .hero-showcase .rd-left select.rd-select { min-height: 44px; font-size: 16px; }
  .hero-showcase button.rd-select-trigger { min-height: 44px; height: 44px; font-size: 12px; }
  .rd-select-option,
  .rd-preset-list .rd-select-option { min-height: 44px; font-size: 14px; line-height: 20px; }
  .rd-select-menu--preset { display: block; height: auto; overflow: hidden; }
  .rd-preset-list { width: 100%; max-width: none; overflow-y: auto; }
  .rd-preset-preview { display: none; }
  .rd-editor { height: calc(max(260px, 75vw) + 104px); }
  .rd-stage { inset: 66px 0 38px; }
  .rd-toolbar { top: 7px; gap: 3px; padding: 3px; border-radius: 8px; }
  .rd-tool,
  .rd-fit { height: 44px; }
  .rd-tool { width: 44px; }
  .rd-fit { min-width: 44px; font-size: 10px !important; }
  .rd-scene-hint { bottom: 13px; left: 52px; right: 9px; color: #a1a1a1; font-size: 9px; line-height: 1.4; }
  .rd-version-strip { bottom: 7px; left: 11px; padding: 3px; transform: none; border-radius: 6px; }
  .rd-version-strip img { width: 28px; height: 19px; border-radius: 3px; }
  .rd-right { padding: 0; border-top: 1px solid #ffffff12; border-left: 0; }
  .rd-panel-title,
  .rd-segmap,
  .rd-selection-note { display: none; }
  .rd-right-body { flex: none; padding: 16px; overflow: visible; }
  .rd-material-preview { position: relative; inset: auto; flex: none; padding: 20px 16px; border-top: 1px solid #ffffff0d; }
  .rd-material-preview::before { display: none; }
  .rd-material-sphere { width: 128px; height: 128px; }
  .rd-material-sphere::before { top: 12px; left: 24px; width: 48px; height: 24px; }
  .rd-right:has(.rd-material-preview:not([hidden])) .rd-right-body { padding-bottom: 16px; }
  .hero-showcase .rd-material-search-row input { height: 44px; font-size: 16px; }
  .hero-showcase .rd-material-prompt { height: 44px; font-size: 16px; }
  .hero-showcase .rd-material-search-row button { min-height: 44px; min-width: 44px; }
  .hero-showcase .rd-material-back,
  .hero-showcase .rd-material-category-nav button,
  .hero-showcase .rd-material-browse,
  .hero-showcase .rd-material-apply,
  .hero-showcase .rd-selected-surface .rd-material-assignment { min-height: 44px; }
  .hero-showcase .rd-selected-surface [data-material-reset],
  .hero-showcase .rd-selected-surface .rd-material-browse,
  .hero-showcase .rd-material-preview-close { width: 44px; min-height: 44px; height: 44px; }
  .rd-right > .rd-render { display: flex; flex-basis: 44px; min-height: 44px; }
  .rd-segments-label { padding: 0 2px 8px; font-size: 10px; }
  .rd-segment-actions { gap: 3px; }
  .rd-segment-actions button { min-width: 44px; height: 44px; }
  .rd-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: initial; align-content: start; gap: 7px; max-height: 245px; padding: 0 3px 0 0; overflow: auto; }
  .rd-segment-search { margin: 0 0 10px; }
  .hero-showcase .rd-segment-search input { height: 44px; font-size: 12px; }
  .rd-search-empty { grid-column: 1 / -1; }
  .rd-segment { gap: 2px; min-height: 44px; padding: 7px 8px; font-size: 11px !important; }
  .rd-segment-heading { gap: 6px; font-size: 11px; line-height: 14px; }
  .rd-segment-grip { display: none; }
  .rd-segment-swatch { width: 12px; height: 12px; border-radius: 3px; }
  .rd-segment-detail { padding-left: 18px; font-size: 9px; line-height: 12px; }
  .rd-surface-controls { padding: 0 0 10px; }
  .hero-showcase .rd-surface-controls select { min-height: 44px; font-size: 12px; }
  .rd-material-scroll { padding: 0; overflow: visible; }
  .rd-material-scroll .rd-segments { display: block; max-height: none; }
  .hero-showcase .rd-selected-surface .rd-segment { min-height: 44px; padding: 0; }
  .rd-surface-preview { height: 32px; }
  .rd-surface-empty { min-height: 78px; padding: 10px; }
  .rd-material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rd-material-grid .rd-material { font-size: 10px; }
  .rd-material img { aspect-ratio: 1; }
  .rd-material-assignment { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-showcase:not([data-motion-preference=full]) * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .rd-select-menu,
  .rd-select-menu * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}