* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100dvh;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* Allow text selection for text elements */
h1, h2, h3, h4, h5, h6, p, a, span, .hero-text, .feature-description {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

/* Page wrapper - единая заливка */
.page-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  transition: background 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: -1;
}

/* Fullpage container */
#fullpage {
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* Header - transparent */
header {
  background: transparent;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
}

@media (max-width: 767px) {
  header {
    height: 60px;
  }
}

.header-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-container > div:last-child {
  display: flex;
  align-items: center;
}

/* Grid System - Desktop: 12 колонок центрировано */
@media (min-width: 1920px) {
  .header-container {
    max-width: 1680px;
    margin: 0 auto;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .header-container {
    max-width: 1320px;
    margin: 0 auto;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .header-container {
    max-width: 1170px;
    margin: 0 auto;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .header-container {
    max-width: 960px;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .header-container {
    max-width: 724px;
    margin: 0 auto;
  }
}

/* Small: 16px gutter по бокам */
@media (max-width: 767px) {
  .header-container {
    padding: 0 16px;
  }

  header {
    height: 60px;
  }
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo svg {
  height: 36px;
  width: auto;
}

/* Logo color classes - controlled via JS with smooth transitions */
.logo-light {
  fill: #9545FF;
  transition: fill 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-dark {
  fill: #5B0FBF;
  transition: fill 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) {
  .logo svg {
    height: 24px;
  }
}

/* Label style - Fira Sans Medium 14/20 Uppercase */
.label {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.14px;
}

nav {
  display: flex;
  gap: 36px;
  align-items: center;
  margin-right: 36px;
}

nav .nav-link {
  opacity: 1;
  transition: opacity 0.2s ease;
}

nav .nav-link.active {
  opacity: 0.5;
}

nav a {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.14px;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  position: relative;
  top: 1px; /* Align with button text vertically */
}

nav a:hover {
  color: var(--purple-500);
  transform: scale(1.05);
}

/* Nav links on purple background */
.purple-bg nav a {
  color: white;
}

.purple-bg nav a:hover {
  color: var(--gray-125);
  transform: scale(1.05);
}

.cta-button {
  background: #771FE9;
  color: white;
  padding: 0;
  height: 42px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14px;
  text-transform: uppercase;
  transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s, scale 0.2s;
  display: flex;
  align-items: center;
  overflow: hidden;
  touch-action: manipulation; /* Disable double-tap zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* XXL screens - larger CTA button */
@media (min-width: 1920px) {
  .cta-button {
    height: 48px;
  }
}

.cta-button span {
  padding: 0 16px;
  color: white;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.14px;
  position: relative;
  top: 1px; /* Align text vertically in center */
}

.cta-button:hover {
  background: #5C0FBF;
  scale: 1.03;
}

.cta-button:hover .figma-icon {
  background: #5C0FBF;
}

.cta-button:active {
  transform: translateY(1px);
}

.cta-separator {
  width: 1px;
  height: 100%;
  background: #E3EAE4;
  opacity: 0.5;
  transition: background 0.2s;
}

.cta-button:hover .cta-separator {
  background: #E3EAE4;
}

.figma-icon {
  width: 50px;
  height: 42px;
  background: #2C2C2C;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

/* XXL screens - larger figma icon */
@media (min-width: 1920px) {
  .figma-icon {
    height: 48px;
  }
}

.figma-icon img {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  nav {
    display: none;
  }

  .cta-button span {
    display: none;
  }

  .cta-separator {
    display: none;
  }

  .cta-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
  }

  .figma-icon {
    width: 36px;
    height: 36px;
  }
}

/* Section - fullscreen */
.section {
  height: 100dvh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  will-change: transform;
}

/* Center content for sections 2 and 3 - Desktop/Tablet only */
@media (min-width: 768px) {
  .section[data-section="1"],
  .section[data-section="2"] {
    justify-content: center;
    gap: 56px; /* Default for desktop */
  }

  /* Section 2 (second slide) needs +24px more spacing */
  .section[data-section="1"] {
    gap: 80px; /* 56px + 24px */
  }
}

/* Tablet spacing: 40px */
@media (min-width: 768px) and (max-width: 1199px) {
  .section[data-section="1"],
  .section[data-section="2"] {
    gap: 40px;
  }

  /* Section 2 (second slide) needs +24px more spacing on tablet */
  .section[data-section="1"] {
    gap: 64px; /* 40px + 24px */
  }
}

.section.animated {
  transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1),
              opacity 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media (min-width: 1200px) {
  .section {
    padding-top: calc(96px + 32px);
    padding-bottom: 128px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .section {
    padding-top: calc(96px + 2px);
    padding-bottom: 84px;
  }
}

@media (max-width: 767px) {
  .section {
    padding-top: calc(48px);
    padding-bottom: 84px;
  }
}

/* Text блок */
.hero-text {
  flex-shrink: 0;
  text-align: left;
  width: 100%;
  margin: 0 0 32px 0;
}

/* Remove bottom margin for centered sections - gap is used instead */
.section[data-section="1"] .hero-text,
.section[data-section="2"] .hero-text {
  margin-bottom: 0;
}

/* Remove flex: 1 from features-area for centered sections (Desktop only) */
@media (min-width: 768px) {
  .section[data-section="1"] .features-area,
  .section[data-section="2"] .features-area,
  .section-features .features-area {
    flex: 0 0 auto !important;
  }
}

/* Hero Text max-width by breakpoints (10 columns from left) */
@media (min-width: 1920px) {
  .hero-text {
    max-width: 1400px; /* 10 columns for XXL */
    margin-left: calc((100vw - 1680px) / 2); /* Align with header-container */
  }

  .section[data-section="1"] .hero-text,
  .section[data-section="2"] .hero-text {
    margin-bottom: 0;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-text {
    max-width: 1100px; /* 10 columns for XL */
    margin-left: calc((100vw - 1320px) / 2); /* Align with header-container */
  }

  .section[data-section="1"] .hero-text,
  .section[data-section="2"] .hero-text {
    margin-bottom: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-text {
    max-width: 970px; /* 10 columns for Desktop */
    margin-left: calc((100vw - 1170px) / 2); /* Align with header-container */
  }

  .section[data-section="1"] .hero-text,
  .section[data-section="2"] .hero-text {
    margin-bottom: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-text {
    max-width: 796px; /* 10 columns for LG */
    margin-left: calc((100vw - 960px) / 2); /* Align with header-container */
  }

  .section[data-section="1"] .hero-text,
  .section[data-section="2"] .hero-text {
    margin-bottom: 0;
  }

  /* Override features-area for centered sections on tablets ONLY */
  .section[data-section="1"] .features-area,
  .section[data-section="2"] .features-area {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-text {
    max-width: 724px; /* 12 columns for MD */
    margin-left: calc((100vw - 724px) / 2); /* Align with header-container */
  }

  .section[data-section="1"] .hero-text,
  .section[data-section="2"] .hero-text {
    margin-bottom: 0;
  }

  /* Override features-area for centered sections on tablets ONLY */
  .section[data-section="1"] .features-area,
  .section[data-section="2"] .features-area {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 767px) {
  .hero-text {
    width: auto;
    margin: 24px 16px; /* Same padding as header-container */
  }

  /* Section 2 (second slide) same spacing as default on mobile */
  .section[data-section="1"] .hero-text {
    margin-bottom: 24px;
  }

  /* Disable centering on mobile for section 3 ONLY */
  .section[data-section="2"] {
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  /* Remove flex: 1 from features-area on mobile for section 3 ONLY */
  .section[data-section="2"] .features-area {
    flex: 0 0 auto !important;
  }

  /* Ensure section 3 has same spacing on mobile */
  .section[data-section="2"] .hero-text {
    margin: 24px 16px 24px 16px; /* Same as default */
  }
}

/* Reduce spacing for very short screens */
@media (max-width: 767px) and (max-height: 650px) {
  .hero-text {
    margin-bottom: 16px; /* Reduced from 24px */
  }

  .section[data-section="1"] .hero-text {
    margin-bottom: 16px; /* Reduced from 24px */
  }

  .section[data-section="2"] .hero-text {
    margin: 24px 16px 16px 16px; /* Bottom reduced from 24px to 16px */
  }
}

/* Line break control for large screens */
.large-screen-br {
  display: none;
}

@media (min-width: 1440px) {
  .large-screen-br {
    display: inline;
  }
}

/* Line break control for desktop and tablet screens */
.medium-screen-br {
  display: none;
}

@media (min-width: 768px) {
  .medium-screen-br {
    display: inline;
  }
}

/* Line break for desktop only (hidden on mobile) */
.desktop-br {
  display: none;
}

@media (min-width: 768px) {
  .desktop-br {
    display: inline;
  }
}

/* Desktop: 6-8 колонок центрировано */
@media (min-width: 1920px) {
  .hero-text {
    max-width: 990px; /* 6 колонок XXL */
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-text {
    max-width: 810px; /* 6 колонок XL */
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-text {
    max-width: 770px; /* 8 колонок Desktop */
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-text {
    max-width: 632px; /* 8 колонок LG */
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-text {
    max-width: 476px; /* 8 колонок MD */
  }
}

.hero-text h1 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.hero-text p {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .hero-text p {
    font-size: 18px;
    line-height: 24px;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .hero-text p {
    font-size: 16px;
    line-height: 22px;
  }
}

/* H1 Sizes */
@media (min-width: 1920px) {
  .hero-text h1 {
    font-size: 48px;
    line-height: 60px;
    white-space: nowrap;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-text h1 {
    font-size: 44px;
    line-height: 56px;
    white-space: nowrap;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-text h1 {
    font-size: 40px;
    line-height: 54px;
    white-space: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-text h1 {
    font-size: 36px;
    line-height: 48px;
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-text h1 {
    font-size: 32px;
    line-height: 44px;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .hero-text h1 {
    font-size: 24px;
    line-height: 30px;
  }
}

/* Mobile line break for h1 */
.mobile-br {
  display: none;
}

/* Only break into 2 lines on small mobile screens */
@media (max-width: 539px) {
  .mobile-br {
    display: block;
  }
}

/* Animation Area */
.animation-area {
  flex: 1;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  --scale-factor: 1;
  min-height: 0;
  padding: 0 5%;
}

.animation-area > * {
  max-height: 90%;
  max-width: 90%;
}

.test-container {
  position: relative;
  width: auto;
  height: 100%;
  aspect-ratio: 280 / 607;
  margin: 0 auto;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.screens-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(32px * var(--scale-factor, 1));
  transform-style: preserve-3d;
  pointer-events: none;
}

.screens-wrapper.mask-enabled {
  overflow: hidden;
}

@supports (container-type: size) {
  .test-container {
    container-type: size;
  }
}

#screen, #screen-duplicate, #frame-white, #frame-bg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(32px * var(--scale-factor, 1));
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  pointer-events: none;
}

#screen {
  left: 50%;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: slideFromLeftIsometric 0.8s ease-out 1.2s forwards, flattenDesigner 0.6s ease-out 3.2s forwards;
}

#screen-duplicate {
  left: 50%;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: normal;
  will-change: transform, opacity, clip-path;
  backface-visibility: hidden;
  animation: slideFromRightIsometric 0.8s ease-out 2.2s forwards,
             flattenDeveloper 0.6s ease-out 3.2s forwards,
             revealRightDifference 1.5s ease-in-out 3.8s forwards;
  cursor: default;
}

/* Enable drag on mobile */
@media (max-width: 991px) {
  #screen-duplicate {
    touch-action: none; /* Prevent page scroll when dragging */
    pointer-events: auto; /* Override parent's pointer-events: none */
    z-index: 10; /* Above frames to ensure cursor is visible */
  }
}

/* Cursor rules for mobile drag - using class to ensure it applies */
#screen-duplicate.mobile-draggable {
  cursor: grab !important;
}

#screen-duplicate.mobile-dragging {
  cursor: grabbing !important;
}

#screen-duplicate.smooth-return {
  transition: transform 0.3s ease-out;
}

#frame-white {
  left: 50%;
  background: transparent;
  outline: calc(18px * var(--scale-factor, 1)) solid white;
  outline-offset: 0px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: transform;
  box-shadow: 0 calc(22px * var(--scale-factor, 1)) 0 0 #D3E0D5;
  animation: frameAppear 1s ease-out 0.4s forwards, flattenFrameWhite 0.6s ease-out 3.2s forwards, shadowFadeOut 0.6s ease-out 3.2s forwards;
}

/* Siri-like rainbow gradient effect on frame-white */
#frame-white.siri-active {
  outline-color: transparent;
  transition: outline-color 0.3s ease;
}

#frame-bg {
  left: 50%;
  background: transparent;
  outline: calc(16px * var(--scale-factor, 1)) solid #E3EAE4;
  outline-offset: 0px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: transform;
  box-shadow: 0 calc(8px * var(--scale-factor, 1)) calc(24px * var(--scale-factor, 1)) 0 rgba(0, 0, 0, 0);
  animation: frameAppear 1s ease-out 0.4s forwards, flattenFrameBg 0.6s ease-out 3.2s forwards, shadowAppear 0.4s ease-out 3.2s forwards;
}

#frame-bg.gradient-active {
  outline-color: transparent;
  box-shadow:
    0 0 0 calc(2px * var(--scale-factor, 1)) #771FE9,
    0 0 0 calc(4px * var(--scale-factor, 1)) #A166EE,
    0 0 0 calc(6px * var(--scale-factor, 1)) #771FE9,
    0 0 0 calc(8px * var(--scale-factor, 1)) #8D36FF,
    0 0 0 calc(10px * var(--scale-factor, 1)) #771FE9,
    0 0 0 calc(12px * var(--scale-factor, 1)) #A166EE,
    0 0 0 calc(14px * var(--scale-factor, 1)) #771FE9,
    0 0 0 calc(16px * var(--scale-factor, 1)) #8D36FF;
  transition: outline-color 0.3s ease, box-shadow 0.3s ease;
}

@keyframes frameAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotateX(60deg) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateX(60deg) scale(1);
  }
}

@keyframes slideFromLeftIsometric {
  0% {
    left: -50%;
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(0px) rotateX(60deg) rotateY(-45deg);
  }
  100% {
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(0px) rotateX(60deg) rotateY(0deg);
  }
}

@keyframes slideFromRightIsometric {
  0% {
    left: 150%;
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(10px) rotateX(60deg) rotateY(45deg);
  }
  100% {
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(10px) rotateX(60deg) rotateY(0deg);
  }
}

@keyframes flattenDesigner {
  0% {
    transform: translate(-50%, -50%) translateZ(0px) rotateX(60deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(0deg);
  }
}

@keyframes flattenDeveloper {
  0% {
    transform: translate(-50%, -50%) translateZ(10px) rotateX(60deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(0deg);
  }
}

@keyframes flattenFrameBg {
  0% {
    transform: translate(-50%, -50%) translateZ(2px) rotateX(60deg);
  }
  99% {
    transform: translate(-50%, -50%) translateZ(2px) rotateX(1deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(0deg);
  }
}

@keyframes flattenFrameWhite {
  0% {
    transform: translate(-50%, -50%) translateZ(0px) rotateX(60deg);
  }
  99% {
    transform: translate(-50%, -50%) translateZ(0px) rotateX(1deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(0deg);
  }
}

@keyframes shadowAppear {
  0% {
    box-shadow: 0 calc(8px * var(--scale-factor, 1)) calc(24px * var(--scale-factor, 1)) 0 rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 calc(8px * var(--scale-factor, 1)) calc(24px * var(--scale-factor, 1)) 0 rgba(0, 0, 0, 0.1);
  }
}

@keyframes shadowFadeOut {
  0% {
    box-shadow: 0 calc(22px * var(--scale-factor, 1)) 0 0 #D3E0D5;
  }
  100% {
    box-shadow: 0 0 0 0 #D3E0D5;
  }
}

@keyframes revealRightDifference {
  0%, 100% {
    opacity: 1; /* Appear immediately at 100% - JS will control it after slider appears */
    transform: translate(-50%, -50%);
  }
}

/* Darken animation after right icon appears */
@keyframes darkenScreen {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.5;
  }
}

/* SVG Perspective lines container */
.perspective-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; /* Below everything */
  overflow: visible;
}

/* Hide perspective lines on mobile */
@media (max-width: 767px) {
  .perspective-container {
    display: none;
  }
}

/* Vertical grid lines container */
.vertical-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2; /* Behind everything */
  overflow: visible;
}

/* Hide vertical grid on mobile */
@media (max-width: 767px) {
  .vertical-grid {
    display: none;
  }
}

.trail {
  stroke-width: 0.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

/* Footer - floating navigation buttons */
.hero-footer {
  position: fixed;
  bottom: 8px; /* Moved up 8px from bottom */
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}

/* Email button container (left side) */
.email-button-container {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show only on last section */
.email-button-container.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
              visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* Align with first column like hero-text */
@media (min-width: 1920px) {
  .email-button-container {
    margin-left: calc((100vw - 1680px) / 2);
    padding: 18px 0;
    height: 80px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .email-button-container {
    margin-left: calc((100vw - 1320px) / 2);
    padding: 18px 0;
    height: 80px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .email-button-container {
    margin-left: calc((100vw - 1170px) / 2);
    padding: 18px 0;
    height: 80px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .email-button-container {
    margin-left: calc((100vw - 960px) / 2);
    padding: 18px 0;
    height: 80px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .email-button-container {
    margin-left: calc((100vw - 724px) / 2);
    padding: 18px 0;
    height: 80px;
  }
}

@media (max-width: 767px) {
  .email-button-container {
    padding: 10px 16px;
    height: 64px;
  }
}

/* Background for email button */
.email-button-bg {
  position: absolute;
  left: 0;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #771FE9;
  transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

/* Mobile: adjust position for padding */
@media (max-width: 767px) {
  .email-button-bg {
    left: 16px;
  }
}

/* Email button */
.email-button {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  pointer-events: auto;
  z-index: 2;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Email button text - hidden by default */
.email-button-text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop hover - expand button and show text */
@media (min-width: 768px) {
  .email-button-container:hover .email-button {
    width: 160px;
    gap: 12px;
    justify-content: flex-start;
    padding-left: 16px;
  }

  .email-button-container:hover .email-button-text {
    width: auto;
    opacity: 1;
  }

  .email-button-container:hover .email-button-bg {
    width: 160px;
  }

  /* Move copyright to the right when button expands */
  .email-button-container:hover ~ .copyright-text {
    transform: translateX(118px);
  }
}

/* Mobile - no hover expansion */
@media (max-width: 767px) {
  .email-button:active {
    background: rgba(0, 0, 0, 0.2);
  }
}

/* Copyright text */
.copyright-text {
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(44, 44, 44, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  white-space: nowrap;
}

/* Show only on last section */
.copyright-text.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
              visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* Align with email button - responsive positioning */
@media (min-width: 1920px) {
  .copyright-text {
    margin-left: calc((100vw - 1680px) / 2 + 42px + 16px);
    padding: 18px 0;
    height: 80px;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .copyright-text {
    margin-left: calc((100vw - 1320px) / 2 + 42px + 16px);
    padding: 18px 0;
    height: 80px;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .copyright-text {
    margin-left: calc((100vw - 1170px) / 2 + 42px + 16px);
    padding: 18px 0;
    height: 80px;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .copyright-text {
    margin-left: calc((100vw - 960px) / 2 + 42px + 16px);
    padding: 18px 0;
    height: 80px;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .copyright-text {
    margin-left: calc((100vw - 724px) / 2 + 42px + 16px);
    padding: 18px 0;
    height: 80px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .copyright-text {
    padding: 10px 0;
    height: 64px;
    margin-left: calc(16px + 42px + 12px);
    display: flex;
    align-items: center;
  }
}

.email-button svg {
  width: 24px;
  height: 24px;
}

.email-button svg path {
  transition: fill 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  width: 100%;
  max-width: 1680px; /* Default for XXL */
  margin: 0 auto;
  pointer-events: auto;
  position: relative;
  transition: gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on page load */
.nav-buttons.preload .nav-button {
  transition: none !important;
}

/* No gap when both buttons visible - they connect seamlessly */
.nav-buttons.both-visible {
  gap: 0;
}

/* Grid alignment - match header-container max-widths */
@media (min-width: 1920px) {
  .nav-buttons {
    max-width: 1680px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .nav-buttons {
    max-width: 1320px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .nav-buttons {
    max-width: 1170px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .nav-buttons {
    max-width: 960px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .nav-buttons {
    max-width: 724px;
  }
}

@media (min-width: 768px) {
  .nav-buttons {
    padding: 18px 0;
    height: 80px;
  }
}

@media (max-width: 767px) {
  .nav-buttons {
    padding: 10px 16px;
    height: 64px;
  }
}

/* Background container for navigation buttons */
.nav-buttons-bg {
  position: absolute;
  right: 0;
  width: 56px;
  height: 42px;
  border-radius: 8px;
  background: #771FE9;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

/* Expand background when both buttons are visible */
.nav-buttons.both-visible .nav-buttons-bg {
  width: 112px;
}

/* Mobile: adjust position for padding */
@media (max-width: 767px) {
  .nav-buttons-bg {
    right: 16px;
  }
}

.nav-button {
  width: 56px;
  height: 42px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation; /* Disable double-tap zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  position: relative;
  overflow: visible;
  pointer-events: auto;
  z-index: 2;
}

/* When both buttons visible - remove inner border-radius for seamless connection */
.nav-buttons.both-visible .nav-button[data-position="left"] {
  border-radius: 8px 0 0 8px; /* Rounded on left, sharp on right */
}

.nav-buttons.both-visible .nav-button[data-position="right"] {
  border-radius: 0 8px 8px 0; /* Sharp on left, rounded on right */
}

/* Hidden state - slide out animation */
.nav-button.hidden {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

/* Hover effect - subtle darkening */
.nav-button:hover {
  background: rgba(0, 0, 0, 0.1);
}

.nav-button:active {
  background: rgba(0, 0, 0, 0.2);
}

.nav-button svg {
  width: 16px;
  height: 9px;
  color: white;
  transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Left and Right Animation Icons */
.left-animation-icon,
.right-animation-icon {
  position: absolute;
  display: none;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.1));
  opacity: 0;
  will-change: transform, opacity;
  /* Behind main animation */
  z-index: -1;
}

.left-animation-icon img,
.right-animation-icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* Animations for icons - slide from behind center */
@keyframes slideFromCenter {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translateX(var(--slide-distance)) scale(1);
  }
}


/* Second animation - move left icon diagonally to final position (right + up) */
@keyframes moveDiagonalRight {
  to {
    transform: translateX(var(--slide-to-right)) translateY(var(--move-up)) scale(1);
  }
}

/* Second animation - move right icon down to final position */
@keyframes moveDown {
  to {
    transform: translateX(var(--slide-distance)) translateY(var(--move-down)) scale(1);
  }
}

.left-animation-icon.slide-right {
  animation: slideFromCenter 0.8s ease-out 5.3s forwards;
}

.right-animation-icon.animate {
  animation: slideFromCenter 0.8s ease-out 5.3s forwards;
}

/* Second phase - triggered by Play button */
.left-animation-icon.continue-animation {
  animation: slideFromCenter 0.8s ease-out 5.3s forwards,
             moveDiagonalRight 0.5s ease-in-out forwards;
}

.right-animation-icon.continue-animation {
  animation: slideFromCenter 0.8s ease-out 5.3s forwards,
             moveDown 0.5s ease-in-out forwards;
}

/* Left perspective lines and vertical grid lines don't use transform */
/* They will be redrawn in real-time as the icon moves */

/* Show only on desktop */
@media (min-width: 768px) {
  .left-animation-icon,
  .right-animation-icon {
    display: block;
  }
}

/* Spotlight effect for Close button - ripple rings only */
.close-button-spotlight {
  position: absolute;
  width: calc(36px * var(--scale-factor, 1));
  height: calc(36px * var(--scale-factor, 1));
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: spotlightAppear 0.5s ease-out 24s forwards;
}

/* Safari hover fix - requires background for hover to work */
@media (min-width: 768px) {
  .close-button-spotlight {
    background: rgba(0, 0, 0, 0.001);
  }
}

/* Ripple rings using pseudo-elements */
.close-button-spotlight::before,
.close-button-spotlight::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: calc(1px * var(--scale-factor, 1)) solid rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: rippleRing 2s ease-out 8s infinite;
}

.close-button-spotlight::after {
  animation-delay: 9s; /* Second ring delayed by 1s */
}

@keyframes spotlightAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rippleRing {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

/* Tooltip styles - light theme, positioned below */
.spotlight-tooltip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  color: #2C2C2C;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  font-weight: var(--font-weight-body-small);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 11;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.tooltip-line {
  display: block;
  white-space: nowrap;
}

/* SVG Arrow positioning - fixed size 14x8 */
.tooltip-arrow {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  display: none; /* Hidden - not used in current design */
}

/* Show tooltip on hover (desktop/tablet) */
@media (min-width: 768px) {
  .close-button-spotlight:hover .spotlight-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
  }
}

/* Show tooltip when active (mobile click) */
.close-button-spotlight.tooltip-active .spotlight-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* Text blocks */
.left-text-block,
.right-text-block {
  position: absolute;
  border-radius: 8px;
  opacity: 0;
  z-index: 5;
  /* Animation controlled by JavaScript - no delay here */
}

.left-text-block {
  border-left: 3px solid var(--purple-600);
  padding-left: 24px;
}

.right-text-block {
  border-left: 3px solid var(--purple-600);
  padding-left: 24px;
}

.left-text-block p,
.right-text-block p {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  font-weight: var(--font-weight-body-large);
  letter-spacing: 0.16px;
  color: var(--text-primary);
  margin: 0;
}

.left-text-block .bold-word,
.right-text-block .bold-word {
  font-weight: 600;
}

/* Pulsing border animation */
@keyframes borderPulse {
  0%, 100% {
    border-color: var(--purple-600);
    opacity: 1;
  }
  50% {
    border-color: var(--purple-500);
    opacity: 0.6;
  }
}

@keyframes blockAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.left-text-block.pulsing,
.right-text-block.pulsing {
  animation: blockAppear 0.5s ease-out forwards,
             borderPulse 1.5s ease-in-out 0.5s 3;
}

/* Desktop XXL styles - 20px for largest screens */
@media (min-width: 1920px) {
  .left-text-block p,
  .right-text-block p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
  }
}

/* Desktop XL/L styles - 18px */
@media (min-width: 1200px) and (max-width: 1919px) {
  .left-text-block p,
  .right-text-block p {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
  }
}

/* Hide on mobile and tablets - show only on desktop */
@media (max-width: 1199px) {
  .left-text-block,
  .right-text-block {
    display: none;
  }
}

/* ============================================
   OPACITY SLIDER
   ============================================ */

/* ============================================
   NEW CONTROLS PANEL
   ============================================ */
.controls-panel {
  position: fixed;
  left: calc((100vw - 1680px) / 2);
  /* top set by JavaScript relative to .test-container */
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 294px;
  z-index: 10001; /* Above tutorial scrim but below tooltip */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.controls-panel.show {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive positioning */
@media (min-width: 1920px) {
  .controls-panel {
    width: 360px; /* Увеличиваем ширину на ~22% */
    gap: 58px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .controls-panel {
    left: calc((100vw - 1320px) / 2);
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .controls-panel {
    left: calc((100vw - 1170px) / 2);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .controls-panel {
    left: calc((100vw - 960px) / 2);
    gap: 16px;
    width: 260px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .controls-panel {
    left: calc((100vw - 724px) / 2);
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .controls-panel {
    display: none;
  }
}

/* Tutorial Help Link (Desktop) */
.tutorial-help-link {
  margin-top: -4px; /* Raised 20px up from original 16px */
  text-align: left;
  padding: 0 8px; /* Same as control-headline */
  font-family: 'Fira Sans', sans-serif;
  font-size: 15px; /* +1px from original 14px */
  line-height: 20px;
  color: #771FE9;
  text-decoration: none; /* No underline by default */
  cursor: pointer;
  display: block;
  transition: opacity 0.2s ease;
}

.tutorial-help-link:hover {
  opacity: 0.7;
  text-decoration: underline; /* Underline only on hover */
}

@media (min-width: 1920px) {
  .tutorial-help-link {
    font-size: 17px; /* +1px from original 16px */
    line-height: 22px;
    margin-top: 0px; /* Raised 20px up from original 20px */
    padding: 0 10px; /* Same as control-headline on 1920px+ */
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .tutorial-help-link {
    font-size: 13px; /* +1px from original 12px */
    line-height: 18px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .tutorial-help-link {
    margin-top: 4px; /* Added spacing for MD tablet screens with 16px gap */
  }
}

.control-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .control-section {
    gap: 5px;
  }
}

.control-headline {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #676767;
  text-transform: uppercase;
  text-align: left;
  padding: 0 8px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .control-headline {
    font-size: 13px;
  }
}

@media (min-width: 1920px) {
  .control-headline {
    font-size: 16px;
    line-height: 24px;
    padding: 0 10px;
  }
}

/* Overlay Style - Segmented Control */
.segmented-control {
  display: flex;
  gap: 2px;
  background: #F9FBFF;
  border: 0.5px solid #CAC7C7;
  border-radius: 8px;
  padding: 4px;
  height: 36px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .segmented-control {
    height: 32px;
  }
}

@media (min-width: 1920px) {
  .segmented-control {
    height: 44px;
  }
}

.segment-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #676767;
  background: #F9FBFF;
  border: none;
  border-radius: 5px;
  height: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  padding: 8px 12px 6px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .segment-button {
    font-size: 12px;
    line-height: 20px;
    height: 24px;
    padding-bottom: 8px;
  }
}

@media (min-width: 1200px) and (max-width: 1919px) {
  .segment-button {
    font-size: 14px;
    line-height: 22px;
    height: 28px;
    padding-bottom: 8px;
  }
}

@media (min-width: 1920px) {
  .segment-button {
    font-size: 17px;
    line-height: 24px;
    height: 36px;
    padding: 10px 14px 8px;
  }
}

.segment-button:hover {
  background: rgba(119, 31, 233, 0.05);
}

.segment-button.active {
  background: #771FE9;
  color: #F9FBFF;
  height: 100%;
}

/* Opacity Slider */
.opacity-track {
  position: relative;
  height: 36px;
  background: linear-gradient(to right, rgba(242, 243, 245, 0) 0%, #F2F3F5 100%);
  border: 0.5px solid #CAC7C7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .opacity-track {
    height: 32px;
  }
}

@media (min-width: 1920px) {
  .opacity-track {
    height: 44px;
  }
}

.opacity-handle {
  position: absolute;
  left: calc(100% - 78px); /* Start at 100% */
  width: 78px;
  height: 36px;
  background: #158C05 !important;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.2s ease;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .opacity-handle {
    width: 70px;
    height: 32px;
    left: calc(100% - 70px);
  }
}

@media (min-width: 1920px) {
  .opacity-handle {
    width: 96px;
    height: 44px;
    left: calc(100% - 96px);
  }
}

.opacity-handle:hover {
  box-shadow: 0 2px 8px rgba(21, 140, 5, 0.3);
}

.opacity-handle:active {
  cursor: grabbing;
}

.opacity-value {
  font-family: 'Fira Mono', monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: white;
  z-index: 1;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .opacity-value {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (min-width: 1920px) {
  .opacity-value {
    font-size: 18px;
    line-height: 24px;
  }
}

.grip-left,
.grip-right {
  position: absolute;
  top: 14px;
  width: 5px;
  height: 8px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .grip-left,
  .grip-right {
    top: 12px;
  }
}

@media (min-width: 1920px) {
  .grip-left,
  .grip-right {
    top: 17px;
    width: 6px;
    height: 10px;
  }
}

.grip-left {
  left: 8px;
}

@media (min-width: 1920px) {
  .grip-left {
    left: 10px;
  }
}

.grip-right {
  right: 8px;
}

@media (min-width: 1920px) {
  .grip-right {
    right: 10px;
  }
}

/* Offset - Joystick and Coordinates */
.deviation-border-container {
  position: relative;
  border-radius: 8px;
  padding: 10px;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .deviation-border-container {
    padding: 8px;
  }
}

@media (min-width: 1920px) {
  .deviation-border-container {
    padding: 12px;
  }
}

.deviation-border-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.deviation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
}

.deviation-joystick {
  position: relative;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  overflow: visible;
  /* Safari-specific fixes for shadow overflow */
  -webkit-mask-image: none;
  mask-image: none;
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

@media (min-width: 992px) and (max-width: 1199px) {
  .deviation-joystick {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 1920px) {
  .deviation-joystick {
    width: 132px;
    height: 132px;
  }
}

/* Joystick background - always fills container */
.joystick-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 108px;
  height: 108px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.06));
  overflow: visible;
  /* Safari fixes for shadow clipping */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .joystick-background {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 1920px) {
  .joystick-background {
    width: 132px;
    height: 132px;
  }
}

/* Joystick shadow states */
.joystick-background[data-state="default"] {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.06));
}

.joystick-background[data-state="up"] {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.06));
}

.joystick-background[data-state="down"] {
  filter: drop-shadow(0 -2px 10px rgba(0, 0, 0, 0.06));
}

.joystick-background[data-state="left"] {
  filter: drop-shadow(-2px 0 10px rgba(0, 0, 0, 0.06));
}

.joystick-background[data-state="right"] {
  filter: drop-shadow(2px 0 10px rgba(0, 0, 0, 0.06));
}

/* Individual buttons positioned directly in joystick */
.joystick-button {
  position: absolute;
  cursor: pointer;
  overflow: visible; /* Allow shadows to extend beyond button bounds */
}

.joystick-button .button-svg {
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  overflow: visible; /* Allow SVG filters to extend beyond viewBox */
}

/* Origin button - 32px for 108x108 (center 54,54), 40px for 132x132 (center 66,66), 28px for 96x96 (center 48,48) */
.joystick-button[data-button="origin"] {
  left: 38px; /* 54 - 16 = 38 */
  top: 38px; /* 54 - 16 = 38 */
  width: 32px;
  height: 32px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .joystick-button[data-button="origin"] {
    left: 34px; /* 48 - 14 = 34 */
    top: 34px; /* 48 - 14 = 34 */
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 1920px) {
  .joystick-button[data-button="origin"] {
    left: 46px; /* 66 - 20 = 46 */
    top: 46px; /* 66 - 20 = 46 */
    width: 40px;
    height: 40px;
  }
}

/* Down button - 24px for 108x108 (center horizontally at 54), 30px for 132x132 (center horizontally at 66), 21px for 96x96 (center horizontally at 48) */
.joystick-button[data-button="down"] {
  left: 42px; /* 54 - 12 = 42 */
  top: 78px; /* center at y=90: 90 - 12 = 78 */
  width: 24px;
  height: 24px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .joystick-button[data-button="down"] {
    left: 37px; /* 48 - 10.5 ≈ 37 */
    top: 69px; /* center at y=80: 80 - 10.5 ≈ 69 */
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 1920px) {
  .joystick-button[data-button="down"] {
    left: 51px; /* 66 - 15 = 51 */
    top: 95px; /* center at y=110: 110 - 15 = 95 */
    width: 30px;
    height: 30px;
  }
}

/* Left button - 24px for 108x108 (center vertically at 54), 30px for 132x132 (center vertically at 66), 21px for 96x96 (center vertically at 48) */
.joystick-button[data-button="left"] {
  left: 6px; /* center at x=18: 18 - 12 = 6 */
  top: 42px; /* 54 - 12 = 42 */
  width: 24px;
  height: 24px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .joystick-button[data-button="left"] {
    left: 5px; /* center at x=16: 16 - 10.5 ≈ 5 */
    top: 37px; /* 48 - 10.5 ≈ 37 */
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 1920px) {
  .joystick-button[data-button="left"] {
    left: 7px; /* center at x=22: 22 - 15 = 7 */
    top: 51px; /* 66 - 15 = 51 */
    width: 30px;
    height: 30px;
  }
}

/* Right button - 24px for 108x108 (center vertically at 54), 30px for 132x132 (center vertically at 66), 21px for 96x96 (center vertically at 48) */
.joystick-button[data-button="right"] {
  left: 78px; /* center at x=90: 90 - 12 = 78 */
  top: 42px; /* 54 - 12 = 42 */
  width: 24px;
  height: 24px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .joystick-button[data-button="right"] {
    left: 69px; /* center at x=80: 80 - 10.5 ≈ 69 */
    top: 37px; /* 48 - 10.5 ≈ 37 */
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 1920px) {
  .joystick-button[data-button="right"] {
    left: 95px; /* center at x=110: 110 - 15 = 95 */
    top: 51px; /* 66 - 15 = 51 */
    width: 30px;
    height: 30px;
  }
}

/* Up button - 24px for 108x108 (center horizontally at 54), 30px for 132x132 (center horizontally at 66), 21px for 96x96 (center horizontally at 48) */
.joystick-button[data-button="up"] {
  left: 42px; /* 54 - 12 = 42 */
  top: 6px; /* center at y=18: 18 - 12 = 6 */
  width: 24px;
  height: 24px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .joystick-button[data-button="up"] {
    left: 37px; /* 48 - 10.5 ≈ 37 */
    top: 5px; /* center at y=16: 16 - 10.5 ≈ 5 */
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 1920px) {
  .joystick-button[data-button="up"] {
    left: 51px; /* 66 - 15 = 51 */
    top: 7px; /* center at y=22: 22 - 15 = 7 */
    width: 30px;
    height: 30px;
  }
}

/* Button gradient transitions on hover and press */
/* Origin button icon opacity: 100% by default (when screens are offset), 20% when screens are centered */
.button-icon-origin {
  opacity: 1;
}

/* When screens are centered, origin icon is 20% opacity and effects are disabled */
.deviation-joystick.joystick-centered .button-icon-origin {
  opacity: 0.2;
}

/* Hover and active effects only work when screens are NOT centered */
.deviation-joystick:not(.joystick-centered) .joystick-button[data-button="origin"]:hover .button-circle {
  fill: url(#button-gradient-origin-hover);
}
.deviation-joystick:not(.joystick-centered) .joystick-button[data-button="origin"]:active .button-circle {
  fill: url(#button-gradient-origin-press);
}
.deviation-joystick:not(.joystick-centered) .joystick-button[data-button="origin"]:active .button-icon-origin {
  transform: translateY(1px);
}

/* Cursor styles for Origin button - only on hover */
.deviation-joystick:not(.joystick-centered) .joystick-button[data-button="origin"]:hover {
  cursor: pointer;
}
.deviation-joystick.joystick-centered.show-disabled-cursor .joystick-button[data-button="origin"]:hover {
  cursor: not-allowed;
}

.joystick-button[data-button="down"]:hover .button-circle {
  fill: url(#button-gradient-origin-hover);
}
.joystick-button[data-button="down"]:active .button-circle {
  fill: url(#button-gradient-origin-press);
}

.joystick-button[data-button="left"]:hover .button-circle {
  fill: url(#button-gradient-origin-hover);
}
.joystick-button[data-button="left"]:active .button-circle {
  fill: url(#button-gradient-origin-press);
}

.joystick-button[data-button="right"]:hover .button-circle {
  fill: url(#button-gradient-origin-hover);
}
.joystick-button[data-button="right"]:active .button-circle {
  fill: url(#button-gradient-origin-press);
}

.joystick-button[data-button="up"]:hover .button-circle {
  fill: url(#button-gradient-origin-hover);
}
.joystick-button[data-button="up"]:active .button-circle {
  fill: url(#button-gradient-origin-press);
}

/* Coordinates Display */
.deviation-coordinates {
  position: relative;
  width: 108px;
  height: 108px;
  border: 0.5px solid rgba(119, 31, 233, 0.2);
  border-radius: 5px;
  overflow: visible;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .deviation-coordinates {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 1920px) {
  .deviation-coordinates {
    width: 132px;
    height: 132px;
  }
}

/* Grid pattern */
.coord-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 108px;
  height: 108px;
  pointer-events: none;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .coord-grid {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 1920px) {
  .coord-grid {
    width: 132px;
    height: 132px;
  }
}

/* Axes */
.coord-axis {
  position: absolute;
  pointer-events: none;
}

.coord-y {
  left: 54px;
  top: 0;
  width: 1px;
  height: 108px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .coord-y {
    left: 48px;
    height: 96px;
  }
}

@media (min-width: 1920px) {
  .coord-y {
    left: 66px;
    width: 1px;
    height: 132px;
  }
}

.coord-x {
  left: 0;
  top: 54px;
  width: 108px;
  height: 1px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .coord-x {
    top: 48px;
    width: 96px;
  }
}

@media (min-width: 1920px) {
  .coord-x {
    top: 66px;
    width: 132px;
    height: 1px;
  }
}

/* Draggable coordinate box */
.coord-box {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 48px;
  height: 48px;
  background: #F9FBFF;
  border: 0.5px solid #CAC7C7;
  border-radius: 4px;
  padding: 1px 5px 3px;
  font-family: 'Fira Sans', sans-serif;
  font-size: 11px;
  line-height: 15px;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  box-sizing: border-box;
  white-space: nowrap;
}

.coord-box:active {
  cursor: grabbing;
}

/* Active state when coordinates are not zero */
.coord-box.active {
  background: #158C05 !important;
  border: none !important;
  color: white !important;
}

.coord-box.active > div {
  color: white !important;
}

.coord-box > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.coord-box.smooth-return {
  transition: left 0.3s ease-out, top 0.3s ease-out;
}

@media (min-width: 1920px) {
  .coord-box {
    left: 36.67px;
    top: 36.67px;
    width: 58.67px;
    height: 58.67px;
    padding: 2px 7px 4px;
    font-size: 13px;
    line-height: 18px;
  }
}

/* Keep legacy coord-value for compatibility */
.coord-value {
  display: none;
}

/* ============================================
   MOBILE CONTROLS (≤767px)
   ============================================ */

/* Mobile controls container */
.mobile-controls {
  display: none; /* Hidden by default, shown on mobile */
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10001; /* Above tutorial scrim but below tooltip */
  pointer-events: none; /* Container doesn't block clicks */
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.mobile-controls.show {
  opacity: 1;
}

/* Show mobile controls on all screens ≤991px */
@media (max-width: 991px) {
  .mobile-controls {
    display: block;
  }
  .controls-panel {
    display: none !important;
  }
}

/* Left column (Overlay + Opacity) */
.mobile-left-column {
  position: fixed;
  left: 25px;
  /* top set by JavaScript */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: auto; /* Allow clicks on controls */
  touch-action: none; /* Prevent page scroll in this area */
  /* Note: position relative not needed as children with position: absolute will position relative to this fixed parent */
}

/* Right column (Navigation + Coordinates) */
.mobile-right-column {
  position: fixed;
  right: 25px;
  /* top set by JavaScript */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px; /* Gap between navigation group and coordinates - matches left column */
  pointer-events: auto; /* Allow clicks on controls */
  touch-action: none; /* Prevent page scroll in this area */
}

/* Navigation buttons group */
.mobile-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap - dividers instead */
}

/* For tablet (768-991px): use same layout as mobile, center controls */
@media (min-width: 768px) and (max-width: 991px) {
  /* Animation icons and perspective lines will fade out smoothly via JavaScript after dialog action */

  /* Center controls in space between animation and grid edges */
  /* Grid is 12 columns = 720px, left edge is calc((100vw - 720px) / 2) */
  /* Position will be set by JavaScript based on animation container */
}

/* For mobile (≤767px): controls on sides, hide icons */
@media (max-width: 767px) {
  .mobile-left-column {
    left: 25px;
  }
  .mobile-right-column {
    right: 25px;
  }
  /* Hide animation icons and perspective lines on mobile */
  .left-animation-icon,
  .right-animation-icon {
    display: none !important;
  }

  .perspective-container {
    display: none !important;
  }
}

/* Mobile button base */
.mobile-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation; /* Disable double-tap zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Overlay Style buttons */
.mobile-overlay-control {
  border: 0.5px solid #771FE9;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.mobile-overlay-btn {
  background: transparent;
  border: none;
  padding: 12px 7px;
  position: relative;
}

.mobile-overlay-btn.active {
  background: #771FE9;
}

/* Horizontal dividers between non-active buttons */
.mobile-overlay-btn:not(.active) + .mobile-overlay-btn:not(.active)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 7px;
  right: 7px;
  height: 1px;
  background: #771FE9;
  opacity: 0.2;
}

.mobile-overlay-btn svg {
  width: 21.6px;
  height: 21.6px;
}

/* Icon colors based on state */
.mobile-overlay-btn[data-mode="normal"] svg path {
  fill: #771FE9; /* Default: purple */
}

.mobile-overlay-btn[data-mode="normal"].active svg path {
  fill: white; /* Active: white */
}

.mobile-overlay-btn[data-mode="difference"] svg path,
.mobile-overlay-btn[data-mode="multiply"] svg path {
  fill: #771FE9; /* Default: purple */
}

.mobile-overlay-btn[data-mode="difference"].active svg path,
.mobile-overlay-btn[data-mode="multiply"].active svg path {
  fill: white; /* Active: white */
}

/* Vertical Opacity Slider */
.mobile-opacity-slider {
  position: relative;
  width: 48px;
  height: 144px;
  background: linear-gradient(to top, rgba(242, 243, 245, 0) 0%, #F2F3F5 100%);
  border: 0.5px solid #CAC7C7;
  border-radius: 8px;
  box-sizing: border-box;
}

.mobile-opacity-handle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 48px;
  background: #158C05 !important;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
}

.mobile-opacity-handle:active {
  cursor: grabbing;
}

.mobile-opacity-value {
  font-family: 'Fira Mono', monospace;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 22px;
  color: white;
  z-index: 1;
}

.mobile-grip {
  position: absolute;
  width: 14.4px;
  height: 4.5px;
}

.mobile-grip.top {
  top: 4px;
  left: 16px;
}

.mobile-grip.bottom {
  bottom: 4px;
  left: 16px;
}

/* Tutorial Help Icon (Mobile/Tablet) */
.mobile-tutorial-help-icon {
  position: absolute; /* Remove from flow to not affect column centering */
  bottom: -56px; /* 16px gap below slider */
  left: 50%;
  transform: translateX(-50%);
  width: 40px; /* Touch target */
  height: 40px; /* Touch target */
  min-width: 40px;
  min-height: 40px;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 6px; /* (40 - 28) / 2 = 6px padding for centering 28px icon */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-tutorial-help-icon svg {
  width: 28px;
  height: 28px;
  pointer-events: none; /* Prevent hover triggers on SVG */
}

.mobile-tutorial-help-icon:active {
  opacity: 0.7;
}

.mobile-tutorial-help-icon:focus {
  outline: none;
  box-shadow: none;
}

/* Navigation buttons */
.mobile-nav-btn {
  background: white;
  border: 0.5px solid #CAC7C7;
  border-radius: 0; /* Default: no radius */
  transition: background 0.15s ease;
  position: relative;
}

/* SVG icons need to be above the ::after background */
.mobile-nav-btn svg {
  position: relative;
  z-index: 1;
}

/* Shift each icon 1px in its direction */
.mobile-nav-btn[data-dir="left"] svg {
  transform: translateX(-1px);
}

.mobile-nav-btn[data-dir="right"] svg {
  transform: translateX(1px);
}

.mobile-nav-btn[data-dir="up"] svg {
  transform: translateY(-1px);
}

.mobile-nav-btn[data-dir="down"] svg {
  transform: translateY(1px);
}

/* Horizontal dividers between buttons (not the first one) */
.mobile-nav-btn:not([data-dir="up"])::before {
  content: '';
  position: absolute;
  top: 0;
  left: 7px;
  right: 7px;
  height: 0.5px;
  background: #CAC7C7;
  opacity: 0.5;
}

/* Active state - inner rounded area */
.mobile-nav-btn::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: transparent;
  border-radius: 6px;
  transition: background 0.15s ease;
  pointer-events: none;
  z-index: 0; /* Behind the icon */
}

.mobile-nav-btn:active::after {
  background: #F2F3F5;
}

.mobile-nav-btn:active {
  background: white; /* Override - keep white background */
}

/* First button (Up) - top corners rounded, top+left+right borders */
.mobile-nav-btn[data-dir="up"] {
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

/* Middle buttons (Down, Origin, Right) - only left and right borders */
.mobile-nav-btn[data-dir="down"],
.mobile-nav-btn[data-dir="origin"],
.mobile-nav-btn[data-dir="right"] {
  border-top: none;
  border-bottom: none;
}

/* Last button (Left) - bottom corners rounded, bottom+left+right borders */
.mobile-nav-btn[data-dir="left"] {
  border-radius: 0 0 8px 8px;
  border-top: none;
}

/* Arrow icon sizes */
.mobile-nav-btn[data-dir="up"] svg,
.mobile-nav-btn[data-dir="down"] svg {
  width: 14.4px;
  height: 9px;
}

.mobile-nav-btn[data-dir="left"] svg,
.mobile-nav-btn[data-dir="right"] svg {
  width: 9px;
  height: 14.4px;
}

.mobile-nav-btn[data-dir="origin"] svg {
  width: 25.2px;
  height: 25.2px;
}

/* Origin button opacity - 20% by default, 100% when not at center */
.mobile-nav-btn[data-dir="origin"] svg path {
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

.mobile-nav-btn[data-dir="origin"].not-at-center svg path {
  opacity: 1;
}

/* Coordinates display - X and Y together */
.mobile-coordinates {
  width: 48px;
  height: 48px;
  background: #E3EAE4; /* Page background color */
  border: 0.5px solid #CAC7C7;
  border-radius: 8px; /* Fully rounded */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
}

.mobile-coordinates div {
  font-family: 'Fira Mono', monospace;
  font-weight: 400;
  font-size: 9px;
  line-height: 11px;
  text-align: center;
  color: #771FE9;
}

/* Active state when coordinates are not zero */
.mobile-coordinates.active {
  background: #158C05 !important;
  border: none !important;
}

.mobile-coordinates.active div {
  color: white !important;
}

/* ============================================
   DEMO DIALOG
   ============================================ */
/* Figma Screenshot: 220 × 476.947 */
/* Dialog in Figma: left 13px (5.91%), top 320.32px (67.16%), width 194px (88.18%), height 74px (15.51%) */

@keyframes dialogBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.03);
  }
  75% {
    transform: scale(0.98);
  }
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
}

.demo-dialog {
  position: absolute;
  left: 5.91%;
  top: 67.16%;
  width: 88.18%;
  height: 15.51%;
  background: #2c2c2c;
  opacity: 0;
  border-radius: calc(10px * var(--scale-factor, 1));
  z-index: 50;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: left 0.3s ease-out 0.3s, width 0.3s ease-out 0.3s, border-radius 0.3s ease-out 0.3s;
}

.demo-dialog:not(.show) .demo-dialog-content,
.demo-dialog:not(.show) .demo-dialog-buttons {
  opacity: 0;
}

.demo-dialog.show {
  animation: dialogBounceIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
  pointer-events: auto;
}

.demo-dialog.collapsed {
  left: 0;
  width: calc(19.8px * var(--scale-factor, 1));
  border-radius: 0 calc(10px * var(--scale-factor, 1)) calc(10px * var(--scale-factor, 1)) 0;
  justify-content: center;
  align-items: center;
  transition: left 0.3s ease-out 0s, width 0.3s ease-out 0s, border-radius 0.3s ease-out 0s;
  pointer-events: auto;
}

.demo-dialog.collapsed .demo-dialog-content,
.demo-dialog.collapsed .demo-dialog-buttons {
  pointer-events: none;
}



.demo-dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease-out 0.5s;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.demo-dialog.collapsed .demo-dialog-content {
  opacity: 0;
  transition: opacity 0.3s ease-out 0s;
}

.demo-dialog-text {
  color: white;
  font-family: 'Fira Sans', sans-serif;
  font-size: calc(13px * var(--scale-factor, 1));
  font-weight: 400;
  line-height: calc(18px * var(--scale-factor, 1));
  text-align: center;
  margin: 0;
  padding: 0 calc(10.5px * var(--scale-factor, 1));
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.demo-dialog-buttons {
  display: flex;
  border-top: calc(0.5px * var(--scale-factor, 1)) solid rgba(213, 213, 213, 0.5);
  width: 100%;
  height: calc(36px * var(--scale-factor, 1));
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.3s ease-out 0.5s;
}

.demo-dialog.collapsed .demo-dialog-buttons {
  opacity: 0;
  transition: opacity 0.3s ease-out 0s;
}

.demo-dialog-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 0, 0, 0.001);
  color: white;
  font-family: 'Fira Sans', sans-serif;
  font-size: calc(12px * var(--scale-factor, 1));
  font-weight: 500;
  line-height: calc(16px * var(--scale-factor, 1));
  text-align: center;
  cursor: pointer;
  -webkit-cursor: pointer;
  transition: background-color 0.2s ease;
  touch-action: manipulation; /* Disable double-tap zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  pointer-events: auto;
}

.demo-dialog.collapsed .demo-dialog-button {
  pointer-events: none;
  cursor: default;
  -webkit-cursor: default;
}

.demo-dialog-button.secondary {
  border-right: calc(0.5px * var(--scale-factor, 1)) solid rgba(213, 213, 213, 0.5);
}

.demo-dialog:not(.collapsed) .demo-dialog-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  -webkit-cursor: pointer !important;
}

.demo-dialog:not(.collapsed) .demo-dialog-button:active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  -webkit-cursor: pointer !important;
}

.demo-dialog.collapsed .demo-dialog-button {
  background-color: transparent !important;
  cursor: default !important;
  -webkit-cursor: default !important;
  pointer-events: none !important;
}

.demo-dialog-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out 0.3s, background-color 0.2s ease;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 0 calc(10px * var(--scale-factor, 1)) calc(10px * var(--scale-factor, 1)) 0;
}

.demo-dialog.collapsed .demo-dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: button;
  background: rgba(0, 0, 0, 0.2);
  animation: iconPulse 2.5s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    background-color: rgba(0, 0, 0, 0.2);
  }
  50% {
    background-color: rgba(119, 31, 233, 0.4);
  }
}

.demo-dialog.collapsed .demo-dialog-icon:hover {
  background-color: rgba(119, 31, 233, 0.5);
  cursor: pointer;
  animation: none;
}

.demo-dialog.collapsed .demo-dialog-icon:active {
  background-color: rgba(119, 31, 233, 0.6);
  cursor: pointer;
  animation: none;
}

.demo-dialog:not(.collapsed) .demo-dialog-icon {
  transition: opacity 0.5s ease-out 0.3s;
  opacity: 0;
  pointer-events: none;
}

.demo-dialog-icon svg {
  width: calc(6px * var(--scale-factor, 1));
  height: calc(16px * var(--scale-factor, 1));
}

.demo-dialog.collapsed .demo-dialog-icon svg {
  animation: iconSvgPulse 2.5s ease-in-out infinite;
}

@keyframes iconSvgPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.demo-dialog.collapsed .demo-dialog-icon:hover svg {
  animation: none;
  opacity: 1;
}

/* ============================================
   SCRIM (Light overlay)
   ============================================ */
.demo-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 49;
  border-radius: calc(32px * var(--scale-factor, 1));
}

.demo-scrim.show {
  animation: scrimFadeIn 1.2s ease-out 1s forwards;
}

@keyframes scrimFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Mobile: Dialog positioned in physical viewport, completely independent from animation */
@media (max-width: 767px) {
  /* Reset all inherited styles and position in physical viewport */
  .demo-dialog {
    position: fixed;
    z-index: 9999;
    background: #2c2c2c;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 132px;
    transition: width 0.3s ease-out, border-radius 0.3s ease-out, padding 0.3s ease-out;
  }

  .demo-dialog.show {
    opacity: 0.95;
    pointer-events: auto;
    animation: dialogBounceIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0s forwards;
  }

  /* Expanded state - center horizontally, near bottom */
  .demo-dialog:not(.collapsed) {
    width: 320px;
    height: 132px;
    padding: 18px 16px;
    border-radius: 12px;
  }

  /* Collapsed state - left edge, SAME HEIGHT */
  .demo-dialog.collapsed {
    width: 25px;
    height: 132px;
    padding: 0;
    border-radius: 0 12px 12px 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  /* Ensure collapsed state is also visible only when .show is present */
  .demo-dialog.show.collapsed {
    opacity: 0.95;
  }

  /* Content */
  .demo-dialog-content {
    padding: 8px 0;
    min-height: 40px;
  }

  .demo-dialog-text {
    font-size: 20px;
    line-height: 27px;
    text-align: center;
  }

  /* Buttons */
  .demo-dialog-buttons {
    height: 54px;
    border-top: 0.5px solid rgba(213, 213, 213, 0.5);
    margin: 12px -16px -18px -16px;
    width: calc(100% + 32px);
  }

  .demo-dialog-button {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
  }

  .demo-dialog-button.secondary {
    border-right: 0.5px solid rgba(213, 213, 213, 0.5);
  }

  /* Collapsed icon */
  .demo-dialog-icon {
    border-radius: 0 12px 12px 0;
  }

  .demo-dialog-icon svg {
    width: 6px;
    height: 16px;
    transform: scale(1.05);
  }

  /* Scrim covers entire physical viewport */
  .demo-scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
  }

  .demo-scrim.show {
    animation: scrimFadeIn 1.2s ease-out 0s forwards;
    pointer-events: auto;
  }
}

/* ============================================
   FULLSCREEN DIMMING (Controls Mode)
   ============================================ */
.controls-dimming {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 9997; /* Below controls (9998) */
  transition: opacity 0.15s ease-out;
}

.controls-dimming.show {
  opacity: 1;
}

/* ============================================
   CONTROL TOOLTIPS
   ============================================ */
.control-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(44, 44, 44, 0.95);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 6px;
  font-family: 'Fira Sans', sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: white;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0s ease-out;
}

.control-tooltip.show {
  opacity: 1;
}

/* Tooltip arrow pointing down */
.control-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(44, 44, 44, 0.95);
}

/* OK Button (replaces opacity slider tooltip) */
.ok-button {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #771FE9;
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  font-family: 'Fira Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: white;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0s ease-out, background 0.2s ease;
  cursor: pointer;
  -webkit-cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.ok-button.show {
  opacity: 1;
  pointer-events: auto;
}

.ok-button:hover {
  background: #5C0FBF;
}

.ok-button:active {
  transform: translateX(-50%) scale(0.95);
}

/* ============================================
   TUTORIAL SYSTEM
   ============================================ */

/* Tutorial scrim - dark overlay */
.tutorial-scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(31, 31, 31, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  transition: opacity 0.3s ease-out;
}

.tutorial-scrim.show {
  opacity: 1;
  pointer-events: none; /* Keep none to allow screen drag on mobile/tablet */
}

/* Tutorial control outline - highlights the control being explained */
.tutorial-outline {
  position: fixed;
  border: 2px solid white;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  z-index: 10001;
  transition: all 0.3s ease-out;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.tutorial-outline.show {
  opacity: 1;
}

/* Tutorial tooltip */
.tutorial-tooltip {
  position: fixed;
  background: white;
  border-radius: 8px;
  padding: 16px; /* 16px all sides */
  opacity: 0;
  pointer-events: none;
  z-index: 10002;
  transition: opacity 0.3s ease-out, left 0.4s ease-out, top 0.4s ease-out, transform 0.4s ease-out;
  max-width: 360px; /* 1.5x wider (240px * 1.5 = 360px) */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Mobile/Tablet (≤991px): keep original width */
@media (max-width: 991px) {
  .tutorial-tooltip {
    max-width: 240px;
  }
}

.tutorial-tooltip.show {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Same gap between text and footer */
}

.tutorial-tooltip-text {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300; /* Reduced by 100: 400 → 300 */
  font-size: 16px; /* Mobile/Tablet: 16px (default) */
  line-height: 22px;
  color: #676767;
  white-space: pre-line; /* Support line breaks in text */
  margin: 0;
}

/* Tablet-Desktop (992-1199px): 16px */
@media (min-width: 992px) and (max-width: 1199px) {
  .tutorial-tooltip-text {
    font-size: 16px;
    line-height: 22px;
  }
}

/* Desktop (≥1200px): 18px */
@media (min-width: 1200px) {
  .tutorial-tooltip-text {
    font-size: 18px;
    line-height: 26px;
  }
}

.tutorial-tooltip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.tutorial-progress {
  font-family: 'Inter', sans-serif;
  font-weight: 500; /* Reduced by 100: 600 → 500 */
  font-size: 15px; /* 1px less than text (16px - 1px) */
  color: #676767;
}

/* Desktop (≥1200px): 17px (1px less than 18px) */
@media (min-width: 1200px) {
  .tutorial-progress {
    font-size: 17px;
  }
}

.tutorial-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tutorial-skip {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px; /* 1px less than text (16px - 1px) */
  color: #676767;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.tutorial-skip:hover {
  color: #2C2C2C;
}

/* Desktop (≥1200px): 17px (1px less than 18px) */
@media (min-width: 1200px) {
  .tutorial-skip {
    font-size: 17px;
  }
}

.tutorial-next {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px; /* 1px less than text (16px - 1px) */
  color: #771FE9;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

/* Desktop (≥1200px): 17px (1px less than 18px) */
@media (min-width: 1200px) {
  .tutorial-next {
    font-size: 17px;
  }
}

.tutorial-next:hover {
  color: #5C0FBF;
}

/* Tutorial tooltip arrow */
.tutorial-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  transition: left 0.4s ease-out, right 0.4s ease-out, top 0.4s ease-out, bottom 0.4s ease-out, transform 0.4s ease-out, border-color 0.4s ease-out;
}

/* Arrow pointing left (tooltip on the right of control) */
.tutorial-arrow.left {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: white;
}

/* Arrow pointing right (tooltip on the left of control) */
.tutorial-arrow.right {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: white;
}

/* Arrow pointing up (tooltip below control) */
.tutorial-arrow.top {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: white;
}

/* Arrow pointing down (tooltip above control) */
.tutorial-arrow.bottom {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: white;
}

/* Tutorial on mobile - keep it visible */

/* ============================================
   TUTORIAL MODE - Outline Style for Real Controls
   ============================================ */

/* Hide tutorial outline rectangle */
.tutorial-outline {
  display: none !important;
}

/* All control sections - 50% opacity by default and disabled */
.controls-panel.tutorial-mode .control-section {
  background: transparent !important;
  border: none !important;
  opacity: 0.5;
  pointer-events: none; /* Disable interaction on inactive sections */
  transition: opacity 0.3s ease;
}

/* Active control section (being explained) - full opacity and enabled */
.controls-panel.tutorial-mode .control-section.tutorial-active {
  opacity: 1 !important;
  pointer-events: auto !important; /* Enable interaction on active section */
}

.controls-panel.tutorial-mode .control-headline {
  color: white !important;
}

/* Segmented Control in tutorial mode */
.controls-panel.tutorial-mode .segmented-control {
  background: transparent !important;
  border: 1px solid white !important;
}

.controls-panel.tutorial-mode .segment-button {
  background: transparent !important;
  color: white !important;
  border: none !important;
  padding-top: 5px !important; /* Поднять текст на 1px */
  padding-bottom: 7px !important;
}

.controls-panel.tutorial-mode .segment-button.active {
  background: white !important;
  color: rgba(31, 31, 31, 0.8) !important;
  border: 1px solid white !important;
  padding-top: 6px !important; /* Вернуть обычное выравнивание для active */
  padding-bottom: 6px !important;
}


/* Opacity track in tutorial mode */
.controls-panel.tutorial-mode .opacity-track {
  background: transparent !important;
  border: 1px solid white !important;
}

.controls-panel.tutorial-mode .opacity-handle {
  background: white !important;
  border: 1px solid white !important;
}

.controls-panel.tutorial-mode .opacity-value {
  color: rgba(31, 31, 31, 0.8) !important;
}

/* Grip icons visible in tutorial mode */
.controls-panel.tutorial-mode .grip-left,
.controls-panel.tutorial-mode .grip-right {
  display: block !important;
  opacity: 1 !important;
}

.controls-panel.tutorial-mode .grip-left path,
.controls-panel.tutorial-mode .grip-right path {
  fill: rgba(31, 31, 31, 0.8) !important;
}


/* Deviation container in tutorial mode */
.controls-panel.tutorial-mode .deviation-border-container svg {
  stroke: white !important;
}

.controls-panel.tutorial-mode .deviation-joystick {
  background: transparent !important;
  border: none !important;
}

/* Show joystick buttons with white icons */
.controls-panel.tutorial-mode .joystick-button {
  opacity: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none !important;
}

.controls-panel.tutorial-mode .joystick-button .button-circle {
  display: none !important;
}

.controls-panel.tutorial-mode .joystick-button .button-icon {
  fill: white !important;
  opacity: 1 !important;
}

.controls-panel.tutorial-mode .joystick-button .button-icon-origin {
  fill: white !important;
  stroke: none !important;
}


/* Coordinates in tutorial mode */
.controls-panel.tutorial-mode .deviation-coordinates {
  background: transparent !important;
  border: 1px solid white !important;
}

/* Show grid and axis in tutorial mode with 50% opacity */
.controls-panel.tutorial-mode .coord-grid,
.controls-panel.tutorial-mode .coord-axis {
  opacity: 0.5 !important;
  display: block !important;
}

.controls-panel.tutorial-mode .coord-grid line {
  stroke: white !important;
}

.controls-panel.tutorial-mode .coord-axis line {
  stroke: white !important;
}

/* Coord box - white background with dark text */
.controls-panel.tutorial-mode .coord-box {
  background: white !important;
  color: rgba(31, 31, 31, 0.8) !important;
  opacity: 1 !important;
}

/* ============================================
   MOBILE TUTORIAL MODE (≤991px)
   ============================================ */

/* Base mobile tutorial mode - all elements at 50% opacity and disabled */
.mobile-controls.tutorial-mode .mobile-overlay-control,
.mobile-controls.tutorial-mode .mobile-opacity-slider,
.mobile-controls.tutorial-mode .mobile-right-column {
  opacity: 0.5;
  pointer-events: none; /* Disable interaction on inactive elements */
  transition: opacity 0.3s ease;
}

/* Active element - full opacity and enabled */
.mobile-controls.tutorial-mode .mobile-overlay-control.tutorial-active,
.mobile-controls.tutorial-mode .mobile-opacity-slider.tutorial-active,
.mobile-controls.tutorial-mode .mobile-right-column.tutorial-active {
  opacity: 1 !important;
  pointer-events: auto !important; /* Enable interaction on active element */
}

/* Overlay control in tutorial mode */
.mobile-controls.tutorial-mode .mobile-overlay-control {
  border: 1px solid white !important;
  background: transparent !important;
}

.mobile-controls.tutorial-mode .mobile-overlay-btn {
  background: transparent !important;
}

.mobile-controls.tutorial-mode .mobile-overlay-btn svg path {
  fill: white !important;
}

.mobile-controls.tutorial-mode .mobile-overlay-btn.active {
  background: white !important;
}

.mobile-controls.tutorial-mode .mobile-overlay-btn.active svg path {
  fill: rgba(31, 31, 31, 0.8) !important;
}

/* Show horizontal dividers in tutorial mode */
.mobile-controls.tutorial-mode .mobile-overlay-btn:not(.active) + .mobile-overlay-btn:not(.active)::before {
  display: block !important;
  background: white !important;
}

/* Opacity slider in tutorial mode */
.mobile-controls.tutorial-mode .mobile-opacity-slider {
  background: transparent !important;
  border: 1px solid white !important;
}

.mobile-controls.tutorial-mode .mobile-opacity-handle {
  background: white !important;
}

.mobile-controls.tutorial-mode .mobile-opacity-value {
  color: rgba(31, 31, 31, 0.8) !important;
}

.mobile-controls.tutorial-mode .mobile-grip path {
  fill: rgba(31, 31, 31, 0.8) !important;
}

/* Right column (navigation + coordinates) in tutorial mode */
.mobile-controls.tutorial-mode .mobile-nav-group {
  background: transparent !important;
}

.mobile-controls.tutorial-mode .mobile-nav-btn {
  background: transparent !important;
}

.mobile-controls.tutorial-mode .mobile-nav-btn svg path {
  fill: white !important;
}

/* Show vertical dividers in navigation buttons */
.mobile-controls.tutorial-mode .mobile-nav-btn:not([data-dir="up"])::before {
  display: block !important;
  background: white !important;
}

/* Origin button - 100% when right column active, 50% when inactive */
.mobile-controls.tutorial-mode .mobile-nav-btn[data-dir="origin"] svg path {
  opacity: 0.5 !important;
}

.mobile-controls.tutorial-mode .mobile-right-column.tutorial-active .mobile-nav-btn[data-dir="origin"] svg path {
  opacity: 1 !important;
}

/* Coordinates in tutorial mode */
.mobile-controls.tutorial-mode .mobile-coordinates {
  background: white !important;
  border: 1px solid white !important;
}

.mobile-controls.tutorial-mode .mobile-coordinates div {
  color: rgba(31, 31, 31, 0.8) !important;
}