/* Restrained studio controls with bounded panels, built for a reach from the keys. */
main#app{gap:9px!important}
main#app>header{min-height:94px!important;height:94px!important}
.views,.appTabs,.topline{width:100%;max-width:1800px;margin-left:auto!important;margin-right:auto!important}
.views{overflow:auto!important;padding-bottom:10px}
.view{height:auto!important;min-height:0;overflow:visible!important}
.view.active{display:block!important}
.view .module{padding:16px!important}
.sub{font-size:14px;line-height:1.5}.kicker{font-size:11px}
.sectionhead{margin-bottom:12px}.sectionhead h2{font-size:28px}
.appTabs button{min-height:46px;font-size:16px!important}
.topline{font-size:13px}.topline select,.topline button{font-size:13px;min-height:35px}
.playgrid{height:auto!important;min-height:0!important;grid-template-columns:1fr 1.1fr 1fr;align-items:start;gap:14px}
.playgrid .stack{gap:14px;display:flex;min-height:0}
.stack>.module,.stack>.module:first-child,.stack:last-child>.mixer-module,.stack:last-child>.module:last-child{flex:none!important;min-height:0!important}
.stack>.chordmodule{height:270px;justify-content:center}.chord{font-size:96px}.piano-hint{font-size:13px;margin-top:10px}.chordmodule .sub{font-size:13px}
.actions{gap:9px}.actions button{font-size:15px;min-width:100px;min-height:48px;padding:10px!important}
.actions.secondary{display:grid;grid-template-columns:repeat(3,1fr)}
.actions.secondary button{min-width:0}
#start{font-weight:700}.variations button{min-height:68px;font-size:27px}.variations small{font-size:12px;color:inherit!important;letter-spacing:.5px}
.tempo button{min-height:44px;min-width:44px}.tempo label{font-size:13px}.tempo input,.energy input,.human-feel input{min-height:26px}
.current-style-art{position:absolute;right:12px;top:4px;width:115px;height:100px;object-fit:contain;pointer-events:none;opacity:.72}
.stack:nth-child(2)>.module:first-child{position:relative}.stack:nth-child(2)>.module:first-child>.kicker,.stack:nth-child(2)>.module:first-child>.styleline,.stack:nth-child(2)>.module:first-child>#styleDesc{padding-right:108px}
#styleDesc{min-height:42px;font-size:13px}.styleline strong{font-size:28px}.variations{margin-top:15px}
.energy output,.human-feel,.beatline{font-size:13px}.human-feel{margin-top:10px}
#quickMixer{height:315px;flex:none;gap:8px}.channel-strip{padding:10px 7px;gap:7px}.strip-name{font-size:12px}.channel-strip>output{font-size:13px}
input.vertical-fader{appearance:none!important;-webkit-appearance:none!important;writing-mode:vertical-lr;direction:rtl;width:46px!important;min-height:100px;height:140px;flex:1;background:linear-gradient(90deg,#080706,#71614b,#080706) center/5px 100% no-repeat;border:0;border-radius:0;outline-offset:3px;touch-action:none}
input.vertical-fader::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:38px;height:21px;border:1px solid #bfa16f;border-radius:4px;background:linear-gradient(#d7c4a2,#a88b5e 40%,#463a2b 43%,#e0cba8 48%,#473b2c 53%,#ab8d60 58%,#7a6548);box-shadow:0 3px 5px #0009;cursor:ns-resize}
input.vertical-fader::-moz-range-thumb{width:38px;height:21px;border:1px solid #bfa16f;border-radius:4px;background:linear-gradient(#d7c4a2,#a88b5e 40%,#463a2b 44%,#e0cba8 48%,#473b2c 54%,#ab8d60);box-shadow:0 3px 5px #0009}
.strip-mute{min-height:37px;font-size:12px!important;border-radius:5px;box-shadow:inset 0 1px #ffffff16,0 2px 3px #0005}.pan-control{font-size:11px!important}
.pan-native{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.pan-knob{width:46px;height:46px;position:relative;margin:5px auto;border:2px solid #a88b5e;border-radius:50%;background:radial-gradient(circle at 35% 28%,#52483b,#24201a 62%,#110f0c);box-shadow:inset 0 0 0 3px #3a3228,0 3px 5px #0008;touch-action:none;cursor:ns-resize}
.pan-knob::after{content:'';position:absolute;left:calc(50% - 1px);top:5px;width:2px;height:12px;background:#e6c58e;border-radius:1px;transform-origin:1px 16px;transform:rotate(var(--pan-angle,0deg))}
.pan-knob:focus-visible{outline:2px solid #f0d49d;outline-offset:4px}.pan-control>span{font-size:9px}
#echoStatus{font-size:12px;min-height:36px;margin-top:8px}.stack:last-child>.module:last-child .actions{display:grid;grid-template-columns:1fr 1fr}.stack:last-child>.module:last-child .actions button{min-width:0;font-size:14px}
#bandGrid{height:auto!important;flex:none;grid-auto-rows:360px;gap:12px}
#band .bandcard h3{font-size:26px}.player-heading{min-height:90px}.portrait-stage{max-height:150px}#band .bandcard .band-musician{max-height:150px!important}
#band .bandcard .sub{font-size:12px}#band .bandcard label{font-size:13px}#band .bandcard select{font-size:13px;min-height:40px}#band .bandcard button{min-height:42px;font-size:14px}
#band>.note{font-size:12px;line-height:1.6}
.stylegrid{height:auto!important;min-height:0;flex:none;grid-template-rows:repeat(3,150px);gap:10px}
.stylecard{position:relative;overflow:hidden;justify-content:center;gap:10px;padding:15px!important}.stylecard b{font-size:23px;z-index:1;max-width:68%}.stylecard span{font-size:12px;z-index:1}.stylecard em{font-size:11px;z-index:1;max-width:80%}
.style-card-art{position:absolute;right:10px;bottom:18px;width:110px;height:110px;object-fit:contain;opacity:.48;pointer-events:none}
#settings .settingsgrid{height:auto;flex:none;align-items:start;grid-auto-rows:auto}.settingsgrid .module{min-height:0!important}
#settings .settingsgrid label{font-size:13px}#settings .settingsgrid .sub{font-size:12px}#settings .settingsgrid button{min-height:42px;font-size:13px}#settings .settingsgrid select{min-height:40px;font-size:13px}
.install-panel{margin-top:16px}.pedal-indicator{font-size:12px;line-height:1.5}.helpgrid{flex:none;align-items:start}.helpgrid>.module{min-height:0}.helpgrid p{font-size:14px;line-height:1.6}.helpgrid h3{font-size:23px}#help>.note{font-size:12px;line-height:1.6}
#songs>.module{padding:18px!important}#songName{min-height:46px;font-size:15px}#saveSong{min-height:46px;font-size:14px}
@media(min-width:1800px){.views{padding-top:10px}.playgrid{grid-template-columns:1fr 1.1fr 1fr}.stack>.chordmodule{height:290px}#quickMixer{height:340px}.actions button{min-height:54px;font-size:16px}.stylegrid{grid-template-rows:repeat(3,160px)}#bandGrid{grid-auto-rows:390px}}
@media(max-width:1150px){.actions button{font-size:13px;min-width:80px}.view .module{padding:12px!important}.sub{font-size:12px}.strip-name{font-size:10px}.pan-knob{width:40px;height:40px}.pan-knob::after{height:10px;transform-origin:1px 13px}.stylecard b{font-size:20px}.current-style-art{width:80px;height:80px}.stack:nth-child(2)>.module:first-child>.kicker,.stack:nth-child(2)>.module:first-child>.styleline,.stack:nth-child(2)>.module:first-child>#styleDesc{padding-right:70px}.styleline strong{font-size:23px}}
@media(max-width:999px){.playgrid{grid-template-columns:1fr 1fr}.playgrid>.stack:last-child{display:grid!important;grid-template-columns:1.2fr 1fr;min-height:0!important}.stack>.chordmodule{height:270px}#bandGrid{grid-auto-rows:350px}.stylegrid{grid-template-rows:repeat(4,150px)}.appTabs button{font-size:13px!important}.helpgrid{gap:12px}}
@media(max-width:600px){.playgrid{display:flex}.playgrid>.stack:last-child{display:flex!important}.stack>.chordmodule{height:250px}.stylegrid{grid-template-rows:repeat(6,160px)}.style-card-art{width:78px;height:78px;opacity:.35}.stylecard b{font-size:20px}.stylecard em{max-width:100%;font-size:11px}#bandGrid{grid-auto-rows:375px}.portrait-stage{height:120px}.appTabs button{min-height:42px;font-size:10px!important}.topline{font-size:11px}.current-style-art{width:110px;height:100px}.stack:nth-child(2)>.module:first-child>.kicker,.stack:nth-child(2)>.module:first-child>.styleline,.stack:nth-child(2)>.module:first-child>#styleDesc{padding-right:100px}.views{overflow:visible!important}.pan-knob{width:46px;height:46px}.pan-knob::after{transform-origin:1px 16px}}

.song-band{display:flex;gap:28px;justify-content:center;padding:25px 0;opacity:.42}.song-band img{width:150px;height:150px;object-fit:contain;pointer-events:none}
.stack:nth-child(2)>.module:first-child:has(#stylePortrait[hidden])>.kicker,.stack:nth-child(2)>.module:first-child:has(#stylePortrait[hidden])>.styleline,.stack:nth-child(2)>.module:first-child:has(#stylePortrait[hidden])>#styleDesc{padding-right:0}
@media(max-width:600px){.song-band{gap:8px}.song-band img{width:90px;height:90px}}
@media(min-width:1000px) and (max-height:820px){main#app>header{min-height:76px!important;height:76px!important}main#app>header .makerBrand{height:72px!important}#quickMixer{height:245px}.stack>.chordmodule{height:235px}.view .module{padding:12px!important}.actions button{min-height:44px;font-size:13px}.variations button{min-height:58px}.current-style-art{height:85px;width:95px}.piano-hint{margin-top:6px}.stack:last-child>.module:last-child .actions button{min-height:44px;font-size:12px}.stylegrid{grid-template-rows:repeat(3,132px)}#bandGrid{grid-auto-rows:345px}.helpgrid p{font-size:13px}}