.arena{border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at center, transparent 0 46px, color-mix(in srgb, var(--line) 50%, transparent) 47px 48px, transparent 49px), linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px, var(--surface);place-items:center;height:380px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #0000000a}.arena>*{grid-area:1/1}.puck{z-index:2;background:radial-gradient(circle at 32% 30%, #fff8, transparent 40%), var(--accent);width:76px;height:76px;box-shadow:var(--shadow-lift);color:var(--accent-ink);font:600 12px var(--mono);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;display:grid}.puck.grabbed{cursor:grabbing}.follower{pointer-events:none;border-radius:50%;width:44px;height:44px}.follower[data-follower="0"]{background:color-mix(in srgb, var(--accent) 55%, transparent);width:60px;height:60px}.follower[data-follower="1"]{background:color-mix(in srgb, var(--sky) 50%, transparent);width:52px;height:52px}.follower[data-follower="2"]{background:color-mix(in srgb, var(--mint) 45%, transparent);width:44px;height:44px}.follower[data-follower="3"]{background:color-mix(in srgb, var(--amber) 45%, transparent);width:36px;height:36px}.follower[data-follower="4"]{background:color-mix(in srgb, var(--coral) 45%, transparent);width:28px;height:28px}.controls{flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 28px;display:flex}.readout{min-width:120px;color:var(--muted);font:500 13px var(--mono);font-variant-numeric:tabular-nums}.scrubber{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);grid-template-columns:1fr auto;align-items:center;gap:8px 16px;padding:20px 22px;display:grid}.track{grid-column:1/-1;justify-content:space-around;align-items:center;height:190px;display:flex}.dot{background:linear-gradient(135deg, var(--accent), var(--coral));border-radius:50%;width:26px;height:26px}.scrub{width:100%;accent-color:var(--accent)}.tips-frame{min-height:140px;margin-top:20px;position:relative}.tips{border:1px solid var(--line);border-radius:var(--radius);background:var(--accent-soft);padding:16px 22px}.tips h3{margin:0 0 6px;font-size:15px}.tips ul{color:var(--muted);margin:0;padding-left:18px}