/* VRT Song Key Finder 2.0.0 | vocalrangetester.com | every selector is scoped to .vrtskf-tool.
   Sizes in px (themes shrink rem). Help text >= 15px, labels >= 13px, touch targets >= 44px, text contrast >= 4.5:1. */
.vrtskf-tool{--skf-pri:#4338ca;--skf-pri2:#3730a3;--skf-onpri:#fff;--skf-ink:#0f172a;--skf-text:#334155;--skf-mut:#475569;--skf-bg:#fff;--skf-soft:#eef2ff;--skf-line:#d9dcf5;--skf-edge:#94a3b8;--skf-chip:#e0e7ff;--skf-ok:#15803d;--skf-warn:#b45309;--skf-err:#b91c1c;--skf-page:transparent;--skf-bar:#c7d2fe;--skf-barin:#4338ca;
	color:var(--skf-text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;box-sizing:border-box;text-align:left;max-width:1040px;margin:0 auto 1.75em;background:var(--skf-page)}
@media (prefers-color-scheme:dark){
	.vrtskf-tool[data-scheme=auto]{--skf-pri:#a5b4fc;--skf-pri2:#c7d2fe;--skf-onpri:#0f172a;--skf-ink:#f1f5f9;--skf-text:#e2e8f0;--skf-mut:#cbd5e1;--skf-bg:#111827;--skf-soft:#1e1b4b;--skf-line:#334155;--skf-edge:#64748b;--skf-chip:#312e81;--skf-ok:#4ade80;--skf-warn:#fcd34d;--skf-err:#fca5a5;--skf-page:#0b1120;--skf-bar:#3730a3;--skf-barin:#a5b4fc;padding:14px;border-radius:18px}
}
.vrtskf-tool *,.vrtskf-tool *::before,.vrtskf-tool *::after{box-sizing:border-box}
.vrtskf-tool [hidden]{display:none!important}
.vrtskf-tool p,.vrtskf-tool dl,.vrtskf-tool dd,.vrtskf-tool dt,.vrtskf-tool h2,.vrtskf-tool h3,.vrtskf-tool ol,.vrtskf-tool ul,.vrtskf-tool li{margin:0;padding:0}
.vrtskf-tool h2,.vrtskf-tool h3{font-family:inherit;text-transform:none;letter-spacing:normal}
.vrtskf-tool button,.vrtskf-tool select,.vrtskf-tool input{font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;margin:0;line-height:1.2;text-shadow:none}
.vrtskf-tool button{cursor:pointer}
.vrtskf-tool button:disabled{cursor:not-allowed;opacity:.6}
.vrtskf-tool :focus-visible{outline:3px solid var(--skf-pri);outline-offset:2px}
.vrtskf-tool svg{display:block;flex:none}
.vrtskf-tool a{color:var(--skf-pri2);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* head: H2 = Tool Name, lead, progress */
.vrtskf-head{margin:0 0 12px}
.vrtskf-tool .vrtskf-title{margin:0;font-size:25px;line-height:1.25;font-weight:800;color:var(--skf-ink);letter-spacing:-.01em}
.vrtskf-lead{margin-top:4px!important;font-size:16px;color:var(--skf-mut)}
.vrtskf-tool .vrtskf-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;list-style:none}
.vrtskf-steps li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 12px 3px 4px;border-radius:99px;background:var(--skf-soft);color:var(--skf-mut);font-size:14px;font-weight:700;list-style:none}
.vrtskf-steps li span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:99px;background:var(--skf-bg);color:var(--skf-mut);font-size:13px;box-shadow:inset 0 0 0 1px var(--skf-edge)}
.vrtskf-steps li[aria-current=step]{background:var(--skf-pri);color:var(--skf-onpri)}
.vrtskf-steps li[aria-current=step] span{background:var(--skf-onpri);color:var(--skf-pri);box-shadow:none}
.vrtskf-steps li[data-done] span{background:var(--skf-ok);color:#fff;box-shadow:none}

.vrtskf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.vrtskf-card{border:1px solid var(--skf-line);border-radius:16px;background:var(--skf-bg);padding:14px;min-width:0}
.vrtskf-tool .vrtskf-h3{margin:0 0 10px;font-size:18px;line-height:1.3;font-weight:800;color:var(--skf-ink)}
.vrtskf-stepno{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:99px;background:var(--skf-ink);color:var(--skf-bg);font-size:13px;font-weight:800;vertical-align:2px}
.vrtskf-label{display:block;font-size:15px;font-weight:700;color:var(--skf-ink)}
.vrtskf-hint{margin-top:6px!important;font-size:15px;line-height:1.45;color:var(--skf-mut)}

/* Step 1: input (radio group) + instructions */
.vrtskf-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--skf-chip)}
.vrtskf-tool .vrtskf-seg button{min-height:44px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--skf-ink);font-weight:700;font-size:15px}
.vrtskf-tool .vrtskf-seg button:hover{background:var(--skf-bg);color:var(--skf-ink)}
.vrtskf-tool .vrtskf-seg button[aria-checked=true]{background:var(--skf-pri);color:var(--skf-onpri)}
.vrtskf-seg button[aria-checked=true]::before{content:"\25CF  ";font-size:.8em}
.vrtskf-how{margin-top:14px;padding:10px 12px;border-left:4px solid var(--skf-pri);border-radius:10px;background:var(--skf-soft)}
.vrtskf-how .vrtskf-hint{margin-top:2px!important}

/* Step 2: panel (dark in both schemes) */
.vrtskf-rec{position:relative;border-radius:16px;background:#0f172a;color:#e2e8f0;padding:14px;min-width:0}
.vrtskf-rec .vrtskf-h3{color:#fff}
.vrtskf-rec .vrtskf-stepno{background:#fff;color:#0f172a}
.vrtskf-rec :focus-visible{outline-color:#22d3ee}
.vrtskf-mainrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.vrtskf-tool .vrtskf-main{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:1 1 200px;min-height:56px;padding:0 22px 0 18px;border:0;border-radius:99px;background:#4f46e5;color:#fff;font-weight:800;font-size:18px;opacity:1;cursor:pointer}
.vrtskf-tool .vrtskf-main:hover,.vrtskf-tool .vrtskf-main:focus{background:#4338ca;color:#fff}
.vrtskf-main svg{width:24px;height:24px}
.vrtskf-tool[data-state=calib] [data-skf-main],.vrtskf-tool[data-state=rec] [data-skf-main],.vrtskf-tool[data-state=starting] [data-skf-main]{background:#dc2626}
.vrtskf-tool[data-state=calib] [data-skf-main]:hover,.vrtskf-tool[data-state=rec] [data-skf-main]:hover{background:#b91c1c}
.vrtskf-tool[data-state=rec] [data-skf-main] svg{animation:vrtskf-pulse 1.2s ease-in-out infinite}
@keyframes vrtskf-pulse{50%{opacity:.35}}
.vrtskf-tool .vrtskf-main:disabled{background:#334155;color:#cbd5e1;opacity:1}
.vrtskf-clock{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto!important;line-height:1.15}
.vrtskf-clock span{font-size:13px;font-weight:700;color:#cbd5e1}
.vrtskf-clock output{font-size:28px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.vrtskf-private{display:flex;align-items:flex-start;gap:6px;margin-top:10px!important;font-size:15px;color:#cbd5e1}
.vrtskf-private svg{width:16px;height:16px;margin-top:3px;color:#4ade80}
.vrtskf-notice{margin-top:12px;padding:10px 12px;border-radius:12px;border-left:5px solid #dc2626;background:#fef2f2;color:#7f1d1d;font-size:15px}
.vrtskf-notice[data-kind=info]{border-left-color:#2563eb;background:#eff6ff;color:#1e3a8a}
.vrtskf-ntitle{font-size:17px;font-weight:800;margin-bottom:2px!important}

/* notes pane */
.vrtskf-plabel{display:block;margin:12px 0 6px!important;font-size:15px;font-weight:700;color:#fff}
.vrtskf-pane>.vrtskf-plabel:first-child{margin-top:0!important}
.vrtskf-pad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.vrtskf-tool .vrtskf-pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;min-width:44px;padding:4px 2px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;color:#0f172a;font-weight:800;font-size:18px}
.vrtskf-tool .vrtskf-pad button.is-sharp{background:#1e293b;border-color:#475569;color:#fff}
.vrtskf-tool .vrtskf-pad button small{font-size:13px;font-weight:700;color:#cbd5e1}
.vrtskf-tool .vrtskf-pad button:hover{background:#e0e7ff;color:#0f172a}
.vrtskf-tool .vrtskf-pad button.is-sharp:hover{background:#334155;color:#fff}
.vrtskf-tool .vrtskf-pad button:active{transform:translateY(1px)}
.vrtskf-typerow{display:flex;gap:6px}
.vrtskf-tool .vrtskf-typerow input,.vrtskf-tool .vrtskf-rec select{flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px;border:1px solid #64748b;border-radius:10px;background:#111c33;color:#fff;font-size:16px}
.vrtskf-tool .vrtskf-typerow input::placeholder{color:#94a3b8;opacity:1}
.vrtskf-tool .vrtskf-btn2{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border:1px solid #64748b;border-radius:10px;background:#1e293b;color:#fff;font-weight:700;font-size:15px}
.vrtskf-tool .vrtskf-btn2:hover{background:#334155;color:#fff}
.vrtskf-tool .vrtskf-btn2[aria-pressed=false]{color:#cbd5e1;border-style:dashed}
.vrtskf-tool .vrtskf-chips{display:flex;flex-wrap:wrap;gap:4px;min-height:32px;list-style:none}
.vrtskf-chips li{padding:3px 9px;border-radius:99px;background:#312e81;color:#fff;font-size:14px;font-weight:700;list-style:none}
.vrtskf-chips:empty::before{content:"No notes yet";color:#cbd5e1;font-size:15px}
.vrtskf-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vrtskf-homerow{margin-bottom:12px}
.vrtskf-tool .vrtskf-rec select{width:100%}
.vrtskf-phint{margin-top:4px!important;font-size:15px;color:#cbd5e1}

/* file pane: the real input stays focusable and sits under its label */
.vrtskf-pane[data-skf-pane=file]{position:relative}
.vrtskf-tool .vrtskf-fileinput{position:absolute;left:0;top:0;width:100%;height:56px;opacity:0;cursor:pointer;z-index:1}
.vrtskf-tool .vrtskf-fileinput:disabled{cursor:not-allowed}
.vrtskf-tool .vrtskf-filebtn{display:flex;width:100%}
.vrtskf-fileinput:focus-visible+.vrtskf-filebtn{outline:3px solid #22d3ee;outline-offset:2px}
.vrtskf-tool[data-state=busy] .vrtskf-filebtn{background:#334155}
.vrtskf-fname{margin-top:8px!important;font-size:15px;color:#e2e8f0;overflow-wrap:anywhere}

/* live view */
.vrtskf-live{margin-top:12px}
.vrtskf-tool[data-mode=notes] .vrtskf-live{display:none}
.vrtskf-tool[data-mode=file] .vrtskf-readout,.vrtskf-tool[data-mode=file] [data-skf-livebars],.vrtskf-tool[data-mode=file] .vrtskf-level{display:none}
.vrtskf-readout{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;background:#111c33;box-shadow:inset 0 0 0 1px #334155}
.vrtskf-rlabel{font-size:13px;font-weight:700;color:#cbd5e1;min-width:4.2em}
.vrtskf-now{font-size:40px;line-height:1.1;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;min-height:44px}
.vrtskf-now:empty::before{content:"\2013";color:#64748b;font-weight:600}
.vrtskf-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;height:112px;margin-top:10px}
.vrtskf-bars span{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-width:0}
.vrtskf-bars i{display:block;flex:1 1 auto;transform:scaleY(.02);transform-origin:bottom center;border-radius:4px 4px 0 0;background:#818cf8;transition:transform .12s linear}
.vrtskf-bars b{display:block;margin-top:3px;font-size:13px;line-height:1.1;font-weight:700;text-align:center;color:#e2e8f0;overflow:hidden;white-space:nowrap}
.vrtskf-level{display:flex;align-items:center;gap:10px;margin-top:8px}
.vrtskf-meter{position:relative;flex:1 1 auto;height:12px;border-radius:99px;background:#1e293b;box-shadow:inset 0 0 0 1px #475569;overflow:hidden}
.vrtskf-meter i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;background:#475569;transition:transform .08s linear}
.vrtskf-meter[data-level=good] i{background:#4ade80}
.vrtskf-meter[data-level=quiet] i{background:#94a3b8}
.vrtskf-meter[data-level=loud] i{background:#f87171}
.vrtskf-leveltxt{min-width:6.6em;font-size:15px;font-weight:700;color:#e2e8f0}
.vrtskf-progrow{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:15px;color:#e2e8f0}
.vrtskf-prog{position:relative;flex:1 1 auto;height:6px;border-radius:99px;background:#1e293b;overflow:hidden}
.vrtskf-prog i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#6366f1,#22d3ee)}
.vrtskf-status{margin-top:10px!important;min-height:2.9em;font-size:15px;color:#fff}
.vrtskf-status[data-kind=ok]{color:#86efac;font-weight:700}
.vrtskf-status[data-kind=ok]::before{content:"\2713  "}
.vrtskf-status[data-kind=error]{color:#fca5a5;font-weight:700}
.vrtskf-status[data-kind=error]::before{content:"\26A0  "}
.vrtskf-status[data-kind=busy]{font-weight:700}
.vrtskf-tool[data-state=error] .vrtskf-status{position:absolute;width:1px;height:1px;min-height:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vrtskf-kbd{margin-top:4px!important;font-size:13px;color:#cbd5e1}
.vrtskf-tool>noscript p{color:var(--skf-err);font-weight:700}

/* Result */
.vrtskf-tool .vrtskf-result .vrtskf-h3:focus{outline:none}
.vrtskf-tool .vrtskf-result .vrtskf-h3:focus-visible{outline:2px solid var(--skf-pri);outline-offset:4px;border-radius:6px}
.vrtskf-empty{padding:4px 0 2px;font-size:15px;color:var(--skf-mut)}
.vrtskf-emptybig{font-size:20px;font-weight:800;color:var(--skf-mut)}
.vrtskf-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.vrtskf-col1,.vrtskf-col2{display:grid;gap:14px;min-width:0;align-content:start}
.vrtskf-big output{font-size:44px;line-height:1.05;font-weight:800;color:var(--skf-ink);letter-spacing:-.02em}
.vrtskf-biglabel{margin-top:6px!important;font-size:15px;font-weight:700;color:var(--skf-mut)}
.vrtskf-answer{font-size:17px;line-height:1.45;color:var(--skf-ink)}
.vrtskf-tool .vrtskf-cands ol{display:grid;gap:6px;margin-top:6px;list-style:none}
.vrtskf-cands li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name num" "bar bar";gap:2px 10px;align-items:baseline;padding:8px 10px;border-radius:10px;background:var(--skf-soft);list-style:none}
.vrtskf-cands li b{grid-area:name;font-size:17px;color:var(--skf-ink)}
.vrtskf-cands li small{grid-area:name;justify-self:end;margin-right:4px;font-size:13px;font-weight:700;color:var(--skf-mut)}
.vrtskf-cnum{grid-area:num;font-size:16px;font-weight:800;color:var(--skf-ink);font-variant-numeric:tabular-nums}
.vrtskf-cbar{grid-area:bar;position:relative;height:8px;border-radius:99px;background:var(--skf-bg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--skf-line)}
.vrtskf-cbar i{position:absolute;inset:0;transform-origin:left center;background:var(--skf-edge)}
.vrtskf-cands li.is-top{box-shadow:inset 0 0 0 2px var(--skf-pri)}
.vrtskf-cands li.is-top .vrtskf-cbar i{background:var(--skf-pri)}
.vrtskf-rbars{height:120px}
.vrtskf-rbars i{background:var(--skf-bar);transition:none}
.vrtskf-rbars span.is-in i{background:var(--skf-barin)}
.vrtskf-rbars b{color:var(--skf-mut)}
.vrtskf-rbars span.is-in b{color:var(--skf-ink)}
.vrtskf-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.vrtskf-facts div{padding:8px 10px;border-radius:10px;background:var(--skf-soft);min-width:0}
.vrtskf-facts dt{font-size:13px;font-weight:700;color:var(--skf-mut)}
.vrtskf-facts dd{font-size:17px;font-weight:800;color:var(--skf-ink);overflow-wrap:anywhere}
.vrtskf-facts dd[data-skf-amount]{font-size:15px;font-weight:600}
.vrtskf-chord{display:inline-flex;flex-direction:column;align-items:center;margin:2px 8px 2px 0;line-height:1.15}
.vrtskf-chord small{font-size:13px;font-weight:600;color:var(--skf-mut)}
.vrtskf-conf{padding:10px 12px;border:1px solid var(--skf-line);border-radius:12px}
.vrtskf-confrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.vrtskf-confrow .vrtskf-label{display:inline}
.vrtskf-pips{display:inline-flex;gap:3px}
.vrtskf-pips i{width:22px;height:8px;border-radius:99px;background:var(--skf-line)}
.vrtskf-conf[data-level=low] .vrtskf-pips i:nth-child(1){background:var(--skf-err)}
.vrtskf-conf[data-level=medium] .vrtskf-pips i:nth-child(-n+2){background:var(--skf-warn)}
.vrtskf-conf[data-level=high] .vrtskf-pips i{background:var(--skf-ok)}
.vrtskf-confrow strong{font-size:17px;color:var(--skf-ink)}
.vrtskf-confdet{margin-top:4px!important;font-size:15px;color:var(--skf-text)}
.vrtskf-tool .vrtskf-advice{margin:8px 0 0 20px;list-style:disc;font-size:15px;color:var(--skf-text)}
.vrtskf-advice li{margin:3px 0;list-style:disc}
.vrtskf-trans{display:grid;gap:6px}
.vrtskf-tool .vrtskf-trans select{min-height:44px;padding:0 10px;border:1px solid var(--skf-edge);border-radius:10px;background:var(--skf-bg);color:var(--skf-ink);font-size:16px}
.vrtskf-trout{font-size:15px;font-weight:700;color:var(--skf-ink)}
.vrtskf-hand{font-size:15px;color:var(--skf-text)}
.vrtskf-actions{display:flex;flex-wrap:wrap;gap:8px}
.vrtskf-tool .vrtskf-btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:44px;padding:0 16px;border:1px solid var(--skf-edge);border-radius:10px;background:var(--skf-bg);color:var(--skf-ink);font-weight:700;font-size:15px}
.vrtskf-tool .vrtskf-btn:hover{background:var(--skf-soft);color:var(--skf-ink)}
.vrtskf-tool .vrtskf-btn-pri,.vrtskf-tool .vrtskf-btn-pri:hover{background:var(--skf-pri);border-color:var(--skf-pri);color:var(--skf-onpri)}
.vrtskf-tool .vrtskf-btn-pri:hover{background:var(--skf-pri2)}
.vrtskf-out{min-height:1.5em;font-size:15px;font-weight:700;color:var(--skf-ok)}
.vrtskf-foot{margin-top:14px!important;padding-top:10px;border-top:1px solid var(--skf-line);font-size:15px;line-height:1.45;color:var(--skf-mut)}
.vrtskf-tool[data-state=done] .vrtskf-result{border-color:var(--skf-pri);box-shadow:0 0 0 1px var(--skf-pri)}

/* wider screens */
@media (min-width:480px){.vrtskf-seg{grid-template-columns:repeat(4,minmax(0,1fr))}.vrtskf-pad{grid-template-columns:repeat(12,minmax(0,1fr))}.vrtskf-tool .vrtskf-pad button{font-size:16px}}
@media (min-width:600px){.vrtskf-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.vrtskf-tool .vrtskf-btn{flex:0 1 auto}}
@media (min-width:880px){
	.vrtskf-tool .vrtskf-title{font-size:29px}
	.vrtskf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"setup rec" "result result";gap:14px}
	.vrtskf-setup{grid-area:setup}
	.vrtskf-rec{grid-area:rec}
	.vrtskf-result{grid-area:result}
	.vrtskf-card,.vrtskf-rec{padding:18px}
	.vrtskf-seg{grid-template-columns:repeat(2,minmax(0,1fr))}
	.vrtskf-pad{grid-template-columns:repeat(6,minmax(0,1fr))}
	.vrtskf-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px 28px;align-items:start}
	.vrtskf-big output{font-size:54px}
}
@media (max-width:379px){.vrtskf-pad{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:360px){.vrtskf-card,.vrtskf-rec{padding:12px}.vrtskf-tool .vrtskf-main{font-size:17px;padding:0 16px}.vrtskf-big output{font-size:38px}.vrtskf-bars b{font-size:13px;letter-spacing:-.04em}}
@media (prefers-reduced-motion:reduce){.vrtskf-tool *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}