.instrument-stage.harmonica-mode{background:0 0;border:none;border-radius:0;box-shadow:none;padding:4px 8px 6px;width:100%!important;min-width:0;overflow:visible;display:flex;justify-content:center;align-items:flex-start}.neck-wrapper:has(.instrument-stage.harmonica-mode){width:100%}.neck-wrapper:has(.instrument-stage.harmonica-mode) .neck-container{width:100%;max-width:none;min-width:0;flex:1 1 auto;padding:20px clamp(12px,3vw,32px)}.harmonica-stage{display:flex;flex-direction:column;align-items:center;gap:12px;overflow:visible}.harmonica-controls{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#111;border:1px solid #2b2b2b;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.harmonica-controls label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#d2d2d2}.harmonica-key-select{min-width:100px}.harmonica-body{position:relative;background:0 0;border:none;box-shadow:none;padding:0 4px;overflow:visible;--note-main-size:var(--note-size, 32px);--note-bend-size:calc(var(--note-main-size) * 0.6);--comb-height:calc(var(--note-main-size) * 0.95);--row-gap:4px;--bend-gap:2px;--bend-slot:calc(var(--note-bend-size) + 2px);--bend-row:calc((var(--bend-slot) * 3) + (var(--bend-gap) * 2));--hole-min-width:calc(var(--note-main-size) + 4px);--plate-overhang:clamp(18px, calc(var(--note-main-size) * 1.2), 56px);--screw-size:clamp(14px, calc(var(--note-main-size) * 0.6), 24px);--screw-offset:clamp(10px, calc(var(--plate-overhang) * 0.45), 24px)}.harmonica-visuals{position:absolute;left:calc(var(--plate-overhang) * -1);right:calc(var(--plate-overhang) * -1);top:calc(var(--bend-row) + var(--row-gap));height:calc((var(--note-main-size) * 2) + var(--comb-height) + (var(--row-gap) * 2));display:grid;grid-template-rows:var(--note-main-size) var(--comb-height) var(--note-main-size);row-gap:var(--row-gap);z-index:0;pointer-events:none;filter:drop-shadow(0 10px 20px rgba(0, 0, 0, .65))}.vis-plate-bottom,.vis-plate-top{position:relative;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.85) 0,rgba(200,200,200,.75) 26%,rgba(110,110,110,.85) 50%,rgba(245,245,245,.8) 72%,rgba(80,80,80,.8) 100%),linear-gradient(90deg,#1a1a1a 0,#3f3f3f 14%,#dcdcdc 50%,#3f3f3f 86%,#1a1a1a 100%);box-shadow:inset 0 2px 8px rgba(0,0,0,.55),inset 0 -3px 8px rgba(255,255,255,.25),0 6px 10px rgba(0,0,0,.35)}.vis-plate-bottom{transform:scaleY(-1)}.vis-plate-bottom::after,.vis-plate-bottom::before,.vis-plate-top::after,.vis-plate-top::before{content:'';position:absolute;top:50%;width:var(--screw-size);height:var(--screw-size);border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 30%,#fff9df 0,#ffd87a 35%,#c98a24 60%,#6a4214 82%,#2a1706 100%);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.6),0 2px 5px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4)}.vis-plate-bottom::before,.vis-plate-top::before{left:var(--screw-offset)}.vis-plate-bottom::after,.vis-plate-top::after{right:var(--screw-offset)}.vis-comb{border-radius:12px;background:linear-gradient(90deg,#5f341c 0,#a8602f 35%,#c98b46 50%,#a8602f 65%,#5f341c 100%);border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 3px 6px rgba(0,0,0,.6),inset 0 -2px 4px rgba(255,255,255,.12)}.harmonica-holes{position:relative;display:grid;grid-template-columns:repeat(10,minmax(var(--hole-min-width),1fr));column-gap:clamp(4px,calc(var(--note-main-size) * .18),10px);z-index:2}.harmonica-hole{display:grid;grid-template-rows:var(--bend-row) var(--note-main-size) var(--comb-height) var(--note-main-size) var(--bend-row);row-gap:var(--row-gap);justify-items:center;align-items:center;min-width:var(--hole-min-width)}.harmonica-bends{height:100%;display:grid;grid-template-rows:repeat(3,var(--bend-slot));row-gap:var(--bend-gap);align-items:center;justify-items:center}.harmonica-note{position:relative;width:var(--note-main-size);height:var(--note-main-size);cursor:pointer;touch-action:manipulation;--note-size:var(--note-main-size);--note-font:0.65rem;--badge-offset-x:8px;--badge-offset-y:-20px;z-index:3}.harmonica-note.bend-note{width:var(--note-bend-size);height:var(--note-bend-size);--note-size:var(--note-bend-size);--note-font:0.5rem;--badge-offset-x:6px;--badge-offset-y:-16px;opacity:.9}.harmonica-note:not(.active):not(.manual-hold) .note-marker:not(.in-scale):not(.in-chord):not(.in-root):not(.in-third):not(.in-fifth):not(.in-seventh):not(.in-extension):not(.active){opacity:.3;transform:translate(-50%,-50%) scale(.75);background:0 0;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.6);box-shadow:inset 0 0 6px rgba(0,0,0,.5)}.harmonica-note .note-marker{transition:transform .12s ease-out,opacity .12s ease-out,box-shadow .18s,filter .18s}.harmonica-note .note-marker.active,.harmonica-note .note-marker.manual-hold,.harmonica-note .note-marker.manual-play,.harmonica-note.active .note-marker,.harmonica-note.manual-hold .note-marker,.harmonica-note.manual-play .note-marker{opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1.3);box-shadow:0 0 16px rgba(0,255,255,.75),0 0 30px rgba(255,159,67,.6),inset 0 0 10px rgba(255,255,255,.7)}.note-hole{width:calc(var(--comb-height) * .8);height:calc(var(--comb-height) * .8);border-radius:calc(var(--comb-height) * .2);background:linear-gradient(180deg,#120b06,#060403);border:1px solid rgba(255,255,255,.12);color:#f2d8b2;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 0 rgba(0,0,0,.7);box-shadow:inset 0 3px 6px rgba(0,0,0,.75),inset 0 -2px 4px rgba(255,255,255,.08)}@media (max-width:600px){.harmonica-body{--row-gap:3px;--bend-gap:2px}.harmonica-holes{column-gap:clamp(3px,calc(var(--note-main-size) * .14),8px)}}