.xy-controls{gap:var(--sp-3);align-items:flex-end}.xy-controls .tl-field{flex:auto;min-width:0}.xy-lbl{font:500 var(--ea-fs-sm)var(--ea-font-text);letter-spacing:0;text-transform:none;color:var(--ea-fg-soft)}.xy-stage{margin-top:var(--sp-4);padding:var(--sp-4)var(--sp-3);border-radius:var(--rad-lg);background:var(--ea-elevated);border:1px solid var(--ea-line-2)}.xy-frame{position:relative;height:clamp(200px,42vw,300px);touch-action:none;user-select:none;-webkit-user-select:none}.xy-frame::before,.xy-frame::after{content:"";position:absolute;left:0;right:0;height:6px;border-radius:3px;background:var(--ea-line-2);pointer-events:none}.xy-frame::before{top:22%}.xy-frame::after{bottom:22%}.xy-row{position:absolute;inset:0;display:flex;align-items:center;gap:clamp(3px,1vw,8px)}.xy-frame.is-crom .xy-row{top:34%}.xy-rowb{position:absolute;left:0;right:0;top:0;height:40%;z-index:2}.xy-bar{--c:var(--ea-violet);position:relative;flex:1;min-width:0;height:var(--h,100%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0;border:0;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 30%,rgba(0,0,0,.12)),var(--c);box-shadow:0 3px rgba(0,0,0,.28);cursor:pointer;font-family:var(--ea-font-text);transition:transform var(--ea-dur-fast)var(--ea-ease),filter var(--ea-dur-fast)}.xy-frame.is-crom .xy-bar{padding:6px 0}.xy-bar:focus-visible{outline:3px solid var(--ea-focus);outline-offset:2px}.xy-bar:hover{filter:brightness(1.08)}.xy-c0{--c:var(--ea-magenta)}.xy-c1{--c:color-mix(in srgb,var(--ea-magenta) 45%,var(--ea-amber))}.xy-c2{--c:var(--ea-amber)}.xy-c3{--c:var(--ea-lime)}.xy-c4{--c:var(--ea-teal)}.xy-c5{--c:var(--ea-data-5)}.xy-c6{--c:var(--ea-violet)}.xy-sharp{position:absolute;top:0;height:100%;--c:#2A2F3B;justify-content:flex-end;box-shadow:0 3px rgba(0,0,0,.45)}.xy-sharp .xy-name{background:rgba(232,234,240,.92)}.xy-name{display:inline-block;min-width:1.7em;padding:.15em .35em;border-radius:6px;background:rgba(255,255,255,.88);color:#12151c;font:700 clamp(11px,2.4vw,15px)/1.1 var(--ea-font-text);text-align:center;pointer-events:none}.xy-name:empty{display:none}.xy-pin{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.35);pointer-events:none}.xy-frame.is-crom .xy-pin{width:6px;height:6px}.xy-bar.is-hit,.xy-bar.is-demo{transform:translateY(3px)scale(.985);filter:brightness(1.25)}.xy-bar.is-target{outline:4px solid var(--ea-fg);outline-offset:3px;animation:xy-pulse 1s var(--ea-ease)infinite}.xy-bar.is-wrong{animation:xy-shake .25s linear}.xy-still .xy-bar{transition:none;animation:none!important}@keyframes xy-pulse{50%{outline-offset:6px}}@keyframes xy-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}.xy-practice{margin-top:var(--sp-4)}.xy-status{margin:var(--sp-3)0 0;font-weight:600;color:var(--ea-fg);min-height:3em}@media(max-width:520px){.xy-stage{padding:var(--sp-3)6px}.xy-frame.is-crom .xy-name{font-size:9px;min-width:1.3em;padding:.1em .15em}}