*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{color:#f8fafc;background:#050507;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;overflow:hidden}button{font:inherit}.state{text-align:center;color:#0f172a;background:#f8fafc;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:32px;display:flex}.state--dark{color:#f8fafc;background:#050507}.state h1{margin:20px 0 8px;font-size:24px;line-height:1.25}.state p{color:#64748b;max-width:320px;margin:0;font-size:15px;line-height:1.7}.state--dark p{color:#f8fafcb3}.loader{border:3px solid #f8fafc2e;border-top-color:#f8fafc;border-radius:50%;width:36px;height:36px;animation:.85s linear infinite spin}.invitation,.story{width:100%;height:100%}.external-template{background:#050507;width:100%;height:100%;position:relative}.external-template__frame{background:#fff;border:0;width:100%;height:100%;display:block}.external-template__fallback{right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));z-index:20;color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172ab8;border:1px solid #ffffff61;border-radius:999px;min-height:40px;padding:0 16px;font-size:14px;font-weight:600;line-height:40px;text-decoration:none;position:fixed}.story{scroll-snap-type:y mandatory;scrollbar-width:none;background:#050507;overflow:hidden auto}.story::-webkit-scrollbar{display:none}.slide{scroll-snap-align:start;background-position:50%;background-size:cover;place-items:center;width:100%;height:100svh;min-height:100svh;display:grid;position:relative;overflow:hidden}.slide:before{content:"";background:inherit;filter:blur(16px)saturate(.92);opacity:.45;position:absolute;inset:0;transform:scale(1.08)}.story--fade .slide{scroll-snap-align:center}.screen{z-index:1;isolation:isolate;background-position:50%;background-size:cover;width:min(100vw,56.2219svh);max-width:430px;height:min(100svh,177.867vw);max-height:100svh;position:relative;overflow:hidden;box-shadow:0 24px 80px #00000047}.screen-bg-image{z-index:0;object-fit:cover;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.layer{will-change:transform, opacity;justify-content:center;align-items:center;animation-timing-function:ease;animation-fill-mode:both;display:flex;position:absolute}.layer img,.layer svg,.layer-image-frame,.template-svg-wrapper,.template-rect,.template-button{width:100%;height:100%}.layer-image-frame{position:relative;overflow:hidden}.layer img{display:block}.template-svg-wrapper{overflow:hidden}.template-svg{display:block}.template-text{white-space:pre-wrap;overflow-wrap:anywhere;width:100%}.template-button{white-space:nowrap;text-overflow:ellipsis;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:0 18px;display:flex;overflow:hidden}.page-dots{top:50%;right:max(14px, env(safe-area-inset-right));z-index:20;flex-direction:column;gap:9px;display:flex;position:fixed;transform:translateY(-50%)}.page-dot{cursor:pointer;background:#0003;border:1px solid #ffffffa3;border-radius:999px;width:9px;height:9px;padding:0;transition:height .18s,background-color .18s,border-color .18s}.page-dot.is-active{background:#fff;border-color:#fff;height:28px}.page-dot:focus-visible,.music-button:focus-visible{outline-offset:3px;outline:3px solid #fff}.music-button{z-index:30;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;background-color:#9c9c9c1a;background-position:0 0;background-repeat:no-repeat;background-size:contain;border:0;border-radius:50%;width:30px;height:30px;padding:0;position:fixed;top:10px;right:10px}.music-button img{width:30px;height:30px;display:block}.music-button .tips{color:#fff;opacity:0;pointer-events:none;background:#97979766;border-radius:4px;width:70px;padding:4px 0 4px 10px;font-size:12px;line-height:1;transition:opacity .18s,transform .18s;display:block;position:absolute;top:6px;left:-80px;transform:translate(4px)}.music-button .tips:after{content:"";border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:5px solid #97979766;width:0;height:0;position:absolute;top:5px;left:100%}.music-button.is-playing{animation:1.5s linear infinite musicRotate}.music-button.is-hinting{animation:none}.music-button.is-hinting .tips{opacity:1;transform:translate(0)}.music-audio{display:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-36px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.92)}to{transform:scale(1)}}@keyframes rubberBand{0%,to{transform:scale(1)}30%{transform:scaleX(1.16)scaleY(.84)}40%{transform:scaleX(.84)scaleY(1.16)}55%{transform:scaleX(1.08)scaleY(.92)}65%{transform:scaleX(.96)scaleY(1.04)}75%{transform:scaleX(1.02)scaleY(.98)}}@keyframes rollIn{0%{opacity:0;transform:translate(-32px)rotate(-120deg)}to{opacity:1;transform:translate(0)rotate(0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(900px)rotateY(90deg)}60%{opacity:1;transform:perspective(900px)rotateY(-12deg)}80%{transform:perspective(900px)rotateY(6deg)}to{transform:perspective(900px)rotateY(0)}}@keyframes puffIn{0%{opacity:0;filter:blur(10px);transform:scale(1.18)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;transform-origin:bottom;transform:scale(.12)rotate(30deg)}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform-origin:bottom;transform:scale(1)}}@keyframes musicRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width>=768px){.slide{background-color:#111827}.screen{border-radius:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}