.demo-layout{gap:65px}.demo-steps{padding-left:20px;color:var(--muted);font-size:.95rem;margin-block:24px}.demo-steps li{padding:5px 0}.fretboard-demo{background:linear-gradient(140deg,#252a22,#12160f);border-radius:28px;padding:30px;color:#f7f6f0;border:1px solid #9d8e6250;box-shadow:0 24px 65px #18201c16;min-width:0}.demo-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:.8rem;font-weight:700;color:#e5c67c}.demo-choices{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.demo-choices button{min-height:46px;padding:10px 17px;border:1px solid #ffffff55;border-radius:999px;background:transparent;color:#ebeee2;font-weight:650;font-size:.85rem}.demo-choices button[aria-pressed=true]{background:var(--gold);color:#172014;border-color:var(--gold)}.demo-note{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px}.demo-note strong{font:500 3.3rem/1 Georgia,serif;color:var(--gold)}.demo-note span{font-size:.9rem;color:#d6decb}.demo-board{width:100%;height:auto;display:block;margin-top:20px}.demo-caption{font-size:.65rem;text-align:center;color:#c6cabc;line-height:1.6}.demo-controls{display:flex;gap:17px;align-items:center;flex-wrap:wrap;margin-top:25px}.demo-stop{border:1px solid #ffffff70;border-radius:999px;background:transparent;color:#f7f6f0;padding:12px 17px;min-height:46px;font-size:.85rem}.demo-stop:disabled{color:#a4aa9f;border-color:#ffffff30;cursor:default}.fretboard-demo .button:disabled{opacity:.75;transform:none;cursor:default}.demo-status{min-height:3.3em;margin:18px 0 14px;color:#d2d9cb;font-size:.78rem;line-height:1.65}.demo-credit{font-size:.65rem;line-height:1.6;color:#c8cfbc}.fretboard-demo :focus-visible{outline-color:#f1c361}.demo-layout .text-link{margin-top:8px}@media(max-width:820px){.demo-layout{gap:35px}}@media(max-width:480px){.fretboard-demo{padding:22px 18px;border-radius:22px}.demo-choices{gap:8px}.demo-choices button{padding-inline:13px;font-size:.78rem}.demo-note strong{font-size:2.8rem}.demo-note span{font-size:.8rem}.demo-controls{gap:12px}.demo-controls .button{padding-inline:18px;font-size:.83rem}.demo-heading{font-size:.76rem}}