/* The tuner widget, on /tools/ pages and inside articles, from the Figma Make tuner
   (M4H Design Fresh, Tuner.tsx). Everything is scoped to .m4h-tuner so an article's prose
   styles cannot reach in and the tuner cannot leak out. The root measures its own width and
   the card inside lays out by it: two columns on a tool page, stacked in an article or on a
   phone, whatever the window is doing. */
.m4h-tuner{--t-ink:#1a1b22;--t-muted:#47464a;--t-faint:#6b6a70;--t-line:rgb(0 0 0/.08);--t-chip:#f4f2fd;--t-tuned:#047857;--t-tuned-soft:#ecfdf5;--t-low:#b45309;--t-warn-soft:#fff7ed;
  --accent:#2563eb;--accent-button:#2563eb;--accent-soft:#eff6ff;--accent-text:#1d4ed8;--wash-deep:rgb(23 37 84/.9);--wash-mid:rgb(30 58 138/.15);
  container-type:inline-size;box-sizing:border-box;margin:40px 0;color:var(--t-ink);font-family:inherit;text-align:left;line-height:1.5}
.m4h-tuner[data-instrument=violin]{--accent:#d97706;--accent-button:#b45309;--accent-soft:#fffbeb;--accent-text:#92400e;--wash-deep:rgb(69 26 3/.9);--wash-mid:rgb(120 53 15/.15)}
.m4h-tuner[data-instrument=ukulele]{--accent:#059669;--accent-button:#047857;--accent-soft:#ecfdf5;--accent-text:#047857;--wash-deep:rgb(2 44 34/.9);--wash-mid:rgb(6 78 59/.15)}
.m4h-tuner[data-instrument=chromatic]{--accent:#7c3aed;--accent-button:#7c3aed;--accent-soft:#f5f3ff;--accent-text:#6d28d9;--wash-deep:rgb(46 16 101/.9);--wash-mid:rgb(76 29 149/.2)}
.m4h-tuner *{box-sizing:border-box}
.m4h-tuner p,.m4h-tuner figure{margin:0}
.m4h-tuner__card{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--t-line);border-radius:12px;overflow:hidden;box-shadow:0 20px 70px rgb(0 0 0/.05)}

.m4h-tuner__photo{position:relative;min-height:240px;overflow:hidden;background:#000}
.m4h-tuner .m4h-tuner__photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover;filter:saturate(.92)}
.m4h-tuner__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--wash-deep),var(--wash-mid) 55%,transparent)}
.m4h-tuner__caption{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:column;padding:24px 20px;color:#fff}
.m4h-tuner .m4h-tuner__eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t-faint)}
.m4h-tuner__caption .m4h-tuner__eyebrow{color:rgb(255 255 255/.65)}
.m4h-tuner__name{margin-top:8px;font-size:clamp(2.4rem,9cqi,4.5rem);line-height:1;letter-spacing:-.05em;font-weight:600}
.m4h-tuner__about{margin-top:12px;max-width:24rem;font-size:15px;line-height:1.55;color:rgb(255 255 255/.8)}
.m4h-tuner__credit{margin-top:16px;font-size:11px;color:rgb(255 255 255/.6)}

.m4h-tuner__main{display:flex;flex-direction:column}
.m4h-tuner__body{flex:1;display:flex;flex-direction:column;width:100%;max-width:576px;margin:0 auto;padding:28px 20px}
.m4h-tuner__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.m4h-tuner .m4h-tuner__sub{margin-top:6px;font-size:14px;color:var(--t-faint);font-variant-numeric:tabular-nums}
.m4h-tuner__pill{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:6px 12px;border-radius:999px;background:var(--t-chip);color:var(--t-muted);font-size:13px;font-weight:500}
.m4h-tuner__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:rgb(0 0 0/.25)}
.m4h-tuner:is([data-state=listening],[data-state=close]) .m4h-tuner__pill{background:var(--accent-soft);color:var(--accent-text)}
.m4h-tuner:is([data-state=listening],[data-state=close]) .m4h-tuner__pill::before{background:var(--accent)}
.m4h-tuner[data-state=tuned] .m4h-tuner__pill{background:var(--t-tuned-soft);color:var(--t-tuned)}
.m4h-tuner[data-state=tuned] .m4h-tuner__pill::before{background:var(--t-tuned)}
.m4h-tuner:is([data-state=low],[data-state=high]) .m4h-tuner__pill{background:var(--t-warn-soft);color:var(--t-low)}
.m4h-tuner:is([data-state=low],[data-state=high]) .m4h-tuner__pill::before{background:var(--t-low)}
.m4h-tuner__tuning{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:var(--t-muted)}
.m4h-tuner__tuning select{min-height:44px;padding:8px 12px;border:1px solid rgb(0 0 0/.12);border-radius:10px;background:#fff;color:var(--t-ink);font:inherit;font-size:14px}

.m4h-tuner__display{margin-top:16px;text-align:center}
.m4h-tuner__note-row{display:flex;align-items:flex-start;justify-content:center}
.m4h-tuner__note{font-size:clamp(6rem,24cqi,11rem);line-height:.8;letter-spacing:-.08em;font-weight:600;color:var(--accent-text)}
.m4h-tuner[data-state=tuned] .m4h-tuner__note{color:var(--t-tuned)}
.m4h-tuner__octave{margin:6px 0 0 8px;font-size:28px;line-height:1;color:rgb(71 70 74/.5)}
.m4h-tuner .m4h-tuner__cents{margin-top:24px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-muted)}

.m4h-tuner__scale{position:relative;height:64px;margin:36px 8px 0}
.m4h-tuner__line{position:absolute;left:0;right:0;top:32px;height:1px;background:rgb(0 0 0/.15)}
.m4h-tuner__zone{position:absolute;top:24px;height:17px;left:calc(50% - var(--t-zone,10%) / 2);width:var(--t-zone,10%);border-radius:999px;background:rgb(4 120 87/.14)}
.m4h-tuner__tick{position:absolute;top:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.m4h-tuner__tick::before{content:"";display:block;width:1px;height:8px;background:rgb(0 0 0/.2)}
.m4h-tuner__tick.is-center::before{height:16px;background:var(--accent)}
.m4h-tuner__tick span{margin-top:8px;white-space:nowrap;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;color:rgb(71 70 74/.65)}
.m4h-tuner__dot{position:absolute;top:26px;left:50%;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgb(0 0 0/.08);transition:left .2s ease-out,background-color .2s}
.m4h-tuner[data-state=tuned] .m4h-tuner__dot{background:var(--t-tuned)}
.m4h-tuner:is([data-state=low],[data-state=high]) .m4h-tuner__dot{background:var(--t-low)}
.m4h-tuner:is([data-state=idle],[data-state=error]) .m4h-tuner__dot{opacity:.4}
.m4h-tuner__ends{display:flex;justify-content:space-between;margin-top:4px;font-size:13px;color:rgb(71 70 74/.75)}
.m4h-tuner .m4h-tuner__status{min-height:52px;margin-top:20px;text-align:center;font-size:17px;line-height:1.5;color:var(--t-muted)}
.m4h-tuner[data-state=tuned] .m4h-tuner__status{color:var(--t-tuned);font-weight:600}
.m4h-tuner[data-state=error] .m4h-tuner__status{color:#b42318}

.m4h-tuner .m4h-tuner__pick{margin:16px 0 10px;font-size:14px;font-weight:500;color:var(--t-muted)}
.m4h-tuner__strings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.m4h-tuner__strings[data-count="6"]{grid-template-columns:repeat(3,1fr)}
.m4h-tuner__string{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80px;padding:8px;border:1px solid rgb(0 0 0/.1);border-radius:12px;background:#fff;color:var(--t-ink);font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.m4h-tuner__string strong{font-size:26px;line-height:1.1;font-weight:600}
.m4h-tuner__string small{margin-top:4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgb(71 70 74/.65)}
.m4h-tuner__string:hover{border-color:rgb(0 0 0/.35)}
.m4h-tuner__string.is-heard{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.m4h-tuner__string[aria-pressed=true]{background:var(--accent-button);border-color:transparent;color:#fff;box-shadow:0 10px 20px rgb(0 0 0/.12)}
.m4h-tuner__string[aria-pressed=true] small{color:rgb(255 255 255/.75)}
.m4h-tuner__start,.m4h-tuner__hear{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;margin-top:12px;border:0;border-radius:12px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .15s,background-color .15s,box-shadow .15s}
.m4h-tuner__start svg,.m4h-tuner__hear svg{width:20px;height:20px;flex-shrink:0}
.m4h-tuner__start{margin-top:16px;background:var(--accent-button);color:#fff}
.m4h-tuner__start:hover{opacity:.9}
.m4h-tuner__start[aria-pressed=true]{background:#f1f0f4;color:var(--t-ink)}
.m4h-tuner__hear{background:var(--accent-soft);color:var(--accent-text)}
.m4h-tuner__hear:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.m4h-tuner button:focus-visible,.m4h-tuner select:focus-visible,.m4h-tuner a:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.m4h-tuner .m4h-tuner__fine{margin-top:14px;text-align:center;font-size:13px;line-height:1.5;color:var(--t-faint)}

.m4h-tuner__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-top:1px solid var(--t-line)}
.m4h-tuner .m4h-tuner__tip-title{font-size:15px;font-weight:600}
.m4h-tuner .m4h-tuner__tip{margin-top:2px;font-size:14px;color:var(--t-faint)}
.m4h-tuner__guide{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border:1px solid rgb(0 0 0/.1);border-radius:50%;color:var(--t-ink)}
.m4h-tuner__guide svg{width:16px;height:16px}
.m4h-tuner__guide:hover{border-color:rgb(0 0 0/.35)}
.m4h-tuner__fallback{padding:24px;border:1px solid var(--t-line);border-radius:12px;font-size:16px;color:var(--t-muted)}

@container (min-width:560px){
  .m4h-tuner__body{padding:40px}
  .m4h-tuner__foot{padding:20px 40px}
  .m4h-tuner__strings[data-count="6"]{grid-template-columns:repeat(6,1fr)}
  .m4h-tuner__photo{min-height:300px}
  .m4h-tuner__caption{padding:28px 40px}
}
@container (min-width:900px){
  .m4h-tuner__card{grid-template-columns:5fr 7fr;min-height:620px}
  .m4h-tuner__photo{min-height:100%}
  .m4h-tuner__caption{padding:40px}
  .m4h-tuner__body{justify-content:center;padding:48px}
}
@media(prefers-reduced-motion:reduce){.m4h-tuner__dot,.m4h-tuner__string{transition:none}}