/* Open Rack - Helm page. CC0 / original design. */
.intro{padding:40px 0 10px}.hm-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}
.hm-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}
.hm-start[hidden]{display:none}
.hm-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.hm-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}
.hm-btn:hover{border-color:var(--dim)}.hm-btn:active{background:#262a30}
.hm-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)}
.hm-name{font:700 22px/1.2 var(--mono);color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-meta{font:12px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-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}
.hm-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%}
.hm-macros{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.hm-macro{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.hm-macro .lbl{display:flex;justify-content:space-between;gap:6px;font:600 12px var(--mono);color:var(--muted)}
.hm-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}
.hm-perf{align-items:flex-end}
.hm-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}
.hm-oct{display:flex;align-items:center;gap:6px}.hm-oct span{font:600 14px var(--mono);min-width:30px;text-align:center}
.hm-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}
.hm-k{position:absolute;top:0;box-sizing:border-box}
.hm-k.w{height:100%;background:linear-gradient(180deg,#e9e6df,#fdfbf6);border:1px solid #2a2a2a;border-radius:0 0 6px 6px;z-index:1}
.hm-k.b{height:60%;background:linear-gradient(180deg,#24272c,#0c0d0f);border:1px solid #000;border-radius:0 0 4px 4px;z-index:2}
.hm-k.w.on{background:linear-gradient(180deg,#ffd08a,#ffb340)}.hm-k.b.on{background:linear-gradient(180deg,#a8761f,#ffb340)}
.hm-k small{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:600 10px var(--mono);color:#777}
.hm-hint{font-size:13px;color:var(--dim);margin:10px 0 0}.hm-status{font-size:12px;color:var(--dim);margin:4px 0 0;min-height:1.2em}
@media (max-width:760px){.hm-macros{grid-template-columns:repeat(2,1fr)}.hm-name{font-size:18px}.hm-kb{height:150px}.synth{padding:12px}}
.hm-display{border-color:#3e3a23;box-shadow:inset 0 0 18px rgba(255,179,64,.08)}.hm-name{color:var(--amber)}
.hm-routes{font-size:12px;color:var(--dim);margin:0 0 12px}
.hm-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:12px}
.hm-panel .hm-sec:nth-child(n+7){display:none}.hm-panel.all .hm-sec{display:block}
.hm-sec{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:0;min-width:0}
.hm-sec legend{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);padding:0 6px}
.hm-ctl{margin:2px 0}
.hm-ctl label{display:block}
.hm-ctl .lbl{display:flex;justify-content:space-between;gap:6px;font:600 12px var(--mono);color:var(--muted)}
.hm-ctl .val{color:var(--text);font-weight:500}
.hm-ctl select{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px;font:14px var(--sans);min-height:34px;margin-top:3px}
.hm-tog{display:inline-block;margin:4px 6px 4px 0}
.hm-switch{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:600 12px var(--mono);cursor:pointer;min-height:34px}
.hm-switch .dot{width:10px;height:10px;border-radius:50%;background:#3a3e44}
.hm-switch.on{color:var(--text);border-color:#6b5320}.hm-switch.on .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.hm-tools{margin-top:-2px}.hm-edited{font:12px var(--mono);color:var(--amber)}
@media (max-width:760px){.hm-panel{grid-template-columns:1fr}}