:root{--paper: #F0F2EC;--surface: #FFFFFF;--ink: #1D3038;--muted: #58696F;--line: #D2D9D1;--canal: #1E6E86;--paddy: #5C8A36;--glow: #F1B931;--chip: #E3E9E1;--rec: #C9453A;--camera: #0E1517;--wave: #58696F;--seg: rgba(30, 110, 134, .13);--font-display: "Huninn", "Noto Sans TC", system-ui, sans-serif;--font-kai: "LXGW WenKai TC", "DFKai-SB", "BiauKai", "Kaiti TC", serif;--font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--sa-t: env(safe-area-inset-top, 0px);--sa-r: env(safe-area-inset-right, 0px);--sa-b: env(safe-area-inset-bottom, 0px);--sa-l: env(safe-area-inset-left, 0px);--sheet-w: min(380px, 44cqw)}.rot{--sa-l: env(safe-area-inset-top, 0px);--sa-t: env(safe-area-inset-right, 0px);--sa-r: env(safe-area-inset-bottom, 0px);--sa-b: env(safe-area-inset-left, 0px)}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--paper: #10191C;--surface: #172429;--ink: #E5EDEA;--muted: #9BAEAD;--line: #29393D;--canal: #5CB8D2;--paddy: #8DC266;--glow: #F5C855;--chip: #1F3136;--wave: #9BAEAD;--seg: rgba(92, 184, 210, .16)}}*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--camera);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--glow);outline-offset:2px}[hidden]{display:none!important}#ui{position:fixed;top:0;left:0;z-index:4;width:var(--ui-w, 100vw);height:var(--ui-h, 100vh);container-type:size;pointer-events:none}#ui>*{pointer-events:auto}#ui>.hint{pointer-events:none}.rot #ui{left:var(--screen-w, 100vw);transform-origin:0 0;transform:rotate(90deg)}.btn{border:1.5px solid var(--line);background:var(--chip);border-radius:12px;padding:10px 14px;cursor:pointer;min-height:44px}.btn.primary{background:var(--canal);border-color:var(--canal);color:#fff;font-weight:700}.btn.big{font-size:1.15rem;padding:14px 22px;border-radius:16px}.btn.link{background:none;border-color:transparent;color:var(--canal);text-decoration:underline;text-underline-offset:3px}.btn[aria-pressed=true]{border-color:var(--canal);color:var(--canal);font-weight:700}.btn:disabled{opacity:.45;cursor:not-allowed}.start{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;background:var(--paper);display:grid;place-items:center;padding:calc(10px + var(--sa-t)) calc(14px + var(--sa-r)) calc(10px + var(--sa-b)) calc(14px + var(--sa-l))}.start-inner{width:min(1680px,100%);height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,7fr) minmax(0,3fr);row-gap:clamp(8px,2cqh,20px)}.overview{display:flex;flex-direction:column;gap:clamp(4px,1cqh,10px);min-width:0;min-height:0;justify-content:center;justify-self:center;width:min(100%,calc((70cqh - 6.2rem) / 1.42 * 6 + 5 * 10px))}.overview-head{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px}.overview-head b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.1rem,min(2cqw,3.4cqh),1.7rem)}.overview-head span{font-size:clamp(.8rem,1.1cqw,1rem);color:var(--muted)}.overview .toc-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,1.2cqh,14px) clamp(6px,.8cqw,10px)}.overview .toc-label{font-size:clamp(.75rem,min(1.1cqw,2cqh),1rem)}.overview .toc-thumb{border-radius:clamp(6px,.8cqw,12px)}.overview .toc-thumb b{min-width:clamp(20px,2cqw,30px);height:clamp(20px,2cqw,30px);font-size:clamp(.72rem,1.05cqw,.95rem)}.overview>.fine{text-align:center}@container (max-aspect-ratio: 3 / 2){.overview{width:min(100%,calc((70cqh - 9.6rem) / 2.12 * 4 + 3 * 10px))}.overview .toc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.start-text{min-height:0;border-top:1px solid var(--line);padding-top:clamp(6px,1.6cqh,16px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,3cqw,48px);align-items:center}.start-info{display:flex;flex-direction:column;gap:clamp(2px,.8cqh,8px);min-width:0}.start-cta{display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:min(420px,40cqw)}.start-cta .fine{text-align:right}.eyebrow{margin:0;font-size:.8rem;letter-spacing:.08em;color:var(--canal)}h1{margin:0;font-family:var(--font-kai);font-size:clamp(1.5rem,min(6cqh,3.6cqw),3rem);line-height:1.1}.lede{margin:0;color:var(--muted);font-size:clamp(.85rem,2.4cqh,1.02rem)}.pick{margin:0;font-weight:700;color:var(--canal)}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}.fine{margin:0;font-size:.8rem;color:var(--muted)}.fine.credits{font-size:.7rem;margin-top:6px;opacity:.85}.fine.credits a{color:inherit}.warn{margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--glow) 28%,var(--surface));color:var(--ink);font-size:.95rem}.stage{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--camera)}#ui>.stage{position:absolute}.stage[data-mode=flat]{background:radial-gradient(circle at 50% 35%,#3A4A44,var(--camera) 75%)}.stage video{object-fit:cover}.stage canvas{touch-action:none}.hint{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:calc(12px + var(--sa-t)) calc(12px + var(--sa-r)) calc(12px + var(--sa-b)) calc(12px + var(--sa-l));container-type:size}body:has(#sheet:not([hidden])) .hint{padding-right:calc(var(--sheet-w) + 12px)}.frame{width:min(100cqw,100cqh * 3543 / 2480);aspect-ratio:3543 / 2480;--c: rgba(255, 255, 255, .9);--len: clamp(28px, 8cqmin, 56px);background:linear-gradient(var(--c),var(--c)) top left / var(--len) 4px,linear-gradient(var(--c),var(--c)) top left / 4px var(--len),linear-gradient(var(--c),var(--c)) top right / var(--len) 4px,linear-gradient(var(--c),var(--c)) top right / 4px var(--len),linear-gradient(var(--c),var(--c)) bottom left / var(--len) 4px,linear-gradient(var(--c),var(--c)) bottom left / 4px var(--len),linear-gradient(var(--c),var(--c)) bottom right / var(--len) 4px,linear-gradient(var(--c),var(--c)) bottom right / 4px var(--len);background-repeat:no-repeat;animation:breathe 1.8s ease-in-out infinite}@keyframes breathe{50%{transform:scale(.98);opacity:.7}}.hint .hint-first{position:absolute;left:50%;bottom:calc(20px + var(--sa-b));transform:translate(-50%);margin:0;color:#fff;background:#0000008c;padding:6px 14px;border-radius:999px;font-size:1rem;white-space:nowrap}body:has(#sheet:not([hidden])) .hint .hint-first{left:calc((100% - var(--sheet-w)) / 2)}.lost-card,.lost-toast{display:none}.hint.lost{background:#080e108c}.hint.lost .hint-first,.hint.found .hint-first{display:none}.hint.lost .lost-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100cqw - 32px));padding:16px 20px;background:#fffdf4;color:#1d3038;border-radius:18px;box-shadow:0 14px 34px #00000073}.lost-thumb{position:relative;width:112px}.lost-thumb .lost-img{display:block;width:100%;aspect-ratio:3543 / 2480;background:#efe9df center / cover no-repeat;border-radius:6px;box-shadow:0 0 0 3px #fff,0 6px 14px #0000004d}.lost-thumb span{position:absolute;right:-10px;bottom:-10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1e6e86;color:#fff;font-weight:700}.lost-body{display:flex;flex-direction:column;gap:6px;min-width:0}.lost-body p{margin:0}.lost-title{font-family:var(--font-display);font-size:1.2rem;line-height:1.3}.lost-text{font-size:.92rem;color:#3e5157}.lost-tips{display:none;margin:0;padding-left:1.2em;font-size:.9rem;line-height:1.55;color:#3e5157}.hint.tips .lost-tips{display:block}.hint.tips .lost-text{display:none}.lost-state{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;background:#c2622f;color:#fff;border-radius:999px;padding:2px 12px;font-size:.85rem}.lost-state b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f5c855;color:#1d3038;font-size:.8rem}.lost-alt{display:none;align-self:flex-start;color:#1e6e86;font-size:.88rem;pointer-events:auto}.hint.tips .lost-alt{display:inline}.hint.found .frame{--c: #8DC266;animation:none}.hint.found .lost-toast{display:block;position:absolute;left:50%;top:14%;transform:translate(-50%);margin:0;background:#5c8a36;color:#fff;font-weight:700;font-size:1.1rem;border-radius:999px;padding:6px 20px;box-shadow:0 8px 20px #00000059}.tip-lock{margin:0;padding:8px 12px;border-radius:10px;background:#fff6dc;color:#5a4513;font-size:.92rem;line-height:1.5}body.is-lost .story-hud{display:none}.status{position:absolute;z-index:6;left:calc(16px + var(--sa-l));right:calc(16px + var(--sa-r));top:calc(16px + var(--sa-t));margin:0;max-width:560px;background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px #0000004d}.fallback{position:absolute;z-index:6;left:calc(16px + var(--sa-l));top:calc(110px + var(--sa-t))}.debug{position:absolute;z-index:7;left:50%;transform:translate(-50%);top:calc(10px + var(--sa-t));white-space:nowrap;background:#0009;color:#7cf3e0;font:12px/1.4 ui-monospace,Consolas,monospace;padding:4px 8px;border-radius:6px}.page-chip{position:absolute;z-index:5;left:calc(12px + var(--sa-l));top:calc(12px + var(--sa-t));display:flex;align-items:center;gap:8px;border:0;cursor:pointer;background:#0a121499;color:#fff;border-radius:999px;padding:5px 14px 5px 5px;min-height:40px;font-size:.95rem}.page-chip b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:#f5c855;color:#1d3038;font-variant-numeric:tabular-nums}.page-chip small{font-size:.78rem;opacity:.75;padding-left:8px;border-left:1px solid rgba(255,255,255,.3)}.page-chip:hover{background:#0a1214bf}.page-toast{position:absolute;z-index:7;left:50%;top:calc(14% + var(--sa-t));transform:translate(-50%);margin:0;background:#1e6e86;color:#fff;font-weight:700;font-size:1.1rem;border-radius:999px;padding:6px 20px;box-shadow:0 8px 20px #00000059;white-space:nowrap;animation:pop-in .25s ease-out}.toc{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;background:#0000008c;display:grid;place-items:center;padding:calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l))}.toc-card{width:min(820px,100%);max-height:100%;overflow-y:auto;background:var(--surface);color:var(--ink);border-radius:18px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}.toc-head{display:flex;align-items:center;gap:14px}.toc-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.3rem}.toc-note{margin:0;flex:1;font-size:.88rem;color:var(--muted);line-height:1.45}.toc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 10px}.toc-item{width:100%;display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:left;border:0;background:none;padding:0;cursor:pointer;color:var(--ink)}.toc-item:disabled{cursor:default;color:var(--muted)}.toc-thumb{position:relative;display:block;aspect-ratio:3543 / 2480;border-radius:8px;background:var(--chip) center / 100% 100% no-repeat;box-shadow:inset 0 0 0 1px var(--line)}.toc-item:disabled .toc-thumb{background-image:repeating-linear-gradient(0deg,var(--chip) 0 6px,var(--surface) 6px 12px)}.toc-thumb b{position:absolute;left:5px;top:4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:.78rem;background:#0a1214b3;color:#fff}.toc-item.current .toc-thumb{outline:3px solid var(--glow);outline-offset:2px}.toc-item.current .toc-thumb b{background:#f5c855;color:#1d3038}.toc-label{font-size:.85rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){.toc-item:not(:disabled):hover .toc-label{color:var(--canal)}}.toc-label small{display:block;font-size:.72rem;color:var(--muted)}@container (max-width: 640px){.toc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (max-height: 500px){.start .eyebrow,.start .lede,.start-cta .fine,.overview>.fine,.start .tip-lock{display:none!important}.btn.big{font-size:1rem;padding:9px 18px}.start h1{font-size:clamp(1.1rem,3.4cqw,1.5rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.bubble{position:absolute;z-index:6;left:calc(16px + var(--sa-l));top:calc(14px + var(--sa-t));width:min(300px,40cqw);max-height:calc(100% - 28px);background:#fffdf4;color:#1d3038;border:2.5px solid #1E6E86;border-radius:18px;padding:12px 14px;box-shadow:0 10px 26px #0000004d;display:flex;flex-direction:column;gap:8px;animation:pop-in .25s ease-out}@keyframes pop-in{0%{transform:scale(.92);opacity:0}}.bubble{overflow:visible}.bubble:before{content:"";position:absolute;width:16px;height:16px;background:#fffdf4;border:2.5px solid #1E6E86;border-width:0 0 2.5px 2.5px;display:none}.bubble[data-side=right]:before{display:block;left:-9.5px;top:calc(var(--tail, 30px) - 8px);transform:rotate(45deg)}.bubble[data-side=left]:before{display:block;right:-9.5px;top:calc(var(--tail, 30px) - 8px);transform:rotate(-135deg)}.bubble[data-side=top]:before{display:block;bottom:-9.5px;left:calc(var(--tail, 30px) - 8px);transform:rotate(-45deg)}.bubble p{margin:0}.bubble-title{font-family:var(--font-display);font-size:1.12rem;color:#1e6e86}.bubble-text{font-size:1rem;line-height:1.55}.bubble.greeting .bubble-text{font-family:PMingLiU,MingLiU,新細明體,細明體,"Noto Serif TC",Songti TC,serif;font-size:1.6rem;line-height:1.45;font-weight:600;color:#1d3038}.choices{display:flex;flex-direction:column;gap:8px}.choice{display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:12px;padding:10px 12px;min-height:48px;background:#1e6e86;color:#fff;font-weight:700;cursor:pointer}.choice.alt{background:#b85a2b}.choice svg{width:22px;height:22px;flex:none;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.choice small{display:block;font-weight:400;font-size:.78rem;opacity:.92}.story-hud{position:absolute;z-index:5;bottom:calc(12px + var(--sa-b));right:calc(16px + var(--sa-r) + var(--hud-shift, 0px));max-width:calc(100% - 32px - var(--sa-l) - var(--sa-r));display:flex;align-items:center;gap:8px}.dots{display:flex;gap:6px;background:#0a121499;border-radius:999px;padding:6px 8px}.dots button{width:32px;height:32px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:700 14px/1 var(--font-body);font-variant-numeric:tabular-nums;color:#ffffffbf;background:#ffffff29;transition:background .2s,color .2s,transform .2s}.dots button:hover{background:#ffffff4d}.dots button:focus-visible{outline:2px solid #F5C855;outline-offset:2px}.dots button.on{background:#f5c855;color:#1d3038;transform:scale(1.12)}.hud-btn{display:flex;align-items:center;gap:4px;border:0;border-radius:999px;padding:7px 14px;min-height:38px;background:#ffffffeb;color:#1d3038;font-weight:500;cursor:pointer}.hud-btn svg{width:14px;height:14px;fill:#1d3038}.subtitle{position:absolute;z-index:5;left:50%;bottom:calc(16px + var(--sa-b));transform:translate(-50%);width:min(560px,calc(100% - 380px));margin:0;background:#0a1214cc;color:#fff;border-radius:14px;padding:10px 16px;font-size:1.05rem;line-height:1.55;text-align:center}.subtitle em{font-style:normal;color:#f5c855;font-weight:700}body:has(#sheet:not([hidden])) .subtitle,body:has(#sheet:not([hidden])) .story-hud{display:none}.sheet{position:absolute;z-index:5;top:0;bottom:0;right:0;width:var(--sheet-w);overflow-y:auto;background:var(--surface);color:var(--ink);border-radius:20px 0 0 20px;box-shadow:-10px 0 30px #00000040;padding:calc(4px + var(--sa-t)) calc(14px + var(--sa-r)) calc(10px + var(--sa-b)) 14px}.sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface);padding:12px 0 8px}.sheet-title{font-family:var(--font-display);font-size:1.15rem}.sheet-title small{font-family:var(--font-body);font-size:.75rem;color:var(--canal);margin-left:8px}.close{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:var(--chip);cursor:pointer;position:relative}.close:before,.close:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2.5px;border-radius:2px;background:var(--muted);transform:translate(-50%,-50%) rotate(45deg)}.close:after{transform:translate(-50%,-50%) rotate(-45deg)}.sheet-body{display:flex;flex-direction:column;gap:10px}.steps{display:flex;gap:6px}.step{flex:1 1 0;border:1.5px solid var(--line);background:var(--chip);border-radius:10px;padding:6px 8px;cursor:pointer;text-align:left;font-size:.8rem;line-height:1.35}.step b{display:block;font-size:.72rem;color:var(--muted)}.step[aria-selected=true]{border-color:var(--canal);background:var(--surface);box-shadow:inset 0 -3px 0 var(--canal)}.step.done b{color:var(--paddy)}.chars{display:flex;justify-content:center;gap:10px}.ch{flex:1 1 0;max-width:104px;display:flex;flex-direction:column;align-items:center;gap:1px;border:2px solid var(--line);background:var(--paper);border-radius:14px;padding:6px 4px 4px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}.ch .g{font-family:var(--font-kai);font-weight:700;font-size:2.6rem;line-height:1.15}.ch .py{font-size:.85rem;font-weight:700;letter-spacing:.02em}.ch svg{width:30px;height:16px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:currentColor;opacity:.7}.ch svg line{fill:none}.ch.on{background:var(--glow);border-color:var(--glow);color:#1d3038;transform:translateY(-3px)}.waves{display:flex;flex-direction:column;gap:4px}.wave-row{display:grid;grid-template-columns:2.5em 1fr;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}.wave-row canvas{width:100%;height:40px;display:block}.ctrls{display:flex;flex-wrap:wrap;gap:8px}.btn.rec{background:var(--rec);border-color:var(--rec);color:#fff;font-weight:700}.btn.rec.recording{animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--rec) 25%,transparent)}}.guide{margin:0;background:var(--chip);border-radius:12px;padding:10px 12px;font-size:.95rem}.photo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;background:#0000008c;display:grid;place-items:center;padding:calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l))}.photo-card{width:min(760px,100%);max-height:100%;overflow:hidden;background:var(--surface);color:var(--ink);border-radius:18px;padding:12px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}.photo-media{min-height:0;display:grid}.photo-media img{width:100%;height:100%;max-height:calc(100cqh - 56px);object-fit:cover;display:block;border-radius:10px}.photo-side{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;padding:4px 4px 0 0}.photo-text{display:flex;flex-direction:column;gap:6px}.photo-text h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.3rem}.photo-text p{margin:0}.photo-text .meta{font-size:.8rem;color:var(--muted)}.photo-side .btn{align-self:flex-start;margin-top:auto}@container (max-height: 500px){.sheet{padding-top:calc(2px + var(--sa-t))}.sheet-head{padding-block:6px 4px}.sheet-title{font-size:1.02rem}.close{width:34px;height:34px}.sheet-body{gap:7px}.step{padding:4px 6px;font-size:.74rem;line-height:1.3}.step b{display:inline;margin-right:4px}.ch{padding:3px 4px 2px;border-radius:12px}.ch .g{font-size:1.8rem;line-height:1.1}.ch .py{font-size:.74rem}.ch svg{height:12px}.waves{gap:2px}.wave-row canvas{height:24px}.ctrls{gap:6px;flex-wrap:nowrap}.ctrls .btn{min-height:38px;padding:6px 10px;font-size:.88rem;white-space:nowrap}.guide{font-size:.84rem;padding:6px 10px;line-height:1.5}.lede{font-size:.95rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-height:460px){.story-hud{gap:6px}.dots{gap:4px;padding:4px 6px}.dots button{width:28px;height:28px;font-size:13px}.story-hud .hud-btn{padding:6px 12px;font-size:.9rem}}