:root{color:#fff8e8;background:#d8cfb8;font-family:"Noto Serif TC","Source Han Serif TC",serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100dvh;min-height:100dvh;margin:0;overflow:hidden}@supports not (height: 100dvh){html,body,#app{height:100vh;min-height:100vh}}body{background:#d8cfb8}body:before{position:fixed;inset:0;z-index:1;pointer-events:none;content:"";background:linear-gradient(180deg,#1e18101f,#1e181014),radial-gradient(circle at 50% 44%,transparent 0%,rgba(45,35,22,.26) 100%)}button,input{font:inherit}.background-layer{position:fixed;inset:0;z-index:0;overflow:hidden;background:#d8cfb8}.background-layer:before{position:absolute;inset:0;z-index:0;content:"";background:url(/BG.png) center / cover no-repeat;filter:blur(36px) brightness(1.05) saturate(1.04);transform:scale(1.2)}.background-layer__image,.background-layer__video{position:absolute;inset:0;z-index:1;margin:auto;display:block;aspect-ratio:16 / 9;max-width:100%;max-height:100%;object-fit:cover;object-position:center}.background-layer__video{opacity:0}#fogfield,#rainfield{position:fixed;inset:0;margin:auto;display:block;aspect-ratio:16 / 9;max-width:100%;max-height:100%}#fogfield{z-index:1;pointer-events:none}#rainfield{z-index:2;mix-blend-mode:screen}.experience{position:relative;z-index:3;width:100%;height:100%;pointer-events:none}.intro,.final,.letter{position:absolute;inset:0;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s var(--ease),visibility .9s var(--ease)}.intro.is-visible,.final.is-visible,.letter.is-visible{opacity:1;visibility:visible;pointer-events:auto}.intro{align-content:center;gap:12px;text-align:center;transform:translateY(-2vh)}.intro__line{margin:0;color:#fff9e8f5;font-size:clamp(1.45rem,3.2vw,2.6rem);font-weight:500;line-height:1.65;text-shadow:0 1px 16px rgba(67,51,26,.28),0 0 34px rgba(255,250,220,.34)}.access-form{display:grid;justify-items:center;gap:10px;width:min(320px,calc(100vw - 56px));margin-top:30px}.access-form__label{color:#fffae8b8;font-size:.9rem;line-height:1.5;text-shadow:0 1px 12px rgba(51,38,18,.28)}.access-form__input{width:100%;min-height:48px;padding:11px 18px 12px;color:#fffbecfa;text-align:center;background:#3e332238;border:1px solid rgba(255,247,220,.5);border-radius:999px;outline:none;box-shadow:0 12px 34px #3c2d1829,inset 0 0 18px #ffffff14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .22s ease,box-shadow .22s ease,background .22s ease}.access-form__input:focus{background:#4438264d;border-color:#fffae2d1;box-shadow:0 14px 38px #3c2d1833,inset 0 0 20px #ffffff1f}.access-form__message{min-height:1.4em;margin:0;color:#ffeecdd1;font-size:.84rem;line-height:1.4;text-shadow:0 1px 12px rgba(42,32,18,.2)}.quiet-button{position:relative;min-width:136px;min-height:46px;margin-top:28px;padding:11px 24px 12px;color:#fff9e6f2;background:#3f342347;border:1px solid rgba(255,246,215,.52);border-radius:999px;box-shadow:0 14px 38px #3c2d182e,inset 0 0 18px #ffffff14;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .22s ease,box-shadow .22s ease,color .22s ease,transform .22s ease}.quiet-button:hover{color:#fffaf0;border-color:#fffbe7c7;box-shadow:0 18px 42px #3c2d1838,inset 0 0 20px #ffffff1f;transform:translateY(-1px)}.quiet-button:focus-visible{outline:2px solid rgba(255,249,230,.86);outline-offset:4px}.quiet-button--small{min-width:116px;min-height:42px;margin-top:30px;padding-inline:20px;font-size:.95rem}.final{align-content:end;padding-bottom:max(9vh,72px)}.final__actions{display:flex;gap:14px;align-items:center}.playback-btn{position:fixed;right:24px;bottom:24px;z-index:10;display:grid;place-items:center;width:42px;height:42px;padding:0;color:#fff9e6d1;background:#261e1285;border:1px solid rgba(255,246,215,.3);border-radius:50%;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 18px #140e0647;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s var(--ease),border-color .2s ease,transform .18s ease}.playback-btn.is-visible{opacity:1;visibility:visible;pointer-events:auto}.playback-btn:hover{border-color:#fff6d7a8;transform:scale(1.1)}.playback-btn:focus-visible{outline:2px solid rgba(255,249,230,.72);outline-offset:3px}.playback-btn__icon--play{display:none;margin-left:2px}.playback-btn[data-paused] .playback-btn__icon--pause{display:none}.playback-btn[data-paused] .playback-btn__icon--play{display:block}.letter{overflow-y:auto;place-items:center;background:radial-gradient(circle at 50% 38%,#2d231614,#1e18106b 72%),#271e121a;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.letter__inner{width:min(680px,calc(100vw - 48px));max-height:min(720px,calc(100vh - 64px));overflow-y:auto;padding:clamp(28px,6vw,54px);color:#fffaeaf0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 34px,rgba(255,248,220,.03) 34px,rgba(255,248,220,.03) 35px),linear-gradient(168deg,#3e301ea3,#2e231480);border:1px solid rgba(255,244,213,.22);border-radius:8px;box-shadow:0 24px 80px #2a1f1052,0 0 60px #fff7dc14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.letter__rule{margin:0 0 26px;border:none;border-top:1px solid rgba(255,242,200,.13)}.letter__kicker{margin:0 0 14px;color:#ecf4ec85;font-family:Cormorant Garamond,ui-serif,Georgia,serif;font-size:.84rem;letter-spacing:.28em}.letter h1{margin:0 0 26px;color:#fff8df;font-size:clamp(1.45rem,3vw,2.15rem);font-weight:500;line-height:1.45}.letter__body{display:grid;gap:16px}.letter__body p{margin:0;color:#fffaeadb;font-family:Lora,"Noto Serif TC",ui-serif,serif;font-size:clamp(1rem,1.45vw,1.13rem);line-height:2.05}@media(max-width:767px){.intro,.final,.letter{padding:24px}.intro{transform:translateY(-3vh)}.intro__line{font-size:clamp(1.42rem,7vw,2.05rem);line-height:1.72}.quiet-button{min-width:132px;min-height:48px;padding-inline:22px}.final{padding-bottom:76px}.letter{align-items:center;padding:22px}.letter__inner{width:100%;max-height:calc(100vh - 44px);padding:30px 24px}.letter__body p{line-height:2}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.quiet-button,.intro,.final,.letter{transition-duration:1ms!important}}