.screen{container-type:inline-size;background:#13211b;isolation:isolate}
#memory-stage,.memory-layer{position:absolute;inset:0;overflow:hidden;background:#13211b}
#memory-stage{perspective:1400px;container-type:inline-size}
.memory-layer{backface-visibility:hidden;transform-origin:50% 50%}
.memory-backdrop{position:absolute;inset:-5%;background-repeat:no-repeat;filter:blur(24px) brightness(.45)}
.memory-photo{position:absolute;left:50%;top:0;height:89%;aspect-ratio:3/2;transform:translateX(-50%);background-repeat:no-repeat}
.memory-shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 58%,#13211b 100%)}
.memory-caption{position:absolute;left:7%;right:7%;bottom:7%;text-align:center;color:#f6f0e2;line-height:1.25}
.memory-caption p{font-family:Georgia,serif;font-size:2.8cqw;font-weight:400;line-height:1.2;margin:0 0 .9cqw}
.memory-caption span{font-size:1.4cqw;color:#ced4c6}
.memory-quote{position:absolute;inset:29% 15% auto;text-align:center;color:#f6f0e2}
.memory-quote>span{font-size:1.1cqw;letter-spacing:.12cqw;color:#ced4c6}
.memory-quote p{font-family:Georgia,serif;font-size:3cqw;font-weight:400;line-height:1.35;margin:3cqw 0 0}
.text-caption{bottom:30%}
.memory-mark{position:absolute;z-index:20;top:2.7%;left:2.4%;right:2.4%;display:flex;justify-content:space-between;gap:20px;font-size:1.4cqw;color:#d5dacd;pointer-events:none}
.memory-mark span:last-child{font-size:1.65cqw;letter-spacing:-.05cqw}
.memory-mark .memory-logo{height:4cqw;width:auto;align-self:flex-start;filter:grayscale(1);opacity:.5;mix-blend-mode:screen}
.effect-piece{position:absolute;overflow:hidden;backface-visibility:hidden;transform-style:flat}
.album-frame{box-shadow:inset 0 0 0 1.3cqw #e6e0cf;outline:.7cqw solid #e6e0cf;outline-offset:-.7cqw}
.warm-veil,.film-perforations,.bokeh-lights,.spiral-ring,.diagonal-light{position:absolute;inset:0;pointer-events:none}
.transition-glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.warm-veil{background:radial-gradient(ellipse at 65% 35%,#fff0c9,#dcb06b);mix-blend-mode:screen}
.film-perforations{border-left:2.7cqw solid #0b120f;border-right:2.7cqw solid #0b120f}
.film-perforations:before,.film-perforations:after{content:'';position:absolute;top:0;bottom:0;width:1.3cqw;background:repeating-linear-gradient(to bottom,transparent 0 2cqw,#d4d5c4 2cqw 3.3cqw,transparent 3.3cqw 4.3cqw);border-radius:.2cqw}
.film-perforations:before{left:-2cqw}.film-perforations:after{right:-2cqw}
.page-curl{position:absolute;top:0;bottom:0;transform:translateX(-65%);background:linear-gradient(90deg,#15261c22,#b6b8a2 20%,#f3edda 47%,#b0af99 80%,#13211b11);border-radius:50% 0 0 50%;box-shadow:1cqw 0 1.6cqw #0005}
.bokeh-lights{filter:blur(.8cqw)}.bokeh-lights i{position:absolute;aspect-ratio:1;background:radial-gradient(circle,#f2d7a999,#f2d7a944 50%,transparent 72%);border-radius:50%}
.pixel-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
.live-meta{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--muted)}.live-meta span+span{border-left:1px solid var(--line);padding-left:12px}
.screen-message{z-index:30}.exit-fullscreen{position:absolute;z-index:40;bottom:22px;right:22px;padding:12px 18px;background:#14241fcc;border:1px solid #718475;border-radius:7px;opacity:0;transition:opacity .2s;color:#fff;font-size:16px}
.screen:hover .exit-fullscreen,.exit-fullscreen:focus-visible{opacity:1}
.screen:fullscreen{container-type:inline-size}
.screen:fullscreen #memory-stage{inset:0;width:100%;height:100%;max-width:177.7778dvh;max-height:56.25dvw;margin:auto;aspect-ratio:16/9}
.screen:fullscreen .memory-mark{font-size:clamp(16px,1.4cqw,28px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.all-effects-option{display:flex;flex-direction:column;gap:5px;flex-shrink:0;margin:0 16px 14px;padding:13px 14px;text-align:left;background:#20332a;color:var(--text);border:1px solid #425747;border-radius:7px;font-size:.9375rem;line-height:1.35}
.all-effects-option small{font-size:.875rem;color:var(--muted);font-weight:400}
.all-effects-option:hover{background:#293d32}
.all-effects-option[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#142019}
.all-effects-option[aria-pressed="true"] small{color:#324332}
.transition-setting{flex-shrink:0;margin:0 16px 16px;padding:0 14px 14px;border-bottom:1px solid var(--line)}
.transition-setting label{display:block;margin-bottom:8px;font-size:.875rem;color:var(--text)}
.transition-duration-field{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--muted)}
.transition-duration-field input{width:90px;min-height:42px;padding:8px 10px;border:1px solid #52604f;border-radius:6px;background:var(--panel);color:var(--text);font-variant-numeric:tabular-nums}
.transition-setting p{margin:8px 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)}
@media(min-width:761px){.preview{max-width:min(1440px,max(640px,calc((100dvh - 260px)*16/9)))}}
@media(max-width:760px){.main-heading{flex-wrap:wrap;gap:10px}.main-heading .text-button{padding-left:0}}
@media(hover:none){.exit-fullscreen{opacity:1}}