@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;font-family:'Noto Sans TC',sans-serif;background:#17120f;color:#f5eee7}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.skip{position:absolute;left:12px;top:-60px;z-index:20;background:white;color:#17120f;padding:12px}.skip:focus{top:12px}button:focus-visible,a:focus-visible{outline:2px solid #e9bb83;outline-offset:4px}
.site-header{position:absolute;z-index:10;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:25px clamp(22px,5vw,76px);border-bottom:1px solid #ffffff24;background:linear-gradient(#120f0ccc,transparent)}.brand{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;letter-spacing:-1px}.brand span{color:#d8a768}.back-link{font-size:13px;color:#eee2d5;transition:color .2s}.back-link:hover{color:#e8b477}
.intro{position:relative;min-height:100svh;display:flex;align-items:end;overflow:hidden}.intro-image{position:absolute;inset:0;background:#261a15 url('../assets/achievement-room-preview.jpg') center 52%/cover no-repeat;transform:scale(1.015)}.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,#130f0de8 0%,#130f0db8 36%,#130f0d41 74%),linear-gradient(0deg,#130f0df0,transparent 52%)}.intro-copy{position:relative;z-index:1;width:min(650px,100%);padding:160px clamp(22px,9vw,150px) 70px clamp(22px,9vw,150px);box-sizing:content-box}.eyebrow,.viewer-kicker{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.28em;color:#d6ac78}.intro h1{font-size:clamp(44px,7vw,86px);font-weight:500;line-height:1.13;letter-spacing:-.06em;margin:18px 0}.intro-lead{font-size:clamp(20px,2.5vw,31px);font-weight:500;margin:0 0 20px}.intro-description{max-width:510px;font-size:16px;line-height:1.9;color:#e5d8cb;margin:0 0 34px}.enter-button{display:inline-flex;align-items:center;gap:50px;padding:17px 24px;border:1px solid #e9ba7c;color:#1f1711;background:#edc28d;font-weight:700;transition:background .2s,transform .2s}.enter-button:hover{background:#ffdbac;transform:translateY(-2px)}.room-facts{font-size:11px;letter-spacing:.09em;color:#c2ad97;margin:25px 0 0}.room-facts span{padding:0 9px}
.experience{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#17120f}.experience[hidden],.intro[hidden]{display:none}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.viewer-top,.viewer-bottom{pointer-events:none;position:absolute;z-index:3;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:20px}.viewer-top{top:80px;padding:25px clamp(20px,4vw,70px);background:linear-gradient(#0c0908b8,transparent)}.viewer-top h2{font-size:22px;margin:5px 0 0;font-weight:500}.viewer-kicker{font-size:10px}.viewer-actions{display:flex;gap:10px;pointer-events:auto}.viewer-actions button,.viewer-error button{border:1px solid #eee0d166;background:#1d1712bb;color:#f5eee7;padding:9px 15px;font-size:12px}.viewer-actions button:hover,.viewer-error button:hover{background:#574331}.viewer-bottom{bottom:0;padding:70px clamp(20px,4vw,70px) 20px;background:linear-gradient(transparent,#0c0908ce);font-size:12px;color:#dccabb}.viewer-bottom p{margin:0}.move-pad{position:absolute;z-index:5;right:28px;bottom:95px;display:grid;justify-items:center;gap:5px;pointer-events:auto}.move-pad>div{display:flex;gap:5px}.move-pad button{width:48px;height:48px;border:1px solid #f5eee777;background:#241a13b8;color:#f5eee7;font-size:23px;touch-action:none;user-select:none}.move-pad button:active,.move-pad button.is-pressed{background:#ad8051}.loading,.viewer-error{position:absolute;z-index:4;inset:0;display:grid;place-content:center;text-align:center;background:#17120fea;padding:28px}.loading[hidden],.viewer-error[hidden]{display:none}.loading-mark{width:36px;height:36px;margin:auto;border:2px solid #edc28d55;border-top-color:#edc28d;border-radius:50%;animation:spin 1s linear infinite}.loading p,.viewer-error p{color:#e3d4c6}.viewer-error h2{font-weight:500}.viewer-error button{justify-self:center;margin-top:16px}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.site-header{padding:18px 20px}.brand{font-size:19px}.back-link{font-size:12px}.intro-image{background-position:58% 45%}.intro-shade{background:linear-gradient(0deg,#130f0df6 0%,#130f0dc2 38%,#130f0d35 100%)}.intro-copy{padding:130px 24px 45px;width:auto}.intro-description{font-size:14px}.room-facts{line-height:1.8}.viewer-top{top:62px;padding:20px}.viewer-top h2{font-size:18px}.viewer-actions button{font-size:11px;padding:8px}.viewer-bottom{padding:50px 20px 16px;display:block;font-size:10px}.viewer-bottom p+ p{margin-top:3px}.move-pad{bottom:90px;right:16px}.move-pad button{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.intro-image,.enter-button{transform:none!important;transition:none}.loading-mark{animation:none}}