/* 0.6: responsive cabinet; controls retain their physical proportions. */
html,body{width:100%;height:100%;height:100dvh;margin:0!important;padding:0!important;overflow:hidden!important}
body{display:block!important}
#screen-stage{width:100%!important;height:100%!important;transform:none!important;overflow:hidden;contain:none}
main#app{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;padding:clamp(8px,1.2vw,20px)!important;gap:8px!important;border-radius:18px;overflow:hidden}
main#app>header{min-height:100px!important;max-height:124px;margin:0;padding:0 125px 6px 4px!important;align-items:center;gap:12px}
main#app>header h1{font-size:clamp(30px,3.3vw,48px)!important;margin:7px 0 5px;line-height:1.05}
main#app>header p{font-size:13px}
main#app>header .eyebrow{font-size:clamp(8px,.8vw,11px);letter-spacing:2px}
main#app>header .appActions{flex:0 0 clamp(150px,20vw,260px);width:clamp(150px,20vw,260px)}
main#app>header .makerBrand{width:100%!important;height:100px!important;max-width:100%!important;object-fit:contain}
#fullscreen.fullscreen-corner{font-size:12px;padding:9px 12px;top:2px;right:0}
.topline{font-size:12px;gap:10px;min-height:34px;flex-wrap:nowrap}
.topline select,.topline button{font-size:12px;padding:6px 10px}
.shade-control{font-size:11px;gap:7px!important;white-space:nowrap}
.shade-control input{width:90px;accent-color:#d7b47b}
.shade-control output{width:28px;font-variant-numeric:tabular-nums}
.appTabs{gap:7px;padding:5px!important}
.appTabs button{min-height:36px;font-size:clamp(12px,1vw,15px)!important;padding:7px!important}
.views{flex:1;min-height:0;overflow:hidden}
.view{padding:2px 0;overflow:hidden!important;height:100%;min-height:0}
.view.active{display:flex!important;flex-direction:column}
.view .module{padding:clamp(10px,1vw,16px)!important}
.kicker{font-size:clamp(9px,.8vw,12px);margin-bottom:6px}
.sub{font-size:clamp(11px,.9vw,13px);line-height:1.45}
.sectionhead{flex:none;min-height:44px;margin-bottom:8px}
.sectionhead h2{font-size:clamp(21px,2vw,30px)}
.sectionhead .kicker{margin-bottom:3px}
.playgrid{flex:1;min-height:0;width:100%;grid-template-columns:1fr 1.12fr 1.04fr;gap:12px}
.stack{gap:12px;min-height:0}
.stack>.module,.stack>.module:first-child{flex:1;min-height:0}
.stack:last-child>.mixer-module{flex:2.3;display:flex;flex-direction:column}
.stack:last-child>.module:last-child{flex:1}
.chordmodule{display:flex;flex-direction:column;align-items:center;justify-content:center}
.chord{font-size:clamp(62px,7vw,110px);line-height:1.1}
.chordmodule .kicker{align-self:flex-start}
.piano-hint{margin-top:18px;color:#d5b985;font-size:13px;line-height:1.7}
.piano-hint span{font-size:11px;color:#bba78b}
.actions{gap:7px;margin-top:9px}
.actions button{min-height:39px;font-size:clamp(12px,.95vw,14px);min-width:85px;padding:8px!important}
.actions.secondary button{min-width:48px}
.variations{margin:12px 0;gap:8px}
.variations button{font-size:22px;min-height:54px;padding:8px 2px}
.variations small{font-size:11px}
.styleline strong{font-size:clamp(22px,2vw,30px)}
.tempo{gap:8px}.tempo button{min-height:36px}.tempo label{font-size:12px}
.energy output,.human-feel{font-size:12px}.human-feel{margin-top:14px}
.beatline{font-size:12px;margin-top:13px}
/* Four small studio strips: upright volume, mute, then stereo placement. */
#quickMixer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;min-height:0;padding-top:4px}
.channel-strip{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;gap:5px;padding:8px 6px;background:linear-gradient(#ffffff06,#0003);border:1px solid #8b6c494f;border-radius:8px}
.strip-name{font-size:clamp(10px,.8vw,12px);font-weight:650;text-align:center;white-space:nowrap}
.channel-strip>output{color:#e6c58e;font-size:12px;font-variant-numeric:tabular-nums}
input.vertical-fader{writing-mode:vertical-lr;direction:rtl;appearance:auto;display:block;width:28px!important;min-height:50px;height:auto;flex:1;margin:3px auto;accent-color:#d7b47b;cursor:pointer}
.strip-mute{font-size:11px!important;min-height:29px;width:100%;padding:4px 2px!important;border-radius:5px}
.muted{background:#63422d!important;color:#f1d4a0!important;border-color:#c18d51!important}
.pan-control{font-size:10px!important;display:block;width:100%;text-align:center;color:#c8b18c;line-height:1.2}
.pan-control output{display:inline-block;min-width:26px;color:#f0d49d;font-size:10px}
.pan-control input{display:block;width:100%;min-width:0;margin:4px 0 1px;accent-color:#d7b47b}
.pan-control>span{font-size:8px;letter-spacing:3px;opacity:.75}
/* Original band artwork, with a warm halo driven by actual note events. */
#bandGrid{height:auto!important;flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#band .bandcard{padding:14px!important;gap:10px;min-width:0;position:relative;overflow:hidden}
.player-heading{display:grid;grid-template-columns:1fr 1.15fr;gap:5px;flex:1;min-height:90px;align-items:center}
.player-heading>div:first-child{min-width:0;z-index:1}
#band .bandcard h3{font-size:clamp(21px,2vw,30px);margin:0 0 9px}
#band .bandcard .sub{font-size:clamp(10px,.85vw,13px);min-height:0;max-width:100%}
.portrait-stage{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:0;isolation:isolate}
#band .bandcard .band-musician{position:relative!important;top:auto!important;right:auto!important;left:auto!important;width:100%!important;height:100%!important;min-height:0!important;max-height:270px!important;max-width:100%!important;object-fit:contain!important;opacity:.9!important;z-index:1!important;transform-origin:50% 90%;margin:0!important}
.player-glow{position:absolute;inset:10% -10%;z-index:0;background:radial-gradient(ellipse,#f0c86b99 0%,#d7993544 36%,transparent 70%);opacity:.05;pointer-events:none}
.extra-mark{font:100px Georgia;color:#b68a43;opacity:.65}
.is-muted .portrait-stage{opacity:.35}
#band .bandcard label{font-size:12px;flex:none;width:100%}
#band .bandcard select{font-size:12px;padding:9px;min-width:0}
#band .bandcard button{font-size:13px;min-height:36px;padding:8px}
#band>.note{flex:none;line-height:1.4;margin-top:10px;font-size:11px}
.stylegrid{height:auto!important;flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,1fr)}
.stylecard b{font-size:clamp(18px,1.5vw,24px)}.stylecard em{font-size:11px}
#settings .settingsgrid{height:auto;flex:1;min-height:0;grid-template-columns:1fr 1fr 1.15fr 1fr;gap:12px}
#settings .settingsgrid .module{gap:10px;min-width:0}
#settings .settingsgrid label{font-size:12px}
#settings .settingsgrid select{font-size:12px;padding:7px;margin-top:5px}
#settings .settingsgrid button{font-size:12px;padding:8px;min-height:33px}
#settings .settingsgrid .sub{font-size:11px;line-height:1.5}
.install-panel{display:grid;grid-template-columns:1fr 1fr;gap:7px;border-top:1px solid #8b6c4966;margin-top:auto;padding-top:12px}
.install-panel .kicker,.install-panel p{grid-column:1/-1}.install-panel #installApp{grid-column:1;grid-row:2}.install-panel #checkUpdate,.install-panel #applyUpdate{grid-column:2;grid-row:2}
.install-panel .kicker{margin:0}.install-panel p{min-height:35px}
.pedal-indicator{font-size:11px;padding:8px}
.helpgrid{flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.helpgrid p{font-size:clamp(11px,.95vw,14px);line-height:1.6}
.helpgrid h3{font-size:clamp(19px,1.5vw,24px)}
#help>.note{font-size:11px;line-height:1.5;flex:none}
#songs>.module{flex:none;align-items:center}.songlist{overflow:auto;min-height:0;grid-auto-rows:min-content;padding:2px}
footer{font-size:10px;padding:2px 0;letter-spacing:.7px;flex:none}
:root.deep-shade[data-theme=white] header h1,:root.deep-shade[data-theme=pine] header h1{color:#fff0d9;text-shadow:0 2px 2px #28140f90}
:root.deep-shade[data-theme=white] header p,:root.deep-shade[data-theme=pine] header p,:root.deep-shade[data-theme=white] .eyebrow,:root.deep-shade[data-theme=pine] .eyebrow{color:#f0cfaa}
:root[data-theme=white] .topline,:root[data-theme=pine] .topline,:root[data-theme=white] footer,:root[data-theme=pine] footer{color:#4d3928}
:root.deep-shade[data-theme=white] .topline,:root.deep-shade[data-theme=pine] .topline,:root.deep-shade[data-theme=white] footer,:root.deep-shade[data-theme=pine] footer{color:#f0cfaa}
@media(min-height:950px) and (min-width:1100px){main#app{gap:12px!important}main#app>header{min-height:124px!important}.appTabs button{min-height:42px}.view .module{padding:20px!important}.actions button{min-height:48px}.variations button{min-height:70px}.channel-strip{gap:9px;padding:12px 9px}.strip-mute{min-height:36px}.pan-control{font-size:12px!important}.helpgrid p{font-size:15px}}
@media(max-height:740px) and (min-width:1000px){main#app{gap:5px!important;padding:8px 12px!important}main#app>header{min-height:73px!important;height:73px!important}main#app>header h1{font-size:32px!important}main#app>header .makerBrand{height:70px!important}.appTabs button{min-height:30px;padding:5px!important}.topline{min-height:28px}.topline select,.topline button{padding:4px 8px}.sectionhead{min-height:34px;margin-bottom:6px}.sectionhead h2{font-size:22px}.sectionhead .kicker{font-size:8px}.view .module{padding:9px!important}.playgrid,.stack{gap:8px}.actions{gap:5px;margin-top:6px}.actions button{min-height:31px;font-size:11px}.variations{margin:7px 0}.variations button{min-height:43px;font-size:18px;padding:4px}.piano-hint{font-size:11px;margin-top:8px}.human-feel{margin-top:7px}.beatline{margin-top:7px}.channel-strip{gap:3px;padding:5px 4px}.strip-mute{min-height:25px}.pan-control input{margin:2px 0}.stack:last-child>.mixer-module{flex:2.8}.stack:last-child>.module:last-child{flex:1}.sub{font-size:10px}.kicker{margin-bottom:4px}#band .bandcard{gap:7px;padding:10px!important}#band .bandcard h3{font-size:23px}#band .bandcard select{padding:6px;font-size:11px}#band .bandcard button{min-height:30px;padding:5px}#band>.note{margin-top:6px;font-size:10px}#settings .settingsgrid .module{gap:6px}#settings .settingsgrid label,#settings .settingsgrid .sub{font-size:10px}#settings .settingsgrid button{min-height:28px;padding:5px}.install-panel{gap:5px;padding-top:6px}.install-panel p{min-height:28px}.helpgrid p{font-size:11px;line-height:1.5}.helpgrid h3{font-size:18px}#help>.note{font-size:10px;margin-top:6px}.pedal-indicator{padding:6px;font-size:10px}}
/* Small screens reflow instead of shrinking piano controls to unreadable sizes. */
@media(max-width:999px),(max-height:559px){
 html,body{overflow:auto!important;height:auto;min-height:100dvh}#screen-stage{height:auto!important;min-height:100dvh;overflow:visible}main#app{height:auto!important;min-height:100dvh;overflow:visible}
 main#app>header{min-height:92px!important;padding-right:92px!important}main#app>header .eyebrow{font-size:8px;letter-spacing:1px}main#app>header h1{font-size:32px!important}main#app>header .appActions{flex-basis:150px;width:150px}main#app>header .makerBrand{height:80px!important}#fullscreen.fullscreen-corner{font-size:10px;padding:7px}.views{overflow:visible}.view{height:auto;overflow:visible!important}.topline{flex-wrap:wrap}.topline .grow{flex:1}.shade-control input{width:70px}.appTabs button{font-size:11px!important}.playgrid{grid-template-columns:1fr 1fr;min-height:680px}.playgrid>.stack:last-child{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;min-height:300px}.stack:last-child>.mixer-module{min-height:300px}#bandGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(340px,1fr)}#settings .settingsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}#settings .settingsgrid>.module{min-height:330px}.helpgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.helpgrid>.module{min-height:220px}.stylegrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(115px,1fr));min-height:490px}footer{margin-top:8px}.songlist{max-height:60vh}
}
@media(max-width:600px){main#app{padding:10px!important;gap:7px!important}main#app>header{padding-right:0!important;min-height:125px!important;max-height:none;align-items:flex-start}main#app>header>div:first-child{padding-top:30px}main#app>header h1{font-size:29px!important;letter-spacing:-1px}main#app>header .appActions{align-self:flex-end;flex-basis:100px;width:100px}main#app>header .makerBrand{height:62px!important}.eyebrow{max-width:210px}.topline{gap:7px}.topline #midiStatus{flex:1;font-size:10px;min-width:150px}.topline .grow{display:none}.shade-control{margin-left:auto}.shade-control input{width:65px}.topline select,.topline button{font-size:11px;padding:6px}.appTabs{gap:3px;padding:3px!important}.appTabs button{font-size:9px!important;min-height:36px;padding:5px 2px!important}.playgrid{display:flex;flex-direction:column;min-height:0;gap:10px}.playgrid>.stack{display:flex!important;gap:10px}.playgrid>.stack>.module{min-height:190px}.playgrid>.stack>.chordmodule{min-height:235px}.playgrid>.stack:last-child>.mixer-module{min-height:340px}.playgrid>.stack:last-child>.module:last-child{min-height:140px}.chord{font-size:85px}.stylegrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(120px,1fr))}#bandGrid{gap:8px;grid-auto-rows:minmax(355px,1fr)}#band .bandcard{padding:10px!important;gap:8px}.player-heading{grid-template-columns:1fr;grid-template-rows:auto 130px;gap:4px}.portrait-stage{height:130px}#band .bandcard h3{font-size:22px;margin:0 0 4px}#band .bandcard .sub{font-size:10px}#band .bandcard select{font-size:10px;padding:7px}.sectionhead .sub{display:none}#settings .settingsgrid,.helpgrid{grid-template-columns:1fr}#settings .settingsgrid>.module{min-height:0;padding:16px!important}.helpgrid>.module{min-height:0;padding:16px!important}.install-panel{margin-top:10px}#songs>.module{flex-direction:column!important;align-items:stretch!important}#songs input{width:100%!important}.songlist{grid-template-columns:1fr;max-height:none}footer{font-size:8px;letter-spacing:0;gap:10px}}
@media(prefers-reduced-motion:reduce){.band-musician,.player-glow{animation:none!important;transition:none!important}:root.band-playing .bandcard:not(.is-muted) .player-glow{opacity:.2}}