/* Immersive scroll-story showroom: one sticky 3D stage, chapters scroll over it. */
.xs {
  --xs-bg:#f4f5f7;
  --xs-ink:#0b0d10;
  --xs-muted:#0b0d1080;
  --xs-line:#0b0d1014;
  --xs-pad:clamp(24px,6vw,96px);
  --xs-h:max(560px,calc(100svh - var(--hdr,72px)));
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --dot:'Doto','IBM Plex Mono',monospace;
  position:relative;isolation:isolate;
  background:var(--xs-bg);color:var(--xs-ink);
}
.xs-stage {position:sticky;top:var(--hdr,72px);height:var(--xs-h);overflow:hidden}
.xs-chapters {position:relative;z-index:1;margin-top:calc(-1 * var(--xs-h));pointer-events:none}

.xs-grid {
  position:absolute;inset:0;
  background-image:radial-gradient(#0b0d1024 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 15%,transparent 78%);
  mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 15%,transparent 78%);
}
.xs-ghost {
  position:absolute;left:66%;top:50%;transform:translate(-50%,-50%);
  font:900 min(40vw,520px)/.8 var(--dot);letter-spacing:-.04em;
  color:#00498c12;pointer-events:none;user-select:none;transition:opacity .6s ease;
}
.xs-stage:not([data-chapter="0"]) .xs-ghost {opacity:0}

.xs-canvas {position:absolute;inset:0;z-index:0;cursor:grab;touch-action:pan-y}
.xs-canvas.dragging {cursor:grabbing}
.xs-canvas canvas {display:block;width:100% !important;height:100% !important}
.model-fallback {position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.model-fallback img {max-width:min(46vw,620px);max-height:72%;object-fit:contain;transform:translateX(22%);mix-blend-mode:multiply}

.xs-meta {position:absolute;z-index:3;top:28px;left:var(--xs-pad);display:flex;align-items:center;gap:18px}
.xs-index {font:800 22px/1 var(--dot);color:var(--xero-primary);letter-spacing:.02em}
.xs-index i {font-style:normal;opacity:.3;margin:0 4px}
.xs-cat {font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--xs-muted)}

.xs-progress {position:absolute;z-index:3;top:24px;right:var(--xs-pad);display:flex;gap:22px}
.xs-progress button {
  display:flex;align-items:center;gap:8px;padding:6px 0;border:0;background:none;cursor:pointer;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--xs-muted);
  transition:color .3s ease;
}
.xs-progress button::before {content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;transition:all .3s ease}
.xs-progress button:hover,.xs-progress button.active {color:var(--xs-ink)}
.xs-progress button.active::before {background:var(--xero-accent);opacity:1;transform:scale(1.5)}

.xs-hint {position:absolute;z-index:3;left:var(--xs-pad);bottom:36px;display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--xs-muted)}
.xs-hint .xs-led {background:var(--xero-accent);box-shadow:0 0 0 3px #f9b31633;animation:xs-blink 2.4s ease-in-out infinite}
@keyframes xs-blink {50%{opacity:.35}}

.xs-switch {
  position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;gap:2px;padding:5px;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none;
  border:1px solid #0b0d100d;border-radius:999px;
  background:#ffffffb8;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 12px 32px -14px #08162c40;
}
.xs-switch::-webkit-scrollbar {display:none}
.xs-switch button {
  display:inline-flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
  padding:11px 17px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:700 13px/1 'Nunito',sans-serif;color:#0b0d10a6;transition:background .25s ease,color .25s ease;
}
.xs-switch button i {font:800 12px/1 var(--dot);font-style:normal;color:#0b0d1059;transition:color .25s ease}
.xs-switch button:hover {background:#0b0d100a;color:var(--xs-ink)}
.xs-switch button.active {background:var(--xero-primary);color:#fff}
.xs-switch button.active i {color:var(--xero-accent)}

.xs-hotspots {position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.xs-hs {position:absolute;left:0;top:0;will-change:transform}
.xs-hs i {
  position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--xero-primary);animation:xs-ping 2s ease-out infinite;
}
@keyframes xs-ping {0%{box-shadow:0 0 0 0 #00498c55}100%{box-shadow:0 0 0 14px #00498c00}}
.xs-hs span {
  position:absolute;left:28px;top:-16px;padding:8px 14px;border-radius:999px;white-space:nowrap;
  background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -8px #08162c40;font:700 12px/1.2 'Nunito',sans-serif;color:var(--xs-ink);
}
.xs-hs span::before {content:"";position:absolute;right:100%;top:50%;width:16px;height:1px;background:var(--xero-primary)}
.xs-hs.flip span {left:auto;right:28px}
.xs-hs.flip span::before {right:auto;left:100%}

.xs-ch {display:flex;align-items:center;height:var(--xs-h);padding:0 var(--xs-pad)}
.xs-ch-right {justify-content:flex-end}
.xs-copy {
  max-width:460px;pointer-events:auto;
  opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * 28px));
}
.xs-ch-hero .xs-copy {max-width:540px}
.xs-enter {animation:xs-in .7s cubic-bezier(.2,.7,.2,1)}
@keyframes xs-in {from{opacity:0;filter:blur(6px)}}
.xs-kicker {
  display:flex;align-items:center;gap:10px;margin:0;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--xs-muted);
}
.xs-kicker::before {content:"";width:6px;height:6px;border-radius:50%;background:var(--xero-accent)}
.xs h1 {margin:18px 0 20px;font:800 clamp(44px,6.2vw,96px)/.95 'Nunito',sans-serif;letter-spacing:-.045em;color:var(--xs-ink)}
.xs h2 {margin:18px 0 18px;font:800 clamp(32px,3.6vw,54px)/1.04 'Nunito',sans-serif;letter-spacing:-.035em;color:var(--xs-ink)}
.xs-lead {margin:0;max-width:440px;font-size:17px;line-height:1.6;color:#0b0d10a6}

.xs-price {display:flex;align-items:baseline;gap:14px;margin:34px 0 12px}
.xs-price strong {font:800 clamp(30px,2.8vw,40px)/1 'Nunito',sans-serif;color:var(--xero-primary);letter-spacing:-.03em}
.xs-price s {font:400 13px/1 var(--mono);color:var(--xs-muted)}
.xs-stock {display:flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--xs-muted)}
.xs-sep {width:1px;height:12px;background:#0b0d1026}
.xs-led {width:7px;height:7px;border-radius:50%;flex:none;background:#22c55e;box-shadow:0 0 0 3px #22c55e2e}
.xs-cta {display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.xs-btn {
  display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;
  font:700 15px/1 'Nunito',sans-serif;transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.xs-btn:hover {transform:translateY(-2px)}
.xs-btn-primary {background:var(--xero-primary);color:#fff}
.xs-btn-primary:hover {background:var(--xero-primary-hover)}
.xs-btn-ghost {border:1px solid #0b0d1024;background:#ffffff80;color:var(--xs-ink)}
.xs-btn-ghost:hover {border-color:var(--xs-ink)}

.xs-stats {display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:36px;margin-top:30px}
.xs-stat b {display:block;font:800 clamp(44px,4.6vw,68px)/.9 var(--dot);color:var(--xero-primary);letter-spacing:-.02em}
.xs-stat span {display:block;margin-top:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--xs-muted)}
.xs-stat small {display:block;margin-top:8px;font-size:13px;line-height:1.4;color:#0b0d10b3}

.xs-specs {margin:24px 0 0;border-top:1px solid var(--xs-line)}
.xs-specs div {display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--xs-line)}
.xs-specs dt {font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--xs-muted)}
.xs-specs dd {margin:0;font-size:15px;font-weight:700}
.xs-note {margin:14px 0 0;font:400 11px/1 var(--mono);color:var(--xs-muted)}

.xs-stage.is-static .xs-hint,.xs-stage.is-static .xs-hotspots {display:none}

@media(max-width:820px) {
  .xs {--xs-pad:20px}
  .in-story .floating-social {opacity:0;pointer-events:none}
  .xs-meta {top:18px}
  .xs-progress,.xs-hint {display:none}
  .xs-switch {top:52px;bottom:auto;left:16px;right:16px;transform:none;max-width:none}
  .xs-switch button {padding:10px 14px;font-size:12px}
  .xs-ghost {left:50%;top:34%;font-size:62vw}
  .model-fallback {place-items:start center;padding-top:120px}
  .model-fallback img {max-width:78vw;max-height:38%;transform:none}
  .xs-ch {align-items:flex-end;padding-bottom:20px}
  .xs-ch-right {justify-content:flex-start}
  .xs-copy,.xs-ch-hero .xs-copy {
    max-width:none;width:100%;padding:22px 20px;border-radius:24px;
    background:#ffffffc7;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid #ffffffcc;box-shadow:0 18px 40px -24px #08162c40;
  }
  .xs h1 {margin:12px 0 10px;font-size:38px}
  .xs h2 {margin:12px 0 10px;font-size:28px}
  .xs-lead {font-size:14px;line-height:1.55}
  .xs-price {margin:16px 0 8px}
  .xs-price strong {font-size:30px}
  .xs-cta {margin-top:16px}
  .xs-btn {height:46px;padding:0 20px;font-size:14px;flex:1}
  .xs-stats {gap:18px;margin-top:16px}
  .xs-stat b {font-size:38px}
  .xs-specs {margin-top:12px}
  .xs-specs div {grid-template-columns:118px 1fr;padding:10px 0}
  .xs-specs dd {font-size:14px}
}
@media(prefers-reduced-motion:reduce) {
  .xs-enter,.xs-hs i,.xs-hint .xs-led {animation:none}
}