:root{--bg:#1a1a1a;--toolbar-bg:#232323;--board-bg:#2b2118;--fret-wire:#55524c;--nut:#d8d3c8;--string:#cfcabf;--text:#e8e6e1;--text-dim:#9a958c;--accent:#ffb02e;--fret-min-width:40px;--label-width:28px;--toolbar-height:44px;--rail-height:40px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,sans-serif}#app{height:100%}.app{height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);flex-direction:column;display:flex}.toolbar{height:var(--toolbar-height);background:var(--toolbar-bg);border-bottom:1px solid #000;flex:none;align-items:center;gap:8px;padding:0 10px;display:flex}.toolbar__title{text-align:center;letter-spacing:.12em;color:var(--text-dim);flex:1;font-size:12px}.toolbar__button{min-width:64px;height:32px;color:var(--text);background:#2e2e2e;border:1px solid #4a4a4a;border-radius:6px;padding:0 10px;font-family:inherit;font-size:13px}.toolbar__button.is-on{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:700}.toolbar__button:disabled{opacity:.35}.scroller{overscroll-behavior-x:contain;scrollbar-width:none;flex:1;min-height:0;overflow:auto hidden}.scroller::-webkit-scrollbar{display:none}.scroller__content{width:max(100%, calc(var(--label-width) + var(--fret-columns) * var(--fret-min-width)));flex-direction:column;height:100%;display:flex}.fretboard{background:var(--board-bg);touch-action:none;flex:1;grid-template-rows:repeat(4,1fr);min-height:0;display:grid}.fretboard__row{grid-template-columns:var(--label-width) repeat(var(--fret-columns), minmax(0, 1fr));min-height:0;display:grid}.string-label{z-index:3;color:var(--text-dim);background:#1f1a14;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex;position:sticky;left:0}.fret-cell{border-right:2px solid var(--fret-wire);touch-action:none;justify-content:center;align-items:center;display:flex;position:relative}.fret-cell:before{content:"";height:var(--string-thickness,2px);background:var(--string);opacity:.5;pointer-events:none;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.fret-cell[data-string="0"]{--string-thickness:1.5px}.fret-cell[data-string="1"]{--string-thickness:2.5px}.fret-cell[data-string="2"]{--string-thickness:3.5px}.fret-cell[data-string="3"]{--string-thickness:4.5px}.fret-cell--open{border-right:4px solid var(--nut);background-image:linear-gradient(#ffffff12,#ffffff12)}.fret-cell--dot:after{content:"";opacity:.32;pointer-events:none;background:#ded6c6;border-radius:50%;width:11px;height:11px;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}.fret-cell.is-active{animation:.3s ease-out cell-flash}@keyframes cell-flash{0%{background-color:var(--accent);box-shadow:inset 0 0 18px 4px #ffb02ecc}to{background-color:#0000;box-shadow:inset 0 0 #ffb02e00}}.fret-cell__note{z-index:1;opacity:0;pointer-events:none;background:#00000080;border-radius:4px;padding:2px 5px;font-size:13px;font-weight:700;line-height:1.1;position:relative}.fret-cell__note.is-visible{opacity:.85}.fret-cell.is-active .fret-cell__note{animation:.2s ease-out note-pop}.fret-cell.is-active .fret-cell__note.is-visible{animation:.2s ease-out note-emphasis}@keyframes note-pop{0%{opacity:1;transform:scale(1.35)}70%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1)}}@keyframes note-emphasis{0%{transform:scale(1.35)}to{transform:scale(1)}}.fret-cell--scale .fret-cell__note{opacity:.95;background:#2f6b4f}.fret-cell--root .fret-cell__note{opacity:1;background:#a33b3b}.fret-rail{height:var(--rail-height);grid-template-columns:var(--label-width) repeat(var(--fret-columns), minmax(0, 1fr));background:var(--toolbar-bg);touch-action:pan-x;cursor:grab;border-top:1px solid #000;flex:none;display:grid}.fret-rail:active{cursor:grabbing}.fret-rail__spacer{z-index:2;background:var(--toolbar-bg);position:sticky;left:0}.fret-rail__num{color:var(--text-dim);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;font-size:12px;display:flex}.fret-rail__num.is-landmark{color:var(--accent);font-weight:700}.unlock-overlay{z-index:20;touch-action:none;background:#1a1a1af2;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:fixed;inset:0}.unlock-overlay__text{color:var(--accent);margin:0;font-size:20px;font-weight:700}.unlock-overlay__hint{color:var(--text-dim);margin:0;font-size:12px}