@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap";
:root{--color-bubble-blue:#6c8cff;--color-bubble-blue-shadow:#4c6bdd;--color-candy-pink:#ff7eb3;--color-candy-pink-shadow:#db5f93;--color-lemon-pop:#ffd86b;--color-mint:#8de3c7;--color-lavender:#eee9ff;--color-paper:#fff;--color-ink:#17172b;--color-bg:#fdf9f4;--color-muted:#6b6b85;--color-faint:#9a9ab0;--color-hairline:#eee9ff;--color-card-shadow:#efe9e1;--color-danger:#ff6b6b;--color-danger-shadow:#d94f4f;--radius-photo:8px;--radius-thumb:14px;--radius-card:20px;--radius-viewfinder:28px;--radius-pill:999px;--font-display:"Fredoka", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif;--breakpoint-wide:1024px}
*{box-sizing:border-box}html,body{overscroll-behavior-y:none;height:100%;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}html,*{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{width:0;height:0;display:none}::-webkit-scrollbar-thumb{background:0 0}button,input{font-family:inherit}button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}img{max-width:100%}#app{background:var(--color-bg);justify-content:center;min-height:100%;display:flex}@keyframes bl-slot{0%{opacity:0;transform:scale(.92)translateY(8px)}7%{opacity:1;transform:scale(1)translateY(0)}86%{opacity:1;transform:scale(1)translateY(0)}96%,to{opacity:0;transform:scale(.98)}}@keyframes bl-drift{0%,to{transform:translate(0,0)rotate(-9deg)}50%{transform:translateY(-12px)rotate(-7deg)}}@keyframes bl-drift2{0%,to{transform:translate(0,0)rotate(9deg)}50%{transform:translateY(-9px)rotate(7deg)}}@keyframes bl-drift3{0%,to{transform:translate(0,0)rotate(13deg)}50%{transform:translateY(-8px)rotate(11deg)}}@keyframes bl-pop{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@keyframes bl-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes bl-sheet{0%{opacity:.4;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes bl-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes bl-flash{0%{opacity:0}12%{opacity:.85}to{opacity:0}}@keyframes bl-ring{0%{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.5)}}@keyframes bl-float{0%,to{transform:translate3d(0,0,0) rotate(var(--r,0deg))}50%{transform:translate3d(0,-18px,0) rotate(calc(var(--r,0deg) + 8deg))}}@keyframes bl-bob{0%,to{transform:translate3d(0,0,0) rotate(var(--r,0deg))}50%{transform:translate3d(10px,9px,0) rotate(calc(var(--r,0deg) - 10deg))}}@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.strip-box,.placed-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.btn-primary{cursor:pointer;background:var(--color-bubble-blue);color:#fff;font:600 19px/1 var(--font-display);border-radius:var(--radius-pill);box-shadow:0 5px 0 var(--color-bubble-blue-shadow);border:none;padding:18px;transition:transform .12s,box-shadow .12s}.btn-primary:hover{box-shadow:0 3px 0 var(--color-bubble-blue-shadow);transform:translateY(2px)}.btn-primary:active{box-shadow:0 0 0 var(--color-bubble-blue-shadow);transform:translateY(5px)}.btn-primary[disabled]{cursor:default;color:#a8a29a;box-shadow:none;background:#e6e1da;transform:none}.btn-commit{cursor:pointer;background:var(--color-candy-pink);color:#fff;font:600 19px/1 var(--font-display);border-radius:var(--radius-pill);box-shadow:0 5px 0 var(--color-candy-pink-shadow);border:none;width:100%;padding:18px}.btn-secondary{cursor:pointer;border:2px solid var(--color-hairline);border-radius:var(--radius-pill);font:700 14px/1 var(--font-body);color:var(--color-ink);background:#fff;justify-content:center;align-items:center;gap:6px;padding:14px;display:flex}.btn-secondary:hover{border-color:var(--color-bubble-blue)}.btn-secondary[disabled]{cursor:default;opacity:.5}.btn-ghost{cursor:pointer;font:700 13px/1 var(--font-body);color:var(--color-faint);background:0 0;border:none;padding:12px}.icon-btn{cursor:pointer;border:2px solid var(--color-hairline);width:46px;height:46px;color:var(--color-ink);background:#fff;border-radius:999px;flex:none;place-items:center;transition:transform .14s,border-color .14s;display:grid}.icon-btn:hover{border-color:var(--color-bubble-blue);transform:translateY(-1px)}.icon-btn[disabled]{cursor:default;opacity:.5;transform:none}.back-btn{cursor:pointer;border:2px solid var(--color-hairline);border-radius:var(--radius-pill);width:fit-content;font:700 12px/1 var(--font-body);color:var(--color-muted);box-shadow:0 2px 0 var(--color-card-shadow);background:#fff;align-self:flex-start;align-items:center;gap:7px;margin-bottom:10px;padding:5px 13px 5px 5px;transition:transform .14s;display:flex}.back-btn:hover{transform:translateY(-1px)}.back-btn-float{cursor:pointer;pointer-events:auto;border-radius:var(--radius-pill);width:fit-content;font:700 12px/1 var(--font-body);color:var(--color-ink);background:#ffffffeb;border:2px solid #ffffffe6;align-self:flex-start;align-items:center;gap:7px;padding:5px 13px 5px 5px;transition:transform .14s;display:flex;box-shadow:0 2px #17172b1a}.back-btn-float:hover{transform:translateY(-1px)}.back-chev{border-radius:var(--radius-pill);background:var(--color-bubble-blue);width:20px;height:20px;font:800 15px/1 var(--font-body);color:#fff;place-items:center;padding-bottom:3px;display:grid}.pill-toggle{cursor:pointer;border-radius:var(--radius-pill);font:700 11px/1 var(--font-body);color:#ffffffd1;background:0 0;border:none;padding:7px 11px;transition:all .16s}.pill-toggle.on{color:var(--color-ink);background:#fff}.mode-pill{cursor:pointer;border-radius:var(--radius-pill);font:700 12px/1 var(--font-body);color:#fff;background:0 0;border:none;flex:none;padding:10px 16px}.mode-pill.on{color:var(--color-ink);background:#fff}.card-select{cursor:pointer;border-radius:var(--radius-card);min-width:0;box-shadow:0 4px 0 var(--color-card-shadow);background:#fff;border:3px solid #fff;flex-direction:column;align-items:center;gap:10px;padding:14px 10px 12px;transition:transform .16s,box-shadow .16s;display:flex;position:relative}.card-select:hover{transform:translateY(-3px)}.card-select.on{border-color:var(--color-bubble-blue);box-shadow:0 8px #d5deff}.badge-check{border-radius:var(--radius-pill);width:26px;height:26px;font:800 13px/1 var(--font-body);background:var(--color-bubble-blue);color:#fff;box-shadow:0 3px 0 var(--color-bubble-blue-shadow);place-items:center;animation:.2s bl-pop;display:none;position:absolute;top:-9px;right:-9px}.card-select.on .badge-check{display:grid}.confirm-scrim{z-index:40;background:#17172b6b;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.confirm-card{background:#fff;border-radius:22px;flex-direction:column;gap:14px;width:100%;max-width:320px;padding:22px;animation:.18s both bl-pop;display:flex;box-shadow:0 18px 50px #17172b47}.confirm-btn-row{gap:10px;display:flex}.confirm-btn{cursor:pointer;border-radius:var(--radius-pill);font:800 14px/1 var(--font-body);border:none;flex:1;padding:13px 16px}.confirm-btn.keep{color:var(--color-ink);background:#f1ece4}.confirm-btn.delete{background:var(--color-danger);color:#fff;box-shadow:0 4px 0 var(--color-danger-shadow)}.tab-btn{cursor:pointer;border-radius:var(--radius-pill);font:700 12px/1 var(--font-body);color:var(--color-ink);background:0 0;border:none;flex:1;padding:11px 4px}.tab-btn.on{background:var(--color-lavender)}.sheet-handle{cursor:pointer;background:0 0;border:none;place-items:center;display:grid}.sheet-handle-pill{border-radius:var(--radius-pill);background:var(--color-lavender);display:block}.field-input{border:2px solid var(--color-hairline);font:600 16px/1 var(--font-body);color:var(--color-ink);border-radius:16px;outline:none;padding:14px 15px}.hairline-note{font:400 12px/1.5 var(--font-body);color:var(--color-muted);background:#fff7e3;border-radius:16px;align-items:flex-start;gap:9px;padding:13px 14px;display:flex}.hairline-note .dot{border-radius:var(--radius-pill);background:var(--color-lemon-pop);flex:none;width:8px;height:8px;margin-top:5px}
.shell{background:var(--color-bg);width:100%;max-width:420px;min-height:100dvh;position:relative;overflow:hidden;box-shadow:0 0 0 1px #17172b0d}body.wide .shell{max-width:none;box-shadow:none}.blob-field{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.dot-field{opacity:.55;background-image:radial-gradient(#e7ded4 1.6px,#0000 1.6px);background-size:22px 22px;position:absolute;inset:0}.blob-layer{transform-origin:50%;opacity:1;transition:transform .9s cubic-bezier(.22,.9,.24,1),opacity .6s;position:absolute;inset:0;transform:scale(1)}.blob-layer.away{opacity:0;transform:scale(1.45)}.blob-tl,.blob-tr,.blob-bl,.blob-br{position:absolute}.blob-tl{width:262px;height:224px;top:-104px;left:-96px}.blob-tr{width:256px;height:216px;top:-118px;right:-104px}.blob-bl{width:240px;height:204px;bottom:-96px;left:-104px}.blob-br{width:268px;height:228px;bottom:-104px;right:-112px}body.wide .blob-tl{width:430px;height:365px;top:-150px;left:-168px}body.wide .blob-tr{width:420px;height:355px;top:-176px;right:-196px}body.wide .blob-bl{width:395px;height:335px;bottom:-164px;left:-182px}body.wide .blob-br{width:455px;height:385px;bottom:-178px;right:-196px}.drift-icon{position:absolute}.screen-head{flex-direction:column;flex:none;gap:10px;width:100%;padding:18px 20px 12px;display:flex}body.wide .screen-head{max-width:1180px;margin:0 auto;padding:26px 48px 14px}.pick-head{flex:none;width:100%;padding:18px 20px 10px}body.wide .pick-head{max-width:1180px;margin:0 auto;padding:26px 48px 12px}.cta-bar{padding:14px 20px calc(22px + env(safe-area-inset-bottom));flex:none;width:100%}body.wide .cta-bar{padding:16px 48px calc(26px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto}.full-screen{z-index:1;flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.layout-grid{flex:1;grid-template-columns:1fr 1fr;gap:12px;width:100%;min-height:0;padding:4px 20px 20px;display:grid;overflow:auto}body.wide .layout-grid{grid-template-columns:repeat(4,1fr);gap:18px;max-width:1180px;margin:0 auto;padding:10px 48px 24px}.pick-grid{flex:1;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;align-content:start;gap:10px;width:100%;min-height:0;padding:6px 20px 20px;display:grid;overflow:auto}body.wide .pick-grid{grid-template-columns:repeat(4,1fr);gap:16px;max-width:1180px;margin:0 auto;padding:10px 48px 24px}.capture-screen{z-index:2;background:#0b0b12;height:100dvh;min-height:100dvh;position:relative;overflow:hidden}.capture-video{object-fit:contain;background:#0b0b12;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.no-cam{background:repeating-linear-gradient(135deg,#17172b 0 22px,#1d1d33 22px 44px);place-items:center;display:grid;position:absolute;inset:0}.crop-row{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#17172b8c;border-radius:999px;flex:none;gap:3px;padding:4px;display:flex}.guide-wrap{z-index:2;pointer-events:none;place-items:center;display:grid;position:absolute}.guide-tl,.guide-tr,.guide-bl,.guide-br{width:26px;height:26px;position:absolute}.guide-tl{border-top:3px solid #ffffffe6;border-left:3px solid #ffffffe6;border-radius:12px 0 0;top:-2px;left:-2px}.guide-tr{border-top:3px solid #ffffffe6;border-right:3px solid #ffffffe6;border-radius:0 12px 0 0;top:-2px;right:-2px}.guide-bl{border-bottom:3px solid #ffffffe6;border-left:3px solid #ffffffe6;border-radius:0 0 0 12px;bottom:-2px;left:-2px}.guide-br{border-bottom:3px solid #ffffffe6;border-right:3px solid #ffffffe6;border-radius:0 0 12px;bottom:-2px;right:-2px}.guide-tag{font:800 20px/1 var(--font-body);letter-spacing:.14em;color:#ffffffeb;white-space:nowrap;opacity:0;pointer-events:none;background:#0b0b1280;border-radius:999px;padding:10px 18px;transition:opacity .35s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.guide-tag.show{opacity:1}.flash-overlay{z-index:4;pointer-events:none;background:#fff;animation:.42s ease-out both bl-flash;position:absolute;inset:0}.countdown-overlay{z-index:5;background:#17172b59;place-items:center;display:grid;position:absolute;inset:0}.countdown-ring{border:4px solid #ffffffb3;border-radius:999px;width:190px;height:190px;animation:.8s ease-out infinite bl-ring;position:absolute}.countdown-num{font:600 120px/1 var(--font-display);color:#fff;text-shadow:0 6px #6c8cff99;animation:.9s ease-in-out infinite bl-pulse}.cap-top-bar{z-index:3;left:14px;right:14px;top:calc(14px + env(safe-area-inset-top));justify-content:space-between;align-items:center;gap:10px;display:flex;position:absolute}.shutter-ring{border-radius:999px;flex:none;place-items:center;width:88px;height:88px;transition:background .3s;display:grid}.shutter-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#ffffff38;border:3px solid #ffffffd9;border-radius:999px;flex:none;place-items:center;width:76px;height:76px;padding:0;transition:transform .12s;display:grid}.shutter-btn[disabled]{cursor:not-allowed;background:#ffffff24}.shutter-core{background:#fff;border-radius:999px;width:50px;height:50px;transition:all .16s;display:block}.shutter-core.counting{border-radius:8px;width:26px;height:26px}.review-btn{cursor:pointer;pointer-events:auto;background:var(--color-mint);color:var(--color-ink);font:800 13px/1 var(--font-body);white-space:nowrap;border:none;border-radius:999px;padding:11px 16px;transition:transform .14s;box-shadow:0 8px 20px #00000047}.review-btn:hover{transform:translateY(-1px)}.shot-card{cursor:pointer;box-shadow:0 4px 0 var(--color-card-shadow);background:#fff;border:3px solid #fff;border-radius:18px;flex-direction:column;gap:6px;padding:7px 7px 5px;transition:transform .16s,box-shadow .16s,opacity .16s;display:flex;position:relative;overflow:visible}.shot-card:hover{transform:translateY(-3px)}.shot-card.on{border-color:var(--color-bubble-blue);box-shadow:0 8px #d5deff}.shot-card.full{cursor:default;opacity:.45}.shot-media{aspect-ratio:4/3;background:#f7f4ef;border-radius:11px;place-items:center;display:grid;position:relative;overflow:hidden}.shot-media img{object-fit:cover;width:100%;height:100%;display:block}.shot-veil{background:#6c8cff24;position:absolute;inset:0}.shot-badge{width:28px;height:28px;font:800 13px/1 var(--font-body);background:var(--color-bubble-blue);color:#fff;box-shadow:0 3px 0 var(--color-bubble-blue-shadow);border-radius:999px;place-items:center;animation:.2s bl-pop;display:none;position:absolute;top:-9px;right:-9px}.shot-card.on .shot-badge{display:grid}.shot-del{cursor:pointer;z-index:2;width:22px;height:22px;font:800 17px/1 var(--font-body);background:var(--color-danger);color:#fff;box-shadow:0 3px 0 var(--color-danger-shadow), 0 0 0 2px #fff;border:none;border-radius:999px;place-items:center;display:grid;position:absolute;top:-8px;left:-8px}.shot-foot{justify-content:center;align-items:center;padding-top:1px;display:flex}.shot-slot{cursor:default;background:0 0;border:2px dashed #ded8cf;border-radius:7px;place-items:center;width:26px;height:34px;padding:0;transition:all .16s;display:grid}.shot-slot.filled{cursor:pointer;border:2px solid var(--color-bubble-blue);background:var(--color-bubble-blue)}.thumb-strip{cursor:pointer;background:#f7f4ef;border:none;border-radius:10px;flex:none;place-items:center;width:54px;height:40px;padding:0;transition:transform .14s;animation:.2s bl-pop;display:grid;position:relative;overflow:hidden}.thumb-strip img{object-fit:cover;width:100%;height:100%}.edit-wrap{flex-direction:column;height:100dvh;animation:.3s both bl-enter;display:flex;position:relative;overflow:hidden}body.wide .edit-wrap{flex-direction:row}.edit-header{z-index:7;left:0;right:0;top:env(safe-area-inset-top);pointer-events:none;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px 8px;display:flex;position:absolute}.edit-stage{flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}.edit-stage-scroll{touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;justify-content:center;align-items:flex-start;padding:52px 20px 20px;display:flex;position:absolute;inset:0;overflow:auto}body.wide .edit-stage-scroll{align-items:center;padding:72px 40px 40px}.zoom-pill{z-index:4;border:2px solid var(--color-hairline);touch-action:none;cursor:pointer;background:#ffffffeb;border-radius:999px;width:34px;height:168px;position:absolute;top:50%;right:10px;transform:translateY(-50%);box-shadow:0 6px 16px #17172b24}.zoom-pill-label{font:700 11px/1 var(--font-body);color:var(--color-faint);white-space:nowrap;pointer-events:none;position:absolute;top:-24px;left:50%;transform:translate(-50%)}.zoom-pill-fill{background:var(--color-bubble-blue);opacity:.3;pointer-events:none;border-radius:999px;position:absolute;bottom:4px;left:4px;right:4px}.zoom-pill-thumb{border:2px solid var(--color-bubble-blue);pointer-events:none;background:#fff;border-radius:999px;width:26px;height:26px;margin-left:-13px;position:absolute;left:50%;box-shadow:0 2px 6px #17172b38}.edit-sheet{z-index:6;border-top:2px solid var(--color-hairline);padding-bottom:env(safe-area-inset-bottom);background:#fff;border-radius:26px 26px 0 0;flex:none;animation:.26s cubic-bezier(.22,.9,.24,1) bl-sheet;position:relative;box-shadow:0 -14px 34px #17172b1f}body.wide .edit-sheet{border-top:none;border-left:2px solid var(--color-hairline);border-radius:26px 0 0 26px;flex-direction:column;height:100%;padding-left:34px;transition:width .3s cubic-bezier(.22,.9,.24,1);display:flex;overflow:hidden;box-shadow:-14px 0 34px #17172b14}.sheet-tabs-row{gap:4px;padding:0 14px 10px;display:flex}body.wide .sheet-tabs-row{padding:18px 14px 10px 0}.sheet-body{max-height:34vh;transition:max-height .3s cubic-bezier(.22,.9,.24,1),opacity .2s;overflow:auto}body.wide .sheet-body{flex:1;min-height:0;max-height:none}.panel-grid{grid-template-columns:repeat(3,1fr);align-content:start;gap:10px;padding:4px 14px 24px;display:grid}body.wide .panel-grid{grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 14px 24px 0}.panel-grid-sm{grid-template-columns:repeat(5,1fr);align-content:start;gap:8px;padding:4px 14px 24px;display:grid}body.wide .panel-grid-sm{grid-template-columns:repeat(6,1fr);padding:4px 14px 24px 0}.frame-card{cursor:pointer;border:2px solid var(--color-hairline);border-radius:var(--radius-card);background:#fff;flex-direction:column;align-items:center;gap:8px;padding:9px 7px;display:flex}.frame-card.on{border-color:var(--color-bubble-blue);background:#f5f3ff}.frame-card-stage{justify-content:center;align-items:center;width:100%;height:120px;display:flex}body.wide .frame-card-stage{height:86px}.filter-card{cursor:pointer;border:2px solid var(--color-hairline);border-radius:var(--radius-card);background:#fff;flex-direction:column;align-items:center;gap:7px;padding:8px;display:flex}.filter-card.on{border-color:var(--color-bubble-blue)}.filter-swatch{background:repeating-linear-gradient(135deg,#ff7eb3 0 10px,#ffd86b 10px 20px,#8de3c7 20px 30px);border-radius:8px;width:100%;height:52px}body.wide .filter-swatch{height:40px}.sticker-btn{aspect-ratio:1;border:2px solid var(--color-hairline);cursor:pointer;background:#fff;border-radius:16px;place-items:center;padding:6px;display:grid}.text-color-swatch{cursor:pointer;border:3px solid var(--color-hairline);border-radius:999px;width:38px;height:38px}.text-color-swatch.on{border-color:var(--color-ink)}.strip-stage-wrap{transform-origin:top;will-change:transform}.result-wrap{z-index:1;min-height:100dvh;padding:18px 20px calc(34px + env(safe-area-inset-bottom));flex-direction:column;gap:16px;animation:.3s both bl-enter;display:flex;position:relative}body.wide .result-wrap{grid-template:"strip head""strip controls"/auto minmax(300px,400px);place-content:center;gap:20px 52px;padding:40px 48px;display:grid}.result-head{flex-direction:column;gap:14px;display:flex}body.wide .result-head{grid-area:head;align-self:flex-end}.result-strip{align-self:center;padding:6px 0 2px}body.wide .result-strip{grid-area:strip}.result-controls{flex-direction:column;gap:12px;display:flex}body.wide .result-controls{grid-area:controls}.saved-pill{font:800 10px/1 var(--font-body);letter-spacing:.08em;color:#5f9f88;background:#eaf8f2;border-radius:999px;padding:8px 13px}.qr-grid{border:2px solid var(--color-hairline);background:#fff;border-radius:10px;flex:none;grid-template-columns:repeat(13,1fr);gap:1px;width:104px;height:104px;padding:6px;display:grid}.qr-canvas-wrap{border:2px solid var(--color-hairline);border-radius:10px;flex:none;width:104px;height:104px;overflow:hidden}.qr-canvas-wrap canvas{width:100%;height:100%;image-rendering:pixelated;display:block}