.harmonic-lab{background:linear-gradient(145deg,#253027,#151e18);border:1px solid #a7b69d44;border-radius:14px;margin:32px 0;padding:28px}.harmonic-lab figcaption{letter-spacing:-.025em;color:#eeeee1;font-size:23px;font-weight:600;line-height:1.3}.harmonic-lab>p{font-size:14px}.harmonic-wheel{aspect-ratio:1;background:radial-gradient(circle,#0000 0 39%,#a7b69d18 39% 40%,#0000 40% 59%,#a7b69d18 59% 60%,#0000 60%);border-radius:50%;width:100%;max-width:440px;margin:24px auto;position:relative}.harmonic-key{color:#eeeee1;cursor:pointer;background:#19221b;border:1px solid #a7b69d44;border-radius:50%;place-items:center;width:42px;height:42px;padding:0;font-family:inherit;font-size:12px;font-weight:600;display:grid;position:absolute;transform:translate(-50%,-50%)}.harmonic-key.related{color:#253027;background:#a7b69d;border-color:#c9d6bf}.harmonic-key[aria-pressed=true]{color:#253027;background:#edb94f;border-color:#edb94f;box-shadow:0 0 22px #edb94f22}.harmonic-key:focus-visible{outline-offset:3px;outline:2px solid #eeeee1}.harmonic-centre{color:#eeeee1;text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:39% 31%}.harmonic-centre strong{color:#edb94f;font-size:30px;line-height:1.2}.harmonic-centre span{font-size:12px}.harmonic-result{color:#253027;background:#dbe1cd;border-radius:8px;padding:20px}.harmonic-result strong{font-size:19px}.learn-article .harmonic-result p{color:#253027;margin:8px 0}.harmonic-result span{color:#4c5b48;font-size:12px}.learn-article .harmonic-caption{color:#a7b69d;margin-bottom:0;font-size:12px}.harmonic-takeaway{background:#202b23;border-left:3px solid #edb94f;border-radius:0 8px 8px 0;padding:24px}@media (max-width:480px){.harmonic-lab{padding:16px 10px}.harmonic-key{width:32px;height:32px;font-size:10px}.harmonic-centre strong{font-size:24px}.harmonic-centre span{font-size:10px}.harmonic-result{padding:16px}}.learn-article .harmonic-result strong{color:#253027}