@font-face{font-family:Sat;src:url(/fonts/satoshi.ttf);font-weight:300 900}
@font-face{font-family:Satoshi;src:url(/fonts/satoshi.ttf);font-weight:300 900}


*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0B0B0D;--p1:#141417;--p2:#1B1B1F;--p3:#232328;--ln:rgba(255,255,255,.07);--ln2:rgba(255,255,255,.11);--t1:#F2F2F3;--t2:rgba(255,255,255,.62);--t3:rgba(255,255,255,.38);--sel:#5B8CFF;--acc:#1ED760}
body{width:1440px;height:900px;overflow:hidden;background:var(--bg);color:var(--t1);font:12px/1.35 Inter,sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:'Geist Mono',monospace}
#top *{white-space:nowrap}
#top{position:absolute;left:0;top:0;width:1440px;height:48px;background:var(--p1);border-bottom:1px solid var(--ln);display:flex;align-items:center;padding:0 12px 0 14px;gap:12px}
.logo{display:flex;align-items:center;gap:9px;font-weight:650;font-size:13px;letter-spacing:-.01em}
.lg{width:26px;height:26px;border-radius:7px;background:linear-gradient(140deg,#6F8BFF,#3A4FD8 60%,#24308F);display:grid;place-items:center;font:800 10px Inter;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.tamz{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.08em;margin-left:-3px}
.sep{width:1px;height:20px;background:var(--ln2)}
.crumb{color:var(--t3);display:flex;gap:7px;align-items:center} .crumb b{color:var(--t1);font-weight:550}
.pill{height:26px;padding:0 10px;border-radius:13px;background:var(--p3);border:1px solid var(--ln2);display:flex;align-items:center;gap:7px;color:var(--t2);font-size:11.5px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 6px var(--acc)}
.sp{flex:1}
.av{display:flex} .av i{width:24px;height:24px;border-radius:50%;border:2px solid var(--p1);margin-left:-6px;display:grid;place-items:center;font:700 9.5px Inter;font-style:normal}
.btn{height:30px;padding:0 13px;border-radius:8px;display:flex;align-items:center;gap:7px;font-weight:550;font-size:12px;border:1px solid var(--ln2);background:var(--p3);color:var(--t1)}
.btn.pr{background:linear-gradient(180deg,#6A97FF,#4877F0);border-color:rgba(255,255,255,.18);box-shadow:0 4px 14px rgba(72,119,240,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.btn small{font-size:10.5px;color:var(--t3);font-weight:500} .btn.pr small{color:rgba(255,255,255,.7)}
.ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* left */
#left{position:absolute;left:0;top:48px;width:248px;height:552px;background:var(--p1);border-right:1px solid var(--ln);padding:0 12px}
.ph{display:flex;align-items:center;justify-content:space-between;height:40px;font-weight:600;font-size:12px}
.ph em{font-style:normal;color:var(--t3);font-weight:500;font-size:11px}
.tg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.tc{border-radius:10px;background:var(--p2);border:1px solid var(--ln);padding:5px;}
.tc.sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)}
.tc .th{height:132px;border-radius:6px;overflow:hidden;position:relative}
.tc img{width:100%;height:100%;object-fit:cover;display:block}
.tc .bdg{position:absolute;left:5px;top:5px;font-size:9.5px;font-weight:600;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.tc .chk{position:absolute;right:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--sel);display:grid;place-items:center}
.tc .nm{font-weight:600;font-size:11px;margin:7px 3px 2px;line-height:1.25}
.tc .mt{font-size:10.5px;color:var(--t3);margin:0 3px 3px}
.new{margin-top:10px;height:58px;border:1.5px dashed rgba(255,255,255,.18);border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--t2)}
.new .pl{width:30px;height:30px;border-radius:8px;background:var(--p3);display:grid;place-items:center;color:var(--t1)}
.new b{display:block;color:var(--t1);font-weight:600;font-size:11.5px} .new span{font-size:10.5px;color:var(--t3)}
.hr{height:1px;background:var(--ln);margin:14px -12px 0}
.bk{display:flex;align-items:center;gap:10px;height:46px;padding:0 9px;border-radius:9px;background:var(--p2);border:1px solid var(--ln)}
.bk.sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)}
.bk .mk{width:28px;height:28px;border-radius:7px;background:#000;display:grid;place-items:center;border:1px solid var(--ln2)}
.bk .mk img{width:17px}
.bk b{font-weight:600;font-size:11.5px;display:block} .bk span{font-size:10.5px;color:var(--t3)}
.sw{display:flex;margin-left:auto} .sw i{width:16px;height:16px;border-radius:50%;margin-left:-4px;border:1.5px solid var(--p2)}
.add{margin-top:8px;height:34px;border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--t2);border:1px dashed rgba(255,255,255,.14)}
/* canvas */
#cv{position:absolute;left:248px;top:48px;width:896px;height:552px;background:radial-gradient(circle at 50% 45%,#16161A,#0B0B0D 70%);overflow:hidden}
#cv:before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:16px 16px}
.ab{position:absolute;}
.ab .al{position:absolute;top:-19px;left:0;font-size:10.5px;color:var(--t3);white-space:nowrap}
.ab img{width:100%;height:100%;display:block;border-radius:3px;object-fit:cover}
.ab.dim{opacity:.42}
.ab.main .al{color:var(--sel);font-weight:600}
.ab.main{box-shadow:0 0 0 1.5px var(--sel),0 30px 80px rgba(0,0,0,.6)}
.selbox{position:absolute;border:1.5px solid var(--sel)}
.selbox i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--sel);border-radius:1.5px}
.tag{position:absolute;background:var(--sel);color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;white-space:nowrap}
.note{position:absolute;background:rgba(27,27,31,.92);border:1px solid var(--ln2);border-radius:10px;padding:9px 11px;font-size:11px;color:var(--t2);backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.note b{color:var(--t1);font-weight:600;display:block;margin-bottom:3px;font-size:11.5px}
.note .k{display:flex;justify-content:space-between;gap:16px} .note .k span:last-child{color:var(--t1)}
.cvbar{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;gap:14px;padding:0 16px;border-top:1px solid var(--ln);background:rgba(20,20,23,.92)}
.pb{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--t2)}
.pb.big{width:32px;height:32px;border-radius:50%;background:#fff;color:#000}
.tcode{font-family:'Geist Mono',monospace;font-size:12.5px} .tcode span{color:var(--t3)}
.chip{height:24px;padding:0 9px;border-radius:6px;background:var(--p3);display:flex;align-items:center;gap:6px;color:var(--t2);font-size:11px}
/* right */
#right{position:absolute;left:1144px;top:48px;width:296px;height:852px;background:var(--p1);border-left:1px solid var(--ln);overflow:hidden}
.rh{padding:10px 14px 8px;border-bottom:1px solid var(--ln)}
.rh .t{display:flex;align-items:center;gap:8px;font-weight:650;font-size:13.5px}
.rh .t .n{width:20px;height:20px;border-radius:5px;background:var(--sel);display:grid;place-items:center;font-size:11px}
.rh .s{color:var(--t3);font-size:11px;margin-top:4px}
.tabs{display:flex;gap:4px;margin-top:10px} .tabs span{padding:4px 9px;border-radius:6px;color:var(--t3);font-size:11px;font-weight:550} .tabs span.on{background:var(--p3);color:var(--t1)}
.sec{padding:8px 14px 9px;border-bottom:1px solid var(--ln)}
.sh{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;color:var(--t2);margin-bottom:6px}
.sh em{font-style:normal;font-weight:500;color:var(--t3)}
.fld{background:var(--p2);border:1px solid var(--ln2);border-radius:7px;height:30px;display:flex;align-items:center;padding:0 9px;gap:8px;font-size:12px}
.fld.ta{height:auto;padding:8px 9px;font:900 17px/1.15 Sat;letter-spacing:-.02em}
.fld.ta .g{color:var(--acc)}
.fld .lb{color:var(--t3);font-size:11px} .fld .v{margin-left:auto}
.row{display:flex;gap:6px;margin-top:6px} .row>*{flex:1}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cs{display:flex;align-items:center;gap:7px;background:var(--p2);border:1px solid var(--ln);border-radius:7px;height:30px;padding:0 7px;font-size:11px}
.cs i{width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);flex:none}
.cs span{color:var(--t3);margin-left:auto;font-size:10px}
.dd svg{margin-left:auto;color:var(--t3)}
.swp{display:flex;gap:10px;align-items:center}
.swp img{width:44px;height:78px;border-radius:6px;object-fit:cover;border:1px solid var(--ln2)}
.swp b{font-weight:600;font-size:11.5px;display:block} .swp span{font-size:10.5px;color:var(--t3);display:block;margin:2px 0 7px}
.sbtn{display:inline-flex;height:26px;padding:0 10px;border-radius:7px;background:var(--p3);border:1px solid var(--ln2);align-items:center;font-size:11px;font-weight:550;gap:6px}
.tog{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.sw2{width:30px;height:18px;border-radius:9px;background:var(--sel);position:relative} .sw2:after{content:'';position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.sw2.off{background:var(--p3)} .sw2.off:after{right:auto;left:2px;background:#888}
.curve{height:30px;background:var(--p2);border:1px solid var(--ln2);border-radius:7px;display:flex;align-items:center;gap:8px;padding:0 9px}
/* timeline */
#tl{position:absolute;left:0;top:600px;width:1144px;height:300px;background:var(--p1);border-top:1px solid var(--ln)}
.tlh{height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--ln)}
.tlh .tt{font-weight:600;font-size:12px}
.strip{position:absolute;left:12px;top:42px;width:1120px;height:60px;display:flex;gap:6px}
.card{flex:1;height:60px;border-radius:8px;background:var(--p2);border:1px solid var(--ln);display:flex;overflow:hidden;position:relative}
.card img{width:33px;height:58px;object-fit:cover;flex:none}
.card .cm{padding:7px 8px;display:flex;flex-direction:column;gap:1px;min-width:0}
.card .cm b{font-size:10px;color:var(--t3);font-weight:600} .card .cm span{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cm em{font-style:normal;font-family:'Geist Mono';font-size:10px;color:var(--t3);margin-top:auto}
.card.sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel);background:#1C2236} .card.sel .cm b{color:var(--sel)}
.lbl{position:absolute;left:0;width:122px;padding-left:14px;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t2);font-weight:550}
.lbl em{font-style:normal;color:var(--t3);font-weight:450;font-size:10px}
.lane{position:absolute;left:122px;width:1010px;overflow:hidden}
.rul{height:24px;border-bottom:1px solid var(--ln)}
.bt{position:absolute;bottom:0;width:1px;height:5px;background:rgba(255,255,255,.18)} .bt.bar{height:9px;background:rgba(255,255,255,.4)}
.bt span{position:absolute;left:4px;bottom:0px;font:500 9px 'Geist Mono';color:var(--t3)}
.sec{}
.secl{}
.rul .sec{}
.rs{position:absolute;top:1px;font:500 9.5px 'Geist Mono';color:var(--t2);transform:translateX(-50%)}
.sb{position:absolute;top:3px;height:20px;border-radius:5px;background:#26262C;border:1px solid var(--ln2);font-size:10.5px;font-weight:550;color:var(--t2);padding:0 6px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.sb.sel{background:#2A3A66;border-color:var(--sel);color:#fff}
.cap{position:absolute;top:3px;height:20px;border-radius:5px;background:rgba(30,215,96,.12);border:1px solid rgba(30,215,96,.35);color:#BDF5D1;font-size:10.5px;padding:0 6px 0 4px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.cap.sel{background:rgba(30,215,96,.25);border-color:var(--acc);color:#fff}
.lk{width:8px;height:8px;border-radius:2px;border:1.5px solid currentColor;opacity:.7;flex:none}
.wv{position:absolute;top:3px;height:34px;border-radius:6px;overflow:hidden}
.wv.vo{background:rgba(91,140,255,.10);border:1px solid rgba(91,140,255,.3)}
.wv.mu{background:rgba(201,120,255,.09);border:1px solid rgba(201,120,255,.28)}
.wv .nm{position:absolute;left:7px;top:2px;font-size:9.5px;font-weight:600;color:rgba(255,255,255,.75);background:rgba(20,20,23,.65);padding:0 4px;border-radius:3px}
.wv svg{position:absolute;left:0;top:0}
.cut{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.35)}
.sx{position:absolute;top:4px;transform:translateX(-4px);font-size:9.5px;color:var(--t3);display:flex;align-items:center;gap:4px;white-space:nowrap}
.sx b{width:8px;height:8px;transform:rotate(45deg);background:#F5B83D;border-radius:1.5px}
.ph2{position:absolute;top:0;width:0;border-left:1.5px solid #FF5A5F;z-index:5}
.ph2:before{content:'';position:absolute;left:-6.5px;top:-1px;width:11px;height:11px;background:#FF5A5F;clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.grid{position:absolute;top:0;width:1px;background:rgba(255,255,255,.035)}
.shade{position:absolute;top:0;background:rgba(91,140,255,.06);border-left:1px solid rgba(91,140,255,.35);border-right:1px solid rgba(91,140,255,.35)}
.scroll{position:absolute;left:122px;bottom:6px;width:1010px;height:5px;border-radius:3px;background:rgba(255,255,255,.05)}
.scroll i{position:absolute;left:197.6px;width:548.9px;height:5px;border-radius:3px;background:rgba(255,255,255,.22)}

.hint{position:absolute;left:50%;transform:translateX(-50%);top:486px;display:none}
.hintp{position:absolute;left:600px;top:250px;width:200px;background:rgba(27,27,31,.94);border:1px solid var(--ln2);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--t2);box-shadow:0 14px 34px rgba(0,0,0,.45);display:flex;gap:10px;align-items:flex-start}
.hintp b{color:var(--t1);display:block;font-weight:600;margin-bottom:2px}
.hintp .hi{width:26px;height:26px;border-radius:8px;background:rgba(91,140,255,.18);color:#8FB0FF;display:grid;place-items:center;flex:none}
.ss{padding:10px 16px 11px;border-bottom:1px solid var(--ln)}
.st{font-size:12.5px;font-weight:650;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.st em{font-style:normal;color:var(--t3);font-weight:500;font-size:11px}
.big{background:var(--p2);border:1px solid var(--ln2);border-radius:10px;padding:11px 12px;font:900 19px/1.15 Sat;letter-spacing:-.02em} .big .g{color:var(--acc)}
.wl{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center} .wl .lb{font-size:11px;color:var(--t3);margin-right:2px}
.wd{height:26px;padding:0 11px;border-radius:14px;background:var(--p3);border:1px solid var(--ln2);display:flex;align-items:center;font-size:12px;font-weight:550;color:var(--t2)}
.wd.on{background:rgba(30,215,96,.16);border-color:var(--acc);color:#fff}
.sw4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sw4 div{text-align:center;font-size:11px;color:var(--t2)}
.sw4 i{display:block;height:38px;border-radius:10px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.sw4 div.on i{box-shadow:0 0 0 2px var(--p1),0 0 0 4px var(--sel)}
.img2{display:flex;gap:12px;align-items:center} .img2 img{width:44px;height:78px;border-radius:8px;object-fit:cover;border:1px solid var(--ln2)}
.bb{height:34px;padding:0 14px;border-radius:9px;background:var(--p3);border:1px solid var(--ln2);display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.img2 span{display:block;font-size:11.5px;color:var(--t3);margin-bottom:9px}
.cam{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cam div{height:56px;border-radius:10px;background:var(--p2);border:1px solid var(--ln2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:550;color:var(--t2)}
.cam svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cam div.on{background:#1C2236;border-color:var(--sel);box-shadow:0 0 0 1px var(--sel);color:#fff} .cam div.on svg{color:#8FB0FF}
.sl{position:relative;height:22px;margin:4px 2px 0}
.sl .tr{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:var(--p3)}
.sl .fi{position:absolute;left:0;width:72%;top:9px;height:4px;border-radius:2px;background:linear-gradient(90deg,#5B8CFF,#9B7BFF)}
.sl .kn{position:absolute;left:72%;top:1px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.sll{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t3);margin-top:6px} .sll b{color:var(--t1);font-weight:600}
.dd2{height:38px;border-radius:9px;background:var(--p2);border:1px solid var(--ln2);display:flex;align-items:center;padding:0 12px;font:700 15px Sat} .dd2 svg{margin-left:auto;color:var(--t3)}
.adv{position:absolute;left:0;right:0;bottom:0;height:46px;border-top:1px solid var(--ln);display:flex;align-items:center;padding:0 16px;font-size:12px;color:var(--t3);background:var(--p1)} .adv span{margin-left:auto;font-size:15px}
.tk{position:absolute;top:0;width:1px;background:rgba(255,255,255,.035)}
.wv{top:4px;height:40px} .wv.cp{}
.tog2{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2)}
/* ---- Reel Maker app additions (same visual language as the mockup) ---- */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:var(--t1)}
.btn,.chip,.pb,.tc,.bk,.new,.add,.cam div,.wd,.sw4 div,.card,.bb,.tabs span{cursor:pointer;user-select:none}
.btn:hover,.bb:hover,.add:hover,.new:hover{filter:brightness(1.15)} .btn[disabled]{opacity:.4;pointer-events:none}
.btn.ic-only{padding:0 8px}
.pill.ex{background:rgba(255,184,61,.14);border-color:rgba(255,184,61,.5);color:#FFD27A}
.crumb select{background:transparent;border:0;color:var(--t1);font-weight:550;font-size:12px;outline:0;cursor:pointer;max-width:260px}
.crumb select option{background:var(--p2)}
#left{overflow-y:auto} #left::-webkit-scrollbar{width:0}
.plist{display:flex;flex-direction:column;gap:6px}
.pi{display:flex;align-items:center;gap:9px;height:36px;padding:0 9px;border-radius:8px;background:var(--p2);border:1px solid var(--ln);cursor:pointer}
.pi.sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)} .pi i{width:12px;height:12px;border-radius:4px;flex:none}
.pi b{font-weight:600;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pi em{margin-left:auto;font-style:normal;font-size:9.5px;color:#FFD27A}
.bk .mk.txt{background:#fff;color:#000;font:900 9px Inter}
.bk{margin-bottom:6px;cursor:pointer}
#stage{position:absolute;left:0;top:0;right:0;bottom:44px}
#frame{position:absolute;overflow:hidden;box-shadow:0 0 0 1.5px var(--sel),0 30px 80px rgba(0,0,0,.6);border-radius:3px;background:#000}
#frame iframe{position:absolute;left:0;top:0;width:1080px;height:1920px;border:0;transform-origin:0 0}
#frame iframe.back{visibility:hidden}
#flabel{position:absolute;font-size:10.5px;color:var(--sel);font-weight:600;white-space:nowrap}
#selbox{position:absolute;border:1.5px solid var(--sel);pointer-events:none;display:none;z-index:4}
#selbox i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--sel);border-radius:1.5px}
#seltag{position:absolute;display:none;z-index:4}
#hover{position:absolute;border:1px dashed rgba(143,176,255,.7);pointer-events:none;display:none;z-index:3}
#cv .side{position:absolute;width:150px;font-size:11px;color:var(--t3);line-height:1.5}
#cv .side b{display:block;color:var(--t2);font-weight:600;margin-bottom:4px}
#busy{position:absolute;right:14px;top:12px;font-size:11px;color:var(--t3)}
#right{display:flex;flex-direction:column}
#right .tabs{margin:0;padding:10px 14px 0;border-bottom:1px solid var(--ln);gap:2px} #right .tabs span{padding:6px 10px 8px;border-radius:6px 6px 0 0}
#right .tabs span.on{background:var(--p2)}
.pane{flex:1;overflow-y:auto;display:none;position:relative;padding-bottom:10px} .pane.on{display:block} .pane::-webkit-scrollbar{width:6px} .pane::-webkit-scrollbar-thumb{background:var(--p3);border-radius:3px}
.big[contenteditable]{outline:0;min-height:44px} .big:focus{border-color:var(--sel)}
.in{width:100%;height:32px;background:var(--p2);border:1px solid var(--ln2);border-radius:8px;padding:0 10px;font-size:12.5px;outline:0;margin-top:6px}
.in:focus{border-color:var(--sel)} .in.sat{font:700 15px Sat;height:38px}
.lab{font-size:11px;color:var(--t3);margin-top:8px;display:block}
.sw4 div{position:relative} .sw4 input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:38px}
.sw4.five{grid-template-columns:repeat(5,1fr)}
.cam div{position:relative} .cam div[title]:hover{border-color:rgba(143,176,255,.6)}
input[type=range].feel{width:100%;-webkit-appearance:none;appearance:none;height:22px;background:transparent;margin-top:2px}
input[type=range].feel::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#5B8CFF,#9B7BFF) 0/var(--pct,50%) 100% no-repeat,var(--p3)}
input[type=range].feel::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;margin-top:-8px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
select.dd2{width:100%;appearance:none;-webkit-appearance:none;outline:0;cursor:pointer;background:var(--p2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
.advbox{border-top:1px solid var(--ln)} .advh{height:46px;display:flex;align-items:center;padding:0 16px;font-size:12px;color:var(--t3);cursor:pointer} .advh span{margin-left:auto;font-size:15px;transition:transform .15s}
.advbox.open .advh span{transform:rotate(90deg)} .advb{display:none;padding:0 16px 14px} .advbox.open .advb{display:block}
.advb textarea{width:100%;height:220px;background:#0E0E11;border:1px solid var(--ln2);border-radius:8px;padding:8px;font:11px/1.45 'Geist Mono',monospace;outline:0;resize:vertical}
.advb .k{display:flex;justify-content:space-between;font:11px 'Geist Mono',monospace;color:var(--t3);margin-top:4px} .advb .k span:last-child{color:var(--t2)}
.err{color:#FF8A8A;font-size:11px;margin-top:6px;min-height:14px}
.small{font-size:11px;color:var(--t3);line-height:1.45}
.tog2 input{display:none} .sw2.off{background:var(--p3)} .sw2.off:after{right:auto;left:2px}
/* AI */
.chat{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.msg{padding:9px 11px;border-radius:10px;font-size:12px;line-height:1.45;max-width:100%;word-wrap:break-word}
.msg.u{background:#1C2236;border:1px solid rgba(91,140,255,.35);align-self:flex-end}
.msg.a{background:var(--p2);border:1px solid var(--ln2)}
.msg ul{margin:6px 0 0 16px} .msg li{margin:2px 0} .msg .rej{color:#FFB070} .msg .cost{display:block;margin-top:6px;font:10.5px 'Geist Mono',monospace;color:var(--t3)}
.aibox{position:sticky;bottom:0;background:var(--p1);padding:10px 14px;border-top:1px solid var(--ln)}
.aibox textarea{width:100%;height:58px;background:var(--p2);border:1px solid var(--ln2);border-radius:9px;padding:8px 10px;font-size:12.5px;outline:0;resize:none}
.aibox textarea:focus{border-color:var(--sel)} .airow{display:flex;gap:8px;align-items:center;margin-top:8px}
.airow select{background:var(--p2);border:1px solid var(--ln2);border-radius:7px;height:28px;font-size:11px;outline:0;padding:0 6px}
.usage{margin:0 14px;padding:9px 11px;border-radius:9px;background:var(--p2);border:1px solid var(--ln);font:11px 'Geist Mono',monospace;color:var(--t2);display:flex;justify-content:space-between}
.sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px} .sugg span{font-size:11px;padding:4px 9px;border-radius:12px;background:var(--p3);color:var(--t2);cursor:pointer}
/* exports */
.job{margin:10px 14px 0;padding:10px 11px;border-radius:10px;background:var(--p2);border:1px solid var(--ln)}
.job .h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px} .job .h em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--t3);font-weight:500}
.job .bar{height:4px;border-radius:2px;background:var(--p3);margin:8px 0 5px;overflow:hidden} .job .bar i{display:block;height:100%;background:linear-gradient(90deg,#5B8CFF,#9B7BFF)}
.job .s{font-size:11px;color:var(--t3)} .job video{width:100%;border-radius:7px;margin-top:8px;background:#000;max-height:420px}
.job .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} .job .acts a{font-size:11px;color:#BFD0FF;text-decoration:none;padding:4px 8px;border-radius:6px;background:var(--p3)}
.st-done{color:var(--acc)} .st-failed{color:#FF8A8A} .st-running{color:#8FB0FF}
/* timeline */
#tl .lane.click{cursor:pointer}
.card{cursor:pointer;flex:none} .card .num{width:26px;flex:none;display:grid;place-items:center;font:700 11px Inter;color:var(--t3);background:rgba(255,255,255,.03);border-right:1px solid var(--ln)}
.card.sel .num{color:#fff;background:var(--sel)}
.card .cm span{font-size:11px} .card .cam-l{font-size:10px;color:#8FB0FF}
.cap{cursor:pointer}
#ruler{position:absolute;left:122px;top:108px;width:1010px;height:14px}
#ruler span{position:absolute;font:500 9px 'Geist Mono';color:var(--t3);transform:translateX(-50%)}
.toast{position:absolute;left:50%;top:60px;transform:translateX(-50%);background:#1C2236;border:1px solid var(--sel);border-radius:10px;padding:8px 14px;font-size:12px;z-index:99;display:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.modal{position:absolute;inset:0;background:rgba(0,0,0,.55);display:none;z-index:50;place-items:center} .modal.on{display:grid}
.modal .box{width:520px;background:var(--p1);border:1px solid var(--ln2);border-radius:14px;padding:18px}
.modal h3{font-size:15px;margin-bottom:6px} .modal textarea{width:100%;height:150px;background:var(--p2);border:1px solid var(--ln2);border-radius:9px;padding:10px;font-size:12.5px;outline:0;margin-top:10px}
.card .cm{flex:1} .card .cm em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px}
/* Make tab */
.tool .row2{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}.tool .btn{margin-top:6px}.tool .small{margin-top:6px}
.tool .notes{margin-top:8px;font-size:12px;color:#C9CBD3;line-height:1.5}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.thumb{width:58px;cursor:pointer;text-align:center;font-size:10px;color:#9A9CA6}.thumb img{width:58px;height:100px;object-fit:cover;border-radius:6px;border:1px solid #2A2B31;display:block}.thumb.sq img{height:58px}.thumb:hover img{border-color:#5B8CFF}
.vers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:8px}.ver img,.ver video{width:100%;border-radius:6px;margin-top:4px}.ver .btn{width:100%}
.swatches{display:flex;gap:4px;margin:8px 0}.swatches span{width:30px;height:30px;border-radius:6px;border:1px solid #333}
.pack{margin-top:10px;padding:8px;background:#1B1C21;border-radius:8px}.pack .cap2{white-space:pre-wrap;margin:4px 0;font-size:13px}.pack .tags{color:#8FB0FF;font-size:12px}.cover{width:120px;border-radius:6px;display:block;margin:8px 0}
.apanel{margin-top:10px}.apanel .ah{font-weight:600;font-size:13px}.apanel .ah em{font-weight:400;color:#9A9CA6}
.aitem{display:flex;gap:8px;align-items:center;padding:5px;border-radius:6px;color:#E7E8EC;text-decoration:none;font-size:12px}.aitem:hover{background:#1F2026}.aitem img,.aitem .nothumb{width:54px;height:36px;object-fit:cover;border-radius:4px;background:#26272D;display:flex;align-items:center;justify-content:center}.aitem em{color:#9A9CA6}
.tasteRow{font-size:12px;padding:3px 0}.tasteRow a{color:#FF8A8A;margin-left:6px;font-size:11px}
.qc{margin-top:8px;font-size:12px;line-height:1.45;color:#FFD38A}.qc.ok{color:#8FE3A8}.qc .error{color:#FF8A8A}
/* fill the window (was a fixed 1440x900 mockup canvas, which left empty space and clipped panels) */
body{width:100vw;height:100vh;min-width:1440px;min-height:760px;overflow:auto;position:relative}
#top{width:100%}
#left{height:calc(max(100vh,760px) - 348px);overflow-y:auto}
#cv{width:calc(max(100vw,1440px) - 544px);height:calc(max(100vh,760px) - 348px)}
#right{left:auto;right:0;height:calc(max(100vh,760px) - 48px)}
#tl{top:calc(max(100vh,760px) - 300px);width:calc(max(100vw,1440px) - 296px)}
/* audio clips on the Voice / Music / Sounds rows: click for fades + echo; fade ramps and echo tails drawn on the waveform */
.ac{position:absolute;border-radius:5px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);cursor:pointer;box-sizing:border-box;overflow:hidden}
.ac svg{position:absolute;left:-1px;top:-1px}
.ac:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.ac.sel{border:1.5px solid #fff;box-shadow:0 0 0 2px rgba(91,140,255,.45);background:rgba(255,255,255,.08);z-index:2}
.sx{cursor:pointer;padding:2px} .sx.sel b{background:#fff;box-shadow:0 0 0 2px #F5B83D}
.sx i{font-style:normal;font-size:8px;color:#F5B83D;margin-left:-2px} .sx .sxe{letter-spacing:-1px}
.acfx .wd{min-width:58px;justify-content:center}
.acwarn{margin-top:8px;color:#FFD27A} .acnote{margin-top:8px;color:#8FB0FF}
.advb input[type=number]:disabled{opacity:.45}
/* Echo out block (Sounds / FX row) */
.eo{position:absolute;top:0;height:20px;box-sizing:border-box;border-radius:4px;border:1px solid rgba(143,176,255,.7);cursor:grab;overflow:hidden;z-index:2;
  background:linear-gradient(90deg,rgba(91,140,255,.75),rgba(91,140,255,.35) 55%,rgba(91,140,255,.08))}
.eo:hover{border-color:#fff} .eo.sel{border:1.5px solid #fff;box-shadow:0 0 0 2px rgba(91,140,255,.5)} .eo:active{cursor:grabbing}
.eo svg{position:absolute;left:0;top:2px;pointer-events:none}
.eo span{position:absolute;left:6px;top:3px;font-size:9.5px;font-weight:650;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}
.eo .eoh{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:ew-resize;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35))}
.eoadd{position:absolute;right:2px;top:2px;font-size:9.5px;font-weight:650;color:#8FB0FF;background:rgba(91,140,255,.14);border:1px dashed rgba(143,176,255,.6);border-radius:4px;padding:1px 6px;cursor:pointer;z-index:2}
.eoadd:hover{color:#fff;border-color:#fff}
.pastend{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,rgba(255,255,255,0) 6px 12px);border-left:1px dashed rgba(255,255,255,.35);pointer-events:none}
.pastend span{position:absolute;left:5px;top:2px;font-size:9px;color:var(--t3);white-space:nowrap}
#ruler span.past{opacity:.5}
.eog{position:absolute;top:4px;height:40px;border-left:1.5px dashed rgba(255,255,255,.7);border-radius:0 6px 6px 0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 5px,rgba(255,255,255,.07) 5px 6px),linear-gradient(90deg,rgba(143,176,255,.45),rgba(143,176,255,0))}
#muLane .eog{background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 5px,rgba(255,255,255,.07) 5px 6px),linear-gradient(90deg,rgba(217,166,255,.45),rgba(217,166,255,0))}