:root{color-scheme:dark;--bg: #0f0c09;--bg2: #1c150f;--panel: #1b1611;--panel2: #251e17;--text: #f7efe4;--muted: #a39181;--line: rgba(255, 255, 255, .075);--thumb: #3a3028;--wood: #3f2617;--wood2: #26160b;--accent: #f5a73d;--accent-edge: #d6801a;--on-accent: #2a1704;--accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);--track: color-mix(in srgb, var(--text) 11%, transparent);--ok: #3fcf8e;--ok-edge: #23995f;--ng: #ff6b57;--ng-edge: #d0412e;--radius: 20px;--radius-sm: 14px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .22);--shadow: 0 18px 40px rgba(0, 0, 0, .45)}[data-theme=light]{color-scheme:light;--bg: #f3efe7;--bg2: #fbf8f2;--panel: #ffffff;--panel2: #f4efe6;--text: #1e1712;--muted: #84735f;--line: rgba(40, 25, 10, .09);--thumb: #ffffff;--accent: #e08214;--accent-edge: #bd6608;--on-accent: #ffffff;--track: color-mix(in srgb, var(--text) 8%, transparent);--ok: #1fa86a;--ok-edge: #15804f;--ng: #e2533f;--ng-edge: #b83a28;--shadow-sm: 0 1px 2px rgba(60, 40, 15, .06), 0 4px 14px rgba(60, 40, 15, .07);--shadow: 0 18px 40px rgba(60, 40, 15, .12)}*{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:var(--bg);background-image:radial-gradient(120% 70% at 50% -10%,var(--bg2),transparent 70%);background-attachment:fixed;color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{max-width:480px;margin:0 auto;min-height:100%;padding:max(12px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.view{display:flex;flex-direction:column;gap:14px;flex:1;animation:viewin .22s ease-out}@keyframes viewin{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.view__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.view__head h2{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;text-align:center}.view__meta{color:var(--muted);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}.back,.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--text);cursor:pointer;padding:0;transition:transform .08s ease,background .12s ease}.back{justify-self:start}.back:active,.iconbtn:active{transform:scale(.92);background:var(--panel2)}.prompt{text-align:center;font-size:1.12rem;font-weight:600;margin:4px 0 0;color:var(--text);letter-spacing:-.01em}.prompt__note{display:inline-block;min-width:2.2em;font-size:1.6rem;font-weight:800;color:var(--accent);letter-spacing:-.02em}.prompt__where{color:var(--muted);font-size:.92rem;font-weight:600;margin-right:4px}.hint{text-align:center;color:var(--muted);font-size:.8rem;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);border:1px solid var(--line);border-radius:var(--radius);padding:12px 6px 8px;box-shadow:var(--shadow-sm);overflow:visible}.board-edge{fill:none;stroke:#0006;stroke-width:1}.wire{opacity:.95}.string-shadow{stroke:#00000073}.string--plain{stroke:#eceae4}.string--wound{stroke:#cfa76c}.string--active{stroke:var(--accent)}.inlay{opacity:.92}.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;font-variant-numeric:tabular-nums}.fret-badge{fill:var(--accent)}.fret-badge-text{fill:var(--on-accent);font-size:14px;font-weight:800;text-anchor:middle}.fret-start-line{stroke:var(--accent);stroke-width:6;stroke-linecap:round}.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:color-mix(in srgb,var(--accent) 35%,transparent)}.dot-highlight circle,.dot-mark circle{transform-box:fill-box;transform-origin:center}.dot-highlight circle,.dot-mark circle{animation:pop .2s cubic-bezier(.3,1.5,.5,1)}@keyframes pop{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.dot-highlight .dot-pulse{fill:none;stroke:var(--accent);stroke-width:3;animation:pulse 1.5s ease-out infinite}@keyframes pulse{0%{transform:scale(1);opacity:.75}to{transform:scale(1.9);opacity:0}}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.choice{font-size:1.3rem;font-weight:700;min-height:60px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;box-shadow:0 1px 2px #0000001f;transition:transform .08s ease,background .12s ease}.choice__accidental{display:flex;flex-direction:column;align-items:center;font-size:.9rem;line-height:1.12;font-weight:700}.choice:active{transform:scale(.94);background:var(--panel2)}.choice:disabled{cursor:default}.choice--correct{background:var(--ok);border-color:transparent;color:#fff;animation:pop .2s ease-out}.choice--wrong{background:var(--ng);border-color:transparent;color:#fff;animation:shake .3s ease}.choice--dim{opacity:.32}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.hud{display:flex;align-items:center;gap:10px}.hud__lv{font-weight:800;font-size:.8rem;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px;letter-spacing:-.01em}.xpbar{position:relative;flex:1;height:8px;background:var(--track);border-radius:999px}.xpbar__fill{height:100%;background:linear-gradient(90deg,var(--accent-edge),var(--accent));border-radius:999px;transition:width .45s cubic-bezier(.3,1.2,.5,1)}.xpbar__gain{position:absolute;right:2px;top:-20px;color:var(--accent);font-weight:800;font-size:.8rem;animation:floatup .9s ease-out forwards}@keyframes floatup{0%{opacity:1;transform:translateY(6px)}to{opacity:0;transform:translateY(-8px)}}.hud__streak{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:600;color:var(--muted);padding:4px 10px;border-radius:999px;background:var(--track);font-variant-numeric:tabular-nums}.hud__streak--on{color:var(--on-accent);background:var(--accent);font-weight:800}.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:.82rem;padding:8px 16px;border-radius:999px;z-index:10;box-shadow:var(--shadow);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:16px}.topbar{display:flex;align-items:center;justify-content:space-between}.topbar__brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;letter-spacing:-.01em}.topbar__mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}.hero{padding:10px 2px 2px}.hero h1{margin:0;font-size:1.9rem;line-height:1.22;font-weight:800;letter-spacing:-.035em}.hero p{margin:10px 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px}.stat b{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stat b small{font-size:.8rem;font-weight:700;margin-left:1px;color:var(--muted)}.stat span{font-size:.72rem;color:var(--muted)}.section-label{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.06em;margin:4px 2px -6px}.home__modes{display:flex;flex-direction:column;gap:10px}.mode{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-sm);color:var(--text);cursor:pointer;transition:transform .08s ease,filter .12s ease}.mode:active{transform:scale(.98);filter:brightness(1.06)}.mode__icon{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}.mode__text{display:flex;flex-direction:column;min-width:0;flex:1}.mode__title{font-size:1.08rem;font-weight:700;letter-spacing:-.01em}.mode__desc{color:var(--muted);font-size:.82rem;margin-top:2px}.mode__lv{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}.mode__lv-badge{color:var(--accent);font-weight:800;font-size:.88rem;letter-spacing:-.01em}.mode__lv-bar{width:52px;height:5px;background:var(--track);border-radius:999px;overflow:hidden}.mode__lv-fill{display:block;height:100%;background:var(--accent);border-radius:999px}.mode--primary{background:linear-gradient(135deg,var(--accent),var(--accent-edge));border-color:transparent;color:var(--on-accent);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 32%,transparent);padding:20px 16px}.mode--primary .mode__icon{background:#ffffff38;color:var(--on-accent)}.mode--primary .mode__title{font-size:1.18rem}.mode--primary .mode__desc{color:var(--on-accent);opacity:.78}.mode--primary .mode__lv-badge{color:var(--on-accent)}.mode--primary .mode__lv-bar{background:#00000029}.mode--primary .mode__lv-fill{background:var(--on-accent)}.weakcard{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:left;padding:15px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-sm);color:var(--text);cursor:pointer;transition:transform .08s ease}.weakcard:active{transform:scale(.98)}.weakcard__head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem}.weakcard__head svg{color:var(--accent)}.weakcard__head .weakcard__chev{margin-left:auto;color:var(--muted)}.weakcard__list{display:flex;flex-wrap:wrap;gap:6px}.weakcard__chip{font-size:.75rem;font-weight:600;background:color-mix(in srgb,var(--ng) 14%,transparent);color:color-mix(in srgb,var(--ng) 70%,var(--text));border-radius:999px;padding:4px 10px}.weakcard__empty{color:var(--muted);font-size:.82rem}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-sm);color:var(--text);cursor:pointer;transition:transform .08s ease}.tile:active{transform:scale(.97)}.tile__icon{width:36px;height:36px;border-radius:11px;margin-bottom:8px;display:grid;place-items:center;background:var(--track);color:var(--text)}.tile__title{font-size:.95rem;font-weight:700}.tile__desc{font-size:.74rem;color:var(--muted)}.setting{display:flex;flex-direction:column;gap:8px}.setting h3{margin:8px 0 0;font-size:.82rem;font-weight:700;color:var(--muted);letter-spacing:.06em}.setting__hint{color:var(--muted);font-size:.78rem;margin:0;line-height:1.55}.segh{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:14px;background:var(--track)}.segh__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:42px;padding:8px 4px;border-radius:10px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease}.segh__btn:active{transform:scale(.97)}.segh__label{font-size:.9rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.segh__sub{font-size:.66rem;font-weight:500;opacity:.85}.segh__btn--on{background:var(--thumb);color:var(--text);box-shadow:0 1px 3px #0000002e}.segh__btn--on .segh__label{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:4px;background:var(--track)}.cell--none{background:var(--track)}.cell--good{background:var(--ok)}.cell--ok{background:var(--accent)}.cell--weak{background:var(--ng)}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;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:.82rem;font-weight:700;color:var(--muted);letter-spacing:.06em;margin:16px 0 2px}.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:var(--radius-sm);padding:12px 14px}.weak__pos{font-size:.92rem}.weak__pos b{color:var(--accent);font-weight:700}.weak__acc{font-weight:800;color:var(--ng);font-variant-numeric:tabular-nums}.weak__acc--mid{color:var(--accent)}.weak__acc--good{color:var(--ok)}.weak__acc small{color:var(--muted);font-weight:600;font-size:.74rem}.btn{width:100%;padding:16px;border-radius:16px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:1rem;font-weight:700;transition:transform .08s ease}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.6;cursor:default}.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-edge));border-color:transparent;color:var(--on-accent);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 30%,transparent)}.reset{width:100%;padding:14px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid color-mix(in srgb,var(--ng) 45%,transparent);background:transparent;color:var(--ng);font-weight:700}.reset--armed{background:var(--ng);color:#fff;border-color:transparent}.reset-cancel{width:100%;margin-top:8px;padding:10px;border-radius:10px;cursor:pointer;border:none;background:none;color:var(--muted)}.sharecard{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}.sharecard__brand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.15rem;font-weight:700;letter-spacing:-.01em}.sharecard__mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}.sharecard__tag{color:var(--muted);font-size:.84rem}.sharecard__total{margin:14px 0 6px;display:flex;align-items:baseline;justify-content:center;gap:8px}.sharecard__num{font-size:4rem;font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.03em}.sharecard__unit{color:var(--muted)}.sharecard__modes{display:flex;flex-direction:column;gap:10px;margin-top:8px}.sharecard__mode{background:var(--track);border-radius:14px;padding:13px 15px}.sharecard__mode-top{display:flex;justify-content:space-between;font-weight:700}.sharecard__lv{color:var(--accent)}.sharecard__mode-sub{display:flex;justify-content:space-between;color:var(--muted);font-size:.84rem;margin-top:4px}.sharecard__best{color:var(--ok);font-weight:700}.sharecard__foot{color:var(--muted);font-size:.78rem;margin-top:14px}.qtimer{height:4px;background:var(--track);border-radius:999px;overflow:hidden;margin-top:-4px}.qtimer__fill{height:100%;width:100%;background:var(--accent);border-radius:999px}.strings{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--track)}.strbtn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0;border-radius:10px;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:background .15s ease,color .15s ease}.strbtn:active{transform:scale(.95)}.strbtn--on{background:var(--thumb);color:var(--accent);box-shadow:0 1px 3px #0000002e}.strbtn__num{font-size:.98rem;font-weight:800}.strbtn__note{font-size:.66rem;font-weight:600}.hints__lead{color:var(--muted);font-size:.9rem;line-height:1.65;margin:0}.hintcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm)}.hintcard h3{margin:0;font-size:1rem;font-weight:700}.hintcard p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.68}.hintcard p b{color:var(--text);font-weight:700}.hint-board{margin-top:4px}.hint-board .fretboard{height:auto;box-shadow:none;padding:8px 4px}