/* Studio 0.2: player, transport and composition */
.transport-extra{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:12px 28px;background:#141d23;border-bottom:1px solid var(--line)}.transport-extra label{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.seek-label{flex:1;min-width:240px}#seek{flex:1;min-width:130px}#elapsed{min-width:90px;font:11px monospace}#masterVolume{width:90px}#outputMeter{width:60px}#feedback{position:sticky;top:0;z-index:20;padding:9px 28px;background:#243528;color:#e4f8c4;min-height:38px;border-bottom:1px solid #40583c;font-size:12px}.sound-player{border:1px solid #587b54;background:#1b2920;padding:12px;border-radius:8px;margin-bottom:12px}.sound-player strong{display:block;font-size:12px;overflow-wrap:anywhere}.sound-player audio{display:block;width:100%;height:38px;margin:10px 0}.sound-player small{color:var(--muted);font-size:10px}#timeline{position:relative}.playhead-track{position:absolute;top:33px;left:125px;right:0;bottom:0;pointer-events:none;overflow:hidden}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#ecff92;box-shadow:0 0 8px #d1f482;z-index:4}.playhead:before{content:'';position:absolute;left:-4px;top:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #ecff92}.ticks{cursor:crosshair}.composer{padding:20px;background:#131d23;border:1px solid #35464e;border-radius:8px;margin-bottom:20px}.composer h3{font-size:13px;font-weight:600;color:#bcccd4;margin:20px 0 10px}.composer h3 small{color:var(--muted);font-weight:400}.composer-tools{display:flex;flex-wrap:wrap;gap:12px}.composer-tools label{font-size:11px;color:var(--muted)}.composer-tools input,.composer-tools select{display:block;margin-top:4px;width:150px}.pattern-scroll{overflow:auto}.step-grid{min-width:650px}.step-row{display:grid;grid-template-columns:80px repeat(16,minmax(26px,1fr));gap:4px;margin-bottom:4px}.step-row button{padding:0;border-radius:4px;height:29px;font-size:11px}.step-row .key{text-align:left;padding-left:8px;background:#c6d4d5;color:#122026}.step-row .black-key{background:#263238;color:#c6d4d5}.step{background:#1b282f;border-color:#2c3b42}.step:nth-child(4n+2){border-left:2px solid #667a82}.step.on{background:#b8e377;color:#12220c;border-color:#b8e377}.piano-grid .step.on{background:#7bd6d7;border-color:#7bd6d7;color:#11292a}.step.now{outline:2px solid white;outline-offset:-2px;filter:brightness(1.3)}.composer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.composer-actions button{font-size:12px}.clip:after{content:'♪';letter-spacing:0;opacity:.7}.composer .hint{line-height:1.7}#position{display:inline-block}@media(max-width:740px){.transport-extra{padding:12px}.composer{padding:14px}#feedback{padding:9px 12px}.seek-label{flex-basis:100%}}