.pi-host{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.pi-root{box-sizing:border-box;color:var(--cream);font-family:var(--font-body);cursor:pointer;flex-direction:column;gap:12px;padding:14px 14px 18px;display:flex;position:absolute;inset:0}.pi-top{flex:none;justify-content:space-between;align-items:center;height:30px;display:flex}.pi-readout{font-family:var(--font-mono);letter-spacing:.08em;color:var(--cream-dim);align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.pi-readout-label{margin-right:2px}.pi-readout-count{color:var(--cream);min-width:3ch;margin-left:4px}.pi-slot{border:2px solid var(--line);background:var(--bg-2);box-sizing:border-box;width:14px;height:14px;transition:background-color .12s var(--ease-out), border-color .12s var(--ease-out);border-radius:3px}.pi-slot.pi-fixed{background:var(--mustard);border-color:var(--mustard)}.pi-slot.pi-missed{border-color:var(--brick);background:0 0}.pi-lamp{background:var(--bg-2);border:1px solid var(--line);font-family:var(--font-display);letter-spacing:.06em;color:var(--cream-dim);border-radius:999px;align-items:center;gap:8px;padding:5px 12px 5px 8px;font-size:14px;display:flex}.pi-lamp-bulb{background:#4a2420;border-radius:50%;width:14px;height:14px;box-shadow:inset 0 -2px #00000059}.pi-rec .pi-lamp{background:var(--brick);border-color:var(--brick);color:var(--cream)}.pi-rec .pi-lamp-bulb{background:#ffd9c9;box-shadow:0 0 0 3px #ffd9c940,0 0 14px 4px #ef6f5eb3}.pi-deck{border-radius:var(--r-md);background:var(--wood);min-height:150px;box-shadow:var(--shadow-panel), inset 0 0 0 1px #ffffff0d;flex:auto;position:relative;overflow:hidden}.pi-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.pi-flash .pi-deck{animation:pi-flash .26s var(--ease-out)}@keyframes pi-flash{0%{box-shadow:var(--shadow-panel), inset 0 0 0 3px var(--coral)}to{box-shadow:var(--shadow-panel), inset 0 0 0 1px #ffffff0d}}.pi-count{pointer-events:none;transition:opacity .16s var(--ease-out);background:#110c0a9e;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.pi-count.pi-gone{opacity:0}.pi-count-num{font-family:var(--font-display);color:var(--tape);font-size:84px;line-height:1}.pi-pulse .pi-count-num{animation:pi-pop .3s var(--ease-out)}.pi-calm .pi-pulse .pi-count-num{animation:none}@keyframes pi-pop{0%{transform:scale(1.25)}to{transform:scale(1)}}.pi-count-lamps{gap:10px;display:flex}.pi-beat{background:var(--bg-3);border-radius:50%;width:14px;height:14px}.pi-beat.pi-on{background:var(--mustard)}.pi-bottom{flex-direction:column;flex:none;align-items:center;gap:6px;display:flex}.pi-button{background:var(--brick);width:88px;height:88px;color:var(--cream);font-family:var(--font-display);letter-spacing:.08em;cursor:pointer;box-shadow:0 0 0 6px var(--bg-3), 0 0 0 7px var(--line), 0 6px 0 6px #000;touch-action:none;-webkit-tap-highlight-color:transparent;border:0;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin:0;padding:0;font-size:15px;transition:transform 50ms linear,box-shadow 50ms linear,background-color 50ms linear;display:flex;position:relative;transform:translateY(0)}.pi-button:focus{outline:none}.pi-button-dot{background:var(--cream);border-radius:50%;width:14px;height:14px}.pi-held .pi-button{box-shadow:0 0 0 6px var(--bg-3), 0 0 0 7px var(--line), 0 2px 0 6px #000;background:#a92f22;transform:translateY(4px)}.pi-rec .pi-button-dot{background:#ffd9c9;box-shadow:0 0 10px 3px #ffd9c999}.pi-hint{font-family:var(--font-mono);letter-spacing:.2em;color:var(--cream-dim);margin-top:10px;font-size:11px;font-weight:700}.pi-rec .pi-hint{color:var(--coral)}