/* free music tools */
.tool-hero{background:var(--obs);color:var(--plat);padding-block:64px 48px;position:relative;isolation:isolate;border-bottom:1px solid var(--line)}
.tool-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 90% at 85% 0%,rgba(79,172,254,.16),transparent 62%),radial-gradient(40% 70% at 0% 100%,rgba(0,242,254,.06),transparent 65%)}
.tool-hero .lead{color:var(--muted-dk)}
.cbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 14px;border-radius:12px;border:1px solid var(--field);background:rgba(255,255,255,.03);color:var(--plat);font-size:15px;font-weight:600;cursor:pointer;line-height:1.15;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.cbtn:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.cbtn[aria-pressed="true"]{background:var(--cyan);color:var(--on-accent);border-color:var(--cyan)}
.cbtn.sm{min-height:38px;font-size:14px;border-radius:999px;padding:0 14px}
.picker{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-b)}
.picker .lbl{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--plat-3)}
.roots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.roots .cbtn{font-size:14px;padding:4px 4px}
.types{display:flex;flex-wrap:wrap;gap:8px}
.toolbar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;justify-content:space-between}
.search{display:flex;gap:8px;flex:1 1 260px;max-width:460px;min-width:0;width:100%}
.search input{flex:1;min-width:0;font:inherit;font-size:16px;min-height:48px;padding:0 16px;border:1px solid var(--field);border-radius:999px;background:rgba(255,255,255,.04);color:var(--plat)}
.search input::placeholder{color:var(--plat-4)}
.search input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow)}
.search input:focus{outline:2px solid var(--blue);outline-offset:1px}
.res-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.res-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;min-width:0}
.res-sym{font-size:clamp(60px,15vw,104px);font-weight:700;letter-spacing:-.045em;line-height:1}
.res-name{font-size:clamp(20px,5vw,28px);color:var(--slate)}
.nchips{display:flex;flex-wrap:wrap;gap:10px}
.nchip{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:10px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b)}
.nchip b{font-size:24px;line-height:1.1}
.nchip span{font-size:13px;color:var(--slate)}
.nchip.root{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent)}
.nchip.root span{color:rgba(13,15,18,.7)}
.icard{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--r-lg);border:1px solid var(--glass-b);background:var(--glass);min-width:0}
.icard .gsvg{width:100%;max-width:300px;margin:0 auto;display:block}
.icard .psvg{width:100%;display:block}
.icard .tabs{display:flex;flex-wrap:wrap;gap:8px}
.icard .meta{font-size:14px;color:var(--slate);text-align:center}
.prog{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid var(--line)}
.prog-h{display:flex;align-items:baseline;gap:12px}
.acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.acard{font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 12px;border-radius:14px;border:1px solid var(--glass-b);background:var(--glass);color:var(--plat);cursor:pointer;min-width:0;transition:border-color .2s,transform .2s,box-shadow .2s}
.acard:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--glow)}
.acard.on{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan),var(--glow)}
.acard .gsvg{width:100%;max-width:120px;display:block}
.acard b{font-size:17px}
.acard .small{font-size:12px}
/* tuner */
.tuner{display:flex;flex-direction:column;align-items:center;gap:20px;padding:28px 20px;border-radius:var(--r-lg);background:radial-gradient(120% 90% at 50% 0%,rgba(79,172,254,.12),transparent 60%),var(--glass);border:1px solid var(--glass-b);color:var(--plat)}
.dial{position:relative;width:100%;max-width:440px}
.dial svg{width:100%;height:auto;display:block}
.dial #tn-needle{transform-origin:200px 200px;transition:transform .18s ease-out}
.dial[data-state="ok"] .zone-ok{stroke:#00F2FE;filter:drop-shadow(0 0 8px rgba(0,242,254,.7))}
.dial[data-state="ok"] #tn-note{color:#00F2FE}
.tuner:has(.dial[data-state="ok"]) #tn-note{color:#00F2FE;text-shadow:0 0 24px rgba(0,242,254,.45)}
.dial[data-state="near"] #tn-note{color:#4FACFE}
.tuner:has(.dial[data-state="near"]) #tn-note{color:#4FACFE}
.dial[data-state="far"] #tn-note{color:var(--plat-3)}
.tuner:has(.dial[data-state="far"]) #tn-note{color:var(--plat-3)}
.readout{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.readout .big{font-size:clamp(72px,20vw,120px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.readout .big sub{font-size:.32em;font-weight:600;color:var(--muted-dk);vertical-align:baseline;margin-left:4px}
.readout .hz{font-size:17px;color:var(--muted-dk);font-variant-numeric:tabular-nums}
.readout .status{font-size:clamp(18px,4.6vw,22px);font-weight:600;min-height:1.4em}
.tstrings{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;max-width:520px}
.tstrings button{min-height:52px;border-radius:12px;border:1px solid var(--line-dk);background:transparent;color:var(--text-dk);font-weight:700;font-size:15px;cursor:pointer;line-height:1.1}
.tstrings button small{display:block;font-size:11px;font-weight:500;color:var(--muted-dk)}
.tstrings button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent)}
.tstrings button[aria-pressed="true"] small{color:rgba(13,15,18,.7)}
.tstrings button.live{box-shadow:inset 0 0 0 2px var(--indigo)}
.tuner .seg button{color:var(--muted-dk)}
/* resources */
.fb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--glass-b);background:#14171C}
.fb-wrap svg{display:block;min-width:900px;width:100%;height:auto}
.mt-dots{display:flex;gap:10px}
.mt-dots i{width:18px;height:18px;border-radius:50%;background:var(--glass-3);transition:background .08s,box-shadow .08s}
.mt-dots i.first{box-shadow:inset 0 0 0 2px var(--blue)}
.mt-dots i.on{background:var(--cyan);box-shadow:0 0 12px rgba(0,242,254,.6)}
.ok-t{color:var(--cyan)!important;font-weight:650}.bad-t{color:var(--plat)!important;font-weight:650}
.staff svg{width:100%;max-width:640px;height:auto;display:block}
.dl-list{display:grid;gap:10px}
.dl-item{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--glass-b);border-radius:14px;background:var(--glass);transition:border-color .2s,box-shadow .2s}
.dl-item:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.vals{width:100%;border-collapse:collapse;font-size:15px}
.vals td,.vals th{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.vals th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
@media (min-width:640px){.acards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){
  .picker{padding:28px}
  .roots{grid-template-columns:repeat(12,minmax(0,1fr))}
  .acards{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
  .icard{padding:32px}
  .tool-hero{padding-block:96px 64px}
}
.tuner .seg button[aria-pressed="true"]{color:var(--on-accent)}