.fifth-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:24px;align-items:start;margin:20px 0}
.fifth-wheel{aspect-ratio:1;position:relative;width:min(100%,540px);margin:auto;border-radius:50%;background:radial-gradient(circle closest-side,#fff 0 35%,#e8f0fa 35.2% 66%,#d3e3f5 66.2% 99%,#a4bdd7 99.2%);border:1px solid #9eb8d5}
.fifth-key{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #7895b6;background:#fff;color:#173b68;font:700 clamp(12px,2.8vw,18px) system-ui;width:12%;aspect-ratio:1;padding:0;cursor:pointer}
.fifth-key.minor{width:11%;font-size:clamp(10px,2.5vw,15px);background:#eff6ff}
.fifth-key[aria-pressed=true]{background:#183b68;color:white;border-color:#183b68}
.fifth-key:focus-visible,.fifth-panel button:focus-visible{outline:3px solid #ae641c;outline-offset:2px}
.fifth-panel{background:#f2f7fd;border:1px solid #c4d6eb;border-radius:6px;padding:18px;color:#183b68}
.fifth-panel h2{margin:0 0 12px;font-size:28px}.fifth-panel dt{font-weight:750}.fifth-panel dd{margin:0 0 12px;overflow-wrap:anywhere}
.fifth-panel button{font:inherit;font-weight:700;padding:9px 12px;background:#183b68;color:white;border:0;border-radius:5px;margin:3px 4px 3px 0;cursor:pointer}
.fifth-panel button[hidden]{display:none}
.fifth-notes{font-size:18px;font-weight:700}
@media(max-width:720px){.fifth-layout{grid-template-columns:1fr;gap:16px}.fifth-wheel{width:min(100%,430px)}}
.fifth-wheel{container-type:inline-size;background:radial-gradient(circle,#fff 0 29%,#edf4fc 29.2% 54%,#d3e3f5 54.2% 77%,#f4f8fc 77.2%)}
.fifth-staff{position:absolute;width:12%;height:auto;transform:translate(-50%,-50%);overflow:visible;color:#173b68;pointer-events:none}
.fifth-staff image{mix-blend-mode:multiply}
.fifth-staff text{font:17px serif;fill:currentColor}
.fifth-key{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;width:11%;font-size:clamp(11px,3.5cqw,18px)}
.fifth-key.minor{width:10%;font-size:clamp(10px,3cqw,15px)}
.fifth-numeral{font-size:clamp(9px,2.5cqw,12px);margin-top:2px;color:#315d87}
.fifth-key[aria-pressed=true] .fifth-numeral{color:#dcecff}