.xy-tile .xy-surface{height:240px;min-height:240px}
@media(max-width:650px){.performance-grid>.xy-tile{grid-column:1/-1}.xy-tile .xy-surface{height:220px;min-height:220px}}
.xy-tile .performance-title:has(.xy-record-controls){height:auto;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.xy-record-controls{display:flex;align-items:center;gap:5px;width:100%;flex-wrap:wrap}
.xy-record-controls button{min-height:26px;padding:4px 7px;font-size:9px}
.xy-record-button[aria-pressed=true]{background:var(--tone-cc5860,#cc5860);color:var(--tone-fff,#fff);border-color:var(--tone-ff8585,#ff8585);box-shadow:0 0 12px var(--tone-ff626244,#ff626244)}
.xy-record-controls button[aria-pressed=true]:not(.xy-record-button){color:var(--accent);border-color:var(--accent);background:var(--tone-ffffff0b,#ffffff0b)}
.xy-record-button{min-width:72px}
.xy-record-status{font-size:9px;color:var(--muted);flex-basis:100%;min-width:0;height:14px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xy-record-button[aria-pressed=true]~.xy-record-status{color:var(--tone-ff8585,#ff8585)}
.xy-surface.automating .brush-trace{opacity:.45}
.xy-loop-rate{display:flex;align-items:center;gap:5px;margin-left:3px;font-size:8px;color:var(--muted)}.xy-loop-rate output{color:var(--accent);min-width:38px}.xy-loop-rate-dial{--turn:-135deg;position:relative;width:24px;height:24px;flex-shrink:0;border-radius:50%;border:1px solid var(--tone-8d9d8b77,#8d9d8b77);background:radial-gradient(circle at 35% 25%,var(--tone-566256,#566256),var(--tone-25302e,#25302e) 60%,var(--tone-111d22,#111d22));cursor:ns-resize;touch-action:none}.xy-loop-rate-dial:after{content:'';position:absolute;top:3px;left:11px;width:2px;height:7px;background:var(--accent);transform-origin:1px 9px;transform:rotate(var(--turn));border-radius:2px}.xy-loop-rate-dial[aria-disabled=true]{opacity:.35;cursor:default}.xy-loop-rate-dial:focus-visible{outline:2px solid var(--accent);outline-offset:3px}