:root{
  --bg:#0b0d12; --panel:#12151c; --panel2:#181c25; --line:#252a36; --text:#e8ebf2; --muted:#8a92a6;
  --accent:#6c7bff; --accent2:#00e5ff; --danger:#ff5470; --ok:#3ddc97;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 "Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button,select,input{font:inherit;color:inherit}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:#0e1117}
.brand{font-weight:800;letter-spacing:.5px;font-size:16px}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
header .sp{flex:1}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#3a4152}
.btn.primary{background:linear-gradient(135deg,var(--accent),#8f5bff);border:none;font-weight:600}
.btn.primary:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.45;cursor:not-allowed}
main{display:flex;height:calc(100% - 53px)}
.stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:16px;gap:12px}
.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;position:relative}
#view{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#fff;text-align:center;font-size:15px;text-shadow:0 2px 8px #000}
#hint b{display:block;font-size:20px;margin-bottom:4px}
.dragging .canvas-wrap::after{content:"Drop audio, background or logo";position:absolute;inset:0;border:2px dashed var(--accent2);border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);font-size:18px}
.transport{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.transport .time{font-variant-numeric:tabular-nums;color:var(--muted);min-width:96px;text-align:center}
#seek{flex:1}
#vol{width:90px}
aside{width:340px;flex:none;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto}
.media{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:1px solid var(--line)}
.slot{border:1px dashed #333b4d;border-radius:8px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:84px;text-align:center;font-size:12px;color:var(--muted);position:relative;background:#0f1218}
.slot.wide{grid-column:1/3;min-height:48px;flex-direction:row}
.slot:hover{border-color:var(--accent)}
.slot img{max-width:100%;max-height:52px;border-radius:4px}
.slot .x{position:absolute;top:2px;right:6px;color:var(--muted);font-size:14px;display:none}
.slot.has .x{display:block}
.slot.has{border-style:solid;color:var(--text)}
details{border-bottom:1px solid var(--line)}
summary{padding:11px 14px;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"▸";color:var(--muted)}
details[open] summary::after{content:"▾"}
.ctl{padding:5px 14px 9px}
.ctl label{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;margin-bottom:4px}
.ctl label output{color:var(--text);font-variant-numeric:tabular-nums}
.ctl input[type=range]{width:100%;accent-color:var(--accent)}
.ctl select,.ctl input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.ctl input[type=color]{width:100%;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);padding:2px}
.ctl.tog{display:flex;justify-content:space-between;align-items:center}
.ctl.tog label{margin:0;color:var(--text);font-size:13px}
.switch{position:relative;width:38px;height:21px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#2a3040;border-radius:21px;transition:.15s;cursor:pointer}
.switch span::before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::before{transform:translateX(17px)}
.sys{padding:12px;display:flex;flex-wrap:wrap;gap:8px}
.loop-panel{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px;background:#0f1218}
.loop-panel[hidden]{display:none}
.loop-panel input[type=range]{width:100%;accent-color:var(--accent)}
.lp-checks{align-items:center;flex-wrap:wrap;gap:14px}.lp-checks label{display:flex;align-items:center;gap:6px;flex:none !important;font-size:13px;white-space:nowrap;color:var(--text)}.lp-checks .btn{margin-left:auto;padding:5px 10px;font-size:12.5px}
.row label.cap output{color:var(--text);margin-left:6px}
.fmt{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.fmt-b{display:flex;align-items:center;gap:8px;text-align:left;padding:7px 8px}
.fmt-b i{display:block;height:24px;border:2px solid var(--muted);border-radius:3px;flex:none}
.fmt-b b{display:block;font-size:12.5px}.fmt-b small{display:block;color:var(--muted);font-size:10.5px;line-height:1.2}
.fmt-b.on{border-color:var(--accent2)}.fmt-b.on i{border-color:var(--accent2)}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.btnrow .btn{padding:5px 9px;font-size:12.5px}
.btn.on{border-color:var(--accent2);color:var(--accent2)}
.ctl small{color:var(--muted);font-size:11.5px;line-height:1.35;display:block}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:0;width:min(560px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.65)}
.ly .btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.ly .btnrow .btn{flex:1;padding:6px 8px;font-size:12.5px}
.ly-list{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#0e1117;margin:6px 0}
.ly-row{display:grid;grid-template-columns:64px 1fr 24px 24px 24px;gap:4px;padding:3px 4px;align-items:center;border-bottom:1px solid #1a1f2b}
.ly-row.on{background:#1d2540}.ly-row input{width:100%;min-width:0;text-align:left;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 5px;color:var(--text);font:inherit;font-size:12.5px}
.ly-row input:focus{border-color:var(--accent);background:var(--panel2);outline:none}.ly-row .ly-t{font-variant-numeric:tabular-nums;color:#9fb0d8}
.ly-row button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;padding:2px}.ly-row button:hover{color:var(--text)}
.ly-empty{padding:12px;color:var(--muted);font-size:12.5px;text-align:center}
.ly-help{font-size:11.5px;color:var(--muted);line-height:1.5;margin:4px 0 0}
kbd{font:inherit;font-size:11px;border:1px solid #3a4152;border-bottom-width:2px;border-radius:4px;padding:0 4px;margin-left:4px;opacity:.85}
#dlgLyrics textarea{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:14px;line-height:1.5;resize:vertical}
.lysync{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(94%,620px);background:rgba(10,12,18,.92);border:1px solid #34405e;border-radius:14px;padding:12px 14px;text-align:center;z-index:5;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lysync[hidden]{display:none}
.lysync .ls-prev{font-size:12.5px;color:#7ee2a8;min-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lysync .ls-next small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.lysync .ls-next b{display:block;font-size:20px;margin:2px 0 10px;line-height:1.3}
.lysync .ls-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.lysync .ls-btns .btn{padding:7px 10px;font-size:13px}
.lysync .ls-n{font-size:11.5px;color:var(--muted);margin-top:8px}
.dlg-h{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;display:flex;justify-content:space-between}
.dlg-b{padding:16px 20px;display:flex;flex-direction:column;gap:14px;max-height:70vh;overflow:auto}
.dlg-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.res{display:flex;flex-direction:column;gap:8px}
.res label{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;background:#0f1218}
.res label:has(input:checked){border-color:var(--accent);background:#151a2b}
.res b{display:block}
.res small{color:var(--muted)}
.row{display:flex;gap:10px}
.row>div{flex:1}
.row label.cap{display:block;color:var(--muted);font-size:12.5px;margin-bottom:4px}
.row select,.row input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:7px 8px}
.est{color:var(--muted);font-size:12.5px}
.prog{height:8px;background:#222838;border-radius:8px;overflow:hidden}
.prog div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
#exStatus{font-size:12.5px;color:var(--muted);min-height:18px}
.warn{color:#ffcf6b;font-size:12.5px}
@media (max-width:900px){main{flex-direction:column;height:auto}aside{width:auto;border-left:none}}

[hidden]{display:none !important}

/* ---------- site layout additions ---------- */
html,body{height:auto;overflow-x:hidden}
body{min-height:100%}
header .brand{color:var(--text);text-decoration:none;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hnav{display:flex;gap:14px;margin-left:10px}
.hnav a{color:var(--muted);text-decoration:none;font-size:13.5px}
.hnav a:hover{color:var(--text)}
main#app{height:calc(100vh - 53px);min-height:600px}
.compat{background:#2a2410;color:#ffe3a3;border-bottom:1px solid #4a3f17;padding:8px 44px 8px 16px;font-size:13px;position:relative}
.compat .x{position:absolute;right:10px;top:6px;background:none;border:none;color:#ffe3a3;cursor:pointer;font-size:15px}
.quick{padding:10px 12px 0}
.quick>span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.renderpanel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.renderpanel[hidden]{display:none}
.rp-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.rp-note{color:var(--muted);font-size:12.5px}
.rp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
#exStatus{font-size:13px;color:var(--muted)}
/* ads: always labelled, never floating, kept clear of buttons */
.ad-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.ad-wrap[hidden],.ad-wrap.ad-off{display:none}
.ad-label{font-size:10.5px;color:#6b7387;text-transform:uppercase;letter-spacing:.08em}
.ad-slot{width:100%;display:flex;justify-content:center}
.ad-slot ins{width:100%}
.ad-render{margin-top:22px;min-height:90px}
.ad-render .ad-slot{max-width:728px}
.ad-side{padding:18px 12px 22px;border-top:1px solid var(--line)}
.ad-side .ad-slot{max-width:300px;min-height:250px}
.ad-below{padding:22px 0 6px}
.ad-below .ad-slot{max-width:970px;min-height:90px}
.ad-ph{width:100%;min-height:inherit;height:100%;border:1px dashed #3a4152;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#6b7387;font-size:12px;padding:30px 0}
/* landing content */
.below{max-width:1040px;margin:0 auto;padding:0 20px 40px;line-height:1.6}
.hero{padding:26px 0 6px}
.hero h1{font-size:28px;line-height:1.25;margin:0 0 10px}
.hero p{color:var(--muted);font-size:16px;margin:0}
.below h2{font-size:21px;margin:34px 0 14px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.steps li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;counter-increment:s}
.steps li::before{content:counter(s);display:inline-flex;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#8f5bff);align-items:center;justify-content:center;font-weight:700;margin-bottom:8px}
.steps b,.feat b{display:block;margin-bottom:4px}
.steps span,.feat span{color:var(--muted);font-size:14px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.faq summary{padding:12px 16px}
.faq p{margin:0;padding:0 16px 14px;color:var(--muted)}
footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:13px}
footer a{color:var(--muted)}
@media (max-width:900px){
  main#app{height:auto;min-height:0}
  .stage{min-height:0;padding:12px}
  .canvas-wrap{flex:none;aspect-ratio:var(--ar,16/9);max-height:72vh;width:100%}
  .transport{flex-wrap:wrap;gap:8px}
  .transport .time{min-width:0}
  .transport #vol,.transport span[title]{display:none}
  .row{flex-wrap:wrap}
  .rp-foot{flex-wrap:wrap}
  .hnav{display:none}
  .steps,.feat{grid-template-columns:1fr}
  header .btn{padding:6px 9px;font-size:13px}
}

.guides a{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:var(--text);display:block}
.guides a:hover{border-color:var(--accent)}
.guides a b{display:block;margin-bottom:4px}
.guides a span{color:var(--muted);font-size:14px}

.byline{color:var(--muted);font-size:12px;margin-left:-4px;white-space:nowrap}
.byline a,footer a[data-company]{color:var(--muted);text-decoration:none}
.byline a:hover{color:var(--text)}
.hero .by{color:var(--accent2);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px}
@media (max-width:900px){.byline{display:none}}

.tooltag{font-size:12px;font-weight:600;color:var(--text);border:1px solid var(--line);background:#161a24;padding:3px 9px;border-radius:999px;white-space:nowrap;margin-left:-4px}
.hero .by a{color:var(--accent2);text-decoration:none}
.below .more{margin:-4px 0 10px;font-size:14px}.below .more a{color:var(--accent2);text-decoration:none}
@media (max-width:560px){.tooltag{display:none}}