*{box-sizing:border-box} :root{color-scheme:dark;--bg:#111216;--panel:#1b1c23;--muted:#9295a2;--text:#f1f1f4;--accent:#f2d45c} body{margin:0;background:radial-gradient(ellipse at 12% 5%,#26233a 0,transparent 27%),radial-gradient(ellipse at 95% 88%,#252c45 0,transparent 24%),var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.topbar{height:76px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,60px);background:#111216b8;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#292a34;color:var(--accent);font-size:23px}.brand strong,.brand small{display:block}.brand strong{font-size:15px;letter-spacing:.2px}.brand small{font-size:11px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:22px}.local-tag{font-size:11px;color:#9fbba9}.quiet-btn,.small-btn{border:1px solid #ffffff1c;background:#ffffff08;color:#c9cbd3;border-radius:9px;padding:9px 13px;cursor:pointer}.layout{max-width:1480px;margin:0 auto;padding:38px clamp(16px,3vw,44px) 55px;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,.9fr);gap:30px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:0 0 16px}.eyebrow{margin:0 0 5px;color:#8f91a0;font-size:10px;font-weight:750;letter-spacing:1.8px}.section-head h1,.section-head h2{font-size:24px;letter-spacing:-.7px;margin:0}.ratio-tag{font-size:11px;color:#a4a6b1;border:1px solid #ffffff1c;border-radius:20px;padding:5px 10px}.preview-shell{position:relative;width:100%;max-height:680px;margin-inline:auto;aspect-ratio:16/9;transition:aspect-ratio .25s ease,width .25s ease;border:1px solid #ffffff16;border-radius:15px;overflow:hidden;background:#17181d;box-shadow:0 25px 70px #0008}canvas{width:100%;height:100%;display:block}.preview-overlay{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;pointer-events:none;color:#ffffff80;font-size:9px;letter-spacing:1.2px}.transport{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 4px 22px}.track-meta strong,.track-meta span{display:block}.track-meta strong{font-size:14px}.track-meta span{font-size:12px;color:var(--muted);margin-top:2px}.transport-controls{display:flex;align-items:center;gap:13px;min-width:55%;}.round-btn{width:40px;height:40px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff0d;color:white;cursor:pointer;font-size:14px}.timeline-wrap{flex:1}.time-row{display:flex;justify-content:space-between;color:#a6a8b3;font-size:10px;font-variant-numeric:tabular-nums;margin-bottom:3px}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.export-card{position:relative;border:1px solid #ffffff16;border-radius:13px;padding:17px;background:#ffffff06}.export-card strong{font-size:13px}.export-card p{margin:4px 0 13px;color:var(--muted);font-size:11px}.export-actions{display:flex;gap:9px}select,.field-label input:not([type=color]):not([type=range]),.field-label select{width:100%;border:1px solid #ffffff1b;background:#15161c;color:#e7e7ec;border-radius:8px;padding:10px 11px;outline:none;font:inherit}select{min-width:0}.primary-btn{background:var(--accent);color:#1d1b12;border:0;border-radius:8px;padding:0 17px;font-weight:750;white-space:nowrap;cursor:pointer}.primary-btn:disabled{opacity:.4;cursor:not-allowed}.progress-track{height:3px;background:#ffffff13;border-radius:5px;margin-top:15px;overflow:hidden}.progress-track div{height:100%;width:0;background:var(--accent);transition:width .2s}.editor{min-width:0}.editor-heading{margin-bottom:16px}.panel{background:#1a1b22d9;border:1px solid #ffffff13;border-radius:13px;padding:17px;margin-bottom:13px}.panel h3{font-size:12px;letter-spacing:.3px;margin:0 0 15px;display:flex;gap:9px;align-items:center}.panel h3 span{font-size:10px;color:var(--accent);letter-spacing:1px}.field-label{display:block;color:#b9bbc5;font-size:11px;margin:0 0 12px}.field-label em{float:right;color:#747785;font-style:normal}.field-label input,.field-label select{display:block;margin-top:6px}.upload-box{display:flex;align-items:center;gap:10px;padding:11px;border:1px dashed #ffffff32;border-radius:9px;margin-top:9px;cursor:pointer;background:#ffffff04}.upload-box:hover{border-color:#aaa0ed;background:#ffffff08}.upload-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#ffffff0d;color:var(--accent);font-size:19px}.upload-box span:nth-child(2){flex:1;min-width:0}.upload-box strong,.upload-box small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-box strong{font-size:11px}.upload-box small{font-size:9px;color:#858895;margin-top:2px}.upload-box b{font-size:10px;color:#d2c9ff}.hint{font-size:9px;color:#747785;margin:9px 0 0}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-label input[type=color]{display:block;width:100%;height:36px;margin-top:6px;padding:3px;background:#15161c;border:1px solid #ffffff1b;border-radius:8px}.field-label output{float:right;color:#999cab;font-variant-numeric:tabular-nums}.tips p{font-size:10px;color:#a4a6b1;margin:0 0 9px}.tips p:last-child{margin-bottom:0}footer{text-align:center;color:#686b78;font-size:10px;padding:0 0 25px}footer span{padding:0 7px;color:var(--accent)}@media(max-width:950px){.layout{grid-template-columns:1fr;max-width:850px}.editor{display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor-heading{grid-column:1/-1;margin-bottom:0}.panel{margin:0}.tips{grid-column:1/-1}}@media(max-width:580px){.topbar{height:64px}.local-tag{display:none}.layout{padding-top:22px}.section-head h1,.section-head h2{font-size:21px}.transport{align-items:flex-start;flex-direction:column}.transport-controls{width:100%;min-width:0}.editor{display:block}.panel{margin-bottom:12px}.export-actions{flex-direction:column}.primary-btn{padding:12px}.export-actions select{padding:12px}}

/* Template and canvas format selectors */
#templateSelect,#ratioSelect{border-color:#ffffff28;background:linear-gradient(135deg,#20212a,#15161c);padding:12px 13px;color:#f0eff7}
#templateSelect:focus,#ratioSelect:focus{border-color:#aaa0ed;box-shadow:0 0 0 3px #aaa0ed20}
#ratioTag{white-space:nowrap}

/* Separate collection for the 50 additional visualizer designs */
.new-design-section{margin:15px 0 17px;padding:14px;border:1px solid #a99aff35;border-radius:11px;background:linear-gradient(135deg,#a99aff0d,#ffffff03)}
.new-design-heading{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.new-design-heading strong{font-size:12px;color:#f0edf9}
.new-design-kicker{font-size:9px;letter-spacing:1.5px;font-weight:800;color:#b7a7ff}
#newVisualizerSelect{border-color:#a99aff55;background:linear-gradient(135deg,#282238,#15161c);padding:12px 13px;color:#f4efff}
#newVisualizerSelect:focus{border-color:#b7a7ff;box-shadow:0 0 0 3px #a99aff20}

/* Independent typography controls for label, title and artist */
.typography-panel{grid-column:1/-1}
.typography-intro{margin:-6px 0 13px}
.type-control{padding:12px;margin-top:10px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff04}
.type-control>strong{display:block;font-size:12px;color:#f0edf9;margin-bottom:10px}
.type-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.type-control .field-label{margin-bottom:9px}
.type-control input[type=range]{display:block;margin-top:9px}
.type-control input[type=color]{display:block;width:100%;height:35px;margin-top:6px;padding:3px;background:#15161c;border:1px solid #ffffff1b;border-radius:8px}
@media(max-width:950px){.typography-panel{grid-column:1/-1}}

/* Expand/collapse controls for editor and export sections */
.panel h3{justify-content:space-between;gap:12px}
.collapse-toggle{flex:0 0 30px;width:30px;height:30px;border:1px solid #ffffff25;border-radius:8px;background:#ffffff08;color:#e9e7f5;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer}
.collapse-toggle:hover{background:#ffffff14;border-color:#a99aff77}
.collapse-toggle:focus-visible{outline:2px solid #b7a7ff;outline-offset:2px}
.panel-content{overflow:hidden}
.panel.is-collapsed .panel-content{display:none}
.export-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.export-card.is-collapsed> :not(:first-child),.export-card.is-collapsed .export-heading p{display:none}
.export-card.is-collapsed{padding-bottom:13px}
.new-design-heading strong{font-size:12px}
@media(max-width:580px){
 .type-row{grid-template-columns:1fr 1fr}
 .collapse-toggle{width:32px;height:32px}
}