:root{color-scheme:dark;--ink:#121715;--acid:#e9ee72;--white:#f6f7ee;--muted:#c5ccc4;font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--white)}button{font:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--acid);outline-offset:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}.viewer{position:relative;height:100%;height:100dvh;isolation:isolate;overflow:hidden}#panorama{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}#panorama:active{cursor:grabbing}.shade{position:absolute;left:0;right:0;pointer-events:none}.shade-top{top:0;height:220px;background:linear-gradient(#080e13b3,transparent)}.shade-bottom{bottom:0;height:480px;background:linear-gradient(transparent,#0c141bc9 55%,#101617f5)}.header{position:absolute;left:36px;right:36px;top:30px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.brand{display:flex;align-items:center;gap:16px;text-shadow:0 2px 12px #0008}.brand-mark{width:45px;height:45px;border:1px solid #e9ee7270;padding:7px;color:var(--acid)}.brand-mark svg{fill:none;stroke:currentColor;stroke-width:1.3}.eyebrow{font-size:.75rem;letter-spacing:.16em;margin:0 0 7px;color:var(--acid);font-weight:600}h1{font-size:1.25rem;letter-spacing:.07em;margin:0;font-weight:600}h1 span{border-left:1px solid #ffffff60;margin-left:14px;padding-left:14px;font-weight:400}.tools{display:flex;gap:4px;align-items:center;padding:5px;background:#101a1dcc;border:1px solid #ffffff24;backdrop-filter:blur(16px);pointer-events:auto}.icon-button{width:42px;height:42px;display:grid;place-items:center;color:#eff2ea;background:transparent;border:0;transition:background .16s,color .16s}.icon-button:hover{background:#e9ee7219;color:var(--acid)}.icon-button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tool-divider{height:22px;width:1px;background:#ffffff20;margin:0 4px}.compass{position:absolute;top:35px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:8px;color:#e5eadd;pointer-events:none;font-size:.75rem;letter-spacing:.12em;text-shadow:0 2px 8px #000}.compass-tick{height:17px;width:1px;background:var(--acid)}.scene-details{position:absolute;left:40px;bottom:224px;pointer-events:none;text-shadow:0 2px 15px #0006}.scene-index{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:.75rem;letter-spacing:.12em;color:var(--acid);font-weight:600}.detail-line{width:32px;height:1px;background:#e9ee7280}.scene-details h2{font-size:clamp(2rem,4vw,3rem);font-weight:500;letter-spacing:.1em;line-height:1.3;margin:0 0 8px}.scene-details>p:last-child{margin:0;color:#d1d7cc;font-size:.9375rem;letter-spacing:.06em;line-height:1.6}.collection{position:absolute;bottom:20px;left:36px;right:36px;max-width:1080px;margin:auto}.collection-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:.875rem;color:#e6ece1}.collection-heading>span{font-weight:600;letter-spacing:.1em}.collection-heading p{margin:0;color:#c3ccc0;font-size:.8125rem}.collection-heading p span{color:#748377;margin:0 9px}.scene-list{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:thin;scrollbar-color:#e9ee7240 transparent;scroll-snap-type:x proximity}.scene-card{position:relative;flex:1 0 170px;min-width:0;height:115px;padding:0;border:1px solid #ffffff30;display:block;overflow:hidden;color:white;text-align:left;background:#172127;scroll-snap-align:center;transition:border-color .16s}.scene-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 15%,#081317dc);pointer-events:none}.scene-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .25s;opacity:.8}.scene-card:hover img{transform:scale(1.04);opacity:1}.scene-card[aria-current="true"]{border-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid)}.scene-card[aria-current="true"] img{opacity:1}.scene-card[aria-current="true"]:before{content:"";position:absolute;left:0;top:0;height:3px;right:0;background:var(--acid);z-index:2}.card-label{position:absolute;left:14px;right:12px;bottom:13px;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:5px;font-size:.9375rem;letter-spacing:.04em}.card-number{font-size:.75rem;color:#e9ee72b0;letter-spacing:.1em}.collection-meta{display:flex;justify-content:space-between;gap:16px;margin:7px 4px 0;font-size:.75rem;color:#9fab9e;line-height:1.5}.load-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:14px 22px;border:1px solid #ffffff35;background:#0a141bea;backdrop-filter:blur(12px);font-size:1rem;max-width:calc(100% - 32px);z-index:10}.load-state[hidden]{display:none}.load-state.error{flex-wrap:wrap;justify-content:center;max-width:430px;text-align:center}.load-state.error .spinner{display:none}.spinner{width:18px;height:18px;border:2px solid #e9ee7230;border-top-color:var(--acid);border-radius:50%;animation:spin 1s linear infinite}#retry{color:#17201c;border:0;background:var(--acid);padding:8px 12px;font-size:.875rem}#retry[hidden]{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.header{left:24px;right:24px;top:22px}.compass{display:none}.scene-details{left:28px;bottom:217px}.collection{left:20px;right:20px}.scene-card{flex:0 0 185px}.eyebrow{font-size:.75rem;letter-spacing:.08em}.brand{gap:10px}.brand-mark{width:37px;height:37px;padding:5px}}@media(max-width:580px){.header{left:18px;right:18px;top:18px;align-items:start}.brand-mark{display:none}.eyebrow{font-size:.75rem;letter-spacing:.04em;max-width:160px;line-height:1.5}.brand h1{font-size:1rem}h1 span{margin-left:9px;padding-left:9px}.tools{padding:3px;gap:0}.icon-button{width:34px;height:38px}.icon-button svg{width:19px;height:19px}.tool-divider{margin:0 2px}.scene-details{left:24px;bottom:207px}.scene-details h2{font-size:2.125rem}.scene-details>p:last-child{font-size:.875rem}.collection{left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom))}.collection-heading{padding:0 4px}.collection-heading p{font-size:.75rem;max-width:150px;text-align:right;line-height:1.5}.collection-heading p span{margin:0 3px}.collection-heading p{font-size:0}.collection-heading p:after{content:"拖曳環視 · 雙指縮放";font-size:.75rem}.scene-card{flex-basis:155px;height:104px}.card-label{font-size:.875rem;left:10px}.collection-meta span:last-child{max-width:190px;text-align:right}.scene-index{font-size:.75rem}}@media(max-height:560px){.header{top:12px}.scene-details{bottom:164px}.scene-details h2{font-size:1.75rem}.scene-details>p:last-child{display:none}.scene-index{margin-bottom:5px}.scene-card{height:80px}.collection{bottom:10px}.collection-heading{margin-bottom:6px}.collection-meta{margin-top:2px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.spinner{animation-duration:2s}}
