:root{
  --ink:#1A1A1A; --graphite:#3D3D3D; --mist:#8E8E91;
  --serif:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --sans:'Inter','Helvetica Neue',system-ui,sans-serif;
  --mono:'Space Mono',Menlo,monospace;
  --ring:conic-gradient(from 0deg,#5882A8,#9468A0,#A87E5D,#D8E5F0,#5882A8);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#CFCFD1;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column;overflow:hidden;position:relative;
}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}

/* the room */
.room{position:fixed;inset:0;z-index:0;background:#CFCFD1 url(bg-room.jpg) center/cover no-repeat}
.room::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,0) 40%,rgba(255,255,255,.18) 100%)}

/* the can: defocused, behind everything */
.gl{
  position:fixed;inset:-6%;width:112%;height:112%;z-index:1;display:block;
  filter:blur(7px) saturate(.9);opacity:.92;touch-action:none;cursor:grab;will-change:filter,opacity;
}
.gl:active{cursor:grabbing}
body.no-webgl .gl{display:none}

.top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px 24px 0;pointer-events:none}
.top .navpill{pointer-events:auto}

.stage{
  position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 16px;gap:26px;pointer-events:none;
}
.stage > *{pointer-events:auto}
.logo{display:block;width:min(88vw,760px);height:auto;pointer-events:none}

.line{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.005em;color:var(--ink)}
.line em{font-style:italic;color:var(--graphite)}

.waitlist{position:relative;display:flex;gap:8px;width:min(92vw,420px);padding-bottom:26px}
.field{flex:1;min-width:0;position:relative;border-radius:9999px;isolation:isolate}

/* glass: faint, lit from the top, the can stays visible through it */
.waitlist input,.pill{
  height:48px;border:0;border-radius:9999px;font:inherit;font-size:15px;color:var(--ink);
  background:
    linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 55%,rgba(255,255,255,.16) 100%);
  backdrop-filter:blur(6px) saturate(1.05);-webkit-backdrop-filter:blur(6px) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -14px rgba(26,26,26,.35);
}
.waitlist input{width:100%;padding:0 20px;outline:none;transition:background .25s}
.waitlist input::placeholder{color:rgba(61,61,61,.7)}
.waitlist input:focus-visible{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22))}
.waitlist input[aria-invalid="true"]~.fring,.waitlist input[aria-invalid="true"]+.fring{--ring-a:#B5553B}

/* soap-bubble edge: mostly white, with slow drifting hints of blue, lavender and peach */
.fring,.pill .ring{
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;overflow:hidden;z-index:-1;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.fring::before,.pill .ring::before{
  content:"";position:absolute;inset:-150%;
  background:conic-gradient(
    rgba(255,255,255,.85) 0deg,
    rgba(216,229,240,.95) 40deg,
    rgba(88,130,168,.7) 80deg,
    rgba(255,255,255,.9) 130deg,
    rgba(232,216,232,.95) 180deg,
    rgba(148,104,160,.65) 220deg,
    rgba(255,255,255,.9) 270deg,
    rgba(240,224,204,.95) 310deg,
    rgba(168,126,93,.65) 340deg,
    rgba(255,255,255,.85) 360deg);
  animation:spin 14s linear infinite;
}
.fring::before{opacity:.55;animation-duration:22s;animation-direction:reverse}
/* soft static halo just outside the edge */
.pill::after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-2;pointer-events:none;opacity:.45;filter:blur(7px);
  background:linear-gradient(120deg,rgba(216,229,240,.9),rgba(232,216,232,.9),rgba(240,224,204,.9));
  -webkit-mask:radial-gradient(closest-side,transparent 74%,#000 100%);mask:radial-gradient(closest-side,transparent 74%,#000 100%);
}

.pill{position:relative;padding:0 22px;cursor:pointer;white-space:nowrap;font-weight:500;isolation:isolate;transition:transform .15s,background .25s}
.pill .label{position:relative}
.pill:hover{background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.24))}
.pill:hover .ring::before{animation-duration:4s}
.pill:hover::after{opacity:.7}
.pill:active{transform:scale(.98)}
.pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pill[disabled]{opacity:.7;cursor:default}
@keyframes spin{to{transform:rotate(1turn)}}
@supports not (mask-composite:exclude){ .fring,.pill .ring{opacity:.3} .pill::after{display:none} }

.form-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:13px;color:var(--graphite);min-height:18px;text-align:center}
.form-msg.error{color:#8F3F2A}
.waitlist.done .field,.waitlist.done .pill{display:none}
.waitlist.done{justify-content:center}
.waitlist.done .form-msg{position:static;font-family:var(--serif);font-size:24px;font-weight:300;color:var(--ink)}

/* ticker */
.ticker{position:relative;z-index:3;overflow:hidden;border-top:1px solid rgba(26,26,26,.12);border-bottom:1px solid rgba(26,26,26,.12);padding:9px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;width:max-content;gap:0;animation:ticker 48s linear infinite;will-change:transform}
.track span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--graphite);padding:0 28px;white-space:pre}
.track span::before{content:"•";margin-right:28px;color:var(--mist)}
@keyframes ticker{to{transform:translateX(-50%)}}

.legal{position:relative;z-index:3;display:flex;justify-content:space-between;padding:12px 24px 18px;text-transform:none;letter-spacing:.02em;color:var(--mist)}
.legal a:hover{color:var(--graphite)}

@media (max-width:520px){
  body{overflow:auto;overscroll-behavior:none;min-height:100dvh}
  .stage{gap:18px}
  .waitlist{width:min(86vw,360px);gap:6px;padding-bottom:24px}
  .waitlist input,.pill{height:42px;font-size:14px}
  .waitlist input{padding:0 16px;font-size:16px} /* 16px stops iOS zooming on focus */
  .pill{padding:0 16px}
  .pill::after{inset:-4px;opacity:.3}
  .form-msg{font-size:12px}
  .top{padding:18px 18px 0}
}
}
@media (prefers-reduced-motion:reduce){
  .pill .ring::before,.fring::before,.track{animation:none}
}

/* nav pill */
.navpill{
  position:relative;pointer-events:auto;display:inline-flex;align-items:center;height:34px;padding:0 16px;border:0;border-radius:9999px;cursor:pointer;
  font-family:var(--serif);font-weight:300;font-size:18px;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 20px -14px rgba(26,26,26,.35);
  transition:background .2s;
}
.navpill:hover{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22))}
.navpill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---- view swap: hero <-> manifesto. No card. Text sits straight on the room. ---- */
.stage{position:relative}
.stage > .logo,.stage > .line,.stage > .waitlist{transition:opacity .45s ease,transform .45s ease,filter .45s ease}
body.view-manifesto .stage > .logo,body.view-manifesto .stage > .line,body.view-manifesto .stage > .waitlist{
  opacity:0;transform:translateY(-8px) scale(.985);filter:blur(4px);pointer-events:none;
}
.manifesto{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 16px;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .5s ease .15s,transform .5s ease .15s;pointer-events:none;
}
.manifesto[hidden]{display:flex}
body.view-manifesto .manifesto{opacity:1;transform:none;pointer-events:auto}
.manifesto h2{margin:12px 0 18px;font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,64px);line-height:1;letter-spacing:-.01em;color:rgba(26,26,26,.82)}
.manifesto-sub{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:rgba(61,61,61,.75)}
/* when the written manifesto lands: a reading column */
.manifesto .essay{width:min(92vw,560px);text-align:left;font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:rgba(26,26,26,.78);max-height:60svh;overflow:auto;-webkit-mask:linear-gradient(#000 85%,transparent);mask:linear-gradient(#000 85%,transparent)}

/* ---- sound toggle: ten thin bars, still at rest, live while playing ---- */
.sound{
  position:relative;isolation:isolate;pointer-events:auto;width:40px;height:40px;border:0;border-radius:9999px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 20px -14px rgba(26,26,26,.35);
  transition:background .3s,box-shadow .3s;
}
.sound .fring{opacity:0;transition:opacity .4s}
.sound:hover{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22))}
.sound:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sound[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px rgba(216,229,240,.9),0 0 36px rgba(148,104,160,.25)}
.sound[aria-pressed="true"] .fring{opacity:1}
.sound.loading{animation:pulse 1s ease-in-out infinite}
.bars{display:flex;align-items:center;gap:1.5px;height:16px}
.bars span{display:block;width:1.5px;border-radius:9999px;background:rgba(26,26,26,.4);transform-origin:center;transition:background .3s}
.sound[aria-pressed="true"] .bars span{background:var(--ink);animation:wave-live ease-in-out infinite alternate}
@keyframes wave-live{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
@keyframes pulse{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.sound .bars span{animation:none}}
@media (max-width:520px){.top{padding:16px 16px 0}}