.cdt{display:flex;flex-direction:column;align-items:center;gap:10px}.cdt__head{display:flex;align-items:baseline;gap:8px}.cdt__name{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-text)}.cdt__q{font-size:var(--fs-xs);color:var(--color-text-secondary)}.cdt__noshape{font-size:var(--fs-sm);color:var(--color-text-muted);padding:16px}.cdt__voicing{display:flex;align-items:center;gap:4px}.cdt__nav{width:26px;height:26px;border-radius:50%;border:1px solid var(--color-border);background:#fff;color:var(--color-text-secondary);font-size:18px;line-height:1;cursor:pointer;flex-shrink:0}.cdt__nav:hover{color:var(--color-primary);border-color:#d9d4f0}.cdt__dots{display:flex;align-items:center;gap:6px}.cdt__pos{font-size:var(--fs-xs);color:var(--color-text-muted);margin-right:4px}.cdt__dot{width:7px;height:7px;border-radius:50%;background:var(--color-border);cursor:pointer}.cdt__dot.on{background:var(--color-accent-blue)}.cdt__ints{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.ivbadge{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;padding:4px 9px;border-radius:var(--radius-sm);background:var(--color-surface-soft);min-width:34px}.ivbadge b{font-size:var(--fs-sm);font-weight:var(--fw-bold)}.ivbadge span{font-size:10px;color:var(--color-text-muted)}.ivbadge--root b{color:var(--color-primary)}.ivbadge--third b{color:var(--color-accent-blue)}.ivbadge--fifth b{color:#0f9d58}.ivbadge--seventh b{color:#ea7317}.ivbadge--ext b{color:var(--color-text-secondary)}.cdt__play{display:flex;gap:8px}.cdt__btn{min-height:40px;border:1px solid var(--color-border);background:#fff;border-radius:12px;padding:8px 16px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-action-muted);cursor:pointer;transition:all var(--dur) var(--ease)}.cdt__btn:hover{border-color:#c8ccd6;color:var(--color-text);transform:translateY(-1px)}.cdt__btn:focus-visible{outline:none;border-color:var(--color-action);box-shadow:0 0 0 3px #1f24331f}.cdt__btn--brand{background:var(--color-action);color:#fff;border-color:transparent;box-shadow:0 10px 22px #0f0f0f1f}.cdt__btn--brand:hover{color:#fff;filter:brightness(1.06);box-shadow:0 14px 28px #0f0f0f29}.chordlib{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(16px,2vw,28px);padding-block:clamp(20px,3vw,32px);align-items:start}.chordlib__main{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:clamp(16px,2.5vw,28px)}.chordlib__intro{margin-bottom:18px}.chordlib__sub{margin:4px 0 0;color:var(--color-text-secondary);font-size:var(--fs-sm)}.chordlib__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}.chordlib__title{font-size:var(--fs-2xl);font-weight:var(--fw-bold)}.chordlib__count{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--color-text-muted)}.chordlib__views{display:flex;gap:4px;background:var(--color-action-soft);border:1px solid var(--color-action-border);border-radius:14px;padding:4px}.chordlib__views button{min-height:40px;padding:8px 18px;border-radius:11px;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-action-muted);background:transparent;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.chordlib__views button.is-active{background:var(--color-action);color:#fff;box-shadow:0 8px 18px #0f0f0f1f}.chordlib__views button:focus-visible{outline:none;box-shadow:0 0 0 3px #1f24331f}.chordlib__controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.chordlib__search{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:9px 14px;font-size:var(--fs-sm);min-width:200px;outline:none}.chordlib__search:focus{border-color:var(--color-primary)}.chordlib__inst{display:inline-grid;grid-template-columns:repeat(2,minmax(72px,1fr));border:1px solid var(--color-border);border-radius:14px;overflow:hidden;background:#fff}.chordlib__inst button{min-height:40px;padding:9px 0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-action-muted);background:#fff;text-align:center;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.chordlib__inst button:hover{color:var(--color-text);background:#fafafa}.chordlib__inst button.is-active{background:var(--color-action);color:#fff;box-shadow:0 8px 18px #0f0f0f1f}.chordlib__inst button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #ffffffe6,0 0 0 3px #1f24331f}.chordlib__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.chordlib__cell{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:8px 4px 4px;text-align:center;cursor:pointer;transition:all var(--dur) var(--ease)}.chordlib__cell:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.chordlib__cell.is-active{border-color:var(--color-action);box-shadow:0 0 0 2px #0f0f0f1f}.chordlib__cell-name{display:block;font-weight:var(--fw-bold);font-size:var(--fs-base);margin-bottom:2px}.chordlib__cell svg{max-width:100%;height:auto}.chordlib__empty{padding:60px 20px;text-align:center;color:var(--color-text-muted)}.chordlib__aside{position:sticky;top:calc(var(--nav-h) + 20px)}.chordlib__detail{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:22px}.keych__keys{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.keych__key{padding:8px 14px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-border);font-weight:var(--fw-bold);color:var(--color-text-secondary)}.keych__key.is-active{background:var(--color-action);color:#fff;border-color:var(--color-action);box-shadow:0 8px 18px #0f0f0f1f}.keych__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}.keych__cell{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:8px 4px;cursor:pointer;transition:all var(--dur) var(--ease)}.keych__cell:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.keych__roman{font-weight:var(--fw-bold);color:var(--color-primary);font-size:var(--fs-base)}.keych__name{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}.keych__noshape{color:var(--color-text-muted);height:70px;display:flex;align-items:center}.keych__func{font-size:11px;color:var(--color-text-muted)}.keych__prog{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px}.keych__prog-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}.keych__prog-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}.keych__prog-btn:hover{border-color:#c8ccd6;color:var(--color-text);transform:translateY(-1px)}.keych__prog-btn.is-playing{background:var(--color-action);color:#fff;border-color:var(--color-action)}.keych__prog-icon{width:14px;display:inline-flex;justify-content:center;line-height:1}.keych__tip{margin-top:10px;font-size:var(--fs-xs);color:var(--color-text-muted)}@media (max-width: 860px){.chordlib{grid-template-columns:1fr}.chordlib__aside{position:static;order:-1}}