/* A field notebook tucked into the paper theatre. */
#room .stage-kicker{left:4.5%;width:auto;text-align:left;top:25px;max-width:38%;font-size:12px}
#room h1{top:70px}
.room-toolbar{position:absolute;right:4.5%;top:14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;z-index:7;max-width:55%}
.room-toolbar button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:9px 14px;border:1px solid #123f4933;border-radius:999px;background:#faf7edee;font-size:14px;line-height:1.25;transition:background .2s,transform .2s;box-shadow:0 2px 0 #123f490c}
.room-toolbar button:hover{background:#fff9e8;transform:translateY(-2px)}
#find-count{font-variant-numeric:tabular-nums;font-size:12px;border-left:1px solid #123f4930;padding-left:9px}
.room-toolbar button[aria-pressed=true]{background:#f2d27f}
.music-bars{height:15px;display:flex;align-items:center;gap:3px}
.music-bars i{display:block;width:2px;height:5px;background:currentColor;border-radius:2px}
.music-bars i:nth-child(2){height:13px}.music-bars i:nth-child(3){height:8px}
#room-music[aria-pressed=true] .music-bars i{animation:music-wave .9s ease-in-out infinite alternate}
#room-music[aria-pressed=true] .music-bars i:nth-child(2){animation-delay:-.3s}#room-music[aria-pressed=true] .music-bars i:nth-child(3){animation-delay:-.6s}
#room .speech{background:#faf7edd9;border-radius:2px;padding:12px 15px;font-size:19px;box-shadow:3px 3px 0 #123f4910;max-width:260px}
.night-sky{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s;background:linear-gradient(170deg,#102a44f7,#28465cf7 75%,#28465cd9)}
.is-night .night-sky{opacity:1}
#room .is-night h1{color:#d8e8d5}
#room .is-night .stage-kicker,#room .is-night .stage-intro{color:#faf0cc}
#room .is-night .stage-next{color:#faf0cc}
.paper-moon{position:absolute;top:24%;right:15%;width:65px;aspect-ratio:1;border-radius:50%;background:#f9dc91;box-shadow:0 0 50px #f9dc9138;transform:rotate(-18deg)}
.paper-moon:after{content:'';position:absolute;width:82%;height:82%;left:30%;top:-8%;border-radius:50%;background:#19364d}
.sky-star{position:absolute;color:#fff1bf;font-family:Georgia,serif;line-height:1;animation:star-breathe 4s ease-in-out infinite alternate}
.cloud-puff{position:absolute;z-index:2;pointer-events:none;color:#fff9e8;font-family:Georgia,serif;font-size:28px;animation:cloud-puff 800ms ease-out forwards}
.find-notice{position:absolute;left:4.5%;bottom:20%;max-width:285px;z-index:6;background:#fff9e8;color:var(--ink);padding:14px 18px;border-left:3px solid #d96948;box-shadow:3px 4px 0 #123f4920;font-size:14px;line-height:1.5;pointer-events:none;animation:notice-in .25s ease-out}
.find-notice strong{display:block;font-family:Georgia,serif;font-size:19px;font-weight:400;margin-bottom:3px}
#room .treasure.collected{animation:collect-find .36s ease-in forwards;pointer-events:none}
#pocket-journal{max-width:850px;padding:32px 36px;border-radius:6px;background:#f7f1e4;background-image:linear-gradient(90deg,transparent 35px,#dbac9a30 36px,transparent 37px);box-shadow:0 25px 100px #061f4b40}
.journal-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.journal-top .eyebrow{margin:0;font-size:12px;letter-spacing:.16em}
.journal-top button{min-height:44px;border:0;background:none;font-size:14px;padding:10px 0 10px 15px}
.journal-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.journal-heading h2{font-size:clamp(32px,5vw,48px);line-height:1.05}
.journal-heading h2 em{font-weight:400;color:#a64d34}
.journal-heading p{font-size:16px;line-height:1.65;margin:18px 0 25px;max-width:480px}
.journal-stamp{flex-shrink:0;border:2px solid #ad5e4366;outline:1px solid #ad5e4366;outline-offset:4px;width:108px;height:108px;display:flex;flex-direction:column;justify-content:center;text-align:center;border-radius:50%;font-size:14px;line-height:1.4;letter-spacing:.08em;color:#a75c43;transform:rotate(12deg);font-weight:700}
.journal-stamp span{font-size:10px;margin-top:6px}
.journal-stamp.complete{color:#247068;border-color:currentColor;outline-color:currentColor}
.journal-progress{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:16px 0;border-top:1px solid #123f4926;margin-bottom:12px;font-size:14px}
.progress-track{width:35%;height:4px;background:#123f4914;border-radius:4px;overflow:hidden}
.progress-track>span{height:100%;width:0;display:block;background:#a8593c;transition:width .4s}
.journal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.find-card{padding:18px 13px 15px;border:1px dashed #123f492b;border-radius:4px;min-height:176px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.find-card.found{background:#fffcf5;border-style:solid;border-color:#d6ccbb;box-shadow:1px 3px 0 #123f490b}
.find-card-number{font-size:12px;letter-spacing:.12em;color:#657473}
.find-card-icon{font-size:32px;height:38px;line-height:1.2}
.find-card h3{font:400 19px/1.12 Georgia,serif;margin:0}
.find-card p{font-size:14px;line-height:1.45;margin:0;color:#526767}
.find-card.unknown .find-card-icon{font-family:Georgia,serif;color:#9c9e8d}
.find-card.secret{background:#e3e9da;border-style:solid;justify-content:center}
.find-card.secret button{border:0;border-bottom:1px solid currentColor;padding:8px 0;background:none;text-align:left;font-size:14px;min-height:44px}
.journal-reward{margin-top:20px;padding:18px 20px;background:#ecd7a0;display:flex;gap:18px;align-items:center;border-radius:3px}
.journal-reward>span{font-size:38px;color:#a14f32}.journal-reward strong{font:400 22px/1.2 Georgia,serif}.journal-reward p{font-size:14px;line-height:1.5;margin:7px 0 0}
.journal-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid #123f4926;margin-top:25px;padding-top:16px}
.journal-bottom p{font-size:12px;line-height:1.5;color:#566d6d;margin:0}
.journal-bottom button{border:0;background:var(--ink);color:#fff9e8;padding:12px 17px;border-radius:25px;font-size:14px;min-height:44px;white-space:nowrap}
@keyframes music-wave{to{transform:scaleY(.35)}}
@keyframes star-breathe{to{opacity:.35;transform:scale(.7)}}
@keyframes cloud-puff{to{translate:0 -60px;opacity:0;rotate:25deg}}
@keyframes collect-find{to{transform:translateY(-90px) rotate(15deg) scale(.15);opacity:0}}
@keyframes notice-in{from{opacity:0;translate:0 8px}}
@media(max-width:1050px){#room .stage-kicker{max-width:30%;font-size:11px;top:20px;line-height:1.5}#room .speech{font-size:16px;padding:10px;left:76%;width:21%}.room-toolbar{max-width:66%;right:3%}.room-toolbar button{padding:9px 11px;gap:6px}}
@media(max-width:700px){
 #room .stage-kicker{left:0;width:100%;max-width:none;text-align:center;top:16px;font-size:10px}
 .room-toolbar{left:10px;right:10px;top:39px;max-width:none;justify-content:center;gap:5px;flex-wrap:nowrap}.pocket-word{display:none}
 .room-toolbar button{font-size:14px;padding:8px 11px;gap:6px;min-height:44px}#find-count{padding-left:6px}
 #room h1{top:101px}#room .stage-intro{top:calc(112px + 24vw)}
 #room .speech{top:calc(163px + 24vw);left:10%;width:80%;max-width:none;font-size:15px;padding:8px 12px}
 #room{--stage-height:clamp(710px,calc(100svh - 72px),820px);--char-size:min(108vw,440px,calc((var(--stage-height)*.76 - 223px - 24vw)*1.19))}
 #room .is-night .stage-intro{color:#faf0cc}.paper-moon{width:38px;right:10%;top:38%}
 .find-notice{left:5%;bottom:26%;max-width:70%;padding:10px 14px;font-size:14px}.find-notice strong{font-size:17px}
 #pocket-journal{padding:22px 20px}.journal-heading{gap:15px}.journal-heading p{font-size:16px}.journal-stamp{width:76px;height:76px;font-size:10px}.journal-stamp span{font-size:9px}
 .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.find-card{min-height:170px;padding:15px 12px}.journal-bottom{flex-wrap:wrap;gap:14px}.journal-progress{font-size:14px;gap:12px}.progress-track{width:28%}
}
@media(max-width:360px){.room-toolbar button{font-size:13px;padding:8px}.room-toolbar #find-count{border:0;padding-left:2px}.journal-stamp{display:none}}
@media(prefers-reduced-motion:reduce){.night-sky,.progress-track>span,.room-toolbar button{transition:none}.sky-star,.cloud-puff,.music-bars i,.find-notice{animation:none!important}.cloud-puff{display:none}}
/* A reward visitors can anticipate, open, personalize and keep. */
.keeper-reward{margin:0 0 24px;padding:24px;background:#ede1bc;border:1px solid #cfbc85;border-radius:5px}
.reward-summary{display:flex;gap:18px;align-items:flex-start}.reward-seal{font:48px/1 Georgia,serif;color:#ad593c}
.reward-eyebrow{font:12px/1.5 Arial,sans-serif;letter-spacing:.12em;margin:0 0 10px}
.reward-summary h3{font:400 29px/1.15 Georgia,serif;margin:0 0 12px}.reward-summary p:last-child{font-size:16px;line-height:1.55;margin:0;max-width:620px}
.reward-primary{border:0;border-radius:25px;background:#123f49;color:#fff8e8;padding:13px 22px;min-height:46px;font-size:15px;cursor:pointer}
#claim-reward{margin:20px 0 0 66px}.reward-primary:disabled{opacity:.55;cursor:default}
.keeper-letter{font:18px/1.7 Georgia,serif;margin:24px 0;padding:24px 26px;background:#fffaf0;border-left:3px solid #b96543}
.keeper-letter p{margin:0 0 15px}.keeper-letter p:last-child{margin:0}.letter-signature{font-style:italic;color:#995035}
.keeper-card{display:block;position:relative;background:#f7f1e4;border:0;outline:0;padding:0;margin:24px -8px 0;box-shadow:0 8px 20px #183e4920;overflow:hidden;transform:rotate(-.35deg)}
#keeper-art{display:block;width:100%;height:auto;aspect-ratio:8/5}
.keeper-card-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.keeper-personalize{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:25px;align-items:center}.keeper-personalize label{grid-column:1/-1;font-size:15px}.keeper-personalize label span{color:#59706e}.keeper-personalize input{font-family:inherit;font-size:16px;line-height:1.4;min-width:0;width:100%;border:1px solid #b8aa86;border-radius:3px;padding:12px;color:#123f49;background:#fffaf0}
.reward-help{font-size:13px;line-height:1.5;color:#486562;margin:13px 0 0}.room-toolbar .keeper-member{border-color:#ac7932;background:#f2d27f}
.just-opened .keeper-letter{animation:letter-open .65s ease-out both}.just-opened .keeper-card{animation:letter-open .7s .12s ease-out both}
@keyframes letter-open{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:700px){.keeper-reward{padding:18px 15px}.reward-summary{gap:10px}.reward-seal{font-size:32px}.reward-summary h3{font-size:25px}#claim-reward{margin-left:0;width:100%}.keeper-letter{padding:20px 16px;font-size:17px}.keeper-card{padding:0;margin:20px -8px 0;border:0}.keeper-card h4{font-size:24px;margin:16px 0}.keeper-card .reward-eyebrow{font-size:9px}#keeper-card-name{font-size:18px}.keeper-card small{font-size:9px}.keeper-personalize{grid-template-columns:1fr}.keeper-personalize .reward-primary{width:100%}}
@media(prefers-reduced-motion:reduce){.just-opened .keeper-letter,.just-opened .keeper-card{animation:none}}

.keeper-reward{background:#f2ebdc;border-color:#d2c7af}
.keeper-letter{background:#fbf7ed;border-left:0;border-top:1px solid #b9b09b;border-bottom:1px solid #b9b09b;padding:25px 8px;margin:24px 0;color:#234d54}
.keeper-letter p:first-child{font-size:24px;font-style:italic;color:#a34b32}
.letter-signature{font-size:16px}.keeper-personalize{margin-top:28px}
@media(max-width:700px){.keeper-letter{padding:20px 4px}.keeper-card{transform:none}}
