.ut{--ut-gap: 6px;--ut-w: min( calc(100vw - 4px) , 540px, max(calc(var(--tg-stage-h) - 6px), 372px));--ut-x: color-mix(in srgb, var(--tg-p0) 88%, var(--ink));--ut-o: color-mix(in srgb, var(--tg-p1) 78%, var(--ink));--ut-bar: color-mix(in srgb, var(--ink) 82%, transparent);--ut-thin: color-mix(in srgb, var(--ink) 22%, var(--cell));--ut-place: .24s;width:var(--ut-w);margin-left:calc((100% - var(--ut-w)) / 2);user-select:none;-webkit-user-select:none}:root[data-look=dusk] .ut{--ut-thin: color-mix(in srgb, var(--ink) 26%, var(--cell))}.ut-board{position:relative;display:grid;aspect-ratio:1;gap:var(--ut-gap);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.ut-small{position:relative;display:grid;min-width:0;min-height:0;border-radius:7px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));background:var(--cell);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);transition:opacity calc(.22s * var(--motion)),background-color calc(.22s * var(--motion)),box-shadow calc(.22s * var(--motion))}.ut-small:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--ut-thin),var(--ut-thin)) calc(100% / 3) 50% / 1.5px 84% no-repeat,linear-gradient(var(--ut-thin),var(--ut-thin)) calc(200% / 3) 50% / 1.5px 84% no-repeat,linear-gradient(var(--ut-thin),var(--ut-thin)) 50% calc(100% / 3) / 84% 1.5px no-repeat,linear-gradient(var(--ut-thin),var(--ut-thin)) 50% calc(200% / 3) / 84% 1.5px no-repeat}.ut-small.is-active{background:color-mix(in srgb,var(--tg-c) 15%,var(--cell));box-shadow:inset 0 0 0 2.5px var(--tg-c),0 0 14px color-mix(in srgb,var(--tg-c) 30%,transparent)}.ut.is-free .ut-small.is-active{box-shadow:inset 0 0 0 2px var(--tg-c)}.ut-small.is-dim:before{opacity:.55}.ut-small.is-dim:not(.is-won):not(.is-drawn) .ut-mark{opacity:.5}.ut-small.is-dim .ut-big svg{opacity:.8}.ut-small.is-won{background:color-mix(in srgb,var(--cell) 88%,var(--bg-2))}.ut-small.is-drawn{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 7%,var(--cell)) 0 6px,var(--cell) 6px 12px)}.ut-small.is-won .ut-mark,.ut-small.is-drawn .ut-mark{opacity:.3}.ut-small.is-nudge{animation:ut-nudge calc(.5s * var(--motion)) ease-in-out}@keyframes ut-nudge{30%,70%{box-shadow:inset 0 0 0 4px var(--tg-c),0 0 18px color-mix(in srgb,var(--tg-c) 60%,transparent)}}.ut-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;margin:0;padding:0;border:0;background:transparent;border-radius:6px;cursor:default;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ut.is-live .ut-cell[aria-disabled=false]{cursor:pointer}.ut.is-live .ut-cell[aria-disabled=false]:active{background:color-mix(in srgb,var(--tg-c) 22%,transparent)}@media(hover:hover){.ut.is-live .ut-cell[aria-disabled=false]:hover{background:color-mix(in srgb,var(--tg-c) 16%,transparent)}}.ut-cell:focus-visible{outline:3px solid var(--sun);outline-offset:-3px;z-index:1}.ut-cell.is-last{background:color-mix(in srgb,var(--tg-c) 20%,transparent)}.ut-cell.is-nudge{animation:ut-shake calc(.3s * var(--motion)) ease-in-out}@keyframes ut-shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.ut-cell.is-hint:after{content:"";position:absolute;inset:12%;border-radius:50%;border:3px dashed var(--sun);box-shadow:0 0 12px var(--sun);animation:ut-pulse calc(.8s * var(--motion)) ease-in-out infinite alternate}@keyframes ut-pulse{to{transform:scale(.82)}}.ut-mark{width:82%;height:82%;fill:none;stroke-width:4.4;stroke-linecap:round;overflow:visible}.ut-cell[data-p="0"] .ut-mark,.ut-tally-p[data-p="0"] .ut-mark{stroke:var(--ut-x)}.ut-cell[data-p="1"] .ut-mark,.ut-tally-p[data-p="1"] .ut-mark{stroke:var(--ut-o);stroke-width:4}.ut-cell.is-new .ut-mark path,.ut-cell.is-new .ut-mark circle{stroke-dasharray:100;animation:ut-draw calc(var(--ut-place) * .5 * var(--motion)) ease-out both}.ut-cell.is-new .ut-mark path+path{animation-delay:calc(var(--ut-place) * .45 * var(--motion))}.ut-cell.is-new .ut-mark circle{animation-duration:calc(var(--ut-place) * .9 * var(--motion))}@keyframes ut-draw{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.ut-big{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.ut-big svg{width:100%;height:100%;fill:none;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 2px 0 color-mix(in srgb,var(--ink) 20%,transparent))}.ut-big[data-p="0"] svg{stroke:var(--ut-x)}.ut-big[data-p="1"] svg{stroke:var(--ut-o);stroke-width:8}.ut-big.is-new path,.ut-big.is-new circle{stroke-dasharray:100;animation:ut-draw calc(.3s * var(--motion)) ease-out both;animation-delay:calc(var(--ut-place) * .8 * var(--motion))}.ut-big.is-new path+path{animation-delay:calc(var(--ut-place) * .8 * var(--motion) + .14s * var(--motion))}.ut-bar{position:absolute;background:var(--ut-bar);border-radius:3px;pointer-events:none}.ut-bar.is-v1,.ut-bar.is-v2{top:1%;bottom:1%;width:4px}.ut-bar.is-h1,.ut-bar.is-h2{left:1%;right:1%;height:4px}.ut-bar.is-v1{left:calc((100% - 2 * var(--ut-gap)) / 3 + var(--ut-gap) / 2 - 2px)}.ut-bar.is-v2{left:calc((100% - 2 * var(--ut-gap)) * 2 / 3 + var(--ut-gap) * 1.5 - 2px)}.ut-bar.is-h1{top:calc((100% - 2 * var(--ut-gap)) / 3 + var(--ut-gap) / 2 - 2px)}.ut-bar.is-h2{top:calc((100% - 2 * var(--ut-gap)) * 2 / 3 + var(--ut-gap) * 1.5 - 2px)}.ut-winline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.ut-winline line{stroke:var(--ink);stroke-width:7;stroke-linecap:round;opacity:.82;stroke-dasharray:100;animation:ut-draw calc(.5s * var(--motion)) ease-out both;animation-delay:calc(.35s * var(--motion))}.ut-small.is-winline{box-shadow:inset 0 0 0 3px var(--tg-c)}.ut-tally{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;margin-top:4px;padding:0 6px;font-size:.86rem;color:var(--ink-2)}.ut-tally-p{display:inline-flex;align-items:center;gap:5px;min-width:0;color:var(--ink)}.ut-tally-p b{font-family:var(--font-display);font-size:1.05rem;font-variant-numeric:tabular-nums}.ut-tally-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9ch}.ut-tally-mark{display:inline-grid;width:20px;height:20px;flex:none}.ut-tally-mark .ut-mark{width:100%;height:100%;stroke-width:5}.ut-tally-mid{flex:1 1 auto;text-align:center;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(pointer:fine)and (min-width:700px){.ut{--ut-gap: 8px;--ut-w: min(100%, 540px, max(calc(var(--tg-stage-h) - 30px), 360px))}}