:root{--bg: #1b1410;--bg2: #241a14;--panel: #2c2018;--panel2: #34261c;--text: #f3e9df;--muted: #b09a88;--line: #4a382a;--wood: #6b4423;--wood2: #5a3a1f;--string: #d9c9b0;--nut: #d8c4a8;--wire: #8a8a8a;--inlay: #e8dcc8;--accent: #e8a14a;--accent-edge: #b97a25;--on-accent: #2a1a08;--ok: #4caf76;--ok-edge: #2f7d52;--ng: #e2604f;--ng-edge: #b23b2c;--radius: 16px}[data-theme=neon]{--bg: #0c0f14;--bg2: #11161f;--panel: #161b24;--panel2: #1d2430;--text: #e6f0f0;--muted: #7e93a0;--line: #2a3340;--wood: #1f2a33;--wood2: #18222a;--string: #b9cdd6;--nut: #cfe6ee;--wire: #4a5a66;--inlay: #2e3e48;--accent: #22d3a8;--accent-edge: #13a07d;--on-accent: #04201a;--ok: #3ddc84;--ok-edge: #1f9c5a;--ng: #ff5d73;--ng-edge: #c23350}[data-theme=paper]{--bg: #f3efe6;--bg2: #faf7f0;--panel: #ffffff;--panel2: #f1ebe0;--text: #2a2018;--muted: #8a7d6c;--line: #e0d6c6;--wood: #cba876;--wood2: #bd9a66;--string: #5e4a2b;--nut: #4a3a22;--wire: #8a6f44;--inlay: #6f5836;--accent: #c2682f;--accent-edge: #9c4f20;--on-accent: #fff6ee;--ok: #2f9e63;--ok-edge: #1f7d4a;--ng: #d24b3a;--ng-edge: #ad3526}[data-theme=midnight]{--bg: #0b1020;--bg2: #0f1730;--panel: #141b30;--panel2: #1b2540;--text: #e7ecf7;--muted: #8090b0;--line: #28324d;--wood: #1c2742;--wood2: #16203a;--string: #c3cee6;--nut: #d0dbf0;--wire: #4b5980;--inlay: #2e3a58;--accent: #6aa0ff;--accent-edge: #3f73d6;--on-accent: #07142e;--ok: #46d6a0;--ok-edge: #2aa078;--ng: #ff6b8a;--ng-edge: #cc3f60}[data-theme=sunset]{--bg: #1c1018;--bg2: #2a1620;--panel: #2c1620;--panel2: #38202c;--text: #fbe9ec;--muted: #b58a98;--line: #4a2a38;--wood: #6b3a3f;--wood2: #5a2f37;--string: #f0d5c8;--nut: #f6e2d8;--wire: #8a5a55;--inlay: #4a2a30;--accent: #ff7a59;--accent-edge: #d6543a;--on-accent: #2a0f08;--ok: #4bd6a0;--ok-edge: #2aa078;--ng: #ff4d6d;--ng-edge: #cc304f}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,sans-serif;background:radial-gradient(120% 100% at 50% 0%,var(--bg2),var(--bg));color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.app{max-width:720px;margin:0 auto;min-height:100%;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.view{display:flex;flex-direction:column;gap:14px;flex:1}.view__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.view__head h2{margin:0;font-size:1.15rem;text-align:center}.view__meta{color:var(--muted);font-size:.85rem;text-align:right;font-variant-numeric:tabular-nums}.back{justify-self:start;background:none;border:none;color:var(--muted);font-size:.95rem;padding:8px 4px;cursor:pointer}.back:active{color:var(--text)}.prompt{text-align:center;font-size:1.1rem;margin:4px 0 0;color:var(--text)}.prompt__note{display:inline-block;min-width:2.4em;font-size:1.6rem;font-weight:800;color:var(--accent)}.prompt__where{color:var(--muted);font-size:.95rem;font-weight:600;margin-right:4px}.hint{text-align:center;color:var(--muted);font-size:.85rem;margin:0;min-height:1.2em}.board-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.fretboard{width:100%;height:100%;display:block;background:var(--panel);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,#fff 8%),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:10px 8px;box-shadow:0 6px 18px #00000038,inset 0 1px #ffffff0a}.board{fill:var(--wood)}.nut{stroke:var(--nut);stroke-width:5;stroke-linecap:round}.wire{stroke:var(--wire);stroke-width:2}.string{stroke:var(--string);opacity:.85}.string--active{stroke:var(--accent);opacity:1}.inlay{fill:var(--inlay);opacity:.55}.string-label{fill:var(--muted);font-size:15px;text-anchor:middle;font-weight:700}.string-label--active{fill:var(--accent)}.fret-number{fill:var(--muted);font-size:13px;text-anchor:middle}.dot-text{fill:#fff;font-size:16px;font-weight:800;text-anchor:middle}.dot-text--two{font-size:11px}.tap-target{fill:transparent;cursor:pointer}.tap-target:active{fill:#e8a14a4d}.dot-highlight circle{animation:pop .18s ease-out}.dot-mark circle{animation:pop .18s ease-out}@keyframes pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.dot-highlight,.dot-mark{transform-box:fill-box;transform-origin:center}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}.choice{font-size:1.3rem;font-weight:800;padding:14px 4px;min-height:62px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--text);cursor:pointer;transition:transform .05s ease}.choice__accidental{display:flex;flex-direction:column;align-items:center;font-size:.92rem;line-height:1.1;font-weight:800}.choice:active{transform:scale(.97)}.choice:disabled{cursor:default}.choice--correct{background:var(--ok);border-color:var(--ok-edge);color:#fff}.choice--wrong{background:var(--ng);border-color:var(--ng-edge);color:#fff}.choice--dim{opacity:.4}.hud{display:flex;flex-direction:column;gap:6px}.hud__row{display:flex;align-items:center;gap:10px}.hud__row--sub{justify-content:space-between}.hud__lv{font-weight:800;font-size:1rem;color:var(--accent);min-width:3.2em}.hud__xp{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;min-width:4em;text-align:right}.xpbar{position:relative;flex:1;height:10px;background:var(--panel);border-radius:999px;overflow:hidden;border:1px solid var(--line)}.xpbar__fill{height:100%;background:linear-gradient(90deg,var(--accent-edge),var(--accent));border-radius:999px;transition:width .4s ease}.xpbar__gain{position:absolute;right:6px;top:-18px;color:var(--accent);font-weight:800;font-size:.85rem;animation:floatup .9s ease-out forwards}@keyframes floatup{0%{opacity:1;transform:translateY(6px)}to{opacity:0;transform:translateY(-8px)}}.hud__streak{color:var(--muted);font-size:.85rem}.hud__streak--on{color:var(--accent);font-weight:700}.hud__best{color:var(--ok);font-size:.85rem;font-weight:700}.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translate(-50%);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.8rem;padding:6px 13px;border-radius:999px;z-index:10;box-shadow:0 4px 12px #00000047;white-space:nowrap;animation:toast 1.6s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px)}12%{opacity:1;transform:translate(-50%)}80%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-6px)}}.home{gap:20px;justify-content:center}.home__brand{text-align:center;margin-top:8px}.home__logo{font-size:3rem}.home h1{margin:6px 0 2px;font-size:2rem;letter-spacing:.02em}.home__tag{color:var(--muted);margin:0}.home__modes{display:flex;flex-direction:column;gap:12px}.mode{display:flex;align-items:center;gap:14px;text-align:left;padding:18px 16px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--text);cursor:pointer;transition:transform .05s ease}.mode:active{transform:scale(.99)}.mode__emoji{font-size:1.8rem}.mode__text{display:flex;flex-direction:column}.mode__title{font-size:1.15rem;font-weight:800}.mode__desc{color:var(--muted);font-size:.85rem}.mode__stats{color:var(--ok);font-size:.78rem;margin-top:3px;font-variant-numeric:tabular-nums}.mode__lv{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:64px}.mode__lv-badge{color:var(--accent);font-weight:800;font-size:.95rem}.mode__lv-bar{width:60px;height:6px;background:var(--bg2);border-radius:999px;overflow:hidden}.mode__lv-fill{display:block;height:100%;background:var(--accent);border-radius:999px}.home__total{color:var(--muted);margin:8px 0 0;font-size:.9rem}.home__total b{color:var(--accent);font-size:1.05rem}.home__settings{background:none;border:1px solid var(--line);color:var(--muted);padding:12px;border-radius:12px;cursor:pointer}.setting{display:flex;flex-direction:column;gap:8px}.setting h3{margin:6px 0 0;font-size:1rem}.setting__hint{color:var(--muted);font-size:.8rem;margin:0}.seg{display:flex;flex-direction:column;gap:8px}.seg__btn{padding:14px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:.98rem;cursor:pointer;text-align:left}.seg__btn--on{border-color:var(--accent);background:#e8a14a1f;color:var(--text)}.empty{color:var(--muted);text-align:center;line-height:1.7;margin-top:28px}.grid{display:grid;grid-template-columns:26px repeat(12,1fr);gap:3px;align-items:center}.grid__note{display:flex;flex-direction:column;align-items:center;font-size:.5rem;line-height:1.05;color:var(--muted)}.grid__strlabel{display:flex;flex-direction:column;align-items:center;font-size:.72rem;font-weight:800;color:var(--muted)}.grid__strlabel small{font-size:.5rem;opacity:.7;font-weight:600}.cell{display:block;aspect-ratio:1;border-radius:3px;background:var(--panel)}.cell--none{background:#2a2018}.cell--good{background:var(--ok)}.cell--ok{background:#d2a24a}.cell--weak{background:var(--ng)}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:8px}.legend span{display:inline-flex;align-items:center;gap:5px}.legend i.cell{width:14px;height:14px;aspect-ratio:auto;display:inline-block}.weak__title{font-size:1rem;margin:16px 0 4px}.weak__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.weak__item{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}.weak__pos{font-size:.95rem}.weak__pos b{color:var(--accent)}.weak__acc{font-weight:800;color:var(--ng);font-variant-numeric:tabular-nums}.weak__acc small{color:var(--muted);font-weight:600;font-size:.75rem}.weakcard{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--text);cursor:pointer}.weakcard__head{font-weight:800}.weakcard__list{display:flex;flex-wrap:wrap;gap:6px}.weakcard__chip{font-size:.78rem;background:#e2604f26;color:#f0b3aa;border:1px solid var(--ng-edge);border-radius:999px;padding:3px 8px}.weakcard__empty{color:var(--muted);font-size:.82rem}.btn{width:100%;padding:16px;border-radius:12px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:1rem;font-weight:700}.btn:disabled{opacity:.6;cursor:default}.btn--primary{background:var(--accent);border-color:var(--accent-edge);color:var(--on-accent)}.home__row{display:flex;gap:10px}.home__row .home__settings{flex:1}.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.theme{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:12px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text)}.theme--on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.theme__swatch{position:relative;width:38px;height:38px;border-radius:9px;flex:none;border:2px solid;display:inline-block}.theme__dot{position:absolute;width:12px;height:12px;border-radius:50%;left:7px;top:13px}.theme__dot--panel{left:19px}.theme__label{font-size:.9rem;font-weight:700}.reset{width:100%;padding:14px;border-radius:12px;cursor:pointer;border:1px solid var(--ng-edge);background:transparent;color:var(--ng);font-weight:700}.reset--armed{background:var(--ng);color:#fff;border-color:var(--ng-edge)}.reset-cancel{width:100%;margin-top:8px;padding:10px;border-radius:10px;cursor:pointer;border:none;background:none;color:var(--muted)}.sharecard{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:20px;padding:24px 20px;text-align:center;display:flex;flex-direction:column;gap:4px}.sharecard__brand{font-size:1.4rem;font-weight:800}.sharecard__tag{color:var(--muted);font-size:.85rem}.sharecard__total{margin:12px 0 6px;display:flex;align-items:baseline;justify-content:center;gap:8px}.sharecard__num{font-size:4rem;font-weight:900;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}.sharecard__unit{color:var(--muted)}.sharecard__modes{display:flex;flex-direction:column;gap:10px;margin-top:8px}.sharecard__mode{background:var(--bg2);border-radius:12px;padding:12px 14px}.sharecard__mode-top{display:flex;justify-content:space-between;font-weight:800}.sharecard__lv{color:var(--accent)}.sharecard__mode-sub{display:flex;justify-content:space-between;color:var(--muted);font-size:.85rem;margin-top:4px}.sharecard__best{color:var(--ok);font-weight:700}.sharecard__foot{color:var(--muted);font-size:.8rem;margin-top:14px}.qtimer{height:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.qtimer__fill{height:100%;width:100%;background:var(--accent);border-radius:999px}.strings{display:flex;gap:8px}.strbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--muted)}.strbtn--on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}.strbtn__num{font-size:1rem;font-weight:800}.strbtn__note{font-size:.7rem}.hints__lead{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0}.hintcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.hintcard h3{margin:0;font-size:1.02rem}.hintcard p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}.hintcard p b{color:var(--text);font-weight:700}.hint-board{margin-top:4px}.hint-board .fretboard{height:auto;box-shadow:none;padding:8px 6px}@media(min-width:560px){.choices{grid-template-columns:repeat(6,1fr)}}