/* Tools dropdown in the menu + the free producer tools (tools.html, chords, scales, bpm, tap, finder) */
.nav ul li.has-sub{position:relative}
.nav ul li.has-sub > a{display:inline-flex;align-items:center;gap:6px}
.nav .caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.nav ul .sub{position:absolute;top:100%;left:-18px;margin:0;padding:10px 0;list-style:none;min-width:250px;background:#0b0b0b;border:1px solid var(--line);display:block;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav ul .sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav ul li.has-sub:hover .sub,.nav ul li.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav ul li.has-sub:hover .caret,.nav ul li.has-sub:focus-within .caret{transform:rotate(180deg)}
.nav ul .sub li{display:block}
.nav ul .sub a{display:block;padding:9px 18px;border:0;opacity:.8;font-size:11.5px;letter-spacing:.12em;white-space:nowrap}
.nav ul .sub a:hover{opacity:1;background:#161616}
.nav ul .sub li:last-child{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
@media (max-width:900px){
  .nav ul .sub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;padding:2px 0 8px 2px;min-width:0}
  .nav ul .sub a{font-size:16px;font-weight:500;padding:5px 0;opacity:.7;letter-spacing:0;text-transform:none}
  .nav ul .sub li:last-child{border-top:0;margin-top:0;padding-top:0}
  .nav .caret{display:none}
}

/* hub + shared */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:36px 0 70px}
.tl-grid.sm{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:18px 0 0}
.tl-card{position:relative;display:grid;gap:8px;align-content:start;padding:24px 22px 26px;border:1px solid var(--line);background:var(--bg-2);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.tl-card:hover{border-color:var(--ink);background:#1d1d1d}
.tl-card svg{width:30px;height:30px;margin-bottom:6px}
.tl-card b{font-size:19px;font-weight:800}
.tl-card span{color:var(--ink-2,#cfcfcb);font-size:14.5px;line-height:1.5;padding-right:18px}
.tl-card i{position:absolute;right:20px;top:22px;font-style:normal;font-size:20px;opacity:.5;transition:transform .15s,opacity .15s}
.tl-card:hover i{opacity:1;transform:translateX(3px)}
.tl-grid.sm .tl-card{padding:18px}
.tl-grid.sm .tl-card b{font-size:16px}
.tl-grid.sm .tl-card span{font-size:13.5px}
.tl-grid.sm .tl-card svg{width:24px;height:24px}
.tool{margin:34px 0 60px;padding:26px;border:1px solid var(--line);background:var(--bg-2)}
.tl-controls{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin-bottom:22px}
.tl-controls label{display:grid;gap:6px}
.tl-controls label > span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tl-controls select,.tl-controls input[type=number]{font:400 15px/1.4 var(--font);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);padding:10px 12px;border-radius:0;outline:none;min-width:110px}
.tl-controls input[type=number]{width:96px;min-width:0}
.tl-controls select:focus,.tl-controls input:focus{border-color:var(--ink)}
.tl-check{display:flex !important;grid-auto-flow:column;align-items:center;gap:9px;font-size:15px;cursor:pointer;padding-bottom:10px}
.tl-check input{accent-color:#f2f1ee;width:16px;height:16px}
.tl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 10px}
.tl-muted{margin:0;color:var(--muted);font-size:14px}
.tl-muted a{color:var(--ink)}
.tl-err{color:#ff4d5e}
.tl-label{font-size:11px;color:var(--muted);margin:22px 0 10px}
.tl-more{margin:0 0 60px}
.tl-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:30px 30px;margin:0 0 90px;border:1px solid var(--line);background:linear-gradient(110deg,#262626,#121212 70%)}
.tl-cta .caps{margin:0 0 8px;font-size:11px;opacity:.8}
.tl-cta h2{margin:0 0 6px;font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1}
.tl-cta p{margin:0;color:var(--ink-2,#cfd0d2);max-width:52ch}

/* chords */
.ch-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ch-cards.sm{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
.ch-card{display:grid;gap:2px;padding:16px 10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;text-align:center;font:inherit;transition:border-color .15s,background .15s}
.ch-card b{font-size:22px;font-weight:800}
.ch-cards.sm .ch-card b{font-size:16px}
.ch-card span{font-size:12px;color:var(--muted);letter-spacing:.1em}
.ch-card:hover{border-color:var(--ink)}
.ch-card.on{background:#f2f1ee;color:#121212;border-color:#f2f1ee}
.ch-card.on span{color:#555}
.ch-roll{margin-top:14px;border:1px solid var(--line);background:var(--bg);height:150px;overflow:hidden}
.roll{width:100%;height:100%;display:block}
.roll rect{fill:var(--ink-2,#cfcfcb)}
.roll rect.b{fill:#6f6f6c}
.roll .bar{stroke:var(--line);stroke-width:1}
.roll .ph{stroke:#f2f1ee;stroke-width:2;vector-effect:non-scaling-stroke}

/* scales */
.sc-keys{border:1px solid var(--line);background:var(--bg);padding:12px}
.kb{width:100%;height:auto;display:block}
.kb rect{cursor:pointer;stroke:#121212;stroke-width:1}
.kb .wk{fill:#3d3d3b}
.kb .wk.in{fill:#ecebe7}
.kb .bk{fill:#151515}
.kb .bk.in{fill:#b9b8b4}
.kb .kl{font:700 9px var(--font);fill:#121212;text-anchor:middle;pointer-events:none}
.kb .kl.r{font-size:10px}
.kb .kd{fill:#121212;pointer-events:none}
.kb rect:active{opacity:.75}
.sc-notes{display:flex;flex-wrap:wrap;gap:8px}
.sc-notes .pill{min-width:46px;padding:9px 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:700 15px/1 var(--font);cursor:pointer}
.sc-notes .pill:hover{border-color:var(--ink)}
#sc-info{margin-top:18px}
#sc-info b{color:var(--ink)}

/* bpm to ms */
.bpm-in{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.bpm-in input{width:180px;font:800 54px/1 var(--font);font-stretch:110%;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:0 0 6px;outline:none}
.bpm-in input:focus{border-bottom-color:var(--ink)}
.bpm-in span{color:var(--muted);font-weight:700;letter-spacing:.14em}
.bpm-table table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bpm-table th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 8px 10px;border-bottom:1px solid var(--line)}
.bpm-table td{padding:4px 8px;border-bottom:1px solid var(--line);font-size:15px}
.bpm-table td:first-child{font-weight:700}
.bpm-table .hz{color:var(--muted)}
.ms{background:none;border:0;color:var(--ink);font:inherit;padding:6px 8px;margin-left:-8px;cursor:pointer;position:relative}
.ms small{color:var(--muted)}
.ms:hover{background:var(--bg-3)}
.ms.copied::after{content:"Copied";position:absolute;left:100%;top:50%;transform:translateY(-50%);font-size:11px;color:#0ad29f;margin-left:4px}
.bpm-tips{list-style:none;margin:22px 0 14px;padding:0;display:grid;gap:8px;color:var(--ink-2,#cfcfcb);font-size:14.5px}
.bpm-tips b{color:var(--ink)}
@media (max-width:640px){.bpm-table td,.bpm-table th{padding-left:4px;padding-right:4px;font-size:13px}.bpm-table .hz,.bpm-table th:last-child{display:none}}

/* tap */
.tap-pad{width:100%;min-height:260px;display:grid;place-content:center;gap:2px;text-align:center;background:var(--bg);border:1.5px solid var(--line);color:var(--ink);cursor:pointer;user-select:none;touch-action:manipulation;font:inherit}
.tap-pad b{font-size:84px;font-weight:800;line-height:1;font-stretch:110%;font-variant-numeric:tabular-nums}
.tap-pad span{font-weight:700;letter-spacing:.14em;color:var(--muted)}
.tap-pad small{margin-top:10px;color:var(--muted);font-size:13px}
.tap-pad:hover{border-color:var(--ink)}
.tap-pad.hit{animation:taphit .18s}
@keyframes taphit{from{background:#262626}to{background:var(--bg)}}

/* finder */
.fd-drop{display:grid;justify-items:center;gap:6px;padding:46px 20px;border:1.5px dashed rgba(255,255,255,.28);background:var(--bg);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.fd-drop svg{width:34px;height:34px;margin-bottom:6px}
.fd-drop b{font-size:18px}
.fd-drop span{color:var(--muted);font-size:14px}
.fd-drop:hover,.fd-drop.over,.fd-drop:focus-visible{border-color:var(--ink);background:#181818;outline:none}
.fd-result{margin-top:20px}
.fd-result:empty{display:none}
.fd-file{margin:0 0 12px;color:var(--ink-2,#cfcfcb)}
.fd-big{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.fd-big > div{border:1px solid var(--line);background:var(--bg);padding:18px}
.fd-big .caps{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.fd-big b{display:block;font-size:34px;font-weight:800;line-height:1.05}
.fd-big small{color:var(--muted);font-size:13px}
.fd-result p .btn{margin:6px 8px 0 0}

@media (max-width:700px){.tool{padding:18px}.ch-cards{grid-template-columns:repeat(2,1fr)}.fd-big{grid-template-columns:1fr}.tl-cta{padding:24px 20px}}

/* key shift calculator */
.tp-h{margin:0 0 16px}
.tp-h:not(:first-child){margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.tp-steps{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.tp-pm{width:52px;height:52px;background:var(--bg);border:1.5px solid var(--line);color:var(--ink);font:400 28px/1 var(--font);cursor:pointer}
.tp-pm:hover{border-color:var(--ink)}
.tp-val{min-width:110px;text-align:center}
.tp-val b{display:block;font-size:44px;font-weight:800;line-height:1;font-stretch:110%;font-variant-numeric:tabular-nums}
.tp-val span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tp-quick{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.tp-quick button{min-width:44px;padding:8px 10px;background:none;border:1px solid var(--line);color:var(--ink);font:700 13px/1 var(--font);cursor:pointer}
.tp-quick button:hover{border-color:var(--ink)}
.tp-quick button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tp-result{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:18px}
.tp-result > div{border:1px solid var(--line);background:var(--bg);padding:18px}
.tp-result > div.new{border-color:var(--ink)}
.tp-result .caps{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.tp-result b{display:block;font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.1}
.tp-result small{color:var(--muted);font-size:13px}
.tp-result > i{font-style:normal;font-size:26px;color:var(--muted)}
.tp-result.sm{display:block}
.tp-result.sm p{margin:0 0 6px;font-size:17px}
.tp-bpm{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.tp-bpm label{display:grid;gap:6px}
.tp-bpm label span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tp-bpm input{width:110px;font:400 15px/1.4 var(--font);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);padding:10px 12px;outline:none}
.tp-bpm p{flex:1;min-width:240px}
.tp-bpm b{color:var(--ink)}
@media (max-width:700px){.tp-result{grid-template-columns:1fr}.tp-result > i{transform:rotate(90deg);justify-self:center}}
.tap-pad.acc.hit{animation:tapacc .2s}
@keyframes tapacc{from{background:#3a3a3a}to{background:var(--bg)}}
#tap-metro[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.tap-snd{padding-bottom:0}
#tap-set{width:80px;margin-left:6px;font:400 14px/1.3 var(--font);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);padding:6px 8px;outline:none}
.tp-dist{margin:0;padding-bottom:12px;align-self:flex-end}
.tp-dist b{color:var(--ink)}
.tp-hint{grid-column:1/-1;margin:0}