.ball{--anatomy-paper:var(--surface);--anatomy-face:oklch(100% 0 0);--anatomy-top:oklch(100% 0 0);--anatomy-shade-0:oklch(89% .006 226);--anatomy-shade-1:oklch(92.5% .005 226);--anatomy-shade-2:oklch(95% .004 226);--anatomy-shade-3:oklch(97.3% .003 226);--anatomy-hi:oklch(30% .03 226);--anatomy-mid:oklch(64% .02 226);--anatomy-lo:oklch(78% .012 226);--anatomy-faint:oklch(88.5% .008 226);--anatomy-lit:oklch(24% .035 226);--anatomy-green:oklch(63% .14 160);--anatomy-halo:oklch(60% .02 226);--anatomy-halo-opacity:.3;--anatomy-dot:oklch(36% .03 226);--anatomy-weight:.6px;--anatomy-ease:var(--ease-smooth-out);--anatomy-mono:var(--font-geist-mono), ui-monospace, monospace;--cover-a-0:#dcc98a;--cover-a-1:#e4d49c;--cover-a-2:#ecdeb0;--cover-a-3:#f3e9c4;--cover-a-paper:#f0e6bd;--cover-b-0:#d4d6d2;--cover-b-1:#dcdedb;--cover-b-2:#e6e8e4;--cover-b-3:#f1f2ee;--cover-b-paper:#eef0ec;--cloth-0:#d8d2c0;--cloth-1:#e0dac8;--cloth-2:#e8e2d2;--cloth-3:#f0ebdc;--cloth-paper:#ebe5d4;--bladder-0:#b9d3cd;--bladder-1:#c6ddd8;--bladder-2:#d4e6e1;--bladder-3:#e3f0ec;--bladder-paper:#d0e4df;margin:0}html:not(.js) .ball,.ball[data-state=error]{display:none}.ball-card{border-radius:var(--radius-panel);background:var(--surface);box-shadow:var(--shadow-card), 0 0 0 1px var(--hairline);gap:.75rem;padding:clamp(1rem,.6rem + 1.6vw,1.75rem);display:grid}.ball[data-frame=bare] .ball-card{box-shadow:none;background:0 0;border-radius:0;padding:0}.ball-title{text-transform:uppercase;letter-spacing:.09em;margin:0}.ball-stage{aspect-ratio:1;cursor:ew-resize;touch-action:pan-y;-webkit-tap-highlight-color:transparent;outline:none;width:100%;max-width:38rem;margin-inline:auto}.ball-stage:focus-visible{outline:2px solid var(--ring);outline-offset:4px;border-radius:var(--radius-lg)}.ball-foot{flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem;display:flex}.ball-foot p{margin:0}.ball-hint{text-transform:uppercase;letter-spacing:.09em}.ball-foot .ball-readout{font-variant-numeric:tabular-nums;color:var(--ink-2)}.ball-hint [data-touch]{display:none}@media (hover:none){.ball-hint [data-pointer]{display:none}.ball-hint [data-touch]{display:inline}}.ball-keys{flex-wrap:wrap;gap:.25rem .5rem;margin:1rem 0 0;padding:0;list-style:none;display:flex}.ball-key{font:inherit;color:var(--ink-2);cursor:pointer;transition:background-color var(--dur-press) ease-out;background:0 0;border:0;border-radius:999px;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;display:inline-flex}.ball-key:hover,.ball-key[aria-pressed=true]{background:var(--canvas-2);color:var(--ink)}.ball-key:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.ball-swatch{flex:none;width:1rem;height:.625rem;overflow:visible}.ball-swatch path{fill:none;stroke:var(--anatomy-mid);stroke-width:1px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.ball-swatch[data-mark=dim] path{stroke:var(--anatomy-lo)}.ball-swatch[data-mark=lit] path{stroke:var(--anatomy-lit)}.ball-swatch .ball-swatch-crease{stroke:var(--anatomy-lo)}.ball-caption{max-width:42rem;color:var(--ink-3);text-wrap:pretty;margin:.5rem 0 0;padding-inline:.75rem;font-size:.9375rem;line-height:1.55}.ball-stage>svg{width:100%;height:auto;display:block;overflow:visible}.ball-stage>svg :is(path,circle){vector-effect:non-scaling-stroke}@media (prefers-reduced-motion:no-preference){.ball-stage>svg{opacity:0;transition:opacity var(--dur-smooth) var(--ease-smooth-out)}.ball[data-state=ready] .ball-stage>svg{opacity:1}}.ball .iso-fill{fill:var(--anatomy-paper);stroke:none}.iso-shade{stroke:none}.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}.ball .iso-top{stroke:none;fill:var(--anatomy-top)}.ball .iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}.ball .iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}.ball .iso-line[data-tone=hi]{stroke:var(--anatomy-hi)}.ball .iso-line[data-tone=mid]{stroke:var(--anatomy-mid)}.ball .iso-line[data-tone=lo]{stroke:var(--anatomy-lo)}.ball .iso-line[data-tone=faint]{stroke:var(--anatomy-faint)}.ball .iso-line[data-tone=lit]{stroke:var(--anatomy-lit)}.ball .iso-line[data-tone=green]{stroke:var(--anatomy-green)}.ball .gauge-band{stroke-width:1.8px;stroke-linecap:butt}.ball .iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}.ball .iso-dots[data-tone=hi] circle{opacity:.85}.ball .iso-dots[data-tone=mid] circle{opacity:.45}.ball .iso-dots[data-tone=lo] circle{opacity:.22}.ball .iso-dots[data-tone=faint] circle{opacity:.12}.ball .iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}.ball .iso-face-text[data-tone=lo]{fill:var(--anatomy-lo)}.ball .cover-a,.ball .cover-b,.ball .cloth,.ball .bladder{--anatomy-shade-0:var(--t0);--anatomy-shade-1:var(--t1);--anatomy-shade-2:var(--t2);--anatomy-shade-3:var(--t3);--anatomy-paper:var(--tp)}.ball .cover-a{--t0:var(--cover-a-0);--t1:var(--cover-a-1);--t2:var(--cover-a-2);--t3:var(--cover-a-3);--tp:var(--cover-a-paper)}.ball .cover-b{--t0:var(--cover-b-0);--t1:var(--cover-b-1);--t2:var(--cover-b-2);--t3:var(--cover-b-3);--tp:var(--cover-b-paper)}.ball .cloth{--t0:var(--cloth-0);--t1:var(--cloth-1);--t2:var(--cloth-2);--t3:var(--cloth-3);--tp:var(--cloth-paper)}.ball .bladder{--t0:var(--bladder-0);--t1:var(--bladder-1);--t2:var(--bladder-2);--t3:var(--bladder-3);--tp:var(--bladder-paper)}.ball .wall-cover,.ball .wall-cloth{stroke:none}.ball .wall-cover[data-shade="0"]{fill:var(--cover-a-0)}.ball .wall-cover[data-shade="1"]{fill:var(--cover-a-1)}.ball .wall-cover[data-shade="2"]{fill:var(--cover-a-2)}.ball .wall-cover[data-shade="3"]{fill:var(--cover-a-3)}.ball .wall-cloth[data-shade="0"]{fill:var(--cloth-0)}.ball .wall-cloth[data-shade="1"]{fill:var(--cloth-1)}.ball .wall-cloth[data-shade="2"]{fill:var(--cloth-2)}.ball .wall-cloth[data-shade="3"]{fill:var(--cloth-3)}.ball [data-layer]{transition:opacity .25s var(--anatomy-ease)}.ball-stage[data-focus=cover] [data-layer]:not([data-layer=cover]),.ball-stage[data-focus=cloth] [data-layer]:not([data-layer=cloth]),.ball-stage[data-focus=bladder] [data-layer]:not([data-layer=bladder]),.ball-stage[data-focus=gauge] [data-layer]:not([data-layer=gauge]){opacity:.2}