.transpose-hero{margin-bottom:22px}.transpose-hero h1{font-size:32px;margin:0 0 8px}.transpose-hero p{font-size:15px;color:var(--theme-muted,#64748b);max-width:75ch;line-height:1.7}
.translator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.translator-card,.transpose-help{padding:24px;border:1px solid var(--theme-border,#dbe4f0);border-radius:20px;background:var(--theme-surface,#fff);color:var(--theme-text,#193e7b);min-width:0}
.translator-card h2{font-size:20px;margin:0 0 18px}.translator-card label{display:block;font-size:13px;font-weight:650;margin:14px 0 8px}
.translator-card select,.translator-card textarea{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--theme-border,#cbd5e1);border-radius:12px;background:var(--theme-surface-2,#f8fbff);color:var(--theme-text,#193e7b);font:inherit;font-size:14px}
.translator-card textarea{min-height:95px;resize:vertical;font-family:ui-monospace,monospace;line-height:1.7}
.instrument-preview{display:flex;align-items:center;gap:18px;margin:18px 0;padding:14px;background:var(--theme-surface-2,#f8fbff);border-radius:14px}
.instrument-preview img{width:90px;height:90px;object-fit:contain}.instrument-preview strong{display:block;font-size:16px}.instrument-preview p{margin:5px 0 0;font-size:13px;line-height:1.6}
.clef-options{display:flex;align-items:center;gap:16px}.clef-picture{width:78px;height:60px;flex-shrink:0;background:#fff;color:#172554;border-radius:10px}
.staff-preview{overflow:auto;margin:18px 0;border:1px solid var(--theme-border,#dbe4f0);border-radius:12px;background:var(--theme-surface-2,#f8fbff);color:var(--theme-text,#193e7b)}.staff-preview svg{display:block;max-width:none}
.translation-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.translation-actions button,.drone-controls button{padding:11px 17px;border:1px solid var(--theme-border,#bfdbfe);border-radius:11px;background:var(--theme-primary,#2563eb);color:white;font:inherit;font-size:14px;font-weight:650;cursor:pointer}.translation-actions .secondary{background:var(--theme-surface,#fff);color:var(--theme-text,#193e7b)}
.translation-result{padding:14px;border-radius:12px;background:var(--theme-surface-2,#eff6ff);font:600 17px/1.8 ui-monospace,monospace;overflow-wrap:anywhere;min-height:60px}
.transpose-status{font-size:14px;line-height:1.6;color:var(--theme-muted,#64748b)}.transpose-status[data-error=true]{color:#dc2626}
.drone-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}.drone-controls select{width:auto;max-width:100%}.drone-controls label{margin:0}.drone-controls input{width:110px;accent-color:var(--theme-primary,#2563eb)}
.transpose-help{margin-top:22px}.transpose-help h2{font-size:20px}.transpose-help p{font-size:14px;line-height:1.8;max-width:80ch}.translator-card small{display:block;font-size:12px;line-height:1.7;color:var(--theme-muted,#64748b);margin-top:8px}
@media(max-width:800px){.translator-grid{grid-template-columns:1fr}.translator-card{padding:20px}}

.clef-picture{height:90px;width:60px;object-fit:contain}.reference-button{display:inline-flex;align-items:center;padding:11px 17px;border-radius:11px;border:1px solid var(--theme-border,#bfdbfe);background:var(--theme-primary,#2563eb);color:#fff;text-decoration:none;font-weight:650}.reference-button:hover{filter:brightness(1.08)}.reference-button:focus-visible{outline:3px solid var(--theme-primary,#2563eb);outline-offset:3px}
.right-panel{background:var(--theme-surface-2,#f3f7ff);border-color:var(--theme-border,#dbe4f0)}
.right-card{background:var(--theme-surface,#fff);color:var(--theme-text,#193e7b);border-color:var(--theme-border,#dbe4f0)}
.right-card p{font-size:13px;line-height:1.7;color:var(--theme-muted,#64748b)}
.right-card a{display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 12px;margin-top:8px;box-sizing:border-box;border:1px solid var(--theme-border,#dbe4f0);border-radius:11px;background:var(--theme-surface-2,#f3f7ff);color:var(--theme-text,#193e7b);text-decoration:none;font-size:13px;font-weight:600;transition:background .15s,border-color .15s}
.right-card a::after{content:'\2192';margin-left:auto;color:var(--theme-primary,#2563eb)}
.right-card a:hover{border-color:var(--theme-primary,#2563eb);background:color-mix(in srgb,var(--theme-primary,#2563eb) 10%,var(--theme-surface,#fff))}
.right-card a:focus-visible{outline:2px solid var(--theme-primary,#2563eb);outline-offset:3px}
.right-card br{display:none}