@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400&display=swap');
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--text); font:300 13px/1.7 'JetBrains Mono',monospace; letter-spacing:-.5px; }
main { padding:14px; border:1px solid var(--text); }
h2 { font:400 1.5em/1.7 'Times New Roman',serif; letter-spacing:-.5px; margin:0 0 8px; }
svg { display:block; width:100%; max-width:570px; height:auto; margin:auto; touch-action:pan-y; }
.boundary { fill:none; stroke:var(--text); stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.region-label { font:300 var(--label-size,15px) 'JetBrains Mono',monospace; fill:var(--text); cursor:help; }
.region-label:focus { outline:none; stroke:var(--link-strong); stroke-width:.5; text-decoration:underline; }
.region-label.active { font-weight:400; }
#tooltip { position:fixed; z-index:5; width:max-content; max-width:calc(100vw - 16px); padding:10px 12px; border:1px solid var(--text); background:var(--surface); box-shadow:3px 3px 0 #00000016; font:inherit; }
#tooltip strong { font-weight:300; }
#notation { font:inherit; margin-top:4px; }
[hidden] { display:none!important; }
@media(max-width:420px) { main { padding:10px; } }