/* The DOM header shares the canvas's 32px header, 44px gutter and 152px tracks. */
#trackHeaders{position:sticky;top:0;left:0;height:32px;margin-bottom:-32px;z-index:4;display:flex;background:#232d3c;isolation:isolate}
.track-header-gutter{flex:0 0 44px;display:flex;align-items:center;padding-left:7px;background:#232d3c;color:#8191a8;font:11px system-ui;z-index:1}
#trackHeaderViewport{flex:1;min-width:0;overflow:hidden}
#trackHeaderStrip{display:flex;height:32px;will-change:transform}
#trackHeaderStrip>.track-header-controls{flex:0 0 152px;width:152px}
.track-header-controls{display:grid;grid-template-columns:minmax(0,1fr) 28px 28px;gap:2px;min-width:0;height:32px;background:#232d3c;border-right:1px solid #42526a;padding:0 2px}
.track-header-controls button{min-width:0;min-height:32px;height:32px;border:1px solid transparent;border-radius:3px;padding:0 3px;background:transparent;color:#b8c6d9;font:600 11px system-ui;cursor:pointer}
.track-header-controls .track-name{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-header-controls .track-mute,.track-header-controls .track-solo{background:#17202e;border-color:#3a485b}
.track-header-controls.is-current{box-shadow:inset 0 -2px #6bd6bd}
.track-header-controls.is-current .track-name{color:#8be4cc}
.track-header-controls.is-suppressed .track-name{color:#929aa7}
.track-header-controls.is-muted .track-name{background:#4c3030;color:#ffd0c4}
.track-header-controls button.track-mute.active,#trackMute.active,[data-mix-toggle="mute"][aria-pressed="true"]{background:#65422c;border-color:#ebaa70;color:#fff0d0}
.track-header-controls button.track-solo.active,#trackSolo.active,[data-mix-toggle="solo"][aria-pressed="true"]{background:#286452;border-color:#81dec4;color:#ddfff5}
.track-header-controls button:hover{border-color:#8b9eb9}
.track-header-controls button:focus-visible{outline:2px solid #6bd6bd;outline-offset:-2px}
#trackHeaders,#trackHeaders *,.track-header-controls,.track-header-controls *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y}
.track-control-button{min-width:32px;font-weight:700}
/* Use the same controls without imposing the modern appearance on the retro window. */
.amiga-screen .track-head.track-header-controls{display:grid;grid-template-columns:minmax(0,1fr) 28px 28px;align-items:stretch;height:32px;gap:2px;padding:0 2px;background:#315a9a;border-right:1px solid #a8a8a8}
.amiga-screen .track-header-controls button{border-radius:0;font:700 11px "Courier New",Courier,monospace;color:#fff;box-shadow:none;min-height:32px;padding:0 2px}
.amiga-screen .track-header-controls .track-mute,.amiga-screen .track-header-controls .track-solo{background:#a8a8a8;color:#050505;border-color:#eee #222 #222 #eee}
.amiga-screen .track-header-controls.is-current{box-shadow:inset 0 -2px #ffcf70}
.amiga-screen .track-header-controls.is-current .track-name{color:#fff}
.amiga-screen .track-header-controls.is-suppressed .track-name{color:#c2c6cc}
.amiga-screen .track-header-controls.is-muted .track-name{background:#63342e;color:#ffe5d8}
.amiga-screen .track-header-controls .track-mute.active{background:#f28a2d;color:#201000}
.amiga-screen .track-header-controls .track-solo.active{background:#62d894;color:#052516}