:root{--bg:#fff4da;--surface:#fff;--surface-2:#ffe9b8;--surface-3:#f5dfb0;--ink:#101828;--ink-2:#181b1f;--text:#101828;--muted:#667085;--accent:#f5b301;--accent-2:#d99a00;--accent-3:#ffd666;--danger:#dc2626;--radius:1.25rem;--font-display:"EB Garamond", Georgia, serif;--font-body:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{height:auto;margin:0;padding:0;overflow:hidden auto}body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5}button{font-family:inherit}::selection{background:var(--accent);color:var(--ink)}.photobooth{width:100%;min-height:100dvh;display:flex}.screen-inner{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:880px;height:auto;min-height:100dvh;margin-inline:auto;padding:16px 18px 20px;animation:.28s screen-in;display:flex;overflow:visible}@media (width>=768px){html,body,.screen-inner{height:100dvh;overflow:hidden}}.screen-capture .screen-inner{width:100%;max-width:none;height:100dvh;margin-inline:0;padding:0;overflow:hidden}@keyframes screen-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h1,h2{font-weight:700;font-family:var(--font-display);letter-spacing:.01em;margin:0 0 10px}h1{font-size:clamp(2.6rem,7vw,4rem);line-height:1.05}h2{font-size:clamp(1.6rem,4vw,2.2rem)}p{color:var(--muted);margin:0 0 14px}.btn-start,.btn-secondary,.btn-ghost,.btn-back{cursor:pointer;border:none;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .12s,opacity .12s,box-shadow .2s;display:inline-block}.btn-start{background:linear-gradient(180deg, var(--accent), var(--accent-2));color:var(--ink);padding:16px 56px;font-size:1.1rem;box-shadow:0 6px 20px #f5b30159,inset 0 2px 6px #ffffff73}.btn-start:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 10px 28px #f5b30173,inset 0 2px 6px #ffffff80}.btn-start:active{transform:scale(.98)}.btn-start:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn-secondary{background:var(--surface);color:var(--ink-2);border:1px solid var(--surface-3);padding:12px 30px;font-size:1rem;box-shadow:0 4px 24px #33333314}.btn-secondary:hover{border-color:var(--accent);transform:translateY(-1px)}.btn-ghost{color:#ffffffd9;background:0 0;border:1px solid #ffffff59;padding:8px 20px;font-size:.85rem}.btn-ghost:hover{border-color:var(--accent-3);color:var(--accent-3)}.btn-back{color:var(--muted);background:0 0;padding:6px 10px;font-size:.9rem}.btn-back:disabled{opacity:.4;cursor:not-allowed}.app-bar{align-items:center;gap:8px;width:100%;padding:6px 0 12px;display:flex}.app-bar-title{color:var(--text);font-size:.95rem;font-weight:600}.screen-welcome{background:radial-gradient(640px 420px at 15% -5%, #f5b30138, transparent 60%), radial-gradient(640px 420px at 105% 108%, #ffd66629, transparent 55%), var(--ink)}.screen-welcome .screen-inner{color:#fff;max-width:none}.welcome{justify-content:space-evenly;gap:10px;position:relative}.welcome>:not(.welcome-bg):not(.welcome-dim){z-index:1;position:relative}.welcome-badge{color:var(--accent-3);letter-spacing:.04em;background:#f5b3011f;border:1px solid #ffd66666;border-radius:999px;align-items:center;gap:8px;padding:6px 16px;font-size:.8rem;font-weight:600;display:inline-flex}.welcome-badge:before{content:"";background:var(--accent-3);border-radius:50%;width:8px;height:8px}.brand-title{color:#fff}.brand-title em{color:var(--accent-3);font-style:italic}.hero-title p{color:#ffffffd1;font-size:1.05rem}.welcome-bg{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.welcome-dim{background:linear-gradient(#1018288c,#10182859 55%,#101828e0),radial-gradient(120% 90% at 50% 110%,#10182899,#0000 70%);position:absolute;inset:0}.steps-3{flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 8px;padding:0;list-style:none;display:flex}.screen-welcome .steps-3 li{color:#ffffffeb;background:#ffffff14;border:1px solid #ffffff2e;border-radius:999px;padding:8px 16px;font-size:.85rem}.hero-actions{flex-direction:column;align-items:center;gap:12px;margin-top:8px;display:flex}.welcome-hint{opacity:.65;color:#ffffffb3;font-size:.8rem}.frame-pick{justify-content:center}.frame-pick .app-bar{z-index:20;background:linear-gradient(#fff4daeb,#fff4da00);padding:16px 18px;position:fixed;top:0;left:0;right:0}.frame-swiper{width:100%;max-width:880px;margin:6px 0 14px;position:relative}.frame-grid{overscroll-behavior-x:contain;scroll-snap-type:x proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:safe center;gap:16px;padding:10px 6px 16px;display:flex;overflow-x:auto}.frame-grid::-webkit-scrollbar{display:none}.frame-card{scroll-snap-align:center;background:var(--surface);border:2px solid var(--surface-3);border-radius:var(--radius);cursor:pointer;text-align:left;flex:0 0 calc(50% - 8px);width:auto;max-width:330px;padding:8px;transition:border-color .15s,transform .15s,box-shadow .2s;position:relative;box-shadow:0 4px 24px #3333330f}.frame-arrow{z-index:2;border:1px solid var(--surface-3);background:var(--surface);width:40px;height:40px;color:var(--ink);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;transition:transform .15s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 6px 18px #33333329}.frame-arrow:hover{transform:translateY(-50%)scale(1.08)}.frame-arrow.prev{left:-6px}.frame-arrow.next{right:-6px}.frame-card:hover{border-color:var(--accent);transform:translateY(-2px)}.frame-card.selected{border-color:var(--accent);transform:scale(1.03);box-shadow:0 0 0 3px #f5b30140,0 8px 30px #3333331f}.frame-card img{aspect-ratio:1;object-fit:cover;background:#0b1120;border-radius:.9rem;width:100%}.frame-name{color:var(--text);padding-top:8px;font-size:.86rem;display:block}.frame-count{color:#fff;background:#101828d1;border-radius:999px;padding:2px 7px;font-size:.66rem;font-weight:700;position:absolute;top:6px;right:6px}.filter-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:10px;display:flex}.filter-pill{border:1px solid var(--surface-3);background:var(--surface);color:var(--muted);cursor:pointer;border-radius:999px;padding:7px 16px;font-size:.85rem;transition:all .15s}.filter-pill.active{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700;box-shadow:0 4px 16px #f5b3014d}.frame-pick .bottom-cta{z-index:20;width:auto;margin:0;padding:0;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}@media (width<=620px){.frame-pick{padding-bottom:96px}}.capture{background:var(--ink);justify-content:flex-start}.stage{border-radius:var(--radius);background:#000;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative;overflow:hidden}.stage-video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.countdown{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0}.ring{position:absolute;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#ffffff38;stroke-width:6px}.ring-fg{fill:none;stroke:var(--accent);stroke-width:6px;stroke-linecap:round;filter:drop-shadow(0 0 10px #f5b301cc);transition:stroke-dashoffset 1s linear}.countdown-num{font-size:clamp(4rem,18vw,7rem);font-weight:900;font-family:var(--font-body);color:#fff;text-shadow:0 4px 30px #0009;animation:.9s pop}@keyframes pop{0%{opacity:.4;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}.countdown-label{color:var(--accent-3);letter-spacing:.08em;text-shadow:0 2px 16px #0009;font-size:1.3rem;font-weight:700}.flash{pointer-events:none;background:#fff;animation:.28s ease-out flash-out;position:absolute;inset:0}@keyframes flash-out{0%{opacity:1}to{opacity:0}}.stage-cta{backdrop-filter:blur(2px);background:#10182899;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.stage-hint{color:#ffffffbf;margin:0;font-size:.85rem}.dock{flex-wrap:wrap;justify-content:center;gap:8px;padding:12px 0 0;display:flex}.dock img{object-fit:contain;border:2px solid var(--surface-3);background:#0b1120;border-radius:.75rem;width:64px;height:64px}.review{justify-content:flex-start;gap:6px}.review-preview{aspect-ratio:4/5;border-radius:var(--radius);border:1px solid var(--surface-3);background:#0b1120;justify-content:center;align-items:center;width:min(52vw,300px);max-height:52dvh;display:flex;overflow:hidden;box-shadow:0 12px 40px #3333331f}.review-preview canvas{max-width:100%;max-height:100%}.review-note{margin:0;font-size:.84rem}.review-dock .review-thumb{position:relative}.review-thumb img{object-fit:contain;border:2px solid var(--surface-3);background:#0b1120;border-radius:.75rem;width:74px;height:74px}.thumb-retake{border:2px solid var(--surface-3);background:var(--surface);width:26px;height:26px;color:var(--muted);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;line-height:1;display:flex;position:absolute;top:-8px;right:-8px;box-shadow:0 2px 8px #0003}.thumb-retake.active{background:var(--accent);border-color:var(--accent);color:var(--ink)}.review-thumb img.marked{border-color:var(--accent);box-shadow:0 0 0 3px #f5b30159}.thumb-idx{background:var(--ink);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:20px;height:20px;padding-inline:5px;font-size:.7rem;font-weight:700;display:flex;position:absolute;bottom:-8px;left:-8px}.review-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%;max-width:460px;margin-top:6px;display:flex}.review-actions .btn-start{padding:13px 34px;font-size:1rem}.review-actions .btn-secondary{padding:13px 26px}.processing{justify-content:center;gap:18px}.strip-preview{aspect-ratio:4/5;background:var(--surface);border-radius:var(--radius);border:1px solid var(--surface-3);justify-content:center;align-items:center;width:min(70vw,360px);display:flex;overflow:hidden;box-shadow:0 12px 40px #3333331f}.strip-preview canvas{max-width:100%;max-height:100%}.spinner{border:4px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;width:46px;height:46px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.proc-text{color:var(--muted);margin:0;font-size:1rem}.result{justify-content:center;gap:10px}.result-heading{margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.2rem)}.result-block{flex-direction:column;align-items:center;gap:6px;width:100%;max-width:420px;display:flex}.result-caption{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-3);border-radius:999px;padding:4px 12px;font-size:.72rem;font-weight:700}.qr-wrap{flex-direction:column;align-items:center;gap:8px;display:flex}.result-gif{object-fit:contain;background:#0b1120;border-radius:1rem;width:100%;max-width:520px;height:auto;max-height:80dvh;margin-inline:auto;display:block;box-shadow:0 12px 40px #3333332e}.result-rail{z-index:30;flex-direction:column;gap:10px;display:flex;position:fixed;top:50%;right:14px;transform:translateY(-50%)}.rail-btn{border:1px solid var(--surface-3);background:var(--surface);width:56px;height:56px;color:var(--ink);cursor:pointer;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:0;transition:transform .15s,box-shadow .15s;display:flex;position:relative;box-shadow:0 6px 20px #33333324}.rail-btn:hover{transform:translateY(-2px)scale(1.04);box-shadow:0 10px 26px #33333338}.rail-btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2));border-color:#0000;box-shadow:0 6px 20px #f5b30166}.rail-icon{font-size:1.35rem;line-height:1}.rail-label{letter-spacing:.04em;font-size:.55rem;font-weight:800}@media (width<=620px){.result-rail{flex-direction:row;gap:8px;inset:auto auto 12px 50%;transform:translate(-50%)}.rail-btn{border-radius:16px;width:52px;height:52px}.result{padding-bottom:84px}}.result-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;max-width:460px;display:flex}.result-actions .btn-start{padding:13px 30px;font-size:1rem}.png-downloads{text-align:left;background:var(--surface);border:1px solid var(--surface-3);user-select:none;border-radius:1rem;width:100%;padding:10px 12px;box-shadow:0 4px 24px #3333330f}.png-downloads summary{cursor:pointer;color:var(--text);font-size:.9rem}.qr-box{background:var(--surface);border-radius:var(--radius);border:1px solid var(--surface-3);flex-direction:column;align-items:center;gap:6px;margin-top:6px;padding:14px;display:flex;box-shadow:0 4px 24px #3333330f}.qr-box p{color:var(--muted);margin:0;font-size:.82rem}.empty-state{color:var(--muted);font-size:.95rem}.toast-error{z-index:50;background:var(--danger);color:#fff;border-radius:999px;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 14px 10px 18px;font-size:.9rem;display:flex;position:fixed;top:12px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000040}.toast-error button{color:#fff;cursor:pointer;white-space:nowrap;background:#ffffff40;border:none;border-radius:999px;padding:4px 12px;font-weight:600}.share-page{justify-content:center;align-items:center;width:100%;min-height:100dvh;padding:28px 16px;display:flex;overflow-y:auto}.share-card{background:var(--surface);border:1px solid var(--surface-3);text-align:center;border-radius:1.5rem;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:460px;padding:28px 24px 32px;animation:.3s screen-in;display:flex;box-shadow:0 12px 40px #3333331f}.share-title{margin:0;font-size:1.6rem}.share-gif{background:#0b1120;border-radius:1rem;width:100%;max-width:380px;height:auto;box-shadow:0 18px 44px -12px #00000080}.share-actions{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;display:flex}.share-btn{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;padding:12px 26px;font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .12s,opacity .12s;display:inline-flex}.share-btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2));color:var(--ink);box-shadow:0 6px 20px #f5b30159}.share-btn.primary:hover{opacity:.95;transform:translateY(-1px)}.share-btn.secondary{background:var(--surface);color:var(--ink-2);border:1px solid var(--surface-3)}.share-btn.secondary:hover{border-color:var(--accent);transform:translateY(-1px)}.share-wide{max-width:980px}.share-gallery{grid-template-columns:1fr;gap:18px;width:100%;display:grid}@media (width>=768px){.share-gallery{grid-template-columns:repeat(3,1fr);align-items:start}}.share-item{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.share-caption{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-3);border-radius:999px;padding:4px 12px;font-size:.72rem;font-weight:700}.share-img{object-fit:contain;background:#0b1120;border-radius:.9rem;width:100%;height:auto;max-height:60vh;box-shadow:0 10px 30px #33333324}.share-item-photos{flex-direction:column;gap:10px;width:100%;max-width:260px;display:flex}.share-photo-link.tall img{aspect-ratio:auto;object-fit:contain;width:100%;height:auto;display:block}.share-photo-link.tall{border:2px solid var(--surface-3);border-radius:.75rem;width:100%;margin:0;padding:0;overflow:hidden}.share-photo-link.tall:hover{border-color:var(--accent)}.share-photos{border-top:1px solid var(--surface-3);width:100%;padding-top:16px}.share-photos-label{color:var(--muted);margin-bottom:12px;font-size:.85rem}.share-photos-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.share-photo-link{border:2px solid var(--surface-3);cursor:pointer;background:0 0;border-radius:.75rem;padding:0;transition:transform .15s,border-color .15s;display:block;overflow:hidden}.share-photo-link:hover{border-color:var(--accent);transform:translateY(-2px)}.share-photo-link img{object-fit:contain;width:84px;height:84px;display:block}.share-page .spinner{margin:24px auto}.screen-capture .screen-inner{max-width:none;min-height:100dvh;margin-inline:0;padding:0}.screen-capture .capture{width:100%}.screen-capture .app-bar{z-index:20;pointer-events:none;background:linear-gradient(#101828bf,#10182800);border-radius:0;padding:14px 16px;position:fixed;top:0;left:0;right:0}.screen-capture .app-bar .btn-back{pointer-events:auto;color:#fff;background:#1018288c;border:1px solid #ffffff40;border-radius:999px;padding:8px 14px}.screen-capture .app-bar-title{color:#fff}.screen-capture .stage{border-radius:0;flex:none;width:100vw;height:100dvh;min-height:0}.screen-capture .dock{z-index:20;pointer-events:none;background:linear-gradient(#10182800,#101828cc);margin:0;padding:10px 16px 22px;position:fixed;bottom:0;left:0;right:0}.screen-capture .dock img{border-color:#ffffff59;width:76px;height:76px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.modal-overlay{z-index:60;backdrop-filter:blur(3px);background:#1018288c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background:var(--surface);border-radius:1.25rem;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:440px;max-height:88dvh;padding:18px;animation:.2s screen-in;display:flex;overflow:auto;box-shadow:0 24px 70px #10182859}.modal-head{width:100%;color:var(--ink);justify-content:space-between;align-items:center;gap:8px;font-size:1rem;font-weight:700;display:flex}.modal-close{background:var(--surface-3);cursor:pointer;width:32px;height:32px;color:var(--ink);border:none;border-radius:50%;font-size:.9rem;font-weight:700;line-height:1}.modal-img{background:#0b1120;border-radius:.9rem;width:100%;height:auto}.modal-dl{margin-top:2px}.modal-note{color:var(--muted);margin:0;font-size:.82rem}.modal-dock img{width:88px;height:88px}.modal-qr{flex-direction:column;align-items:center;gap:8px;display:flex}.modal-qr p{color:var(--muted);margin:0;font-size:.85rem}