/* Goal100 Instrument kit styles (g100-instrument.js). Uses the course engine's colors, so light and dark themes both work. */
.in-box{display:flex;flex-direction:column;gap:12px;color:var(--ink,#18192B)}
.in-two{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:16px;align-items:start}
@media (max-width:620px){.in-two{grid-template-columns:1fr}.in-left{margin:0 auto;width:100%}.in-left .in-fing{max-height:300px;width:auto}.in-pl .in-left .in-fing{max-height:220px}}
.in-fing{max-height:min(62vh,520px)}
.in-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.in-now{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-height:3.2rem}
.in-big{font:800 clamp(2rem,8vw,3.2rem)/1 var(--display,"Baloo 2",system-ui,sans-serif)}
.in-sub{font-weight:700;color:var(--ink2,#55586E)}
.in-q{font-size:1.15rem;margin:0}
.in-fb{min-height:1.5em;font-weight:700;margin:0;padding:6px 10px;border-radius:10px}
.in-fb:empty{padding:0}
.in-fb.ok{background:var(--good-soft,#DDF2E5);color:var(--good,#1D7F47)}
.in-fb.no{background:var(--warn-soft,#FBEFD6);color:var(--warn,#9A6400)}
.in-fb.warn{background:var(--acc-soft,#E4E4F7);color:var(--acc,#2B2A8C)}
.in-ladder p{margin:6px 0;padding:8px 10px;border-radius:10px;background:var(--gold-soft,#FFF4D1);color:var(--ink,#18192B)}
.in-help{margin:0}
.in-sys{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill.sm{min-height:44px}
.in-box .pill[aria-pressed="true"],.in-box .pill[aria-selected="true"]{background:var(--acc,#2B2A8C);color:var(--acc-ink,#fff);border-color:var(--acc,#2B2A8C)}

/* staff */
.in-staff{display:block;max-width:100%;height:auto;color:var(--ink,#18192B)}
.in-nh{cursor:pointer;outline:none}
.in-nh .in-head{transition:fill .2s}
.in-nh.on .in-head{stroke-width:2.5}
.in-nh.on .in-nl{fill:var(--acc,#2B2A8C)}
.in-nh:focus-visible .in-hit{stroke:var(--gold,#C98F00);stroke-width:3;rx:8}
.in-rest{fill:currentColor}
.in-bar{stroke:currentColor;stroke-width:1.6;opacity:.5}

/* fingering pictures */
.in-fing{display:block;width:100%;max-width:230px;height:auto;margin:0 auto;color:var(--ink,#18192B)}
.in-body{fill:#F3E6CC;stroke:#9B7F55;stroke-width:2}
.in-window{fill:#3A2C1E}
.in-joint{stroke:#9B7F55;stroke-width:2}
.in-lead{stroke:#9B7F55;stroke-width:2;stroke-dasharray:4 4;fill:none}
.in-h{fill:#FFFDF7;stroke:#5A4630;stroke-width:3;transition:fill .15s}
.in-h.on{fill:#2B2A8C}
.in-half{fill:transparent;pointer-events:none}
.in-half.on{fill:#2B2A8C}
.in-hole{cursor:pointer;outline:none}
.in-hole:focus-visible .in-h{stroke:#C98F00;stroke-width:5}
.in-hole:focus-visible .in-hhit{stroke:#C98F00;stroke-width:2}
.in-hole.back .in-h{stroke-dasharray:5 3}
.in-num{fill:currentColor}
.in-small{fill:currentColor;opacity:.85}
.in-brace{fill:none;stroke-width:3}
.in-brace.L{stroke:#5B8DEF}.in-brace.R{stroke:#E8921A}
.in-mv{color:#E8EAFF}
.in-mv .in-body{fill:#E9DCC4}
.in-mini{display:inline-block;width:46px}
.in-mini .in-fing{max-width:46px;max-height:none}
.in-mini .in-num,.in-mini .in-small,.in-mini .in-brace{display:none}
.in-choices{display:flex;gap:10px;flex-wrap:wrap}
.in-choice{background:var(--card,#fff);border:3px solid var(--line,#D9DBEA);border-radius:14px;padding:6px 8px;cursor:pointer;min-width:80px;min-height:44px}
.in-choice:hover{border-color:var(--acc,#2B2A8C)}
.in-choice:focus-visible{outline:3px solid var(--gold,#C98F00);outline-offset:2px}
.in-choice.no{opacity:.45}
/* other fingering kinds (valves, slide, frets, keys, pads) */
.in-valves,.in-slide,.in-pads{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.in-valve{width:64px;height:64px;border-radius:50%;border:4px solid #8A6A1E;background:#F4D58A;font:800 1.4rem var(--display,inherit);cursor:pointer}
.in-valve.on{background:#8A6A1E;color:#fff;transform:translateY(4px)}
.in-pos,.in-pad{min-width:48px;min-height:48px;border-radius:12px;border:2px solid var(--line,#D9DBEA);background:var(--card,#fff);color:var(--ink,#18192B);font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px}
.in-pos.on,.in-pad.on{background:var(--acc,#2B2A8C);color:var(--acc-ink,#fff)}
.in-fret{display:block;width:100%;max-width:300px;margin:0 auto;color:var(--ink,#18192B)}
.in-string{stroke:#9B7F55;stroke-width:3}.in-fretline{stroke:#B9B9C9;stroke-width:2}.in-nut{stroke:#5A4630;stroke-width:6}
.in-dot{fill:transparent;stroke:transparent;stroke-width:3;cursor:pointer}.in-dot:hover{stroke:var(--acc,#2B2A8C)}.in-dot.on{fill:var(--acc,#2B2A8C);stroke:var(--acc,#2B2A8C)}
.in-keys{display:flex;justify-content:center;gap:2px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.in-key{width:34px;height:120px;border:2px solid #9AA0B8;border-radius:0 0 6px 6px;background:#F7F7FA;cursor:pointer;flex:0 0 auto}
.in-key.blk{background:#1D1E2A;height:80px;width:26px;margin:0 -15px;z-index:1;position:relative}
.in-key.on{background:#F2B53B}

/* play along */
.in-modes,.in-levels,.in-tgt{display:flex;gap:6px;flex-wrap:wrap}
.in-tunes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.in-tsel{min-height:44px;max-width:100%;font:inherit;padding:6px 10px;border-radius:12px;border:2px solid var(--line,#D9DBEA);background:var(--card,#fff);color:var(--ink,#18192B)}
.in-tt{margin:0}
.in-lane{position:relative;overflow:hidden;border-radius:14px;border:2px solid var(--line,#D9DBEA);background:var(--card,#fff);padding:6px 0}
.in-lanein{position:relative;padding-left:40px}
.in-lanein .in-staff{max-width:none}
.in-lanein .in-staff{transition:none;will-change:transform}
.in-nowline{position:absolute;top:0;bottom:0;left:40px;width:110px;border-left:4px solid var(--gold,#F2B53B);background:linear-gradient(90deg,rgba(242,181,59,.18),rgba(242,181,59,0));pointer-events:none}
.in-pn{font:800 2rem/1 var(--display,inherit);text-align:center;margin:6px 0 0}
.in-tempo{align-items:center}
.in-bpm{font-weight:700}
.in-micw:empty{display:none}

/* rhythm */
.in-rsvg{display:block;max-width:100%;color:var(--ink,#18192B)}
.in-rsvg g.on .in-rh{fill:var(--gold,#F2B53B);stroke:var(--gold,#F2B53B)}
.in-rsvg g.on .in-syl{fill:var(--gold,#C98F00)}
.in-syl{fill:var(--acc,#2B2A8C)}
.in-box .in-tap{width:min(100%,360px);min-height:120px;align-self:center;justify-content:center;font:800 2rem var(--display,inherit);border-radius:24px;border:4px solid var(--acc,#2B2A8C);background:var(--acc-soft,#E4E4F7);color:var(--acc,#2B2A8C);touch-action:manipulation;user-select:none}
.in-box .in-tap.hit{animation:inhit .18s ease}
@keyframes inhit{50%{transform:scale(.96);background:var(--gold-soft,#FFF4D1)}}

/* care */
.in-care{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.in-ck{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--card,#fff);color:var(--ink,#18192B);border:2px solid var(--line,#D9DBEA);border-radius:14px;padding:10px 12px;cursor:pointer;min-height:56px;font:inherit}
.in-ck:focus-visible{outline:3px solid var(--gold,#C98F00);outline-offset:2px}
.in-ico{font-size:1.8rem}
.in-tick{margin-left:auto;font-size:1.4rem;width:36px;height:36px;border-radius:50%;border:2px solid var(--line,#D9DBEA);display:flex;align-items:center;justify-content:center;color:transparent;flex:0 0 auto}
.in-ck[aria-pressed="true"]{border-color:var(--good,#1D7F47);background:var(--good-soft,#DDF2E5)}
.in-ck[aria-pressed="true"] .in-tick{background:var(--good,#1D7F47);color:#fff;border-color:var(--good,#1D7F47)}
.in-reset{align-self:flex-start}

/* practice log */
.in-stats{display:flex;gap:12px;flex-wrap:wrap}
.in-stat{flex:1 1 140px;border-radius:14px;padding:10px 14px;background:var(--gold-soft,#FFF4D1);display:flex;flex-direction:column}
.in-stat b{font:800 2rem/1 var(--display,inherit)}
.in-barf{fill:var(--acc,#2B2A8C)}.in-bare{fill:var(--line,#D9DBEA)}
.in-chart svg{color:var(--ink,#18192B)}
@media print{body.in-printing *{visibility:hidden !important}body.in-printing .in-printme,body.in-printing .in-printme *{visibility:visible !important}body.in-printing .in-printme{position:absolute;left:0;top:0;width:100%}body.in-printing .noprint{display:none !important}}

/* pitch check */
.in-micard{border:2px dashed var(--acc,#2B2A8C);border-radius:14px;padding:12px;background:var(--acc-soft,#E4E4F7);color:var(--ink,#18192B)}
.in-micard p{margin:0 0 8px}
.in-meter{position:relative;height:110px;border-radius:14px;background:linear-gradient(90deg,var(--warn-soft,#FBEFD6),var(--good-soft,#DDF2E5) 42%,var(--good-soft,#DDF2E5) 58%,var(--warn-soft,#FBEFD6));display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.in-needle{position:absolute;top:8px;bottom:8px;left:calc(50% - 3px);width:6px;border-radius:3px;background:var(--acc,#2B2A8C);transition:transform .15s}
.in-mn{font:800 2.4rem/1 var(--display,inherit);position:relative}
.in-ms{font-weight:700;position:relative;text-align:center;padding:0 10px}

/* 3D */
.in-tabs{display:flex;gap:6px;flex-wrap:wrap}
.in-3d{position:relative;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#2A2D5C,#121331);min-height:280px}
.in-stage canvas{display:block;width:100% !important;height:auto !important;outline:none}
.in-stage canvas:focus-visible{outline:3px solid var(--gold,#F2B53B);outline-offset:-3px}
.in-stage>p{color:#E8EAFF;padding:12px;margin:0}
.in-fallback{background:#F7F2E6;border-radius:12px;margin:0 12px 12px;padding:8px}
.in-labels{position:absolute;inset:0;pointer-events:none}
.in-lab{position:absolute;left:0;top:0;white-space:nowrap;font:700 12px/1.2 var(--body,system-ui);color:#fff;background:rgba(18,19,49,.78);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 8px;margin:0;transition:opacity .3s}
@media (max-width:520px){.in-lab{font-size:10px;padding:2px 6px}}
.in-slider{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:700}
.in-slider input{flex:1 1 140px;min-height:44px;accent-color:var(--acc,#2B2A8C)}
.in-post-w{display:flex;flex-direction:column;gap:10px}
.in-post{width:100%;max-width:380px;margin:0 auto;display:block;color:var(--ink,#18192B)}
.in-chair{fill:#B98A5A}.in-hand{fill:#E7B98F}.in-floor{stroke:var(--line,#D9DBEA);stroke-width:3}
.in-figb{fill:#5B8DEF}.in-figl{fill:#2B2A8C}.in-figh{fill:#E7B98F}.in-eye{fill:#18192B}.in-mouth{stroke:#7A3B2A}.in-arm{stroke:#E7B98F}
.in-recl{stroke:#E9DCC4}.in-ang{stroke:var(--acc,#2B2A8C)}
.in-pin circle{fill:var(--gold,#F2B53B);stroke:#fff;stroke-width:2}.in-pin text{fill:#18192B}
.in-tips{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px;font-weight:600}
[data-theme="dark"] .in-body{fill:#E9DCC4}
[data-theme="dark"] .in-fallback{background:#2A2C3E}
[data-theme="dark"] .in-hole.back .in-h{stroke:#D8C7A4}[data-theme="dark"] .in-hole.back .in-h.on,[data-theme="dark"] .in-hole.back .in-half.on{fill:#A9A7FF}
@media (prefers-reduced-motion:reduce){.in-box *{transition:none !important;animation:none !important}}

/* ===== kit pass N110: chords, bowed strings, woodwind keys, pitch ladder, sticking, breathing, beat patterns ===== */
.in-fnum{fill:#fff;pointer-events:none}
.in-mute{fill:#C0392B;pointer-events:none}
.in-barre{fill:var(--acc,#2B2A8C);opacity:.85;pointer-events:none}
.in-fret.chord .in-dot.open.on{fill:transparent;stroke:#1D9A6C;stroke-width:3.5}
.in-dot{outline:none}
.in-dot:focus-visible{stroke:var(--gold,#C98F00);stroke-width:4}
.in-fboard{fill:#3A2A1C;opacity:.14}
.in-tape{stroke:#F2B53B;stroke-width:5;stroke-linecap:round;opacity:.85}
.in-bowed .in-string{stroke:#7C6A52}
.in-hole.key .in-h{transform:scale(1.35,.8);transform-box:fill-box;transform-origin:center}
.in-key{color:#171A3A;font-weight:800;font-size:14px}
.in-key.blk{color:#fff}.in-key.blk.on{color:#171A3A}
.in-key:focus-visible,.in-valve:focus-visible,.in-pos:focus-visible,.in-pad:focus-visible,.in-rung:focus-visible,.in-tap:focus-visible{outline:3px solid var(--gold,#C98F00);outline-offset:2px}
.in-ladderv{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}
.in-rung{min-height:44px;border:3px solid var(--line,#D9DBEA);border-radius:12px;background:var(--card,#fff);color:var(--ink,#18192B);font:800 1.05rem var(--display,inherit);cursor:pointer}
.in-rung.on{background:var(--acc,#2B2A8C);color:var(--acc-ink,#fff)}
.in-mini .in-ladderv{gap:2px}
.in-mini .in-rung{min-height:9px;height:9px;font-size:0;border-width:2px;border-radius:4px;padding:0}
.in-mini .in-valves,.in-mini .in-slide,.in-mini .in-pads{gap:2px;flex-wrap:nowrap}
.in-mini .in-valve{width:16px;height:16px;border-width:2px;font-size:9px;padding:0}
.in-mini .in-pos{min-width:8px;min-height:16px;width:8px;font-size:0;padding:0;border-radius:3px}
.in-mini .in-fret{max-width:120px}
.in-left,.in-fwrap{min-width:0;max-width:100%}
.in-taps{display:flex;gap:12px;justify-content:center;width:100%}
.in-two-hands .in-tap{flex:1 1 0;min-width:0}
.in-chord .in-cpick{gap:6px;flex-wrap:wrap}
.in-cnotes{margin:0;font-weight:700;overflow-wrap:anywhere}
.in-breath{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0}
.in-lung{width:min(60vw,220px);height:min(60vw,220px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#BFE3FF,#5B8DEF);transform:scale(.55);will-change:transform}
.in-bphase{font:800 1.5rem/1.2 var(--display,inherit);margin:0;min-height:1.8rem;text-align:center}
.in-bcount{font:800 2.2rem/1 var(--display,inherit);margin:0;min-height:2.2rem;color:var(--acc,#2B2A8C)}
.in-btip{margin:0;font-weight:700}
.in-beatw{display:flex;justify-content:center}
.in-beat{width:100%;max-width:340px;height:auto;display:block;color:var(--ink,#18192B)}
.in-bpath{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:7 7;opacity:.45}
.in-bnum circle{fill:var(--card,#fff);stroke:var(--acc,#2B2A8C);stroke-width:3}
.in-bnum text{fill:var(--acc,#2B2A8C)}
.in-bnum.on circle{fill:var(--gold,#F2B53B);stroke:var(--gold,#F2B53B)}
.in-bnum.on text{fill:#171A3A}
.in-bdot{fill:#E8514A;stroke:#fff;stroke-width:3}
.in-bsay{font:800 1.4rem/1.2 var(--display,inherit);text-align:center;margin:0;min-height:1.8rem}
.in-mpick,.in-bpick{gap:6px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.in-lung{transition:none !important}.in-box .in-tap.hit{animation:none}}
.in-dhit{cursor:pointer}
.in-mini{pointer-events:none}
/* Nov 12 (fix-misc): fingerboard spots are now button groups with a full-cell invisible tap zone (44 px or more). */
.in-spot{cursor:pointer;outline:none}
.in-spot:hover .in-dot{stroke:var(--acc,#2B2A8C)}
.in-spot:focus-visible .in-dot{stroke:var(--gold,#C98F00);stroke-width:4}
.in-spot:focus-visible .in-dhit{stroke:var(--gold,#C98F00);stroke-width:2;stroke-dasharray:4 3}

/* kit2 (Nov 12, 2026): 3D labels that never overlap; numbered dots + a list of buttons on narrow stages; 44px targets; time signature */
.in-lab .in-labn{display:none}
.in-lab.on{background:var(--gold,#F2B53B);color:#18192B;border-color:#fff}
.in-dots .in-lab{box-sizing:border-box;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold,#F2B53B);color:#18192B;border:2px solid #fff;font-size:13px;line-height:1;font-weight:800}
.in-dots .in-lab.on{background:#fff}
.in-dots .in-lab .in-labn{display:block}.in-dots .in-lab .in-labt{display:none}
.in-leads{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transition:opacity .3s}
.in-leads line{stroke:rgba(255,255,255,.85);stroke-width:1.5}.in-leads circle{fill:var(--gold,#F2B53B);stroke:#fff;stroke-width:1}
.in-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.in-legend[hidden],.in-3d[hidden]+.in-legend{display:none}
.in-leg{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;min-height:44px;text-align:left;font:700 .9rem/1.2 var(--body,system-ui);background:var(--card,#fff);color:var(--ink,#18192B);border:2px solid var(--line,#D9DBEA);border-radius:12px;padding:4px 10px;cursor:pointer}
.in-leg.on{border-color:var(--gold,#F2B53B);background:var(--gold-soft,#FFF4D6);color:#18192B}
.in-legn{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--gold,#F2B53B);color:#18192B;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.in-box .pill,.in-box .pill.sm,.in-box .btn,.in-box .sel{min-height:44px;min-width:44px;box-sizing:border-box}
.in-ts{font-family:var(--display,inherit)}
@media (prefers-reduced-motion:reduce){.in-lab,.in-leads{transition:none}}