:root{
  --bg:#1b1410; --panel:#271d17; --line:#3d2e25; --text:#f4e9dc; --muted:#a8968a;
  --accent:#ff9f43; --good:#4cd37b; --bad:#ff5c5c; --warn:#ffd24a;
}
@media (prefers-color-scheme: light){
  :root{--bg:#fbf5ec;--panel:#fff;--line:#e6d9c8;--text:#2b1d12;--muted:#7b6a5a;--accent:#d9680b}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,Segoe UI,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}
header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;flex-wrap:wrap}
h1{font-size:1.2rem;margin:0}
h3{margin:1.5rem 0 .5rem}
nav{display:flex;gap:.25rem;flex:1;justify-content:flex-end}
nav button{background:none;border:0;color:var(--muted);padding:.5rem .8rem;border-radius:8px;font-size:1rem;cursor:pointer}
nav button.active{background:var(--panel);color:var(--text);box-shadow:inset 0 -2px var(--accent)}
main{max-width:760px;margin:0 auto;padding:1rem}
.tab{display:none}.tab.active{display:block}
.row{display:flex;gap:.75rem;align-items:center;margin:.5rem 0}
.row.wrap{flex-wrap:wrap}.row.center{justify-content:center}.row.end{justify-content:flex-end}
label{display:flex;gap:.4rem;align-items:center;color:var(--muted)}
select,input,textarea,button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:.45rem .7rem}
input[type=search],input[type=url],input:not([type]),textarea{width:100%}
button{cursor:pointer}button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:#1b1410;border-color:var(--accent);font-weight:600}
button.big{width:100%;padding:.9rem;font-size:1.1rem;margin-top:.5rem}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}
.err{color:var(--bad)}
.badge{background:var(--accent);color:#1b1410;border-radius:99px;padding:0 .45rem;font-size:.75rem;font-weight:700}

/* tuner */
.readout{text-align:center;margin:1rem 0 .25rem}
.note{font-size:clamp(3.5rem,20vw,5rem);height:1.05em;font-weight:800;line-height:1;transition:color .15s}
.note.ok{color:var(--good)}
.freq{color:var(--muted);height:1.5em;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.level{height:8px;border-radius:4px;background:var(--panel);border:1px solid var(--line);overflow:hidden;margin:.5rem 0}
.level i{display:block;height:100%;width:0;background:var(--accent);transition:width .08s}
.gauge{position:relative;height:64px;margin:.5rem 0 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gauge .zone{position:absolute;left:calc(50% - 2.5%);width:5%;top:0;bottom:0;background:rgba(76,211,123,.18)}
.gauge .ticks{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%)}
.needle{position:absolute;top:6px;bottom:6px;width:6px;margin-left:-3px;left:50%;border-radius:4px;
  background:var(--muted);transition:left .12s ease-out,background .15s}
.needle.ok{background:var(--good)}.needle.near{background:var(--warn)}.needle.far{background:var(--bad)}
.cents{display:grid;grid-template-columns:1fr auto 1fr;text-align:center;align-items:center;color:var(--muted);font-size:.85rem;margin-top:.25rem}
.cents span{font-size:1.4rem;font-weight:700}.cents small{display:block;white-space:nowrap}.cents b{display:block;min-width:4ch}
.cents b{color:var(--text);font-size:1.3rem}
.hint{text-align:center;font-size:1.15rem;height:1.6em;line-height:1.6;white-space:nowrap;overflow:hidden;margin:.5rem 0;font-weight:600}
.strings{display:flex;gap:.5rem;margin-top:1rem}
.strings button{flex:1;display:flex;flex-direction:column;align-items:center;padding:.7rem 0}
.strings button b{font-size:1.6rem}.strings button small{color:var(--muted)}
.strings button.near{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.strings button.locked{background:var(--accent);color:#1b1410}
.strings button.locked small{color:#1b1410}

/* chords */
.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.chord-grid.small{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.chord{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.5rem;text-align:center}
.chord b{display:block}
.chord svg{width:100%;height:auto;max-width:150px}
.chord svg .l{stroke:var(--text);stroke-width:1.5}
.chord svg .d{fill:var(--accent)}
.chord svg text{fill:var(--muted);font-size:10px;text-anchor:middle}
.chord svg .nut{stroke:var(--text);stroke-width:5}
.chord.btn{cursor:pointer}.chord.btn:hover{border-color:var(--accent)}
.link{display:inline-block;padding:.45rem .8rem;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);text-decoration:none}
.link:hover{border-color:var(--accent)}

/* library */
.drop{border:2px dashed var(--line);border-radius:12px;padding:1rem;text-align:center;margin-bottom:1rem}
.drop.over{border-color:var(--accent);background:var(--panel)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.75rem}
.item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.item .thumb{height:170px;object-fit:cover;width:100%;cursor:pointer;background:#0003}
.item pre{margin:0;padding:.6rem;height:170px;overflow:hidden;font:12px/1.3 ui-monospace,Consolas,monospace;cursor:pointer;
  mask-image:linear-gradient(#000 70%,transparent)}
.item .meta{padding:.5rem .6rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.item .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .meta button{padding:.15rem .5rem}
.item .meta a{color:var(--accent);text-decoration:none}

dialog{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:14px;width:min(94vw,640px);max-height:94vh}
dialog::backdrop{background:#000a}
dialog input,dialog textarea{margin:.35rem 0}
dialog textarea{font:13px/1.35 ui-monospace,Consolas,monospace;white-space:pre}
#viewerBody img{max-width:100%;display:block;margin:0 auto 1rem}
#viewerBody pre{white-space:pre;overflow:auto;font:14px/1.35 ui-monospace,Consolas,monospace}

@media (max-width:480px){
  main{padding:.75rem}
  header{padding:.4rem .75rem;gap:.25rem}
  nav button{padding:.4rem .6rem}
  .strings{gap:.35rem}.strings button{padding:.5rem 0}
  .strings button b{font-size:1.3rem}
  .gauge{height:52px}
  .cents span{font-size:1.2rem}
}