/*! Ukulele Tuner 2.0.0 | pitchdetector.com */
.put{--ub:#2563eb;--ub2:#1d4ed8;--uv:#7c3aed;--uv2:#6d28d9;--un:#0f172a;--ug:#15803d;--ua:#b45309;--ur:#b91c1c;--ul:#e2e8f0;--um:#475569;display:grid;gap:14px;max-width:1080px;margin:0 auto 1.75em;color:var(--un);line-height:1.45;font-size:16px}
.put *,.put *::before,.put *::after{box-sizing:border-box}
.put [hidden]{display:none!important}
.put .put-title{margin:0;font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);line-height:1.2;color:var(--un)}
@media (min-width:880px){.put{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}.put .put-title{grid-column:1/-1}}

/* Card: light and friendly, violet headstock */
.put-card{position:relative;background:linear-gradient(180deg,#f5f3ff 0%,#fff 60%);border:1px solid #ddd6fe;border-radius:22px;padding:12px 14px 10px;box-shadow:0 8px 26px rgba(124,58,237,.12);transition:box-shadow .3s}
.put-card.is-lock{box-shadow:0 0 0 3px #22c55e,0 8px 26px rgba(21,128,61,.25)}
.put.is-done .put-card{box-shadow:0 0 0 3px #22c55e,0 8px 26px rgba(21,128,61,.3)}
.put-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:4px;background:#ede9fe;border-radius:14px}
.put .put-sizes button{min-height:44px;margin:0;padding:0 4px;border:0;border-radius:10px;background:transparent;color:#4c1d95;font:700 .9rem system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.put .put-sizes button:hover,.put .put-sizes button:focus{background:#ddd6fe;color:#4c1d95}
.put .put-sizes button[aria-pressed=true]{background:#7c3aed;color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.35)}

/* Tuning bubble */
.put-dial{position:relative;max-width:360px;margin:6px auto 0}
.put-svgd{display:block;width:100%;height:auto}
.put-track{fill:none;stroke:#ede9fe;stroke-width:18;stroke-linecap:round}
.put-zone{fill:none;stroke:#22c55e;stroke-width:18;opacity:.55}
.put-tm{stroke:#c4b5fd;stroke-width:1.4}.put-tM{stroke:#8b5cf6;stroke-width:1.8}.put-t0{stroke:#16a34a;stroke-width:3}
.put-lab text{fill:#6d28d9;font:700 9.5px system-ui,-apple-system,"Segoe UI",sans-serif;text-anchor:middle}
.put-fl,.put-sh{fill:#64748b;font:700 9px system-ui,-apple-system,"Segoe UI",sans-serif}
.put-fl{text-anchor:middle}.put-sh{text-anchor:middle}
.put-card[data-dir=up] .put-fl,.put-card[data-dir=down] .put-sh{fill:#b45309}
.put-bub circle{fill:#c4b5fd;stroke:#fff;stroke-width:3}.put-bub path{fill:#c4b5fd}
.put-card[data-state=in] .put-bub circle,.put-card[data-state=in] .put-bub path{fill:#16a34a}
.put-card[data-state=close] .put-bub circle,.put-card[data-state=close] .put-bub path{fill:#d97706}
.put-card[data-state=off] .put-bub circle,.put-card[data-state=off] .put-bub path{fill:#dc2626}
.put-card[data-state=hold] .put-bub{opacity:.45}
.put-hub{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:58%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:58%}
.put .put-go{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 24px;margin:0 0 4px;border-radius:999px;border:0;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font:700 1.05rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(124,58,237,.4);white-space:nowrap}
.put .put-go:hover,.put .put-go:focus{background:linear-gradient(135deg,#6d28d9,#1d4ed8);color:#fff}
.put .put-go:disabled{opacity:.6;cursor:wait}
.put-mic{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.3)}
.put .put-note{margin:0;font:800 56px/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--un);letter-spacing:-.02em;white-space:nowrap}
.put .put-note small{font-size:.4em;font-weight:700;color:var(--uv);margin-left:1px}
.put:not(.is-on) .put-note{display:none}
.put-card[data-state=in] .put-note{color:var(--ug)}
.put-card[data-state=hold] .put-note{opacity:.5}
.put .put-sub{margin:2px 0 0;font-size:.8rem;color:var(--uv2);font-weight:600;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.put .put-cue{margin:6px 0 0;text-align:center;font-weight:800;font-size:1.1rem;line-height:1.25;color:var(--um)}
.put .put-cue[data-state=in]{color:var(--ug)}.put .put-cue[data-state=close]{color:var(--ua)}.put .put-cue[data-state=off]{color:var(--ur)}
.put-strobe{display:block;width:100%;max-width:360px;height:10px;margin:6px auto 4px;border-radius:5px;background:#f5f3ff}

/* 2+2 headstock */
.put-head{position:relative;width:100%;max-width:340px;margin:4px auto 0}
.put-head::before{content:"";display:block;padding-top:57.5%}
.put-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.put-shaft{fill:#a8a29e}
.put-hs{stroke:#4c1d95;stroke-width:1.5}
.put-nut{fill:#fff7ed}
.put-str{fill:none;stroke:#e7e5e4;stroke-linejoin:round;transition:stroke .2s}
.put-str[data-tuned="1"]{stroke:#86efac}
.put-str[data-cur=sel]{stroke:#93c5fd}
.put-str[data-cur=live]{stroke:#fbbf24;filter:drop-shadow(0 0 3px rgba(251,191,36,.9))}
.put-str[data-cur=live][data-dir=in]{stroke:#4ade80;filter:drop-shadow(0 0 4px rgba(74,222,128,.9))}
.put-post{fill:#f5f5f4;stroke:#4c1d95;stroke-width:2}
.put-post[data-tuned="1"]{fill:#4ade80}
.put-post[data-cur=live],.put-post[data-cur=sel]{fill:#60a5fa}
.put .put-peg{position:absolute;transform:translate(-50%,-50%);width:56px;height:56px;margin:0;padding:0;border-radius:50%;border:2px solid #a78bfa;background:radial-gradient(circle at 35% 30%,#fff 0%,#faf5ff 55%,#e9d5ff 100%);color:var(--un);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;line-height:1;box-shadow:0 3px 8px rgba(76,29,149,.25);transition:box-shadow .2s,border-color .2s}
.put .put-peg:hover,.put .put-peg:focus{border-color:#2563eb;background:radial-gradient(circle at 35% 30%,#fff 0%,#eff6ff 60%,#bfdbfe 100%);color:var(--un)}
.put-pn{font:800 1.15rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;white-space:nowrap}
.put-pn small{font-size:.62em;color:var(--uv2);margin-left:1px}
.put-pk{font-size:.66rem;font-weight:700;color:var(--um);margin-top:2px}
.put .put-peg[aria-pressed=true]{border-color:#2563eb;box-shadow:0 0 0 3px #93c5fd}
.put .put-peg[data-cur=live]{border-color:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.4);animation:put-pulse 1.1s ease-in-out infinite}
.put .put-peg[data-cur=live][data-dir=in]{border-color:#16a34a;box-shadow:0 0 0 4px rgba(74,222,128,.55);animation:none}
.put .put-peg[data-tuned="1"]{background:radial-gradient(circle at 35% 30%,#fff 0%,#dcfce7 55%,#86efac 100%);border-color:#15803d}
.put .put-peg[data-tuned="1"] .put-pk{color:#15803d;font-size:.8rem}
.put .put-peg[data-dir=up]::after,.put .put-peg[data-dir=down]::after{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:#b45309;color:#fff;font:800 13px/22px system-ui,sans-serif;text-align:center}
.put .put-peg[data-dir=up]::after{content:"↑"}
.put .put-peg[data-dir=down]::after{content:"↓"}
@keyframes put-pulse{50%{box-shadow:0 0 0 9px rgba(245,158,11,.12)}}
@media (prefers-reduced-motion:reduce){.put .put-peg[data-cur=live]{animation:none}}
.put-tuns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.put .put-tuns button{min-height:48px;padding:4px 14px;border-radius:12px;border:1px solid #ddd6fe;background:#fff;color:var(--un);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;line-height:1.15}
.put .put-tuns button b{font-size:.9rem}
.put .put-tuns button span{font-size:.72rem;color:var(--um)}
.put .put-tuns button:hover,.put .put-tuns button:focus{background:#f5f3ff;color:var(--un)}
.put .put-tuns button[aria-pressed=true]{background:#7c3aed;border-color:#7c3aed;color:#fff}
.put .put-tuns button[aria-pressed=true] span{color:#ede9fe}
.put-foot{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;margin:8px 2px 0;font-size:.8rem;color:var(--um);min-height:44px}
.put .put-stop{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid #7c3aed;background:#fff;color:#6d28d9;font:700 .92rem system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.put .put-stop:hover,.put .put-stop:focus{background:#f5f3ff;color:#5b21b6}

/* Side */
.put-side{display:grid;gap:12px;align-content:start;min-width:0}
.put-panel{background:#fff;border:1px solid var(--ul);border-radius:16px;padding:14px}
.put .put-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.put .put-read div{background:#f5f3ff;border-radius:10px;padding:6px;text-align:center;min-width:0}
.put .put-read dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--uv2)}
.put .put-read dd{margin:0;font:700 .95rem/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--un);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.put .put-prog{margin:10px 0 8px;font-weight:700;font-size:.95rem}
.put .put-prog[data-done="1"]{color:var(--ug)}
.put-btns{display:flex;flex-wrap:wrap;gap:8px}
.put .put-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;color:var(--un);font:700 .9rem system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.put .put-chip:hover,.put .put-chip:focus{background:#f5f3ff;color:var(--uv2)}
.put .put-chip[aria-pressed=true]{background:#f5f3ff;border-color:var(--uv);color:var(--uv2)}
.put .put-chip[aria-pressed=true]::before{content:"✓ "}
.put .put-hint{margin:10px 0 0;font-size:.92rem;color:#334155}
.put-sugg{margin-top:10px;padding:10px 12px;border-radius:12px;background:#fffbeb;border:1px solid #fcd34d}
.put .put-sugg p{margin:0 0 8px;font-size:.9rem;color:#78350f}
.put .put-status{margin:0;font-size:.9rem;color:var(--um);padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid var(--ul)}
.put .put-status[data-kind=error]{color:var(--ur);background:#fef2f2;border-color:#fecaca;font-weight:600}
.put-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0}
.put .put-h3{margin:0 0 8px;font-size:1.02rem;line-height:1.3;color:var(--un)}
.put .put-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;height:150px;align-items:end}
.put .put-ladder li{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;margin:0;text-align:center}
.put-lb{display:flex;align-items:flex-start;justify-content:center;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#8b5cf6,#c4b5fd);color:#fff;min-height:26px;padding-top:4px}
.put-lb em{font:800 .95rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;font-style:normal}
.put-lb small{font-size:.7em}
.put-ln{font-size:.72rem;font-weight:700;margin-top:4px;color:var(--un)}
.put-lh{font-size:.68rem;color:var(--um);font-variant-numeric:tabular-nums}
.put .put-lcap{margin:8px 0 0;font-size:.86rem;color:#334155}
.put-panel summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--un)}
.put-fields{display:grid;gap:12px;margin-top:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.put-wide{grid-column:1/-1}
.put-set label,.put-fl2{display:block;font-size:.85rem;font-weight:600;margin:0 0 4px;color:var(--un)}
.put .put-set select,.put .put-set input{display:block;width:100%;min-height:44px;margin:0;border:1px solid #cbd5e1;border-radius:10px;padding:0 10px;font:inherit;font-size:.92rem;background:#fff;color:var(--un)}
.put .put-noise{margin:0 0 6px;font-size:.85rem;color:var(--um)}
.put-step{display:flex;gap:6px}
.put .put-step input{text-align:center;font-weight:700}
.put .put-step button{flex:0 0 48px;min-height:44px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;font:700 1.2rem system-ui,sans-serif;cursor:pointer;color:var(--un);padding:0}
.put .put-step button:hover,.put .put-step button:focus{background:#f5f3ff;color:var(--un)}
.put-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.put .put-chips button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;color:var(--un);font:inherit;font-size:.85rem;cursor:pointer}
.put .put-chips button:hover,.put .put-chips button:focus{background:#f5f3ff;color:var(--un)}
.put .put-chips button[aria-pressed=true]{background:var(--uv);border-color:var(--uv);color:#fff}
.put .put-btn2{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--uv);background:#fff;color:var(--uv2);font:700 .9rem system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;width:100%}
.put .put-btn2:hover,.put .put-btn2:focus{background:#f5f3ff;color:var(--uv2)}
.put :focus-visible{outline:3px solid var(--ub);outline-offset:2px}
@media (max-width:520px){
	.put{gap:12px}
	.put-card{padding:10px 10px 8px;border-radius:18px}
	.put .put-sizes button{font-size:.84rem}
	.put-dial{max-width:292px;margin-top:2px}
	.put .put-note{font-size:50px}
	.put .put-cue{font-size:1rem}
	.put-fields{grid-template-columns:1fr}
	.put .put-read dd{font-size:.86rem}
	.put .put-peg{width:52px;height:52px}
}