.piano-panel{background:linear-gradient(145deg,rgba(22,38,62,.96),rgba(17,31,52,.9));border:1px solid var(--line);border-radius:28px;padding:clamp(18px,3vw,30px);box-shadow:0 22px 70px rgba(0,0,0,.22)}.piano-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.piano-toolbar label{display:grid;gap:7px;color:var(--muted);font-size:.84rem;font-weight:750}.piano-toolbar select,.piano-toolbar input{width:100%;background:#0c192b;color:#fff;border:1px solid var(--line);border-radius:11px;padding:10px}.piano-stage{overflow-x:auto;padding:18px 4px 12px}.piano-keyboard{--white-key-width:58px;--white-key-height:220px;--black-key-width:38px;--black-key-height:136px;display:flex;position:relative;width:max-content;min-width:100%;justify-content:center;align-items:flex-start}.piano-key{position:relative;border:1px solid #334155;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 12px;transition:.12s;flex:0 0 auto;box-sizing:border-box}.piano-key.white{width:var(--white-key-width);height:var(--white-key-height);background:linear-gradient(#fff,#dbe4ee);color:#172033;border-radius:0 0 8px 8px;z-index:1}.piano-key.black{width:var(--black-key-width);height:var(--black-key-height);background:linear-gradient(#182233,#05080e);color:#fff;margin-left:calc(var(--black-key-width)/-2);margin-right:calc(var(--black-key-width)/-2);z-index:2;border-radius:0 0 7px 7px}.piano-key span,.piano-key small{display:block;line-height:1}.piano-key span{font-weight:800}.piano-key.is-active{transform:translateY(4px);filter:brightness(.78)}.piano-key small{opacity:.65;font-size:.68rem;margin-top:8px}.piano-builder{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.piano-choice{display:flex;gap:8px;flex-wrap:wrap}.piano-choice button,.piano-chip{border:1px solid var(--line);background:#13243b;color:#fff;border-radius:10px;padding:9px 12px;cursor:pointer}.piano-choice button.is-active{border-color:#8f82ff;background:rgba(124,108,242,.26)}.piano-result{border:1px solid var(--line);border-radius:16px;background:#0b1728;padding:18px}.piano-result strong{font-size:1.7rem}.piano-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.piano-panel .btn,.piano-panel .btn-primary,.piano-panel .btn-secondary{color:#fff}.piano-recent{display:flex;gap:8px;flex-wrap:wrap;min-height:42px}.piano-help{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}@media(max-width:800px){.piano-toolbar{grid-template-columns:1fr 1fr}.piano-builder,.piano-help{grid-template-columns:1fr}.piano-keyboard{--white-key-width:50px;--white-key-height:196px;--black-key-width:32px;--black-key-height:118px}}@media(max-width:520px){.piano-toolbar{grid-template-columns:1fr}.piano-stage{overflow-x:visible;margin-inline:-4px;padding-inline:0}.piano-keyboard{--white-key-width:clamp(38px,calc((100vw - 64px)/8),60px);--white-key-height:clamp(156px,calc(var(--white-key-width)*3.9),208px);--black-key-width:calc(var(--white-key-width)*.62);--black-key-height:calc(var(--white-key-height)*.62);width:100%;min-width:0;justify-content:center}.piano-key.white{font-size:clamp(.8rem,3.8vw,1.05rem)}.piano-key.black{font-size:clamp(.72rem,3.2vw,.95rem)}}