:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:#f4f1ea;background:#101523;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #efdfb8;outline-offset:5px}button:disabled{opacity:.5;cursor:wait}button, a{touch-action:manipulation}button svg{width:22px;height:22px;flex-shrink:0}button{min-height:44px}button:hover{filter:brightness(1.12)}[hidden]{display:none!important}.scene{position:fixed;inset:0;overflow:hidden;background:#101523}.pictures,.photo,.shade,.glow{position:absolute;inset:0}.pictures{animation:breathe 14s ease-in-out infinite;will-change:transform}.photo{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;transform:scale(1.01)}.photo.visible{opacity:1}.shade{background:linear-gradient(180deg,rgba(7,12,27,.35),rgba(7,12,27,.16) 30%,rgba(7,12,27,.25) 55%,rgba(7,12,27,.78));pointer-events:none}.glow{opacity:0;background:radial-gradient(ellipse at 20% 20%,rgba(236,219,177,.42),transparent 65%);pointer-events:none}.scene[data-effect="pan"] .pictures{animation:pan 34s ease-in-out infinite}.scene[data-effect="float"] .pictures{animation:float 24s ease-in-out infinite}.scene[data-effect="light"] .pictures{animation:breathe 24s ease-in-out infinite}.scene[data-effect="light"] .glow{animation:light 17s ease-in-out infinite alternate}.scene[data-effect="still"] .pictures{animation:none}.interface{position:relative;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;padding:max(25px,env(safe-area-inset-top)) max(26px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left));transition:opacity .7s}.interface.immersed{opacity:0;pointer-events:none}header{display:flex;justify-content:space-between;align-items:center}.brand{color:inherit;text-decoration:none;font-family:serif;font-size:23px;letter-spacing:5px;display:flex;align-items:center;gap:12px;text-shadow:0 1px 14px #101523}.brand-mark{font-size:32px;letter-spacing:0}.brand-note{font-family:sans-serif;font-size:12px;letter-spacing:2px;margin-left:12px;opacity:.7}.glass{border:1px solid #ffffff35;background:#17213355;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.icon-button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background-color:#18213366}.welcome{margin:auto;text-align:center;padding:50px 0 45px;text-shadow:0 2px 24px #090f2b80}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:500;opacity:.7}h1{font-family:"Noto Serif TC","Songti TC",serif;font-weight:400;font-size:clamp(28px,5.5vw,48px);letter-spacing:.12em;line-height:1.6;margin:22px 0 12px}.intro{font-size:14px;letter-spacing:.12em;color:#f4f1ead4}.start-button{display:flex;align-items:center;justify-content:center;gap:17px;margin:38px auto 0;padding:0 32px;height:56px;border-radius:32px;background:#f2ecdf;color:#273042;letter-spacing:3px;box-shadow:0 6px 36px #0002}.start-button span{font-size:24px}.start-note{font-size:12px;letter-spacing:1px;opacity:.65;margin-top:18px}footer{text-align:center}.scene-info .eyebrow{font-size:10px;letter-spacing:2.5px}.scene-info p{font-size:14px;letter-spacing:2px;margin:12px 0 22px}.separator{padding:0 16px;opacity:.4}.toolbar{display:inline-flex;align-items:center;border-radius:40px;padding:4px 10px}.toolbar button{background:transparent;display:flex;gap:10px;align-items:center;padding:8px 15px;font-size:14px}.toolbar-divider{height:18px;width:1px;background:#ffffff30}.footer-note{font-family:serif;font-size:12px;letter-spacing:3px;opacity:.5;margin:23px 0 4px}.restore{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border-radius:30px;padding:8px 22px;opacity:.65;font-size:14px}.status{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);margin:0;border-radius:12px;background:#131c2eec;max-width:90vw;width:max-content;font-size:14px;z-index:5;line-height:1.7}.status:not(:empty){padding:12px 18px}dialog{background:#141d2bf5;color:#f4f1ea;border:1px solid #ffffff24;border-radius:28px;padding:28px;width:min(100% - 24px,440px);max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 25px 100px #0008;backdrop-filter:blur(25px)}dialog::backdrop{background:#050a1680;backdrop-filter:blur(5px)}.sheet-heading{display:flex;align-items:center;justify-content:space-between}.sheet-heading .eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 10px}h2{font-size:23px;letter-spacing:2px;font-weight:400;margin:0}.setting-group{margin-top:28px}h3,.label-row label{font-size:14px;font-weight:500;margin:0;letter-spacing:1px}.label-row{display:flex;align-items:center;justify-content:space-between}.text-button{background:none;color:#d8cba9;font-size:13px;padding:0 4px;min-height:32px}.image-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.image-option{position:relative;padding:3px;border:1px solid transparent;border-radius:13px;background:transparent;overflow:hidden}.image-option img{width:100%;height:98px;object-fit:cover;border-radius:9px;display:block}.image-option span{display:block;font-size:12px;padding:10px 0 5px}.image-option[aria-pressed="true"]{border-color:#e1d6bc;background:#e1d6bc0d}.effect-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.effect-option{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #ffffff16;border-radius:12px;background:#ffffff04;padding:13px 12px}.effect-option[aria-pressed="true"]{border-color:#e1d6bc88;background:#e1d6bc12}.effect-symbol{font-size:23px;color:#d8cba9}.effect-option strong{display:block;font-weight:400;font-size:14px}.effect-option small{display:block;font-size:11px;color:#b0b4be;margin-top:5px}.setting-note{font-size:12px;line-height:1.8;color:#a6abb6}.label-row output{font-size:13px;color:#d8cba9}input[type="range"]{width:100%;height:30px;margin:10px 0 0;accent-color:#d8cba9}.done-button{width:100%;border-radius:25px;background:#e9e1d2;color:#263041;margin-top:10px;font-size:14px;letter-spacing:2px}.welcome.started{visibility:hidden}.page-hidden .pictures,.page-hidden .glow{animation-play-state:paused!important}@keyframes breathe{0%,100%{transform:scale(1.04)}50%{transform:scale(1.30)}}@keyframes pan{0%,100%{transform:scale(1.38) translate(-9%,3%)}50%{transform:scale(1.38) translate(9%,-3%)}}@keyframes float{0%,100%{transform:scale(1.3) translate(-2%,5%) rotate(-2deg)}50%{transform:scale(1.3) translate(2%,-5%) rotate(2deg)}}@keyframes light{0%{opacity:.15;transform:scale(1.7) translate(-20%,-12%)}100%{opacity:.9;transform:scale(1.7) translate(20%,12%)}}@media(min-width:768px){.interface{padding:36px 48px 28px}.welcome{padding-top:65px}.toolbar{padding:7px 14px}.scene-info p{margin-bottom:24px}dialog{padding:30px}}@media(max-width:380px){.brand-note{display:none}.interface{padding-left:20px;padding-right:20px}dialog{padding:22px}.effect-option{gap:8px;padding:12px 9px}}@media(max-height:600px) and (orientation:landscape){.welcome{padding:12px 0}.welcome .eyebrow,.start-note,.footer-note,.scene-info .eyebrow{display:none}h1{font-size:28px;margin:5px}.intro{margin:5px}.start-button{margin-top:12px;height:45px}.scene-info p{margin:8px}.interface{padding-top:12px;padding-bottom:12px}}@media(prefers-reduced-motion:reduce){.pictures,.glow{animation:none!important}.photo,.interface{transition:none!important}}
