:root{--bg:#03102e;--ink:#f4f5ff;--soft:#cedcf5;--faint:#cadbff66;--glow:#e7bc67;--glow2:#ffe0a0}
*{letter-spacing:0!important}
html,body{min-height:100%;height:100%;overflow:auto}
.ocean{position:fixed;inset:0;pointer-events:none;background:#063d81 url('assets/drexciya-rsvp/background.webp') center/cover no-repeat}
.ocean canvas{display:block;width:100%;height:100%;opacity:0}
.ocean[data-state=ready] canvas{opacity:1}
.veil{background:linear-gradient(90deg,#020b24ef 0%,#020b24c9 34%,#020b2433 75%,#020b2422)}
.stage{min-height:100svh;padding:100px max(28px,8%);align-items:center}
.panel{width:min(480px,100%)}
.step.active>*{animation:none}
.wordmark{font-size:24px;text-indent:0;margin-bottom:26px}
.eyebrow{font-size:10px;color:var(--glow2)}
.prompt{font-size:28px}
.prompt.lead{font-size:20px}
.hint{line-height:1.5;color:var(--soft)}
.back-home{top:max(22px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));font-size:10px;min-height:44px;align-items:center}
.counter{display:none}
.go,.back{min-height:44px;font-size:11px;padding:10px 4px}
.go:disabled{opacity:.5;cursor:wait}
.role{font-size:27px;overflow-wrap:anywhere}
.question-active{overflow:hidden}
.question-active .stage{position:fixed;inset:0;padding:0;min-height:0;pointer-events:none}
.question-active .panel{width:100%;height:100%;max-width:none}
.question-active .veil{background:linear-gradient(180deg,#010b26bf 0%,#010b2655 21%,transparent 36%,transparent 70%,#010b26d9 100%)}
.question.active{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:84px 24px max(12px,env(safe-area-inset-bottom))}
.question-heading{width:100%;text-align:center;pointer-events:auto}
.question .eyebrow.count{text-align:center;margin:0 0 12px;color:#ffe0a0}
.question .prompt{font-size:34px;line-height:1.12;max-width:30ch;margin:0 auto;text-wrap:balance;text-shadow:0 2px 18px #010b26}
.question-controls{position:relative;width:min(520px,100%);pointer-events:auto}
.poles{display:flex;justify-content:space-between;gap:32px;min-height:16px;font:11px/1.5 var(--display);color:#f0e7cf;text-shadow:0 1px 8px #00102b}
.poles span{max-width:46%}
.poles span:last-child{text-align:right}
.question input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:40px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.question input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#c6deff88,#ffe0a0)}
.question input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,#c6deff88,#ffe0a0)}
.question input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-11px;border-radius:50%;background:#f8d58e;border:3px solid #fff1c9;box-shadow:0 0 16px #ffca6e66}
.question input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#f8d58e;border:3px solid #fff1c9;box-shadow:0 0 16px #ffca6e66}
.question input[type=range]:focus-visible{outline:2px solid #ffe0a0;outline-offset:2px;border-radius:2px}
.question .nav{justify-content:space-between;margin:0;min-height:44px}
.question .err{position:absolute;bottom:100%;margin:0 0 12px;text-align:center;width:100%}
.question .err:empty{display:none}
@media(orientation:landscape){.ocean{background-image:url('assets/drexciya-rsvp/background-landscape.webp')}}
@media(max-width:600px){
  .stage{padding:96px 28px 40px}
  .veil{background:linear-gradient(90deg,#020b24db,#020b2499)}
  .back-home{left:max(24px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));font-size:9px}
  .question.active{padding-top:78px}
  .question .prompt{font-size:28px;max-width:22ch}
  .question .eyebrow.count{margin-bottom:12px}
  .poles{font-size:10px;gap:24px}
}
@media(max-height:650px){.question.active{padding-top:64px}.question .prompt{font-size:24px}.question .eyebrow.count{margin-bottom:8px}}
@media(orientation:landscape) and (max-height:500px){
  .question.active{display:block;padding:0}
  .question-heading{position:absolute;top:78px;left:max(24px,env(safe-area-inset-left));width:29%;text-align:left}
  .question .eyebrow.count{text-align:left}
  .question .prompt{font-size:23px;max-width:none;text-align:left}
  .question-controls{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:29%}
  .poles{font-size:9px;gap:16px}
  .question-active .veil{background:linear-gradient(90deg,#010b2680,transparent 38%,transparent 62%,#010b2680)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}