#yinyang{--yy-board: #a09889;--yy-black: #17151c;--yy-white: #f6f5f1;--yy-line: color-mix(in srgb, var(--yy-black) 42%, transparent);--yy-flag: color-mix(in srgb, var(--color-vermilion) 26%, transparent);--yy-dot: 14%}#yinyang .yy-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;border-bottom:1px solid var(--color-rule);padding-bottom:1rem;margin-bottom:1.5rem}#yinyang .yy-date{color:var(--color-ink)}#yinyang .yy-stats{display:flex;gap:2rem}#yinyang .yy-stats dt{color:var(--color-ink-dim);margin-bottom:.35rem}#yinyang .yy-stats dd{font-family:var(--font-mono);font-size:1rem;color:var(--color-ink)}#yinyang .yy-stage{position:relative;width:min(100%,42rem)}#yinyang .yy-board{display:grid;grid-template-columns:repeat(var(--n),1fr);width:100%;aspect-ratio:1;background:var(--yy-board);border:1px solid var(--color-rule-strong);padding:calc(100% / var(--n) / 2);gap:0;contain:layout paint}#yinyang .yy-cell{position:relative;background-color:transparent;background-image:linear-gradient(var(--yy-line),var(--yy-line)),linear-gradient(var(--yy-line),var(--yy-line));background-repeat:no-repeat;background-size:100% 1px,1px 100%;background-position:center,center;display:flex;align-items:center;justify-content:center;padding:0;border:0;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}#yinyang .yy-cell[data-fixed]{cursor:default}#yinyang .yy-cell[data-bad]{background-color:var(--yy-flag)}#yinyang .yy-cell:after{content:"";width:76%;height:76%;border-radius:50%;transform:scale(0)}#yinyang .yy-cell[data-v="1"]:after{background:var(--yy-black);transform:scale(1)}#yinyang .yy-cell[data-v="0"]:after{background:var(--yy-white);box-shadow:inset 0 0 0 1px var(--yy-line);transform:scale(1)}#yinyang .yy-cell[data-fixed][data-v]:before{content:"";position:absolute;left:50%;top:50%;width:var(--yy-dot);height:var(--yy-dot);margin:calc(var(--yy-dot) / -2) 0 0 calc(var(--yy-dot) / -2);border-radius:50%;z-index:1}#yinyang .yy-cell[data-fixed][data-v="1"]:before{background:var(--yy-white)}#yinyang .yy-cell[data-fixed][data-v="0"]:before{background:var(--yy-black)}#yinyang .yy-cell:focus-visible{outline:2px solid var(--color-mark);outline-offset:-2px;z-index:1}#yinyang .yy-cell[data-group]:after{box-shadow:0 0 0 2px var(--yy-board),0 0 0 4px var(--color-chrome)}#yinyang .yy-cell[data-group][data-v="0"]:after{box-shadow:inset 0 0 0 1px var(--yy-line),0 0 0 2px var(--yy-board),0 0 0 4px var(--color-chrome)}#yinyang .yy-cell[data-group]{z-index:2}#yinyang .yy-won{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;text-align:center;padding:1rem;color:var(--yy-black);background:color-mix(in srgb,var(--yy-board) 86%,transparent);animation:yy-won-in .35s ease-out both}#yinyang .yy-won[hidden]{display:none}#yinyang .yy-next{color:color-mix(in srgb,var(--yy-black) 62%,transparent)}@keyframes yy-won-in{0%{opacity:0}to{opacity:1}}#yinyang .yy-bar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--color-rule);padding:.75rem 0;margin-top:1.25rem}#yinyang .yy-status{color:var(--color-ink-dim)}#yinyang .yy-buttons{display:flex;flex-wrap:wrap;gap:.5rem}#yinyang .yy-action{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink);border:1px solid var(--color-rule-strong);padding:.5rem .9rem;cursor:pointer;transition:background-color .15s,color .15s}#yinyang .yy-action:hover{background:var(--color-ink);color:var(--color-ground)}#yinyang .yy-action[aria-pressed=false]{color:var(--color-ink-dim);border-color:var(--color-rule)}#yinyang .yy-help{margin-top:2.5rem;border-top:1px solid var(--color-rule);padding-top:1rem}#yinyang .yy-help summary{cursor:pointer;color:var(--color-ink-dim)}#yinyang .yy-help summary:hover{color:var(--color-ink)}#yinyang .yy-help-body{max-width:60ch;margin-top:1rem;font-size:1rem;line-height:1.7;color:var(--color-ink-muted)}#yinyang .yy-help-body ul{margin:.75rem 0;padding-left:1.1rem;list-style:square}#yinyang .yy-help-body li{margin:.4rem 0}#yinyang .yy-help-body p+p{margin-top:.75rem}#yinyang .yy-help-body strong{color:var(--color-ink)}#yinyang .yy-help-body a{color:var(--color-mark);text-decoration:underline;text-underline-offset:3px}#yinyang .yy-credit{margin-top:1rem;font-size:.875rem;color:var(--color-ink-dim)}@media(prefers-reduced-motion:reduce){#yinyang .yy-action{transition:none}#yinyang .yy-won{animation:none}}