#feature-07-container .melody-note{margin:0 0 22px;color:var(--ink-soft);font-family:var(--serif);font-size:1.05rem}
#feature-07-container .melody-controls{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:20px}
#feature-07-container .melody-transport{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#feature-07-container .melody-transport .melody-control{min-width:150px}
#feature-07-container .melody-control{display:grid;gap:5px;color:var(--ink-soft);font-family:var(--mono);font-size:.72rem;text-transform:uppercase}
#feature-07-container select,
#feature-07-container .melody-button{min-height:42px;border:1px solid var(--line);border-radius:4px;background:var(--cream);color:var(--ink);font:inherit;padding:8px 12px}
#feature-07-container .melody-control select{min-width:150px}
#feature-07-container .melody-control input[type="range"]{width:150px;accent-color:var(--tool-c)}
#feature-07-container #melodyBpmValue{font-size:.72rem;text-transform:none}
#feature-07-container .melody-control span{font-size:.72rem;text-transform:none}
#feature-07-container .melody-button{cursor:pointer;font-family:var(--sans);font-weight:600;transition:transform .16s,box-shadow .16s,background .16s}
#feature-07-container .melody-button:active{transform:translateY(1px)}
#feature-07-container .melody-button.btn-play{min-width:150px;border:1px solid transparent;border-radius:12px;padding:14px 24px;background:linear-gradient(135deg,var(--plum),#c86f8b);color:#2a1520;font-size:1rem}
#feature-07-container .melody-button.btn-play:hover{box-shadow:0 14px 32px -10px rgba(213,127,154,.72)}
#feature-07-container .melody-button.btn-play.is-live{background:linear-gradient(135deg,#2b2433,#3a3145);color:var(--cream)}
#feature-07-container .melody-button.btn-ghost{border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);padding:13px 20px}
#feature-07-container .melody-button.btn-ghost:hover{border-color:var(--plum);color:var(--plum)}
#feature-07-container .melody-button:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
#feature-07-container .melody-score-scroll{max-width:100%;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#feature-07-container .melody-svg{display:block;width:100%;height:auto;aspect-ratio:1180 / 260;overflow:visible}
#feature-07-container .melody-staff-line{stroke:var(--line);stroke-width:1}
#feature-07-container .melody-degree-label{fill:var(--ink-soft);font-family:var(--mono);font-size:11px}
#feature-07-container .melody-beat{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5;opacity:.55}
#feature-07-container .melody-beat.is-playing{stroke:var(--tool-c);stroke-width:3;opacity:1}
#feature-07-container .melody-beat-label{fill:var(--ink-soft);font-family:var(--mono);font-size:10px}
#feature-07-container .melody-line{fill:none;stroke:var(--tool-c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#feature-07-container .melody-duration{stroke:var(--tool-c);stroke-width:3;stroke-linecap:round;opacity:.8;pointer-events:none}
#feature-07-container .melody-duration-hit{stroke:transparent;stroke-width:24;stroke-linecap:round;cursor:ew-resize;pointer-events:stroke;touch-action:none}
#feature-07-container .melody-duration-hit:focus-visible{stroke:var(--plum);stroke-width:24;opacity:.2;outline:none}
#feature-07-container .melody-dot{fill:var(--plum);stroke:var(--cream);stroke-width:2;cursor:ns-resize;touch-action:none}
#feature-07-container .melody-dot:hover{fill:var(--tool-c)}
#feature-07-container .melody-dot:focus-visible{outline:none;stroke:var(--tool-c);stroke-width:4}
#feature-07-container .melody-label{fill:var(--ink);font-family:var(--mono);font-size:11px;text-anchor:middle;pointer-events:none}
#feature-07-container .melody-rest{fill:var(--ink-soft);font-family:var(--serif);font-size:25px;text-anchor:middle;cursor:pointer}
#feature-07-container .melody-rest:focus-visible{outline:none;fill:var(--tool-c)}
#feature-07-container .melody-status{min-height:1.5em;margin:14px 0 0;color:var(--ink-soft);font-size:.85rem}
@media(max-width:600px){
  #feature-07-container .melody-controls{align-items:stretch}
  #feature-07-container .melody-transport{flex:1 1 42%}
  #feature-07-container .melody-control{flex:1 1 42%}
  #feature-07-container .melody-button{flex:1 1 42%}
  #feature-07-container .melody-svg{width:100%;height:auto}
}