/* V004 — mobile console layout and dedicated LED gutters. */
#module-content .studio-shell button:not(.piano-key):not(.studio-photo-key):not(.close):not(.studio-planned){position:relative;box-sizing:border-box;padding:10px 32px 10px 12px;min-height:44px;height:auto;min-width:0;line-height:1.35;overflow-wrap:break-word}
#module-content .studio-shell button:not(.piano-key):not(.studio-photo-key):not(.close)::before{position:absolute;left:auto;right:10px;top:50%;bottom:auto;transform:translateY(-50%);width:10px;height:4px;margin:0;pointer-events:none}
#module-content .studio-shell button:focus-visible{outline:2px solid #f2dea1;outline-offset:3px}
#module-content .studio-shell .studio-breadcrumb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;margin:10px 0 16px}
#module-content .studio-shell .studio-breadcrumb #studio-path{grid-column:2;grid-row:1;white-space:normal;overflow-wrap:anywhere;font:14px/1.4 Roboto,Arial,sans-serif}
#module-content .studio-shell .studio-breadcrumb>button{grid-row:1;grid-column:auto;white-space:normal;font-size:12px}
#module-content .studio-shell .studio-breadcrumb>.hub-guide{grid-column:1/3;grid-row:2;justify-self:start;font-size:13px;width:auto;min-height:36px;display:inline-flex;align-items:center;padding:0}
#module-content .studio-shell .studio-breadcrumb>.hub-guide::before{content:none}
#module-content .studio-shell .studio-breadcrumb>button:last-child{grid-column:3;grid-row:2;justify-self:stretch}
#module-content .studio-shell .studio-transport{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0 0 12px}
#module-content .studio-shell .studio-transport>button{grid-column:span 2;font-size:13px}
#module-content .studio-shell .studio-transport>#undo,#module-content .studio-shell .studio-transport>#redo{grid-column:span 3}
#module-content .studio-shell .studio-note-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
#module-content .studio-shell .studio-note-fields label{font:13px/1.4 Roboto,Arial,sans-serif;white-space:normal;color:#cbd7be}
#module-content .studio-shell .studio-note-fields input{font-size:16px;min-height:44px;height:44px;padding:8px;box-sizing:border-box}
#module-content .studio-shell .knob-bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#module-content .studio-shell .knob-label{font:600 10px/1.3 Roboto,Arial,sans-serif;letter-spacing:0;min-height:28px;height:auto;color:#c6d5b4;white-space:normal}
#module-content .studio-shell .console-dial{width:60px;height:60px}
#module-content .studio-shell .console-knob output{font-size:13px;min-width:0}
#module-content .studio-shell .console-section-title{font-size:11px;color:#c1cfac;margin:12px 0 8px}
#module-content .studio-shell .roll-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
#module-content .studio-shell .roll-settings label{min-width:0;font-size:13px}
#module-content .studio-shell .roll-settings input{width:100%;min-height:44px;box-sizing:border-box;margin:0}
#module-content .studio-shell .roll-settings select{font-size:16px;min-height:44px}
.roll-navigation{display:grid;grid-template-columns:44px minmax(80px,1fr) 44px minmax(90px,1fr);gap:8px;margin:10px 0}
#module-content .studio-shell .roll-navigation>button{padding:8px;font-size:14px}
#module-content .studio-shell .roll-navigation>button::before{display:none}
#module-content .studio-shell .roll-navigation>button[aria-pressed=true]{border-color:#dac87a;color:#fff0b8;box-shadow:inset 0 -10px 18px #e1c36733}
.studio-piano-wrap.pan-mode{cursor:grab}.studio-piano-wrap.pan-mode:active{cursor:grabbing}.roll-hint{font:12px/1.6 Roboto,Arial,sans-serif;color:#c4d2b3;margin:8px 0 14px}
#module-content .studio-shell .studio-piano-roll{touch-action:none;user-select:none;-webkit-user-select:none}
#module-content .studio-shell .piano-keyboard,#module-content .studio-shell .piano-key{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#module-content .studio-shell .piano-divider button{padding:8px;min-width:44px;min-height:44px}
#module-content .studio-shell .piano-divider button::before{display:none}
#module-content .studio-shell .eq-bank{gap:4px;padding:12px 8px 18px;max-width:100%;scrollbar-width:thin;scrollbar-color:#b7c57b #142119;border:1px solid #4e6140}
#module-content .studio-shell .eq-band{flex:0 0 44px;min-width:44px}
#module-content .studio-shell .eq-band :is(span,output){font:12px/1.4 Roboto,Arial,sans-serif}
#module-content .studio-shell .eq-band input{height:140px;width:40px;max-width:40px;touch-action:none}
#module-content .studio-shell .eq-scroll-hint{display:block;font:12px/1.5 Roboto,Arial,sans-serif;color:#c3d2b2}
#module-content .studio-shell .audio-transport{gap:8px}
#module-content .studio-shell .audio-transport>button{padding:8px;font-size:14px}
#module-content .studio-shell .audio-transport>button::before{display:none}
#module-content .studio-shell button.studio-photo-key>span{bottom:24px;gap:6px}
#module-content .studio-shell button.studio-photo-key b{font-size:clamp(14px,3.5vw,22px);line-height:1.3}
#module-content .studio-shell button.studio-photo-key small{font-size:12px;line-height:1.4}
#module-content .studio-shell .studio-tool-grid button.studio-photo-key{aspect-ratio:1.25}
#module-content .studio-shell .console-project-actions{margin-top:14px;padding-top:12px}
.footer{margin-top:20px;padding-top:10px;padding-bottom:20px}
.arrange-dialog .arrange-mode>button{flex:1}.arrange-dialog .arrange-candidates{display:grid;grid-template-columns:1fr;gap:10px}.arrange-dialog .arrange-candidates>button{text-align:left;padding:12px 16px}.arrange-dialog .dialog-top{gap:12px;align-items:start}.arrange-dialog h2{font-size:21px}.arrange-dialog h3{margin:22px 0 12px}
@media(min-width:760px){#module-content .studio-shell .studio-transport{grid-template-columns:repeat(5,minmax(0,1fr))}#module-content .studio-shell .studio-transport>button,#module-content .studio-shell .studio-transport>#undo,#module-content .studio-shell .studio-transport>#redo{grid-column:auto}#module-content .studio-shell .studio-note-fields{grid-template-columns:repeat(4,minmax(0,1fr))}.arrange-dialog .arrange-candidates{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:360px){#module-content .studio-shell .knob-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.roll-navigation{gap:5px;grid-template-columns:40px 1fr 40px 1fr}}
/* Override the older flex breadcrumb and keep the title on its own line. */
#module-content .studio-shell .module-intro{display:block}
#module-content .studio-shell .studio-breadcrumb{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#module-content .studio-shell .studio-breadcrumb>button:first-child{grid-column:1;grid-row:1;justify-self:start}
#module-content .studio-shell .studio-breadcrumb #studio-path{grid-column:2;grid-row:1;min-width:0;flex:none;overflow-wrap:normal}
#module-content .studio-shell .studio-breadcrumb>.hub-guide{grid-column:1;grid-row:2;justify-self:start}
#module-content .studio-shell .studio-breadcrumb>button:last-child{grid-column:2;grid-row:2}
/* V004.1 — piano owns one measured visual viewport, never the browser chrome. */
#module-content .studio-shell .piano-session{box-sizing:border-box;display:grid;grid-template-rows:auto auto auto;min-width:0;isolation:isolate}
#module-content .studio-shell .piano-divider{box-sizing:border-box;display:grid!important;grid-template-columns:44px 44px 44px 44px 112px minmax(80px,1fr) minmax(80px,1fr);gap:4px 6px;padding:6px 8px;margin:0;min-height:0!important;height:auto!important;align-items:center;background:#0b170f;position:relative;z-index:3;overflow:hidden}
#module-content .studio-shell .piano-divider>button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px!important;max-height:44px;padding:0!important;margin:0!important;line-height:1;font:24px/1 Roboto,Arial,sans-serif;border:1px solid #506044;border-radius:8px;box-shadow:inset 0 1px 1px #d6e8af30,0 2px 3px #0008;transform:none!important}
#module-content .studio-shell .piano-divider>button::before,#module-content .studio-shell .piano-divider>button::after{content:none!important;display:none!important}
#module-content .studio-shell .piano-divider .console-lcd{box-sizing:border-box;min-width:0;padding:6px 4px;margin:0;font:12px/1.3 Orbitron,Arial,sans-serif;text-align:center;letter-spacing:0;white-space:nowrap}
#module-content .studio-shell .piano-divider .piano-level{display:grid;grid-template-rows:14px 28px;gap:0;align-items:center;margin:0!important;min-width:0;font:11px/14px Roboto,Arial,sans-serif;color:#d6e3bf}
#module-content .studio-shell .piano-divider .piano-level input{box-sizing:border-box;display:block;width:100%;height:28px;min-height:28px;padding:0!important;margin:0!important;touch-action:none;accent-color:#d5d67a}
#module-content .studio-shell .piano-divider .piano-ready{display:block;grid-column:1/-1;min-width:0;max-width:none;min-height:14px;margin:0!important;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px/14px Roboto,Arial,sans-serif;color:#bccfa5}
#module-content .studio-shell .piano-session.is-immersive{position:fixed!important;inset:auto!important;left:var(--piano-x,0px)!important;top:var(--piano-y,0px)!important;width:var(--piano-vw,100dvw)!important;height:var(--piano-vh,100dvh)!important;max-width:none!important;max-height:none!important;min-height:0!important;z-index:1000;grid-template-rows:minmax(0,.65fr) auto minmax(0,1fr);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);margin:0!important;border:0!important;border-radius:0!important;background:#07110b;overflow:hidden}
#module-content .studio-shell .piano-session.is-immersive>.piano-live-roll{box-sizing:border-box;width:100%!important;height:100%!important;min-height:0;max-height:none;object-fit:fill;align-self:stretch;margin:0;border-bottom:1px solid #617044}
#module-content .studio-shell .piano-session.is-immersive>.piano-keyboard-scroll{box-sizing:border-box;width:100%;height:100%!important;min-height:0;max-height:none;padding:0 3px 3px!important;margin:0!important;overflow:hidden;border:0;border-radius:0;align-self:stretch}
#module-content .studio-shell .piano-session.is-immersive .piano-keyboard{box-sizing:border-box;width:100%!important;min-width:0!important;height:100%!important;margin:0}
#module-content .studio-shell .piano-session.is-immersive .piano-key{box-sizing:border-box;height:100%!important;max-height:100%;padding:0!important;margin:0;min-height:0!important;top:0;transform:none;overflow:hidden;transition:filter .06s}
#module-content .studio-shell .piano-session.is-immersive .black-key{height:63%!important}
#module-content .studio-shell .piano-session.is-immersive .piano-key small{display:none}
#module-content .studio-shell .piano-session.is-immersive .piano-note{font:11px/1.2 Roboto,Arial,sans-serif!important;margin-bottom:10px;white-space:nowrap}
body.piano-landscape{overflow:hidden;overscroll-behavior:none}
body.piano-landscape .keyboard-dials{display:none!important}
@media(max-width:700px){#module-content .studio-shell .piano-session:not(.is-immersive) .piano-divider{grid-template-columns:repeat(4,44px) minmax(0,1fr)}#module-content .studio-shell .piano-session:not(.is-immersive) .piano-level{grid-column:span 2}#module-content .studio-shell .piano-session:not(.is-immersive) .piano-level:nth-of-type(2){grid-column:3/6}}
@media(max-width:560px){#module-content .studio-shell .piano-session.is-immersive .piano-divider{grid-template-columns:repeat(4,40px) 94px minmax(64px,1fr) minmax(64px,1fr);gap:3px 4px;padding:4px 6px}#module-content .studio-shell .piano-session.is-immersive .piano-divider>button{width:40px;min-width:40px;max-width:40px;height:40px;min-height:40px!important;max-height:40px}#module-content .studio-shell .piano-session.is-immersive .console-lcd{font-size:10px}}
#module-content .studio-shell .piano-session.is-immersive .black-key .piano-note{font-size:clamp(8px,1.3vw,11px)!important}

/* STUDIO SES stage 2 — isolated audio waveform and recording layout */
#module-content .studio-shell:is([data-studio-view="audio"],[data-studio-view="load"],[data-studio-view="eq"],[data-studio-view="clean"]) .audio-console .audio-source-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-items:stretch}
#module-content .studio-shell .audio-console .audio-source-row>*{box-sizing:border-box;min-width:0;width:100%;min-height:44px!important;height:auto!important;padding:8px 20px 8px 8px!important;font:700 12px/1.35 Roboto,Arial,sans-serif;text-align:center;overflow-wrap:anywhere}
#module-content .studio-shell .audio-console [data-action="record"]{color:#edcb9b;border-color:#896c3f}
#module-content .studio-shell .audio-console [data-action="record"].is-playing{color:#ffecae;border-color:#d9a069}
#module-content .studio-shell .audio-console .audio-record-time{margin:0 0 4px;font:12px/1.3 Orbitron,Arial,sans-serif;color:#f1bf77}
#module-content .studio-shell .audio-console .audio-record-time:empty{display:none}
#module-content .studio-shell .audio-console .audio-wave-shell{min-width:0;margin:10px 0 8px;padding:8px 9px;border:1px solid #425a3f;border-radius:10px;background:linear-gradient(160deg,#182b1e,#07140c);box-shadow:inset 0 1px 2px #b6d88a20,inset 0 -3px 7px #0009}
#module-content .studio-shell .audio-console .audio-waveform{box-sizing:border-box;width:100%;height:76px;display:block;border:1px solid #3a593d;border-radius:6px;touch-action:manipulation;cursor:crosshair}
#module-content .studio-shell .audio-console .audio-timeline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;min-width:0;margin:7px 0 0;color:#b6c99f;font:11px/1.3 Roboto,Arial,sans-serif}
#module-content .studio-shell .audio-console .audio-timeline #audio-seek{width:100%;min-width:0;min-height:34px;touch-action:pan-y;accent-color:#c6da83}
#module-content .studio-shell .audio-console .audio-timeline #audio-position{white-space:nowrap;font:11px/1.3 Orbitron,Arial,sans-serif;color:#d9e9af}
#module-content .studio-shell .audio-console .audio-transport{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
#module-content .studio-shell .audio-console .audio-transport button{min-height:44px!important;height:auto!important;padding:8px 14px 8px 7px!important;font-size:12px}
@media(max-width:680px){#module-content .studio-shell:is([data-studio-view="audio"],[data-studio-view="load"],[data-studio-view="eq"],[data-studio-view="clean"]) .audio-console .audio-source-row{grid-template-columns:repeat(2,minmax(0,1fr))}
#module-content .studio-shell .audio-console .audio-transport{gap:4px}
#module-content .studio-shell .audio-console .audio-transport button{padding:7px 10px 7px 4px!important;min-height:44px!important;font-size:11px}}
@media(max-width:380px){#module-content .studio-shell .audio-console .audio-timeline{grid-template-columns:1fr auto;gap:2px 8px}
#module-content .studio-shell .audio-console .audio-timeline #audio-seek{grid-column:1/-1;grid-row:2}
#module-content .studio-shell .audio-console .audio-timeline #audio-position{grid-column:2;grid-row:1}
#module-content .studio-shell .audio-console .audio-transport button{font-size:10px;padding-right:9px!important}}