@font-face{font-family:"Lulu Script";src:url('./assets/fonts/DancingScript.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --paper:#f3eee3;--ink:#282a26;--muted:#706f67;--line:#a8a293;
  --sans:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",system-ui,sans-serif;
  --display:"Iowan Old Style","Songti SC","STSong",Georgia,serif;
  font-family:var(--sans);color:var(--ink);background:var(--paper);font-synthesis:none
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
button:disabled{opacity:.48;cursor:default}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #a14d3e;outline-offset:4px}
button:not(:disabled):hover,a:hover{opacity:.83}
[hidden]{display:none!important}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--paper)}
#site-record{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;font:11px/1.4 var(--sans);color:#615e57;text-shadow:0 1px 4px #fff9ee}
#site-record a{border-bottom:1px solid #a9a394}
#scene{display:block;width:100%;height:100%;touch-action:none}
#brand{position:absolute;left:30px;top:17px;z-index:4;display:flex;align-items:baseline;gap:12px;color:#383c32;text-shadow:0 1px 8px #f5f0e9}
#brand span,.lulu-script{font:600 62px/.95 "Lulu Script",cursive;letter-spacing:-.035em}
#brand small{font:550 17px/1 var(--sans);letter-spacing:.08em}
#explore-note{position:absolute;top:87px;left:30px;z-index:3;margin:0;color:#605f57;font:14px/1.5 var(--sans);letter-spacing:.04em;text-shadow:0 1px 6px #f5f0e9}
#guide-toggle{position:absolute;right:29px;top:22px;z-index:5;min-width:152px;height:58px;display:flex;align-items:center;justify-content:center;gap:11px;padding:0 20px;background:#f9f3e9ec;border:1px solid #635f54;box-shadow:3px 4px 0 #2f302722;font-size:17px;font-weight:650;letter-spacing:.05em;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
#sound-toggle{position:absolute;right:197px;top:22px;z-index:5;display:flex;align-items:center;gap:8px;min-height:58px;padding:0 14px;border:1px solid #968c78;background:#faf5e9d9;font:550 14px var(--sans)}
#sound-toggle>span:first-child{font-size:24px;color:#90664c}
#sound-toggle[aria-pressed=false]>span:first-child{text-decoration:line-through;color:#777166}
#guide-toggle:hover{background:#e7e4d3}
.guide-icon{font-size:23px;font-weight:400;line-height:1;color:#a6513e;transition:transform .25s ease}
#guide-toggle:hover .guide-icon{transform:rotate(45deg)}
#view-controls{position:absolute;right:29px;bottom:23px;z-index:3;display:flex;gap:3px;padding:6px;background:#f8f3e9e6;border:1px solid #8f897c;box-shadow:3px 4px 0 #2f30271f;font:15px/1 var(--sans)}
#view-controls button{min-height:44px;min-width:44px;padding:10px 14px;border-radius:2px}
#view-controls button:hover{background:#dedbcc}
#view-reset{font-size:15px}
#room-back{position:absolute;left:29px;bottom:24px;z-index:5;min-height:58px;padding:12px 21px;background:#f9f3e9ed;border:1px solid #686357;box-shadow:4px 5px 0 #2f302723;font:650 17px/1 var(--sans);letter-spacing:.03em;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
#room-back span{display:inline-block;margin-right:7px;color:#a6513e;font-size:20px;vertical-align:-2px}
#room-back:hover{background:#e8e4d6;opacity:1}
#cabinet-toggle,#hint-toggle{border-left:1px solid #b4ac9b}
#hint-toggle[aria-pressed=false]{color:#8b867b;text-decoration:line-through}
#cursor-note{position:absolute;z-index:3;pointer-events:none;padding:7px 10px;border:1px solid #5f5a50;background:#faf5eb;font:13px var(--sans);white-space:nowrap}
#pet-card{position:absolute;z-index:5;max-width:calc(100% - 24px);padding:0;border-radius:25px;background:#fff8ecee;box-shadow:0 3px 9px #544d361c}
#pet-card[data-intro=true]{width:240px;padding:17px 18px 14px;border:1px solid #a2947c;border-radius:17px;background:#fff9ef url('./assets/textures/paper-grain.webp') center/500px;box-shadow:3px 5px 0 #544d361c}
#pet-intro>span{font:550 12px/1.5 var(--sans);letter-spacing:.06em;color:#8b745d}
#pet-intro h2{margin:6px 0 5px;font:650 26px/1.25 var(--sans);color:#464b3d}
#pet-intro p{margin:0 0 13px;font:15px/1.6 var(--sans);color:#676558}
#pet-action{min-height:46px;padding:10px 19px;border:1px solid #947d66;border-radius:25px;background:#fff8ecee;font:600 16px/1.4 var(--sans);white-space:nowrap;color:#685241}
#pet-card[data-intro=true] #pet-action{width:100%;min-height:44px;background:#ecebdc;border-color:#b8b49d;color:#515b46}
#pet-action:hover{opacity:1;background:#f4e4da;border-color:#a96369}
#pet-find{flex-shrink:0;min-height:46px;margin-top:17px;padding:10px 13px;border:1px dashed #b1997b;border-radius:22px;text-align:left;font:550 15px var(--sans);color:#795e49;background:#fff8ea}
#loading,#load-error{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;background:var(--paper) url('./assets/textures/paper-grain.webp') center/650px;text-align:center}
#loading .loading-title{font:italic 42px var(--display)}
#load-copy,#load-error p{font:13px/1.7 var(--sans);color:var(--muted)}
#load-error p{max-width:430px;padding:0 24px}

#hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}
.hotspot{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:44px;padding:8px 13px 8px 30px;background:#fff9ecee;border:1px solid #837c6b;box-shadow:3px 4px 0 #4034261c;text-align:left;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.hotspot::before{content:'✳';position:absolute;left:8px;top:50%;transform:translateY(-50%);font:17px/1 var(--sans);color:var(--pin-color)}
.hotspot::after{content:'';position:absolute;left:50%;top:100%;height:13px;width:1px;background:var(--pin-color);opacity:.7}
.hotspot span{font:650 18px/1.3 var(--sans)}
.hotspot small{font:12px/1.4 var(--sans);color:#777267;letter-spacing:.04em}
.hotspot:hover,.hotspot:focus-visible,.hotspot.is-selected{opacity:1!important;border-color:var(--pin-color);background:#fffbef}
.hotspot.is-selected::before{content:'●';font-size:10px}
.item-pin span{font-size:17px}
.hotspot.is-beacon{width:43px;height:43px;min-height:43px;padding:0;border:1px solid color-mix(in srgb,var(--pin-color) 65%,#fff);border-radius:50%;clip-path:none;background:#fff9e9b7;box-shadow:0 0 0 4px #fff9e976;animation:beacon-breathe 3s ease-in-out infinite}
.hotspot.is-beacon::before{left:50%;top:50%;transform:translate(-50%,-50%);font-size:21px}
.hotspot.is-beacon.item-pin{width:44px;height:44px;min-height:44px;box-shadow:0 0 0 3px #fff9e976}
.hotspot.is-beacon.item-pin::before{font-size:17px}
.hotspot.is-beacon span,.hotspot.is-beacon small,.hotspot.is-beacon::after{display:none}
@keyframes beacon-breathe{50%{opacity:.66;transform:translateY(-3px)}}

#context-card{position:absolute;left:29px;bottom:24px;z-index:4;width:min(390px,calc(100vw - 58px));padding:20px 23px 21px;background:#fbf6ebed url('./assets/textures/paper-grain.webp') center/610px;border:1px solid #706a5d;box-shadow:6px 7px 0 #26292223;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);animation:card-in .32s ease both}
#context-card::before{content:'';position:absolute;right:0;top:0;width:20px;height:20px;background:#d3c7b0}
#card-eyebrow{display:block;margin:0 0 9px;color:#a75a43;font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
#card-title{margin:0;font:600 24px/1.24 var(--display);letter-spacing:-.015em}
#card-copy{margin:10px 0 19px;color:#56574f;font:15px/1.6 var(--sans)}
#quick-action{display:inline-flex;align-items:center;min-height:50px;padding:12px 20px;background:#2c302a;color:#fff9ee;font:650 16px/1 var(--sans);letter-spacing:.04em;box-shadow:3px 3px 0 #aa6d59}
#quick-action:hover{background:#626d5c;opacity:1}
@keyframes card-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
body[data-close=true] #context-card{bottom:105px}
body[data-view=entry] #context-card{left:30px;top:112px;bottom:auto;width:min(286px,22vw)}
body[data-view=entry] #card-title{font:550 23px/1.5 var(--sans)}
body[data-view=entry] #card-title .lulu-script{font-size:41px;white-space:nowrap}
body[data-ritual=question] #context-card,body[data-ritual=welcome] #context-card{display:none}

#entrance-ritual{position:absolute;inset:0;z-index:5;pointer-events:none}
.speech-defs{position:absolute;overflow:hidden}
.speech-bubble{position:absolute;width:clamp(260px,20vw,338px);padding:34px 26px 49px;animation:bubble-in .38s cubic-bezier(.2,.8,.2,1) both}
.speech-frame,.reply-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(1px 3px 2px #3f46371a);pointer-events:none}
.speech-mobile{display:none}
.speech-ink{fill:none;stroke:#475044;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.speech-bubble p{position:relative;margin:0;font:500 clamp(21px,1.5vw,25px)/1.65 var(--sans);text-align:center;letter-spacing:.035em;color:#343e32}
.speech-bubble .lulu-script{font-size:44px;line-height:1.12;color:#5f7058}
.question-lead,.question-line{display:block}.question-lead{margin-bottom:6px}.question-line{white-space:nowrap}
.speech-left{left:26px;top:31%;width:clamp(270px,17vw,310px)}
.speech-right{right:23px;top:27%;width:clamp(232px,calc(50vw - 65vh),338px)}.speech-right p{font-size:clamp(20px,1.3vw,24px)}.speech-right .speech-frame{transform:scaleX(-1)}
.speech-answer{position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;min-height:78px;min-width:183px;padding:20px 28px 30px;background:none;border:0;font:550 21px/1.2 var(--sans);animation:answer-in .38s .12s ease both;transition:transform .2s}
.speech-answer>span{position:relative}
.speech-answer:hover{opacity:1;transform:translateY(-2px) rotate(-1deg)}
.speech-answer:hover .speech-ink{stroke:#a96149}.speech-answer:focus-visible{outline:2px dashed #5f7058;outline-offset:3px;border-radius:16px}
.answer-right{right:43px;top:51%}.answer-left{left:43px;top:50%}.answer-left .reply-frame{transform:scaleX(-1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes bubble-in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes answer-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

#guide-scrim{position:fixed;inset:0;z-index:6;background:#272a2645;cursor:default}
#bar{position:fixed;z-index:7;top:16px;right:16px;bottom:16px;width:min(414px,calc(100vw - 32px));display:flex;flex-direction:column;gap:0;padding:25px 26px 24px;background:#faf5e9 url('./assets/textures/paper-grain.webp') center/650px;border:1px solid #5f5b50;box-shadow:-9px 11px 0 #2b2d2630;clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,0 100%);overflow:auto;overscroll-behavior:contain;transform:translateX(calc(100% + 34px)) rotate(1deg);opacity:0;visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .35s ease,visibility .35s}
#bar.is-open{transform:translateX(0) rotate(0);opacity:1;visibility:visible}
#bar::before{content:'';position:absolute;right:0;top:0;width:25px;height:25px;background:#d3c7b0}
.guide-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid #9e9889}
.guide-head span{font:italic 18px var(--display);letter-spacing:-.025em}
.guide-head button{min-height:44px;padding:9px 0 9px 12px;font:600 15px var(--sans)}
.bar-location{display:flex;flex-direction:column;align-items:flex-start;padding:24px 0 20px;border-bottom:1px solid #b8b09f}
#location{margin:0 0 8px;font:700 13px/1.4 var(--sans);letter-spacing:.13em;color:#a45240}
#back{min-height:44px;padding:7px 0;font:600 16px var(--sans)}
#hint{font:14px/1.55 var(--sans);color:#68665f}
#station-tabs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px;width:100%}
#station-tabs button{position:relative;min-height:81px;display:flex;align-items:flex-end;padding:14px;border:1px solid #b3aa99;background:#f1e9d9;text-align:left;font:650 16px var(--sans);transition:background .2s,transform .2s}
#station-tabs button::before{content:'0' counter(station);counter-increment:station;position:absolute;top:10px;left:13px;font:italic 18px var(--display);color:#aa654e}
#station-tabs{counter-reset:station}
#station-tabs button:nth-child(2)::before{color:#5b7b82}
#station-tabs button:nth-child(3)::before{color:#8b657e}
#station-tabs button:nth-child(4)::before{color:#71825c}
#station-tabs button::after{content:'↗';position:absolute;right:12px;bottom:12px;color:#77756b}
#station-tabs button:hover{background:#dcd9c7;transform:translateY(-2px);opacity:1}
#station-tabs button.is-current{background:#deddd0;border-color:#777c6d}
#object-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#object-tabs button{min-height:44px;padding:10px 14px;background:#f3eddf;border:1px solid #b6ad9a;font:600 15px var(--sans)}
#object-tabs button[aria-pressed=true]{background:#343a32;color:#fff9ec;border-color:#343a32}
.bar-description{padding:22px 0 21px}
#object-name{color:#a45240;font:700 13px var(--sans);letter-spacing:.12em}
#object-title{margin:6px 0 8px;font:600 29px/1.2 var(--display);letter-spacing:-.02em}
#object-copy{margin:0;font:15px/1.7 var(--sans);color:#57564f}
.bar-actions{display:flex;flex-direction:column;gap:22px;margin-top:auto;border-top:1px solid #b8b09f;padding-top:20px}
.primary-row{display:flex;gap:9px}
.primary{min-height:55px;flex:1;padding:12px 18px;background:#2d302b;color:#fff9ed;border:1px solid #2d302b;text-align:center;font:650 17px var(--sans);letter-spacing:.04em}
.secondary{min-height:55px;padding:10px 14px;border:1px solid #a9a08f;font:600 15px var(--sans);white-space:nowrap}
.bar-actions nav{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:10px 7px;font:600 15px var(--sans)}
.bar-actions nav a{display:flex;align-items:center;min-height:44px;padding-bottom:5px;border-bottom:1px solid #aaa390;white-space:nowrap}
#motion{grid-column:1/-1;justify-self:start;min-height:44px;margin-top:4px;color:#747067;font:14px var(--sans)}
#motion[aria-pressed=true]{text-decoration:underline}

dialog{position:fixed;inset:0;width:min(970px,calc(100% - 60px));max-height:calc(100dvh - 70px);margin:auto;padding:35px 49px 47px;background:var(--paper) url('./assets/textures/paper-grain.webp') center/700px;color:var(--ink);border:1px solid #75716a;box-shadow:9px 13px 0 #27272420;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:#28282466;backdrop-filter:blur(5px)}
.detail-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #a49f95;padding-bottom:22px;font:600 14px var(--sans)}
.detail-head button{min-height:44px;padding:0;font-size:16px}
.detail-head span{font:italic 17px var(--display);color:var(--muted)}
.kicker{font:700 11px var(--sans);letter-spacing:.12em;color:#a45240;margin:32px 0 15px}
dialog h2{font:600 clamp(30px,4vw,52px)/1.25 var(--display);margin:0 0 25px}
#detail-body{font:15px/1.9 var(--sans)}
#detail-body p{max-width:750px;color:#55534d}
#detail-body img{width:100%;height:auto;display:block;margin:25px 0;border:1px solid #ded9cd}
.content-link{border-bottom:1px solid #938a7c;padding-bottom:3px}
.collection{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.collection a{display:flex;flex-direction:column;border:1px solid #c3baab;padding:21px 18px;gap:10px;background:#f9f5eb66}
.collection strong{font:600 23px var(--display)}
.collection span{font:12px var(--sans);color:var(--muted)}
.note-card{border-left:3px solid #ab7278;padding:4px 24px;margin:25px 0}
.empty-state{padding:26px 0;border-block:1px solid #c7c1b4;margin:22px 0}
@media(max-width:650px){
  #brand{left:16px;top:19px;gap:7px}#brand span{font-size:46px}#brand small{font-size:14px}
  #guide-toggle{right:14px;top:16px;min-width:121px;height:49px;padding:0 12px;font-size:14px}
  #sound-toggle{right:14px;top:73px;min-height:44px;padding:0 11px;font-size:13px}
  .guide-icon{font-size:18px}
  #explore-note{left:16px;top:79px;max-width:205px;font-size:12px}
  #view-controls{right:14px;top:auto;bottom:14px;padding:3px;font-size:12px;max-width:calc(100vw - 28px);flex-wrap:wrap;justify-content:flex-end}
  #view-controls button{min-height:44px;min-width:38px;padding:7px 9px}
  #view-reset,#cabinet-toggle,#hint-toggle{font-size:12px}
  #room-back{left:14px;bottom:81px;min-height:48px;padding:10px 15px;font-size:14px}
  #context-card{left:14px;bottom:14px;width:min(355px,calc(100vw - 28px));padding:15px 18px 16px}
  body[data-close=true] #context-card{bottom:144px}
  body[data-view=entry] #context-card{left:14px;right:14px;top:auto;bottom:18px;width:auto;display:flex;justify-content:center;padding:0;background:none;border:0;box-shadow:none;clip-path:none}
  body[data-view=entry] #context-card::before,body[data-view=entry] #context-card>div{display:none}
  body[data-view=entry] #quick-action{min-height:50px;padding:12px 23px;font-size:15px}
  #card-title{font-size:22px}#card-copy{font-size:14px;margin-bottom:15px}
  #quick-action{min-height:46px;font-size:15px}
  .hotspot{padding:7px 10px 7px 27px;min-height:42px}
  .hotspot span{font-size:15px}.hotspot small{display:none}
  .speech-bubble{width:min(278px,calc(100vw - 42px));padding:29px 24px 42px}
  .speech-desktop{display:none}.speech-mobile{display:inline}
  .speech-bubble p{font-size:20px}.speech-bubble .lulu-script{font-size:39px}
  .speech-left{left:16px;top:145px;width:min(278px,calc(100vw - 42px))}.speech-right{right:16px;top:145px;width:min(278px,calc(100vw - 42px))}
  .speech-answer{min-height:75px;min-width:176px;padding:20px 25px 29px;font-size:19px}
  .answer-right{right:18px;top:auto;bottom:92px}.answer-left{left:18px;top:auto;bottom:92px}
  #bar{top:8px;right:8px;bottom:8px;width:min(375px,calc(100vw - 16px));padding:22px 21px}
  dialog{width:calc(100% - 22px);max-height:calc(100dvh - 22px);padding:23px}
  #detail-body{font-size:14px}.collection{grid-template-columns:1fr}
}
@media(max-height:670px){#bar{gap:0;padding-block:18px}.bar-location{padding-block:15px}.bar-description{padding-block:15px}#station-tabs button{min-height:67px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body[data-reduced=true] *,body[data-reduced=true] *::before,body[data-reduced=true] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}