.split-panel{width:100%;max-width:1100px;display:grid;grid-template-columns:minmax(380px,1fr) 1.2fr;gap:24px}@media(max-width:768px){.split-panel{grid-template-columns:1fr}}.panel-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}.card-header{color:#fff;font-size:14px;font-weight:600;border-bottom:1px solid var(--border);padding-bottom:10px}.control-group{display:flex;flex-direction:column;gap:6px}.control-group label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase}select,input{background:var(--bg3);border:1px solid var(--border);color:#fff;padding:10px;border-radius:var(--r);outline:none}select:focus,input:focus{border-color:var(--accent)}.freq-result{font-size:48px;font-weight:800;color:var(--accent);text-align:center;margin:20px 0}.piano{display:flex;justify-content:center;background:#000;padding:8px;border-radius:8px;border:1px solid var(--border)}.key{height:120px;width:30px;background:#fff;margin:2px;cursor:pointer;border-radius:0 0 3px 3px;position:relative}.key.black{height:75px;width:20px;background:#222;margin-left:-12px;margin-right:-12px;z-index:2}.key:hover{background:#e2e2e2}.key.black:hover{background:#333}.key.active{background:var(--accent)}