:root{--bg: #10131a;--bg-soft: #171b25;--panel: #1c2130;--panel-2: #232937;--line: #303849;--text: #e8ecf5;--text-dim: #9aa4bb;--accent: #f0a04b;--accent-ink: #1a1207;--accent-2: #4bb3f0;--accent-2-ink: #06202f;--correct: #3ecf8e;--wrong: #f2666f;--radius: 16px;--nav-height: 62px;--string: #7f8ba5;color-scheme:dark}@media(prefers-color-scheme:light){:root{--bg: #f4f6fb;--bg-soft: #eaeef7;--panel: #ffffff;--panel-2: #f2f5fb;--line: #d8deeb;--text: #1a2030;--text-dim: #5c6780;--accent: #d9772a;--accent-ink: #fff8f1;--accent-2: #1f80c4;--accent-2-ink: #f2f9ff;--correct: #189063;--wrong: #cc3a45;--string: #8d97ab;color-scheme:light}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;overscroll-behavior:none}body{overflow:hidden}body{background:var(--bg);color:var(--text);font-family:Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:not-allowed}:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:720px;margin:0 auto;padding:0 12px calc(8px + env(safe-area-inset-bottom))}.app__header{flex:0 0 auto;display:flex;align-items:baseline;gap:8px;padding:12px 4px 8px}.app__logo{font-size:20px}.app__header h1{margin:0;font-size:17px;letter-spacing:.04em}.app__screen{margin:0 0 0 auto;font-size:12px;color:var(--text-dim)}.app__main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain}.app__nav{flex:0 0 auto;display:flex;gap:4px;width:min(440px,100%);margin:10px auto 0;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:999px}.app__nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;min-height:46px;border:none;border-radius:999px;background:transparent;color:var(--text-dim);font-size:11px;font-weight:700}.app__nav-icon{font-size:17px;line-height:1.1}.app__nav-btn.is-active{background:var(--accent);color:var(--accent-ink)}.panel{padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.panel--tight{padding:12px}.panel__header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.panel__header--spaced{margin-top:14px}.panel__title{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--text-dim)}.panel__title--sm{font-size:12px}.panel__actions{display:flex;gap:12px}.hint-text{margin:10px 0 0;font-size:11px;color:var(--text-dim)}.link-btn{padding:4px 2px;border:none;background:none;color:var(--accent-2);font-size:12px;text-decoration:underline}.primary-btn{padding:14px 28px;border:none;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:16px;min-height:48px}.primary-btn small{margin-left:8px;font-size:12px;font-weight:500;opacity:.75}.primary-btn:disabled{background:var(--panel-2);color:var(--text-dim)}.ghost-btn{padding:12px 20px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:14px;min-height:46px}.diagram{display:block;min-width:0;min-height:0}.diagram__nut{stroke:var(--text);stroke-width:4;stroke-linecap:round}.diagram__fret{stroke:var(--line);stroke-width:1.4}.diagram__string{stroke:var(--string)}.diagram__stringno{fill:var(--text-dim);font-size:8px}.diagram__fretnum{fill:var(--text-dim);font-size:9px;text-anchor:middle}.diagram__dot{fill:var(--accent)}.diagram__barre{fill:var(--accent);opacity:.9}.diagram__open{fill:none;stroke:var(--text);stroke-width:1.6}.diagram__mute line{stroke:var(--text-dim);stroke-width:1.8;stroke-linecap:round}.diagram__label{fill:var(--text-dim);font-size:8.5px;font-weight:700}.diagram__dot.is-correct{fill:var(--correct)}.diagram__dot.is-wrong{fill:var(--wrong)}.diagram__open.is-correct{stroke:var(--correct)}.diagram__open.is-wrong{stroke:var(--wrong)}.diagram__mute.is-correct line{stroke:var(--correct)}.diagram__mute.is-wrong line{stroke:var(--wrong)}.browse{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}.chord-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.root-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.root-btn{padding:12px 0;min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-size:18px;font-weight:700}.root-btn.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.pill-scroller{display:flex;gap:6px;margin:10px -12px 0;padding:2px 12px 6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.pill-scroller::-webkit-scrollbar{display:none}.pill{flex:0 0 auto;scroll-snap-align:center;padding:9px 15px;min-height:42px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font-size:14px;font-weight:700;white-space:nowrap}.pill.is-active{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-2-ink)}.pill__badge{margin-left:3px;font-size:10px;color:var(--accent)}.pill.is-active .pill__badge{color:var(--accent-2-ink)}.chord-card__head{display:flex;align-items:baseline;gap:8px}.chord-name{margin:0;font-size:32px;line-height:1.1;letter-spacing:.01em}.chord-name__reading{margin:0;font-size:12px;color:var(--text-dim)}.chord-card__diagram{flex:1 1 auto;min-height:110px;display:flex;justify-content:center;margin:10px 0;padding:12px 10px;background:var(--panel-2);border-radius:var(--radius)}.tone-row{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:10px 12px;background:var(--panel-2);border-radius:12px}.tone{display:inline-flex;align-items:baseline;gap:3px;font-size:15px;font-weight:700}.tone small{font-size:10px;font-weight:500;color:var(--text-dim)}.fbx{flex:1 1 auto;width:100%;display:flex;justify-content:center}.fbx__grid{display:grid;grid-template-columns:18px 40px 40px repeat(5,minmax(38px,52px));grid-template-rows:repeat(6,minmax(36px,1fr)) auto;align-items:stretch;width:100%;max-width:400px;max-height:340px}.fbx__string-no{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-dim)}.fbx__string-no.is-correct{color:var(--correct);font-weight:700}.fbx__string-no.is-wrong{color:var(--wrong);font-weight:700}.fbx__marker{height:calc(100% - 4px);margin:2px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--text-dim);font-size:14px}.fbx__marker.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.fbx__marker.is-on.is-correct{background:var(--correct);border-color:var(--correct);color:var(--accent-ink)}.fbx__marker.is-on.is-wrong{background:var(--wrong);border-color:var(--wrong);color:var(--accent-ink)}.fbx__cell{position:relative;display:flex;align-items:center;justify-content:center;border:none;padding:0;background:linear-gradient(var(--string),var(--string)) center / 100% 1.4px no-repeat}.fbx__cell:after{content:"";position:absolute;left:0;top:0;bottom:0;width:1.4px;background:var(--line)}.fbx__cell.is-end:before{content:"";position:absolute;right:0;top:0;bottom:0;width:1.4px;background:var(--line)}.fbx__cell.is-nut:after{width:4px;background:var(--text)}.fbx__cell.is-top:after,.fbx__cell.is-top:before{top:50%}.fbx__cell.is-bottom:after,.fbx__cell.is-bottom:before{bottom:50%}.fbx__dot{position:relative;z-index:1;display:block;width:26px;height:26px;border-radius:50%;background:transparent;transition:background .12s}.fbx__cell:hover:not(:disabled) .fbx__dot{background:color-mix(in srgb,var(--accent) 35%,transparent)}.fbx__cell.is-on .fbx__dot{background:var(--accent)}.fbx__cell.is-on.is-correct .fbx__dot{background:var(--correct)}.fbx__cell.is-on.is-wrong .fbx__dot{background:var(--wrong)}.fbx__foot{display:flex;align-items:center;justify-content:center;padding-top:4px;font-size:10px;color:var(--text-dim)}.fbx__foot--mark{font-size:9px}.quiz-setup,.quiz-player,.quiz-result{display:flex;flex-direction:column;gap:10px}.quiz-player{flex:1 1 auto}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--panel-2);border-radius:12px}.segmented__btn{padding:10px 2px;min-height:44px;border:none;border-radius:9px;background:transparent;color:var(--text-dim);font-size:12px;font-weight:700}.segmented__btn.is-active{background:var(--accent);color:var(--accent-ink)}.chip-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.chip-grid--scroll{display:flex;gap:6px;margin:0 -12px;padding:0 12px 4px;overflow-x:auto;scrollbar-width:none}.chip-grid--scroll::-webkit-scrollbar{display:none}.chip-grid--scroll .chip{flex:0 0 auto;min-width:72px}.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 3px;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font-size:14px;font-weight:700}.chip small{font-size:9px;font-weight:500;color:var(--text-dim);line-height:1.3}.chip.is-on{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-2-ink)}.chip.is-on small{color:var(--accent-2-ink)}.field-row{display:flex;align-items:center;gap:12px;font-size:14px}.field-row select{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;min-height:44px}.field-row--spaced{margin-top:14px;flex-wrap:wrap}.field-check{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}.field-check input{width:20px;height:20px;accent-color:var(--accent)}.start-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:4px 0 8px}.start-bar p{margin:0;width:100%;text-align:center;font-size:12px;color:var(--text-dim)}.quiz-progress__bar{height:6px;border-radius:999px;background:var(--panel);overflow:hidden}.quiz-progress__bar span{display:block;height:100%;background:var(--accent);transition:width .25s}.quiz-progress__meta{display:flex;align-items:center;gap:12px;margin-top:4px;font-size:12px;color:var(--text-dim)}.quiz-progress__meta button{margin-left:auto}.quiz-card{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.quiz-question{margin:0;font-size:12px;color:var(--text-dim)}.quiz-target{margin:0;font-size:46px;font-weight:800;line-height:1.1}.quiz-help{margin:0 0 4px;font-size:11px;color:var(--text-dim)}.quiz-diagram{flex:1 1 auto;min-height:130px;width:100%;display:flex;justify-content:center;padding:12px 8px;background:var(--panel-2);border-radius:var(--radius)}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;margin-top:4px}.choice-btn{padding:16px 6px;min-height:56px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-size:19px;font-weight:700}.choice-btn.is-selected{border-color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-2)}.choice-btn.is-correct{background:color-mix(in srgb,var(--correct) 22%,var(--panel-2));border-color:var(--correct)}.choice-btn.is-wrong{background:color-mix(in srgb,var(--wrong) 22%,var(--panel-2));border-color:var(--wrong)}.quiz-actions{display:flex;justify-content:center;gap:10px}.feedback{display:flex;flex-direction:column;align-items:center;gap:10px}.feedback.is-correct{border-color:color-mix(in srgb,var(--correct) 60%,var(--line))}.feedback.is-wrong{border-color:color-mix(in srgb,var(--wrong) 60%,var(--line))}.feedback__title{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;font-size:17px;font-weight:800}.feedback.is-correct .feedback__title{color:var(--correct)}.feedback.is-wrong .feedback__title{color:var(--wrong)}.feedback__chord{color:var(--text);font-size:22px}.feedback__chord small{margin-left:5px;font-size:11px;font-weight:500;color:var(--text-dim)}.feedback__compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.feedback__compare figure{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:8px 4px;background:var(--panel-2);border-radius:12px}.feedback__compare figcaption{font-size:11px;color:var(--text-dim)}.feedback__notes{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:12px;margin:0;font-size:15px;font-weight:700}.feedback__notes .mono{font-size:12px;font-weight:500;color:var(--text-dim)}.feedback__hint{margin:0;font-size:12px;color:var(--text-dim);text-align:center}.result-summary{text-align:center}.result-score{margin:0;font-size:42px;font-weight:800;line-height:1.1}.result-score span{font-size:15px;font-weight:500;color:var(--text-dim)}.result-rate{margin:4px 0 0;font-size:15px;color:var(--accent)}.result-comment{margin:8px 0 0;font-size:13px;color:var(--text-dim)}.missed-grid{display:grid;grid-template-columns:1fr;gap:10px}.missed-card{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--panel-2);border-radius:12px;font-size:17px;font-weight:700}.missed-card strong{min-width:68px}.stats-view{display:flex;flex-direction:column;gap:12px}.stat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.stat-card{display:flex;flex-direction:column;align-items:center;padding:12px 8px;background:var(--panel-2);border-radius:12px}.stat-card__value{font-size:24px;font-weight:800}.stat-card__label{font-size:11px;color:var(--text-dim)}.weak-list{display:grid;gap:5px}.weak-row{display:grid;grid-template-columns:72px 1fr 44px;align-items:center;gap:10px;padding:10px;min-height:46px;border:none;border-radius:10px;background:var(--panel-2);text-align:left;font-size:14px}.weak-row__name{font-weight:700}.weak-row__bar{height:6px;border-radius:999px;background:var(--panel);overflow:hidden}.weak-row__bar span{display:block;height:100%;background:var(--wrong)}.weak-row__count{text-align:right;font-size:12px;color:var(--text-dim)}.mastery-group{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:8px;margin-bottom:8px}.mastery-group__title{margin:6px 0 0;font-size:15px;font-weight:800;color:var(--text-dim)}.mastery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px}.mastery{padding:8px 2px;min-height:38px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-size:12px;font-weight:700;color:var(--text-dim)}.mastery--learning{color:var(--text);border-color:color-mix(in srgb,var(--text-dim) 60%,transparent)}.mastery--weak{color:var(--wrong);border-color:var(--wrong);background:color-mix(in srgb,var(--wrong) 14%,var(--panel-2))}.mastery--almost{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel-2))}.mastery--done{color:var(--correct);border-color:var(--correct);background:color-mix(in srgb,var(--correct) 16%,var(--panel-2))}.mastery-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.mastery-legend__item{padding:3px 9px;border-radius:999px;border:1px solid var(--line);font-size:11px}@media(min-width:600px){.app{padding-left:20px;padding-right:20px}.app__header h1{font-size:19px}.chord-name{font-size:38px}.quiz-target{font-size:58px}.mode-grid{grid-template-columns:repeat(3,1fr)}.choice-grid{grid-template-columns:repeat(4,1fr)}.missed-grid{grid-template-columns:repeat(2,1fr)}.stat-cards{grid-template-columns:repeat(4,1fr)}.mastery-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.pill-scroller{flex-wrap:wrap;overflow-x:visible;margin:0;padding:0 0 4px}}@media(orientation:landscape)and (max-height:520px){.app__header{padding:8px 4px 6px}.browse{flex-direction:row;align-items:stretch}.browse>.panel--tight{flex:0 0 42%;overflow-y:auto}.chord-card{flex:1 1 auto}.chord-card__diagram{min-height:90px}}@media(hover:hover){.root-btn:hover,.pill:hover,.chip:hover,.choice-btn:hover:not(:disabled),.ghost-btn:hover{border-color:var(--accent)}.app__nav-btn:hover{color:var(--text)}.weak-row:hover,.mastery:hover{background:color-mix(in srgb,var(--accent) 15%,var(--panel-2))}}