:root{
  --ink:#010736; --navy:#0D1C42; --blue:#22396F; --cream:#FCF1D0;
  --cream-dim:rgba(252,241,208,.65); --line:rgba(252,241,208,.18);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Lato",Calibri,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);font-weight:300;color:var(--cream);
  background:radial-gradient(ellipse at top,var(--blue) 0%,var(--navy) 45%,var(--ink) 100%) fixed;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.page{display:none;min-height:100dvh;padding:clamp(20px,5vw,48px);align-items:center;justify-content:center}
.page.active{display:flex;animation:fade .8s ease}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.intro{max-width:620px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.eyebrow{font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;color:var(--cream-dim)}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,9vw,4.6rem);line-height:1.05;letter-spacing:-.01em}
h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.2rem,4vw,1.6rem);color:var(--cream-dim)}
.desc{font-size:.85rem;letter-spacing:.12em;line-height:1.9;max-width:460px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.desc em{font-family:var(--serif);letter-spacing:.02em;font-size:1rem;text-transform:none}
.desc.soft{letter-spacing:.03em;font-size:1rem;border:none}

.player{display:flex;align-items:center;gap:16px;padding:12px 20px 12px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(1,7,54,.4);backdrop-filter:blur(8px)}
.play{width:42px;height:42px;border-radius:50%;border:none;background:var(--cream);color:var(--ink);font-size:.8rem;cursor:pointer}
.track{display:flex;flex-direction:column;text-align:left}
.t-title{font-family:var(--serif);font-size:1.15rem}
.t-artist{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim)}
.eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.eq i{width:3px;background:var(--cream);height:30%;animation:eq 1s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.6s}
.eq.paused i{animation-play-state:paused}
@keyframes eq{50%{height:100%}}

.btn{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--ink);background:var(--cream);border:none;padding:14px 34px;border-radius:999px;cursor:pointer;text-decoration:none;transition:transform .3s,box-shadow .3s;box-shadow:0 10px 30px -10px rgba(252,241,208,.5)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(252,241,208,.7)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

/* chat */
#p2{padding:0}
.chat{width:100%;max-width:560px;height:100dvh;display:flex;flex-direction:column;background:var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.chat-head{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--navy);border-bottom:1px solid var(--line)}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--cream-dim);background:var(--blue)}
.avatar.empty{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")}
.who{flex:1;display:flex;flex-direction:column;gap:6px}
.name{font-family:var(--serif);font-size:1.4rem}
.bar-wrap{display:flex;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.1em}
.bar{flex:1;height:5px;border-radius:9px;background:rgba(252,241,208,.12);overflow:hidden}
.fill{height:100%;width:100%;background:var(--cream);transition:width 1s ease,background 1s}
.messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:80%;padding:11px 16px;border-radius:18px;line-height:1.55;font-size:.95rem;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.msg.them{align-self:flex-start;background:var(--blue);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--cream);color:var(--ink);border-bottom-right-radius:4px}
.typing{align-self:flex-start;background:var(--blue);padding:14px 16px;border-radius:18px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--cream-dim);animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{50%{opacity:.2}}
@keyframes pop{from{opacity:0;transform:scale(.8) translateY(8px)}to{opacity:1;transform:none}}
.choices{padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:var(--navy);border-top:1px solid var(--line)}
.choices:empty{display:none}
.choice{text-align:left;font-family:var(--sans);font-weight:300;font-size:.9rem;line-height:1.5;color:var(--cream);background:transparent;border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;transition:background .25s,border-color .25s;animation:pop .35s}
.choice:hover{background:rgba(252,241,208,.08);border-color:var(--cream-dim)}
.choice b{font-family:var(--serif);font-weight:400;margin-right:6px}
.warn{border:1px solid var(--cream);border-radius:14px;padding:12px 14px;font-size:.85rem;line-height:1.6;animation:pop .35s}
.warn strong{display:block;font-family:var(--serif);font-size:1.2rem;letter-spacing:.15em}

/* agreement */
.check{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:14px;cursor:pointer;line-height:1.5;transition:background .3s}
.check:has(input:checked){background:rgba(252,241,208,.08);border-color:var(--cream-dim)}
.check input{appearance:none;width:20px;height:20px;flex:none;border:1px solid var(--cream);border-radius:5px;margin-top:2px;display:grid;place-content:center}
.check input:checked::after{content:"✓";color:var(--ink);font-size:.8rem}
.check input:checked{background:var(--cream)}

/* gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.gallery figure{aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--navy)}
.gallery figure:nth-child(1){transform:rotate(-2deg)}.gallery figure:nth-child(2){transform:rotate(2deg) translateY(14px)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery img.empty{opacity:0}

/* modal */
.modal{position:fixed;inset:0;background:rgba(1,7,54,.85);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px;z-index:10}
.modal.show{display:flex;animation:fade .4s}
.modal-box{max-width:420px;background:var(--navy);border:1px solid var(--cream-dim);border-radius:20px;padding:30px;text-align:center;display:flex;flex-direction:column;gap:22px;line-height:1.7;animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}