/* Chord Transposer 1.0.0 | onlinepitchchanger.com | brand: #0067FF primary, #22B8F0 accent, #0F172A navy.
   Text-editor look: transpose bar (♭ / shift / ♯ + new key) → two editor panes (original | transposed) → collapsed "More options".
   Sizes in px (Astra shrinks rem); text ≥ 15px, labels ≥ 13px; contrast ≥ 4.5:1. */
.opc-tm{--tm-blue:#0067ff;--tm-blue2:#0052cc;--tm-cyan:#22b8f0;--tm-navy:#0f172a;--tm-navy2:#1e293b;--tm-text:#334155;--tm-muted:#475569;--tm-light:#f0f7ff;--tm-line:#d6e4f5;--tm-err:#b91c1c;--tm-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
	max-width:1100px;margin:0 auto 1.75em;color:var(--tm-text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;box-sizing:border-box;text-align:left}
.opc-tm *,.opc-tm *::before,.opc-tm *::after{box-sizing:border-box}
.opc-tm [hidden]{display:none!important}
.opc-tm p,.opc-tm h2,.opc-tm ul,.opc-tm pre{margin:0}
.opc-tm button,.opc-tm select,.opc-tm textarea{font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;margin:0}
.opc-tm button{cursor:pointer;line-height:1.2}
.opc-tm button:disabled{cursor:not-allowed;opacity:.55}
.opc-tm :focus-visible{outline:3px solid var(--tm-blue);outline-offset:2px}
.opc-tm-head{margin:0 0 12px}
.opc-tm-title{margin:0;font-size:24px;line-height:1.25;font-weight:800;color:var(--tm-navy);letter-spacing:-.01em}
.opc-tm-lead{margin:4px 0 0!important;color:var(--tm-muted);font-size:16px}
.opc-tm-label{display:block;font-size:15px;font-weight:700;color:var(--tm-navy);margin:0 0 4px}
.opc-tm-hint{display:block;font-size:15px;line-height:1.45;color:var(--tm-muted);margin:6px 0 0!important}
.opc-tm select{display:block;width:100%;min-height:48px;padding:8px 12px;border:1px solid #94a3b8;border-radius:10px;background:#fff;color:var(--tm-navy);font-size:16px;font-weight:600}
.opc-tm select:disabled{background:#f1f5f9;color:#475569}

/* transpose bar */
.opc-tm-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:end;padding:12px;border-radius:16px;background:var(--tm-navy);margin:0 0 12px}
.opc-tm-steps{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.opc-tm-step{min-height:52px;padding:0 12px;border:0;border-radius:12px;background:var(--tm-blue);color:#fff;font-size:18px;font-weight:800}
.opc-tm-step span{font-size:24px;line-height:1;vertical-align:-2px;margin-right:2px}
.opc-tm-step:hover:not(:disabled){background:var(--tm-blue2)}
.opc-tm-shift{min-width:118px;text-align:center;color:#cbd5e1;font-size:15px;font-weight:700;line-height:1.1}
.opc-tm-shift output{display:block;font-size:34px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.opc-tm-keyfield .opc-tm-label{color:#e2e8f0}
.opc-tm-zero{justify-self:start;min-height:44px;padding:0 14px;border:1px solid #64748b;border-radius:99px;background:transparent;color:#fff;font-size:15px;font-weight:700}
.opc-tm-zero:hover:not(:disabled){background:var(--tm-navy2)}

/* editor panes */
.opc-tm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.opc-tm-pane{min-width:0;border:1px solid var(--tm-line);border-radius:16px;background:#fff;overflow:hidden}
.opc-tm-tabs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:8px 10px 8px 14px;background:var(--tm-light);border-bottom:1px solid var(--tm-line)}
.opc-tm-tab{font-size:16px;font-weight:800;color:var(--tm-navy)}
.opc-tm-tools{display:flex;gap:6px}
.opc-tm-mini{min-height:40px;padding:0 12px;border:1px solid #9cc3f5;border-radius:99px;background:#fff;color:var(--tm-blue2);font-size:15px;font-weight:700}
.opc-tm-mini:hover{background:#e3efff}
.opc-tm .opc-tm-text{display:block;width:100%;min-height:300px;margin:0;padding:12px 14px;border:0;border-radius:0;background:#fff;color:var(--tm-navy);font:15px/1.55 var(--tm-mono);white-space:pre;overflow:auto;resize:vertical;tab-size:4}
.opc-tm-text::placeholder{color:#64748b;opacity:1}
.opc-tm-text:focus{outline:0;box-shadow:inset 0 0 0 3px var(--tm-blue)}
.opc-tm-in .opc-tm-hint{padding:0 14px 12px}

.opc-tm-sumbox{padding:12px 14px;background:var(--tm-navy);color:#e2e8f0}
.opc-tm-sum{font-size:22px;line-height:1.25;font-weight:800;color:#fff;overflow-wrap:anywhere}
.opc-tm-sub{margin-top:4px!important;font-size:15px;line-height:1.45;color:#cbd5e1}
.opc-tm-out[data-state="nochords"] .opc-tm-sumbox{background:#fef2f2;border-bottom:2px solid var(--tm-err)}
.opc-tm-out[data-state="nochords"] .opc-tm-sum{color:var(--tm-err)}
.opc-tm-out[data-state="nochords"] .opc-tm-sub{color:#7f1d1d}
.opc-tm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;border-bottom:1px solid var(--tm-line)}
.opc-tm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--tm-blue);color:#fff;font-size:15px;font-weight:800}
.opc-tm-btn:hover:not(:disabled){background:var(--tm-blue2)}
.opc-tm-btn2{background:var(--tm-navy)}
.opc-tm-btn2:hover:not(:disabled){background:var(--tm-navy2)}
.opc-tm-msg{font-size:15px;font-weight:700;color:#15803d}
.opc-tm .opc-tm-sheet{display:block;min-height:220px;max-height:560px;margin:0;padding:12px 14px;border:0;background:#fff;color:var(--tm-navy);font:15px/1.55 var(--tm-mono);white-space:pre;overflow:auto;tab-size:4}
.opc-tm-out[data-state="empty"] .opc-tm-sheet{min-height:120px;background:repeating-linear-gradient(0deg,#fff 0,#fff 22px,#f1f5f9 22px,#f1f5f9 23px)}
.opc-tm-ch{font-weight:800;color:var(--tm-blue2)}
.opc-tm-ch.is-new{background:#dff4fd;border-radius:3px;box-shadow:0 0 0 1px #9fdcf7}
.opc-tm-map{display:flex;flex-wrap:wrap;gap:6px;margin:0!important;padding:10px 14px!important;list-style:none!important;border-top:1px solid var(--tm-line)}
.opc-tm-map:empty{display:none}
.opc-tm-map li{margin:0!important;padding:4px 10px;border:1px solid var(--tm-line);border-radius:99px;background:var(--tm-light);font-size:15px;color:var(--tm-text)}
.opc-tm-map b{color:var(--tm-navy)}
.opc-tm-audio{padding:10px 14px 12px;border-top:1px solid var(--tm-line);font-size:15px;color:var(--tm-text)}
.opc-tm-audio a{color:var(--tm-blue2);font-weight:700;text-decoration:underline}

/* More (collapsed) */
.opc-tm-more{margin:12px 0 0;border:1px solid var(--tm-line);border-radius:16px;background:#fff}
.opc-tm-more summary{min-height:48px;padding:12px 16px;font-size:16px;font-weight:800;color:var(--tm-blue2);cursor:pointer}
.opc-tm-morebody{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:0 16px 16px}
.opc-tm-field{display:block;margin:0}
.opc-tm-instr select+select{margin-top:8px}

@media (min-width:640px){
	.opc-tm-bar{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto}
	.opc-tm-zero{justify-self:end;min-height:48px}
	.opc-tm-morebody{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (min-width:900px){
	.opc-tm-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	.opc-tm-text{min-height:420px}
	.opc-tm-sheet{min-height:300px}
}
@media (max-width:380px){
	.opc-tm-shift{min-width:92px}
	.opc-tm-shift output{font-size:30px}
	.opc-tm-step{font-size:16px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){.opc-tm *{transition:none!important;scroll-behavior:auto!important}}
@media print{
	html.opc-tm-printing body *{visibility:hidden!important}
	html.opc-tm-printing .opc-tm-printme .opc-tm-sheet,html.opc-tm-printing .opc-tm-printme .opc-tm-sheet *,html.opc-tm-printing .opc-tm-printme .opc-tm-sum{visibility:visible!important}
	html.opc-tm-printing .opc-tm-printme .opc-tm-sum{position:absolute;left:0;top:0;color:#000!important}
	html.opc-tm-printing .opc-tm-printme .opc-tm-sheet{position:absolute;left:0;top:40px;max-height:none;overflow:visible;color:#000;background:#fff!important}
	html.opc-tm-printing .opc-tm-ch{color:#000;background:none;box-shadow:none}
}