.time-moment-dialog{--moment-accent:#d5eaae;--moment-accent-soft:#a9c6a9;--moment-duration:6500ms;position:fixed;inset:0;width:min(540px,calc(100vw - 32px));max-width:540px;max-height:calc(100dvh - 32px);padding:0;margin:auto;overflow:auto;border:1px solid #ffffff1c;border-radius:28px;background:#143d2c;color:#f5f8ee;box-shadow:0 34px 110px #071d1a66,0 2px 0 #ffffff0b inset;font-family:inherit;animation:moment-enter .45s cubic-bezier(.2,.8,.2,1) both;overscroll-behavior:contain}
.time-moment-dialog::backdrop{background:#0b211bc7;backdrop-filter:blur(10px);animation:moment-backdrop .3s ease both}
.time-moment-dialog.moment-stop{--moment-accent:#d9e7bf;--moment-accent-soft:#b3c9b7;background:#15372f}
.time-moment-dialog.moment-pause{--moment-accent:#ede0ae;--moment-accent-soft:#d0c6a2}
.time-moment-dialog.moment-fallback{z-index:10000;box-shadow:0 0 0 100vmax #0b211be8,0 34px 110px #071d1a66}
.time-moment-dialog .moment-card{position:relative;isolation:isolate;overflow:hidden;padding:24px 38px 0;text-align:center;background:radial-gradient(ellipse at 50% 25%,#6d996530 0,transparent 60%)}
.moment-card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.25;background-image:radial-gradient(#e6f2d52b .6px,transparent .6px);background-size:7px 7px;mask-image:linear-gradient(transparent,#000)}
.moment-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2}
.moment-saved{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--moment-accent-soft);text-align:left;letter-spacing:.01em}
.moment-saved>svg{width:18px;height:18px;flex-shrink:0;color:var(--moment-accent)}
.moment-close{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:1px solid #f1f7e81c;border-radius:50%;padding:7px;background:#ffffff05;color:#d9e6d4;cursor:pointer;transition:background .2s,border-color .2s}
.moment-close svg{width:18px;height:18px}
.moment-close:hover{background:#ffffff14;border-color:#f1f7e84d}
.moment-close:focus-visible,.moment-continue:focus-visible{outline:3px solid #f3f9e2;outline-offset:4px}
.moment-art{position:relative;display:grid;place-items:center;width:200px;height:182px;margin:21px auto 7px;color:var(--moment-accent)}
.moment-art:before{content:"";position:absolute;inset:17px 25px;border-radius:50%;background:radial-gradient(circle,#d7ecae17,transparent 70%);filter:blur(7px);animation:moment-glow 4s ease-in-out infinite alternate}
.moment-art>svg{position:relative;width:158px;height:140px;overflow:visible;animation:moment-illustration .8s cubic-bezier(.2,.8,.2,1) both}
.moment-orbit{position:absolute;inset:0 9px;border:1px solid #d9eab411;border-radius:50%;transform:rotate(-24deg)}
.moment-orbit:before,.moment-orbit:after{content:"";position:absolute;background:var(--moment-accent);border-radius:50%;width:4px;height:4px;opacity:.45;top:27px;left:20px;box-shadow:0 0 15px #e9f6c955}
.moment-orbit:after{width:3px;height:3px;left:auto;top:auto;right:19px;bottom:27px;opacity:.3}
.moment-copy{position:relative;z-index:1}
.moment-eyebrow{margin:0 0 12px;font-size:10px;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:var(--moment-accent-soft)}
.moment-copy h2{font-family:inherit;font-size:clamp(27px,4.8vw,35px);font-weight:650;line-height:1.19;letter-spacing:-1.1px;color:#f5f8ee;max-width:430px;margin:0 auto 16px;text-wrap:balance}
.moment-body{max-width:360px;min-height:48px;margin:0 auto;font-size:13px;line-height:1.8;color:#c0d3c2;text-wrap:pretty}
.moment-summary{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;margin:23px auto;padding:10px 15px;background:#ffffff05;border:1px solid #e5f1d419;border-radius:100px;color:#d1e2cb;font-size:11px;line-height:1.5}
.moment-summary-dot{width:6px;height:6px;background:var(--moment-accent);border-radius:50%;box-shadow:0 0 0 4px #d5eaae0b;flex-shrink:0}
.moment-continue{position:relative;display:flex;align-items:center;justify-content:center;gap:13px;width:100%;min-height:48px;padding:13px 18px;border:1px solid transparent;border-radius:13px;background:var(--moment-accent);color:#163f2a;font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;box-shadow:0 3px 0 #0000000b;transition:background .2s,transform .2s,box-shadow .2s}
.moment-continue>svg{width:18px;height:18px;transition:transform .2s}
.moment-continue:hover{background:#e7f3ce;box-shadow:0 5px 22px #d5eaae19}
.moment-continue:hover>svg{transform:translateX(3px)}
.moment-continue:active{transform:translateY(1px)}
.moment-auto-hint{margin:14px 0 24px;color:#a1bcac;font-size:9px;line-height:1.6;letter-spacing:.015em}
.moment-progress{height:3px;margin:0 -38px;background:#ffffff06;overflow:hidden}
.moment-progress>span{display:block;width:100%;height:100%;transform-origin:left center;background:linear-gradient(90deg,#8db082,var(--moment-accent));animation:moment-progress var(--moment-duration) linear both;opacity:.65}
.moment-ambient{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.moment-ambient i{--x:15%;--y:56%;--delay:0s;--travel:-45px;position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:var(--moment-accent);opacity:0;animation:moment-particle 5s var(--delay) ease-out both}
.moment-ambient i:nth-child(2){--x:83%;--y:43%;--delay:.35s;--travel:-72px;width:2px;height:2px}
.moment-ambient i:nth-child(3){--x:23%;--y:27%;--delay:.5s;--travel:-38px;width:2px;height:2px}
.moment-ambient i:nth-child(4){--x:76%;--y:63%;--delay:.9s;--travel:-55px}
.moment-ambient i:nth-child(5){--x:9%;--y:76%;--delay:1.1s;--travel:-60px;width:2px;height:2px}
.moment-ambient i:nth-child(6){--x:91%;--y:77%;--delay:1.4s;--travel:-45px;width:2px;height:2px}
.moment-ambient i:nth-child(7){--x:37%;--y:19%;--delay:.75s;--travel:-30px;width:2px;height:2px}
.moment-ambient i:nth-child(8){--x:64%;--y:24%;--delay:1.3s;--travel:-34px;width:2px;height:2px}
.moment-steam{animation:moment-steam 3s ease-in-out infinite alternate}
.moment-stars{animation:moment-twinkle 3.5s ease-in-out infinite alternate}
.time-moment-dialog.is-leaving{animation:moment-exit .18s ease-in both}
.time-moment-dialog.is-leaving::backdrop{animation:moment-backdrop-exit .18s ease-in both}
@keyframes moment-enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes moment-exit{to{opacity:0;transform:translateY(7px) scale(.99)}}
@keyframes moment-backdrop{from{opacity:0}to{opacity:1}}
@keyframes moment-backdrop-exit{to{opacity:0}}
@keyframes moment-illustration{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes moment-glow{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}
@keyframes moment-steam{from{opacity:.45;transform:translateY(2px)}to{opacity:.9;transform:translateY(-3px)}}
@keyframes moment-twinkle{from{opacity:.55}to{opacity:1}}
@keyframes moment-particle{0%{opacity:0;transform:translateY(0)}20%{opacity:.4}100%{opacity:0;transform:translateY(var(--travel))}}
@keyframes moment-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:480px){.time-moment-dialog{width:calc(100vw - 24px);border-radius:23px;max-height:calc(100dvh - 24px)}.time-moment-dialog .moment-card{padding:18px 24px 0}.moment-art{margin-top:14px;width:180px;height:158px}.moment-art>svg{width:138px;height:123px}.moment-copy h2{font-size:28px;letter-spacing:-.8px}.moment-body{font-size:12px;min-height:0}.moment-eyebrow{font-size:9px;letter-spacing:.1em}.moment-summary{margin:20px auto;font-size:10px;padding:9px 12px}.moment-auto-hint{font-size:8px;margin-bottom:19px}.moment-progress{margin-left:-24px;margin-right:-24px}.moment-saved{font-size:10px}}
@media(max-height:700px) and (min-width:481px){.moment-art{height:143px;margin-top:5px;margin-bottom:0}.moment-art>svg{width:135px;height:118px}.moment-copy h2{font-size:30px}.moment-body{min-height:0}.moment-summary{margin:18px auto}.moment-auto-hint{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.time-moment-dialog,.time-moment-dialog::backdrop,.time-moment-dialog.is-leaving,.time-moment-dialog.is-leaving::backdrop,.moment-art>svg,.moment-art:before,.moment-steam,.moment-stars,.moment-progress>span{animation:none!important;transform:none!important}.moment-ambient{display:none}.moment-progress>span{width:100%;opacity:.3}.moment-close,.moment-continue,.moment-continue>svg{transition:none!important}.moment-continue:hover>svg{transform:none}}
