:root{color-scheme:dark;--bg-deep: #172126;--bg: #2f3e46;--bg-elevated: #364850;--bg-soft: #5f8575;--bg-bottom: #10171a;--ink: #f3f5f4;--ink-muted: #b0b8bc;--ink-strong: #10171a;--accent: #44d7a8;--accent-soft: rgba(68, 215, 168, .2);--ok: #5f8575;--line: rgba(243, 245, 244, .16);--danger: #ff6b5a;--danger-soft: #ffd2cb;--shadow: 0 18px 50px rgba(0, 0, 0, .35);--glow-accent: rgba(68, 215, 168, .2);--glow-mist: rgba(176, 184, 188, .18);--overlay-scrim: rgba(7, 20, 17, .72);--overlay-scrim-strong: rgba(7, 20, 17, .92);--panel-bg: linear-gradient(180deg, #364850, #172126);--dock-fade: linear-gradient(180deg, rgba(16, 23, 26, 0), rgba(16, 23, 26, .95) 24%);--chip-bg: rgba(16, 23, 26, .68);--stage-bg: #050708;--camera-chrome: #10171a;--toast-bg: rgba(16, 23, 26, .92);--font-display: "Fraunces", Georgia, serif;--font-body: "DM Sans", "Segoe UI", sans-serif;--radius: 18px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--browser-chrome: 72px;--app-height: 100dvh;--tap: 44px}@media(prefers-color-scheme:light){:root{color-scheme:light;--bg-deep: #dfeae4;--bg: #eef5f1;--bg-elevated: #ffffff;--bg-soft: #d5e6dd;--bg-bottom: #cfdcd5;--ink: #1a2824;--ink-muted: #5a6d66;--ink-strong: #102019;--accent: #1f8a68;--accent-soft: rgba(31, 138, 104, .14);--ok: #3f6f5f;--line: rgba(26, 40, 36, .12);--danger: #c84b3c;--danger-soft: #8a2e24;--shadow: 0 18px 44px rgba(23, 45, 38, .12);--glow-accent: rgba(31, 138, 104, .18);--glow-mist: rgba(95, 133, 117, .16);--overlay-scrim: rgba(238, 245, 241, .78);--overlay-scrim-strong: rgba(238, 245, 241, .94);--panel-bg: linear-gradient(180deg, #ffffff, #e7f0eb);--dock-fade: linear-gradient(180deg, rgba(238, 245, 241, 0), rgba(223, 234, 228, .96) 24%);--chip-bg: rgba(255, 255, 255, .78);--stage-bg: #121a18;--camera-chrome: #eef5f1;--toast-bg: rgba(255, 255, 255, .94)}}@supports not (height: 100dvh){:root{--app-height: 100vh}}*{box-sizing:border-box}html,body,#root{margin:0;min-height:var(--app-height);height:var(--app-height)}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(120% 80% at 10% -10%,var(--glow-accent),transparent 55%),radial-gradient(90% 70% at 100% 0%,var(--glow-mist),transparent 50%),linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 58%,var(--bg-bottom) 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,input{font:inherit;color:inherit}button{border:0;background:transparent;cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{height:var(--app-height);max-width:480px;margin:0 auto;position:relative;overflow:hidden}.screen{height:100%;max-height:var(--app-height);display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:calc(12px + var(--safe-top)) 16px calc(16px + var(--safe-bottom) + var(--browser-chrome));animation:rise-in .42s cubic-bezier(.22,1,.36,1) both}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-record{0%,to{box-shadow:0 0 #f04f3a8c;transform:scale(1)}50%{box-shadow:0 0 0 18px #f04f3a00;transform:scale(1.03)}}@keyframes soft-glow{0%{opacity:.35}to{opacity:.8}}.home-hero{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.home-hero-art{width:100%;display:flex;justify-content:center;margin:0 0 8px}.brand-mark-picture,.brand-hero-art-picture,.home-empty-art-picture,.onboarding-art-picture,.export-celebrate-art-picture{display:inline-grid;line-height:0}.brand-mark,.brand-hero-art,.home-empty-art,.onboarding-art,.export-celebrate-art{filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));animation:rise-in .52s cubic-bezier(.22,1,.36,1) both;border-radius:22px;object-fit:cover}.brand-mark{margin-bottom:14px}.brand-hero-art{width:min(58vw,168px);height:min(58vw,168px);border-radius:36px;background:#f3f5f40f}.home-empty-callout{margin-top:14px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;border:1px solid var(--line);background:#10171a47}.home-empty-callout p{margin:0;color:var(--ink-muted);line-height:1.35;font-size:.92rem}.home-empty-art,.export-celebrate-art{border-radius:20px;flex:0 0 auto}.export-celebrate-art{display:block;margin:0 auto 10px}.onboarding-art{border-radius:28px}.brand{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(2.5rem,11vw,3.4rem);line-height:.95;margin:0}.brand span{color:var(--accent)}.eyebrow{margin:0 0 8px;color:var(--ink-muted);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}.lede{margin:10px 0 0;color:var(--ink-muted);font-size:1rem;line-height:1.45;max-width:28ch}.btn{min-height:var(--tap);border-radius:999px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:transform .16s ease,background .16s ease,opacity .16s ease}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--ink-strong)}.btn-secondary{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line)}.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn-icon{width:var(--tap);height:var(--tap);min-height:var(--tap);padding:0;border-radius:50%;background:color-mix(in srgb,var(--bg-elevated) 55%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:1.1rem}.muted{color:var(--ink-muted)}.error-banner{margin-top:12px;padding:12px 14px;border-radius:14px;background:#f04f3a1f;border:1px solid rgba(240,79,58,.35);color:#ffd2cb;font-size:.92rem;line-height:1.4}.project-slots{margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:auto;flex:1;min-height:0;padding:2px 0 8px;scrollbar-width:none}.project-slots::-webkit-scrollbar{display:none}.project-slot{min-height:154px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--bg-soft) 34%,transparent),var(--bg-elevated)),var(--bg-elevated);box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease,border-color .18s ease,opacity .18s ease}.project-slot:active{transform:scale(.985)}.project-slot.filled{display:flex;flex-direction:column}.project-slot.empty{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:16px;text-align:left;color:var(--ink);border-style:dashed;background:color-mix(in srgb,var(--ink) 6%,transparent)}.project-slot.empty:disabled{opacity:.45}.slot-open{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px}.slot-number{color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.project-slot strong{display:block;font-family:var(--font-display);font-size:1.2rem;line-height:1.05}.project-slot small{color:var(--ink-muted);line-height:1.35}.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px 10px}.project-actions .btn{min-height:34px;padding:0 8px;font-size:.78rem}.danger{color:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 36%,transparent)}.home-footer{display:flex;gap:10px;margin-top:12px}.home-footer .btn{flex:1}.camera-screen{padding:0;background:var(--camera-chrome);overflow:hidden}.camera-screen.editor-mode{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}.camera-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--safe-top)) 12px 10px;pointer-events:none}.camera-top>*{pointer-events:auto}.camera-meta{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.camera-meta strong{font-family:var(--font-display);font-size:1.05rem;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.camera-stage{position:relative;flex:1;min-height:0;background:radial-gradient(80% 60% at 50% 20%,var(--accent-soft),transparent 60%),var(--stage-bg);overflow:hidden;touch-action:none;transition:flex-basis .22s ease,margin .22s ease,border-radius .22s ease}.editor-mode .camera-stage{flex:0 0 auto;height:min(28svh,220px);min-height:140px;margin:calc(58px + var(--safe-top)) 12px 0;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);touch-action:pan-y}.camera-video{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center}.camera-video.mirror{transform:scaleX(-1)}.record-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:calc(72px + var(--safe-top));pointer-events:none}.record-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#0000008c;border:1px solid rgba(255,107,90,.62);color:#fff;font-variant-numeric:tabular-nums;font-weight:600;animation:pulse-record 1.1s ease-in-out infinite}.record-dot{width:10px;height:10px;border-radius:50%;background:var(--danger)}.hold-hint{position:absolute;left:50%;bottom:24%;transform:translate(-50%);color:#f3f7f4c7;display:flex;flex-direction:column;gap:4px;align-items:center;font-size:.95rem;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.65);animation:soft-glow 1.6s ease-in-out infinite alternate;pointer-events:none}.hold-hint strong{font-family:var(--font-display);font-size:1.5rem;line-height:1}.hold-hint span{color:var(--ink-muted)}.countdown-overlay{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);font-family:var(--font-display);font-size:clamp(6rem,34vw,10rem);text-shadow:0 12px 34px rgba(0,0,0,.55);background:#10171a3d;pointer-events:none}.permission-panel{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,var(--overlay-scrim),var(--overlay-scrim-strong));z-index:4;text-align:center}.permission-panel h2{font-family:var(--font-display);margin:0 0 8px;font-size:1.8rem}.permission-panel p{margin:0 0 18px;color:var(--ink-muted);line-height:1.45}.camera-bottom{position:relative;z-index:3;background:var(--dock-fade);padding:10px 12px calc(12px + var(--safe-bottom) + var(--browser-chrome));display:flex;flex-direction:column;gap:10px;flex-shrink:0}.editor-mode .camera-bottom{flex:0 0 auto;background:transparent;padding-top:10px;padding-bottom:calc(20px + var(--safe-bottom) + var(--browser-chrome))}.record-dock{display:flex;flex-direction:column;gap:10px}.record-summary{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--line);color:var(--ink)}.record-summary span{color:var(--ink-muted);font-size:.86rem}.record-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.record-actions .btn{min-width:0;min-height:52px;padding:0 16px}.tools-sheet-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}.tools-sheet-list .btn{width:100%;min-height:48px;justify-content:center}.ok-button{width:86px;height:86px;min-width:86px;border-radius:50%;background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--bg-elevated) 72%,transparent),transparent 18%),linear-gradient(145deg,var(--accent),var(--ok));color:var(--ink-strong);border:4px solid color-mix(in srgb,var(--bg-elevated) 72%,transparent);box-shadow:0 16px 34px var(--accent-soft);font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.04em}.ok-button.compact{width:58px;height:58px;min-width:58px;border-width:3px;font-size:1.05rem}.ok-button:disabled{opacity:.42;cursor:not-allowed}.editor-panel{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:12px 12px 8px;border-radius:28px 28px 0 0;background:var(--panel-bg);border:1px solid var(--line);box-shadow:var(--shadow)}.editor-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.editor-header .eyebrow{margin-bottom:3px}.editor-header strong{font-family:var(--font-display)}.timeline{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;min-height:92px;scrollbar-width:none}.timeline::-webkit-scrollbar{display:none}.clip-thumb{flex:0 0 auto;width:92px;height:82px;border-radius:16px;border:2px solid transparent;background:var(--bg-soft);overflow:hidden;position:relative;padding:0}.clip-thumb.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.clip-thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none}.clip-thumb .clip-dur{position:absolute;right:4px;bottom:4px;font-size:.65rem;background:#0000008c;padding:2px 5px;border-radius:999px;font-variant-numeric:tabular-nums}.toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.editor-actions .trim-action{grid-column:1 / -1}.toolbar-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;max-height:min(78dvh,640px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--panel-bg);border-top-left-radius:22px;border-top-right-radius:22px;border-top:1px solid var(--line);padding:16px 16px calc(20px + var(--safe-bottom) + var(--browser-chrome));box-shadow:var(--shadow);animation:rise-in .28s ease both}.sheet-message{margin:12px 0 0;line-height:1.4}.sheet-message.is-error{color:var(--danger-soft)}.sheet h3{margin:0 0 6px;font-family:var(--font-display)}.sheet-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.sheet-actions .btn{flex:1;min-width:96px}.field{display:flex;flex-direction:column;gap:6px;margin-top:12px}.field label{font-size:.85rem;color:var(--ink-muted)}.field input[type=text],.field input[type=number]{min-height:44px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);padding:0 12px;outline:none}.field input:focus{border-color:color-mix(in srgb,var(--accent) 65%,transparent)}.trim-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.progress-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden;margin-top:12px}.progress-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));width:0%;transition:width .12s linear}.toast{position:absolute;left:50%;bottom:calc(110px + var(--safe-bottom) + var(--browser-chrome));transform:translate(-50%);z-index:6;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);background:var(--toast-bg);border:1px solid var(--line);color:var(--ink);padding:10px 14px;border-radius:999px;font-size:.9rem;white-space:nowrap;animation:rise-in .22s ease both;box-shadow:var(--shadow)}.editor-clip-preview{width:100%;height:100%;object-fit:cover;display:block;background:#000}.editor-empty-preview{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-muted);padding:16px;text-align:center}.toast button{color:var(--accent);font-weight:700}.onboarding-overlay{position:absolute;inset:0;z-index:7;display:grid;place-items:end center;overflow-y:auto;padding:20px 16px calc(20px + var(--safe-bottom) + var(--browser-chrome));background:radial-gradient(85% 60% at 50% 16%,var(--glow-accent),transparent 60%),color-mix(in srgb,var(--bg-deep) 76%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.onboarding-card{width:min(100%,390px);border-radius:30px;border:1px solid var(--line);background:var(--panel-bg);box-shadow:var(--shadow);padding:20px}.onboarding-card .brand-mark{margin-bottom:12px}.onboarding-card h2{margin:0;font-family:var(--font-display);font-size:2rem;letter-spacing:-.04em}.onboarding-card ol{list-style:none;margin:18px 0;padding:0;display:grid;gap:12px}.onboarding-card li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}.onboarding-card li>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#10171a;font-weight:800}.onboarding-card strong{display:block}.onboarding-card p{margin:3px 0 0;color:var(--ink-muted);line-height:1.35}.onboarding-card .btn{width:100%}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media(max-height:760px){.ok-button{width:72px;height:72px;min-width:72px;font-size:1.35rem}.record-actions{grid-template-columns:minmax(0,1fr) auto;gap:10px}.editor-mode .camera-stage{height:min(24svh,180px);min-height:120px}}@media(min-width:720px){:root{--browser-chrome: 0px}body{overflow:auto}.app-shell{margin-top:24px;margin-bottom:24px;height:min(920px,calc(100dvh - 48px));border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}}