html{color-scheme:light dark;background:light-dark(#f8f7f2,#1b2023)}
body{margin:0;font-family:"Avenir Next",Avenir,"Trebuchet MS",sans-serif;-webkit-font-smoothing:antialiased}
#one-ball-demo{--ob-paper:light-dark(#f8f7f2,#1b2023);--ob-field:light-dark(#fffefa,#14191c);--ob-ink:light-dark(#202b2a,#edf1e9);--ob-muted:light-dark(#59655f,#a7b3aa);--ob-line:light-dark(#d5dbd1,#3b4640);--ob-active:light-dark(#285e45,#b8e4bf);--ob-active-ink:light-dark(#fffefa,#172c20);--ob-soft:light-dark(#e0eddf,#2a4031);--ob-error:light-dark(#a04534,#f2a08a);color:var(--ob-ink);background:var(--ob-paper);box-sizing:border-box;width:100%;max-width:560px;height:100dvh;margin:0 auto;padding:0 16px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
#one-ball-demo *{box-sizing:border-box}
#one-ball-demo [hidden]{display:none!important}
#one-ball-demo button,#one-ball-demo a{-webkit-tap-highlight-color:transparent}
#one-ball-demo button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
#one-ball-demo button:disabled{cursor:default;opacity:.4}
#one-ball-demo button:focus-visible,#one-ball-demo a:focus-visible,#one-ball-demo summary:focus-visible,#one-ball-demo pre:focus-visible{outline:3px solid var(--ob-active);outline-offset:3px}
#one-ball-demo ::selection{background:var(--ob-active);color:var(--ob-active-ink)}
#one-ball-demo .ob-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;flex:none;border-bottom:1px solid var(--ob-line)}
#one-ball-demo h1{font:400 32px/1 Georgia,"Times New Roman",serif;letter-spacing:-.025em;margin:0;display:flex;align-items:center;gap:10px}
#one-ball-demo .ob-brand-ball{width:10px;height:10px;border-radius:50%;background:var(--ob-active)}
#one-ball-demo .ob-caption{font-size:11px;color:var(--ob-muted);margin-top:5px}
#one-ball-demo .ob-header-actions{display:flex;align-items:center;gap:10px}
#one-ball-demo .ob-daily-badge{font-size:11px;letter-spacing:.05em;white-space:nowrap;color:var(--ob-muted)}
#one-ball-demo .ob-help-button,#one-ball-demo .ob-dialog-close{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;background:transparent;border-radius:6px}
#one-ball-demo .ob-help-button svg,#one-ball-demo .ob-dialog-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#one-ball-demo .ob-game-area{display:flex;flex-direction:column;flex:1;min-height:0;max-height:calc(min(480px,100vw - 32px) + 32px);gap:6px}
#one-ball-demo .ob-rule{font-size:13px;line-height:1.4;text-align:center;margin:0;padding:4px 0;flex:none;color:var(--ob-muted)}
#one-ball-demo .ob-play-area{flex:1;min-height:0;display:grid;place-items:center;container-type:size}
#one-ball-demo .ob-board{position:relative;width:min(100cqw,100cqh,480px);aspect-ratio:1;background:var(--ob-field);border:2px solid var(--ob-ink);border-radius:2px;touch-action:none;user-select:none}
#one-ball-demo .ob-geometry{width:100%;height:100%;display:block;position:absolute;inset:0;pointer-events:none;overflow:visible}
#one-ball-demo .ob-grid{stroke:var(--ob-line);stroke-width:.2;opacity:.65}
#one-ball-demo .ob-track{stroke:var(--ob-active);stroke-width:.7;fill:none;stroke-linejoin:round;opacity:.6}
#one-ball-demo .ob-trace{fill:none;stroke:var(--ob-active);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
#one-ball-demo .ob-ball{fill:var(--ob-active);stroke:var(--ob-field);stroke-width:.7}
#one-ball-demo .ob-dot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--ob-ink);color:var(--ob-field);border:3px solid var(--ob-field);border-radius:50%;font-size:16px;font-weight:500;z-index:2;touch-action:none}
#one-ball-demo .ob-dot[aria-pressed="true"]{background:var(--ob-active);color:var(--ob-active-ink)}
#one-ball-demo .ob-dot:disabled{opacity:1}
#one-ball-demo.ob-motion .ob-geometry{z-index:3}
#one-ball-demo.ob-motion .ob-dot{background:var(--ob-field);color:var(--ob-muted);border:1px solid var(--ob-line)}
#one-ball-demo .ob-board[data-feedback="wrong"]{border-color:var(--ob-error);background:color-mix(in srgb,var(--ob-error) 6%,var(--ob-field))}
#one-ball-demo .ob-board[data-feedback="wrong"] .ob-trace{stroke:var(--ob-error);stroke-dasharray:2 1;opacity:1}
#one-ball-demo .ob-board[data-feedback="wrong"] .ob-dot[aria-pressed="true"]{background:var(--ob-error);color:var(--ob-paper)}
#one-ball-demo .ob-board[data-feedback="won"]{border-color:var(--ob-active);background:color-mix(in srgb,var(--ob-active) 7%,var(--ob-field))}
#one-ball-demo .ob-board[data-feedback="won"] .ob-track{stroke-width:1;opacity:1}
#one-ball-demo .ob-controls{flex:none;width:100%;max-width:480px;align-self:center;position:sticky;bottom:0;background:var(--ob-paper);z-index:4}
#one-ball-demo .ob-timeline{display:flex;align-items:center;justify-content:center;gap:7px;height:28px;margin:0 0 6px;font-size:13px;font-variant-numeric:tabular-nums}
#one-ball-demo .ob-slot{min-width:25px;text-align:center;border-bottom:1px solid var(--ob-line);padding:2px 4px}
#one-ball-demo .ob-arrow{color:var(--ob-muted)}
#one-ball-demo .ob-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
#one-ball-demo .ob-control{font:inherit;font-size:13px;border:1px solid var(--ob-line);border-radius:6px;background:transparent;min-height:44px;padding:9px 14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ob-ink);cursor:pointer}
#one-ball-demo .ob-primary{background:var(--ob-active);color:var(--ob-active-ink);border-color:var(--ob-active);font-weight:600}
#one-ball-demo .ob-game-actions .ob-primary{flex:1}
#one-ball-demo .ob-game-actions{flex-wrap:nowrap}
#one-ball-demo .ob-feedback{display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;margin-top:6px;padding:8px 12px;border-radius:8px}
#one-ball-demo .ob-feedback-icon{display:none;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#one-ball-demo .ob-feedback[data-kind="wrong"]{background:color-mix(in srgb,var(--ob-error) 10%,var(--ob-paper));color:var(--ob-error)}
#one-ball-demo .ob-feedback[data-kind="won"]{background:var(--ob-soft);color:var(--ob-active)}
#one-ball-demo .ob-feedback:not([data-kind="idle"]) .ob-feedback-icon{display:block}
#one-ball-demo .ob-feedback:not([data-kind="idle"]) .ob-status{text-align:left;color:inherit}
#one-ball-demo .ob-status{font-size:12px;line-height:1.4;margin:0;text-align:center;color:var(--ob-muted)}
#one-ball-demo .ob-status strong{display:block;font-size:14px;margin-bottom:2px}
#one-ball-demo .ob-footer{text-align:center;color:var(--ob-muted);font-size:11px;padding:5px 0 0;font-variant-numeric:tabular-nums}
#one-ball-demo .ob-storage-notice{font-size:11px;color:var(--ob-error);text-align:center;margin:4px 0}
#one-ball-demo .ob-dialog{color:var(--ob-ink);background:var(--ob-paper);border:1px solid var(--ob-line);border-radius:12px;width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:30px 24px 24px;overflow:auto;overscroll-behavior:contain}
#one-ball-demo .ob-dialog::backdrop{background:rgb(0 0 0 / .65)}
#one-ball-demo .ob-dialog-close{position:absolute;right:7px;top:7px}
#one-ball-demo .ob-dialog h2{font:400 30px/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.025em;margin:10px 32px 18px 0;text-wrap:balance}
#one-ball-demo .ob-dialog p,#one-ball-demo .ob-dialog li{font-size:14px;line-height:1.5}
#one-ball-demo .ob-dialog ol{padding-left:21px;margin-bottom:16px}
#one-ball-demo .ob-dialog li+li{margin-top:10px}
#one-ball-demo .ob-help-note{color:var(--ob-muted);font-size:12px}
#one-ball-demo #ob-help-done{width:100%}
#one-ball-demo .ob-example{text-align:center;margin:20px 0 16px}
#one-ball-demo .ob-example svg{display:block;width:180px;height:180px;background:var(--ob-field);border:1px solid var(--ob-ink);margin:0 auto 12px}
#one-ball-demo .ob-example-dots{fill:var(--ob-ink);stroke:var(--ob-field);stroke-width:.7}
#one-ball-demo .ob-example-labels{fill:var(--ob-field);font-size:6px;text-anchor:middle;dominant-baseline:central}
#one-ball-demo .ob-share{text-align:center}
#one-ball-demo .ob-share h2{margin:10px 24px 16px}
#one-ball-demo .ob-result{font-family:inherit;color:var(--ob-ink);font-size:18px;line-height:1.9;margin:16px 0;white-space:pre-wrap;user-select:text}
#one-ball-demo .ob-share-caption,#one-ball-demo .ob-share-status{font-size:12px;color:var(--ob-muted);line-height:1.5}
#one-ball-demo .ob-share-status{min-height:18px;margin:12px 0}
#one-ball-demo details{font-size:12px;color:var(--ob-muted);margin:12px auto 0;max-width:260px}
#one-ball-demo summary{cursor:pointer;padding:8px;min-height:40px}
#one-ball-demo .ob-share img{display:block;width:100%;height:auto;margin-top:12px;border-radius:4px}
#one-ball-demo .ob-share img:not([src]){display:none}
.ob-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.ob-confetti i{position:absolute;top:14%;width:8px;height:13px;border-radius:2px;opacity:0;animation:trace-confetti 1800ms cubic-bezier(.2,.7,.4,1) both}
@keyframes trace-confetti{0%{transform:translate3d(0,0,0) rotate(0);opacity:1}20%{opacity:1}100%{transform:translate3d(var(--drift),82vh,0) rotate(var(--turn));opacity:0}}
@media(prefers-reduced-motion:reduce){.ob-confetti i{animation:none;display:none}}
@media(max-height:600px){#one-ball-demo .ob-head{min-height:56px}#one-ball-demo .ob-feedback{min-height:58px}#one-ball-demo .ob-rule{font-size:12px}}
@media(max-height:520px) and (min-width:600px){#one-ball-demo{max-width:900px;display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:56px minmax(0,1fr);gap:8px 24px}#one-ball-demo .ob-head{grid-column:1/-1}#one-ball-demo .ob-game-area{height:100%;min-width:0}#one-ball-demo .ob-controls{align-self:center;position:static}}