@font-face{font-family:r5-body;src:url('/assets/r5/body.woff2')}@font-face{font-family:r5-bold;src:url('/assets/r5/bold.woff2')}@font-face{font-family:r5-heavy;src:url('/assets/r5/heavy.woff2')}@font-face{font-family:r5-title;src:url('/assets/r5/title.woff2')}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#50172b;color:#78263b;font-family:r5-body,'Noto Sans TC',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #0aa58e;outline-offset:3px}body{display:flex;flex-direction:column;align-items:center}#app{width:100%;max-width:480px;min-height:100svh}.screen{position:relative;width:100%;aspect-ratio:750/1334;overflow:hidden;background:#fffcf4}.scene-art{display:block;width:100%;height:100%}.scene-hit{position:absolute;z-index:4;background:transparent;border:0;color:transparent;padding:0;font-size:1px;border-radius:6px}.scene-hit:hover{background:#ffffff0b}.scene-hit:focus-visible{outline:3px solid #07a990}.demo-tools{padding:14px 20px 20px;background:#50172b;color:#fffcf4;font-size:13px;line-height:1.6}.demo-tools>div{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.demo-tools button{background:none;border:0;color:#fffcf4;text-decoration:underline;padding:7px 4px}.demo-tools details{margin-top:10px}.demo-tools summary{cursor:pointer;text-align:center}.screen-index{display:grid;grid-template-columns:1fr 1fr;gap:4px}.screen-index button{text-align:left;font-size:12px}.demo-tag{color:#f4bfc9;text-align:center;font-size:12px}.capture-surface{position:absolute;left:10%;top:6.146927%;width:80%;height:79.96002%;z-index:2;background:#fff}.capture-surface canvas{width:100%;height:100%;display:block}.camera-hit{z-index:6}.camera-status{position:absolute;top:1.5%;left:25%;width:50%;height:3.5%;text-align:center;color:#fffcf4;font:clamp(11px,2.9vw,17px)/1.6 r5-bold;z-index:6;background:#78263b}.tracking-guide{pointer-events:none;position:absolute;z-index:3;left:33%;top:31%;width:34%;height:24%;opacity:0;transition:opacity .2s}.tracking-guide.show{opacity:.8}.tracking-guide:before,.tracking-guide:after{content:'';position:absolute;width:25%;height:17%;border-color:#fffcf4;border-style:solid}.tracking-guide:before{top:0;left:0;border-width:3px 0 0 3px}.tracking-guide:after{bottom:0;right:0;border-width:0 3px 3px 0}.shutter-hit:disabled{background:#78263b88;border-radius:50%}.record-stop{pointer-events:none;position:absolute;left:46.8%;top:91.65%;width:6.4%;height:3.6%;z-index:5;background:#fffcf4;border-radius:4px}.result-player{position:absolute;object-fit:contain;z-index:3;background:#78263b}.review-badge{position:absolute;top:0;left:0;right:0;z-index:9;text-align:center;padding:3px;background:#78263bd9;color:#fff;font-size:11px;pointer-events:none}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(90vw,430px);background:#fffcf4;color:#78263b;border:2px solid #78263b;padding:12px 18px;z-index:50;border-radius:2px;box-shadow:4px 4px #78263b;display:none;font-size:15px}.notice-dialog{border:2px solid #78263b;background:#fffcf4;color:#78263b;width:min(86vw,390px);padding:28px;box-shadow:6px 6px #50172b;line-height:1.75}.notice-dialog::backdrop{background:#78263bea}.notice-dialog h2{font-family:r5-heavy;margin:0 0 14px;font-size:23px}.notice-dialog p{margin:0 0 22px}.notice-dialog button{display:block;width:100%;padding:11px;background:#eeea28;border:2px solid #78263b;color:#78263b;font-family:r5-bold;box-shadow:3px 3px #78263b}.notice-dialog .secondary{background:#fffcf4;margin-top:12px;box-shadow:none}.loading-pulse{animation:pulse 1s ease-in-out infinite alternate}@keyframes pulse{to{opacity:.5}}@media(min-width:600px){#app{box-shadow:0 0 70px #22081366}.camera-status{font-size:17px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

.shutter.recording:after{content:"";display:block;width:46%;height:46%;margin:auto;background:#fffaf3;border-radius:4px}.loading-active .scene-art image{animation:loading-breathe 1s ease-in-out infinite alternate}@keyframes loading-breathe{to{opacity:.78}}

.tracking-guide.show{background:linear-gradient(#fffcf4,#fffcf4) left top/25% 3px no-repeat,linear-gradient(#fffcf4,#fffcf4) left top/3px 17% no-repeat,linear-gradient(#fffcf4,#fffcf4) right top/25% 3px no-repeat,linear-gradient(#fffcf4,#fffcf4) right top/3px 17% no-repeat,linear-gradient(#fffcf4,#fffcf4) left bottom/25% 3px no-repeat,linear-gradient(#fffcf4,#fffcf4) left bottom/3px 17% no-repeat,linear-gradient(#fffcf4,#fffcf4) right bottom/25% 3px no-repeat,linear-gradient(#fffcf4,#fffcf4) right bottom/3px 17% no-repeat}.tracking-guide:before,.tracking-guide:after{display:none}

/* The experience is a single 9:16 viewport, sized by height on desktop. */
html,body{width:100%;height:100%;overflow:hidden}body{height:100dvh;justify-content:center}#app{width:min(100vw,calc(100dvh * 9 / 16));max-width:none;min-height:0;aspect-ratio:9/16;height:auto;max-height:100dvh;overflow:hidden}.screen{height:100%;aspect-ratio:9/16}.demo-tools,.review-badge{display:none!important}.load-error{padding:32px;color:#fffcf4}.load-error button{padding:12px 24px}
/* Motion follows the KV: print layers, concert notes, responding characters. */
.screen{animation:page-arrive .42s cubic-bezier(.2,.8,.2,1) both;isolation:isolate}
.scene-art [data-asset]{transform-box:fill-box;transform-origin:center;will-change:transform}
.motion-note{animation:note-beat 2.6s ease-in-out infinite}.motion-note:nth-child(2n){animation-delay:-.65s}
.motion-beer{animation:beer-response 8s ease-in-out infinite}.motion-chicken{animation:chicken-cue 8s ease-in-out infinite;transform-origin:50% 90%!important}
.motion-dj{animation:dj-cue 8s ease-in-out infinite;transform-origin:50% 90%!important}
.motion-bottle{animation:bottle-sway 8s ease-in-out infinite;transform-origin:50% 95%!important}
.motion-heart{animation:heart-answer 8s ease-in-out infinite}
.motion-gate{animation:gate-arrive .75s cubic-bezier(.16,1,.3,1) .08s backwards}
.modal-motion{transform-origin:375px 667px;animation:paper-open .46s cubic-bezier(.16,1,.3,1) both}
.hero-webgl{opacity:0;pointer-events:none;transition:opacity .25s}.hero-webgl.ready{opacity:1}.replaced-by-webgl{visibility:hidden;animation:none!important}
[data-screen-id="01-home"] [data-asset="L1-21.webp"],[data-screen-id="01-home"] [data-asset="L1-20.webp"]{transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform .3s ease-out}
.scene-hit[data-action="choose"]:not(.camera-hit),.scene-hit[data-action="permission"],.scene-hit[data-action="save"],.scene-hit[data-action="draw"]{overflow:hidden;clip-path:polygon(4% 0,96% 0,100% 20%,98% 50%,100% 80%,96% 100%,4% 100%,0 80%,2% 50%,0 20%)}
.scene-hit[data-action="choose"]:not(.camera-hit):after,.scene-hit[data-action="permission"]:after,.scene-hit[data-action="save"]:after,.scene-hit[data-action="draw"]:after{content:'';position:absolute;inset:-20% -45%;background:linear-gradient(110deg,transparent 43%,#fff6 50%,transparent 57%);transform:translateX(-85%);animation:ticket-glint 5s ease-in-out infinite 1.2s;pointer-events:none}
.scene-hit:active{background:#78263b20}.scene-hit:hover{background:#fff2}
[data-screen-id="02-choose"] .scene-art>g[data-layer^="03 Choice"]{animation:card-arrive .6s cubic-bezier(.16,1,.3,1) .08s backwards}
[data-screen-id="02-choose"] .scene-art>g[data-layer^="05 Choice"]{animation:card-arrive .6s cubic-bezier(.16,1,.3,1) .18s backwards}
[data-screen-id="13-loading"] .modal-motion{animation:paper-open .46s cubic-bezier(.16,1,.3,1) both}
.loading-active .scene-art image{animation:none}.loading-active .motion-note{animation:note-beat 1s ease-in-out infinite!important}
@keyframes page-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes gate-arrive{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes paper-open{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes note-beat{0%,100%{transform:translateY(0) rotate(-3deg)}35%{transform:translateY(-9px) rotate(7deg)}65%{transform:translateY(-2px) rotate(0)}}
@keyframes beer-response{0%,22%,72%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(3deg) translateY(-5px)}39%{transform:rotate(-2deg) translateY(0)}48%{transform:rotate(1deg) translateY(-2px)}}
@keyframes chicken-cue{0%,13%,58%,100%{transform:rotate(0) translateY(0)}21%{transform:rotate(-7deg) translateY(-7px)}29%{transform:rotate(4deg) translateY(0)}41%{transform:rotate(-3deg) translateY(-3px)}}
@keyframes dj-cue{0%,8%,66%,100%{transform:rotate(0)}18%{transform:rotate(-2deg)}27%{transform:rotate(2deg)}42%{transform:rotate(-2deg)}55%{transform:rotate(1deg)}}
@keyframes bottle-sway{0%,45%,90%,100%{transform:rotate(0)}59%{transform:rotate(-3deg)}70%{transform:rotate(2deg)}}
@keyframes heart-answer{0%,27%,64%,100%{transform:scale(1)}34%{transform:scale(1.15) translateY(-3px)}45%{transform:scale(1.04)}53%{transform:scale(1.12) translateY(-2px)}}
@keyframes ticket-glint{0%,68%,100%{transform:translateX(-85%)}88%{transform:translateX(85%)}}
@media(prefers-reduced-motion:reduce){.screen,.scene-art *, .scene-hit:after{animation:none!important;transition:none!important;will-change:auto}.hero-webgl{display:none}}
.effect-carousel{touch-action:pan-y}.effect-carousel .scene-hit[aria-pressed=true]{border-radius:50%;}.effect-carousel .scene-art [data-layer='04 Effect preview']{animation:card-arrive .32s ease-out both}

.notice-dialog .save-original{display:block;max-width:100%;max-height:58dvh;width:auto;height:auto;margin:0 auto 18px;object-fit:contain;-webkit-touch-callout:default;user-select:auto}.notice-dialog{max-height:94dvh;overflow:auto}