:root{--bg: #0b0a14;--ink: #f4f2ff;--muted: #a59fce;--accent: #ff4d8d;--accent2: #7c5cff;--accent3: #2ad1ff;--panel: rgba(255, 255, 255, .04);--line: rgba(255, 255, 255, .1);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}body{min-height:100dvh;display:flex;flex-direction:column}.aurora{position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;z-index:0;background:radial-gradient(40% 50% at 20% 20%,rgba(124,92,255,.35),transparent 60%),radial-gradient(45% 45% at 80% 25%,rgba(255,77,141,.3),transparent 60%),radial-gradient(50% 50% at 50% 90%,rgba(42,209,255,.22),transparent 60%);filter:blur(20px);animation:drift 18s ease-in-out infinite alternate}@keyframes drift{0%{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.1)}}.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:880px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-left)) 8px}.topbar.off{display:none}.brand-mini{font-size:22px;font-weight:800;letter-spacing:-.03em;background:none;border:none;cursor:pointer;padding:0;color:var(--accent3);text-decoration:none}.brand-mini span{color:var(--ink)}.topnav{display:flex;align-items:center;gap:8px}.chip{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;transition:all .18s ease}.chip:hover{border-color:var(--accent2)}.chip.off{display:none}.avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);object-fit:cover}.app{position:relative;z-index:1;flex:1;width:100%;max-width:560px;margin:0 auto;padding:16px 20px 28px;display:grid;place-items:center;align-content:center;overflow-y:auto}.panel{display:none;width:100%}body[data-screen=gate] .panel[data-view=gate],body[data-screen=home] .panel[data-view=home],body[data-screen=preview] .panel[data-view=preview],body[data-screen=working] .panel[data-view=working],body[data-screen=video] .panel[data-view=video],body[data-screen=clips] .panel[data-view=clips]{display:block;animation:rise .45s ease both}body[data-screen=clips] .app{align-content:start}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;transition:transform .12s ease,border-color .18s ease,background .18s ease,opacity .2s;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{border:none;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 12px 32px #ff4d8d4d}.btn-ghost:hover{border-color:var(--accent2);background:#7c5cff1f}.btn-xl{min-height:60px;font-size:17px;width:100%}.btn-sm{min-height:40px;font-size:13.5px;padding:0 14px;font-weight:600}.stack{display:grid;gap:12px;margin-top:22px}.brand{text-align:center;margin-bottom:18px}.logo{font-size:clamp(40px,13vw,64px);font-weight:800;margin:0;letter-spacing:-.03em;background:linear-gradient(90deg,var(--accent3),var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.logo span{color:var(--ink);-webkit-text-fill-color:var(--ink)}.tagline{color:var(--muted);margin:8px 0 0;font-size:15px}.gate{text-align:center}.gate-copy{color:var(--muted);max-width:360px;margin:6px auto 26px;line-height:1.5}.gate .btn-xl{max-width:360px;margin:0 auto}.screen-title{text-align:center;font-size:clamp(22px,6vw,30px);margin:6px 0 4px}.screen-sub{text-align:center;color:var(--muted);margin:0 0 18px}.picker-label{text-align:center;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:28px}.style-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;transition:all .18s ease;-webkit-tap-highlight-color:transparent}.style-card:hover{border-color:var(--accent2);color:var(--ink)}.style-card .emoji{font-size:24px;line-height:1}.style-card .style-name{font-size:11.5px;font-weight:600;text-align:center}.style-card.on{color:var(--ink);border-color:var(--accent2);background:#7c5cff29;box-shadow:0 0 0 1px var(--accent2) inset,0 8px 24px #7c5cff40}@media(max-width:480px){.styles{grid-template-columns:repeat(3,1fr)}}.mic-wrap{display:grid;place-items:center;gap:16px}.record{position:relative;width:132px;height:132px;border-radius:50%;border:none;cursor:pointer;background:radial-gradient(circle at 30% 30%,var(--accent2),var(--accent));box-shadow:0 18px 50px #ff4d8d59;display:grid;place-items:center;transition:transform .15s ease;-webkit-tap-highlight-color:transparent}.record:active{transform:scale(.96)}.record .dot{width:34px;height:34px;border-radius:9px;background:#fff;transition:all .2s ease}.record.recording .dot{border-radius:50%;width:26px;height:26px}.record .pulse{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);opacity:0}.record.recording .pulse{animation:pulse 1.4s ease-out infinite}@keyframes pulse{0%{transform:scale(1);opacity:.6}to{transform:scale(1.6);opacity:0}}.record .level{position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px;border-radius:50%;border:3px solid var(--accent3);transform:scaleY(.15);opacity:0;transition:transform .08s linear}.record.recording .level{opacity:.8}.record-meta{display:flex;gap:12px;align-items:baseline;color:var(--ink);font-weight:700;font-size:17px}.timer{color:var(--muted);font-variant-numeric:tabular-nums}.hint{text-align:center;color:var(--muted);margin-top:20px;min-height:1.4em}.error{text-align:center;color:#ff9bb6;margin-top:14px}.hidden{display:none!important}.muted{color:var(--muted);text-align:center}.preview{text-align:center}.preview-audio{width:100%;max-width:420px;margin:10px auto 0;display:block}.working{text-align:center}.reel{display:flex;gap:10px;justify-content:center;margin-bottom:26px}.reel span{width:14px;height:36px;border-radius:7px;background:linear-gradient(var(--accent3),var(--accent2));animation:bob 1s ease-in-out infinite}.reel span:nth-child(2){animation-delay:.15s;background:linear-gradient(var(--accent2),var(--accent))}.reel span:nth-child(3){animation-delay:.3s;background:linear-gradient(var(--accent),var(--accent3))}@keyframes bob{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1.4)}}.status{font-size:18px;font-weight:600;margin:0 0 24px}.steps{list-style:none;padding:0;margin:0 auto;max-width:320px;text-align:left}.step{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);transition:all .3s ease}.step .mark{width:20px;text-align:center}.step.active{color:var(--ink);border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2) inset}.step.active .mark{animation:spin 1.2s linear infinite;display:inline-block}.step.done{color:var(--ink)}.step.done .mark{color:var(--accent3)}@keyframes spin{to{transform:rotate(360deg)}}.video{text-align:center}.stage{position:relative;aspect-ratio:9 / 16;height:min(66vh,600px);max-width:100%;margin:0 auto;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 24px 70px #0000008c}.slides{position:absolute;top:0;right:0;bottom:0;left:0;transition:transform .05s linear;will-change:transform}.slide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1.1s ease}.slide.active{opacity:1;animation:var(--kb, kb-a) 11s ease-out forwards}@keyframes kb-a{0%{transform:scale(1.04) translate(0)}to{transform:scale(1.2) translate(-3%,-2%)}}@keyframes kb-b{0%{transform:scale(1.18) translate(2%,1%)}to{transform:scale(1.02) translate(0)}}.scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(transparent 46%,#000c);pointer-events:none}.stage-wm{position:absolute;top:12px;right:14px;font-size:12px;font-weight:700;color:#ffffff8c;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;letter-spacing:.01em}.mv-title{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;padding:0 24px;margin:0;font-size:clamp(26px,7vw,40px);font-weight:800;letter-spacing:-.02em;text-shadow:0 4px 24px rgba(0,0,0,.7);transition:opacity .8s ease;animation:rise .8s ease both}.mv-title.hidden{opacity:0}.mv-caption{position:absolute;left:0;right:0;bottom:11%;text-align:center;padding:0 18px;margin:0;font-size:clamp(20px,5.4vw,28px);font-weight:700;line-height:1.3;text-shadow:0 2px 16px rgba(0,0,0,.85)}.mv-caption .w{color:#fff9;transition:color .1s ease,text-shadow .1s ease}.mv-caption .w.on{color:#fff;text-shadow:0 0 18px var(--accent3),0 2px 16px rgba(0,0,0,.85)}.mv-caption.pop{animation:pop .45s cubic-bezier(.2,.9,.3,1.4) both}@keyframes pop{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff2e}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent3),var(--accent));transition:width .15s linear}.tap-to-play:after{content:"▶  tap to play";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#00000059;color:#fff;font-weight:700;font-size:18px}.render-status{display:none;align-items:center;gap:10px;justify-content:center;margin-top:14px;color:var(--muted);font-size:14px}.render-status.show{display:flex}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent3);animation:spin .8s linear infinite}.video-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}.video-actions .btn{min-height:46px;font-size:14.5px;padding:0 18px}.clips{width:100%}.clips-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:8px}.clip-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}.clip-thumb{position:relative;display:block;aspect-ratio:9 / 16;background:#000 center/cover no-repeat;text-decoration:none}.clip-play{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-size:30px;text-shadow:0 2px 10px rgba(0,0,0,.6);opacity:.85}.clip-badge{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;background:#0000008c;color:#fff}.clip-badge.ready{background:#2ad1ffd9;color:#021}.clip-badge.failed{background:#ff4d8dd9}.clip-body{padding:11px 12px 13px}.clip-title{margin:0;font-size:15px;font-weight:700;line-height:1.25}.clip-meta{margin:4px 0 2px;color:var(--muted);font-size:12px}.clip-stats{margin:0 0 10px;color:var(--ink);font-size:12.5px;opacity:.85}.clip-actions{display:flex;flex-wrap:wrap;gap:6px}.clip-analytics{margin-top:10px}.an-table{width:100%;border-collapse:collapse;font-size:12px}.an-table th{text-align:left;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}.an-table td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--ink);vertical-align:top}.watch-app{max-width:480px}.watch-head{width:100%;text-align:center;margin-bottom:10px}.watch-wrap{display:grid;justify-items:center;gap:12px;width:100%}.watch-video,#stage.stage{width:auto;aspect-ratio:9 / 16;height:min(70vh,660px);max-width:100%;border-radius:20px;background:#000;box-shadow:0 24px 70px #0000008c}.watch-loading{color:var(--muted);padding:40px 0}.watch-meta{text-align:center;margin-top:16px}.watch-title{margin:0;font-size:clamp(20px,6vw,28px)}.watch-by{color:var(--muted);margin:4px 0 14px}.watch-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.foot{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:12px;padding:14px;opacity:.7}
