.string-bench{position:relative;max-width:1000px;margin:28px auto;padding:35px 8%;background:radial-gradient(ellipse at 58% 50%,#9f754345,#151b1b 68%);border-block:1px solid #4b4a3b}.pluck-string{display:flex;gap:20px;align-items:center;background:transparent;width:100%;height:54px;border:0;padding:0;color:#d3cbb2;border-radius:0}.pluck-string:after{content:'';display:block;flex:1;height:var(--string-width,1px);background:linear-gradient(90deg,#a19071,#e0d4b4,#8b7853);box-shadow:0 2px 3px #000}.pluck-string:hover{background:#e4d8b009}.pluck-string.vibrating:after{animation:string-vibrate .05s linear 8}.pluck-string span{min-width:60px;text-align:left;font-variant-numeric:tabular-nums}.pluck-string small{margin-left:12px;color:#8c9d94}.bow-pad{position:relative;max-width:850px;height:430px;margin:20px auto;overflow:hidden;touch-action:pan-y;cursor:ew-resize;background:radial-gradient(ellipse,#78532b55,transparent 65%)}.bow-pad svg{width:100%;height:100%}.bow-visual{position:absolute;left:12%;right:12%;top:52%;height:6px;background:#c9bc92;box-shadow:0 -9px 0 #78562e;transform:translateX(var(--bow-x,0px)) rotate(-7deg);pointer-events:none}.bow-pad.sounding .bow-visual{box-shadow:0 -9px 0 #a37e47,0 0 14px #d4bf7b55}.string-choice{display:flex;gap:15px;flex-wrap:wrap;padding:12px 4vw}.string-choice label{padding:15px;border:1px solid #5a6455;min-height:48px;cursor:pointer}.string-choice input{accent-color:#d0b582}.music-detail{max-width:850px;display:grid;grid-template-columns:1fr 1fr;gap:25px}.music-detail svg{max-height:420px;width:100%}.music-detail .parts{gap:12px}#diagram .part-bridge,#diagram .part-body{opacity:.1}#diagram[data-active=bridge] .part-bridge,#diagram[data-active=body] .part-body{opacity:1}#diagram[data-active=strings] .part-strings{filter:drop-shadow(0 0 3px #e9d58f)}@keyframes string-vibrate{50%{transform:translateY(2px)}}@media(max-width:700px){.string-bench{margin:25px 15px;padding:22px 12px}.pluck-string{height:52px}.bow-pad{height:360px}.music-detail{display:block}.music-detail .parts{grid-template-columns:1fr}.string-choice{gap:10px;padding:10px 20px}.string-choice label{padding:13px}}@media(prefers-reduced-motion:reduce){.pluck-string.vibrating:after{animation:none}}
.string-bench{touch-action:none}