/*
 * Lohnhelfer / Windows 11
 *
 * The app geometry and data reconstruct the authoritative 1280 × 720
 * Lohnhelfer prototype. Motion is driven only by --snap/--scene-progress,
 * making the Windows Snap Assembly deterministic and reversible on scroll.
 */

.windows-product-scene {
  --lh-snap: var(--snap, var(--scene-progress, 1));
  --lh-font-ui: "Figtree", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --lh-font-display: "Montserrat", "Figtree", "Segoe UI Variable Display", system-ui, sans-serif;
  --window-chrome: #eee9df;
  --window-chrome-raised: #faf7f1;
  --window-chrome-ink: #1c2632;
  --window-chrome-muted: #65707c;
  --window-chrome-line: rgb(6 21 34 / 16%);
  --window-shadow: rgb(31 24 42 / 28%);
  --window-contact: rgb(31 24 42 / 42%);
  --window-halo-royal: rgb(47 107 255 / 25%);
  --window-halo-beige: rgb(217 200 170 / 38%);
  position: relative;
  display: grid;
  min-height: clamp(35rem, 56vw, 47rem);
  margin: 0;
  padding: clamp(3.4rem, 5.5vw, 5rem) clamp(0.25rem, 1vw, 1rem) clamp(3.1rem, 5vw, 4.6rem);
  overflow: visible;
  border: 0;
  background: transparent;
  isolation: isolate;
  container: lohnhelfer-scene / inline-size;
}

.showcase-surface.windows-product-scene {
  overflow: visible;
  border: 0;
  background: transparent;
}

.windows-product-scene__inert,
.windows-product-scene__desktop {
  display: grid;
  min-width: 0;
  min-height: 100%;
  place-items: center;
}

.windows-product-scene__desktop {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
}

.windows-product-scene__desktop::before,
.windows-product-scene__desktop::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.windows-product-scene__desktop::before {
  inset: 5% -2% 0;
  background:
    radial-gradient(ellipse at 34% 46%, var(--window-halo-royal), transparent 48%),
    radial-gradient(ellipse at 72% 56%, var(--window-halo-beige), transparent 48%);
  filter: blur(2.3rem);
  opacity: 0.76;
  transform: translateZ(-2rem) scale(0.96);
}

.windows-product-scene__desktop::after {
  right: 9%;
  bottom: 3.2%;
  left: 9%;
  height: clamp(1.3rem, 3vw, 2.8rem);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--window-contact), var(--window-shadow) 44%, transparent 74%);
  filter: blur(0.9rem);
  opacity: 0.82;
  transform: translate3d(0, 1.2rem, -1rem) scaleX(0.84);
}

.windows-browser {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 2.15rem 2.65rem auto;
  width: min(100%, 68rem);
  overflow: hidden;
  border: 1px solid var(--window-chrome-line);
  border-radius: 1.05rem;
  background: var(--window-chrome);
  color: var(--window-chrome-ink);
  box-shadow:
    0 0.125rem 0.3rem rgb(31 24 42 / 14%),
    0 1.2rem 2.3rem -1.3rem rgb(31 24 42 / 28%),
    0 3.5rem 6rem -3rem var(--window-shadow),
    0 7rem 11rem -5.5rem rgb(31 24 42 / 32%);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 0.7rem;
  line-height: 1.3;
  transform: translateZ(0);
  transition:
    background-color var(--duration-reveal) var(--ease-morph),
    border-color var(--duration-reveal) var(--ease-morph),
    box-shadow var(--duration-reveal) var(--ease-morph);
}

.windows-browser__titlebar,
.windows-browser__toolbar {
  display: flex;
  align-items: center;
  min-width: 0;
}

.windows-browser__titlebar {
  justify-content: space-between;
  padding-left: 0.45rem;
  border-bottom: 1px solid var(--window-chrome-line);
  background: color-mix(in srgb, var(--window-chrome) 88%, var(--window-chrome-raised));
}

.windows-browser__tab {
  display: inline-flex;
  align-self: end;
  align-items: center;
  width: min(12rem, 42%);
  height: 1.8rem;
  min-width: 0;
  padding: 0 0.7rem;
  border-radius: 0.5rem 0.5rem 0 0;
  gap: 0.45rem;
  background: var(--window-chrome-raised);
  overflow: hidden;
  white-space: nowrap;
}

.windows-browser__tab i {
  display: grid;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.28rem;
  background: #d9c8aa;
  color: #061522;
  font-size: 0.45rem;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

.windows-browser__tab strong {
  overflow: hidden;
  font-size: 0.65rem;
  font-weight: 650;
  text-overflow: ellipsis;
}

.windows-browser__caption-controls {
  display: grid;
  align-self: stretch;
  grid-template-columns: repeat(3, 2.6rem);
}

.windows-browser__caption-controls i {
  display: grid;
  font-size: 0.75rem;
  font-style: normal;
  place-items: center;
}

.windows-browser__caption-controls i:last-child {
  font-size: 1rem;
}

.windows-browser__toolbar {
  padding: 0.35rem 0.65rem;
  border-bottom: 1px solid var(--window-chrome-line);
  gap: 0.62rem;
  background: var(--window-chrome-raised);
}

.windows-browser__navigation {
  flex: 0 0 auto;
  color: var(--window-chrome-muted);
  font-size: 1rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.windows-browser__address {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 1.9rem;
  padding: 0 0.7rem;
  border-radius: 0.55rem;
  gap: 0.45rem;
  background: var(--window-chrome);
  color: var(--window-chrome-muted);
  box-shadow: inset 0 0 0 1px var(--window-chrome-line);
}

.windows-browser__address i {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #36ad72;
  box-shadow: 0 0 0 0.18rem rgb(54 173 114 / 13%);
}

.windows-browser__address strong {
  color: var(--window-chrome-ink);
  font-size: 0.61rem;
}

.windows-browser__address span {
  overflow: hidden;
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.windows-browser__viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #081b2c;
  container-type: inline-size;
}

/* Authoritative Lohnhelfer prototype palette and 248 / 1032 geometry. */
.lohnhelfer-app {
  --lh-navy-950: #061522;
  --lh-navy-900: #081b2c;
  --lh-navy-850: #0b2238;
  --lh-navy-800: #0f2b45;
  --lh-royal: #2f6bff;
  --lh-royal-soft: #7da3ff;
  --lh-beige: #d9c8aa;
  --lh-beige-light: #f2eadc;
  --lh-ink: #f7f1e8;
  --lh-muted: #aeb9c5;
  --lh-line: rgb(217 200 170 / 18%);
  --lh-field: rgb(255 255 255 / 7%);
  --lh-success: #9bd7b2;
  position: relative;
  display: grid;
  grid-template-columns: 19.375% minmax(0, 80.625%);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--lh-navy-900);
  color: var(--lh-ink);
  font-family: var(--lh-font-ui);
  font-size: clamp(0.4rem, 1.171875cqi, 0.9375rem);
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1.35;
}

.lh-sidebar {
  --lh-snap-start: 0.02;
  --lh-snap-rate: 3.65;
  --lh-from-x: -9em;
  --lh-from-y: 0em;
  --lh-from-rotate: -3deg;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 1.6em;
  border-right: 1px solid var(--lh-line);
  background: var(--lh-navy-950);
}

.lh-app-mark {
  display: flex;
  align-items: center;
  margin-bottom: 2.6667em;
  gap: 0.8em;
}

.lh-app-mark span {
  display: grid;
  width: 2.6667em;
  height: 2.6667em;
  flex: 0 0 auto;
  border-radius: 0.5333em;
  background: var(--lh-beige);
  color: var(--lh-navy-950);
  font-family: var(--lh-font-display);
  font-size: 0.9333em;
  font-weight: 700;
  place-items: center;
}

.lh-app-mark strong {
  overflow: hidden;
  font-family: var(--lh-font-display);
  font-size: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lh-main-nav {
  display: grid;
  gap: 0.4em;
}

.lh-main-nav span {
  display: flex;
  align-items: center;
  min-height: 2.8em;
  padding: 0 0.9333em;
  border-radius: 0.5333em;
  color: var(--lh-muted);
}

.lh-main-nav .is-active {
  background: rgb(47 107 255 / 18%);
  color: #fff;
}

.lh-sidebar-footer {
  margin-top: auto;
  padding-top: 1.6em;
  border-top: 1px solid var(--lh-line);
}

.lh-sidebar-footer span,
.lh-sidebar-footer strong {
  display: block;
}

.lh-sidebar-footer span {
  margin-bottom: 0.5em;
  color: var(--lh-muted);
  font-size: 0.8em;
}

.lh-sidebar-footer strong {
  color: var(--lh-beige-light);
  font-size: 0.9333em;
  line-height: 1.35;
}

.lh-workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 1.8667em;
  overflow: hidden;
  background: var(--lh-navy-900);
}

.lh-topbar {
  --lh-snap-start: 0.1;
  --lh-snap-rate: 3.8;
  --lh-from-x: 0em;
  --lh-from-y: -7em;
  --lh-from-rotate: 0deg;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  margin-bottom: 1.6em;
  gap: 1.6em;
}

.lh-topbar p {
  margin: 0 0 0.5333em;
  color: var(--lh-beige);
  font-size: 0.7333em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lh-topbar h4 {
  margin: 0;
  font-family: var(--lh-font-display);
  font-size: 1.8667em;
  letter-spacing: 0;
  line-height: 1.15;
}

.lh-topbar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.8em;
}

.lh-topbar-actions span,
.lh-topbar-actions strong,
.lh-outline-action {
  display: inline-grid;
  align-items: center;
  min-height: 2.6667em;
  padding: 0 1.0667em;
  border: 1px solid var(--lh-line);
  border-radius: 999px;
  color: var(--lh-ink);
  font-weight: 700;
  white-space: nowrap;
}

.lh-topbar-actions strong {
  min-height: 3.3333em;
  padding: 0 1.3333em;
  border: 0;
  background: var(--lh-royal);
  color: #fff;
}

.lh-content-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.0667em;
}

.lh-panel {
  min-width: 0;
  padding: 1.3333em;
  border: 1px solid var(--lh-line);
  border-radius: 0.5333em;
  background: var(--lh-navy-850);
}

.lh-summary-panel,
.lh-table-panel,
.lh-form-panel {
  grid-column: span 8;
}

.lh-compact-panel,
.lh-stats-panel {
  grid-column: span 4;
}

.lh-summary-panel {
  --lh-snap-start: 0.21;
  --lh-snap-rate: 3.75;
  --lh-from-x: 0em;
  --lh-from-y: -5.5em;
  --lh-from-rotate: -1.25deg;
}

.lh-table-panel {
  --lh-snap-start: 0.32;
  --lh-snap-rate: 3.45;
  --lh-from-x: -8em;
  --lh-from-y: 0em;
  --lh-from-rotate: -1.75deg;
}

.lh-archive-panel {
  --lh-snap-start: 0.4;
  --lh-snap-rate: 3.55;
  --lh-from-x: 8em;
  --lh-from-y: 0em;
  --lh-from-rotate: 1.75deg;
}

.lh-stats-panel {
  --lh-snap-start: 0.51;
  --lh-snap-rate: 3.7;
  --lh-from-x: -3.5em;
  --lh-from-y: 6em;
  --lh-from-rotate: -1.25deg;
}

.lh-form-panel {
  --lh-snap-start: 0.56;
  --lh-snap-rate: 3.8;
  --lh-from-x: 2.5em;
  --lh-from-y: 7em;
  --lh-from-rotate: 1.1deg;
}

.lh-settings-panel {
  --lh-snap-start: 0.62;
  --lh-snap-rate: 3.9;
  --lh-from-x: 7em;
  --lh-from-y: 8em;
  --lh-from-rotate: 1.5deg;
}

.lh-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2em;
  gap: 1.0667em;
}

.lh-panel-head h5 {
  margin: 0;
  font-family: var(--lh-font-display);
  font-size: 1.2em;
}

.lh-panel-head > span:not(.lh-status):not(.lh-outline-action) {
  color: var(--lh-muted);
}

.lh-status,
.lh-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2em;
  padding: 0 0.8333em;
  border-radius: 999px;
  background: var(--lh-beige);
  color: var(--lh-navy-950);
  font-size: 0.8em;
  font-style: normal;
  font-weight: 700;
}

.lh-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8em;
}

.lh-metric-row div,
.lh-stat-list div {
  min-width: 0;
  padding: 1.0667em;
  border-radius: 0.5333em;
  background: rgb(255 255 255 / 5%);
}

.lh-metric-row span,
.lh-stat-list span {
  display: block;
  margin-bottom: 0.6154em;
  color: var(--lh-muted);
  font-size: 0.8667em;
}

.lh-metric-row strong,
.lh-stat-list strong {
  display: block;
  overflow: hidden;
  font-size: 1.3333em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lh-table {
  width: 100%;
}

.lh-table-row {
  display: grid;
  grid-template-columns: 1.3fr 1.35fr 0.7fr 0.85fr 1fr;
  min-height: 2.9333em;
  align-items: center;
  border-bottom: 1px solid rgb(217 200 170 / 12%);
}

.lh-table-row > span {
  min-width: 0;
  padding: 0 0.6667em;
  overflow: hidden;
  color: var(--lh-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lh-table-row--head {
  color: var(--lh-muted);
  font-size: 0.8em;
  font-weight: 700;
}

.lh-table-row--head > span {
  color: var(--lh-muted);
}

.lh-badge--ok {
  background: var(--lh-success);
  color: #062314;
}

.lh-archive-list,
.lh-stat-list {
  display: grid;
  gap: 0.6667em;
}

.lh-archive-list > span {
  display: flex;
  justify-content: space-between;
  min-width: 0;
  padding: 0.8em;
  border-radius: 0.5333em;
  gap: 0.8em;
  background: rgb(255 255 255 / 5%);
}

.lh-archive-list i {
  overflow: hidden;
  color: var(--lh-muted);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lh-archive-list strong {
  white-space: nowrap;
}

.lh-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9333em;
}

.lh-settings-grid > span {
  display: grid;
  gap: 0.5333em;
}

.lh-settings-grid b {
  color: var(--lh-beige-light);
  font-size: 0.8667em;
}

.lh-settings-grid i {
  display: flex;
  align-items: center;
  min-height: 3.2em;
  padding: 0 1.0667em;
  border: 1px solid rgb(217 200 170 / 24%);
  border-radius: 0.5333em;
  background: var(--lh-field);
  color: var(--lh-ink);
  font-style: normal;
}

/*
 * Windows Snap Assembly: a temporary 12-column guide appears while source
 * regions travel from independent window edges into their final grid cells.
 */
.lh-snap-grid {
  position: absolute;
  z-index: 5;
  top: 6.55em;
  right: 1.8667em;
  bottom: 1.8667em;
  left: calc(19.375% + 1.8667em);
  border: 1px solid rgb(125 163 255 / 58%);
  background:
    repeating-linear-gradient(
      to right,
      rgb(125 163 255 / 30%) 0 1px,
      transparent 1px calc(100% / 12)
    ),
    linear-gradient(rgb(47 107 255 / 8%), rgb(47 107 255 / 2%));
  box-shadow:
    0 0 0 1px rgb(47 107 255 / 10%),
    0 0 2.5em rgb(47 107 255 / 16%);
  opacity: clamp(0, min(calc(var(--lh-snap) * 5), calc((1 - var(--lh-snap)) * 4)), 1);
  pointer-events: none;
  transform: scaleX(calc(0.88 + (var(--lh-snap) * 0.12)));
  transform-origin: left center;
}

.lh-snap-piece {
  --lh-arrive: clamp(0, calc((var(--lh-snap) - var(--lh-snap-start)) * var(--lh-snap-rate)), 1);
  opacity: calc(0.34 + (var(--lh-arrive) * 0.66));
  transform: translate3d(
      calc((1 - var(--lh-arrive)) * var(--lh-from-x)),
      calc((1 - var(--lh-arrive)) * var(--lh-from-y)),
      0
    )
    rotate(calc((1 - var(--lh-arrive)) * var(--lh-from-rotate)))
    scale(calc(0.88 + (var(--lh-arrive) * 0.12)));
  transform-origin: center;
  will-change: transform, opacity;
}

.windows-product-scene__cursor {
  position: absolute;
  z-index: 6;
  top: 64%;
  left: 70%;
  color: #fff;
  font-family: "Segoe UI Symbol", system-ui, sans-serif;
  font-size: 1.65rem;
  line-height: 1;
  text-shadow:
    0 0 0.08rem #061522,
    0 0.2rem 0.5rem rgb(6 21 34 / 68%);
  transform: rotate(-5deg);
}

.windows-product-scene > .product-scene__caption {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.52rem + 0.12vw, 0.68rem);
  font-weight: 560;
  letter-spacing: 0.055em;
  line-height: 1.35;
  pointer-events: none;
  text-transform: uppercase;
}

.windows-product-scene > .product-scene__caption span,
.windows-product-scene > .product-scene__caption strong {
  position: absolute;
  max-width: min(21rem, 66%);
  text-wrap: balance;
}

.windows-product-scene > .product-scene__caption span {
  top: 0.75rem;
  left: clamp(0rem, 1vw, 1rem);
  color: var(--color-muted);
}

.windows-product-scene > .product-scene__caption strong {
  right: clamp(0rem, 1vw, 1rem);
  bottom: 0.6rem;
  text-align: right;
}

:root[data-theme="dark"] .windows-product-scene {
  --window-chrome: #181520;
  --window-chrome-raised: #211d2a;
  --window-chrome-ink: #f5eff6;
  --window-chrome-muted: #b9afbd;
  --window-chrome-line: rgb(243 237 245 / 14%);
  --window-shadow: rgb(4 2 8 / 54%);
  --window-contact: rgb(4 2 8 / 72%);
  --window-halo-royal: rgb(47 107 255 / 30%);
  --window-halo-beige: rgb(217 200 170 / 18%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .windows-product-scene {
    --window-chrome: #181520;
    --window-chrome-raised: #211d2a;
    --window-chrome-ink: #f5eff6;
    --window-chrome-muted: #b9afbd;
    --window-chrome-line: rgb(243 237 245 / 14%);
    --window-shadow: rgb(4 2 8 / 54%);
    --window-contact: rgb(4 2 8 / 72%);
    --window-halo-royal: rgb(47 107 255 / 30%);
    --window-halo-beige: rgb(217 200 170 / 18%);
  }
}

@media (min-width: 48.0625rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  .has-showcase-motion .showcase-panel[data-motion-mode="windows"] .windows-product-scene {
    opacity: 1;
    transform: none;
  }

  .has-showcase-motion .showcase-panel[data-motion-mode="windows"] .windows-product-scene__desktop {
    opacity: calc(0.76 + (var(--scene-progress) * 0.24));
    transform: perspective(94rem)
      translate3d(0, calc(var(--scene-inverse) * 2.8rem), 0)
      rotateX(calc(var(--scene-inverse) * 3.2deg))
      rotateY(calc(var(--scene-inverse) * -4deg))
      scale(calc(0.95 + (var(--scene-progress) * 0.05)));
    transform-origin: 50% 78%;
    will-change: transform, opacity;
  }

  .has-showcase-motion .showcase-panel[data-motion-mode="windows"] .windows-product-scene__desktop::before {
    opacity: calc(0.34 + (var(--scene-progress) * 0.42));
    transform: translate3d(calc(var(--scene-inverse) * 2.2rem), 0, -2rem)
      scale(calc(0.9 + (var(--scene-progress) * 0.06)));
    will-change: transform, opacity;
  }

  .has-showcase-motion .showcase-panel[data-motion-mode="windows"] .windows-product-scene__desktop::after {
    opacity: calc(0.38 + (var(--scene-progress) * 0.44));
    transform: translate3d(0, calc(1.2rem + (var(--scene-inverse) * 0.8rem)), -1rem)
      scaleX(calc(0.7 + (var(--scene-progress) * 0.14)));
    will-change: transform, opacity;
  }

  .has-showcase-motion .showcase-panel[data-motion-mode="windows"] .windows-product-scene__cursor {
    opacity: calc(0.12 + (var(--scene-progress) * 0.88));
    transform: translate3d(
        calc(var(--scene-inverse) * -7rem),
        calc(var(--scene-inverse) * 4rem),
        2rem
      )
      rotate(calc(-5deg + (var(--scene-inverse) * -9deg)));
    will-change: transform, opacity;
  }

  .has-showcase-motion .showcase-panel[data-motion-mode="windows"] .product-scene__caption span {
    opacity: calc(0.4 + (var(--scene-progress) * 0.6));
    transform: translate3d(calc(var(--scene-inverse) * -3.5rem), calc(var(--scene-inverse) * 1.5rem), 0);
  }

  .has-showcase-motion .showcase-panel[data-motion-mode="windows"] .product-scene__caption strong {
    opacity: calc(0.4 + (var(--scene-progress) * 0.6));
    transform: translate3d(calc(var(--scene-inverse) * 4rem), calc(var(--scene-inverse) * -1.3rem), 0);
  }
}

@container lohnhelfer-scene (max-width: 52rem) {
  .windows-browser {
    width: 100%;
  }

  .lh-sidebar-footer {
    display: none;
  }
}

@container lohnhelfer-scene (max-width: 36rem) {
  .windows-product-scene__desktop {
    align-items: center;
  }

  .windows-browser {
    grid-template-rows: 1.9rem 2.3rem auto;
    border-radius: 0.78rem;
  }

  .windows-browser__caption-controls {
    grid-template-columns: repeat(3, 1.9rem);
  }

  .windows-browser__navigation {
    display: none;
  }

  .windows-browser__address {
    width: 100%;
  }

  .windows-product-scene__cursor {
    display: none;
  }

  .windows-product-scene > .product-scene__caption span,
  .windows-product-scene > .product-scene__caption strong {
    max-width: 82%;
  }
}

@media (max-width: 48rem) {
  .windows-product-scene {
    min-height: 29rem;
    padding: 3rem 0 3.4rem;
  }

  .windows-product-scene__desktop::before {
    inset-inline: -6%;
  }

  .windows-product-scene > .product-scene__caption span {
    top: 0.25rem;
    left: 0;
  }

  .windows-product-scene > .product-scene__caption strong {
    right: 0;
    bottom: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .windows-product-scene,
  .windows-product-scene *,
  .windows-product-scene *::before,
  .windows-product-scene *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .windows-product-scene,
  .windows-product-scene__desktop,
  .windows-product-scene__desktop::before,
  .windows-product-scene__desktop::after,
  .windows-browser,
  .lh-snap-piece,
  .windows-product-scene > .product-scene__caption span,
  .windows-product-scene > .product-scene__caption strong {
    opacity: 1 !important;
    transform: none !important;
  }

  .lh-snap-grid,
  .windows-product-scene__cursor {
    display: none !important;
  }
}