.creative-performance-dialog { position:fixed; inset:auto min(16px,3vw) min(16px,3vh) auto; z-index:2100; width:min(355px,calc(100vw - 24px)); max-height:calc(100vh - 24px); margin:0; }
.creative-performance-heading,.creative-performance-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.creative-performance-heading { justify-content:space-between; }
.creative-performance-heading h2 { margin:0; }
.creative-performance-record { position:relative; display:grid; place-items:center; width:min(148px,45vw); aspect-ratio:1; margin:12px auto; border-radius:50%; border:2px solid #557180; background:repeating-radial-gradient(circle,#111b24 0 2px,#1b2934 2px 3px,#131e29 3px 7px); cursor:grab; touch-action:none; user-select:none; }
.creative-performance-record:active { cursor:grabbing; }
.creative-performance-record::before { content:''; position:absolute; inset:6px; border-radius:50%; border-top:3px solid #75ebcd; transform:rotate(var(--scratch-angle,0deg)); pointer-events:none; }
.creative-performance-record span { width:24%; height:24%; border-radius:50%; background:#477d83; border:1px solid #a8d9d5; pointer-events:none; }
.creative-performance-record span::after { content:''; position:absolute; top:50%; left:50%; width:5px; height:5px; transform:translate(-50%,-50%); border-radius:50%; background:#14212b; }
.creative-performance-seek { display:grid; gap:4px; margin-bottom:9px; }
.creative-performance-controls button[aria-pressed='true'] { border-color:#75ebcd; }