:root{--paper:#fffdf9;--paper-muted:#f4f0e9;--ink:#2b261f;--ink-soft:#746b60;--champagne:#c69d58;--champagne-soft:#dfc89e;--line:#705b3b33;--shadow:#3c302024}*{box-sizing:border-box}html,body{background:var(--paper-muted);width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Songti SC,STSong,Noto Serif CJK SC,Georgia,serif}button{color:inherit;font:inherit}button:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}.wedding-show{background:var(--paper);isolation:isolate;width:100vw;height:100dvh;position:relative;overflow:hidden}.wedding-show:fullscreen{background:var(--paper);width:100vw;height:100vh}.wedding-show.is-immersive{z-index:2147483647;overscroll-behavior:none;touch-action:manipulation;width:100vw;height:100dvh;position:fixed;inset:0}.start-screen,.show-canvas{background:var(--paper);width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.start-screen{grid-template-columns:minmax(0,1.7fr) minmax(340px,.9fr);align-items:center;gap:clamp(28px,4.5vw,84px);padding:clamp(34px,5vw,88px);display:grid}.start-screen:before,.start-screen:after{content:"";pointer-events:none;width:clamp(50px,7vw,110px);height:clamp(50px,7vw,110px);position:absolute}.start-screen:before{border-top:1px solid var(--line);border-left:1px solid var(--line);top:clamp(24px,3.5vw,56px);left:clamp(24px,3.5vw,56px)}.start-screen:after{border-right:1px solid var(--line);border-bottom:1px solid var(--line);bottom:clamp(24px,3.5vw,56px);right:clamp(24px,3.5vw,56px)}.start-photo-stage{z-index:1;place-items:center;width:100%;min-width:0;height:100%;min-height:0;display:grid;position:relative}.start-photo-stage:after{content:"";z-index:-1;border:1px solid var(--champagne-soft);position:absolute;inset:5% -2% -5% 7%}.start-photo-stage .photo-picture,.start-photo-stage .photo-picture img{width:100%;height:100%}.start-photo-stage .photo-picture img{filter:drop-shadow(0 20px 34px var(--shadow))}.start-copy{z-index:2;text-align:left;max-width:520px;position:relative}.start-copy>p{color:var(--ink-soft);letter-spacing:.42em;margin:0 0 clamp(22px,4vh,48px);font:500 clamp(9px,.75vw,12px)/1.4 Arial,sans-serif}.start-copy h1{letter-spacing:.08em;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.5vw,24px);margin:0;font-size:clamp(36px,4vw,74px);font-weight:400;line-height:1.25;display:flex}.start-copy h1 i{color:var(--champagne);font:italic 300 .7em/1 Georgia,serif}.start-copy time{color:var(--champagne);letter-spacing:.45em;margin:clamp(20px,3.2vh,38px) 0 clamp(38px,6vh,68px);font:500 clamp(11px,.9vw,15px)/1 Arial,sans-serif;display:block}.start-copy button{border:1px solid var(--champagne-soft);background:var(--paper);cursor:pointer;border-radius:999px;align-items:center;gap:15px;min-width:min(100%,330px);min-height:64px;padding:13px 24px;transition:transform .22s,border-color .22s,box-shadow .22s;display:inline-flex;box-shadow:0 10px 28px #6048231a}.start-copy button:hover:not(:disabled){border-color:var(--champagne);transform:translateY(-2px);box-shadow:0 14px 34px #60482329}.start-copy button:disabled{cursor:wait;opacity:.62}.start-copy button>svg{width:26px;height:26px;color:var(--champagne);flex:none}.start-copy button span{text-align:left;gap:5px;display:grid}.start-copy button b{letter-spacing:.12em;font-size:16px;font-weight:600}.start-copy button small{color:var(--ink-soft);letter-spacing:.08em;font:400 10px/1.3 Arial,sans-serif}.show-canvas{grid-template:"left photo right"minmax(0,1fr)"transport transport transport"clamp(72px,9vh,104px)/clamp(92px,9vw,164px) minmax(0,1fr) clamp(92px,9vw,164px);gap:clamp(16px,2vw,34px);padding:clamp(26px,3.4vw,62px) clamp(28px,4vw,72px) clamp(14px,2vh,28px);display:grid}.top-meta{display:none}.left-rail{grid-area:left;grid-template-rows:auto minmax(36px,1fr) auto 1fr auto;place-items:center;min-height:0;padding-block:clamp(2px,1.5vh,16px);display:grid}.left-rail p,.left-rail time{color:var(--ink-soft);letter-spacing:.32em;writing-mode:vertical-rl;margin:0;font:500 clamp(8px,.7vw,11px)/1 Arial,sans-serif}.left-rail p:first-child,.left-rail time{transform:rotate(180deg)}.left-rail time{color:var(--champagne)}.left-rail>span{background:var(--line);width:1px;height:100%;min-height:34px}.photo-stage{grid-area:photo;place-items:center;min-width:0;min-height:0;display:grid;position:relative;overflow:visible}.photo-stage:before{content:"";z-index:-1;border:1px solid var(--line);pointer-events:none;position:absolute;inset:clamp(8px,1.2vw,20px) clamp(-8px,-.6vw,-2px) clamp(-8px,-.6vw,-2px) clamp(8px,1.2vw,20px)}.photo-motion,.photo-picture,.photo-picture img{width:100%;height:100%;display:block}.photo-motion{transform-origin:50%;min-width:0;min-height:0;animation-duration:3.5s;animation-timing-function:cubic-bezier(.32,0,.18,1);animation-fill-mode:both;overflow:visible}.photo-picture img{object-fit:contain;object-position:center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 16px 30px var(--shadow))}.transport{opacity:1;grid-area:transport;grid-template-columns:auto auto minmax(100px,1fr) auto auto auto;align-self:end;align-items:center;gap:clamp(9px,1.2vw,18px);min-width:0;padding:14px 0 4px;transition:opacity .24s,transform .24s;display:grid;transform:translateY(0)}.icon-button{width:42px;height:42px;color:var(--ink);border:1px solid var(--line);background:var(--paper);cursor:pointer;border-radius:999px;place-items:center;padding:0;transition:color .18s,border-color .18s,background .18s;display:grid}.icon-button:hover{color:var(--champagne);border-color:var(--champagne-soft);background:#fffaf1}.icon-button svg{width:19px;height:19px}.play-button{color:var(--paper);border-color:var(--champagne);background:var(--champagne)}.play-button:hover{color:var(--paper);background:#ae8341;border-color:#ae8341}.time-current,.time-total{color:var(--ink-soft);letter-spacing:.08em;font:500 10px/1 Arial,sans-serif}.progress-track{cursor:pointer;background:0 0;border:0;width:100%;height:32px;padding:0;position:relative}.progress-track:before,.progress-value{height:2px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.progress-track:before{content:"";background:var(--line);right:0}.progress-value{background:var(--champagne)}.progress-value:after{content:"";background:var(--champagne);border-radius:50%;width:8px;height:8px;position:absolute;top:50%;right:-4px;transform:translateY(-50%)}.controls-hidden .transport{pointer-events:none;opacity:0;transform:translateY(16px)}.is-fullscreen .transport{grid-template-columns:repeat(3,auto);justify-content:end}.is-fullscreen .time-current,.is-fullscreen .time-total,.is-fullscreen .progress-track{display:none}.danmaku-layer{z-index:4;pointer-events:none;position:absolute;inset:3% 0;overflow:hidden}.danmaku{top:calc(5% + var(--lane) * 17%);color:#fff;text-shadow:0 1px 3px #000000b8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);letter-spacing:.04em;width:max-content;max-width:78%;animation:danmakuFly var(--fly-time) linear forwards;background:#231e1885;border-radius:999px;padding:.45em .82em;font:600 clamp(13px,1.4vw,22px)/1.2 PingFang SC,sans-serif;position:absolute;left:100%;box-shadow:0 4px 16px #2019102e}.danmaku-gold{color:#ffe5a9}.danmaku-pink{color:#ffd9e3}.danmaku-highlight{color:#fff1ca;animation:danmakuHighlight var(--fly-time) ease both;background:#51321db8;border:1px solid #ffe2a28c;font-size:clamp(17px,2vw,30px);top:72%;left:50%}.is-paused .photo-motion,.is-paused .danmaku{animation-play-state:paused}.motion-dissolve{animation-name:photoDissolve}.motion-rise-away{animation-name:photoRiseAway}.motion-left-to-right{animation-name:photoLeftToRight}.motion-right-to-left{animation-name:photoRightToLeft}.motion-focus-pull{animation-name:photoFocusPull}.motion-soft-zoom{animation-name:photoSoftZoom}.motion-float-down{animation-name:photoFloatDown}.motion-soft-rotate{animation-name:photoSoftRotate}.motion-gentle-tilt{animation-name:photoGentleTilt}.motion-light-wash{animation-name:photoLightWash}@keyframes photoDissolve{0%{opacity:0;filter:blur(9px)}18%,82%{opacity:1;filter:blur()}to{opacity:0;filter:blur(5px)}}@keyframes photoRiseAway{0%{opacity:0;transform:translateY(4%)scale(.98)}18%,82%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-3%)scale(.985)}}@keyframes photoLeftToRight{0%{opacity:0;transform:translate(-4%)}18%,82%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(4%)}}@keyframes photoRightToLeft{0%{opacity:0;transform:translate(4%)}18%,82%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-4%)}}@keyframes photoFocusPull{0%{opacity:0;filter:blur(14px)saturate(.75);transform:scale(.96)}20%,82%{opacity:1;filter:blur()saturate();transform:scale(1)}to{opacity:0;filter:blur(7px)saturate(.85);transform:scale(.98)}}@keyframes photoSoftZoom{0%{opacity:0;transform:scale(.95)}20%,82%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}@keyframes photoFloatDown{0%{opacity:0;transform:translateY(-3%)}18%,82%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(3%)}}@keyframes photoSoftRotate{0%{opacity:0;transform:rotate(-1.2deg)scale(.98)}20%,82%{opacity:1;transform:rotate(0)scale(1)}to{opacity:0;transform:rotate(1deg)scale(.98)}}@keyframes photoGentleTilt{0%{opacity:0;transform:translateY(2%)rotate(.8deg)scale(.98)}20%,82%{opacity:1;transform:translateY(0)rotate(0)scale(1)}to{opacity:0;transform:translateY(-2%)rotate(-.8deg)scale(.98)}}@keyframes photoLightWash{0%{opacity:0;filter:brightness(1.55)contrast(.8)}18%,82%{opacity:1;filter:brightness()contrast()}to{opacity:0;filter:brightness(1.35)contrast(.88)}}@keyframes danmakuFly{0%{transform:translate(2vw)}to{transform:translate(calc(-100vw - 100%))}}@keyframes danmakuHighlight{0%{opacity:0;transform:translate(-50%,14px)scale(.9)}18%,78%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-10px)scale(.96)}}@media (aspect-ratio<=4/3){.start-screen{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr;gap:clamp(20px,3vh,40px);padding:clamp(30px,5vw,56px)}.start-photo-stage{min-height:0}.start-photo-stage:after{inset:5% -1.5% -4% 5%}.start-copy{text-align:center;width:100%;max-width:none}.start-copy>p{margin-bottom:14px}.start-copy h1{justify-content:center;font-size:clamp(32px,6vw,60px)}.start-copy time{margin:14px 0 22px}.start-copy button{justify-content:center}.show-canvas{grid-template:"meta""photo"minmax(0,1fr)"transport"/minmax(0,1fr);gap:clamp(14px,2.4vh,28px);padding:clamp(24px,4.2vw,48px) clamp(26px,5vw,60px) clamp(14px,2.5vh,28px)}.top-meta{grid-area:meta;justify-content:space-between;align-items:center;gap:20px;display:flex}.top-meta p,.top-meta time{color:var(--ink-soft);letter-spacing:.28em;margin:0;font:500 clamp(8px,1.1vw,11px)/1 Arial,sans-serif}.top-meta time{color:var(--champagne);white-space:nowrap}.left-rail{display:none}.photo-stage:before{inset:clamp(7px,1.5vw,14px) clamp(-7px,-.8vw,-2px) clamp(-7px,-.8vw,-2px) clamp(7px,1.5vw,14px)}.transport{grid-template-columns:auto auto minmax(80px,1fr) auto auto auto;padding-top:2px}}@media (aspect-ratio<=4/5){.start-screen{padding:max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));grid-template-rows:minmax(0,1.35fr) auto;gap:20px}.start-screen:before{top:16px;left:16px}.start-screen:after{bottom:16px;right:16px}.start-photo-stage:after{inset:4% 1% -3% 6%}.start-copy>p{letter-spacing:.28em;margin-bottom:10px;font-size:8px}.start-copy h1{gap:9px;font-size:clamp(28px,9vw,42px)}.start-copy time{margin:10px 0 18px;font-size:10px}.start-copy button{min-width:min(100%,300px);min-height:58px}.show-canvas{padding:max(20px, env(safe-area-inset-top)) 18px max(10px, env(safe-area-inset-bottom));gap:14px}.top-meta{gap:12px}.top-meta p{letter-spacing:.2em;max-width:64%;line-height:1.45}.top-meta time{letter-spacing:.16em;font-size:8px}.photo-stage:before{inset:7px -4px -5px 7px}.transport{grid-template-columns:auto minmax(48px,1fr) auto auto;gap:8px;padding:0}.icon-button{width:40px;height:40px}.time-current,.time-total{display:none}.progress-track{min-width:48px}.danmaku{font-size:clamp(12px,3.5vw,17px)}}@media (width<=360px){.show-canvas{padding-inline:13px}.transport{gap:5px}.icon-button{width:37px;height:37px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.photo-motion{opacity:1!important;filter:none!important;transform:none!important}}