/* Yalle Media: the free tools (tuner, metronome, chord finder). Loaded only on their pages. */
.tun, .met, .cf { --ok: #4ade80; --near: #fbbf24; --panel: linear-gradient(180deg, #1f1f22, #18181a); }
.tun, .met, .cf__start { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; margin: 8px 0 34px; padding: clamp(18px, 5vw, 34px);
  border-radius: calc(var(--r) + 6px); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px #000; text-align: center; }
.tun select, .met select { min-height: 44px; min-width: 0; max-width: 100%; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--input-bg); color: #fff; font: inherit; }
.tun button, .met button, .cf button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* a tool page is a small app: one centred column */
.layout--full .page { max-width: 780px; margin-inline: auto; }

/* ---- Tuner */
.tun__top { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: 0; }
.tun__top select { flex: 0 1 auto; text-overflow: ellipsis; }
.tun__auto { flex: none; }
.tun__auto { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.tun__auto[aria-pressed="true"] { background: rgba(163, 36, 42, .3); color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.tun__meter { display: grid; justify-items: center; width: 100%; }
.tun__dial { position: relative; width: min(100%, 380px); aspect-ratio: 2 / 1; overflow: hidden; }
/* the dial's face: a soft arc, green in the middle where the string is in tune */
.tun__dial::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from -45deg, rgba(236, 107, 115, .16) 0 38deg, rgba(251, 191, 36, .16) 38deg 42deg, rgba(74, 222, 128, .28) 42deg 48deg, rgba(251, 191, 36, .16) 48deg 52deg, rgba(236, 107, 115, .16) 52deg 90deg, transparent 90deg);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79%); mask: radial-gradient(closest-side, transparent 78%, #000 79%); }
.tun__dial::after { content: ""; position: absolute; left: calc(50% - 9px); bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 3px var(--bg); }
.tun__ticks, .tun__tick, .tun__needle { position: absolute; left: 50%; bottom: 0; transform-origin: 50% 100%; }
.tun__ticks { width: 0; height: 100%; }
.tun__tick { left: -1px; width: 2px; height: 100%; }
.tun__tick::before { content: ""; position: absolute; left: 0; top: 2%; width: 2px; height: 7%; border-radius: 2px; background: var(--line-strong); }
.tun__tick--end::before { height: 10%; background: var(--muted); }
.tun__tick--mid::before { left: -1px; width: 4px; height: 13%; background: var(--ok); }
.tun__needle { left: calc(50% - 2px); width: 4px; height: 90%; border-radius: 4px 4px 0 0; background: linear-gradient(var(--link), rgba(236, 107, 115, .15));
  transition: transform .14s linear, background-color .2s; will-change: transform; }
.tun__flat, .tun__sharp { position: absolute; bottom: 4%; color: var(--muted); font-size: 1.15rem; font-weight: 800; }
.tun__flat { left: 5%; } .tun__sharp { right: 5%; }
.tun__note { margin: 6px 0 0; min-height: 1em; color: #fff; font-size: clamp(3.6rem, 17vw, 5.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; transition: color .2s; }
.tun__note small { margin-left: 2px; color: var(--muted); font-size: .3em; font-weight: 700; letter-spacing: 0; }
.tun__read { display: flex; justify-content: center; gap: 14px; margin: 6px 0 0; min-height: 1.5em; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.tun__read span:first-child { color: var(--text); }
.tun__level { width: min(100%, 220px); height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.tun__level i { display: block; height: 100%; background: var(--link); transform: scaleX(0); transform-origin: 0 50%; transition: transform .08s linear; }
.tun__status { margin: 0; min-height: 3.2em; max-width: 36ch; color: var(--text); }
.tun.is-denied .tun__status { color: var(--link); }
.tun.is-close .tun__needle { background: linear-gradient(var(--near), rgba(251, 191, 36, .15)); }
.tun.is-tuned .tun__needle { background: linear-gradient(var(--ok), rgba(74, 222, 128, .15)); }
.tun.is-tuned .tun__note, .tun.is-tuned .tun__read span:first-child { color: var(--ok); }
.tun:not(.is-heard) .tun__needle { opacity: .45; }
.tun__strings { display: flex; justify-content: center; gap: clamp(5px, 2vw, 10px); width: 100%; }
.tun__strings[hidden] { display: none; }
.tun__str { position: relative; display: grid; place-content: center; flex: 0 1 56px; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--surface-3); color: #fff; font: inherit; line-height: 1; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.tun__str b { font-size: 1.15rem; }
.tun__str small { color: var(--muted); font-size: .68rem; }
.tun__str:hover { background: #38363a; }
.tun__str[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--link); }
.tun__str.is-on { background: var(--accent); box-shadow: 0 0 0 3px rgba(236, 107, 115, .45); }
.tun__str.is-on small { color: #ffd9db; }
.tun__str.is-done::after { content: "✓"; position: absolute; right: -3px; top: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #06240f; font-size: .75rem; font-weight: 900; }
.tun__go, .met__play { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; width: min(100%, 320px); font-size: 1.1rem; }
.tun__go::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.tun__go[aria-pressed="true"]::before { border-radius: 2px; }
.tun__go[aria-pressed="true"], .met__play[aria-pressed="true"] { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--accent); }
.tun__pitch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--muted); font-size: .92rem; }
.tun__pitch output { min-width: 3ch; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.tun__pitch button { min-width: 40px; min-height: 40px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.tun__pitch button:hover { background: var(--accent); }

/* ---- Metronome */
.met__pulse { position: relative; display: grid; place-content: center; justify-items: center; width: min(72vw, 250px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #232326 70%, #1b1b1d); box-shadow: inset 0 0 0 2px var(--line-strong); line-height: 1; }
.met__pulse::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 3px var(--link); opacity: 0; }
.met__pulse.is-beat::before { animation: met-beat .28s ease-out; }
.met__pulse.is-one::before { box-shadow: 0 0 0 5px var(--link), 0 0 38px 4px var(--glow); }
@keyframes met-beat { from { opacity: 1; transform: scale(.97); } to { opacity: 0; transform: scale(1.06); } }
.met__bpm { width: 3.2ch; padding: 0; border: 0; border-radius: 12px; background: none; color: #fff; font: inherit; font-size: clamp(3.6rem, 17vw, 5rem); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.met__bpm::-webkit-outer-spin-button, .met__bpm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.met__bpm:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.met__unit { margin-top: 2px; color: var(--muted); font-size: .8rem; font-weight: 800; letter-spacing: .14em; }
.met__word { margin-top: 8px; color: var(--link); font-weight: 700; }
.met__beats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 44px; max-width: 340px; }
.met__dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.met__dot::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface-3); transition: background-color .05s, box-shadow .05s, transform .05s; }
.met__dot--2::before { inset: 9px; box-shadow: inset 0 0 0 2px var(--link); }
.met__dot--0::before { background: none; box-shadow: inset 0 0 0 2px var(--line-strong); opacity: .7; }
.met__dot.is-on::before { background: var(--link); transform: scale(1.2); box-shadow: 0 0 18px var(--glow); }
.met__dot--0.is-on::before { background: none; box-shadow: inset 0 0 0 2px var(--link); }
.met__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.met__row label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; font-weight: 700; }
.met__row--tempo input { order: -1; flex: 1 1 100%; max-width: 460px; height: 44px; accent-color: var(--accent); }
.met__step { min-width: 52px; min-height: 44px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.met__step:hover { background: var(--accent); }
.met__tap { min-height: 44px; }
.met__play::before { content: ""; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.met__play[aria-pressed="true"]::before { width: 14px; height: 14px; border: 0; border-radius: 2px; background: currentColor; }
.met__vol input { width: min(52vw, 200px); height: 44px; accent-color: var(--accent); }

/* ---- Chord finder */
.cf__listen { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; width: min(64vw, 210px); aspect-ratio: 1; border: 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-hover), var(--accent) 60%, var(--brand)); color: #fff; font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 24px 50px -22px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .15s; }
.cf__listen:hover { transform: scale(1.03); }
.cf__listen:active { transform: scale(.98); }
.cf__listen svg { width: 46px; height: 46px; }
.cf__ring { position: absolute; inset: -10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--link); opacity: 0; transform: scale(calc(1 + var(--level, 0) * .12)); transition: transform .1s linear; }
.cf.is-listening .cf__ring { opacity: .9; }
.cf.is-listening .cf__listen { animation: cf-breathe 1.6s ease-in-out infinite; }
@keyframes cf-breathe { 50% { box-shadow: 0 24px 60px -14px var(--glow), 0 0 0 10px rgba(163, 36, 42, .18), inset 0 0 0 1px rgba(255, 255, 255, .12); } }
.cf__or { margin: 0; color: var(--muted); font-size: .9rem; }
.cf__file { display: inline-flex; align-items: center; min-height: 48px; cursor: pointer; }
.cf__file:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.cf.is-busy .cf__file, .cf.is-listening .cf__file, .cf.is-listening .cf__or { opacity: .4; pointer-events: none; }
.cf__bar { width: min(100%, 300px); height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.cf__bar[hidden] { display: none; }
.cf__bar i { display: block; width: 100%; height: 100%; background: var(--link); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .5s linear; }
.cf__bar--busy i { width: 40%; transform: none; animation: cf-slide 1.1s ease-in-out infinite alternate; }
@keyframes cf-slide { from { margin-left: 0; } to { margin-left: 60%; } }
.cf__status { margin: 0; min-height: 3.2em; max-width: 40ch; color: var(--text); }
.cf__result[hidden] { display: none; }
.cf__result { display: grid; gap: 18px; margin: 0 0 34px; }
.cf__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cf__fact { padding: 14px 16px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cf__fact small { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cf__fact b { display: block; margin-top: 4px; color: #fff; font-size: 1.35rem; }
.cf__fact span { color: var(--muted); font-size: .82rem; }
.cf__prog { padding: clamp(16px, 4vw, 26px); border-radius: calc(var(--r) + 4px); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cf__prog h2, .cf__shapes h2, .cf__line h2 { margin: 0 0 12px; font-size: 1rem; color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cf__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cf__chip { display: grid; justify-items: center; gap: 2px; min-width: 76px; padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--surface-3); color: #fff; font: inherit; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.cf__chip b { font-size: 1.6rem; line-height: 1.1; }
.cf__chip small { color: var(--muted); font-size: .78rem; font-weight: 700; }
.cf__chip:hover { background: #38363a; }
.cf__chip[aria-pressed="true"] { background: var(--accent); }
.cf__chip[aria-pressed="true"] small { color: #ffd9db; }
.cf__chip.is-now { box-shadow: 0 0 0 3px var(--link); }
.cf__note { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
.cf__warn { margin: 0; padding: 12px 16px; border-radius: var(--r-sm); background: rgba(251, 191, 36, .1); color: #fde68a; font-size: .92rem; }
.cf__tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: var(--r-pill); background: var(--surface-3); }
.cf__tabs button { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.cf__tabs button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.cf__shape { display: grid; grid-template-columns: minmax(0, 190px) 1fr; align-items: center; gap: 18px; padding: 16px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cf__shape svg { width: 100%; height: auto; max-height: 230px; }
.cf__shape h3 { margin: 0 0 4px; color: #fff; font-size: 1.5rem; }
.cf__shape p { margin: 0 0 8px; }
@media (max-width: 460px) { .cf__shape { grid-template-columns: 1fr; justify-items: center; text-align: center; } .cf__shape svg { max-width: 190px; } }
.cf__time { display: flex; height: 46px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); cursor: pointer; }
.cf__seg { flex: 0 0 auto; min-width: 2px; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--bg); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.cf__seg.is-now { box-shadow: inset 0 0 0 2px #fff; }
.cf__audio { width: 100%; margin-top: 12px; }
.cf__again { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .tun__needle, .met__dot::before, .cf__ring, .cf__listen { transition: none; } .met__pulse.is-beat::before, .cf.is-listening .cf__listen, .cf__bar--busy i { animation: none; } }

/* chord diagrams drawn by the engine (guitar and ukulele fretboards, a piano octave) */
.cf .diagram { display: block; width: 100%; height: auto; }
.cf .diagram .fret, .cf .diagram .string { stroke: var(--line-strong); stroke-width: 1.2; }
.cf .diagram .nut, .cf .diagram .dot, .cf .diagram .barre { fill: #fff; }
.cf .diagram .finger { fill: var(--bg); font-size: 9px; font-weight: 700; }
.cf .diagram .marker { fill: var(--muted); font-size: 11px; }
.cf .diagram .marker.open { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.cf .diagram .fret-number { fill: var(--muted); font-size: 9.5px; }
.cf .diagram .tab-label { fill: var(--muted); font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cf .diagram-piano .key.white { fill: #f4f2f3; stroke: #8a878d; stroke-width: 1; }
.cf .diagram-piano .key.black { fill: #151516; }
.cf .diagram-piano .key.white.on { fill: #f6b9bd; stroke: var(--accent); }
.cf .diagram-piano .key.black.on, .cf .diagram-piano .key.white.root { fill: var(--accent-hover); }
.cf .diagram-piano .key-label { fill: #4a474d; font-size: 8.5px; }
.cf .diagram-piano .key-label.on-black { fill: #fff; }