/* Open Rack - Surge XT engine page. CC0 / original design. */
.intro{padding:40px 0 10px}.sx-title{font-size:clamp(34px,6vw,56px)}
.synth{position:relative;background:linear-gradient(180deg,#17191d,#101215);border:1px solid var(--line);border-radius:16px;padding:18px;margin:18px 0 10px}
.sx-start{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,10,11,.86);border-radius:16px;text-align:center;padding:20px}
.sx-start[hidden]{display:none}
.sx-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.sx-btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 13px;font:600 14px var(--sans);cursor:pointer;min-height:40px}
.sx-btn:hover{border-color:var(--dim)}.sx-btn:active{background:#262a30}
.sx-display{flex:1;min-width:0;background:#07090a;border:1px solid #23413d;border-radius:10px;padding:8px 14px;box-shadow:inset 0 0 18px rgba(61,214,198,.08)}
.sx-name{font:700 22px/1.2 var(--mono);color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-meta{font:12px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-pick label{flex:1;min-width:150px;display:flex;flex-direction:column;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);gap:4px}
.sx-pick select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px;font:15px var(--sans);min-height:40px;width:100%}
.sx-macros{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.sx-macro{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sx-macro .lbl{display:flex;justify-content:space-between;gap:6px;font:600 12px var(--mono);color:var(--muted)}
.sx-macro .lbl b{color:var(--amber);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--amber);height:28px;margin:4px 0 0}
.sx-perf{align-items:flex-end}
.sx-mini{display:flex;flex-direction:column;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);flex:1;min-width:130px}
.sx-oct{display:flex;align-items:center;gap:6px}.sx-oct span{font:600 14px var(--mono);min-width:30px;text-align:center}
.sx-kb{position:relative;height:170px;user-select:none;-webkit-user-select:none;touch-action:none;margin-top:6px;border-radius:0 0 8px 8px;overflow:hidden;background:#000}
.sx-k{position:absolute;top:0;box-sizing:border-box}
.sx-k.w{height:100%;background:linear-gradient(180deg,#e9e6df,#fdfbf6);border:1px solid #2a2a2a;border-radius:0 0 6px 6px;z-index:1}
.sx-k.b{height:60%;background:linear-gradient(180deg,#24272c,#0c0d0f);border:1px solid #000;border-radius:0 0 4px 4px;z-index:2}
.sx-k.w.on{background:linear-gradient(180deg,#ffd08a,#ffb340)}.sx-k.b.on{background:linear-gradient(180deg,#a8761f,#ffb340)}
.sx-k small{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:600 10px var(--mono);color:#777}
.sx-hint{font-size:13px;color:var(--dim);margin:10px 0 0}.sx-status{font-size:12px;color:var(--dim);margin:4px 0 0;min-height:1.2em}
@media (max-width:760px){.sx-macros{grid-template-columns:repeat(2,1fr)}.sx-name{font-size:18px}.sx-kb{height:150px}.synth{padding:12px}}