.pattern-canvas{position:relative;overflow:auto}.pattern-canvas svg{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;-webkit-user-select:none;user-select:none}.pattern-canvas text{transition:opacity .12s ease,fill .12s ease}.pattern-canvas .label{fill:#2d3748;pointer-events:none}.pattern-canvas .label-beat-header{font-weight:600;fill:#1a202c}.pattern-canvas .throw-label{cursor:pointer}.pattern-canvas .throw-label.hovered{font-weight:700}.pattern-canvas .throw-label.dim,.pattern-canvas .arrow.dim{opacity:.2}.pattern-canvas .arrow{transition:opacity .12s ease,stroke-width .12s ease;cursor:pointer;pointer-events:visibleStroke}.pattern-canvas .arrow.arrow-intercept{stroke-width:4.8;filter:drop-shadow(0 0 4px rgba(255,0,0,.95))}.pattern-canvas .arrow.arrow-substitution{stroke-width:4.8;filter:drop-shadow(0 0 4px rgba(243,118,2,.95))}.pattern-canvas .arrow.arrow-carry{stroke-width:4.8;filter:drop-shadow(0 0 4px rgba(15,247,49,.95))}.pattern-canvas .arrow.hovered{stroke-width:4}.pattern-canvas .dot{pointer-events:none}.pattern-canvas .dot-hit{cursor:help}.canvas-tooltip{position:fixed;background:#1a202cf2;color:#fff;padding:6px 10px;border-radius:4px;font-size:12px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;pointer-events:none;z-index:100;white-space:normal;max-width:min(360px,80vw);line-height:1.35;box-shadow:0 2px 8px #0003}.canvas-tooltip-line+.canvas-tooltip-line{margin-top:2px}.spinner{width:28px;height:28px;border:3px solid #dbdbdb;border-top-color:#3273dc;border-radius:50%;animation:spin .7s linear infinite;margin:12px auto}@keyframes spin{to{transform:rotate(360deg)}}.svg-container svg{max-width:100%;height:auto}.preset-label{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left}.passingpattern{--bg-color: #fff;--bg-secondary-color: #f3f3f6;--tab-inactive: #d2d6dd;--tab-hover: #747681;--tab-active: #3f4144}svg.passingpattern{max-width:100%}.passingpattern .starting-hands,.passingpattern .throw-label{fill:var(--fg, #000)}.passingpattern .tab{cursor:pointer}.passingpattern .tab rect{fill:var(--bg-color);stroke:var(--tab-inactive)}.passingpattern .tab text{fill:#666;font-size:8px;text-anchor:middle;dominant-baseline:central}.passingpattern .tab line{stroke:transparent;stroke-width:3}.passingpattern .tab:hover rect{fill:var(--bg-secondary-color)}.passingpattern .tab-active rect{fill:#fff;stroke:var(--tab-active);stroke-width:2}.passingpattern .tab-active text{fill:var(--tab-active);font-weight:600;text-anchor:middle;dominant-baseline:central}.passingpattern .tab-active line{stroke:var(--tab-active);stroke-width:3}