:root{color-scheme:dark;--bg:#050508;--panel:#0a0a12;--bar:#08080e;--card:#12121c;--line:#1a1a2e;--muted:#6b7280;--text:#fff;--violet:#8b5cf6;--gold:#c9a96e}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;overflow:hidden}#app{height:100vh;display:flex;flex-direction:column;min-height:0}.beta-banner{height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:center;padding:0 18px;background:linear-gradient(90deg,rgba(124,58,237,.16),rgba(201,169,110,.12),rgba(124,58,237,.16));border-bottom:1px solid rgba(201,169,110,.22);box-shadow:inset 0 -1px 0 rgba(255,255,255,.025)}.beta-banner-inner{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;text-align:center}.beta-kicker{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#d9c08d;border:1px solid rgba(201,169,110,.35);background:rgba(201,169,110,.08);border-radius:999px;padding:5px 8px;white-space:nowrap}.beta-banner strong{font-size:12px;letter-spacing:.02em;white-space:nowrap}.beta-copy{font-size:11px;color:#a7a7b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:760px}button,input{font:inherit}button{cursor:pointer}.topbar{height:64px;background:var(--bar);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.brand-wrap,.top-actions{display:flex;align-items:center;gap:12px}.moon-logo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:#a78bfa;background:linear-gradient(145deg,#201630,#0e0c1b);border:1px solid rgba(139,92,246,.35);box-shadow:0 7px 22px rgba(124,58,237,.12)}.brand-text{font-weight:800;letter-spacing:.06em;line-height:1}.brand-text small{display:block;color:var(--gold);font-size:10px;letter-spacing:.17em;margin-top:5px}.divider{width:1px;height:28px;background:var(--line);margin:0 8px}.engine-label{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:#6b7280}.test-badge{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;border:1px solid rgba(201,169,110,.3);color:#d9c08d;background:rgba(201,169,110,.08);border-radius:999px;padding:5px 8px}.icon-btn{border:0;background:transparent;color:#6b7280;width:35px;height:35px;border-radius:8px}.icon-btn:hover{color:#fff;background:#ffffff0c}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#8b5cf6,#6d28d9);font-weight:800;font-size:12px}.avatar.small{width:31px;height:31px}.workspace{height:auto;flex:1;display:flex;min-height:0}.rail{width:72px;flex:0 0 72px;background:var(--bar);border-right:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;align-items:center}.rail nav{display:flex;flex-direction:column;gap:3px;align-items:center;flex:1}.rail nav button{width:56px;height:50px;border:0;border-radius:9px;background:transparent;color:#6b7280;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}.rail nav button span{font-size:16px}.rail nav button small{font-size:8px}.rail nav button.active{background:rgba(124,58,237,.15);color:#a78bfa}.rail-bottom{display:flex;flex-direction:column;gap:10px;align-items:center}.upgrade{width:54px;border:1px solid var(--line);border-radius:9px;padding:7px;text-align:center;color:#fbbf24;background:linear-gradient(#171725,#0c0c14)}.upgrade small{display:block;color:#777;font-size:8px;margin-top:3px}.library-panel{width:320px;flex:0 0 320px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.library-head{padding:15px 14px 10px}.library-head h2,.settings-panel h2{font-size:14px;margin:0 0 12px}.tabs{display:flex;background:var(--card);padding:2px;border-radius:6px;margin-bottom:10px}.tabs button{flex:1;border:0;background:transparent;color:#666;padding:7px;border-radius:4px;font-size:11px}.tabs button.selected{color:#fff;background:#1a1a2e}.gold-button{border:1px solid rgba(201,169,110,.45);background:linear-gradient(90deg,#b49359,#d59d24,#7c3aed);color:#fff;font-weight:800;border-radius:9px;padding:10px 12px;width:100%;box-shadow:0 5px 16px rgba(201,169,110,.22),inset 0 1px 0 rgba(255,255,255,.2)}.search-row{margin-top:10px;height:36px;background:var(--card);border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:6px;padding:0 9px;color:#555}.search-row input{width:100%;border:0;outline:0;color:#fff;background:transparent;font-size:12px}.media-list{padding:3px 12px 12px;overflow-y:auto;flex:1}.media-card{width:100%;display:block;border:1px solid var(--line);background:var(--card);padding:0;margin:0 0 10px;border-radius:12px;overflow:hidden;color:#fff;text-align:left;transition:.18s}.media-card:hover,.media-card.selected{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 1px rgba(139,92,246,.12),0 10px 24px rgba(0,0,0,.2)}.thumb{position:relative;aspect-ratio:16/9;background:#050508;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.02)}.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58),transparent 60%)}.duration-badge,.type-badge{position:absolute;z-index:2;font-size:9px;border-radius:5px;padding:3px 6px}.duration-badge{right:7px;bottom:7px;background:#000b;font-family:ui-monospace,monospace}.type-badge{left:7px;top:7px;background:#7c3aedcc}.card-info{padding:9px 11px}.card-info b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-info small{color:#777;font-size:9px}.library-foot{padding:9px 12px;border-top:1px solid var(--line);font-size:9px;color:#666;font-family:ui-monospace,monospace}.center-column{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}.preview-section{flex:1;min-height:260px;background:#0a0a12;display:flex;flex-direction:column}.project-bar{height:38px;flex:0 0 38px;background:var(--bar);border-bottom:1px solid var(--line);padding:0 13px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.project-bar>div{display:flex;align-items:center;gap:9px}.chip,.ratio{border:1px solid var(--line);background:var(--card);border-radius:5px;padding:3px 7px;color:#868b98;font:9px ui-monospace,monospace}.saved{color:#4ade80;font-size:9px}.tiny{width:28px;height:28px}.preview-stage{flex:1;min-height:0;padding:10px 13px;display:flex;align-items:center;justify-content:center}.preview-frame{position:relative;width:100%;height:100%;background:#050508;border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}.preview-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.style-pill{position:absolute;left:10px;top:10px;background:rgba(124,58,237,.6);border:1px solid rgba(167,139,250,.28);border-radius:6px;padding:4px 7px;font:9px ui-monospace,monospace;backdrop-filter:blur(4px)}.center-play{position:absolute;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);backdrop-filter:blur(7px);color:#fff;font-size:22px;display:grid;place-items:center;padding-left:4px;opacity:0;transition:.2s}.preview-frame:hover .center-play,.center-play.show{opacity:1}.transport{height:50px;flex:0 0 50px;border-top:1px solid var(--line);background:var(--bar);padding:0 13px;display:flex;align-items:center;gap:10px}.round-play{width:32px;height:32px;border-radius:50%;border:0;background:#ffffff12;color:#fff}.time{font:10px ui-monospace,monospace;color:#9ca3af;min-width:55px}.slash{color:#444}.transport input[type=range],.control input[type=range]{accent-color:#8b5cf6}.transport input[type=range]{flex:1;min-width:50px}.mute-btn{border:0;background:transparent;color:#bbb;font-size:15px}.timeline-section{height:146px;flex:0 0 146px;border-top:1px solid var(--line);background:var(--bar);display:flex;flex-direction:column}.timeline-toolbar{height:38px;flex:0 0 38px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 10px}.timeline-toolbar>div{display:flex;align-items:center;gap:4px}.timeline-toolbar button{border:0;background:transparent;color:#8b8b97;font-size:10px;padding:5px 7px}.violet-chip{font:9px ui-monospace,monospace;color:#a78bfa;background:rgba(124,58,237,.1);border-radius:5px;padding:4px 7px}.timeline-body{display:flex;flex:1;min-height:0}.track-labels{width:92px;border-right:1px solid var(--line);flex:0 0 92px;color:#878794;font-size:9px}.track-labels>div{height:28px;border-bottom:1px solid rgba(26,26,46,.7);display:flex;align-items:center;padding:0 8px}.track-labels .ruler-label{height:22px}.track-area{position:relative;flex:1;min-width:0;overflow:hidden}.ruler{height:22px;border-bottom:1px solid var(--line);position:relative;background:#0a0a12;cursor:pointer}.tick{position:absolute;top:0;height:100%;border-left:1px solid rgba(255,255,255,.08);padding-left:3px;font:7px ui-monospace,monospace;color:#53535e}.lane{height:28px;border-bottom:1px solid rgba(26,26,46,.7);position:relative;background-image:linear-gradient(to right,rgba(255,255,255,.025) 1px,transparent 1px);background-size:90px 100%}.timeline-clip{position:absolute;left:4px;right:4px;top:4px;bottom:4px;border:1px solid rgba(139,92,246,.5);border-radius:999px;background:linear-gradient(90deg,rgba(124,58,237,.38),rgba(79,70,229,.18));box-shadow:inset 0 1px rgba(255,255,255,.1);display:flex;align-items:center;gap:8px;padding:0 9px;overflow:hidden}.timeline-clip span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-clip small{font:7px ui-monospace,monospace;color:#aaa;margin-left:auto}.music-wave{font-size:11px;color:#34d39955;letter-spacing:2px;padding:7px 10px;white-space:nowrap}.playhead{position:absolute;top:0;bottom:0;width:1px;background:#8b5cf6;left:0;pointer-events:none;z-index:5}.playhead i{position:absolute;top:0;left:-4px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #8b5cf6}.music-strip{height:53px;flex:0 0 53px;border-top:1px solid var(--line);background:var(--bar);display:flex;align-items:center;gap:12px;padding:5px 10px;overflow:hidden}.music-title{font-size:10px;color:var(--gold);white-space:nowrap}.music-title b{color:#fff}.music-categories{display:flex;gap:5px;overflow:hidden}.music-categories button{border:0;background:transparent;color:#8b8b95;display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:6px}.music-categories button:hover{background:#ffffff08;color:#fff}.music-categories button>span:last-child{font-size:9px;text-align:left}.music-categories small{display:block;font:7px ui-monospace,monospace;color:#555}.cover{width:42px;height:29px;border-radius:4px;border:1px solid var(--line);display:block}.c1{background:linear-gradient(135deg,#22223c,#d4a373)}.c2{background:linear-gradient(135deg,#365314,#a7f3d0)}.c3{background:linear-gradient(135deg,#4c1d95,#111827)}.c4{background:linear-gradient(135deg,#be123c,#f59e0b)}.c5{background:linear-gradient(135deg,#0ea5e9,#a855f7)}.settings-panel{width:260px;flex:0 0 260px;background:var(--panel);border-left:1px solid var(--line);min-height:0}.settings-scroll{height:100%;overflow-y:auto;padding:13px}.settings-panel button{margin-bottom:8px}.generate-button,.export-button{width:100%;border-radius:12px;color:#fff;border:1px solid rgba(139,92,246,.45);padding:11px;background:linear-gradient(145deg,#b49359,#ca8a04,#7c3aed);box-shadow:0 6px 18px rgba(124,58,237,.18);display:flex;flex-direction:column;align-items:center}.generate-button b{font-size:13px}.generate-button small,.export-button small{font-size:8px;color:#ffffffaa;margin-top:2px}.export-button{background:linear-gradient(145deg,#7c3aed,#6d28d9,#4338ca)}.settings-panel hr{border:0;border-top:1px solid var(--line);margin:9px 0 13px}.section-label{display:block;font:8px ui-monospace,monospace;color:#6f7280;letter-spacing:.12em;margin:12px 0 5px}.source-card{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px}.source-card b{display:block;font-size:10px;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.source-card small{display:block;color:#686875;font-size:8px;margin-top:3px}.control{margin:8px 0}.control>div{display:flex;justify-content:space-between;font-size:9px;color:#9b9ba5}.control b{font:9px ui-monospace,monospace;color:#fff}.control input{width:100%;margin-top:4px}.toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:5px}.toggle-row b{display:block;font-size:9px}.toggle-row small{display:block;font-size:7px;color:#666;margin-top:2px}.toggle-row input{accent-color:#8b5cf6}.toast{position:fixed;right:16px;bottom:16px;background:#14141f;border:1px solid #2a2a3d;color:#fff;border-radius:9px;padding:10px 12px;font-size:11px;box-shadow:0 12px 32px rgba(0,0,0,.4);transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s;z-index:99}.toast.show{transform:translateY(0);opacity:1}
@media(max-width:1150px){.settings-panel{display:none}.library-panel{width:285px;flex-basis:285px}.engine-label{display:none}}@media(max-width:850px){html,body{overflow:auto}#app{height:auto;min-height:100vh}.beta-banner-inner{gap:7px}.beta-copy{max-width:360px}.topbar{position:sticky;top:0;z-index:20}.workspace{height:auto;min-height:calc(100vh - 118px)}.rail{display:none}.library-panel{width:210px;flex-basis:210px}.center-column{min-height:calc(100vh - 64px)}.media-card .thumb{aspect-ratio:9/12}.test-badge{display:none}}@media(max-width:650px){.beta-banner{height:58px;flex-basis:58px;padding:0 10px}.beta-banner-inner{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;row-gap:2px;width:100%;text-align:left}.beta-kicker{grid-row:1 / 3;align-self:center}.beta-banner strong{font-size:11px}.beta-copy{font-size:9px;max-width:none;white-space:nowrap}.library-panel{position:absolute;z-index:15;left:0;top:122px;bottom:0;width:175px}.center-column{margin-left:175px}.project-bar b{display:none}.preview-section{min-height:440px}.music-strip{display:none}.timeline-section{height:130px;flex-basis:130px}.top-actions{display:none}.brand-wrap{gap:7px}.divider,.engine-label{display:none}}