.melody-dialog278 { width:min(1100px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid #b6c6ba70; border-radius:24px; color:#f6f1df; background:linear-gradient(135deg,#142e37,#262942); box-shadow:0 25px 100px #0008; }
.melody-dialog278::backdrop { background:#061423cc; backdrop-filter:blur(9px); }
.melody-dialog278 * { box-sizing:border-box; }
.melody-head278 { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid #ffffff24; position:sticky; top:0; z-index:5; background:#18303d; }
.melody-head278 h2 { margin:4px 0; font-size:clamp(1.4rem,3vw,2rem); }
.melody-eyebrow278 { margin:0; color:#d7c794; letter-spacing:.14em; font-size:.65rem; }
.melody-dialog278 button { border:1px solid #abc8d357; border-radius:12px; background:#244354; color:#f4edda; font:inherit; padding:10px 14px; min-height:44px; cursor:pointer; }
.melody-dialog278 button:disabled { opacity:.5; cursor:default; }
.melody-dialog278 button:focus-visible { outline:3px solid #ffe7a4; outline-offset:3px; }
.melody-body278 { padding:18px 24px 24px; }
.melody-tabs278 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.melody-tabs278 button[aria-pressed=true] { color:#172c32; background:#e2c995; }
.melody-instruction278 { text-align:center; color:#ccdce1; line-height:1.5; }
.melody-layout278 { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr); gap:24px; align-items:center; }
.melody-stage278 { position:relative; min-height:300px; display:grid; place-items:center; isolation:isolate; overflow:hidden; border-radius:28px; background:radial-gradient(ellipse,#72819d29,transparent 65%); }
.melody-art278 { max-width:95%; width:100%; height:320px; object-fit:contain; z-index:1; filter:drop-shadow(0 12px 20px #030f2150); }
.melody-art-pending278 { max-width:240px; text-align:center; color:#bed1d8; }
.melody-glow278 { position:absolute; width:180px; height:180px; border-radius:50%; border:2px solid var(--note-glow,#b3dacf); opacity:0; z-index:0; }
.pluck278 .melody-glow278 { animation:melodyPulse278 .5s ease-out; }
.pluck278 .melody-art278 { animation:melodyPluck278 .35s ease-out; }
.melody-win278 { box-shadow:inset 0 0 70px #e9d79a20; }
.melody-note-orb278 { position:absolute; top:55%; font-size:46px; z-index:3; pointer-events:none; animation:melodyNoteArc278 .9s ease-out forwards; text-shadow:0 0 18px currentColor; }
.melody-controls278 h3 { font-size:1.35rem; margin:8px 0; color:#f2dca4; }
.melody-controls278 p { line-height:1.5; }
.melody-muted278 { color:#bed5dc; font-size:.85rem; }
.melody-tools278 { display:flex; gap:6px; flex-wrap:wrap; }
.melody-tools278 button { font-size:.8rem; }
.melody-tools278 button[aria-pressed=true] { background:#527b72; }
.melody-progress278 { display:flex; gap:7px; margin:10px 0; flex-wrap:wrap; }
.melody-phrase-heading278 { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 0; }
.melody-phrase-heading278 h4 { margin:0; }
.melody-progress278 span { width:38px; height:38px; display:grid; place-items:center; border:1px solid #b0c7d658; border-radius:50%; color:#c8dce1; background:#172e3a; }
.melody-progress278 .is-played278 { background:#e0ca99; color:#203137; }
.melody-feedback278 { min-height:3em; color:#f3dca6; }
.melody-keys278 { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-top:16px; position:sticky; bottom:0; z-index:4; background:#192f3b; padding:8px 0; }
.melody-keys278 .melody-key278 { color:#172d39; background:var(--key-color); min-height:78px; border:1px solid #fff6; box-shadow:inset 0 -5px 0 #0002,0 5px 14px #0002; }
.melody-key278 small,.melody-key278 strong { display:block; }
.melody-key278 strong { font-size:1.2rem; }
.melody-key278.is-sounding278 { transform:translateY(3px); filter:brightness(1.25); box-shadow:0 0 24px var(--key-color); }
@keyframes melodyPulse278 { from{transform:scale(.7);opacity:.65} to{transform:scale(2.5);opacity:0} }
@keyframes melodyPluck278 { 0%,100%{transform:rotate(0)} 30%{transform:rotate(.7deg)} 65%{transform:rotate(-.4deg)} }
@keyframes melodyNoteArc278 { from{opacity:0;transform:translateY(15px) scale(.6)} 25%{opacity:1} to{opacity:0;transform:translateY(-110px) scale(1.2) rotate(12deg)} }
@media(max-width:620px) {
  .melody-head278 { padding:12px 16px; }
  .melody-body278 { padding:12px; }
  .melody-tabs278 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .melody-tabs278 button { padding:8px; font-size:.8rem; }
  .melody-layout278 { grid-template-columns:1fr; gap:8px; }
  .melody-stage278 { min-height:170px; }
  .melody-art278 { height:200px; }
  .melody-controls278 h3 { margin-top:0; }
  .melody-keys278 { gap:4px; position:sticky; bottom:0; z-index:4; background:#192f3b; padding:8px 0; }
  .melody-keys278 .melody-key278 { padding:6px 0; min-height:60px; }
  .melody-key278 strong { font-size:.9rem; }
}
@media(max-height:500px) and (min-width:621px) {
  .melody-head278 { padding:6px 16px; }
  .melody-head278 h2 { font-size:1.25rem; margin:2px 0; }
  .melody-body278 { padding:10px 16px; }
  .melody-tabs278 button { padding:6px 10px; min-height:36px; }
  .melody-instruction278 { margin:8px 0; font-size:.85rem; }
  .melody-layout278 { align-items:start; gap:14px; }
  .melody-stage278 { min-height:130px; }
  .melody-art278 { height:130px; }
  .melody-controls278 h3 { margin:0 0 6px; font-size:1.05rem; }
  .melody-controls278 p { margin:6px 0; }
  .melody-keys278 .melody-key278 { min-height:52px; padding:5px; }
}
@media(prefers-reduced-motion:reduce) { .pluck278 .melody-glow278,.pluck278 .melody-art278,.melody-note-orb278{animation:none} .melody-key278.is-sounding278{transform:none} }