*{box-sizing:border-box}body{margin:0;background:#101112;color:#ece5d8;font:14px system-ui,sans-serif}header{height:86px;border-bottom:1px solid #303132;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;letter-spacing:3px}header small{display:block;font-size:9px;margin-left:62px;margin-top:4px;color:#97938b}.mark{color:#ffb449;margin-right:15px;font-weight:800}.badge{font-size:10px;color:#adaba5}main{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:48px 48px 80px}.eyebrow{color:#e5a651;letter-spacing:3px;font-size:11px}h1{font-size:52px;line-height:1.05;font-weight:500;letter-spacing:-2px;margin:22px 0}.intro{color:#9f9e98;line-height:1.7;margin-bottom:35px}fieldset{border:0;padding:0;min-width:0}legend{padding:22px 0 14px;width:100%;font-size:12px;color:#c4ae8d;letter-spacing:2px;border-top:1px solid #323334}label{display:block;font-size:12px;color:#b9b6ae;margin-bottom:16px}input{display:block;width:100%;margin-top:8px;border:1px solid #3a3b3c;border-radius:7px;background:#1b1c1d;color:#eee;padding:11px;font:inherit}input[type=range]{padding:0;accent-color:#efae55}input[type=file]{font-size:11px}button,a#download{border:1px solid #51504c;background:#242526;color:#eee2d2;border-radius:7px;padding:12px 16px;cursor:pointer;margin:0 7px 12px 0;font:inherit}button:hover{border-color:#ffb449}button:disabled{opacity:.4;cursor:wait}.primary{background:#edac53;color:#171614;font-weight:700}.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hint,#status{font-size:12px;line-height:1.8;color:#a7a49c}.preview{align-self:start;position:sticky;top:24px;background:#191a1b;border:1px solid #323334;padding:18px;border-radius:14px;box-shadow:0 22px 70px #0008}.preview-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;margin-bottom:16px;color:#a3a19a}.live{color:#f2b45b}canvas{width:100%;display:block;border-radius:8px}.preview p{text-align:center;font-size:10px;color:#858681;letter-spacing:1px}details{margin-top:24px;border-top:1px solid #333;padding-top:20px}#library button{display:block;width:100%;text-align:left}a#download{display:block;color:#ffbe66}a[hidden]{display:none!important}:focus-visible{outline:2px solid #ffb449;outline-offset:3px}@media(max-width:800px){main{padding:24px;gap:30px;grid-template-columns:1fr}.preview{position:static;grid-row:1;max-width:360px;justify-self:center}h1{font-size:38px}header{padding:0 24px}.badge{display:none}}

select{display:block;width:100%;margin-top:8px;border:1px solid #3a3b3c;border-radius:7px;background:#1b1c1d;color:#eee;padding:11px;font:inherit}input[type=color]{height:44px;padding:5px;cursor:pointer}

header{height:116px}.brand{display:flex;align-items:center;gap:18px;color:#ece5d8;text-decoration:none;letter-spacing:2px}.brand img{width:96px;height:96px;object-fit:contain;border-radius:8px}.brand-name{font-size:21px}.brand small{margin:6px 0 0;font-size:9px;letter-spacing:3px}@media(max-width:800px){header{height:100px;padding:0 20px}.brand{gap:12px}.brand img{width:80px;height:80px}.brand-name{font-size:18px}.brand small{font-size:8px;letter-spacing:2px}}

h2{font-size:19px;font-weight:500;letter-spacing:.3px}.project-panel,.jukebox{border-top:1px solid #343434;margin:26px 0;padding-top:12px}.project-panel{padding:18px;background:#191a1b;border:1px solid #343434;border-radius:10px}.check{display:flex;align-items:center;gap:9px;line-height:1.5}.check input{width:16px;height:16px;margin:0;accent-color:#efae55}.actions,.presets{display:flex;flex-wrap:wrap;gap:6px}.clip-duration{color:#ffc776;font-size:16px}.track-row{border:1px solid #393a3a;border-radius:8px;margin:10px 0;padding:10px}.track-row.active{border-color:#efae55;background:#26221b}.track-row .track-name{width:100%;text-align:left;line-height:1.5;margin:0 0 8px}.track-row .track-tools{display:flex;gap:5px}.track-tools button{font-size:12px;padding:6px 10px;margin:0}#library .track-tools button{width:auto}.track-missing{font-size:12px;color:#ffc776}#videoPreview{display:block;width:100%;max-height:560px;background:#050505;border-radius:10px}#videoResult{margin-top:24px}input[aria-invalid=true]{border-color:#ff8d75}section[hidden],label[hidden]{display:none}.project-panel button{font-size:12px}.project-panel .hint{margin:10px 0}.jukebox button[aria-pressed=true]{border-color:#efae55;color:#efae55}

#coverSource{color:#ddb775}

.studio-nav{display:flex;gap:4px;letter-spacing:0;flex-shrink:0}.studio-nav a{color:#eee2d2;text-decoration:none;border:1px solid #51504c;border-radius:6px;padding:12px 18px;font-size:13px;background:#242526}.studio-nav a[aria-current=page]{background:#b52922;border-color:#fb7668;color:white}.studio-nav a:focus-visible{outline:2px solid #ffce77;outline-offset:3px}.studio-nav a:hover{border-color:#ffb449}
@media(max-width:650px){header{height:auto;min-height:100px;flex-wrap:wrap;gap:14px;padding:12px 20px}.studio-nav{width:100%}.studio-nav a{flex:1;text-align:center;padding:11px 8px}}

/* Keep the brand and navigation aligned in one header row, including mobile. */
@media(max-width:650px){
 header{flex-wrap:nowrap;gap:8px;min-height:76px;padding:10px 8px;letter-spacing:0}
 .brand{gap:6px;min-width:0}.brand img{width:36px;height:36px}.brand-name{font-size:12px}.brand small{font-size:6px;letter-spacing:.5px;margin-top:4px}
 .studio-nav{width:auto;gap:2px}.studio-nav a{flex:none;font-size:9px;padding:10px 5px}
}