/* Cercle des quintes — plein écran, rien ne défile. */
html,body{height:100%;overflow:hidden}

.home-link{
  position:fixed;top:10px;left:12px;z-index:10;
  font-size:13px;color:var(--muted);background:rgba(19,17,13,.7);
  border:1px solid var(--border);border-radius:8px;padding:3px 9px;
}
.home-link:hover{color:var(--amber);text-decoration:none}

/* layout : large = CCAA / CCBB, étroit = CC / AB ; grille verrouillée au viewport */
.grid{
  display:grid;
  gap:8px;
  padding:8px;
  height:100vh;
  height:100dvh;
  grid-template-areas:"C A" "C B";
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
}
@media(max-aspect-ratio:1/1){
  .grid{
    grid-template-areas:"C C" "A B";
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1.5fr) minmax(0,1fr);
  }
}
#zC,#zA,#zB{
  min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
}
#zC{grid-area:C}
#zA{grid-area:A}
#zB{grid-area:B}
/* le svg remplit la largeur et la hauteur de sa cellule */
svg{display:block;width:100%;height:100%}
.node,.pt{cursor:pointer}
.node:hover{opacity:.8}