.djf-piano-v1 { max-width:980px; margin:18px auto; font-family: Inter, Arial, sans-serif; color:#222; }
.djf-piano-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.djf-piano-header h2 { margin:0; font-size:18px; }
.djf-piano-controls { display:flex; gap:8px; align-items:center; }
.djf-btn { padding:8px 10px; border-radius:6px; border:1px solid #bbb; background:white; cursor:pointer; }
.djf-piano-container { user-select:none; touch-action: manipulation; border-radius:8px; padding:12px; background: linear-gradient(180deg,#fbfbfb,#f3f6f9); box-shadow: 0 6px 18px rgba(20,30,50,0.06); }
.djfp-row { display:flex; position:relative; justify-content:center; align-items:flex-end; padding:6px 0; }

/* white keys */
.djf-key { position:relative; box-sizing:border-box; border:1px solid #d6d6d6; background: #fff; height:160px; width:44px; margin:0 2px; border-radius:6px; display:inline-flex; align-items:flex-end; justify-content:center; font-size:12px; color:#333; cursor:pointer; transition:transform .06s linear, box-shadow .06s linear; }
.djf-key.active { background:#fff7e6; transform: translateY(3px); box-shadow:none; }

/* black keys */
.djf-key.black { position: absolute; width:30px; height:100px; background:#111; color:#fff; border-radius:4px; left:30px; top:0; z-index:2; box-shadow:0 4px 8px rgba(0,0,0,0.35); transform-origin: bottom center; }
.djf-key.black.active { background:#333; transform: translateY(3px); }

/* layout helpers */
.djf-octave { display:flex; position:relative; margin-right:6px; }
.djf-octave .white-container { display:flex; gap:4px; z-index:1; }

/* responsive */
@media (max-width:800px){
  .djf-key { width:36px; height:120px; font-size:11px; }
  .djf-key.black { width:24px; height:80px; left:24px; }
}
.djf-feedback { margin-top:8px; font-size:13px; color:#444; min-height:18px; }
.djf-switch { display:flex; gap:6px; align-items:center; }
.djf-switch input { margin-right:6px; }