.page{--db-paper: #FFFBF4;--db-blue: #1E5BD6;--db-blue-edge: #16449F;--db-blue-soft: rgba(30, 91, 214, .18);--db-red: #E1352A;--db-red-edge: #B5281E;--db-red-soft: rgba(225, 53, 42, .18);--piece-light-fill: var(--db-blue);--piece-light-ring: var(--db-blue-edge);--piece-dark-fill: var(--db-red);--piece-dark-ring: var(--db-red-edge)}.db-wrap{display:flex;justify-content:center}.db{--dot: 12px;display:grid;grid-template-columns:repeat(5,var(--dot) 1fr) var(--dot);grid-template-rows:repeat(5,var(--dot) 1fr) var(--dot);background:var(--db-paper);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);width:100%;max-width:clamp(300px,calc(100vh - 230px),480px);user-select:none;-webkit-user-select:none}.db--locked .db-edge{cursor:default}.db-dot{border-radius:50%;background:var(--color-text)}.db-box{aspect-ratio:1;display:flex;align-items:center;justify-content:center}.db-disc{width:100%;height:100%;border-radius:var(--radius-sm);box-sizing:border-box;display:flex;align-items:center;justify-content:center}.db-disc:after{content:"";width:40%;height:40%;border-radius:50%}.db-disc.fill{animation:rh-pop .24s var(--ease) both,rh-flash .4s var(--ease) .24s 1}.db-disc--light{background:var(--db-blue-soft)}.db-disc--light:after{background:var(--db-blue)}.db-disc--dark{background:var(--db-red-soft)}.db-disc--dark:after{background:var(--db-red)}.db-edge{border:0;padding:0;position:relative;background:var(--color-border);opacity:.45;border-radius:var(--radius-sm);touch-action:manipulation;transition:opacity .15s var(--ease),background .15s var(--ease)}.db-edge:before{content:"";position:absolute}.db-edge--h:before{top:-16px;right:0;bottom:-16px;left:0}.db-edge--v:before{top:0;right:-16px;bottom:0;left:-16px}.db:not(.db--locked) .db-edge[aria-pressed=false]:hover{opacity:1}.db-edge[aria-pressed=true]{opacity:1}.db-edge--light{background:var(--db-blue)}.db-edge--dark{background:var(--db-red)}.db-edge.last{box-shadow:0 0 0 2px var(--color-text);z-index:1}.db-edge--h.draw{animation:db-draw-x .18s var(--ease) both,rh-blink .5s var(--ease) .18s 1}.db-edge--v.draw{animation:db-draw-y .18s var(--ease) both,rh-blink .5s var(--ease) .18s 1}.db-edge--light.draw{--color-accent: var(--db-blue)}.db-edge--dark.draw{--color-accent: var(--db-red)}.db-edge:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;opacity:1;z-index:1}@keyframes db-draw-x{0%{transform:scaleX(0)}to{transform:none}}@keyframes db-draw-y{0%{transform:scaleY(0)}to{transform:none}}@media (max-width: 420px){.db{--dot: 10px;padding:var(--space-2);border-radius:var(--radius-md)}}