:root{--ink:#2a1a12;--cream:#f3ead7;--paper:#f7f1e4;--wood:#4a2c1c;--deep:#2c1810;--lacquer:#9c2f1e;--steel:#8b9398;--line:#2a1a1229;color:var(--ink);background:radial-gradient(900px 420px at 0 -10%,#9c2f1e2e,#0000 55%),linear-gradient(165deg,#f7f1e4 0%,#ead7b8 48%,#e2c8a4 100%);font-family:Noto Serif SC,Songti SC,Palatino Linotype,Palatino,serif;font-size:17px;line-height:1.5}*{box-sizing:border-box}html,body,#root{max-width:100%;min-height:100%;margin:0;overflow-x:hidden}body{min-height:100dvh}button,input,select,textarea{font:inherit;color:inherit}button,.hit{border:1px solid var(--wood);cursor:pointer;background:#f8f1e3;border-radius:999px;min-height:48px;padding:.45rem 1rem}button:hover,.hit:hover{background:#fff8ec}button.primary,.primary{background:var(--lacquer);color:#f7f1e4;border-color:var(--deep)}button.primary:hover{background:#b13b28}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--lacquer)}.shell{width:min(1120px,100%);margin:0 auto;padding:.8rem .9rem 3rem}.mast{background:linear-gradient(120deg, #fff4e214, transparent 40%), linear-gradient(180deg, var(--wood), var(--deep));color:var(--cream);border-radius:18px 18px 6px 28px;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.8rem;padding:.9rem 1rem 1rem;display:flex;box-shadow:0 12px 30px #2c18102e}.brand{color:inherit;text-decoration:none}.brand small{letter-spacing:.18em;color:#d7c3a4;font-size:.72rem;display:block}.brand strong{font-family:Fraunces,Iowan Old Style,Palatino,serif;font-size:2.4rem;font-weight:680;line-height:1}.prefs{flex:280px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.45rem;max-width:100%;display:grid}.prefs label,.field{color:#eadcc6;flex-direction:column;gap:.15rem;min-width:0;font-size:.78rem;display:flex}.prefs select,.prefs input,.field input,.field select,textarea{width:100%;min-height:44px;color:var(--ink);background:#f7f1e4f0;border:1px solid #f3ead759;border-radius:10px;padding:.35rem .55rem}.prefs .check{min-height:44px;color:var(--cream);flex-direction:row;align-items:center;gap:.45rem}.prefs .check input{width:1.3rem;height:1.3rem}.nav{scrollbar-width:thin;gap:.35rem;max-width:100%;padding:.75rem 0 .2rem;display:flex;overflow-x:auto}.nav a{color:var(--ink);border:1px solid #0000;border-bottom-color:var(--steel);flex:none;align-items:center;min-height:44px;padding:.45rem .7rem;text-decoration:none;display:inline-flex}.nav a.active{color:var(--lacquer);border-bottom-color:var(--lacquer);border-bottom-width:3px}.page h1{margin:.4rem 0 .3rem;font-family:Fraunces,Iowan Old Style,Palatino,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:680}.lede{max-width:42rem;margin-top:0}.grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;display:grid}.card{min-height:132px;color:inherit;border:1px solid var(--line);background:#f7f1e4c7;border-radius:16px 16px 16px 4px;flex-direction:column;justify-content:space-between;padding:.9rem 1rem 1rem;text-decoration:none;display:flex;box-shadow:inset 0 0 0 1px #fffaf099}.card.wide{background:#f8efe0;min-height:168px}.card strong{font-family:Fraunces,Palatino,serif;font-size:1.35rem}.card span{color:#5c4636}.row,.wrap{flex-wrap:wrap;align-items:center;gap:.55rem;max-width:100%;display:flex}.stack{flex-direction:column;gap:.7rem;max-width:100%;display:flex}.big{min-width:76px;min-height:76px;padding:.6rem 1.1rem;font-size:1.35rem}.readout{margin:.2rem 0;font-family:Fraunces,Iowan Old Style,Palatino,serif;font-size:clamp(4rem,16vw,7rem);line-height:.9}.readout small{margin-left:.2rem;font-size:.35em}.cents{font-family:Fraunces,Palatino,serif;font-size:2rem}.in-tune{color:#2f5d50}.out{color:var(--lacquer)}.meter{background:#8b939859;border-radius:999px;max-width:100%;height:10px;overflow:hidden}.meter span{background:linear-gradient(90deg, var(--steel), var(--lacquer));height:100%;display:block}.note{color:#5c4636;font-size:.92rem}.warn{color:var(--lacquer);font-weight:650}.neck-scroll,.chart-row,.at-host{max-width:100%;overflow-x:auto}.neck{min-width:max-content;padding-bottom:.4rem}.string-row{align-items:stretch;display:flex}.string-name{color:#5c4636;flex:none;align-items:center;width:4.2rem;font-size:.78rem;display:flex}.frets{display:flex}.fret{border:0;border-right:2px solid var(--steel);background:0 0;border-bottom:1px solid #8b939873;border-radius:0;width:46px;height:42px;min-height:42px;padding:0;position:relative}.fret.open-edge{border-left:8px solid var(--deep)}.fret .dot{color:#f7f1e4;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-family:Fraunces,Palatino,serif;font-size:.68rem;display:inline-flex}.charts{flex-wrap:wrap;gap:.8rem;max-width:100%;display:flex}.chart{background:#f7f1e4b8;border-radius:12px;width:min(220px,100%);padding:.3rem}.chart svg{width:100%;height:auto}.lyric{background:#f7f1e4cc;border-radius:12px;max-width:100%;padding:.8rem 1rem;overflow-x:auto}.lyric-line{flex-wrap:wrap;gap:.15rem 0;min-height:2.6rem;display:flex}.chunk{flex-direction:column;margin-right:.15rem;display:inline-flex}.chunk b{color:var(--lacquer);min-height:1.2rem;font-size:.92rem;font-weight:650}.chunk i{white-space:pre;font-style:normal}.section-label{letter-spacing:.12em;color:var(--wood);margin:.4rem 0 .1rem;font-size:.78rem}textarea{resize:vertical;min-height:220px}.song-list{flex-direction:column;gap:.4rem;display:flex}.song-list button{text-align:left;border-radius:12px}.panel{border:1px solid var(--line);background:#f7f1e4a8;border-radius:16px;max-width:100%;padding:.8rem}.pedal header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.pedal.off{opacity:.55}table.tension{border-collapse:collapse;width:100%;max-width:100%}table.tension th,table.tension td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:.35rem .3rem}table.tension input,table.tension select{width:100%;min-height:44px}.beat{background:var(--deep);width:92px;height:92px;color:var(--cream);border-radius:50%;place-items:center;font-family:Fraunces,Palatino,serif;font-size:2.4rem;display:grid}.beat.accent{background:var(--lacquer)}.at-host{background:#fffaf2;border-radius:12px;min-height:220px}.circle{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;display:grid}@media (width<=720px){.circle{grid-template-columns:repeat(4,minmax(0,1fr))}.mast{border-radius:14px}.brand strong{font-size:2rem}}