.xy-wrap{--maxh:clamp(190px,34vw,300px);--wood1:#d79a5b;--wood2:#b77437;--wood3:#8f5524;border-radius:22px;background:#20291e;padding:16px 14px 18px;color:#f1f4e9;user-select:none;-webkit-user-select:none}.xy-wrap.metal{--wood1:#e4e7ea;--wood2:#b9c0c6;--wood3:#8a939b}.xy-frame{position:relative;display:grid;grid-template-columns:repeat(var(--bars),minmax(0,92px));justify-content:center;gap:clamp(6px,1.4vw,16px);align-items:center;height:calc(var(--maxh) + 96px);padding:40px 4px 0;touch-action:none}.xy-rail{position:absolute;left:0;right:0;height:9px;border-radius:5px;background:linear-gradient(#5b3a1d,#3b2512);box-shadow:0 2px #0004;pointer-events:none;z-index:0}.xy-rail.top{top:calc(50% + 20px - var(--maxh) * .5 * .55 - 4px)}.xy-rail.bottom{top:calc(50% + 20px + var(--maxh) * .5 * .55 - 4px)}.xy-bar{position:relative;z-index:1;height:calc(var(--maxh) * var(--len));min-height:120px;width:100%;padding:0;border:0;background:none;cursor:pointer;touch-action:none;display:flex;justify-content:center;-webkit-tap-highlight-color:transparent}.xy-wood{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;border-radius:10px;padding:12px 2px 10px;background:repeating-linear-gradient(92deg,#0000 0 7px,#5a2f0f14 7px 8px,#0000 8px 13px),linear-gradient(90deg,var(--wood3),var(--wood1) 18%,var(--wood1) 46%,var(--wood2) 78%,var(--wood3));box-shadow:inset 0 2px #ffffff3d,inset 0 -5px #00000026,0 6px #00000059;transition:transform .05s;transform-origin:50% 50%}.xy-wrap.colored .xy-wood{background:repeating-linear-gradient(92deg,#0000 0 7px,#0000001a 7px 8px,#0000 8px 13px),linear-gradient(90deg,color-mix(in srgb,var(--nc) 70%,#000 30%),var(--nc) 22%,var(--nc) 60%,color-mix(in srgb,var(--nc) 75%,#000 25%))}.xy-wrap.colored.metal .xy-wood{background:linear-gradient(90deg,color-mix(in srgb,var(--nc) 55%,#555),color-mix(in srgb,var(--nc) 60%,#fff) 30%,var(--nc) 60%,color-mix(in srgb,var(--nc) 70%,#333))}.xy-nail{position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4efe6,#857a6a);box-shadow:0 1px 1px #0006}.xy-nail.a{top:22.4%}.xy-nail.b{bottom:22.4%}.xy-name{position:relative;z-index:1;margin-top:auto;margin-bottom:22%;font-size:clamp(13px,2.1vw,19px);font-weight:800;color:#20291e;background:#fffaf0e6;border-radius:9px;padding:2px 6px;min-width:2ch;text-align:center}.xy-name:empty{display:none}.xy-key{font-size:10px;font-weight:700;color:#20291eb3}.xy-tube{position:absolute;left:50%;top:100%;width:46%;height:calc(var(--len) * 30px + 8px);transform:translate(-50%);border-radius:0 0 8px 8px;background:linear-gradient(90deg,#9aa39a,#d9ded7 45%,#7d877d);opacity:.55;pointer-events:none}.xy-wrap.metal .xy-tube{display:none}.xy-wood.ring{animation:xy-ring .32s ease-out}@keyframes xy-ring{0%{transform:translateY(3px) scaleY(.985)}25%{transform:translateY(-2px) rotate(-.6deg)}50%{transform:translateY(1px) rotate(.45deg)}75%{transform:translateY(-.5px) rotate(-.2deg)}to{transform:none}}.xy-bar.is-target .xy-wood,.xy-bar.is-target-l .xy-wood{box-shadow:0 0 0 4px #cef57a,0 0 18px 4px #cef57a99,0 6px #00000059}.xy-bar.is-target:before{content:"▼";position:absolute;top:-24px;left:50%;transform:translate(-50%);font-size:16px;color:#cef57a;animation:xy-bob 1s infinite;pointer-events:none}.xy-bar.is-hint .xy-wood{box-shadow:0 0 0 4px #ffe27a,0 6px #00000059}.xy-bar.is-mark .xy-wood{box-shadow:0 0 0 3px #f1f4e9b3,0 6px #00000059}.xy-bar.is-ok .xy-wood{box-shadow:0 0 0 5px #5fae3a,0 0 18px 4px #5fae3a99}.xy-bar.is-no .xy-wood{box-shadow:0 0 0 5px #e3904f,0 0 18px 4px #e3904f99}.xy-bar.is-demo .xy-wood{box-shadow:0 0 0 4px #7fdbe3,0 0 16px 4px #7fdbe399}.xy-bar:focus-visible{outline:none}.xy-bar:focus-visible .xy-wood{outline:3px solid #fff;outline-offset:3px}.xy-mallet{position:absolute;top:calc(50% + 20px - var(--maxh) * .5 * .62);left:calc(var(--x) * 100%);width:0;height:0;z-index:3;pointer-events:none;transition:left .09s ease-out}.xy-stick{position:absolute;left:-4px;top:-84px;width:8px;height:84px;border-radius:4px;background:linear-gradient(90deg,#c9a36b,#f0d7a8,#a8824f);transform-origin:50% 0;transform:rotate(-14deg) translateY(-14px)}.xy-mallet.right .xy-stick{transform:rotate(14deg) translateY(-14px)}.xy-stick i{position:absolute;left:50%;bottom:-14px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#e8a922 55%,#a86f10);box-shadow:0 2px 3px #0006}.xy-wrap.metal .xy-stick i{background:radial-gradient(circle at 35% 30%,#fff,#9db3ff 55%,#3e5398)}.xy-stick.hit{animation:xy-hit .16s ease-out}.xy-mallet.right .xy-stick.hit{animation-name:xy-hit-r}@keyframes xy-hit{0%{transform:rotate(-14deg) translateY(-14px)}45%{transform:rotate(-4deg) translateY(10px)}to{transform:rotate(-14deg) translateY(-14px)}}@keyframes xy-hit-r{0%{transform:rotate(14deg) translateY(-14px)}45%{transform:rotate(4deg) translateY(10px)}to{transform:rotate(14deg) translateY(-14px)}}@media(prefers-reduced-motion:reduce){.xy-wood.ring,.xy-stick.hit{animation:none}.xy-mallet{transition:none}}.xy-studio{display:grid;gap:14px}.xy-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px 16px;border:1px solid var(--edu-line);border-radius:16px;background:var(--edu-soft)}.xy-controls label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.xy-controls select{min-height:40px}.xy-controls input[type=range]{width:110px}.xy-controls .edu-secondary[aria-pressed=true]{background:#20291e;color:#cef57a}.xy-metro{display:inline-flex;align-items:center;gap:8px}.xy-metro i{width:12px;height:12px;border-radius:50%;background:var(--edu-line);display:inline-block}.xy-metro i.on{background:#cef57a;box-shadow:0 0 0 3px #86a347}.xy-note-readout{font-size:13px;color:var(--edu-muted)}.xy-note-readout b{font-size:18px;color:var(--edu-ink)}.xy-studio.xy-full{position:fixed;inset:0;z-index:999;background:var(--edu-bg,#f5f6ef);padding:14px max(12px,calc((100vw - 1200px)/2));overflow:auto}.xy-studio.xy-full .xy-wrap{--maxh:clamp(200px,52vh,420px)}html[data-theme=dark] .xy-studio.xy-full{background:#141716}.xy-practice{border:1px solid var(--edu-line);border-radius:18px;padding:18px;background:var(--edu-card)}.xy-practice h2{font-size:22px;margin:0 0 6px}.xy-modes{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.xy-modes button{min-height:44px}.xy-practice .pedu-task{margin:10px 0}.xy-practice .xy-result{font-size:15px;font-weight:700}@media(max-width:700px){.xy-wrap{padding:12px 6px 14px;border-radius:14px;--maxh:clamp(170px,48vw,240px)}.xy-frame{gap:4px;grid-template-columns:repeat(var(--bars),minmax(0,1fr))}.xy-bar{min-height:104px}.xy-key{display:none}.xy-stick{height:70px;top:-70px}.xy-stick i{width:20px;height:20px;margin-left:-10px}.xy-controls{padding:12px;gap:8px 10px}.xy-controls input[type=range]{width:90px}}@media(max-height:520px)and (orientation:landscape){.xy-wrap{--maxh:clamp(140px,46vh,220px)}.xy-studio.xy-full .xy-wrap{--maxh:56vh}}.xy-wrap .c0{--nc:#ff9a8f}.xy-wrap .c2{--nc:#ffbf69}.xy-wrap .c4{--nc:#ffe27a}.xy-wrap .c5{--nc:#9fe39a}.xy-wrap .c7{--nc:#7fdbe3}.xy-wrap .c9{--nc:#9db3ff}.xy-wrap .c11{--nc:#cfa6f5}@keyframes xy-bob{50%{transform:translate(-50%,4px)}}