:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20211f;background:#f7f7f5;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{text-decoration:none;color:inherit}.topbar{height:72px;background:#fff;border-bottom:1px solid #ebebe8}.topbar-inner{height:100%;max-width:1410px;padding:0 44px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;gap:10px;align-items:center;letter-spacing:-1.3px;font-weight:800;font-size:23px}.brand-symbol{display:flex;align-items:center;gap:3px;height:23px;width:27px}.brand-symbol span{width:3.5px;border-radius:9px;background:#21221f}.brand-symbol span:nth-child(1),.brand-symbol span:nth-child(5){height:8px}.brand-symbol span:nth-child(2),.brand-symbol span:nth-child(4){height:17px}.brand-symbol span:nth-child(3){height:23px}.brand-period{color:#93ca68}.header-right{display:flex;align-items:center;gap:32px}.privacy-pill{font-size:12px;font-weight:600;color:#535950;background:#f5f6f2;padding:9px 13px;border-radius:20px}.privacy-dot,.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#80bc55;margin-right:5px}.header-help{font-size:13px;font-weight:600;color:#353633}.page{max-width:1410px;margin:0 auto;padding:0 44px}.intro{padding:56px 0 41px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.1px;display:flex;align-items:center;gap:10px;color:#6c756a}.eyebrow-line{height:1px;width:19px;background:#8ec66a}.intro h1{font-size:clamp(43px,5vw,66px);letter-spacing:-4px;margin:17px 0 12px;line-height:1.08;font-weight:700}.intro h1 em,.how h2 em{font-style:normal;color:#96c579}.intro p{font-size:15px;color:#81847f;margin:0;line-height:1.65}.studio{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:29px;align-items:start}.editor-main{min-width:0}.preview-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.preview-heading{font-size:15px;font-weight:700;display:flex;gap:12px;align-items:center}.live-badge{font-size:9px;letter-spacing:1px;color:#678957;background:#eaf3e4;padding:5px 8px;border-radius:20px}.live-badge .status-dot{height:6px;width:6px}.preview-help{font-size:12px;color:#a0a39d}.preview-frame{background:#191b1c;position:relative;aspect-ratio:16/9;width:100%;border-radius:17px;overflow:hidden;box-shadow:0 14px 30px rgba(25,25,24,.07)}#preview-canvas{height:100%;width:100%;display:block}.preview-corner{position:absolute;bottom:21px;color:rgba(255,255,255,.36);font-size:9px;letter-spacing:1.2px;font-weight:700;pointer-events:none}.preview-corner.left{left:25px}.preview-corner.right{right:25px}.preview-cta{position:absolute;left:0;bottom:0;right:0;display:flex;justify-content:center;pointer-events:none;padding-bottom:36px}.demo-caption{color:rgba(255,255,255,.65);font-weight:700;font-size:9px;letter-spacing:1.15px}.demo-caption span{padding:0 5px;color:#a6f884}.preview-loading{position:absolute;inset:0;display:grid;place-items:center;background:#191b1cd9;color:white;font-size:13px}.preview-loading[hidden]{display:none}.transport{background:#fff;border:1px solid #e9ebe7;border-radius:13px;margin-top:15px;display:flex;align-items:center;gap:17px;padding:13px 17px;box-shadow:0 5px 20px #13171005}.play-btn{flex-shrink:0;background:#212321;width:43px;height:43px;color:#fff;border:0;border-radius:50%;display:grid;place-items:center;transition:.2s}.play-btn:hover{background:#474b44}.play-btn svg{height:20px;width:20px}.play-btn .play-icon{margin-left:2px}.play-btn svg[hidden]{display:none}.transport-body{flex:1;min-width:0}.trackline{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;font-weight:700;margin-bottom:11px}.trackline #track-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timecode{font-size:11px;color:#939992;font-variant-numeric:tabular-nums;white-space:nowrap}.transport input[type=range]{display:block;width:100%;appearance:none;-webkit-appearance:none;height:4px;border-radius:9px;outline:0;background:#e7ece5;cursor:pointer}.transport input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#86bf60;border-radius:50%}.transport input[type=range]:disabled{opacity:.6;cursor:default}.icon-button{display:grid;place-items:center;color:#737772;width:35px;height:35px;border:0;border-radius:50%;background:transparent}.icon-button:hover{background:#f4f6f2}.icon-button svg{width:18px;height:18px}.microcopy{display:flex;gap:23px;margin-top:19px;flex-wrap:wrap}.microcopy span{display:inline-flex;align-items:center;gap:7px;color:#8f948b;font-size:11px}.microcopy svg{height:16px;width:16px;color:#98a294}.tip-card{display:flex;gap:16px;align-items:flex-start;background:#eeefe9;border-radius:14px;padding:24px 25px;margin-top:35px}.tip-symbol{font-size:21px;color:#94b879}.tip-card strong{font-size:13px;letter-spacing:-.1px}.tip-card p{font-size:12px;color:#898f85;line-height:1.8;margin:7px 0 0;max-width:610px}.editor-controls{background:#fff;border:1px solid #eceee9;border-radius:17px;padding:26px 24px 21px;box-shadow:0 8px 36px rgba(32,35,29,.035)}.panel-header{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.small-overline{font-size:9px;letter-spacing:1.6px;color:#a8ada5;font-weight:800;margin-bottom:7px}.panel-header h2{font-size:24px;letter-spacing:-.95px;margin:0}.reset-button{background:none;border:0;font-size:11px;font-weight:600;color:#898f86;padding:5px}.reset-button:hover{color:#333}.control-section{border-top:1px solid #eceee9;padding-top:21px;margin-top:20px}.section-header{display:flex;align-items:center;gap:9px;margin-bottom:14px}.step{background:#eff2e9;color:#84937d;font-size:10px;padding:5px 7px;border-radius:5px;font-weight:800}.section-header h3{font-size:13px;margin:0;letter-spacing:-.1px}.section-aside{font-size:10px;font-weight:700;color:#aaafa5;margin-left:auto;letter-spacing:.6px}.upload-section{border:0;padding:0;margin:0}.upload-zone{border:1px dashed #bfc9b8;border-radius:10px;width:100%;padding:13px;display:flex;align-items:center;gap:10px;background:#f9fbf7;text-align:left;transition:.2s}.upload-zone:hover,.upload-zone.drag{border-color:#81b45e;background:#f0f7eb}.upload-icon{height:34px;width:34px;flex:0 0 34px;border-radius:8px;background:#e8f0e1;color:#6d9756;display:grid;place-items:center}.upload-icon svg{width:19px;height:19px}.upload-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:5px}.upload-copy strong{font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:246px}.upload-copy>span{font-size:10px;color:#a1a89d}.upload-arrow{font-size:19px;color:#7d877a;align-self:center}.theme-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.theme-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 5px 9px;min-height:78px;background:#fafaf8;border:1px solid #eeefe9;border-radius:9px;color:#2b3228;transition:box-shadow .14s,border .14s,background .14s}.theme-card:hover{border-color:#b3d79b}.theme-card.selected{border-color:#8aba69;background:#f4f9ef;box-shadow:inset 0 0 0 .5px #8aba69}.theme-art{height:40px;width:67px;color:#92c878}.theme-art svg{height:100%;width:100%}.theme-name{font-size:11px;font-weight:700;margin-top:3px}.theme-check{display:none;position:absolute;top:4px;right:6px;font-size:10px;color:#689c4c}.theme-card.selected .theme-check{display:block}.field-row,.field-top{display:flex;justify-content:space-between;align-items:center}.field-row label,.field-top label{font-size:12px;font-weight:600}.color-control{display:flex;align-items:center;gap:7px;background:#f8f9f6;border:1px solid #ebeee8;padding:4px 9px 4px 4px;border-radius:7px}.color-control input{width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer}.color-control span{font-size:10px;color:#757b73;font-weight:700;letter-spacing:.3px}.field-range{margin-top:19px}.field-top span{color:#959b91;font-size:11px;font-weight:600}.range-input{width:100%;appearance:none;-webkit-appearance:none;background:#e7ebe4;height:5px;margin:15px 0 0;border-radius:5px;cursor:pointer}.range-input::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#91bb75;border:3px solid #fff;box-shadow:0 0 0 1px #94be79}.bg-row{margin-top:20px}.field-row select,.mini-field select{border:1px solid #e9ece6;padding:8px 28px 8px 10px;border-radius:8px;background:#fafbf9;color:#50574d;font-weight:600;font-size:11px;max-width:200px;cursor:pointer}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.mini-field{min-width:0}.mini-field label{font-size:10px;font-weight:700;color:#8f968a;display:block;margin-bottom:7px}.mini-field select{width:100%;max-width:none;padding:10px 18px 10px 9px}.format-note{font-size:10px;color:#92988e;line-height:1.6;margin:12px 0 14px}.export-button{height:47px;background:#b3f18c;border:0;color:#222d1d;border-radius:9px;width:100%;display:flex;align-items:center;padding:0 14px;gap:11px;font-size:12px;font-weight:800;transition:background .15s}.export-button:hover:not(:disabled){background:#a3e778}.export-button:disabled{background:#e8ebdf;color:#9ba396}.export-button svg{height:18px;width:18px}.export-button .arrow{margin-left:auto;font-size:17px}.export-status{margin-top:13px;color:#777e71;font-size:11px;line-height:1.5}.export-status[hidden]{display:none}.progress-bar{height:5px;background:#eff0ea;border-radius:5px;overflow:hidden;margin-bottom:6px}.progress-bar span{height:100%;display:block;width:0;background:#91c56b;transition:width .2s}.export-foot{color:#aab1a5;font-size:10px;text-align:center;margin-top:12px}.export-foot span{padding:0 4px}.how{border-top:1px solid #e7eae5;margin:95px 0 65px;padding:52px 0 0;display:grid;grid-template-columns:1fr 1.8fr;gap:40px}.how h2{font-size:37px;line-height:1.18;letter-spacing:-1.6px;margin:14px 0}.how-items{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-self:center}.how-items>div>span{font-size:10px;color:#9acb7d;font-weight:700}.how-items strong{display:block;font-size:13px;margin:13px 0 5px}.how-items p{font-size:11px;line-height:1.7;color:#989e95;margin:0}footer{border-top:1px solid #e7eae5;padding:23px 0 35px;display:flex;justify-content:space-between;color:#a5aba2;font-size:11px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#222822;color:white;padding:12px 18px;border-radius:8px;box-shadow:0 9px 25px #0002;font-size:12px;z-index:10;transition:.2s}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:1400px){.studio{grid-template-columns:minmax(0,1fr) 408px}.editor-controls{padding:30px}}@media(max-width:950px){.page{padding:0 24px}.topbar-inner{padding:0 24px}.studio{grid-template-columns:minmax(0,1fr)}.editor-controls{max-width:none}.theme-list{grid-template-columns:repeat(5,1fr)}.how{grid-template-columns:1fr}.intro{padding:42px 0 34px}}@media(max-width:580px){.page,.topbar-inner{padding-left:16px;padding-right:16px}.topbar{height:62px}.brand{font-size:21px}.header-right{gap:8px}.privacy-pill{font-size:10px}.header-help{display:none}.intro{padding:32px 0 30px}.intro h1{font-size:42px;letter-spacing:-2.5px}.intro p{font-size:13px}.preview-help{display:none}.preview-frame{border-radius:12px}.preview-corner{bottom:12px;font-size:7px}.preview-corner.left{left:13px}.preview-corner.right{right:13px}.demo-caption{font-size:7px}.preview-cta{padding-bottom:26px}.transport{padding:11px;gap:10px}.trackline{font-size:11px}.microcopy{gap:10px 16px}.microcopy span{font-size:10px}.tip-card{margin-top:25px;padding:17px}.editor-controls{padding:21px 16px}.theme-list{grid-template-columns:repeat(3,1fr)}.how{margin-top:65px;padding-top:35px}.how-items{grid-template-columns:1fr;gap:17px}.how-items>div{border-bottom:1px solid #e5e8e2;padding-bottom:10px}.how-items strong{margin:6px 0 4px}.how h2{font-size:32px}footer{gap:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.pricing-section{border-top:1px solid #e7eae5;padding:70px 0;display:grid;grid-template-columns:.95fr 1.3fr;gap:40px}.pricing-copy h2{font-size:36px;line-height:1.14;letter-spacing:-1.5px}.pricing-copy h2 em{font-style:normal;color:#96c579}.pricing-copy p{font-size:14px;line-height:1.7;color:#899086;max-width:370px}.pricing-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.price-card{background:#fff;border:1px solid #e7ebe4;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px}.price-card.featured{border-color:#b5d99e;background:#f4f8f0}.plan-head{font-size:14px;font-weight:750}.plan-amount{font-size:32px;font-weight:800;letter-spacing:-1.3px}.plan-amount small{font-size:12px;color:#7c8778;letter-spacing:0}.price-card p{font-size:12px;color:#7b8278;line-height:1.65;flex:1}.plan-link{display:block;background:#1e2420;border:0;border-radius:8px;padding:12px;color:#fff;text-align:center;font-size:12px;font-weight:750;cursor:pointer}.featured .plan-link{background:#a6e77e;color:#20251c}.pro-tag{font-size:9px;background:#e1eeda;color:#557b39;border-radius:5px;padding:4px 6px}.plan-disclaimer{font-size:10px;color:#8c948a;text-align:center}.header-right>a:first-child{white-space:nowrap}@media(max-width:950px){.pricing-section{grid-template-columns:1fr}}@media(max-width:580px){.pricing-options{grid-template-columns:1fr}.pricing-section{padding:48px 0}.header-right>a:first-child{display:block}.privacy-pill{display:none}}

#preview-canvas { background: transparent; }
#preview-frame:has(+ *) { background-color: #202522; }

.preview-frame:has(canvas) { background-image: linear-gradient(45deg, #313936 25%, transparent 25%), linear-gradient(-45deg,#313936 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#313936 75%),linear-gradient(-45deg,transparent 75%,#313936 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;background-color:#232927; }

/* Ten compact, legible visual presets */
.theme-list{grid-template-columns:repeat(5,minmax(0,1fr))}
.theme-card{min-height:75px}
.theme-art{width:100%;max-width:59px}
@media(max-width:580px){.theme-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v6: Keep long style labels inside their cards at all breakpoints. */
.theme-card { min-width:0; overflow:hidden; min-height:86px; padding-inline:5px; }
.theme-art { flex:0 0 40px; max-width:100%; }
.theme-name { display:block; width:100%; max-width:100%; text-align:center; font-size:clamp(9px, .78vw, 11px); line-height:1.15; letter-spacing:-.15px; white-space:normal; overflow-wrap:anywhere; word-break:normal; }
.theme-card[data-theme="scope"] .theme-name { font-size:clamp(8px, .72vw, 10px); letter-spacing:-.25px; }
@media (max-width:580px) { .theme-name {font-size:11px;} .theme-card[data-theme="scope"] .theme-name {font-size:10px;} }

/* v7: preserve the five-column layout and fit every label without breaking words. */
.theme-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.theme-card{padding:8px 2px;min-width:0;min-height:83px}
.theme-art{width:min(60px,90%);flex-shrink:0}
.theme-name,.theme-card[data-theme="scope"] .theme-name{font-size:clamp(8px,0.82vw,10px);letter-spacing:-.3px;white-space:nowrap;overflow-wrap:normal;word-break:normal;line-height:1.25;font-weight:700}
.theme-card[data-theme="equalizer"] .theme-name{font-size:clamp(8px,0.75vw,10px)}
.theme-card[data-theme="scope"] .theme-name{font-size:clamp(7px,0.65vw,9px);letter-spacing:-.45px}
.theme-card:disabled{cursor:not-allowed;opacity:.8}
.render-locked .theme-card{pointer-events:none}
@media(max-width:580px){.theme-name,.theme-card[data-theme="equalizer"] .theme-name{font-size:clamp(8px,2.2vw,11px)}.theme-card[data-theme="scope"] .theme-name{font-size:clamp(7px,1.9vw,9px)}}

@media(max-width:580px){.theme-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v8: consistent single-line labels and unambiguous selected state */
.theme-card { container-type:inline-size; }
.theme-name,
.theme-card[data-theme="equalizer"] .theme-name,
.theme-card[data-theme="scope"] .theme-name {
  display:block;
  width:100%;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:keep-all;
  text-overflow:clip;
  line-height:1.25;
  text-align:center;
  font-size:12px;
  letter-spacing:-.15px;
}
.theme-card:hover:not(.selected) { border-color:#dedfd9; background:#f5f6f3; box-shadow:none; }
.theme-card.selected, .theme-card.selected:hover { border-color:#8aba69; background:#f4f9ef; box-shadow:inset 0 0 0 .5px #8aba69; }
.theme-card:focus-visible { outline:2px solid #79a65b; outline-offset:3px; }

/* v9: simple local playback mute while rendering; recorded audio stays intact */
.export-mute{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;color:#5a6556;margin-top:16px;cursor:pointer;user-select:none}
.export-mute input{width:16px;height:16px;accent-color:#8aba69;cursor:pointer}