*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;height:100%;overflow:hidden}#app{background:#fff;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.stage{touch-action:none;background:#000;width:min(100vw,56.25dvh);height:100dvh;position:relative;overflow:hidden}@media (min-aspect-ratio:10/16){.stage{border-radius:0;box-shadow:0 0 40px #0000001f}}.layer{width:100%;height:100%;display:block;position:absolute;inset:0}.stage canvas.view,.stage canvas.snap{image-rendering:auto}.stage canvas.snap{pointer-events:none}.page{position:absolute;inset:0}.page.snappage{visibility:hidden;pointer-events:none}.static{width:100%;height:100%;image-rendering:pixelated;opacity:.9;position:absolute;inset:0}.slide{will-change:transform}.rail{right:10px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:5;flex-direction:column;align-items:center;gap:22px;display:flex;position:absolute}.btn{cursor:pointer;filter:drop-shadow(0 2px 6px #0000008c);background:0 0;border:0;place-items:center;width:52px;height:52px;display:grid}.btn svg{width:40px;height:40px;overflow:visible}.btn .heart-fill{fill:#fff;transition:fill .15s}.btn.liked .heart-fill{fill:#ff2d55}.btn.pop svg{animation:.45s cubic-bezier(.2,1.6,.4,1) pop}@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.45)}to{transform:scale(1)}}.btn .ring{fill:none;stroke:#ff2d55;stroke-width:2px;opacity:0}.btn.pop .ring{animation:.5s ease-out ring}@keyframes ring{0%{opacity:1;r:8}to{opacity:0;r:30}}.progress{left:0;right:0;bottom:env(safe-area-inset-bottom);z-index:5;background:#ffffff2e;height:3px;position:absolute}.progress>i{background:#ffffffe6;width:0;position:absolute;top:0;bottom:0;left:0}.meta{left:14px;bottom:calc(26px + env(safe-area-inset-bottom));z-index:5;pointer-events:none;filter:drop-shadow(0 1px 4px #0009);flex-direction:column;gap:9px;display:flex;position:absolute}.meta .who{align-items:center;gap:10px;display:flex}.meta .av{object-fit:cover;border:2px solid #fff;border-radius:50%;width:34px;height:34px;display:block}.meta .bar{background:#ffffffeb;border-radius:5px;height:10px}.meta .bar.dim{background:#ffffff8c;height:8px}.tapheart{pointer-events:none;z-index:6;width:110px;height:110px;margin:-55px 0 0 -55px;animation:.9s ease-out forwards tapheart;position:absolute}@keyframes tapheart{0%{transform:scale(.2) rotate(var(--r));opacity:0}15%{transform:scale(1.15) rotate(var(--r));opacity:1}30%{transform:scale(.95) rotate(var(--r))}to{transform:translateY(-160px) scale(1.3) rotate(var(--r));opacity:0}}.start{z-index:10;cursor:pointer;background:#00000040;place-items:center;display:grid;position:absolute;inset:0}.start svg{filter:drop-shadow(0 0 24px #ffffff59);width:96px;height:96px;animation:2.4s ease-in-out infinite breathe}@keyframes breathe{50%{transform:scale(1.08)}}.start.hide{opacity:0;pointer-events:none;transition:opacity .5s}.hint{z-index:6;pointer-events:none;opacity:0;width:44px;height:70px;margin-left:-22px;position:absolute;bottom:22%;left:50%}.hint.show{animation:1.6s ease-in-out 3 hint}@keyframes hint{0%{opacity:0;transform:translateY(20px)}30%{opacity:.9}to{opacity:0;transform:translateY(-60px)}}