/* A quiet, modern phone conversation, held inside the existing museum night. */
.opening-prelude{position:fixed;inset:0;z-index:100;overflow:hidden;isolation:isolate;background:#080c0e;color:#ede7d7;font-family:var(--sans)}
.prelude-room,.prelude-shade{position:absolute;inset:-12px;pointer-events:none;z-index:-1}
.prelude-room{background-position:center;background-size:cover;filter:blur(7px) brightness(.52);transform:scale(1.035);transition:filter 1s,transform 1.4s}
.prelude-shade{background:radial-gradient(ellipse at 50% 42%,#13282e20,#0a0e12a6 90%);transition:background .8s}
.prelude-nav{position:absolute;top:28px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;letter-spacing:1px;z-index:3}
.prelude-nav button{padding:12px;color:#d2cbbb;border-bottom:1px solid #c3af7d55}
.prelude-nav button:hover{color:#fff0cc;border-color:#e7d0a0}
.opening-prelude button:focus-visible,.prelude-chat:focus-visible{outline:2px solid #d8bc86;outline-offset:4px}
.prelude-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#080a0d;text-align:center;padding:80px 24px 150px;animation:prelude-reveal .8s both}
.prelude-intro small{font:14px/1.6 var(--serif);letter-spacing:5px;color:#a79d89}
.prelude-intro h1{font:48px/1.5 var(--serif);font-weight:400;letter-spacing:12px;margin:22px 0 10px;padding-left:12px}
.prelude-intro p{font:22px/2 var(--serif);letter-spacing:2px;margin:5px 0;color:#e6decb}
.prelude-intro p:last-child{font-size:20px;color:#bfb8ab;margin-top:18px}
.prelude-phone{position:absolute;top:calc(50% - 24px);left:50%;transform:translate(-50%,-53%);width:min(440px,88vw);height:min(748px,calc(100svh - 190px));min-height:310px;display:flex;flex-direction:column;overflow:hidden;border:7px solid #313b3e;border-radius:37px;outline:1px solid #85908e80;background:#eeede7;box-shadow:0 32px 80px #0009,0 3px 0 2px #0a1418,inset 0 0 0 1px #fff6;animation:prelude-phone-in .7s both}
.prelude-status{height:29px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 25px 0;color:#586360;font-size:11px;letter-spacing:1px}
.prelude-status i{display:block;width:20px;height:9px;position:relative;border:1px solid #6a7770;border-radius:2px}
.prelude-status i::before{content:"";position:absolute;inset:1px 4px 1px 1px;background:#758a79;border-radius:1px}
.prelude-status i::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:3px;background:#6a7770}
.prelude-contact{flex:none;display:flex;align-items:center;justify-content:space-between;height:73px;padding:8px 23px 11px;border-bottom:1px solid #c7c9bd88;color:#34433d;background:#ecece5}
.prelude-contact>span{font-size:30px;line-height:1;color:#67756b}
.prelude-contact>div{text-align:center}
.prelude-contact h2{font-size:19px;font-weight:500;letter-spacing:3px;margin:0 0 4px}
.prelude-contact p{font-size:11px;color:#7c877d;margin:0;min-height:16px;letter-spacing:1px}
.prelude-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 15px 22px;scrollbar-width:thin;scrollbar-color:#c1c6b9 transparent;outline-offset:-3px;touch-action:pan-y}
.prelude-day{margin:8px 0 21px;text-align:center;font-size:11px;letter-spacing:2px;color:#8b9288}
.prelude-message{display:flex;gap:10px;align-items:flex-start;margin:0 0 22px;animation:prelude-reveal .25s both}
.prelude-message.is-self{flex-direction:row-reverse}
.prelude-avatar{flex:0 0 33px;height:33px;display:grid;place-items:center;border:1px solid #a1aca0;border-radius:8px;font:18px/1 var(--serif);background:#c7d0c5;color:#46584c}
.prelude-message.is-self .prelude-avatar{color:#7b4d34;border-color:#c7a383;background:#e3c3a3}
.prelude-bubble{position:relative;margin:0;padding:11px 14px;max-width:calc(100% - 68px);border:1px solid #d6d7cc;border-radius:3px 12px 12px 12px;background:#faf9f2;color:#34443b;font-size:18px;line-height:1.7;overflow-wrap:anywhere;box-shadow:0 2px 3px #626b5710}
.prelude-message.is-self .prelude-bubble{background:#c9d9bb;border-color:#bbcea9;border-radius:12px 3px 12px 12px;color:#32442e}
.prelude-composer{flex:none;min-height:63px;display:flex;align-items:center;gap:11px;padding:10px 16px 14px;border-top:1px solid #d6d8cb;background:#e5e8de;color:#81917d}
.prelude-compose-mark{font-size:25px;line-height:1}
.prelude-composer>div{flex:1;min-width:0;border-bottom:1px solid #a8b6a3;padding:3px 4px 7px}
.prelude-composer-text{font-size:16px;line-height:1.6;margin:0;color:#9bA596;max-height:85px;overflow:auto}
.prelude-composer-text.has-text{color:#40513c}
.prelude-compose-send{font-size:21px;color:#a1ad99}
.prelude-draft-tag{display:block;font-size:11px;color:#927055;letter-spacing:1px;margin-bottom:2px}
.has-draft .prelude-compose-send{opacity:.3}
.prelude-controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:min(440px,88vw);text-align:center;z-index:2}
.prelude-next{min-width:210px;min-height:44px;border:1px solid #c3b18e80;padding:10px 25px;background:#e9dfc9;color:#35433b;border-radius:3px;font:19px/1.4 var(--serif);letter-spacing:2px;box-shadow:0 6px 20px #0003}
.prelude-next span{margin-left:20px}
.prelude-next:hover{background:#f4ead4}
.prelude-hint{font:12px/1.6 var(--sans);letter-spacing:1px;color:#bdb6a7;margin:10px 0 0}
.prelude-thought{animation:prelude-reveal .4s both}
.prelude-thought .dialogue-box,.prelude-thought .dialogue-box:focus-visible{outline:none!important}
.prelude-thought .dialogue-box:focus-visible .prelude-thought-next{text-decoration:underline;text-underline-offset:5px}
.opening-prelude:is([data-phase=thought],[data-phase=leaving]) .prelude-room{filter:blur(0) brightness(.8);transform:scale(1)}
.opening-prelude:is([data-phase=thought],[data-phase=leaving]) .prelude-shade{background:linear-gradient(0deg,#0b171caa,transparent 75%)}
.opening-prelude[data-phase=leaving]{opacity:0;transition:opacity .65s;pointer-events:none}
@keyframes prelude-reveal{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes prelude-phone-in{from{opacity:0;margin-top:20px}to{opacity:1;margin-top:0}}
@media(max-height:780px){
  .prelude-nav{top:15px;left:26px;right:26px}
  .prelude-phone{height:calc(100svh - 163px);width:420px;transform:translate(-50%,-51%);border-radius:30px}
  .prelude-status{height:25px;padding-top:7px}
  .prelude-contact{height:60px;padding-block:5px}
  .prelude-bubble{font-size:17px;line-height:1.65;padding:9px 12px}
  .prelude-message{margin-bottom:18px}
  .prelude-composer{min-height:56px;padding:8px 14px 10px}
  .prelude-controls{bottom:13px}
  .prelude-hint{margin-top:6px;font-size:11px}
}
@media(max-width:650px){
  .prelude-nav{left:15px;right:15px;font-size:12px;gap:10px}
  .prelude-phone{width:88vw}
  .prelude-intro p{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .opening-prelude *{animation:none!important;transition:none!important}
  .opening-prelude[data-phase=leaving]{transition:none}
}
