*{box-sizing:border-box}html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.4}
header{padding:1rem 1.25rem;background:#111;color:#f6f6f6}
main{padding:1rem;max-width:1100px;margin:0 auto}
.panel{border:1px solid #ddd;border-radius:.5rem;padding:1rem;margin-bottom:1rem;background:#fff}
.controls,.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.add{display:flex;gap:1rem;align-items:center}
#drop{border:2px dashed #888;border-radius:.5rem;min-height:3rem;display:flex;align-items:center;justify-content:center;padding:.75rem;min-width:16rem;outline:none}
#drop:focus{outline:2px solid #000}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#stemList{list-style:none;margin:0;padding:0;border:1px solid #ccc;border-radius:.5rem;min-height:8rem;max-height:18rem;overflow:auto}
#stemList li{padding:.5rem .75rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
#stemList li[aria-selected="true"]{background:#eef}
label{display:block;margin-top:.35rem;margin-bottom:.25rem}
input[type=range]{width:100%}
#touchPad{margin-top:.75rem;border:2px solid #ccc;border-radius:.5rem;height:220px;position:relative;background:linear-gradient(180deg,#f9f9f9,#f0f0f0)}
#touchPad::after{content:"Drag here";position:absolute;inset:auto auto 8px 8px;font-size:.9rem;color:#666}
.dedication{margin-top:.25rem;font-style:italic;color:#e5e5e5}
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
footer{padding:1rem;text-align:center;color:#666}
button{touch-action:manipulation}
/* Mobile */
.mobile-only{display:none}
@media (max-width:900px){ .mobile-only{display:inline-block} }
.mobile-active #touchPad{height:380px}
.mobile-active #mobileControls{display:block}
#mobileControls{display:none;margin-top:0.75rem}
#mobileControls button{font-size:1.15rem;padding:0.9rem 1.1rem;border-radius:.6rem}
#mobileControls input[type=range]{width:100%}
.mobile-active button{min-height:44px}
@media (max-width:800px){.columns{grid-template-columns:1fr}#touchPad{height:260px}#stemList{max-height:14rem}}