:root{--pink: #ff5fa2;--pink-deep: #d81b72;--pink-soft: #ffd6ec;--lilac: #c9b8ff;--sky: #a8e6ff;--butter: #ffe08a;--ink: #2a1838;--muted: #6e5a7e;--paper: #fff6fb;--card: rgba(255, 255, 255, .72);--line: rgba(42, 24, 56, .12);--shadow: 0 18px 40px -18px rgba(216, 27, 114, .45);--radius: 22px;--display: "Bagel Fat One", system-ui, sans-serif;--mono: "DM Mono", ui-monospace, monospace;--sans: "DM Sans", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(1200px 600px at 10% -10%,#ffe1f0 0%,transparent 60%),radial-gradient(900px 600px at 110% 10%,#e3dbff 0%,transparent 60%),radial-gradient(800px 600px at 50% 120%,#d6f3ff 0%,transparent 60%),var(--paper);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);opacity:.55}button{font:inherit;color:inherit}img{display:block}.app{position:relative;min-height:100%;padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}.btn{border:0;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s;-webkit-tap-highlight-color:transparent}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible,.chip:focus-visible,.slot:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}.btn-primary{color:#fff;background:linear-gradient(180deg,#ff7ab5,var(--pink) 55%,var(--pink-deep));box-shadow:inset 0 1px #fff9,var(--shadow);text-shadow:0 1px 0 rgba(0,0,0,.12)}.btn-primary:hover:not(:disabled){transform:translateY(-1px)}.btn-ghost{background:var(--card);border:1.5px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-ghost:hover:not(:disabled){background:#fff}.btn-big{padding:15px 26px;font-size:1.05rem}.btn-link{background:none;text-decoration:underline;text-underline-offset:3px;color:var(--muted);padding:8px 0}.chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border-radius:999px;padding:8px 14px 8px 8px;border:1.5px solid var(--line);background:var(--card);font-family:var(--mono);font-size:.82rem;cursor:pointer}.chip i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #0000001a}.chip.on{border-color:var(--pink);background:#fff;box-shadow:0 0 0 3px var(--pink-soft)}.landing{max-width:1080px;margin:0 auto;min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px);display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px;position:relative}.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.logo{font-family:var(--display);font-weight:400;font-size:clamp(4.2rem,13vw,9rem);line-height:.86;margin:0;letter-spacing:-.01em;background:linear-gradient(180deg,#fff 0%,#ffd0e6 18%,var(--pink) 48%,#b36bff 78%,#7fd6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--ink);filter:drop-shadow(5px 6px 0 var(--ink))}.tagline{font-family:var(--mono);font-size:1.05rem;margin:18px 0 10px}.lede{max-width:30rem;color:var(--muted);line-height:1.55;margin:0 0 26px}.badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:26px 0 0}.badges li{font-family:var(--mono);font-size:.78rem;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px}.mock-strip{justify-self:center;width:min(230px,60vw);padding:14px 14px 0;background:linear-gradient(#ffe3f1,#ffc6e3);border-radius:6px;transform:rotate(4deg);box-shadow:0 30px 60px -20px #78287873,0 0 0 1.5px var(--ink);animation:bob 5s ease-in-out infinite}.mock-frame{aspect-ratio:4 / 3;margin-bottom:10px;display:grid;place-items:center;font-size:2rem;color:#2a18388c;box-shadow:inset 0 0 0 1px #00000014}.mock-foot{font-family:var(--display);color:var(--pink-deep);text-align:center;padding:8px 0 16px;font-size:1.3rem}@keyframes bob{50%{transform:rotate(2deg) translateY(-8px)}}.deco{position:absolute;font-size:2rem;color:var(--pink);animation:twinkle 3s ease-in-out infinite;pointer-events:none}.s1{top:6%;left:46%}.s2{top:70%;left:-1%;color:#8f7cff;animation-delay:.8s}.s3{bottom:6%;right:6%;font-size:1.4rem;animation-delay:1.6s}.s4{top:12%;right:4%;color:#8f7cff;animation-delay:.4s}@keyframes twinkle{50%{opacity:.3;transform:scale(.8) rotate(20deg)}}.topbar{max-width:1080px;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.logo-sm{font-family:var(--display);font-size:1.5rem;color:var(--pink);-webkit-text-stroke:1px var(--ink)}.counter{font-family:var(--mono);font-size:.9rem;min-width:64px;text-align:right}.studio-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px;align-items:start}.studio-grid>*,.result-grid>*{min-width:0}.viewfinder{position:relative;aspect-ratio:4 / 3;border-radius:var(--radius);overflow:hidden;background:#1b1430;box-shadow:0 0 0 2px var(--ink),8px 8px 0 var(--ink),var(--shadow)}.viewfinder video{width:100%;height:100%;object-fit:cover;display:block}.viewfinder video.mirror{transform:scaleX(-1)}.vf-corners{position:absolute;top:14px;right:14px;bottom:14px;left:14px;pointer-events:none;background:linear-gradient(#fff,#fff) top left / 22px 2px no-repeat,linear-gradient(#fff,#fff) top left / 2px 22px no-repeat,linear-gradient(#fff,#fff) top right / 22px 2px no-repeat,linear-gradient(#fff,#fff) top right / 2px 22px no-repeat,linear-gradient(#fff,#fff) bottom left / 22px 2px no-repeat,linear-gradient(#fff,#fff) bottom left / 2px 22px no-repeat,linear-gradient(#fff,#fff) bottom right / 22px 2px no-repeat,linear-gradient(#fff,#fff) bottom right / 2px 22px no-repeat;opacity:.75}.vf-msg{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:10px;text-align:center;padding:24px;color:#fff;font-family:var(--mono)}.vf-msg small{display:block;opacity:.7;margin-top:6px}.vf-error{background:#1b1430eb}.vf-error strong{font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--pink-soft)}.vf-error span{max-width:26rem;line-height:1.5;font-size:.9rem}.vf-error .btn{justify-self:center;margin-top:6px}.countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--display);font-size:clamp(6rem,22vw,11rem);color:#fff;-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--pink);animation:pop 1s ease-out both;pointer-events:none}@keyframes pop{0%{transform:scale(1.6);opacity:0}20%{transform:scale(1);opacity:1}85%{opacity:1}to{opacity:0;transform:scale(.9)}}.flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;animation:flash .3s ease-out forwards}@keyframes flash{0%{opacity:1}to{opacity:0}}.rec{position:absolute;top:14px;left:50%;transform:translate(-50%);background:#00000073;color:#fff;font-family:var(--mono);font-size:.78rem;padding:5px 12px;border-radius:999px}.filters{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 6px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filters.wrap{flex-wrap:wrap;overflow:visible;padding-top:6px}.controls{display:flex;gap:10px;justify-content:center;align-items:center;padding-top:12px}.shutter{min-width:220px}.slots{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.slots-title{font-family:var(--mono);font-size:.85rem;margin:0 0 10px}.slots-title small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}.slot-list{display:grid;gap:10px}.slot{position:relative;aspect-ratio:4 / 3;border-radius:12px;overflow:hidden;padding:0;border:2px dashed rgba(42,24,56,.25);background:#ffffff80;display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;color:#2a18384d}.slot.filled{border:2px solid var(--ink);cursor:pointer}.slot:disabled{cursor:default}.slot img{width:100%;height:100%;object-fit:cover}.slot em{position:absolute;inset:auto 6px 6px auto;font-style:normal;font-family:var(--mono);font-size:.68rem;background:#ffffffe6;padding:2px 8px;border-radius:999px;opacity:0;transition:opacity .15s}.slot.filled:hover em,.slot.filled:focus-visible em{opacity:1}@media (hover: none){.slot.filled em{opacity:1}}.result-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}.strip-stage{position:relative}.strip-canvas{display:block;width:min(300px,70vw);height:auto;border-radius:4px;transform:rotate(-2deg) translateY(10px);opacity:0;box-shadow:0 30px 60px -22px #50145a8c,0 0 0 1.5px var(--ink);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.9,.3,1.3)}.strip-stage.ready .strip-canvas{opacity:1;transform:rotate(-2deg) translateY(0)}.developing{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--mono);color:var(--muted)}.result-panel{position:sticky;top:20px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.result-panel h2{font-family:var(--display);font-weight:400;font-size:2rem;margin:0 0 8px;color:var(--pink-deep)}.muted{color:var(--muted);line-height:1.5;margin:0 0 8px}.label{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 0}.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 6px}.saved{font-family:var(--mono);font-size:.85rem;color:var(--pink-deep);margin:6px 0}@media (max-width: 820px){.landing{grid-template-columns:1fr;text-align:center;gap:28px;padding:24px 0}.lede{margin-inline:auto}.badges{justify-content:center}.mock-strip{width:170px}.studio-grid{grid-template-columns:minmax(0,1fr)}.slots{padding:10px}.slots-title{display:none}.slot-list{grid-template-columns:repeat(4,1fr);gap:8px}.slot{border-radius:8px;font-size:1.1rem}.slot em{display:none}.result-grid{grid-template-columns:1fr;justify-items:center;gap:28px}.result-panel{width:100%;position:static}.shutter{min-width:0;flex:1}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}.strip-canvas{opacity:1}}