:root{--bg: #000;--surface: #050505;--ink: #fff;--line: #fff;--line-soft: #d9d9d9;--accent: #724cf9;--accent-2: #9b7bff;--shadow: rgba(0, 0, 0, .5);--outline: 2px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--bg);color:var(--ink);font-family:DM Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app-shell{width:100%;height:100%;padding:8px}.stage{width:min(1100px,100%);height:calc(100dvh - 16px);margin:0 auto;border:0;border-radius:20px;background:var(--surface);box-shadow:0 18px 42px var(--shadow),inset 0 0 32px #724cf929;position:relative;overflow:hidden;padding:12px}.intro-overlay{position:absolute;inset:0;z-index:20;display:grid;grid-template-rows:1fr auto;place-items:center;padding:20px 16px 26px;background:#000;gap:12px}.intro-overlay.is-opening{pointer-events:none;background:transparent}.intro-hero,#startExperienceBtn{transition:opacity .26s ease,transform .26s ease}.intro-overlay.is-opening .intro-hero,.intro-overlay.is-opening #startExperienceBtn{opacity:0;transform:translateY(-8px) scale(.98)}.intro-hero{width:min(100%,520px);max-height:min(76dvh,820px);object-fit:contain;align-self:center;filter:drop-shadow(0 18px 38px rgba(0,0,0,.48));animation:heroFloat 4.8s ease-in-out infinite}#startExperienceBtn{position:relative;z-index:3;min-width:220px;align-self:end}@keyframes heroFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.capture-ui{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px}.capture-ui.to-result .topbar,.capture-ui.to-result .camera-wrap,.capture-ui.to-result .lens-row,.capture-ui.to-result .capture-actions{opacity:0;transition:transform .42s ease,opacity .34s ease;pointer-events:none}.capture-ui.to-result .topbar,.capture-ui.to-result .camera-wrap{transform:translate(-16%)}.capture-ui.to-result .lens-row,.capture-ui.to-result .capture-actions{transform:translate(16%)}.topbar{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.topbar h1{margin:0;font-family:Space Grotesk,system-ui,sans-serif;text-transform:uppercase;font-size:clamp(16px,2vw,28px);letter-spacing:.06em;color:var(--line)}.top-left-logo{height:clamp(20px,2.6vw,34px);width:auto;display:block;object-fit:contain}#filterStatus{margin:0;font-size:12px;font-weight:700;text-align:right;color:#fff}.camera-wrap{width:min(100%,420px);max-height:100%;margin:0 auto;border:var(--outline) solid var(--line);border-radius:16px;overflow:hidden;position:relative;aspect-ratio:3 / 4;background:#000}#cameraCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}.switch-camera{position:absolute;top:8px;right:8px;z-index:6;width:38px;height:38px;border-radius:999px;border:2px solid #fff;background:#000000a6;color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none}.switch-camera i{font-size:16px;line-height:1}.is-ios .switch-camera{opacity:1;pointer-events:auto}.snap-watermark{position:absolute;right:8px;bottom:8px;z-index:4;height:18px;width:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}.raccoon-watermark{position:absolute;left:8px;bottom:8px;z-index:4;height:18px;width:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}.countdown{position:absolute;inset:0;display:grid;place-items:center;font-family:Space Grotesk,system-ui,sans-serif;font-size:clamp(40px,8vw,80px);font-weight:700;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.4);pointer-events:none}.flash-overlay{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}.flash-overlay.is-flashing{animation:camFlash .18s ease-out}@keyframes camFlash{0%{opacity:.82}to{opacity:0}}.lens-row{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:5px 2px 10px;scrollbar-width:thin}.lens-tile{flex:0 0 68px;width:68px;height:68px;border:2px solid var(--line);border-radius:999px;background:#0a0a0a;padding:0;overflow:hidden;cursor:pointer}.lens-tile.active{transform:scale(1.06);box-shadow:0 0 0 2px #fff6}.lens-tile img{width:100%;height:100%;object-fit:cover;background:#111}.lens-tile span{display:none}.capture-actions,.result-actions{display:grid;grid-template-columns:1fr;gap:8px}.start-btn{width:fit-content;justify-self:center;padding-inline:16px}.result-actions{grid-template-columns:repeat(3,1fr)}button,.primary,.ghost,#downloadBtn{font:inherit;cursor:pointer;border:2px solid var(--line);background:#0d0d0d;border-radius:12px;padding:10px;transition:transform .08s ease,border-color .2s ease;color:#fff;text-decoration:none;font-weight:700;text-align:center}button i,a i{color:#fff}#downloadBtn,#shareBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px}button:active,.primary:active,.ghost:active,#downloadBtn:active{transform:translateY(2px)}.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:#c7baff;color:#fff;font-weight:800;letter-spacing:.03em;text-transform:uppercase}.ghost{color:#fff}button:hover,.ghost:hover,#downloadBtn:hover{border-color:#fff}button:disabled{opacity:.45;cursor:not-allowed}.result-ui{position:absolute;inset:0;display:grid;place-items:center;padding:16px;gap:10px}.result-topbar{position:absolute;top:12px;left:12px;z-index:2;pointer-events:none}.strip-preview{width:auto;max-width:min(86vw,340px);max-height:min(68dvh,640px);height:auto;border:2px solid #fff;border-radius:12px;opacity:0;transform:scale(.9) rotate(-4deg);animation:popIn .45s ease-out forwards;transition:transform .22s ease}.strip-preview:hover{transform:scale(1.02) rotate(1deg)}@keyframes popIn{60%{transform:scale(1.05) rotate(-3deg);opacity:1}to{transform:scale(1) rotate(-2deg);opacity:1}}@media(max-width:720px){.capture-actions{order:3}.lens-row{order:4}}@media(min-width:900px){.capture-ui{max-width:920px;margin:0 auto}.camera-wrap{width:min(100%,460px)}}