:root{--bg:#17140f;--bg2:#1e1a13;--panel:#211b13;--line:#3a3324;--cream:#ece4d3;--muted:#9c9280;--amber:#d99a3e;--teal:#5b8a7a;--wood:#4a3220;--wood-dark:#2c1c10;--scale:#5b8a7a}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--cream);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}body{padding:18px 14px 40px}.app{max-width:760px;margin:auto}h1{font-size:22px;margin:0}header p{margin:4px 0 16px;color:var(--muted);font-size:12px}.panel,.stage,.mode-tabs{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;background:linear-gradient(180deg,var(--bg2),var(--bg))}.accent{border-color:var(--teal)}
.mode-tabs{display:flex;gap:10px}.mode-tabs button{flex:1}.mode-tabs .active{border-color:var(--amber);color:var(--amber)}button,select,input{font:inherit}button,select,input[type=text],input:not([type]){background:#221c14;color:var(--cream);border:1px solid var(--line);border-radius:9px;padding:10px}button{cursor:pointer;color:var(--muted);font-weight:700}button:disabled{opacity:.45}.secondary{border-color:var(--teal);color:var(--teal)}.row,.grid2{display:flex;gap:10px;align-items:end}.row>*{flex:1}.grid2>label{flex:1}label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:12px}select,input{width:100%}.check{flex-direction:row;align-items:center;font-size:15px;color:var(--cream);margin-top:12px}.check input{width:auto}.small,.diag{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}
.custom{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.hidden{display:none}.chord-row{display:grid;grid-template-columns:36px 1fr 1fr 1fr;gap:6px;align-items:center;margin-top:6px}.chord-row span{color:var(--muted);font-size:11px}.stage{background:var(--wood-dark)}.rail{display:flex;gap:6px;overflow:auto;padding-bottom:8px}.rail-cell{min-width:62px;padding:6px;border-radius:8px;text-align:center;border:1px solid transparent}.rail-cell .degree{font-size:10px;color:var(--muted)}.rail-cell .chord{font-size:18px;font-weight:700}.rail-cell.current{border-color:var(--amber)}.rail-cell.current .degree,.rail-cell.current .chord{color:var(--amber)}.rail-cell.next .chord{color:var(--teal)}.stage-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}.fret-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.fret-actions button{padding:6px 10px;font-size:11px}.fret-actions button.active{border-color:var(--amber);color:var(--amber)}.neck-wrap{overflow:auto;background:var(--wood);border:1px solid var(--line);border-radius:10px}#neck{display:block;width:100%;min-width:620px;height:auto}.controls .play{width:100%;margin-top:14px;padding:14px;border-color:var(--amber);color:var(--amber);background:transparent}.controls .play.playing{background:var(--amber);color:#17140f}.volumes{margin-top:10px}.info p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:0}@media(max-width:620px){.grid2{display:grid;grid-template-columns:1fr 1fr}.row{align-items:stretch}.mode-tabs button{font-size:11px;padding:12px 6px}.chord-row{grid-template-columns:26px 1fr 1fr 1fr}.panel,.stage,.mode-tabs{padding:12px}}