.db-board{width:min(100%,440px,max(220px,100svh - 470px));height:auto;margin:0 auto;display:block}.db-dot{fill:var(--ink)}.db-line{stroke:color-mix(in srgb,var(--ink)14%,transparent);stroke-width:4px;stroke-linecap:round}.db-line.on{stroke:var(--ink);stroke-width:6px}.db-line.on.last{stroke:var(--accent)}.db-box.p0{fill:color-mix(in srgb,#3d8bff 55%,var(--surface))}.db-box.p1{fill:color-mix(in srgb,#f08a24 60%,var(--surface))}.db-hit{fill:#0000;cursor:pointer}.db-hit:hover{fill:color-mix(in srgb,var(--accent)25%,transparent)}.db-hit:focus-visible{outline:3px solid var(--accent);outline-offset:1px;fill:color-mix(in srgb,var(--accent)25%,transparent)}