@import url('/assets/fonts.css');
:root{font-family:'DM Sans',Arial,sans-serif;color:#f0eadb;background:#252e28;font-size:16px;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #e8bf82;outline-offset:5px}#world,#world canvas,.shade,#ui{position:fixed;inset:0;width:100%;height:100%}#world canvas{display:block}.shade{pointer-events:none;background:linear-gradient(0deg,rgba(16,27,23,.93),rgba(16,27,23,.18) 32%,transparent 60%),linear-gradient(180deg,rgba(19,30,24,.42),transparent 18%);transition:background 1s;z-index:1}#top{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:30px 38px;pointer-events:none}#visit{font-size:11px;letter-spacing:.17em;color:#e0e5d6;text-shadow:0 1px 10px #1b302a}#sound{pointer-events:auto;font-size:11px;letter-spacing:.07em;padding:8px 0 8px 16px;background:none;border:0;color:#d8dfcf}#sound:hover{color:#fff}#ui{z-index:3;display:flex;align-items:flex-end;padding:40px;pointer-events:none}#ui>section{pointer-events:auto;outline:none}h1,p{margin:0}h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.03em;line-height:.94}h1 em{color:#d7d9be;font-weight:400}.title-card,.end-card{margin:auto 0;max-width:650px;padding:40px 10px;animation:appear .8s ease}.title-card h1,.end-card h1{font-size:clamp(95px,10.5vw,155px);margin:27px 0 30px}.eyebrow{font-size:11px;letter-spacing:.17em;color:#c4cdb6}.title-card>p,.end-card>p{font-size:17px;color:#c9d0be;line-height:1.65;margin-bottom:32px}.title-card>button,.end-card>button{background:#e5e4cc;border:1px solid #e5e4cc;color:#344332;min-width:205px;display:flex;justify-content:space-between;align-items:center;padding:17px 21px;font-size:14px}.title-card>button:hover,.end-card>button:hover{background:#f0efde}.title-note{display:block;font-size:11px;line-height:1.8;letter-spacing:.01em;margin-top:17px;color:#a8b8a1}.on-title .shade,.on-end .shade{background:linear-gradient(90deg,#15261eee,#15261e9c 42%,#15261e0a 80%),linear-gradient(0deg,#17271c79,transparent 40%)}.caption{width:100%;max-width:850px;margin:0 auto;text-align:center;padding:30px 20px 5px;animation:appear .5s ease}.speaker{font-size:10px;color:#c4d0b4;letter-spacing:.18em;margin-bottom:13px}.caption>p{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(27px,2.9vw,39px);line-height:1.25;color:#f2eddd;text-wrap:balance;text-shadow:0 2px 12px #102419}.actions{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:23px;flex-wrap:wrap}.actions button{border:1px solid #b7c6a86b;display:flex;justify-content:space-between;align-items:center;gap:35px;background:#1f352aa8;backdrop-filter:blur(12px);padding:14px 18px;min-height:47px;font-size:14px;transition:background .18s,border-color .18s}.actions button:hover{background:#5c7154a8;border-color:#d8e2c5}.actions button:only-child{min-width:205px;background:#d9dfc9;color:#34432e;border-color:#d9dfc9}.actions button:only-child:hover{background:#edf0e1}.actions button>span:last-child,.title-card button>span,.end-card button>span{font-size:19px;line-height:1}.colors button{gap:13px;min-width:190px}.colors button>span:last-child{margin-left:auto}.swatch{width:18px;height:18px;display:inline-block;border:1px solid #f1e4c078;border-radius:50%;flex-shrink:0}.swatch.blue{background:#3c5987}.swatch.orange{background:#bc6749}.between .shade{background:#1e3028;transition:background .5s}.chapter{margin:auto;text-align:center;max-width:600px;padding:30px;animation:appear .6s ease}.chapter>p{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(32px,4vw,58px);line-height:1.3;color:#d6dec9}.chapter h1{font-size:50px;margin-bottom:25px}.chapter h1+p{font-family:inherit;font-size:16px;line-height:1.7;margin-bottom:25px}.chapter button{padding:14px 22px;background:#d5ddc5;color:#30432b;border:0}.loading{margin:auto;color:#bfceb0}.making{animation:breathe 1.3s ease infinite}.on-end .end-card h1{font-size:clamp(85px,9vw,125px)}.on-end .end-card>p{max-width:390px;font-size:16px}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{opacity:.45}}
@media(max-width:700px){#top{padding:21px 23px}#visit{font-size:9px;max-width:190px}#sound{font-size:10px}#ui{padding:24px 18px}.title-card,.end-card{padding:25px 12px}.title-card h1{font-size:clamp(95px,22vw,135px);margin:25px 0}.eyebrow{font-size:10px}.title-card>p,.end-card>p{font-size:15px}.title-card>button,.end-card>button{padding:16px 20px;min-width:205px}.caption{padding:22px 5px 7px;max-width:540px}.caption>p{font-size:29px;line-height:1.25}.speaker{font-size:9px;margin-bottom:12px}.actions{gap:9px;margin-top:22px}.actions button{font-size:13px;padding:13px 15px;gap:22px;min-height:46px}.colors button{min-width:155px;gap:10px}.colors button>span:last-child{margin-left:8px}.shade{background:linear-gradient(0deg,#102017f7,rgba(16,27,23,.28) 37%,transparent 65%),linear-gradient(180deg,#172c2152,transparent 20%)}.on-title .shade,.on-end .shade{background:linear-gradient(90deg,#15261eea,#15261e95 65%,#15261e2a)}.on-end .end-card h1{font-size:clamp(80px,20vw,120px)}.end-card>p{max-width:280px}.title-note{font-size:10px}}
@media(max-height:650px){.title-card h1{font-size:88px;margin:17px 0}.title-card>p{margin-bottom:21px}.title-card,.end-card{padding:20px 0}.caption{padding-top:10px}.caption>p{font-size:28px}.actions{margin-top:15px}#ui{padding:26px 35px}.on-end .end-card h1{font-size:78px;margin:18px 0}.title-note{margin-top:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Phone messages are a foreground object; Mara's empty desk remains behind it. */
.on-phone .shade{background:linear-gradient(90deg,#12201935,#12201999),linear-gradient(0deg,#122019bb,transparent 65%)}
.on-phone #ui{align-items:center;justify-content:flex-end;padding:84px 12vw 26px;overflow-y:auto}
.phone-scene{width:320px;max-width:100%;animation:phone-arrive .65s cubic-bezier(.2,.8,.2,1) both}
.phone-device{position:relative;width:100%;height:460px;border:7px solid #242725;border-radius:44px;background:#f7f8fa;color:#202426;box-shadow:0 0 0 2px #767b76,0 25px 65px #06120ca6;overflow:hidden}
.phone-status{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12px;font-weight:600;color:#272c2d}
.phone-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:23px;border-radius:20px;background:#1d211f}
.phone-contact{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;background:#eceef1;border-bottom:1px solid #dbdfe2;padding:11px 15px 14px}
.phone-back{position:absolute;left:19px;top:31px;color:#3977b8;font-size:33px;line-height:1}
.phone-avatar{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:#788e85;color:#fff;font-size:23px}
.phone-contact h2{font-size:17px;font-weight:600;margin:0}.phone-contact>span:last-child{font-size:12px;color:#697277}
.phone-conversation{padding:20px 17px}.message-time{text-align:center;font-size:12px;color:#72797e;margin-bottom:22px}
.message-bubble{font-size:19px;line-height:1.45;color:#22282b;background:#e3e7ea;border-radius:17px 17px 17px 4px;padding:13px 16px;max-width:246px;text-wrap:pretty;animation:message-arrive .4s .35s both}
.message-earlier{font-size:15px;color:#72797e;margin-bottom:13px;animation:none}.message-notice{display:block;font-size:11px;color:#81898b;margin:9px 5px}
.phone-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);height:4px;width:100px;background:#252a2c;border-radius:5px}
.phone-scene .actions{margin-top:23px}.phone-scene .actions button{width:100%;font-size:15px}
@keyframes phone-arrive{from{opacity:0;transform:translateY(65px) rotate(5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes message-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.on-phone #ui{justify-content:center;padding:76px 24px 25px}.phone-scene{width:305px}.phone-device{height:440px}}
@media(max-height:650px){.on-phone #ui{align-items:flex-start;padding-top:65px;padding-bottom:18px}.phone-device{height:350px}.phone-contact{padding:4px 15px 8px;gap:3px}.phone-avatar{width:32px;height:32px;font-size:19px}.phone-conversation{padding-top:12px}.message-time{margin-bottom:12px}.phone-scene .actions{margin-top:13px}}

/* Spoken replies stay above a compact, keyboard-accessible sentence picker. */
.dialogue{max-width:820px}.dialogue>p{font-size:clamp(25px,2.5vw,35px)}
.dialogue-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:660px;margin:20px auto 0;text-align:left}
.dialogue-options button{font-size:16px;min-height:49px;background:#162c24e8;gap:18px}
.dialogue-options button[data-action="together"]{border-color:#d6dec2;color:#e9efdc}
.dialogue-options button:only-child{grid-column:1/-1;max-width:340px;justify-self:center;width:100%}
@media(max-width:520px){.dialogue-options{grid-template-columns:1fr;gap:7px;margin-top:14px}.dialogue-options button{font-size:15px;padding:11px 14px;min-height:44px}.dialogue>p{font-size:25px}}
@media(max-height:600px){.dialogue-options{grid-template-columns:1fr 1fr}.dialogue>p{font-size:23px}.dialogue-options button{padding:10px 13px;min-height:42px}.dialogue{padding-top:0}}