/* Keep the keyboard, fourteen chords and their mirror arcs in one desktop view. */
:root{--nh-title:#8155d9}
:root[data-theme="dark"]{--nh-title:#b99aff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--nh-title:#b99aff}}
.harmony-piano h1{color:var(--nh-title);font-weight:700;letter-spacing:1px}
/* Piano pitches ascend physically left to right in both page languages. */
.harmony-piano .piano,.harmony-piano .chords-row,.harmony-piano .octave-labels{direction:ltr}
body.harmony-piano .harmony-switchbar{height:48px;padding:6px 60px}
body.harmony-piano .harmony-switchbar a{min-height:34px;padding:5px 12px;font-size:12px;border-radius:10px}
body.harmony-piano #spec-btn,body.harmony-piano #mms-home-fab{top:6px!important}
body.harmony-piano #spec-btn{z-index:2000;width:38px;height:38px;min-width:38px;padding:0 8px}
body.harmony-piano .spec-btn-label{display:none}
body.harmony-piano .spec-pop{z-index:2001;top:52px;max-height:calc(100dvh - 66px);overflow:auto}
.nh-info{position:relative}
.nh-info summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 11px;border:1px solid var(--select-border);border-radius:7px;background:var(--select-bg);color:var(--select-text);font-size:13px;cursor:pointer;list-style:none}
.nh-info summary::-webkit-details-marker{display:none}
.nh-info summary:focus-visible,.nh-info-close:focus-visible{outline:2px solid #ffb050;outline-offset:2px}
.nh-help-icon{display:grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;font-weight:700}
body.harmony-piano .nh-info .info-box{position:fixed;top:100px;right:18px;z-index:50;width:min(530px,calc(100vw - 36px));max-height:calc(100dvh - 118px);overflow:auto;margin:0;padding:14px 18px;border:1px solid var(--select-border);border-inline-start:4px solid #ffb050;background:var(--select-bg);color:var(--text-main);box-shadow:0 12px 35px #0005;font-size:13px;line-height:1.65}
.nh-info-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--select-border);background:var(--select-bg)}
.nh-info-close{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;min-height:34px;font-size:12px}
.nh-info-close span{font:22px/1 Arial,sans-serif}
@media(min-width:900px) and (min-height:600px){
  body.harmony-piano{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:6px;height:100dvh;min-height:0;padding:56px 60px 6px!important;overflow:hidden}
  .harmony-piano h1{font-size:24px;line-height:1.2;margin:0}
  .harmony-piano .subtitle{margin:0;font-size:11px;line-height:1.3}
  .harmony-piano .controls{margin:0;gap:8px;flex-wrap:nowrap}
  .harmony-piano .control-group{padding:4px 8px;gap:8px}
  .harmony-piano .control-group label{font-size:12px}
  .harmony-piano select,.harmony-piano .control-group button{padding:6px 10px;font-size:12px;min-height:32px}
  .harmony-piano .display-container{display:grid;grid-template-rows:auto minmax(110px,1fr) auto minmax(80px,1fr) auto;gap:6px;width:100%;max-width:1600px;min-height:0;margin:0 auto}
  .harmony-piano .octave-labels{margin:0;gap:12px}
  .harmony-piano .octave-label{padding:2px;font-size:11px}
  .harmony-piano .piano{height:100%;min-height:0;box-shadow:0 7px 20px #0005}
  .harmony-piano .white-key{padding-bottom:6px}
  .harmony-piano .chords-row{margin:0;padding:5px 4px 0;gap:3px;min-width:0}
  .harmony-piano .chord{padding:5px 2px;min-width:0}
  .harmony-piano .chord-name{font-size:14px}
  .harmony-piano .chord-roman{font-size:10px}
  .harmony-piano .arcs-container{height:100%;min-height:0;margin:0}
  .harmony-piano .legend{margin:0;font-size:11px;line-height:1.3}
  .harmony-piano footer[data-cr-footer]{margin:0!important;padding:3px 8px!important;font-size:10px!important;line-height:1.3!important}
}
@media(max-width:899px),(max-height:599px){
  body.harmony-piano{padding-top:60px!important}
  .harmony-piano h1{font-size:22px}
  .harmony-piano .subtitle{margin-bottom:12px}
  .harmony-piano .controls{margin-bottom:14px;gap:8px}
  .harmony-piano .display-container{max-width:100%}
  .harmony-piano .control-group{padding:5px 8px}
  .harmony-piano .control-group button,.harmony-piano .control-group select{min-height:40px}
  .harmony-piano .nh-info summary{min-height:40px}
  body.harmony-piano .harmony-switchbar a{max-width:100%;font-size:11px;padding:4px 8px;gap:5px}
}