.memory-fifths-layout{display:grid;grid-template-columns:minmax(410px,1fr) minmax(0,1fr);gap:30px;align-items:start;margin:18px 0 28px}
.fifths-wheel-wrap{min-width:0}.fifths-wheel{display:block;width:100%;max-width:560px;height:auto;margin:auto}.fifths-wheel text{font-family:Arial,"Microsoft JhengHei",sans-serif;fill:#333;font-size:17px;pointer-events:none}.fifths-wheel .fifths-alternate{font-size:11px;fill:#666}.fifths-wheel .fifths-minor text{font-size:13px}.fifths-wheel .fifths-center-title{font-size:25px;font-weight:600}.fifths-wheel .fifths-center-sub{font-size:14px;fill:#777}.fifths-key{cursor:pointer;outline:none}.fifths-key circle{fill:white;stroke:#aaa;stroke-width:1.4;transition:fill .15s,stroke .15s}.fifths-key:hover circle,.fifths-key:focus-visible circle,.fifths-key.is-active circle{fill:#333;stroke:#333}.fifths-key:hover text,.fifths-key:focus-visible text,.fifths-key.is-active text,.fifths-key:hover .fifths-alternate,.fifths-key:focus-visible .fifths-alternate,.fifths-key.is-active .fifths-alternate{fill:white}.fifths-key.is-in-path circle{stroke:#666;stroke-width:3}.fifths-key:focus-visible circle{stroke:#777;stroke-width:4}.fifths-help,.fifths-source{font-size:14px;color:#777;line-height:1.55}.fifths-panel{min-width:0}.fifths-panel>label{display:flex;align-items:center;gap:12px;font-size:15px;color:#555}.fifths-panel select{width:auto;max-width:100%;padding:6px 10px}.fifths-panel h3{font-size:22px;font-weight:500;margin:22px 0 10px}.fifths-panel p{margin:10px 0;line-height:1.6}.fifths-notes{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 14px}.fifths-notes span{display:inline-flex;justify-content:center;align-items:center;min-width:36px;height:34px;padding:0 6px;border:1px solid #ddd;border-radius:3px;font-size:16px;color:#333}.fifths-game{border-top:1px solid #e0e3dd;margin-top:22px;padding-top:8px}.fifths-game h3{font-size:20px}.fifths-patterns,.fifths-free-actions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.fifths-patterns button,.fifths-free-actions button{font-size:14px;padding:6px 10px;margin:0;border:1px solid #bbb;border-radius:3px;background:#fff;color:#444}.fifths-patterns button[aria-pressed="true"]{color:#fff;background:#333;border-color:#333}.fifths-free-actions[hidden]{display:none}#fifths-path{min-height:48px;color:#444;font-size:15px}.memory-basic-figure{max-width:720px;margin:22px 0 26px}.memory-basic-figure svg{display:block;width:100%;height:auto;border:1px solid #e0e3dd;background:#fff}.memory-basic-figure text{font-family:Arial,"Microsoft JhengHei",sans-serif}
@media(max-width:850px){.memory-fifths-layout{grid-template-columns:1fr}.fifths-wheel{max-width:520px}.fifths-panel{max-width:640px}}
.fifths-key.is-scale-tone circle{fill:#d7d7d7;stroke:#888}.fifths-key.is-relative circle{fill:#858585;stroke:#858585}.fifths-key.is-relative text{fill:white}.fifths-key.is-active circle{fill:#333;stroke:#333}.fifths-key.is-in-path circle{stroke:#333;stroke-width:4}
.fifths-mode-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.fifths-mode-tabs button{margin:0;padding:8px 12px;border:1px solid #bbb;border-radius:3px;background:white;color:#444}.fifths-mode-tabs button[aria-pressed="true"]{background:#333;color:white;border-color:#333}
.fifths-scale-controls{margin:12px 0}.fifths-scale-controls label{display:flex;align-items:center;gap:12px;font-size:15px;color:#555}.fifths-scale-controls[hidden],.fifths-game[hidden]{display:none}
.memory-basic-interactive>label{display:flex;align-items:center;gap:10px;margin:14px 0;color:#444}.memory-basic-interactive select{width:auto;max-width:100%;padding:6px 10px}.memory-basic-interactive .memory-basic-figure{margin:14px 0}.memory-triad-qualities{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.memory-triad-qualities button{border:1px solid #aaa;border-radius:3px;background:#fff;color:#444;padding:7px 12px;margin:0}.memory-triad-qualities button[aria-pressed="true"]{background:#333;color:#fff;border-color:#333}.memory-triad-note{cursor:pointer;outline:none}.memory-triad-note:hover circle,.memory-triad-note:focus-visible circle{stroke:#111;stroke-width:4}.memory-basic-interactive p{line-height:1.6}
.fifths-key.is-active circle{fill:#276d82;stroke:#174858;stroke-width:4}.fifths-key.is-relative circle{fill:#cbe0e6;stroke:#276d82;stroke-width:3}.fifths-key.is-relative text{fill:#174858}.fifths-key.is-active text,.fifths-key.is-active .fifths-alternate{fill:#fff}.fifths-key.is-in-path circle{stroke:#b06532;stroke-width:4}.world-scale-wheel{border-top:1px solid #ddd;margin-top:22px;padding-top:14px}.world-scale-wheel h3{font-size:21px;font-weight:500;margin:8px 0}.world-scale-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.world-scale-buttons button{margin:0;padding:6px 9px;background:#fff;color:#444;border:1px solid #aaa;border-radius:3px;font-size:13px}.world-scale-buttons button[aria-pressed="true"]{background:#333;color:#fff;border-color:#333}#world-scale-figure svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}.world-scale-note{cursor:pointer;outline:none}.world-scale-note:focus-visible circle{stroke:#333;stroke-width:5}.world-scale-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0}.world-scale-actions button{width:36px;height:36px;border:1px solid #aaa;border-radius:50%;background:#fff;color:#333;font-size:26px;line-height:26px;margin:0}.world-scale-actions span{min-width:100px;text-align:center}.world-scale-wheel p{line-height:1.55}
.fifths-key.is-scale-tone:not(.is-active) circle{fill:#fff;stroke:#657982;stroke-width:3.5}.fifths-key.is-scale-tone:not(.is-active) text{fill:#333}.fifths-key.is-active.is-scale-tone circle{fill:#276d82;stroke:#174858;stroke-width:4}


.qaf-audio-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0;font-size:var(--qaf-label-size)}.qaf-audio-controls label{display:flex;align-items:center;gap:7px}.qaf-audio-controls input{width:110px;accent-color:#555}.qaf-audio-controls output{min-width:3em}.qaf-audio-controls button{margin:0}