:root {
  color-scheme: light;
  --paper: #f3f4f0;
  --ink: #171a1b;
  --muted: #6d7471;
  --line: rgba(23, 26, 27, .18);
  --cyan: #1797aa;
  --violet: #7d628a;
  --pointer: rgba(23, 151, 170, .22);
  --shell-gap: clamp(10px, 1.5vw, 24px);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121516;
  --ink: #f3f6f4;
  --muted: #98a29e;
  --line: rgba(243, 246, 244, .2);
  --cyan: #13c9b2;
  --violet: #c5a2e0;
  --pointer: rgba(19, 201, 178, .28);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; overflow: hidden; }
body { display: grid; min-height: 100svh; place-items: center; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.wallpaper {
  position: relative;
  width: calc(100% - var(--shell-gap) * 2);
  min-height: calc(100svh - var(--shell-gap) * 2);
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  border: 1px solid rgba(23, 26, 27, .08);
  border-radius: clamp(18px, 1.5vw, 26px);
}

.pointer-field { position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.corner-mark,
.corner-note,
.side-code,
.interaction-hint {
  position: absolute;
  z-index: 9;
  margin: 0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
}

.corner-mark { top: clamp(24px, 3vw, 46px); left: clamp(24px, 4vw, 64px); display: flex; align-items: center; }
.mark-dot { display: none; }
.brand-name {
  display: block;
  width: clamp(195px, 15vw, 220px);
  height: auto;
}
.theme-switcher {
  position: absolute;
  z-index: 9;
  top: clamp(22px, 2.65vw, 42px);
  right: clamp(24px, 4vw, 64px);
  display: flex;
  gap: 8px;
}
.theme-control,
.theme-mode-control {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  background: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 50%;
  transition: background .24s ease, border-color .24s ease, transform .24s ease;
}
.theme-control:hover:not(:disabled),
.theme-mode-control:hover { background: color-mix(in srgb, var(--paper) 76%, var(--ink) 24%); border-color: color-mix(in srgb, var(--ink) 35%, transparent); transform: translateY(-1px); }
.theme-control:focus-visible,
.theme-mode-control:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.theme-control:disabled { cursor: not-allowed; opacity: .36; }
.theme-control__icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.theme-control__sun { opacity: 0; transform-origin: center; transition: opacity .2s ease, transform .2s ease; }
.theme-control__moon { opacity: 1; transform-origin: center; transition: opacity .2s ease, transform .2s ease; }
.theme-mode-control__icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.theme-mode-control__auto,
.theme-mode-control__manual { transform-origin: center; transition: opacity .2s ease, transform .2s ease; }
.theme-mode-control__manual { opacity: 0; transform: scale(.72); }
:root[data-theme-mode="auto"] .theme-mode-control { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
:root[data-theme-mode="auto"] .theme-mode-control { background: color-mix(in srgb, var(--paper) 74%, var(--cyan) 26%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 16%, transparent); }
:root[data-theme-mode="manual"] .theme-mode-control { background: color-mix(in srgb, var(--paper) 78%, var(--ink) 22%); }
:root[data-theme-mode="manual"] .theme-mode-control__auto { opacity: 0; transform: scale(.72); }
:root[data-theme-mode="manual"] .theme-mode-control__manual { opacity: 1; transform: scale(1); }
.side-code { top: 50%; left: clamp(13px, 1.65vw, 27px); color: var(--muted); opacity: .8; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.corner-note { right: clamp(24px, 4vw, 64px); bottom: clamp(22px, 2.8vw, 38px); display: flex; gap: 15px; color: var(--muted); }
.corner-note span:last-child { color: var(--violet); }
.interaction-hint { bottom: clamp(22px, 2.8vw, 38px); left: 50%; color: var(--muted); opacity: .78; transform: translateX(-50%); }

.svg-catalog { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.svg-catalog::before,
.svg-catalog::after {
  position: absolute;
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 13%, var(--line) 87%, transparent);
}
.svg-catalog::before { top: clamp(112px, 15.5%, 156px); right: 10%; left: 10%; }
.svg-catalog::after { right: 15%; bottom: clamp(80px, 11%, 126px); left: 15%; }

.svg-catalog__item {
  position: absolute;
  display: block;
  width: clamp(18px, 2.05vw, 34px);
  height: auto;
  object-fit: contain;
  opacity: .34;
  transform-origin: center;
  animation: catalog-breathe 8s ease-in-out infinite;
}

/* Top rail: deliberately sparse to leave a calm entrance to the main scene. */
.svg-catalog__item:nth-child(1) { top: 11.5%; left: 24%; width: clamp(38px, 4vw, 64px); opacity: .78; animation-delay: -3.4s; }
.svg-catalog__item:nth-child(2) { top: 12.2%; left: 34%; animation-delay: -1.8s; }
.svg-catalog__item:nth-child(3) { top: 11.6%; left: 42%; width: clamp(24px, 2.25vw, 39px); animation-delay: -4.1s; }
.svg-catalog__item:nth-child(4) { top: 12%; left: 49%; animation-delay: -.6s; }
.svg-catalog__item:nth-child(5) { top: 11.5%; left: 56%; width: clamp(33px, 3.1vw, 49px); opacity: .6; animation-delay: -5.2s; }
.svg-catalog__item:nth-child(6) { top: 12.2%; left: 65%; animation-delay: -2.9s; }
.svg-catalog__item:nth-child(7) { top: 11.6%; left: 72%; width: clamp(28px, 2.6vw, 43px); animation-delay: -4.7s; }
.svg-catalog__item:nth-child(8) { top: 12%; left: 79%; animation-delay: -1.1s; }
.svg-catalog__item:nth-child(9) { top: 11.6%; left: 85%; animation-delay: -3.8s; }

/* Left rail: symbols form one vertical rhythm instead of competing with the illustration. */
.svg-catalog__item:nth-child(10) { top: 27%; left: 6.7%; width: clamp(29px, 2.75vw, 45px); opacity: .7; animation-delay: -3.1s; }
.svg-catalog__item:nth-child(11) { top: 38%; left: 8%; animation-delay: -5.3s; }
.svg-catalog__item:nth-child(12) { top: 49%; left: 5.9%; width: clamp(36px, 3.45vw, 56px); opacity: .65; animation-delay: -2.3s; }
.svg-catalog__item:nth-child(13) { top: 60%; left: 8.1%; animation-delay: -6.2s; }
.svg-catalog__item:nth-child(14) { top: 71%; left: 6.8%; width: clamp(29px, 2.8vw, 46px); animation-delay: -1.4s; }
.svg-catalog__item:nth-child(15) { top: 42%; left: 13.4%; width: clamp(20px, 1.9vw, 31px); opacity: .23; animation-delay: -4.4s; }
.svg-catalog__item:nth-child(16) { top: 65%; left: 13.2%; width: clamp(20px, 1.9vw, 31px); opacity: .23; animation-delay: -.9s; }

/* Right rail mirrors the mass, but not every coordinate, so the page stays alive. */
.svg-catalog__item:nth-child(17) { top: 80%; right: 15%; width: clamp(27px, 2.6vw, 43px); animation-delay: -5.1s; }
.svg-catalog__item:nth-child(18) { top: 42%; right: 12.5%; width: clamp(44px, 4.6vw, 73px); height: 5px; opacity: .76; animation-delay: -2.1s; }
.svg-catalog__item:nth-child(19) { top: 54%; right: 14%; animation-delay: -6.4s; }
.svg-catalog__item:nth-child(20) { display: none; }
.svg-catalog__item:nth-child(21) { top: 67%; right: 14%; width: clamp(30px, 2.9vw, 47px); animation-delay: -4.8s; }
.svg-catalog__item:nth-child(22) { top: 28%; right: 16%; width: clamp(27px, 2.55vw, 41px); animation-delay: -1.2s; }
.svg-catalog__item:nth-child(23) { top: 27%; right: 11%; width: clamp(18px, 1.75vw, 28px); opacity: .24; animation-delay: -5.8s; }

/* Bottom rail completes the composition without becoming a second focal point. */
.svg-catalog__item:nth-child(24) { bottom: 6.7%; left: 24%; width: clamp(56px, 5.6vw, 88px); opacity: .54; animation-delay: -3.6s; }
.svg-catalog__item:nth-child(25) { bottom: 7.2%; left: 37.5%; animation-delay: -1.7s; }
.svg-catalog__item:nth-child(26) { bottom: 6.5%; left: 45%; width: clamp(27px, 2.55vw, 42px); animation-delay: -4.5s; }
.svg-catalog__item:nth-child(27) { bottom: 7.1%; left: 54%; animation-delay: -2.6s; }
.svg-catalog__item:nth-child(28) { bottom: 6.4%; left: 63%; width: clamp(20px, 1.9vw, 31px); animation-delay: -5.5s; }
.svg-catalog__item:nth-child(29) { bottom: 6.8%; left: 71%; width: clamp(35px, 3.45vw, 54px); opacity: .62; animation-delay: -.7s; }

/* A small motion vocabulary keeps the field alive without competing with the workstation. */
.svg-catalog__item:nth-child(1),
.svg-catalog__item:nth-child(7),
.svg-catalog__item:nth-child(14),
.svg-catalog__item:nth-child(21) {
  animation-name: catalog-spin-cw;
  animation-duration: 18s;
  animation-timing-function: linear;
}
.svg-catalog__item:nth-child(10),
.svg-catalog__item:nth-child(22),
.svg-catalog__item:nth-child(26) {
  animation-name: catalog-spin-ccw;
  animation-duration: 16s;
  animation-timing-function: linear;
}
.svg-catalog__item:nth-child(3),
.svg-catalog__item:nth-child(27) {
  animation-name: catalog-quarter-turn;
  animation-duration: 11.5s;
}
.svg-catalog__item:nth-child(16) {
  animation-name: catalog-grid-shift;
  animation-duration: 8.6s;
}
.svg-catalog__item:nth-child(2),
.svg-catalog__item:nth-child(11),
.svg-catalog__item:nth-child(17),
.svg-catalog__item:nth-child(23) {
  animation-name: catalog-wander;
  animation-duration: 13.6s;
  animation-timing-function: cubic-bezier(.42, 0, .2, 1);
}
.svg-catalog__item:nth-child(9),
.svg-catalog__item:nth-child(18),
.svg-catalog__item:nth-child(28) {
  animation-name: catalog-reconnect;
  animation-duration: 12.4s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.svg-catalog__item:nth-child(24) {
  animation-name: catalog-line-slide;
  animation-duration: 10.5s;
}
.svg-catalog__item:nth-child(25) {
  animation-name: catalog-micro-arc;
  animation-duration: 9.4s;
}
.svg-catalog__item:nth-child(29) {
  animation-name: catalog-heart-beat;
  animation-duration: 6.8s;
}

.tech-rail {
  position: absolute;
  right: 1.7%;
  width: 24px;
  height: auto;
  color: var(--ink);
  opacity: .62;
  overflow: visible;
}
.tech-rail--top {
  top: 24%;
  aspect-ratio: 140 / 1300;
}
.tech-rail--bottom {
  bottom: calc(5% + 100px);
  aspect-ratio: 140 / 1440;
}
.tech-rail path {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.tech-rail__segment {
  transform-box: fill-box;
}
.tech-rail__segment--top {
  transform-origin: top;
  animation: tech-rail-gap 7.6s cubic-bezier(.42, 0, .2, 1) infinite;
}
.tech-rail__segment--bottom {
  transform-origin: bottom;
  animation: tech-rail-gap 7.6s cubic-bezier(.42, 0, .2, 1) infinite;
}

.scene-halo {
  position: absolute;
  z-index: 1;
  top: 52%;
  left: 50%;
  width: min(58vw, 820px);
  aspect-ratio: 1.76;
  border-top: 1px solid rgba(23, 26, 27, .07);
  border-bottom: 1px solid rgba(23, 26, 27, .06);
  transform: translate(-50%, -44%);
}
.scene-halo::before,
.scene-halo::after {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 1px;
  content: "";
  background: rgba(23, 26, 27, .08);
}
.scene-halo::before { left: 0; }
.scene-halo::after { right: 0; }

.scene {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  padding: 0;
  place-items: center;
  perspective: 1600px;
}
.scene-stage {
  position: relative;
  --scene-x: 0px;
  --scene-y: 0px;
  --scene-rx: 0deg;
  --scene-ry: 0deg;
  width: min(62vw, 72svh, 875px);
  aspect-ratio: 1;
  transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), 0) rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg));
  transform-origin: 50% 77%;
  will-change: transform;
}
.workstation-wrap { position: absolute; inset: 0; display: grid; place-items: center; animation: workstation-settle 1.25s cubic-bezier(.16, 1, .3, 1) both; }
.workstation-wrap::after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 12%;
  left: 12%;
  height: 2px;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(22, 174, 189, .22) 18%, rgba(22, 174, 189, .82) 50%, rgba(22, 174, 189, .22) 82%, transparent);
  box-shadow: 0 0 12px rgba(22, 174, 189, .5);
  animation: workstation-scan 6.4s steps(1, end) infinite;
}
.workstation,
.workstation-glitch { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.workstation { animation: none; }
.workstation-glitch { z-index: 1; pointer-events: none; opacity: 0; }
.workstation-glitch--slice { mix-blend-mode: screen; animation: workstation-glitch-slice 6.4s steps(1, end) infinite; }
.workstation-glitch--shift { filter: hue-rotate(136deg) saturate(1.65); mix-blend-mode: screen; animation: workstation-glitch-shift 6.4s steps(1, end) infinite; }

.sticker { display: none; }
.selection { position: absolute; z-index: 2; top: 20%; left: -6%; width: 10%; aspect-ratio: 1; pointer-events: none; }
.selection-heart { display: block; width: 100%; height: 100%; opacity: .74; animation: selection-pulse 4.6s ease-in-out infinite; }

:root[data-theme="dark"] .wallpaper { border-color: rgba(243, 246, 244, .11); }
:root[data-theme="dark"] .mark-dot { box-shadow: 0 0 0 5px rgba(19, 201, 178, .13); }
:root[data-theme="dark"] .theme-control__sun { opacity: 1; transform: rotate(40deg); }
:root[data-theme="dark"] .theme-control__moon { opacity: 0; transform: rotate(-20deg); }
:root[data-theme="dark"] .scene-halo { border-top-color: rgba(243, 246, 244, .1); border-bottom-color: rgba(243, 246, 244, .08); }
:root[data-theme="dark"] .scene-halo::before,
:root[data-theme="dark"] .scene-halo::after { background: rgba(243, 246, 244, .11); }

@keyframes workstation-settle { from { opacity: 0; transform: translateY(7%) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes workstation-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.012); } }
@keyframes workstation-glitch-slice {
  0%, 32%, 100% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
  33% { opacity: .2; clip-path: inset(31% 0 54% 0); transform: translateX(-10px); }
  35% { opacity: .34; clip-path: inset(62% 0 17% 0); transform: translateX(12px); }
  37% { opacity: .16; clip-path: inset(11% 0 74% 0); transform: translateX(-6px); }
  39%, 63% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
  64% { opacity: .15; clip-path: inset(48% 0 34% 0); transform: translateX(8px); }
  66% { opacity: .26; clip-path: inset(18% 0 64% 0); transform: translateX(-9px); }
  68% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
}
@keyframes workstation-glitch-shift {
  0%, 32%, 100% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
  33% { opacity: .12; clip-path: inset(31% 0 54% 0); transform: translateX(7px); }
  35% { opacity: .18; clip-path: inset(62% 0 17% 0); transform: translateX(-8px); }
  37% { opacity: .08; clip-path: inset(11% 0 74% 0); transform: translateX(5px); }
  39%, 63% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
  64% { opacity: .1; clip-path: inset(48% 0 34% 0); transform: translateX(-5px); }
  66% { opacity: .16; clip-path: inset(18% 0 64% 0); transform: translateX(7px); }
  68% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
}
@keyframes workstation-scan {
  0%, 32%, 100% { top: 0; opacity: 0; }
  33% { top: 38%; opacity: .78; }
  35% { top: 57%; opacity: .5; }
  37% { top: 70%; opacity: .2; }
  39%, 63% { top: 0; opacity: 0; }
  64% { top: 47%; opacity: .6; }
  66% { top: 64%; opacity: .22; }
  68% { top: 0; opacity: 0; }
}
@keyframes catalog-breathe { 0%, 100% { transform: translateY(0) scale(.96); opacity: .28; } 45% { transform: translateY(-5px) scale(1); opacity: .74; } 65% { transform: translateY(-2px) scale(.985); opacity: .48; } }
@keyframes catalog-spin-cw { 0% { transform: translateY(0) rotate(0deg) scale(.96); opacity: .32; } 50% { transform: translateY(-4px) rotate(180deg) scale(1); opacity: .72; } 100% { transform: translateY(0) rotate(360deg) scale(.96); opacity: .32; } }
@keyframes catalog-spin-ccw { 0% { transform: translateY(0) rotate(0deg) scale(.96); opacity: .32; } 50% { transform: translateY(-3px) rotate(-180deg) scale(1); opacity: .68; } 100% { transform: translateY(0) rotate(-360deg) scale(.96); opacity: .32; } }
@keyframes catalog-quarter-turn { 0%, 100% { transform: translateY(0) rotate(0deg) scale(.96); opacity: .3; } 28% { transform: translateY(-4px) rotate(90deg) scale(1); opacity: .7; } 56% { transform: translateY(-2px) rotate(90deg) scale(.985); opacity: .52; } 76% { transform: translateY(-4px) rotate(180deg) scale(1); opacity: .7; } }
@keyframes catalog-grid-shift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.95); opacity: .26; } 35% { transform: translate3d(4px, -4px, 0) rotate(45deg) scale(1); opacity: .7; } 65% { transform: translate3d(-3px, -2px, 0) rotate(90deg) scale(.98); opacity: .48; } }
@keyframes catalog-wander { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.95); opacity: .25; } 16% { transform: translate3d(-4px, 3px, 0) rotate(-3deg) scale(.99); opacity: .55; } 38% { transform: translate3d(3px, -4px, 0) rotate(2deg) scale(1); opacity: .7; } 61% { transform: translate3d(5px, 1px, 0) rotate(4deg) scale(.97); opacity: .42; } 79% { transform: translate3d(-2px, -3px, 0) rotate(-2deg) scale(.99); opacity: .6; } }
@keyframes catalog-reconnect { 0%, 18%, 100% { transform: translate3d(0, 0, 0) scale(.96); opacity: .3; } 27% { transform: translate3d(5px, -2px, 0) scale(.98); opacity: .62; } 34%, 42% { transform: translate3d(8px, -2px, 0) scale(.94); opacity: 0; } 49% { transform: translate3d(-4px, 1px, 0) scale(1.02); opacity: .68; } 67% { transform: translate3d(1px, -3px, 0) scale(.99); opacity: .48; } 74%, 78% { transform: translate3d(-3px, 2px, 0) scale(.95); opacity: 0; } 84% { transform: translate3d(0, 0, 0) scale(1); opacity: .58; } }
@keyframes catalog-line-slide { 0%, 100% { transform: translateX(0) scaleX(.92); opacity: .28; } 42% { transform: translateX(10px) scaleX(1); opacity: .68; } 68% { transform: translateX(-5px) scaleX(.97); opacity: .45; } }
@keyframes catalog-micro-arc { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.94); opacity: .28; } 25% { transform: translate3d(3px, -5px, 0) rotate(12deg) scale(1); opacity: .66; } 54% { transform: translate3d(-4px, -2px, 0) rotate(-8deg) scale(.97); opacity: .42; } 78% { transform: translate3d(2px, 2px, 0) rotate(6deg) scale(.99); opacity: .58; } }
@keyframes catalog-heart-beat { 0%, 100% { transform: translateY(0) scale(.92); opacity: .34; } 32% { transform: translateY(-3px) scale(1.08); opacity: .76; } 45% { transform: translateY(-2px) scale(.98); opacity: .56; } 58% { transform: translateY(-4px) scale(1.03); opacity: .68; } }
@keyframes tech-rail-gap { 0%, 100% { transform: scaleY(.62); } 46% { transform: scaleY(.87); } 68% { transform: scaleY(.76); } }
@keyframes selection-pulse { 0%, 100% { transform: scale(.9); opacity: .4; } 45% { transform: scale(1.07); opacity: .82; } 62% { transform: scale(1); opacity: .62; } }

[data-intro], [data-scene] { opacity: 1; }

@media (max-width: 720px) {
  :root { --shell-gap: 0px; }
  html, body { overflow: hidden; }
  .wallpaper { width: 100%; min-height: 100dvh; border: 0; border-radius: 0; }
  .pointer-field, .side-code, .interaction-hint { display: none; }
  .corner-mark { top: 28px; left: 25px; }
  .brand-name { width: min(51vw, 185px); }
  .theme-switcher { top: 22px; right: 21px; gap: 6px; }
  .theme-control, .theme-mode-control { width: 34px; height: 34px; }
  .corner-note { right: 21px; bottom: 22px; gap: 11px; font-size: 8px; }
  .svg-catalog::before { top: 15.6%; right: 12%; left: 12%; }
  .svg-catalog::after { right: 18%; bottom: 12%; left: 18%; }
  .svg-catalog__item { width: 16px; opacity: .26; }
  .svg-catalog__item:nth-child(1) { top: 17%; left: 15%; width: 31px; }
  .svg-catalog__item:nth-child(2) { top: 17.8%; left: 28%; }.svg-catalog__item:nth-child(3) { top: 17%; left: 40%; }.svg-catalog__item:nth-child(4) { top: 17.8%; left: 50%; }.svg-catalog__item:nth-child(5) { top: 17%; left: 59%; width: 24px; }.svg-catalog__item:nth-child(6) { top: 17.8%; left: 71%; }.svg-catalog__item:nth-child(7) { top: 17%; left: 80%; }.svg-catalog__item:nth-child(8), .svg-catalog__item:nth-child(9) { display: none; }
  .svg-catalog__item:nth-child(10) { top: 29%; left: 5%; width: 24px; }.svg-catalog__item:nth-child(11) { top: 39%; left: 6%; }.svg-catalog__item:nth-child(12) { top: 49%; left: 4%; width: 26px; }.svg-catalog__item:nth-child(13) { top: 59%; left: 6%; }.svg-catalog__item:nth-child(14) { top: 69%; left: 5%; }.svg-catalog__item:nth-child(15), .svg-catalog__item:nth-child(16) { display: none; }
  .svg-catalog__item:nth-child(17) { top: 80%; right: 14%; }.svg-catalog__item:nth-child(18) { top: 42%; right: 15%; width: 34px; height: 4px; }.svg-catalog__item:nth-child(19) { top: 54%; right: 19%; }.svg-catalog__item:nth-child(21) { top: 67%; right: 16%; }.svg-catalog__item:nth-child(22) { top: 29%; right: 18%; }.svg-catalog__item:nth-child(23) { display: none; }
  .tech-rail { right: 3%; width: 24px; height: auto; opacity: .5; }
  .tech-rail--top { top: 32%; }
  .tech-rail--bottom { top: auto; bottom: calc(5% + 100px); }
  .svg-catalog__item:nth-child(24) { bottom: 8%; left: 19%; width: 44px; }.svg-catalog__item:nth-child(25) { bottom: 8%; left: 36%; }.svg-catalog__item:nth-child(26) { bottom: 8%; left: 48%; }.svg-catalog__item:nth-child(27) { bottom: 8%; left: 61%; }.svg-catalog__item:nth-child(28) { bottom: 8%; left: 73%; }.svg-catalog__item:nth-child(29) { display: none; }
  .scene-halo { top: 50%; width: 74vw; transform: translate(-50%, -50%); }
  .scene { display: block; padding: 0; }
  .scene-stage { position: absolute; top: 50%; left: 50%; width: 240px; transform: translate3d(calc(-50% + var(--scene-x, 0)), calc(-50% + var(--scene-y, 0)), 0); transform-origin: 50% 77%; }
  .selection { top: 24%; left: 3%; width: 9%; }
}

@media (max-width: 420px) and (max-height: 760px) {
  .scene-stage { top: 50%; width: 240px; }
  .scene-halo { top: 50%; }
  .svg-catalog__item:nth-child(10) { top: 27%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}