*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#090d16;color:#e8edf4;font:14px Arial,sans-serif}a{color:inherit;text-decoration:none}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 5%;border-bottom:1px solid #293242}nav{display:flex;gap:20px}.brand{font-size:25px;font-weight:900;letter-spacing:-1px}.brand span,em{color:#bcec90}.brand small{font-size:10px;letter-spacing:2px;margin-left:15px}main{max-width:1500px;padding:0 4%;margin:auto}.intro{padding:50px 0 25px}.eyebrow{letter-spacing:2px;font-size:10px;color:#9bb9b4}h1{font-size:clamp(35px,5vw,66px);letter-spacing:-2px;line-height:1.05;margin:20px 0}em{font-style:normal}h2{font-size:21px;margin:8px 0}.intro>p:last-child,.hint,footer{color:#9caec1;line-height:1.6}.panel{border:1px solid #334456;border-radius:12px;background:#111c29;margin:22px 0;overflow:hidden}.bar{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px}.padded{padding:0 18px}.hint{font-size:12px}button,.button,select,input{font:inherit;border:1px solid #3a4c5e;background:#1d2b3a;color:inherit;border-radius:6px;padding:10px;font-size:12px}button,.button,select{cursor:pointer}button:hover,.button:hover{border-color:#c0f89a}.primary{background:#bcec90;color:#10231a;font-weight:bold}button:disabled{opacity:.5}label{display:flex;align-items:center;gap:8px;font-size:11px;color:#bdd0df}input[type=number]{width:73px}input[type=range]{width:70px;accent-color:#bcec90}input[type=file]{display:none}#title{font-size:18px;max-width:240px}#position{font:12px monospace;color:#bcec90}.timeline-scroll{overflow:auto}#timeline{min-width:920px}.track-row{display:grid;grid-template-columns:240px 1fr;min-height:80px;border-top:1px solid #2d3c4a}.track-row.active{background:#203448}.track-control{position:sticky;left:0;background:#172737;z-index:2;padding:12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.track-control input[type=text]{width:120px}.lane{position:relative;background:repeating-linear-gradient(90deg,transparent 0 calc(6.25% - 1px),#ffffff18 calc(6.25% - 1px) 6.25%);min-height:80px}.clip{position:absolute;top:12px;height:48px;background:#486f75;border:1px solid #94d7c4;color:#eefdf8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:7px;cursor:grab;min-width:6px}.note-marker{position:absolute;height:5px;background:#cdacf8;pointer-events:none;min-width:2px}.ruler{padding:10px 0 10px 240px;font:11px monospace;color:#a6c3bd}#keyboard{position:relative;display:flex;width:780px;height:180px;margin:0 auto;padding:0 5px}.keyboard-scroll{overflow:auto;padding:20px;background:#0b131e}.key{flex:1;background:#eaf0f0;color:#1b2736;border:1px solid #70858a;border-radius:0 0 7px 7px;display:flex;align-items:end;justify-content:center;padding-bottom:15px;touch-action:none}.key.black{position:absolute;top:0;height:110px;width:36px;background:#172333;color:#acc9d8;z-index:2;margin-left:-18px}.key.held{background:#bcec90;color:#0d2117}.notes{max-height:250px;overflow:auto;padding:0 18px 15px}.note-row{display:flex;align-items:center;gap:12px;padding:7px;border-bottom:1px solid #2b4051;font-size:12px}.recording{background:#d44869;color:white!important}#status{padding:0 18px;color:#bcec90;line-height:1.7}audio{max-width:100%}footer{padding:15px 0 40px;font-size:12px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c1f39d;outline-offset:3px}@media(max-width:750px){header{flex-direction:column;align-items:start;padding:18px}nav{flex-wrap:wrap;font-size:12px}.brand small{margin-left:7px}main{padding:0 12px}.intro{padding-top:25px}.bar{padding:14px;gap:12px}#keyboard{margin:0}.keyboard-panel .bar>div{width:100%}}