/* A cropped softdart field, in paper/graphite/cyan rather than red and green. */
.hero-surface{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;overflow:clip}
.hero-board-print{--board-diameter:max(clamp(1000px,92vw,1800px),120svh);position:absolute;width:var(--board-diameter);height:var(--board-diameter);max-width:none;right:calc(var(--board-diameter)*-.44);top:50%;transform:translateY(-50%) rotate(var(--board-rotation,-9deg));transform-origin:50% 50%;opacity:.74;mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 75%,transparent 100%)}
.has-scroll-story .hero-surface{opacity:var(--surface-opacity,1)}
.hero-surface .hero-board-segments{opacity:1}
.hero-board-segments path{fill:#02c1ff;fill-opacity:.3;stroke:#02c1ff;stroke-opacity:.65;stroke-width:1.3;opacity:0;transition:opacity 550ms ease-out}
.hero-board-segments .board-single{fill:#647669;fill-opacity:.11;stroke:#647669;stroke-opacity:.22}
.hero-board-segments[data-input="idle"] path{transition:none}
.hero-board-segments[data-input="touch"] path{transition:opacity 80ms ease-out}
.hero-score{position:absolute;width:clamp(160px,13vw,215px);right:calc(var(--hero-gutter) + 2.4vw);top:57%;color:#3f5b51;pointer-events:none}
.hero-score:before,.hero-score:after{content:'';position:absolute;width:10px;height:10px;border-color:#aeb8ae;border-style:solid;opacity:.7}
.hero-score:before{left:-13px;top:21px;border-width:1px 0 0 1px}
.hero-score:after{right:-13px;bottom:0;border-width:0 1px 1px 0}
.hero-score-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-inline:2px;font:8px/1 var(--mono);letter-spacing:.1em;color:#778477}
.hero-score-indicators{display:flex;gap:5px}
.hero-score-indicators i{display:block;width:12px;height:2px;background:#bac4b9}
.hero-surface[data-frame="0"] .hero-score-indicators i:nth-child(1),.hero-surface[data-frame="1"] .hero-score-indicators i:nth-child(2),.hero-surface[data-frame="2"] .hero-score-indicators i:nth-child(3){background:var(--accent)}
.hero-score-display{display:block;width:100%;height:auto;overflow:visible}
.hero-score-field{opacity:.15}
.hero-score-frame{display:none;opacity:.66;transition:opacity 90ms steps(2,end),transform 90ms steps(2,end)}
.hero-surface[data-frame="0"] [data-score-frame="0"],.hero-surface[data-frame="1"] [data-score-frame="1"],.hero-surface[data-frame="2"] [data-score-frame="2"]{display:block}
.hero-score-accent{fill:var(--accent)}
.hero-surface[data-switching="true"] .hero-score-frame{opacity:.19;transform:translateY(1px)}
.hero-score-toggle{display:grid;place-items:center;position:absolute;right:-16px;bottom:-38px;width:32px;height:32px;padding:0;border-radius:50%;color:#728073;pointer-events:auto;opacity:.65}
.hero-score-toggle:hover{opacity:1;background:#dce3db80}
.hero-score-toggle:focus-visible{opacity:1;outline:2px solid #009acb;outline-offset:3px}
.hero-score-toggle svg{width:17px;height:17px}
.hero-score-toggle .surface-play,.hero-score-toggle[aria-pressed="true"] .surface-pause{display:none}
.hero-score-toggle[aria-pressed="true"] .surface-play{display:block}
@media(min-width:1700px){.hero-score{right:calc(var(--hero-gutter) + 4.5vw);top:56%}}
@media(max-width:1180px){.hero-score{right:calc(var(--hero-gutter) + 1.5vw);top:55%;width:150px}}
@media(max-width:900px){.hero-score{display:none}.hero-board-print{--board-diameter:max(1100px,120svh);right:calc(var(--board-diameter)*-.582);opacity:.43}}
@media(max-width:520px){.hero-board-print{--board-diameter:max(760px,110svh);right:calc(var(--board-diameter)*-.48);top:50%;opacity:.36}.hero-score-toggle{display:none}}
@media(max-width:520px) and (min-height:600px){.hero-score{display:block;right:18px;top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 90px);width:108px;opacity:.58}.hero-score-head{margin-bottom:9px;font-size:6px}.hero-score:before,.hero-score:after{width:7px;height:7px}.hero-score-indicators i{width:8px}.hero-score-frame{transition:none}.hero-score-counter{visibility:hidden}.hero-score-toggle{display:grid;right:-7px;top:-11px;bottom:auto}}
@media(max-height:650px) and (min-width:901px){.hero-score{top:44%;width:130px}.hero-score-head{margin-bottom:9px}.hero-score-toggle{bottom:-29px}}
@media(max-height:480px){.hero-score{display:none}}
@media(prefers-reduced-motion:reduce){.hero-surface{opacity:1!important}.hero-board-segments{display:none}.hero-board-segments path{transition:none}.hero-score-frame{transition:none}.hero-score-toggle{display:none}.hero-surface .hero-score-frame{display:none}.hero-surface [data-score-frame="0"]{display:block;opacity:.66;transform:none}}