: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}@media (orientation:portrait) and (pointer:coarse){body{overflow:hidden}.app{transform-origin:0 0;width:100dvh;height:100dvw;padding-top:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-left);padding-left:env(safe-area-inset-top);padding-right:env(safe-area-inset-bottom);position:fixed;top:0;left:0;transform:rotate(90deg)translateY(-100%)}}.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__degree{z-index:1;color:var(--text);pointer-events:none;background:#2f6b4fd9;border-radius:3px;padding:1px 4px;font-size:9px;font-weight:700;line-height:1.2;position:absolute;top:2px;left:3px}.fret-cell--chordtone{box-shadow:inset 0 0 0 1px #78c8a040}.fret-cell--target{animation:.9s ease-in-out infinite target-pulse}.fret-cell--target .fret-cell__degree{background:var(--accent);color:#1a1a1a}.fret-cell--target-alt{animation:.9s ease-in-out infinite target-pulse-weak}@keyframes target-pulse{0%,to{background-color:#ffb02e29;box-shadow:inset 0 0 0 2px #ffb02ee6}50%{background-color:#ffb02e52;box-shadow:inset 0 0 16px 3px #ffb02e8c}}@keyframes target-pulse-weak{0%,to{box-shadow:inset 0 0 0 1px #ffb02e66}50%{box-shadow:inset 0 0 0 2px #ffb02ea6}}.fret-cell.is-wrong{animation:.3s ease-out cell-wrong}@keyframes cell-wrong{0%{background-color:#b3392e;box-shadow:inset 0 0 18px 4px #dc5a46cc}to{background-color:#0000;box-shadow:inset 0 0 #dc5a4600}}.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}.lesson-bar{background:#22201c;border-bottom:1px solid #000;flex-direction:column;flex:none;gap:4px;padding:5px 10px 7px;display:flex}.lesson-bar__row{align-items:center;gap:8px;min-width:0;display:flex}.lesson-bar__select{max-width:180px;height:28px;color:var(--text);background:#2e2e2e;border:1px solid #4a4a4a;border-radius:6px;padding:0 6px;font-family:inherit;font-size:12px}.lesson-bar__chords{scrollbar-width:none;flex:1;gap:4px;min-width:0;display:flex;overflow-x:auto}.lesson-bar__chords::-webkit-scrollbar{display:none}.lesson-chip{color:var(--text-dim);font-variant-numeric:tabular-nums;background:#2e2e2e;border-radius:4px;flex:none;align-items:center;gap:4px;padding:2px 7px;font-size:11px;display:inline-flex}.lesson-chip.is-current{background:var(--accent);color:#1a1a1a;font-weight:700}.lesson-chip__beats{gap:2px;display:inline-flex}.lesson-chip__beats i{background:#1a1a1a4d;border-radius:50%;width:4px;height:4px}.lesson-chip__beats i.is-on{background:#1a1a1a}.lesson-bar__demo{min-width:84px}.lesson-bar__guide{gap:10px}.lesson-bar__role{color:var(--accent);flex:none;font-size:13px;font-weight:700}.lesson-bar__explanation{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-dim);font-size:12px;overflow:hidden}.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}.unlock-overlay__build{color:#5a564f;font-variant-numeric:tabular-nums;margin:0;font-size:10px}