:root{color-scheme:light;--ink:#513c29;--cream:#fff7df;--gold:#ffca46;--line:#282739;font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#b29a70;color:var(--ink);-webkit-text-size-adjust:100%}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #167f83;outline-offset:5px}img{display:block}button img{pointer-events:none}h1,h2,h3,p{margin:0}[hidden]{display:none!important}
.experience{position:relative;isolation:isolate;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#c2a26d}
.scenery,.scenery>img,.sunlight,.shade,.motes,.scene-curtain,.camera-flash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scenery{z-index:-2}.scenery>img{object-fit:cover;object-position:50% 62%;transition:opacity .35s}.sunlight{background:linear-gradient(120deg,#ffdb8d44,transparent 50%);mix-blend-mode:screen}.shade{background:linear-gradient(#49371c30 0%,#fff2c940 18%,transparent 40%,transparent 65%,#3b301a88 100%)}.motes i{position:absolute;width:5px;height:5px;background:#fff9c7;border-radius:50%;box-shadow:0 0 12px #fff8c9;opacity:0;animation:dust 9s linear infinite}.motes i:nth-child(1){left:12%;top:66%}.motes i:nth-child(2){left:80%;top:44%;animation-delay:2s}.motes i:nth-child(3){left:66%;top:80%;animation-delay:5s}.motes i:nth-child(4){left:26%;top:32%;animation-delay:4s}.motes i:nth-child(5){left:93%;top:70%;animation-delay:1s}.motes i:nth-child(6){left:48%;top:48%;animation-delay:7s}@keyframes dust{0%,100%{opacity:0;transform:translate(0,0)}25%,65%{opacity:.6}90%{transform:translate(-20px,-90px);opacity:0}}
.hud{position:absolute;left:0;right:0;top:0;z-index:8;display:flex;justify-content:space-between;align-items:flex-start;padding:max(20px,env(safe-area-inset-top)) clamp(20px,4vw,56px) 0}.brand{font-size:13px;font-weight:800;letter-spacing:.12em;color:#fff7e5;text-shadow:0 2px 5px #392409;line-height:1.8}.brand span{padding:0 5px;color:#ffdd76}.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.08em}.tool-button{border:2px solid var(--line);border-radius:16px;background:#627b62;box-shadow:0 4px 0 #323e32;padding:7px 10px;color:#fff8e6;display:grid;justify-items:center;gap:1px;font-size:10px;font-weight:800;min-width:52px;min-height:54px}.tool-button img{width:26px;height:26px;object-fit:contain}
.chapter-track{position:absolute;top:27px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:6}.chapter{display:grid;justify-items:center;gap:5px;color:#fff9e7;font-size:10px;letter-spacing:.12em;text-shadow:0 1px 3px #40260c}.chapter>img{width:32px;height:32px;object-fit:contain;padding:7px;border:2px solid #ffe6ad77;background:#483f3899;border-radius:50%;opacity:.65}.chapter.active>img,.chapter.done>img{opacity:1;background:#df9d24;border-color:#ffedc3;box-shadow:0 0 0 3px #382a2144}.chapter-track>i{height:1px;width:20px;background:#fce8c47a;margin-top:-17px}
.scene-heading{position:absolute;top:18%;left:50%;width:min(90%,650px);transform:translateX(-50%);text-align:center;pointer-events:none}.eyebrow{font-weight:750;font-size:12px;letter-spacing:.16em}.scene-heading .eyebrow{color:#fff8e5;text-shadow:0 2px 8px #493318}.scene-heading h1{font-size:clamp(38px,4.6vw,64px);font-weight:950;line-height:1.26;letter-spacing:.07em;color:#fff5d4;text-shadow:0 3px 0 #724b2b,0 6px 20px #42250f8a;margin-top:12px;text-wrap:balance}
.speech{position:absolute;top:43%;left:50%;z-index:3;transform:translateX(-50%);max-width:calc(100% - 42px);width:max-content;border:2px solid #664f35;background:#fff8e9f5;box-shadow:0 4px 0 #5c412537;border-radius:20px;padding:10px 20px;font-weight:750;font-size:15px;text-align:center;line-height:1.5}.speech:after{content:"";position:absolute;bottom:-9px;left:53%;width:14px;height:14px;background:#fff8e9;transform:rotate(45deg);border-bottom:2px solid #664f35;border-right:2px solid #664f35}
.actor-position{position:absolute;left:50%;bottom:124px;transform:translateX(-50%);width:min(92vw,390px);aspect-ratio:1;transition:opacity .35s;z-index:2}.bear{position:absolute;inset:0;border:0;padding:0;background:none;width:100%;height:100%;border-radius:45%;user-select:none}.bear img{width:100%;height:100%;object-fit:contain;pointer-events:none}.ground-shadow{position:absolute;left:24%;right:24%;bottom:16.7%;height:6%;background:#4b3c2890;border-radius:50%;filter:blur(5px);z-index:-1}.touch-hint{position:absolute;top:43%;right:15%;width:45px;height:45px;background:#75904fe8;border:2px solid #fff8ce;border-radius:50%;padding:8px;box-shadow:0 3px 0 #3f522c;pointer-events:none;animation:hint 1.5s ease-in-out infinite}.touch-hint img{width:100%;height:100%}@keyframes hint{50%{transform:translateY(-7px)}}.reaction{position:absolute;left:52%;top:15%;width:50px;height:50px;padding:8px;background:#ec7896;border-radius:50%;opacity:0;pointer-events:none}.reaction img{width:100%;height:100%}.reaction.active{animation:heart 1s ease-out forwards}@keyframes heart{0%{transform:translateY(15px) scale(.6);opacity:0}20%{opacity:1;transform:translateY(0) scale(1)}90%{opacity:1}100%{opacity:0;transform:translateY(-45px) scale(.9)}}
.controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 36px),400px);z-index:5;text-align:center}.controls>p:first-child{color:#fff9e7;text-shadow:0 1px 5px #2a210d;font-size:14px;font-weight:700;line-height:1.7;margin-bottom:12px;min-height:24px}.primary-button{position:relative;display:flex;justify-content:center;align-items:center;gap:13px;width:100%;min-height:64px;padding:12px 28px;border:16px solid transparent;border-image:url('media/story/button-gold.png') 38 38 44 38 fill stretch;border-image-width:20px 20px 25px 20px;background:none;font-size:21px;font-weight:900;line-height:1.2;text-shadow:0 1px #fff3a3;transition:filter .15s,translate .15s}.primary-button:active:not(:disabled){translate:0 3px;filter:brightness(.97)}.primary-button:disabled{filter:saturate(.6);opacity:.85}.primary-button img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 1px #b06a1b);flex-shrink:0}.primary-button img.rice-icon{width:50px;height:50px;margin-block:-12px;filter:drop-shadow(0 2px 3px #9a6f35)}.footer-links{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:10px;color:#fff9e4;text-shadow:0 1px 4px #423222}.footer-links button{border:0;background:#483c2770;color:#fff9e5;border-radius:20px;padding:7px 12px;min-height:36px;font-size:11px}.loading-error{background:#fff3db;color:#86422d;font-size:13px;padding:8px;border-radius:10px}
.scene-curtain{z-index:12;background:#f9e8c7;opacity:0;transition:opacity .35s}.scene-curtain.active{opacity:1}.camera-flash{z-index:11;background:#fff9e9;opacity:0}.camera-flash.active{animation:flash .6s ease-out}@keyframes flash{0%{opacity:0}15%{opacity:.9}100%{opacity:0}}
.viewfinder{position:absolute;inset:29% max(24px,calc((100% - 680px)/2)) 245px;z-index:1;pointer-events:none}.viewfinder i{position:absolute;width:30px;height:30px;border:3px solid #fff8da;filter:drop-shadow(0 2px 2px #46332380)}.viewfinder i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.viewfinder i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}.viewfinder i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.viewfinder i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}.viewfinder>span{position:absolute;bottom:15px;width:100%;text-align:center;color:white;font-size:12px;letter-spacing:.13em;text-shadow:0 1px 5px #392b18}.place-selector{position:absolute;bottom:175px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:6;background:#362b25a6;padding:5px;border-radius:28px;width:max-content;max-width:calc(100% - 24px)}.place-selector button{border:1px solid transparent;border-radius:22px;color:#fff7df;background:transparent;min-height:42px;padding:8px 14px;font-size:12px;white-space:nowrap;font-weight:750}.place-selector button[aria-pressed=true]{color:#513823;background:#ffdb79;border-color:#ffeec4;box-shadow:0 2px 0 #a77026}
[data-scene=photo] .actor-position{opacity:0;pointer-events:none}[data-scene=photo] .speech{display:none}[data-scene=photo] .scene-heading{top:15%}[data-scene=photo] .scene-heading h1{font-size:clamp(32px,4vw,50px)}[data-scene=reveal] .scene-heading,[data-scene=reveal] .actor-position,[data-scene=reveal] .speech{display:none}[data-scene=reveal] .shade{background:#3e331bb3}
.reveal{position:absolute;inset:105px 20px 174px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;perspective:1200px}.reveal-heading{text-align:center;color:#fff3cd;text-shadow:0 2px 5px #37270a}.reveal-heading p{font-size:12px;letter-spacing:.15em;margin-bottom:6px}.reveal-heading h2{font-size:28px;letter-spacing:.05em}.postcard{width:min(100%,345px);aspect-ratio:1/1.04;border:0;padding:0;background:none;perspective:1200px;flex-shrink:1;min-height:0;filter:drop-shadow(0 12px 20px #1d150c70);transform:rotate(-3deg);animation:card-in .6s ease-out}.postcard-inner{display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s}.postcard[aria-pressed=true] .postcard-inner{transform:rotateY(180deg)}.postcard-front,.postcard-back{position:absolute;inset:0;background:#fff8e6;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:18px solid transparent;border-image:url('media/story/card-frame.png') 32 fill stretch;border-image-width:18px;display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:18px}.postcard-front>img{width:100%;height:68%;object-fit:cover;border-radius:6px}.card-caption{display:flex;flex-direction:column;padding:10px 9px;text-align:left;gap:4px}.card-caption small{font-size:8px;letter-spacing:.12em;color:#8c765a}.card-caption strong{font-size:23px;font-weight:850;letter-spacing:.1em}.card-caption>span{font-size:10px;color:#806951}.postcard-back{transform:rotateY(180deg);text-align:left;padding:17px 10px;gap:14px;background:#fff5d8}.postcard-back>small{font-size:11px;letter-spacing:.12em}.postcard-back>strong{font-size:25px;line-height:1.5}.postcard-back>span:not(.stamp){font-size:13px;line-height:1.9}.postcard-back em{font-size:12px;text-align:right}.stamp{position:absolute;right:12px;top:14px;width:40px;height:45px;padding:8px;background:#eb9ca8;border:3px dotted #fff4d8}.stamp img{width:100%;height:100%;object-fit:contain}.sample-note{color:#efe2c2;font-size:10px;text-align:center}@keyframes card-in{from{opacity:0;transform:translateY(45px) rotate(-8deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}
dialog{border:0;padding:0;background:transparent;color:var(--ink);width:min(calc(100% - 30px),440px);max-height:calc(100svh - 50px);overflow:auto;border-radius:22px;overscroll-behavior:contain}dialog::backdrop{background:#242218ad;backdrop-filter:blur(5px)}.guide-panel{position:relative;padding:32px 23px 24px;background:#fff8e4;border:15px solid transparent;border-image:url('media/story/panel.png') 20 fill stretch;border-image-width:18px}.guide-panel>.eyebrow{font-size:10px;color:#8b6c3a}.guide-panel>h2{font-size:29px;line-height:1.4;margin:8px 0 26px}.close-button{position:absolute;top:0;right:0;width:42px;height:42px;background:#62657d;border:2px solid #282739;border-radius:14px;color:white;font-size:32px;line-height:1;box-shadow:0 3px 0 #282739}.guide-steps{list-style:none;padding:0;margin:0;display:grid;gap:20px}.guide-steps li{display:flex;align-items:flex-start;gap:13px}.guide-steps img{width:40px;height:40px;padding:8px;background:#788d64;border:2px solid #413d32;border-radius:12px;flex-shrink:0}.guide-steps h3{font-size:16px;margin-bottom:5px}.guide-steps p,.opening-note p{font-size:13px;line-height:1.85}.opening-note{border-top:1px solid #decca5;margin:25px 0 18px;padding-top:18px}.opening-note strong{font-size:16px}.opening-note p{margin-top:8px;color:#735c42}.guide-panel .primary-button{font-size:17px;min-height:58px}.information-link{display:block;text-align:center;color:#796348;font-size:12px;margin-top:17px;text-underline-offset:4px}.no-script{position:fixed;inset:auto 20px 20px;background:#fff4d6;border:2px solid #675033;padding:20px;z-index:30;line-height:2}.no-script a{color:inherit}
@media(min-width:800px){.actor-position{width:min(46vh,410px);bottom:95px}.scene-heading{top:21%}.scene-heading h1 br{display:none}.speech{top:47%;left:65%}.controls{bottom:18px}.scenery>img{object-position:50% 58%}.reveal{inset:100px 20px 175px}.postcard{width:min(35vh,340px);min-height:240px}.reveal-heading h2{font-size:27px}}
@media(max-width:650px){.hud{padding-top:max(18px,env(safe-area-inset-top))}.chapter-track{top:92px;gap:12px}.chapter-track>i{width:24px}.chapter>img{width:30px;height:30px}.chapter>span{font-size:9px}.scene-heading{top:21%}.scene-heading h1{font-size:39px}.scene-heading .eyebrow{font-size:10px}.speech{top:44%;font-size:14px}.reveal{inset:165px 22px 177px;gap:13px}.reveal-heading h2{font-size:25px}[data-scene=photo] .scene-heading{top:21%}.viewfinder{top:37%}.postcard{max-width:320px}}
@media(max-height:710px){.experience{min-height:520px}.hud{padding-top:12px}.chapter-track{top:80px}.scene-heading{top:25%}.scene-heading h1{font-size:32px;margin-top:7px}.scene-heading .eyebrow{font-size:9px}.actor-position{width:min(78vw,310px);bottom:112px}.speech{top:46%;padding:7px 14px;font-size:12px}.controls{bottom:10px}.controls>p:first-child{font-size:12px;margin-bottom:7px}.primary-button{min-height:59px;font-size:18px}.footer-links{margin-top:6px;font-size:9px}.reveal{inset:133px 30px 155px;gap:8px}.reveal-heading h2{font-size:21px}.reveal-heading p{font-size:10px}.postcard{max-width:245px;min-height:0}.card-caption{padding:7px 4px;gap:3px}.card-caption strong{font-size:19px}.card-caption>span{font-size:8px}.postcard-back{padding:9px 4px;gap:7px}.postcard-back>strong{font-size:21px;line-height:1.2}.postcard-back>span:not(.stamp){font-size:11px;line-height:1.7}.postcard-back em{font-size:10px}.place-selector{bottom:157px}.viewfinder{bottom:220px;top:40%}.sample-note{font-size:9px}[data-scene=photo] .scene-heading{top:25%}[data-scene=photo] .scene-heading h1{font-size:29px}}
.place-selector{bottom:200px}.viewfinder{bottom:270px}
[data-action=greet] .speech{visibility:hidden}
@media(max-height:710px){.place-selector{bottom:185px}.viewfinder{bottom:248px}.actor-position{width:min(69vw,250px)}.speech{top:42%;font-size:11px;padding:6px 12px}.scene-heading h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motes{display:none}.reaction.active{opacity:1}.camera-flash.active{animation:none;opacity:.2}.postcard[aria-pressed=true] .postcard-inner{transform:none}.postcard[aria-pressed=true] .postcard-front{visibility:hidden}.postcard[aria-pressed=true] .postcard-back{transform:none;backface-visibility:visible}.scene-curtain.active{opacity:0}}