:root {
  --bg: #061826;
  --fg: #d6f9f8;
  --muted: #86abb7;
  --line: #96c9d739;
  --accent: #62e7f3;
  --px: 0;
  --py: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--fg);
  background: var(--bg);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--fg); }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
h1, h2, p, ul { margin: 0; }
img { display: block; max-width: 100%; }
[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;
  top: 15px;
  left: 15px;
  padding: 12px;
  background: var(--fg);
  color: var(--bg);
  z-index: 1000;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

#field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s, visibility .65s;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}
.scene.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.scene-inner { width: 100%; height: 100%; position: relative; max-width: 2200px; margin: auto; }
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .7s .18s, transform .9s cubic-bezier(.16, 1, .3, 1) .18s; }
.is-active .reveal { opacity: 1; transform: translateY(0); }
.whisper { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 500; line-height: 1.6; }

.display-title {
  position: absolute;
  left: 6.5%;
  top: 14%;
  font-size: clamp(52px, 8.2vw, 148px);
  font-weight: 500;
  line-height: .87;
  letter-spacing: -.075em;
  z-index: 4;
  pointer-events: none;
}
.display-title > span { display: block; transform: translateY(65px); opacity: 0; transition: transform 1.05s cubic-bezier(.16, 1, .3, 1), opacity .75s; }
.display-title > span + span { transition-delay: .12s; }
.is-active .display-title > span { transform: translateY(0); opacity: 1; }
.display-title em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.085em; font-style: italic; }

.sound-title { top: 17%; font-size: 9.6vw; }
.sound-title > span + span { padding-left: 6vw; }
.code-title { font-size: clamp(46px, 7.2vw, 124px); }
.more-title { top: 10%; font-size: clamp(48px, 7vw, 120px); }

.product-copy { position: absolute; bottom: 22%; left: 7%; z-index: 5; max-width: min(40rem, 46%); }
.product-copy .whisper { margin-bottom: 16px; color: var(--muted); }
.product-name { font-size: clamp(25px, 2.45vw, 43px); line-height: 1.1; font-weight: 500; letter-spacing: -.055em; }
.product-copy > p:not(.whisper):not(.product-name):not(.exit-wait) { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 10px; max-width: 38rem; }
.sound .product-copy { bottom: 19.5%; }

.exit-wait { display: inline-flex; align-items: center; padding: 16px 0 8px; border-bottom: 1px solid var(--line); font-size: 12px; margin-top: 18px; color: var(--fg); }

.sound-halo { position: fixed; width: 55vw; height: 55vw; right: -9vw; top: -1vw; border-radius: 50%; opacity: .4; filter: blur(3px); pointer-events: none; z-index: 1; }
.sound-halo > div { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid #66e8ff55; box-shadow: inset 0 0 60px #236aad26, 0 0 50px #2b6ac429; animation: halo-breathe 9s ease-in-out infinite; }
.sound-halo > div:nth-child(2) { inset: 4%; animation-delay: -3s; }
.sound-halo > div:nth-child(3) { inset: -4%; animation-delay: -6s; }

.sound-object { position: absolute; right: 15%; top: 41%; width: clamp(150px, 19vw, 370px); aspect-ratio: 1; z-index: 3; perspective: 800px; transform: translate3d(calc(var(--px) * -15px), calc(var(--py) * -15px), 0); transition: transform .8s; }
.sound-object-shell { display: block; position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 24%; box-shadow: 0 0 65px #3686a13d, 0 40px 70px #020d1aa6; animation: sound-float 7s ease-in-out infinite; }
.sound-object-shell img { width: 100%; height: 100%; object-fit: cover; border-radius: 24%; }
.object-orbit { position: absolute; width: 150%; height: 60%; border: 1px solid #98e7fb55; border-radius: 50%; left: -25%; top: 20%; transform: rotate(-30deg); animation: object-orbit 20s linear infinite; }

.sound-meter { display: flex; align-items: center; gap: 5px; position: absolute; right: 10%; bottom: 17%; height: 45px; opacity: .5; }
.sound-meter i { width: 2px; height: 18px; background: var(--accent); transform-origin: center; animation: meter 1.7s ease-in-out infinite; }
.sound-meter i:nth-child(3n) { animation-delay: -.5s; }
.sound-meter i:nth-child(3n+1) { animation-delay: -.9s; }
.sound-meter i:nth-child(4n) { height: 36px; animation-duration: 2.2s; }
.sound-meter i:nth-child(5n) { height: 8px; animation-delay: -1.2s; }

.feature-lines { position: absolute; left: 7%; right: 8%; bottom: 16%; z-index: 5; list-style: none; padding: 0; max-width: 760px; }
.feature-lines li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 18px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); }
.feature-lines b { color: var(--fg); font-weight: 500; letter-spacing: -.02em; }

.listen-note { position: absolute; left: 7%; top: 38%; z-index: 5; max-width: 28rem; font-size: 13px; line-height: 1.7; color: var(--muted); }
.demo-row { position: absolute; left: 7%; right: 7%; top: 48%; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.demo-title { margin-top: 12px; font-size: 13px; letter-spacing: -.03em; }
.demo-state { margin-top: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.demo-link { margin-top: 8px; font-size: 12px; border-bottom: 1px solid var(--line); display: inline-flex; padding-bottom: 4px; }
.demo-stage { position: relative; }
.demo-play { display: block; width: 100%; padding: 0; text-align: left; }
.demo-play:disabled { cursor: default; }
.demo-still {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 50% 100%, #12384a 0%, #061826 70%);
  padding: 0 18% 22%;
}
.demo-still i { display: block; width: 2px; height: 28%; background: var(--accent); opacity: .55; transform-origin: center bottom; }
.demo-still i:nth-child(odd) { height: 46%; opacity: .8; }
.demo-still i:nth-child(3n) { height: 18%; }
.demo-slot.is-playing .demo-play { display: none; }
.demo-stage iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #041018; }

.edge-signature { position: fixed; right: 18px; top: 50%; z-index: 30; font-size: 8px; letter-spacing: .18em; writing-mode: vertical-rl; color: var(--muted); transform: translateY(-50%); opacity: .6; }
.scene-controls { position: fixed; bottom: 0; left: 0; right: 0; height: 100px; padding: 0 7%; display: flex; align-items: center; justify-content: space-between; z-index: 40; gap: 25px; }
.scene-controls:before { content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: 1px; background: var(--line); }
.scene-readout { display: flex; align-items: center; gap: 13px; width: 190px; font-size: 10px; letter-spacing: .04em; }
.scene-readout > span:first-child { font-variant-numeric: tabular-nums; opacity: .6; }
.readout-divider { width: 20px; height: 1px; background: currentColor; opacity: .3; }
.scene-index { display: flex; align-items: center; gap: 7px; }
.scene-index > button { position: relative; width: 36px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.scene-index > button > span { width: 100%; height: 2px; background: currentColor; opacity: .2; transition: opacity .4s, transform .4s; transform-origin: left; }
.scene-index > button[aria-current="true"] > span,
.scene-index > button:hover > span { opacity: .8; transform: scaleY(2); }
.scene-index > button[aria-current="true"] > span { opacity: 1; }
.scene-index i { position: absolute; bottom: 38px; font-size: 9px; font-weight: 400; font-style: normal; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; white-space: nowrap; }
.scene-index > button:hover i,
.scene-index > button:focus-visible i { opacity: 1; transform: none; }
.scene-actions { display: flex; gap: 10px; align-items: center; width: 190px; justify-content: flex-end; }
.arrow-button { border: 1px solid var(--line); border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; font-size: 20px; transition: background .3s, transform .3s; }
.arrow-button:hover { background: var(--line); transform: translateX(-3px); }
.next-arrow:hover { transform: translateX(3px); }
.motion-toggle { width: 35px; height: 40px; display: grid; place-items: center; opacity: .65; margin-right: 7px; transition: opacity .3s; }
.motion-toggle:hover { opacity: 1; }
.pause-symbol { display: block; width: 9px; height: 11px; border-inline: 2px solid currentColor; }
.motion-paused .pause-symbol { border: 0; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .parallax-plane { transform: none; }
.motion-paused .reveal,
.motion-paused .display-title > span { transition-duration: .15s !important; transition-delay: 0s !important; }
.motion-paused .scene { transition-duration: .15s; }

.noscript-note { position: fixed; inset: 0; z-index: 50; overflow: auto; background: var(--bg); color: var(--fg); padding: 8vh 8vw 12vh; }
.noscript-note p { max-width: 40rem; margin: 0 0 1.1rem; line-height: 1.6; color: var(--muted); }
.noscript-note strong { color: var(--fg); font-weight: 500; }

@keyframes halo-breathe {
  0%, 100% { transform: scale(.95); opacity: .5; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes sound-float {
  0%, 100% { transform: rotateY(-15deg) rotateX(8deg) rotate(-8deg) translateY(0); }
  50% { transform: rotateY(10deg) rotateX(-3deg) rotate(4deg) translateY(-20px); }
}
@keyframes object-orbit {
  0% { transform: rotate(-30deg) rotateY(0deg); }
  100% { transform: rotate(330deg) rotateY(360deg); }
}
@keyframes meter {
  0%, 100% { transform: scaleY(.4); }
  50% { transform: scaleY(1.4); }
}

@media (max-width: 1100px) {
  .sound-title { top: 19%; }
  .sound-object { top: 44%; right: 14%; width: 25vw; }
  .product-copy { bottom: 24%; max-width: min(36rem, 52%); }
  .feature-lines { bottom: 18%; }
  .demo-row { gap: 14px; }
}

@media (max-width: 700px) {
  .display-title { left: 7%; top: 11%; font-size: 14vw; line-height: .94; }
  .sound-title { top: 11%; font-size: 15.5vw; }
  .sound-title > span + span { padding-left: 0; }
  .code-title, .more-title { font-size: 12vw; top: 9%; }
  .sound-object { top: 34%; right: 18%; width: 42vw; max-width: 210px; }
  .sound-halo { width: 100vw; height: 100vw; right: -22vw; top: 18%; }
  .sound .product-copy { bottom: 20%; }
  .product-copy { left: 7%; bottom: 23%; max-width: 86%; }
  .product-copy .whisper { font-size: 8px; margin-bottom: 10px; }
  .product-name { font-size: 28px; }
  .product-copy > p:not(.whisper):not(.product-name):not(.exit-wait) { font-size: 12px; }
  .sound-meter { right: 8%; bottom: 22%; gap: 3px; height: 28px; opacity: .35; }
  .feature-lines { left: 7%; right: 8%; bottom: 17%; }
  .feature-lines li { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; font-size: 12px; }
  .listen-note { top: 32%; max-width: 86%; font-size: 12px; }
  .demo-row { top: 44%; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .scene-controls { padding: 0 5%; height: 86px; gap: 8px; }
  .scene-controls::before { left: 5%; right: 5%; }
  .scene-readout { width: auto; gap: 8px; font-size: 9px; position: absolute; bottom: 64px; left: 5%; }
  .scene-index { gap: 2px; }
  .scene-index > button { width: 22px; height: 36px; }
  .scene-index i { font-size: 8px; }
  .scene-actions { width: auto; gap: 6px; }
  .arrow-button { width: 34px; height: 34px; font-size: 16px; }
  .motion-toggle { width: 26px; margin-right: 0; }
  .edge-signature { right: 8px; font-size: 6px; }
}

@media (max-width: 380px) {
  .scene-index > button { width: 16px; }
  .arrow-button { width: 30px; height: 30px; }
  .scene-controls { padding: 0 4%; }
  .demo-title { font-size: 12px; }
}

@media (max-height: 760px) and (min-width: 701px) {
  .display-title { top: 9%; font-size: clamp(44px, 6.4vw, 108px); }
  .sound-title { top: 12%; font-size: 8vw; }
  .sound-object { width: 16vw; top: 30%; }
  .product-copy { bottom: 18%; }
  .product-copy .whisper { margin-bottom: 8px; }
  .product-name { font-size: 28px; }
  .feature-lines { bottom: 14%; }
  .feature-lines li { padding: 6px 0; }
  .listen-note { top: 32%; }
  .demo-row { top: 42%; }
  .scene-controls { height: 78px; }
  .sound-meter { bottom: 15%; }
}

@media (max-height: 740px) and (max-width: 700px) {
  .display-title { top: 7%; font-size: 12vw; }
  .sound-object { top: 28%; width: 32vw; }
  .sound .product-copy, .product-copy { bottom: 20%; }
  .feature-lines { bottom: 16%; }
  .feature-lines li { padding: 4px 0; }
  .listen-note { display: none; }
  .demo-row { top: 36%; }
  .scene-controls { height: 74px; }
  .scene-readout { bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .reveal, .display-title > span { transition: none !important; }
  .sound-halo > div, .sound-object-shell, .object-orbit, .sound-meter i { animation: none !important; }
}