.bp{max-width:520px;margin:0 auto;width:100%;display:grid;gap:12px;justify-items:center}.bp-info,.bw-info{font-weight:700;text-align:center;min-height:1.5em;font-variant-numeric:tabular-nums}.bp-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.bp-tray{width:min(100%,420px);padding:14px;border-radius:26px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px solid var(--border);box-shadow:var(--shadow);perspective:800px}.bp-tray[data-shape=circle]{border-radius:50%;padding:22px}.bp-tray[data-shape=heart]{border-radius:40% 40% 50% 50%}.bp-tray.bp-side-b{background:color-mix(in srgb,var(--accent) 26%,var(--surface))}.bp-flipping{animation:bp-flip .45s ease-in-out}@keyframes bp-flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg) scale(.95)}to{transform:rotateY(0)}}.bp-grid{display:grid;gap:6px;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none}.bp-bubble{--c: hsl(var(--bp-hue) 75% 58%);appearance:none;border:0;padding:0;border-radius:50%;cursor:pointer;aspect-ratio:1;width:100%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 40%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 75%,#000));box-shadow:0 3px color-mix(in srgb,var(--c) 55%,#000),0 5px 8px #0003;transition:transform .08s,box-shadow .08s,background .08s;-webkit-tap-highlight-color:transparent}.bp-bubble:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.bp-down{transform:translateY(2px) scale(.84);filter:brightness(.82) saturate(.9);background:radial-gradient(circle at 60% 65%,color-mix(in srgb,var(--c) 30%,#fff),var(--c) 50%,color-mix(in srgb,var(--c) 65%,#000));box-shadow:inset 0 5px 10px #00000073,0 0 color-mix(in srgb,var(--c) 55%,#000)}@media (prefers-reduced-motion: reduce){.bp-flipping{animation:none}.bp-bubble{transition:none}}.bw{max-width:640px;margin:0 auto;width:100%;display:grid;gap:12px}.bw-sheet{display:grid;gap:8px;padding:14px;border-radius:10px;background:linear-gradient(135deg,#c8e1ff59,#ffffff1f),var(--surface-2);border:1px solid var(--border);touch-action:none;user-select:none;-webkit-user-select:none}.bw-bubble{appearance:none;padding:0;border:1px solid rgb(140 170 210 / .55);aspect-ratio:1;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 32% 28%,#fffffff2 0 10%,#ffffff59 11% 30%,#aac8f040 60%,#7896c859);box-shadow:inset -3px -4px 8px #506ea040,0 2px 4px #00000014;transition:transform .06s;-webkit-tap-highlight-color:transparent}.bw-bubble:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.bw-popped{transform:scale(.9) rotate(var(--bw-rot));border-radius:46% 54% 42% 58%/55% 45%;background:linear-gradient(115deg,#ffffff40,#a0b9dc2e 40%,#ffffff4d 55%,#96afd726);box-shadow:inset 0 1px 3px #506ea04d;border-style:dashed}.fs{max-width:460px;margin:0 auto;width:100%;display:grid;gap:12px;justify-items:center}.fs-stage{border-radius:50%;background:radial-gradient(circle,var(--surface) 55%,var(--surface-2));border:1px solid var(--border);padding:10px;line-height:0}.fs-canvas{display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.fs-canvas:active{cursor:grabbing}.fs-readout{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}.fs-rpm{font-size:2.2rem;font-weight:900;min-width:3ch;text-align:right}.fs-readout span{color:var(--muted);font-weight:600}.fs-time{margin-left:10px}.fs-colors{display:flex;gap:8px}.fs-color{appearance:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);cursor:pointer;padding:0}.fs-color:focus-visible{outline:3px solid var(--focus)}.fs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.fs-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;display:grid;gap:2px;text-align:center}.fs-stat span{font-size:.78rem;color:var(--muted)}.fs-stat b{font-variant-numeric:tabular-nums}