:root {
  color-scheme: dark;
  --ink: #f7f8ff;
  --muted: #a5acc0;
  --panel: rgba(10, 11, 25, 0.94);
  --line: rgba(151, 126, 255, 0.28);
  --violet: #8358f5;
  --cyan: #42d4ff;
  --green: #4ce0a6;
  --amber: #f6b739;
  --screen-ratio: 1.7757296467;
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #030611;
}

body {
  color: var(--ink);
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  color: #050713;
  background: var(--cyan);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.product-page {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 50, 192, 0.14), transparent 34%),
    #030611;
}

.product-scroll {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 12px;
  scrollbar-color: rgba(94, 214, 255, 0.55) rgba(255, 255, 255, 0.04);
}

.product-canvas {
  position: relative;
  flex: 0 0 auto;
  width: min(calc(100vw - 24px), calc((100dvh - 24px) * var(--screen-ratio)));
  aspect-ratio: 1156 / 651;
  isolation: isolate;
  filter: drop-shadow(0 26px 70px rgba(0, 0, 0, 0.55));
}

.product-screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.3%;
  object-fit: contain;
  user-select: none;
  transition: opacity 150ms ease, transform 180ms ease;
}

.product-canvas.switching .product-screen {
  opacity: 0.36;
  transform: scale(0.998);
}

.workspace-hotspot,
.nav-hotspot,
.module-hotspot {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.workspace-hotspot {
  top: 8.8%;
  right: 0.4%;
  bottom: 0.6%;
  left: 14.6%;
  border-radius: 0 0 1.2% 0;
}

.workspace-hotspot:focus-visible {
  outline-offset: -5px;
}

.nav-hotspot {
  left: 1.8%;
  width: 11.8%;
  height: 4.4%;
  z-index: 4;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.nav-hotspot:hover,
.nav-hotspot:focus-visible {
  border-color: rgba(125, 92, 250, 0.58);
  background: rgba(111, 74, 231, 0.13);
  box-shadow: 0 0 0 3px rgba(94, 214, 255, 0.05);
}

.nav-hotspot.home { top: 13.9%; }
.nav-hotspot.learn { top: 18.5%; }
.nav-hotspot.prepare { top: 23.1%; }
.nav-hotspot.reviews { top: 27.7%; }
.nav-hotspot.field { top: 32.3%; }
.nav-hotspot.episodes { top: 40.1%; }
.nav-hotspot.distillery { top: 44.7%; }
.nav-hotspot.modules { top: 49.3%; }

.module-hotspot {
  z-index: 5;
  top: 3.1%;
  left: 76.2%;
  width: 13.2%;
  height: 4.5%;
}

.module-hotspot:hover,
.module-hotspot:focus-visible {
  border-color: rgba(142, 99, 255, 0.8);
  background: rgba(113, 72, 240, 0.1);
}

.focus-label {
  position: absolute;
  z-index: 6;
  left: 4%;
  top: 54%;
  padding: 8px 11px;
  border: 1px solid rgba(84, 211, 255, 0.45);
  border-radius: 8px;
  color: #dff9ff;
  background: rgba(5, 7, 20, 0.93);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
  font-size: clamp(8px, 0.72vw, 12px);
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.focus-label.visible {
  opacity: 1;
  transform: translateY(0);
}

.module-menu {
  position: absolute;
  z-index: 20;
  top: 8.5%;
  right: 3.3%;
  width: min(360px, 31%);
  padding: clamp(12px, 1.4vw, 20px);
  border: 1px solid rgba(139, 95, 246, 0.52);
  border-radius: 14px;
  background: rgba(9, 9, 22, 0.97);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(20px);
}

.panel-kicker {
  color: var(--cyan);
  font-size: clamp(8px, 0.68vw, 11px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.module-menu h2,
.screen-map h2 {
  margin: 5px 0 12px;
  font-size: clamp(15px, 1.3vw, 22px);
  line-height: 1.05;
}

.module-option {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.module-option:hover,
.module-option.selected {
  border-color: rgba(139, 95, 246, 0.72);
  background: rgba(117, 80, 219, 0.14);
}

.module-monogram {
  width: 31px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #c9bbff;
  background: rgba(125, 92, 246, 0.15);
  font-size: 11px;
  font-weight: 800;
}

.module-option strong,
.module-option small {
  display: block;
}

.module-option strong {
  font-size: clamp(9px, 0.77vw, 12px);
}

.module-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: clamp(7px, 0.61vw, 10px);
}

.module-state {
  color: var(--green);
  font-size: clamp(7px, 0.58vw, 9px);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.module-menu p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(7px, 0.65vw, 10px);
  line-height: 1.45;
}

.tour-dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 18px;
  display: grid;
  grid-template-columns: 44px minmax(190px, 270px) 44px;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(5, 7, 18, 0.88);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.dock-button,
.dock-status,
.share-button,
.close-button {
  border: 0;
  cursor: pointer;
}

.dock-button {
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #e9eaff;
  background: rgba(255, 255, 255, 0.055);
  font-size: 21px;
}

.dock-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dock-button.primary {
  background: linear-gradient(135deg, #7f52ef, #5bbff4);
  box-shadow: 0 8px 24px rgba(103, 86, 236, 0.34);
}

.dock-button:disabled {
  cursor: default;
  opacity: 0.32;
}

.dock-status {
  padding: 5px 10px 6px;
  border-radius: 12px;
  text-align: left;
  background: transparent;
}

.dock-status:hover {
  background: rgba(255, 255, 255, 0.045);
}

.dock-status span,
.dock-status strong,
.dock-status small {
  display: block;
}

.dock-live {
  color: var(--cyan);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dock-live i {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.dock-status strong {
  max-width: 240px;
  margin-top: 2px;
  overflow: hidden;
  color: #f8f8ff;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dock-status small {
  margin-top: 1px;
  color: #8f96aa;
  font-size: 8px;
}

.share-button {
  position: fixed;
  z-index: 30;
  top: 20px;
  right: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(151, 126, 255, 0.35);
  border-radius: 12px;
  color: #e7e2ff;
  background: rgba(5, 7, 18, 0.82);
  box-shadow: 0 13px 32px rgba(0, 0, 0, 0.32);
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(16px);
}

.share-button:hover {
  border-color: rgba(94, 214, 255, 0.65);
}

.screen-map {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  width: min(520px, 94vw);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid rgba(139, 95, 246, 0.42);
  background: rgba(7, 8, 20, 0.98);
  box-shadow: -26px 0 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(22px);
  animation: panel-in 180ms ease both;
}

@keyframes panel-in {
  from { transform: translateX(18px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.map-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 26px 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.close-button {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #d9dcf1;
  background: rgba(255, 255, 255, 0.06);
  font-size: 23px;
}

.map-list {
  overflow: auto;
  padding: 16px 20px 22px;
}

.map-group-title {
  margin: 15px 6px 8px;
  color: #9ba4bd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.map-card {
  width: 100%;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #eef0ff;
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.map-card:hover,
.map-card.active {
  border-color: rgba(117, 86, 242, 0.62);
  background: rgba(117, 86, 242, 0.09);
}

.map-card img {
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  object-fit: cover;
}

.map-card strong,
.map-card small {
  display: block;
}

.map-card strong {
  font-size: 12px;
  line-height: 1.25;
}

.map-card small {
  margin-top: 4px;
  color: #9ba2b8;
  font-size: 9px;
}

.map-number {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 800;
}

.map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #858da5;
  font-size: 9px;
}

.map-footer p {
  max-width: 260px;
  margin: 0;
  line-height: 1.35;
}

.map-footer a {
  flex: 0 0 auto;
  color: #d0c4ff;
  font-weight: 700;
  text-decoration: none;
}

.backdrop {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: rgba(0, 0, 8, 0.68);
  backdrop-filter: blur(4px);
}

.welcome-tip {
  position: fixed;
  z-index: 35;
  left: 22px;
  bottom: 20px;
  max-width: 340px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  padding: 14px 42px 14px 15px;
  border: 1px solid rgba(73, 211, 255, 0.34);
  border-radius: 15px;
  background: rgba(6, 9, 23, 0.92);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.welcome-tip.dismissed {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.welcome-tip button {
  position: absolute;
  top: 8px;
  right: 9px;
  border: 0;
  color: #b9c0d5;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.tip-dot {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
}

.welcome-tip strong {
  font-size: 12px;
}

.welcome-tip p {
  margin: 4px 0 0;
  color: #a8afc1;
  font-size: 10px;
  line-height: 1.4;
}

.toast {
  position: fixed;
  z-index: 80;
  top: 20px;
  left: 50%;
  padding: 10px 14px;
  border: 1px solid rgba(74, 221, 170, 0.42);
  border-radius: 10px;
  color: #dcfff2;
  background: rgba(5, 19, 17, 0.94);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.mobile-hint {
  display: none;
}

@media (hover: hover) {
  .tour-dock {
    opacity: 0.56;
  }

  .tour-dock:hover,
  .tour-dock:focus-within {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
}

@media (max-width: 820px) {
  body {
    overflow: auto;
  }

  .product-scroll {
    justify-content: flex-start;
    align-items: center;
    padding: 56px 12px 84px;
  }

  .product-canvas {
    width: 960px;
  }

  .mobile-hint {
    position: fixed;
    z-index: 31;
    top: 13px;
    left: 50%;
    display: block;
    padding: 8px 11px;
    border: 1px solid rgba(94, 214, 255, 0.28);
    border-radius: 999px;
    color: #b9eefd;
    background: rgba(5, 7, 18, 0.88);
    font-size: 9px;
    font-weight: 700;
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
  }

  .tour-dock {
    bottom: 10px;
    grid-template-columns: 42px minmax(170px, 1fr) 42px;
    width: min(360px, calc(100vw - 24px));
  }

  .share-button {
    top: auto;
    right: 12px;
    bottom: 83px;
    padding: 8px 10px;
    font-size: 9px;
  }

  .welcome-tip {
    left: 12px;
    right: 12px;
    bottom: 83px;
    max-width: none;
  }

  .module-menu {
    width: 330px;
  }
}

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