*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--black: #000;--white: #fff;--gray-100: #f5f5f5;--gray-200: #eee;--gray-300: #ccc;--gray-500: #666;--gray-700: #333;--fg: #000;--tube-fill: #eee;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-jp: "Noto Serif JP", serif;--font-mono: "SF Mono", "Fira Code", "Consolas", monospace}[data-theme=dark]{--black: #ddd;--white: #111;--gray-100: #1a1a1a;--gray-200: #222;--gray-300: #3a3a3a;--gray-500: #888;--gray-700: #bbb;--fg: #ddd;--tube-fill: #222}body{font-family:var(--font-ui);color:var(--black);background:var(--white);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}.layout{min-height:100vh;display:flex;flex-direction:column}.layout-header{border-bottom:1px solid var(--black);padding:16px 24px 0;max-width:1100px;width:100%;margin:0 auto}.header-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:16px}.header-title{display:flex;align-items:baseline;gap:12px}.header-kanji{font-family:var(--font-jp);font-size:14px;color:var(--gray-500);letter-spacing:4px}.header-title h1{font-size:20px;font-weight:700;letter-spacing:1px}.header-controls{display:flex;align-items:center;gap:16px}.key-selector,.hole-selector{display:flex;align-items:center;gap:8px;font-size:14px}.key-selector label,.hole-selector label{color:var(--gray-500);white-space:nowrap}.key-select{font-family:var(--font-ui);font-size:14px;padding:6px 10px;border:1px solid var(--black);background:var(--white);color:var(--black);cursor:pointer;border-radius:2px}.theme-toggle{font-size:22px;background:none;border:1px solid var(--black);color:var(--black);padding:4px 10px;cursor:pointer;line-height:1;border-radius:2px;transition:opacity .15s}.theme-toggle:hover{opacity:.7}.lang-toggle{display:flex;border:1px solid var(--black);border-radius:2px}.lang-btn{font-family:var(--font-ui);font-size:14px;font-weight:600;padding:6px 14px;border:none;background:var(--white);color:var(--black);cursor:pointer;letter-spacing:1px;transition:background .15s,color .15s}.lang-btn:first-child{border-right:1px solid var(--black)}.lang-btn--active{background:var(--black);color:var(--white)}.nav{display:flex;gap:0}.nav-link{font-size:13px;font-weight:500;letter-spacing:.5px;text-decoration:none;color:var(--gray-500);padding:10px 16px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.nav-link:hover{color:var(--black)}.nav-link--active{color:var(--black);border-bottom-color:var(--black)}.layout-main{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:32px 24px}.layout-footer{text-align:center;padding:24px;font-size:12px;color:var(--gray-500);letter-spacing:3px;border-top:1px solid var(--gray-200);font-family:var(--font-jp)}.divider{width:120px;height:1px;background:var(--gray-300);margin:28px 0}.page-home h2{font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}.home-intro__text{font-size:15px;color:var(--gray-700);max-width:600px}.home-intro__key{margin-top:8px;font-size:14px;color:var(--gray-500)}.home-intro__key strong{font-family:var(--font-mono);color:var(--black)}.legend-items{display:flex;gap:32px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-700)}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:16px}.notes-grid--basic{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-width:700px}.note-card{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--gray-300);padding:16px 12px;text-align:center;transition:border-color .15s}.note-card:hover{border-color:var(--black)}.note-card__western{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.5px}.note-card__katakana{font-family:var(--font-jp);font-size:18px;font-weight:700;margin-top:4px}.note-card__romaji{font-size:12px;color:var(--gray-500);letter-spacing:1px}.note-card__technique{font-size:11px;color:var(--gray-500);letter-spacing:.5px;margin-top:2px}.note-card__buttons{display:flex;gap:4px;margin-top:4px}.note-card__play{font-size:10px;background:none;border:1px solid var(--gray-300);color:var(--gray-500);padding:3px 10px;cursor:pointer;border-radius:2px;transition:color .15s,border-color .15s}.note-card__play:hover{color:var(--black);border-color:var(--black)}.note-card__play--active{background:var(--black);color:var(--white);border-color:var(--black)}.note-card__alts{display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:2px}.note-card__alt{display:flex;align-items:center;gap:6px;opacity:.6}.note-card__alt-label{font-size:9px;color:var(--gray-500);letter-spacing:.5px;text-transform:uppercase}.note-card--compact{flex-direction:column;padding:6px 4px;gap:3px;border:1px solid var(--gray-200);min-width:54px;cursor:pointer}.note-card--compact .note-card__western{font-size:12px}.note-card--compact .note-card__katakana{font-size:13px;margin-top:2px}.note-card__romaji-compact{font-size:10px;color:var(--gray-500);letter-spacing:.5px}.page-notes h2,.page-chart h2,.page-scales h2{font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}.register-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--gray-300)}.tab-btn{font-family:var(--font-ui);font-size:13px;font-weight:500;padding:8px 20px;border:none;background:none;cursor:pointer;color:var(--gray-500);border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.tab-btn:hover{color:var(--black)}.tab-btn--active{color:var(--black);border-bottom-color:var(--black)}.chart-intro{font-size:14px;color:var(--gray-500);line-height:1.7;max-width:800px;margin-bottom:28px}.chart-section{margin-bottom:40px}.chart-section h3{font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;color:var(--gray-700)}.chart-table{width:100%;border-collapse:collapse;font-size:13px}.chart-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray-500);padding:8px 12px;border-bottom:2px solid var(--black)}.chart-table td{padding:8px 12px;border-bottom:1px solid var(--gray-200);vertical-align:middle}.chart-row--alt{background:var(--gray-100)}.chart-cell--note{font-family:var(--font-mono);font-weight:700;font-size:14px;white-space:nowrap}.chart-cell--jp{display:flex;align-items:center;gap:8px}.chart-katakana{font-family:var(--font-jp);font-size:16px;font-weight:700}.chart-romaji,.chart-cell--technique{font-size:12px;color:var(--gray-500)}.chart-cell--play{white-space:nowrap}.chart-row--variant{opacity:.6}.chart-row--variant td{border-bottom:1px dashed var(--gray-300);padding-top:2px;padding-bottom:2px}.chart-alt-label{font-size:10px;color:var(--gray-500);letter-spacing:.5px;text-transform:uppercase}.play-btn{font-size:10px;background:none;border:1px solid var(--gray-300);color:var(--gray-500);padding:2px 8px;cursor:pointer;border-radius:2px;transition:color .15s,border-color .15s;margin-right:2px}.play-btn:hover{color:var(--black);border-color:var(--black)}.play-btn--active{background:var(--black);color:var(--white);border-color:var(--black)}.scales-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px}.scale-card{border:1px solid var(--gray-300);padding:20px;transition:border-color .15s}.scale-card:hover{border-color:var(--black)}.scale-card__header{margin-bottom:16px}.scale-card__name{font-size:18px;font-weight:700;margin-bottom:4px}.scale-card__jp{font-family:var(--font-jp);font-weight:400;font-size:16px;color:var(--gray-500);margin-left:4px}.scale-card__intervals{font-family:var(--font-mono);font-size:13px;color:var(--gray-500);letter-spacing:1px}.scale-card__notes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.scale-card__desc{font-size:13px;color:var(--gray-500);line-height:1.7;border-top:1px solid var(--gray-200);padding-top:12px}.scale-card__row{margin-bottom:12px}.scale-card__row-label{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px}.scale-card__row+.scale-card__row{margin-top:20px}.scale-card__asc-desc-badge{font-size:14px;margin-left:8px;color:var(--gray-500)}.scale-note--auxiliary{opacity:.5;position:relative}.scale-note--auxiliary .note-card--compact{border-style:dashed}.scales-note{font-size:13px;color:var(--gray-500);line-height:1.7;max-width:800px;margin-bottom:24px;padding:12px 16px;border-left:3px solid var(--gray-300)}.page-glossary h2{font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}.glossary-toc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.glossary-toc__link{font-size:13px;font-weight:500;color:var(--gray-500);text-decoration:none;padding:4px 12px;border:1px solid var(--gray-300);border-radius:2px;transition:color .15s,border-color .15s}.glossary-toc__link:hover{color:var(--black);border-color:var(--black)}.glossary-intro{font-size:14px;color:var(--gray-500);line-height:1.7;max-width:800px;margin-bottom:32px}.glossary-section{margin-bottom:32px}.glossary-section__title{font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray-500);padding-bottom:8px;border-bottom:1px solid var(--gray-300);margin-bottom:16px}.glossary-list{display:flex;flex-direction:column;gap:16px}.glossary-entry{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:baseline}.glossary-entry__term{display:flex;flex-direction:column;gap:2px}.glossary-entry__jp{font-family:var(--font-jp);font-size:18px;font-weight:700}.glossary-entry__romaji{font-size:12px;color:var(--gray-500);letter-spacing:.5px}.glossary-entry__literal{font-size:11px;color:var(--gray-500);font-style:italic}.glossary-entry__def{font-size:14px;color:var(--gray-700);line-height:1.7}.legend-subtitle{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gray-500);margin:20px 0 10px}.legend-techniques{display:flex;flex-direction:column;gap:6px}.legend-technique-item{font-size:13px;color:var(--gray-700);line-height:1.6}.legend-technique-item strong{color:var(--black)}.page-techniques h2{font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}.techniques-intro{font-size:14px;color:var(--gray-500);line-height:1.7;max-width:800px;margin-bottom:32px}.techniques-list{display:flex;flex-direction:column;gap:24px;max-width:800px}.technique-card{border-left:3px solid var(--gray-300);padding:0 0 0 20px}.technique-card__title{font-size:16px;font-weight:700;margin-bottom:8px;font-family:var(--font-ui)}.technique-card__text{font-size:14px;color:var(--gray-700);line-height:1.8}.page-exercises h2,.page-ornaments h2,.page-songs h2{font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}.exercises-intro,.ornaments-intro,.songs-intro{font-size:14px;color:var(--gray-500);line-height:1.7;max-width:800px;margin-bottom:32px}.exercises-list,.ornaments-list{display:flex;flex-direction:column;gap:32px;max-width:900px}.songs-grid{display:flex;flex-direction:column;gap:16px;max-width:900px}.exercise-card,.ornament-card{border:1px solid var(--gray-300);padding:20px;transition:border-color .15s}.song-card{border:1px solid var(--gray-300);transition:border-color .15s}.song-card__header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;cursor:pointer}.song-card__header:hover{background:var(--gray-100)}.song-card__toggle{font-size:16px;color:var(--gray-500)}.song-card--open{border-color:var(--black)}.song-detail{padding:0 20px 20px}.exercise-card:hover,.ornament-card:hover{border-color:var(--black)}.exercise-card__title,.ornament-card__title{font-size:16px;font-weight:700;margin-bottom:8px}.song-card__title{font-size:16px;font-weight:700;margin-bottom:0}.exercise-card__jp,.ornament-card__jp,.song-card__jp{font-family:var(--font-jp);font-weight:400;font-size:14px;color:var(--gray-500);margin-left:6px}.exercise-card__desc,.ornament-card__desc,.song-card__desc{font-size:13px;color:var(--gray-500);line-height:1.7;margin-bottom:16px}.seq-player{display:flex;align-items:flex-start;gap:12px}.seq-play-btn{font-size:14px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-300);background:var(--white);color:var(--black);cursor:pointer;border-radius:2px;flex-shrink:0;transition:background .15s,color .15s}.seq-play-btn:hover{border-color:var(--black)}.seq-play-btn--active{background:var(--black);color:var(--white);border-color:var(--black)}.seq-cards{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.seq-rest{font-size:18px;color:var(--gray-300);padding:0 4px}.seq-rest--active{color:var(--black)}.note-card--highlight{border-color:var(--black)!important;box-shadow:0 0 0 2px var(--black)}.seq-tab{display:flex;gap:4px;flex-wrap:wrap;align-items:baseline;font-family:var(--font-mono);font-size:13px;line-height:2}.seq-tab__note{cursor:pointer;padding:2px 6px;border-radius:2px;transition:background .1s;white-space:nowrap}.seq-tab__note:hover{background:var(--gray-200)}.seq-tab__rest{color:var(--gray-300);padding:2px}.seq-tab--active{background:var(--black)!important;color:var(--white);border-radius:2px}.seq-hybrid{display:flex;gap:2px;align-items:stretch;min-height:70px;flex:1;flex-wrap:wrap}.seq-hybrid__note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--gray-200);padding:4px 2px;cursor:pointer;min-width:0;overflow:hidden;transition:border-color .15s,box-shadow .15s}.seq-hybrid__note:hover{border-color:var(--black)}.seq-hybrid--active{border-color:var(--black)!important;box-shadow:0 0 0 2px var(--black)}.seq-hybrid__rest{background:var(--gray-100);border-radius:2px}.seq-hybrid__western{font-family:var(--font-mono);font-size:10px;font-weight:700;white-space:nowrap}.seq-hybrid__katakana{font-family:var(--font-jp);font-size:11px;font-weight:700}.view-toggle{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--gray-300)}.song-phrases{display:flex;flex-direction:column;gap:8px}.song-phrase{padding-left:0}@media(max-width:768px){.layout-header{padding:12px 16px 0}.header-top{flex-direction:column;align-items:flex-start;gap:12px}.header-title h1{font-size:16px}.layout-main{padding:24px 16px}.nav-link{font-size:12px;padding:8px 10px}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:10px}.scales-grid,.glossary-entry{grid-template-columns:1fr}.nav{flex-wrap:wrap}.chart-table{font-size:12px}.chart-table th,.chart-table td{padding:6px 8px}}@media(max-width:480px){.notes-grid{grid-template-columns:repeat(3,1fr)}.header-controls{width:100%;justify-content:space-between}}