:root {
  --demo-teal: #7adbd1;
  --demo-teal-deep: #0b746c;
  --demo-orange: #d17955;
  --demo-surface: #182321;
  --demo-surface-raised: #202d2a;
  --demo-text: #f0f7f5;
  --demo-muted: #a5b4b0;
  --demo-line: rgba(255, 255, 255, .1);
}

html { background: #0b1412; }
.demo-body { min-width: 320px; min-height: 100vh; overflow-x: hidden; color: var(--demo-text); background: radial-gradient(circle at 48% 8%, rgba(19, 95, 91, .24), transparent 32rem), #0b1412; }
.demo-body button { color: inherit; }

.demo-site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1rem;
  padding: .8rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid var(--demo-line);
  background: rgba(11, 20, 18, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.demo-site-header nav { display: flex; align-items: center; gap: .65rem; }
.demo-site-header nav > a { color: #c6d2cf; font-size: .875rem; font-weight: 800; }
.demo-site-header nav > a:hover { color: var(--demo-teal); }
.demo-language,
.demo-reset-top {
  min-height: 42px;
  padding: .55rem .85rem;
  border: 1px solid var(--demo-line);
  border-radius: 999px;
  color: var(--demo-text);
  background: var(--demo-surface);
  font-size: .875rem;
  font-weight: 900;
  cursor: pointer;
}
.demo-language:hover,
.demo-reset-top:hover { border-color: rgba(122, 219, 209, .55); background: #213633; }

.demo-page { width: min(1220px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.demo-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.demo-intro h1 { max-width: 13ch; margin: .75rem 0 1rem; font-family: Georgia, serif; font-size: clamp(2.65rem, 5.6vw, 5.25rem); line-height: .96; letter-spacing: -.055em; }
.demo-intro > div > p:last-child { max-width: 64ch; margin: 0; color: #becbc7; font-size: 1.05rem; line-height: 1.65; }
.demo-live-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .72rem; border: 1px solid rgba(122, 219, 209, .4); border-radius: 999px; color: #c8f7f1; background: rgba(19, 95, 91, .22); font-size: .8rem; font-weight: 900; }
.demo-live-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-teal); box-shadow: 0 0 0 5px rgba(122, 219, 209, .12); }
.demo-trust-note { padding: 1.4rem; border: 1px solid rgba(122, 219, 209, .27); border-radius: 21px; background: rgba(24, 35, 33, .9); box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }
.demo-trust-note strong { display: block; margin-bottom: .4rem; color: #bff4ed; font-size: 1rem; }
.demo-trust-note p { margin: 0; color: #bac7c3; font-size: .9rem; line-height: 1.6; }

.demo-workspace { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(420px, 1.22fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.demo-guide { position: sticky; top: 104px; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--demo-line); border-radius: 24px; background: rgba(24, 35, 33, .92); box-shadow: 0 22px 65px rgba(0, 0, 0, .2); }
.demo-guide h2 { margin: .25rem 0 .85rem; font-family: Georgia, serif; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.04; letter-spacing: -.04em; }
.demo-guide > p:not(.eyebrow) { margin: 0; color: var(--demo-muted); font-size: 1rem; line-height: 1.55; }
.demo-progress { display: grid; gap: .55rem; margin: 1.5rem 0; padding: 0; list-style: none; counter-reset: demo-step; }
.demo-progress li { counter-increment: demo-step; }
.demo-progress button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .7rem; min-height: 48px; padding: .6rem .75rem; border: 1px solid transparent; border-radius: 14px; color: var(--demo-muted); background: transparent; font-size: .92rem; text-align: left; cursor: pointer; }
.demo-progress button::before { content: counter(demo-step, decimal-leading-zero); color: #71827d; font-size: .75rem; font-weight: 900; }
.demo-progress button::after { content: ""; width: 8px; height: 8px; border: 1px solid #65756f; border-radius: 50%; }
.demo-progress button:hover { color: var(--demo-text); background: rgba(255, 255, 255, .04); }
.demo-progress button.is-current { border-color: rgba(122, 219, 209, .3); color: var(--demo-text); background: rgba(19, 95, 91, .23); }
.demo-progress button.is-current::after { border-color: var(--demo-teal); background: var(--demo-teal); box-shadow: 0 0 0 4px rgba(122, 219, 209, .12); }
.demo-progress button.is-visited::before { color: var(--demo-teal); }
.demo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--demo-line); }
.demo-facts span { min-width: 0; display: flex; flex-direction: column; }
.demo-facts b { color: var(--demo-teal); font-family: Georgia, serif; font-size: 1.55rem; }
.demo-facts small { color: #8c9c97; font-size: .75rem; line-height: 1.25; }

.demo-explore { margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--demo-line); }
.demo-explore h3 { margin: 0 0 .75rem; font-size: .9rem; }
.demo-explore-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.demo-explore-buttons button { min-height: 38px; padding: .45rem .7rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: #b7c5c1; background: #202d2a; font-size: .78rem; font-weight: 800; cursor: pointer; }
.demo-explore-buttons button:hover,
.demo-explore-buttons button.is-current { border-color: rgba(122, 219, 209, .55); color: #d9faf5; background: rgba(19, 95, 91, .28); }

.demo-device-column { min-width: 0; }
.demo-device {
  width: min(430px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 9px solid #020706;
  border-radius: 43px;
  background: #000;
  box-shadow: 0 35px 110px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .13);
}
.demo-screen { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #0f1b18; outline: none; }
.demo-screen:focus-visible { box-shadow: inset 0 0 0 3px var(--demo-teal); }
.demo-screen > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.demo-hotspots { position: absolute; inset: 0; }
.demo-hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 2px solid rgba(139, 244, 232, .92);
  border-radius: 17px;
  color: #06231f;
  background: rgba(71, 210, 196, .12);
  box-shadow: 0 0 0 4px rgba(19, 95, 91, .2), 0 0 22px rgba(122, 219, 209, .42);
  cursor: pointer;
  animation: hotspot-pulse 2.2s ease-in-out infinite;
}
.demo-hotspot:hover,
.demo-hotspot:focus-visible { z-index: 6; border-color: #fff; background: rgba(122, 219, 209, .28); animation: none; }
.demo-hotspot-label { position: absolute; right: .35rem; bottom: .35rem; max-width: calc(100% - .7rem); padding: .3rem .48rem; overflow: hidden; border-radius: 999px; color: #06231f; background: rgba(173, 248, 239, .96); font-size: .7rem; font-weight: 900; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.demo-hotspot.is-nav { border-radius: 12px; background: rgba(71, 210, 196, .06); box-shadow: 0 0 0 2px rgba(19, 95, 91, .12); }
.demo-hotspot.is-nav .demo-hotspot-label { left: 50%; right: auto; bottom: calc(100% + .35rem); max-width: none; transform: translateX(-50%); }
.demo-hotspot.is-back { border-radius: 50%; }
.demo-hotspot.is-back .demo-hotspot-label { left: calc(100% + .35rem); right: auto; bottom: 50%; max-width: none; transform: translateY(50%); }

@keyframes hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(19, 95, 91, .18), 0 0 15px rgba(122, 219, 209, .25); }
  50% { box-shadow: 0 0 0 7px rgba(122, 219, 209, .18), 0 0 28px rgba(122, 219, 209, .52); }
}

.demo-controls { width: min(520px, 100%); display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; margin: 1.35rem auto 0; }
.demo-control { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 900; cursor: pointer; }
.demo-control.primary { border: 0; color: #effaf7; background: var(--demo-teal-deep); }
.demo-control.primary:hover { background: #0d8980; }
.demo-control.secondary { border: 1px solid var(--demo-line); color: #dce6e3; background: var(--demo-surface); }
.demo-control:disabled { cursor: not-allowed; opacity: .38; }
#demoStepStatus { margin: 0; color: #91a19d; font-size: .82rem; text-align: center; }
.demo-caption { margin: .8rem auto 0; color: #84948f; font-size: .78rem; line-height: 1.5; text-align: center; }

.demo-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 2rem clamp(1rem, 4vw, 4rem); border-top: 1px solid var(--demo-line); background: #0a1210; }
.demo-footer a,
.demo-footer button { color: #899994; font-size: .8rem; }
.demo-footer a:hover,
.demo-footer button:hover { color: var(--demo-teal); }
.demo-footer small { width: auto; margin-left: auto; padding: 0; border: 0; color: #63736f; }

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

@media (max-width: 900px) {
  .demo-intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .demo-workspace { grid-template-columns: 1fr; }
  .demo-guide { position: static; width: min(560px, 100%); margin: 0 auto; }
  .demo-progress { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .demo-site-header { min-height: 66px; }
  .demo-site-header nav > a,
  .demo-reset-top { display: none; }
  .demo-page { width: min(100% - 1rem, 470px); padding-top: 2rem; }
  .demo-intro h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .demo-intro > div > p:last-child { font-size: 1rem; }
  .demo-progress { grid-template-columns: 1fr; }
  .demo-guide { padding: 1.15rem; }
  .demo-device { width: 100%; border-width: 5px; border-radius: 30px; }
  .demo-hotspot-label { font-size: .65rem; }
  .demo-controls { grid-template-columns: 1fr 1fr; }
  #demoStepStatus { grid-column: 1 / -1; grid-row: 2; }
  .demo-footer { align-items: flex-start; flex-direction: column; }
  .demo-footer small { margin: .5rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-hotspot { animation: none; }
}