*{box-sizing:border-box}body{min-width:0}.preview-label{margin:12px auto;color:#546b6b;text-align:center;font-size:14px}header{height:auto;min-height:65px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}#logo2{font-size:16px;cursor:pointer;max-width:420px;height:auto}#session{position:static;margin-left:auto;max-width:100%;display:flex;align-items:center;gap:6px}#shareURL{width:220px;max-width:40vw}.videoBlk{min-width:0;gap:8px}.videoBlk iframe{width:100%;height:auto;aspect-ratio:16/9;min-height:200px;border:0}.video-form{display:flex;gap:6px}.video-form input{width:100%;min-width:0;flex:1;margin:0}.video-form button{flex-shrink:0}.video-status{font-size:14px;line-height:1.4;margin:0}.videoBlk>a{font-size:14px}button,.import-label{cursor:pointer;border:1px solid #94abaa;border-radius:5px;background:#f6faf9;color:#153a39;padding:8px 12px;font:inherit}.preset-panel .app-preset-link{width:100%;text-align:left;display:block;background:white;color:#153a39}.preset-panel ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.preset-panel li{width:auto!important;float:none!important}.preset-panel{position:relative!important;max-height:65vh;overflow:auto;width:100%!important}.preset-panel p{font-size:14px}.preset-panel .app-preset-link strong{font-size:16px}#melody-notebook{max-width:1200px;margin:22px auto;padding:0 16px;color:#183b3b}#melody-notebook summary{cursor:pointer;font-size:21px;background:#e9f2ee;padding:14px;border-radius:8px}.notebook-body{padding:14px;background:#fbfdfb}#melody-count{font-size:15px;margin-left:8px}#melody-live{display:block;width:100%;height:65px}.melody-actions{display:flex;flex-wrap:wrap;gap:8px}.melody-note,#melody-storage{font-size:13px;color:#526561}#melody-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.melody-card{border:1px solid #d2ded7;border-radius:8px;padding:12px;min-width:0;background:white}.melody-card input{width:100%;font:inherit;border:1px solid #aebeb4;padding:6px}.melody-card p{font-size:13px}.melody-card canvas{width:100%;height:100px}.melody-card button{font-size:13px}.import-label input{display:block;max-width:200px;font-size:12px}button:focus-visible,summary:focus-visible,#logo2:focus-visible{outline:3px solid #206d9e;outline-offset:3px}[hidden]{display:none!important}@media(max-width:800px){#melody-list{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-panel ul{grid-template-columns:repeat(2,minmax(0,1fr))}.row{flex-wrap:wrap}header{padding:10px}#session{margin-left:0}.videoBlk{width:100%!important}.mainContent{width:100%;max-width:100%;padding:8px}}@media(max-width:520px){#melody-list,.preset-panel ul{grid-template-columns:1fr}#logo2{max-width:100%;font-size:14px}#shareURL{max-width:65vw}#melody-notebook{padding:0 8px}.row{gap:8px}#keyboardContainer{width:100%;min-width:0}.optionMenu{min-width:0}}
header #logo1{position:static;flex-shrink:0;height:50px;background-size:110px auto;background-position:center;border:0;width:120px}header #logo2{position:static;width:auto;max-width:420px;padding:8px 28px 8px 14px;background-position:right 6px center;line-height:1.4;min-height:39px}header #session{position:static;height:auto;width:auto;max-width:100%;padding:0;border:0}.mobile header{height:auto;padding:10px}.mobile header #logo1{width:100px}.mobile header #logo2{width:auto}.mobile .mainContent{height:auto;overflow:visible}.mobile #session{display:flex}.row>*{min-width:0}.row{margin-right:0}.row>#keyboardContainer{flex:1}#keyboardContainer .mused-button{min-width:0}.mobile .row{margin-right:0}.mobile .row>*{margin-right:0}.mobile #main>.row:first-child{display:block}.mobile .videoBlk{display:flex}.preset-panel{box-sizing:border-box;padding:12px!important}.preset-panel .app-preset-link{height:auto!important;min-height:85px;padding:10px!important}.preset-panel ul{margin:0!important}.preset-panel li{margin:0!important;min-width:0}#melody-notebook{scroll-margin-top:20px}@media(max-width:800px){header #logo2{max-width:calc(100% - 145px)}#keyboardContainer .mused-button{font-size:12px;padding:4px 1px}.row.scaleContainer{gap:8px}.scaleContainer .optionMenu{margin:0}.video-form{flex-wrap:wrap}}@media(max-width:520px){header #session{width:100%}.row>#keyboardContainer{flex-basis:calc(100% - 40px)}#keyboardContainer .mused-button{font-size:10px;padding:4px 0}.row.scaleContainer{width:100%;flex-wrap:wrap}.scaleContainer select{max-width:100%}header #logo2{font-size:12px}.video-form input{flex-basis:100%}}

.sound-status{display:block;font-size:12px;color:#526561;max-width:220px;margin-top:5px}

/* Notebook replay uses the same illuminated key treatment as live playing. */
#keyboardContainer .mused-button.notebook-playing { background-color: #00d1d4; color: #fff; }

.duet-mode {display:flex;align-items:center;gap:.6rem;padding:.6rem 0;font-size:15px;}
.duet-mode select,.duet-controls select {font:inherit;padding:.35rem;max-width:100%;}
.videoBlk.duet-active > :not(.duet-mode):not(.duet-panel) {display:none!important;}
.duet-panel {box-sizing:border-box;width:100%;padding:14px;background:#f7f7ef;color:#24363c;border-radius:8px;}
.duet-panel[hidden] {display:none;}
.duet-panel h3 {margin:0 0 8px;font-size:22px;}
.duet-panel p {font-size:14px;line-height:1.4;margin:8px 0;}
.duet-controls {display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.duet-panel button {padding:9px 12px;background:#234b55;color:#fff;border:0;border-radius:4px;cursor:pointer;}
.duet-panel button:disabled {opacity:.5;cursor:default;}
.duet-panel canvas {display:block;width:100%;height:110px;background:#fff;border-radius:4px;}
.duet-panel .duet-credit {font-size:11px;}
.duet-panel .duet-credit a {color:#245b6b;}

.duet-panel #duet-roll {height:300px;}
.duet-legend {display:flex;justify-content:space-between;}
.duet-legend span:first-child {color:#007880;}
.duet-legend span:last-child {color:#925500;}

#keyboardContainer:focus {outline:2px solid #008f98;outline-offset:5px;}
.return-keyboard {align-self:flex-start;margin:8px 0;padding:8px 12px;cursor:pointer;}

.duet-mode{flex-wrap:wrap}.duet-mode button[aria-pressed="true"]{background:#155b60;color:white;border-color:#155b60}.videoBlk[data-play-mode="play"]>:not(.duet-mode){display:none!important}#videoToggle{display:none!important}#keyboard-labels{font:inherit;max-width:100%;padding:6px}.mused-button{line-height:1.5}

#keyboard-labels{color:#153a39;background:#fff;border:1px solid #94abaa;border-radius:4px}

#language-switch{display:flex;gap:4px;margin-left:8px}#language-switch button{font-size:13px;padding:6px 9px}#language-switch [aria-pressed="true"]{background:#155b60;color:white}html[lang="zh-CN"] .duet-panel{line-height:1.6}
/* A recent-take tray, with the full history and storage tools one action away. */
.melody-card.video-take{background:#edf3fb;border-color:#aac0dd}.take-badge{display:block;font-size:11px;font-weight:bold;color:#244760;margin-bottom:3px}
.melody-tray-nav{display:flex;gap:6px;align-items:center}.melody-tray-nav button{font-size:12px;padding:4px 9px}
#melody-list{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x proximity;padding:4px 2px 8px;margin-top:5px}
#melody-list>.melody-card{flex:0 0 235px;scroll-snap-align:start;padding:7px}#melody-list>.melody-card canvas{height:42px}#melody-list>.melody-card p{margin:3px 0;font-size:11px}#melody-list>.melody-card input{font-size:12px;padding:4px}.melody-card button{padding:4px 7px;font-size:11px}
#melody-notebook:not(.show-history) #melody-live,#melody-notebook:not(.show-history) #melody-storage,#melody-notebook:not(.show-history) .melody-note,#melody-notebook:not(.show-history) .notebook-body>.melody-actions{display:none}
#melody-notebook summary{padding:6px 12px;font-size:16px}.notebook-body{padding:6px 12px}#melody-status{font-size:12px;margin:4px 0}.conversation-actions{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
@media(min-width:900px) and (min-height:600px){body{padding-bottom:260px}#melody-notebook{position:fixed;z-index:50;left:0;right:0;bottom:0;margin:0 auto;width:100%;max-width:1400px;background:#fbfdfb;box-shadow:0 -2px 12px #1232;padding:0 12px}#melody-notebook.show-history{max-height:65vh;overflow:auto}#melody-notebook.show-history #melody-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){#main.mainContent{width:100%;max-width:1400px;padding:12px 24px;display:grid;grid-template-columns:minmax(350px,0.8fr) minmax(560px,1.2fr);gap:12px 20px}#main>.row{margin:0!important;align-self:start}#main>.row:first-child{grid-column:1/-1}#main>.row:nth-child(2){grid-column:1;grid-row:2/5}#main>.row:nth-child(3){grid-column:2;grid-row:2}#main>.row:nth-child(4){grid-column:2;grid-row:3}#main>.row:nth-child(5){grid-column:2;grid-row:4}.videoBlk{width:100%!important}.duet-panel #duet-roll{height:130px}.duet-panel{padding:9px}.duet-panel h3{font-size:18px}.duet-panel p{font-size:12px;margin:5px 0}.duet-mode button,.duet-controls,.duet-panel button{font-size:12px}.duet-mode{padding:0}.duet-panel .duet-credit{font-size:10px}.preview-label{margin:5px auto}#keyboardContainer .mused-button{font-size:12px;padding:5px 1px}}
#melody-list>.melody-card input{height:25px;min-height:0;line-height:17px;margin:0}#melody-list>.melody-card{padding:6px;align-self:start}#melody-list>.melody-card p{line-height:14px;margin:3px 0}#melody-list>.melody-card canvas{height:30px}.melody-card .melody-actions{gap:4px}.melody-card button{line-height:15px;font-size:10px;padding:3px 5px}.take-badge{line-height:14px;margin:0 0 2px}#melody-list{align-items:start}.melody-tray-nav button{line-height:16px}#melody-notebook summary{line-height:20px}
@media(min-width:1100px) and (max-height:850px){.duet-panel #duet-roll{height:90px}.duet-panel>p:first-of-type{margin:3px 0}.duet-panel .duet-credit{line-height:1.2}.duet-controls{gap:5px}.duet-panel button{padding:6px 9px}}

.videoBlk video{display:block;width:100%;max-height:260px;background:#111;aspect-ratio:16/9}.videoBlk .video-form[hidden]{display:none!important}

.duet-choice{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.duet-style-choice{flex-basis:100%}.duet-toggles{display:flex;flex-wrap:wrap;gap:4px}.duet-toggles button[aria-pressed="true"]{background:#165c63;color:#fff;border-color:#165c63;box-shadow:inset 0 -3px 0 #0a3439}.duet-toggles button[aria-pressed="false"]{background:#fff;color:#173b40;border:1px solid #78999d}.duet-toggles button:focus-visible{outline:3px solid #b65c15;outline-offset:2px}

/* Keep attribution available without reserving a footer or a gap above the tray. */
body{padding-bottom:0}header{margin-bottom:8px;gap:8px;padding-top:6px;padding-bottom:6px}.preview-label{display:none}#main.mainContent{margin-bottom:0}#melody-notebook{position:relative;inset:auto;margin:8px auto 0;box-shadow:none}#about-credits{position:relative;font-size:12px;color:#244760;margin:0}#about-credits summary{cursor:pointer;white-space:nowrap;padding:6px 8px;border:1px solid #94abaa;border-radius:5px;list-style:none}#about-credits summary::before{content:'ⓘ ';}#about-credits .credits-content{position:fixed;z-index:100;right:12px;top:72px;width:340px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:white;padding:12px;border:1px solid #94abaa;border-radius:6px;box-shadow:0 4px 18px #1233;line-height:1.5}#about-credits p{margin:0 0 8px}#about-credits p:last-child{margin-bottom:0}#about-credits a{color:#245b6b}@media(max-width:600px){#about-credits .credits-content{left:12px;right:auto}header{padding:8px}}

#keyboard-labels-heading{display:block;font-size:12px;text-transform:uppercase;margin-bottom:4px}#keyboard-labels{display:flex;flex-wrap:wrap;gap:4px;border:0;background:transparent;padding:0}#keyboard-labels button{font:inherit;font-size:12px;padding:7px 9px;white-space:nowrap}#keyboard-labels button[aria-pressed="true"]{background:#165c63;color:white;border-color:#165c63;box-shadow:inset 0 -3px 0 #0a3439}#keyboard-labels button:focus-visible{outline:3px solid #b65c15;outline-offset:2px}

/* Shared Song Studio / Loop Lab palette; pitch controls and voice colors retained. */
:root{--aq-ink:#253930;--aq-green:#365e48;--aq-paper:#fffef9;--aq-surface:#f0f3e9;--aq-line:#dce0d5;--aq-selected:#d7ebae}body{background:#f7f7f0;color:var(--aq-ink)}header{background:var(--aq-paper);border-color:var(--aq-line)}#main.mainContent{background:var(--aq-surface)}.duet-panel{background:#eaf0e5;color:var(--aq-ink)}#melody-notebook,.notebook-body{background:var(--aq-paper);color:var(--aq-ink)}#melody-notebook summary{background:#e3ebdd}.melody-card{background:var(--aq-paper);border-color:var(--aq-line)}button,.import-label,.duet-panel button,#keyboard-labels button,.duet-toggles button[aria-pressed="false"]{background:var(--aq-paper);color:var(--aq-ink);border:1px solid #a5b6a3}button:hover:not(:disabled),.duet-panel button:hover:not(:disabled){background:#eaf0df;border-color:#8da480}.duet-mode button[aria-pressed="true"],.duet-toggles button[aria-pressed="true"],#keyboard-labels button[aria-pressed="true"],#language-switch [aria-pressed="true"]{background:var(--aq-selected);color:var(--aq-ink);border-color:var(--aq-green);box-shadow:inset 0 -3px 0 var(--aq-green)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b65c15;outline-offset:3px}.melody-card.video-take{background:#edf3fb;border-color:#aac0dd}#about-credits .credits-content{background:var(--aq-paper);color:var(--aq-ink)}#backing-controls{display:grid;gap:7px;padding:8px 0}#backing-controls>label{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:12px}#backing-controls input[type="range"]{width:130px;max-width:100%;accent-color:var(--aq-green)}#backing-beat{font-variant-numeric:tabular-nums;font-size:12px}
@media(pointer:coarse),(min-width:600px) and (max-width:1099px){#keyboard-labels button,.duet-mode button,.duet-panel button,#backing-controls input[type="range"],#language-switch button,.melody-actions button,.melody-tray-nav button{min-height:44px;min-width:44px}#keyboardContainer .mused-button{min-height:44px}.duet-toggles{gap:6px}#backing-controls input[type="range"]{width:160px}}
/* Tablet landscape keeps performance keys beside backing controls. */
@media(min-width:900px) and (max-width:1099px) and (orientation:landscape){#main.mainContent{width:100%;max-width:100%;padding:10px 12px;display:grid;grid-template-columns:minmax(320px,.8fr) minmax(480px,1.2fr);gap:10px 12px}#main>.row{margin:0!important;align-self:start;width:auto!important}#main>.row:first-child{grid-column:1/-1}#main>.row:nth-child(2){grid-column:1;grid-row:2/5}#main>.row:nth-child(3){grid-column:2;grid-row:2}#main>.row:nth-child(4){grid-column:2;grid-row:3}#main>.row:nth-child(5){grid-column:2;grid-row:4}.videoBlk{width:100%!important}.duet-panel{padding:8px;max-height:calc(100dvh - 130px);overflow:auto}.duet-panel #duet-roll{height:90px}.duet-panel h3{font-size:18px}.duet-panel p{font-size:12px;margin:5px 0}.duet-panel button{font-size:12px;padding:6px}.duet-mode{padding:0;gap:4px}.duet-mode button{font-size:12px;padding:6px}#keyboardContainer .mused-button{font-size:12px;padding:4px 0}.scaleContainer{gap:5px}.scaleContainer .optionMenu{margin-right:5px!important}}
@media(min-width:600px) and (max-width:899px){#main.mainContent{display:flex;flex-direction:column;gap:8px}#main>.row{margin:0!important;width:100%}#main>.row:first-child{order:0}#main>.row:nth-child(2){order:4}#main>.row:nth-child(3){order:1}#main>.row:nth-child(4){order:2}#main>.row:nth-child(5){order:3}.duet-panel #duet-roll{height:90px}.duet-panel{padding:10px}.duet-panel h3{font-size:18px}.duet-panel p{font-size:12px;margin:5px 0}#backing-controls{grid-template-columns:1fr 1fr}#backing-controls>p,#backing-controls>.duet-choice{grid-column:1/-1}}
.duet-panel:has(#backing-controls:not([hidden])) #duet-roll{height:75px}
#synthMenu{background-color:var(--aq-green);color:#fff;border-radius:5px}#keyboardContainer .mused-button:not(.triggered):not(.notebook-playing){background-color:var(--aq-paper);color:var(--aq-ink);border-color:#a5b6a3}#keyboardContainer .mused-button.triggered,#keyboardContainer .mused-button.notebook-playing{color:var(--aq-ink)}

/* Consistent header controls and compact demo chooser. */
header #session{gap:8px;font-size:14px;line-height:1.2;min-width:0}header #shareURL,header #copy-shareURL,#about-credits summary,#language-switch button{height:44px;min-height:44px;box-sizing:border-box;border-radius:6px;font-size:14px;line-height:20px;margin:0}header #shareURL{padding:10px 12px;width:220px;min-width:0;border:1px solid #a5b6a3;color:var(--aq-ink)}header #copy-shareURL{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;padding:10px}#copy-shareURL img{width:20px;height:20px;object-fit:contain}#about-credits summary{display:flex;align-items:center;padding:10px 12px;color:var(--aq-ink)}#language-switch{gap:8px;margin:0;align-items:center}#language-switch button{padding:10px 14px;white-space:nowrap}header #logo2{min-height:44px;display:flex;align-items:center}header{column-gap:10px;row-gap:8px}
.preset-panel{max-width:780px!important;margin:0!important;border-radius:10px!important;padding:12px!important}.preset-panel h2{font-size:18px;line-height:1.3;margin:0 0 10px}.preset-panel ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.preset-panel .app-preset-link{display:flex;align-items:center;gap:12px;min-height:100px;padding:10px!important;border-radius:7px}.preset-panel .app-preset-link strong{display:block;font-size:14px;line-height:1.3}.preset-panel .app-preset-link p{font-size:12px;line-height:1.4;margin:6px 0 0}.preset-copy{min-width:0}.preset-preview{position:relative;display:block;width:112px;flex:0 0 112px;aspect-ratio:16/9;overflow:hidden;background:#365e48;border-radius:5px}.preset-thumbnail{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.preset-play{position:absolute;inset:0;display:grid;place-items:center;color:white;text-shadow:0 1px 4px #000;font-size:20px;pointer-events:none}
@media(max-width:600px){.preset-panel ul{grid-template-columns:1fr}header #session{width:100%}header #shareURL{flex:1;width:0;max-width:none}#about-credits summary,#language-switch button{font-size:13px;padding-left:10px;padding-right:10px}}
.preset-panel{top:auto;left:auto}.preset-panel img.preset-thumbnail{padding:0}@media(max-width:600px){.preset-preview{width:96px;flex-basis:96px}}
/* Theory-inspired rounded keys; retain original mappings and input handlers. */
#keyboardContainer .mused-button{border-radius:14px;border-color:#a5b6a3;min-height:48px;box-shadow:0 2px 0 #dce0d5;line-height:1.2}#keyboardContainer .theory-key{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;gap:3px}#keyboardContainer .theory-key::after{content:attr(data-secondary);font-size:10px;line-height:1;color:#536557;pointer-events:none}.mobile #keyboardContainer .theory-key{min-height:54px}.mobile #keyboardContainer .theory-key::after{display:none}#keyboardContainer .mused-button.disabled{opacity:.55;box-shadow:none}.videoBlk[data-play-mode="play"]>.note-explorer{display:block!important}.videoBlk:not([data-play-mode="play"])>.note-explorer{display:none!important}.note-explorer{padding:8px 0;max-width:100%;color:var(--aq-ink)}.note-view-controls,.wheel-order{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.note-explorer button{min-height:36px;font-size:12px}.note-view-controls>span{font-size:12px}.note-explorer [aria-pressed="true"]{background:var(--aq-selected);border-color:var(--aq-green);box-shadow:inset 0 -3px var(--aq-green)}.wheel-order{margin-top:8px}.note-view-image{display:block;width:100%;max-width:330px;max-height:270px;margin:8px auto 0;overflow:visible}.note-view-help{font-size:12px;margin:5px 0;text-align:center}@media(pointer:coarse),(max-width:1099px){.note-explorer button{min-height:44px}.note-view-image{max-height:230px}}@media(max-width:600px){#keyboardContainer .theory-key{font-size:12px}#keyboardContainer .theory-key::after{font-size:8px}}
#keyboardContainer .mused-button-grid{height:auto}#keyboardContainer .mused-button-row{flex:none;min-height:50px}.mobile #keyboardContainer .mused-button-row{min-height:56px}.key-main{display:inline;white-space:nowrap}
/* One UI type family and rhythm; music glyphs remain rendered by the notation engine. */
:root{--aq-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}html,body,button,input,select,textarea,summary,label,.optionMenu,.key-main,.accidental,.note-explorer,.note-explorer svg text{font-family:var(--aq-font)!important}body{font-size:14px;line-height:1.4}button,input,select,summary{font-size:14px}.optionMenu>label,.optionMenu>span:first-child{font-size:12px;line-height:1.3;letter-spacing:.025em;font-weight:600;text-transform:none!important;display:block;margin-bottom:5px}.optionMenu select,#root-note-menu,#root-octave-menu{height:44px;min-height:44px;border:1px solid #a5b6a3!important;border-radius:10px!important;background-color:var(--aq-paper)!important;color:var(--aq-ink)!important;font-size:15px!important;line-height:1.2!important;padding:8px 30px 8px 12px!important;box-shadow:0 1px 2px #25393012}.scaleContainer{align-items:end;gap:10px;margin:0}.scaleContainer .optionMenu{margin:0!important;flex:1}#scaleTypeMenu{min-width:100px;width:100%}#scaleMenu{min-width:150px;width:100%}#root-picker-container{display:flex;align-items:end;gap:10px;flex:0 0 auto;padding:0!important;margin:0!important}#root-picker-container .optionMenu{margin:0!important}#root-note-menu{width:88px}#root-octave-menu{width:80px}.row:has(>.scaleContainer){gap:10px;align-items:end;flex-wrap:wrap}#keyboardContainer .theory-key{font-size:18px;min-height:56px;gap:4px;border-radius:18px}#keyboardContainer .theory-key::after{font:500 11px/1 var(--aq-font);color:#536557}#keyboardContainer .mused-button-row{min-height:58px}#keyboardContainer .mused-button{margin:2px;box-shadow:0 2px 0 #dce0d5}.mobile #keyboardContainer .theory-key{font-size:18px;min-height:54px}.key-main .accidental{font-size:1em!important;vertical-align:baseline!important}.theory-display{width:100%;max-width:360px;margin:8px auto;min-height:260px;display:flex;align-items:center;justify-content:center}.theory-display>svg{display:block;max-width:100%;height:auto;overflow:visible}.note-view-controls{gap:8px}.note-explorer button{min-height:40px;font-size:14px}.note-view-help{font-size:13px}.note-explorer{padding-top:12px}.scale-wheel .pitch-slice path{fill:#edf0e8;stroke:#fffef9;stroke-width:3}.scale-wheel .pitch-slice.perfect path{fill:#a732b2}.scale-wheel .pitch-slice.minor path,.scale-wheel .pitch-slice.diminished path{fill:#3b9afc}.scale-wheel .pitch-slice.major path,.scale-wheel .pitch-slice.augmented path{fill:#78cf27}.scale-wheel .pitch-slice.active .pitch-shape{fill:#e06839}.scale-wheel .active-pitches path{stroke:#ff850d;stroke-width:5}.scale-wheel .active-pitches .polygon{fill:rgba(255,133,13,.35)}.scale-wheel .pitch-slice.active,.scale-wheel .pitch-slice.perfect,.scale-wheel .pitch-slice.major,.scale-wheel .pitch-slice.minor,.scale-wheel .pitch-slice.augmented,.scale-wheel .pitch-slice.diminished{color:#fff}.scale-wheel foreignObject{font-family:var(--aq-font)}
@media(min-width:1200px){#main.mainContent{max-width:1540px;grid-template-columns:minmax(270px,.55fr) minmax(760px,1.45fr);gap:14px 24px}#keyboardContainer .mused-button{padding:5px 2px}#main>.row:nth-child(5){align-self:start}}
@media(min-width:900px) and (max-width:1199px){body:not(.mobile) #main.mainContent{grid-template-columns:1fr}body:not(.mobile) #main>.row{grid-column:1!important;grid-row:auto!important}body:not(.mobile) #main>.row:nth-child(2){width:100%}body:not(.mobile) .note-explorer{display:grid!important;grid-template-columns:auto 1fr;align-items:center}body:not(.mobile) .theory-display{grid-column:2;grid-row:1/4;min-height:230px;max-width:300px}body:not(.mobile) .videoBlk:not([data-play-mode="play"])>.note-explorer{display:none!important}}
@media(pointer:coarse),(max-width:1099px){.note-explorer button{min-height:44px}.optionMenu select{font-size:14px!important}.mobile #main>.row:has(>.scaleContainer){gap:6px}#root-picker-container{gap:6px}.theory-display{min-height:230px;max-width:320px}}
@media(max-width:599px){.scaleContainer{flex:1 1 100%;gap:8px}#root-picker-container{width:100%;justify-content:stretch}#root-picker-container .optionMenu{flex:1}#root-note-menu,#root-octave-menu{width:100%}body:not(.mobile) #keyboardContainer .theory-key{font-size:13px;min-height:50px}.mobile #keyboardContainer .theory-key{font-size:15px}#keyboardContainer .mused-button{margin:1px}.theory-display{max-width:300px}}

@media(min-width:600px){.row:has(>.scaleContainer)>.scaleContainer{flex:1;min-width:280px}#scaleMenu{min-width:190px}}

/* Melody AI: separate mode, reply choices, live feedback and saved actions. */
.duet-mode {
  gap: 8px;
  padding: 0;
  margin: 0 0 12px;
}
.duet-mode button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.3;
}
.duet-panel {
  container-type: inline-size;
  container-name: melody-ai;
  padding: 16px;
  border: 1px solid var(--aq-line);
  border-radius: 12px;
}
.duet-panel h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
}
.duet-transport {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
.duet-transport button:disabled { display: none; }
.duet-panel button {
  min-height: 44px;
  border-radius: 8px;
  line-height: 1.35;
}
.duet-transport button {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}
.duet-panel h3 + p,
.duet-panel > p:first-of-type {
  margin: 10px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #536557;
}
.duet-panel > .duet-controls { gap: 0; margin: 0; }
.duet-panel .duet-style-choice { display: block; width: 100%; }
.duet-panel #duet-style-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #536557;
}
.duet-panel #duet-style {
  display: grid;
  /* Size by available panel width, including the narrow desktop sidebar. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
}
.duet-panel #duet-style button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.duet-panel #duet-status {
  margin: 14px 0 12px;
  padding: 8px 10px;
  border-left: 3px solid #8da480;
  border-radius: 0 6px 6px 0;
  background: #fffef980;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.duet-panel > .duet-legend {
  gap: 12px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.duet-panel > .duet-legend span { min-width: 0; }
.duet-panel #duet-roll {
  height: clamp(90px, 16vh, 150px);
  border: 1px solid #d5dfd4;
  border-radius: 8px;
}
.duet-panel > .conversation-actions {
  gap: 8px;
  margin: 12px 0 0;
}
.duet-panel > .conversation-actions button {
  max-width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  white-space: normal;
}
.duet-options {
  margin-top: 14px;
  border-top: 1px solid #cbd5c6;
  padding-top: 6px;
}
.duet-options summary {
  cursor: pointer;
  min-height: 44px;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}
.duet-options[open] > :not(summary) { margin-top: 12px; }
.duet-options > .duet-choice { gap: 8px; }
.duet-options > button {
  margin-right: 6px;
  padding: 8px 10px;
  font-size: 13px;
}

@container melody-ai (min-width: 420px) {
  .duet-panel #duet-style { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container melody-ai (max-width: 235px) {
  .duet-panel #duet-style { grid-template-columns: 1fr; }
}
/* Keep language choice at the right edge of the first header row on phones. */
@media(max-width:600px){header #language-switch{order:1;margin-left:auto}header #logo2{order:2}header #session{order:3}header #about-credits{order:4}}

/* Mode labels complement pastel colors so archives remain distinguishable without color. */
#melody-list>.melody-card.play-take{background:#f1f6e9;border-color:#c4d2b6}#melody-list>.melody-card.video-take{background:#edf3fc;border-color:#b8cce5}#melody-list>.melody-card.ai-take{background:#f5eefb;border-color:#d4c1e6}.play-take .take-badge{color:#3d603c}.video-take .take-badge{color:#345d88}.ai-take .take-badge{color:#704995}

.duet-more-styles{grid-column:1/-1}.duet-more-styles summary{font-size:12px;cursor:pointer;padding:6px 0}.duet-extra-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.duet-panel .duet-save-hint{font-size:11px;margin:5px 0;color:#526561}.duet-panel>.conversation-actions:empty{display:none}@media(pointer:coarse),(max-width:1099px){.duet-more-styles summary{min-height:44px;display:flex;align-items:center}}
/* Three short primary choices; secondary styles remain disclosed below. */
.duet-panel #duet-style{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.duet-panel #duet-style button{font-size:12px;padding:7px 3px}.duet-panel>.conversation-actions:empty{display:none}.duet-panel .duet-save-hint{margin:5px 0;font-size:11px}