*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{padding:8px!important;margin:0}main#app{width:min(99vw,1540px);height:calc(100dvh - 16px);margin:0 auto;padding:12px 18px;display:flex;flex-direction:column;gap:7px;overflow:hidden;min-height:0}header{padding:0 0 7px;min-height:62px;flex-shrink:0}header h1{font-size:clamp(24px,2.3vw,36px);margin:0}header p{margin:1px 0;font-size:11px}.eyebrow{font-size:9px}.appActions .makerBrand{width:112px;height:49px;object-fit:contain}.appActions button{padding:8px 12px}.topline{display:flex;align-items:center;gap:9px;font-size:11px;min-height:34px;flex-shrink:0}.topline label{display:flex;align-items:center;gap:6px}.topline select,.topline button{padding:6px 10px;font-size:11px}.grow{flex:1}.statuslamp{width:9px;height:9px;background:#885e44;border-radius:50%}.statuslamp.on{background:#a5d6a2;box-shadow:0 0 9px #a5d6a2}.appTabs{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;position:static;margin:0!important;padding:5px!important;flex-shrink:0;gap:6px}.appTabs button{padding:8px 4px!important;font-size:12px!important}.appTabs button.active{background:linear-gradient(#e3c693,#b9915d);color:#2b2117;border-color:#e2c28c;font-weight:700}.views{min-height:0;flex:1;overflow:hidden}.view{display:none;height:100%;min-height:0;overflow:hidden;padding:3px 0}.view.active{display:block}.view .module{background:linear-gradient(145deg,#211b16,#2d251e);border:1px solid #775b3d;border-radius:9px;padding:12px;box-shadow:inset 0 1px #ffffff10,0 2px 7px #0003;min-height:0}.kicker{font-size:10px;letter-spacing:1.5px;color:#d5b985;margin-bottom:8px}.sub{font-size:11px;color:#bba78b;line-height:1.5}.playgrid{height:100%;display:grid;grid-template-columns:1.08fr 1.14fr 1fr;gap:10px}.stack{display:flex;flex-direction:column;gap:10px;min-height:0}.stack>.module{flex:1}.stack>.module:first-child{flex:1.15}.chordmodule{text-align:center}.chord{font:clamp(54px,7vw,100px) Georgia,serif;color:#f0d49d;line-height:1.15;text-shadow:0 0 24px #bd8b3b20}.demo{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:12px}.demo button{padding:6px 10px;font-size:11px}.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.actions button{flex:1;min-width:80px;padding:9px 6px;font-size:12px}.actions.secondary button{min-width:55px}.actions button.active,.variations button.active{background:linear-gradient(#e3c693,#b9915d);color:#2b2117;border-color:#e2c28c}.styleline{display:flex;justify-content:space-between;gap:8px;align-items:center}.styleline strong{font:24px Georgia,serif;color:#efd5a8}.styleline span{color:#e3c18a}.variations{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0}.variations button{padding:10px 2px;font-size:19px}.variations small{font-size:10px}.tempo{display:flex;gap:7px;align-items:end}.tempo>button{padding:9px 11px}.tempo label{flex:1;font-size:11px}.tempo input{display:block;width:100%}.tempo output{float:right}.energy input{width:100%}.energy output{display:block;font-size:12px;margin-top:7px}.beatline{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:11px;color:#c8b18c}#beats{display:flex;gap:8px}#beats i{width:12px;height:12px;border-radius:50%;border:1px solid #b59564;background:#332a20}#beats i.on{background:#e6c68f;box-shadow:0 0 9px #e6c68f55}.mixrow{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:7px;font-size:11px;margin:11px 0}.mixrow input{width:100%}.mixrow output{font-variant-numeric:tabular-nums;color:#e6c58e;text-align:right}.sectionhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.sectionhead h2{font-size:23px;margin:0}.sectionhead select{padding:8px}.bandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:calc(100% - 126px)}.bandcard{display:flex;flex-direction:column;gap:10px}.bandcard h3{font:23px Georgia,serif;margin:0}.bandcard select{width:100%;font-size:12px;padding:9px}.bandcard label{font-size:11px}.bandcard input[type=range]{width:100%}.bandcard .sub{flex:1}.note{margin-top:10px;font-size:11px;color:#d1b998}.stylegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:9px;height:calc(100% - 100px)}.stylecard{display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:12px!important;border:1px solid #8b6c49;background:linear-gradient(145deg,#2c241e,#1b1713)}.stylecard.selected{border:2px solid #e4c58d;background:linear-gradient(145deg,#4b3a27,#2c241b)}.stylecard b{font:19px Georgia,serif;color:#ead2a9}.stylecard span{font-size:11px;color:#bba68a}.stylecard em{font-size:10px;color:#d7b984;font-style:normal}.settingsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:calc(100% - 55px)}.settingsgrid .module{display:flex;flex-direction:column;gap:12px}.settingsgrid label{display:block;font-size:12px}.settingsgrid select,.settingsgrid input[type=range]{display:block;width:100%;margin-top:7px}.helpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.helpgrid p{font-size:12px;line-height:1.6}.helpgrid h3{margin:0;font:19px Georgia,serif}.songlist{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}.songlist button{text-align:left}.view#songs>.module{display:flex;align-items:end;gap:12px}.view#songs input{display:block;margin-top:7px;width:260px}.view#songs p{flex:1}.view#styles>.sub{margin-top:5px}footer{flex-shrink:0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#cfb68f;padding:3px}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}select{max-width:100%}@media(max-width:850px){main#app{padding:8px}.playgrid{gap:5px}.view .module{padding:8px}.chord{font-size:54px}.styleline strong{font-size:18px}.actions button{font-size:10px;min-width:55px}.bandcard h3{font-size:18px}.stylecard b{font-size:14px}.stylecard{padding:8px!important}.appTabs button{font-size:10px!important}.mixrow{grid-template-columns:53px 1fr 25px}.sectionhead h2{font-size:18px}}@media(max-height:690px){header{min-height:48px}header h1{font-size:26px}.appActions .makerBrand{height:34px}.module{padding:7px!important}.kicker{margin-bottom:3px}.variations{margin:7px 0}.mixrow{margin:5px 0}.beatline{margin-top:6px}.stylegrid{height:calc(100% - 76px)}.bandgrid{height:calc(100% - 98px)}}

/* 0.3.1 — consistent 16:9 reference canvas; fit whole interface, never crop */
html,body{width:100%;height:100%;height:100dvh;margin:0!important;padding:0!important;overflow:hidden!important}
body{display:flex!important;align-items:center;justify-content:center;overscroll-behavior:none}
#screen-stage{position:relative;width:1440px;height:810px;flex:none;transform-origin:center center;overflow:hidden;contain:layout style paint}
main#app{width:1440px!important;max-width:none!important;height:810px!important;max-height:none!important;margin:0!important;padding:12px 18px!important;gap:7px!important}
/* Keep component sizes identical across tablet and monitor: the complete canvas scales as one. */
@media(max-width:850px){main#app{padding:12px 18px!important}.view .module{padding:12px!important}.chord{font-size:clamp(54px,7vw,100px)}.appTabs button{font-size:12px!important}}

/* 0.3.2 — quiet musician silhouettes in existing Band cards only */
#band .bandcard{position:relative;isolation:isolate;overflow:hidden}
#band .bandcard.has-musician{padding-top:12px}
#band .band-musician{display:block;align-self:center;width:auto;max-width:94%;height:clamp(125px,24vh,245px);object-fit:contain;object-position:center bottom;opacity:.68;filter:sepia(.28) contrast(.92);pointer-events:none;flex:1 1 auto;min-height:0;margin:0 auto -2px}
#band .bandcard h3,#band .bandcard label,#band .bandcard button,#band .bandcard .kicker,#band .bandcard .sub{position:relative;z-index:1}
#band .bandcard .sub{flex:0 0 auto}
#band .bandcard label{flex-shrink:0}
#band .bandcard button{flex-shrink:0}