.ttt{--ttt-cell-bg: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));--ttt-o: var(--color-text);--ttt-loss: #d64545;display:flex;flex-direction:column;gap:1.75rem;padding-top:1.25rem}.ttt-lead{margin:0;max-width:46rem;font-size:1.05rem;line-height:1.65;text-align:justify;hyphens:auto}.ttt-layout{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:1.5rem;align-items:start}.ttt-layout[data-mode=pc] [data-only=pvp],.ttt-layout[data-mode=pvp] [data-only=pc]{display:none}.ttt-play{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:1.25rem 1rem;background:var(--primary-05);border:var(--border-width) solid var(--color-primary);border-radius:var(--radius-lg)}.ttt-status{margin:0;min-height:1.75rem;font-family:var(--font-bold);font-size:1.4rem;color:var(--color-primary);text-align:center}.ttt-status[data-state=thinking]{color:var(--color-muted)}.ttt-status[data-state=win]{animation:ttt-pop .45s ease}.ttt-note,.ttt-eval{margin:-.4rem 0 0;min-height:1.3rem;font-family:var(--font-label);font-size:.95rem;color:var(--color-muted);text-align:center}.ttt-eval{margin:0}.ttt-board{position:relative;width:min(20rem,100%);aspect-ratio:1 / 1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.25rem;background:var(--color-primary)}.ttt-cell{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:0;border:none;border-radius:0;box-shadow:none;background:var(--ttt-cell-bg);color:var(--color-primary);transition:background var(--transition),opacity .3s ease}.ttt-cell:hover{opacity:1}.ttt-cell:active{animation:none}.ttt-cell:focus-visible{box-shadow:inset 0 0 0 .18rem var(--primary-15),inset 0 0 0 .1rem var(--color-primary)}.ttt-cell[aria-disabled=true]{cursor:default}.ttt-cell[data-mark=""]:not([aria-disabled=true]):hover{background:color-mix(in srgb,var(--color-primary) 12%,var(--color-bg))}.ttt-board[data-turn] .ttt-cell[data-mark=""]:not([aria-disabled=true]):hover:before{font-family:var(--font-bold);font-size:3rem;line-height:1;opacity:.2}.ttt-board[data-turn=X] .ttt-cell[data-mark=""]:not([aria-disabled=true]):hover:before{content:"X"}.ttt-board[data-turn=O] .ttt-cell[data-mark=""]:not([aria-disabled=true]):hover:before{content:"O";color:var(--ttt-o)}.ttt-cell svg{width:100%;height:100%;display:block}.ttt-stroke{fill:none;stroke:var(--color-primary);stroke-width:9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}.ttt-cell[data-mark=O] .ttt-stroke{stroke:var(--ttt-o)}.ttt-cell.is-new .ttt-stroke{animation:ttt-draw .26s ease-out both}.ttt-cell.is-new .ttt-stroke--late{animation-delay:.13s}.ttt-board.is-over .ttt-cell:not(.is-win) svg{opacity:.3;transition:opacity .3s ease}.ttt-cell.is-win svg{animation:ttt-pop .5s ease .15s}.ttt-cell.is-hint{background:color-mix(in srgb,var(--color-primary) 20%,var(--color-bg));animation:ttt-pulse 1s ease-in-out 3}.ttt-badge{position:absolute;bottom:.4rem;left:50%;transform:translate(-50%);padding:.05rem .45rem;font-family:var(--font-label);font-size:.78rem;line-height:1.3;white-space:nowrap;border:1px solid currentColor;border-radius:100rem;background:var(--color-bg);pointer-events:none}.ttt-badge.is-win{color:var(--color-primary)}.ttt-badge.is-draw{color:var(--color-muted)}.ttt-badge.is-loss{color:var(--ttt-loss)}.ttt-cell:has(.ttt-badge.is-win){background:color-mix(in srgb,var(--color-primary) 14%,var(--color-bg))}.ttt-cell:has(.ttt-badge.is-loss){background:color-mix(in srgb,var(--ttt-loss) 10%,var(--color-bg))}.ttt-winline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.ttt-winline line{stroke:var(--color-primary);stroke-width:.08;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}.ttt-winline.is-o line{stroke:var(--ttt-o)}.ttt-winline.is-visible line{opacity:1;animation:ttt-draw .4s ease-out .2s forwards}.ttt-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}.ttt-keys{margin:0;max-width:32rem;font-family:var(--font-label);font-size:.82rem;line-height:1.6;color:var(--color-muted);text-align:center}.ttt kbd{display:inline-block;min-width:1.1rem;padding:0 .3rem;font-family:var(--font-mono);font-size:.72rem;line-height:1.4;text-align:center;color:var(--color-text);border:1px solid var(--color-muted);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--color-muted)}.ttt-panel{display:flex;flex-direction:column;gap:1.1rem;padding:1.1rem 1.2rem 1.25rem;background:var(--primary-05);border:var(--border-width) solid var(--color-muted);border-radius:var(--radius-lg)}.ttt-group{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}.ttt-group-label{font-family:var(--font-label);font-size:.9rem;color:var(--color-muted)}.ttt-group .seg-ctrl{max-width:100%}.ttt-group .seg-opt{min-width:2.6rem}.ttt-score{display:flex;flex-direction:column;gap:.7rem;padding-top:1rem;border-top:1px solid var(--primary-15)}.ttt-score-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.ttt-score-head h4{margin:0;font-size:1rem}.ttt-score-ctx{font-family:var(--font-label);font-size:.82rem;color:var(--color-muted)}.ttt-score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.ttt-score-tile{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem .25rem;background:var(--color-bg);border:1px solid var(--color-primary);border-radius:var(--radius-md)}.ttt-score-value{font-family:var(--font-bold);font-size:1.5rem;line-height:1.1;color:var(--color-primary)}.ttt-score-label{font-family:var(--font-label);font-size:.78rem;color:var(--color-muted);text-align:center}.ttt-reset{align-self:flex-start;font-size:.8rem;padding:.3rem .65rem}.ttt-theory{margin-top:1rem;padding-top:2.25rem;border-top:var(--border-width) solid var(--color-muted)}.ttt-theory h3{margin:0 0 1rem;font-size:1.3rem}.ttt-theory h3.ttt-section{margin-top:3rem}.ttt-theory h4{margin:2rem 0 .7rem;font-size:1.05rem}.ttt-prose,.ttt-list li,.ttt-level,.ttt-figure figcaption{max-width:46rem;font-family:var(--font-ui);font-size:1.05rem;line-height:1.65;color:var(--color-text);text-align:justify;hyphens:auto}.ttt-prose{margin:0 0 .9rem}.ttt-theory b{font-family:var(--font-bold);font-weight:400}.ttt-display{box-sizing:border-box;max-width:46rem;margin:0 0 .9rem;padding:.6rem 1rem;overflow-x:auto;background:var(--primary-05);border-left:.2rem solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0}.ttt-list{margin:0 0 .9rem;padding-left:1.4rem;display:flex;flex-direction:column;gap:.45rem}.ttt-list li::marker{color:var(--color-primary);font-family:var(--font-bold)}.ttt-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem;max-width:46rem}.ttt-level{margin:0;padding:.85rem 1rem;font-size:.98rem;text-align:left;background:var(--primary-05);border:1px solid var(--primary-15);border-radius:var(--radius-md)}.ttt-figure{max-width:46rem;display:flex;align-items:center;flex-wrap:wrap;gap:1.1rem;margin:.4rem 0 1.2rem}.ttt-figure figcaption{flex:1 1 16rem;font-size:.95rem;color:var(--color-muted);text-align:left}.ttt-mini{flex:none;display:grid;grid-template-columns:repeat(3,2.5rem);grid-auto-rows:2.5rem;gap:.15rem;background:var(--color-primary)}.ttt-mini span{display:grid;place-items:center;font-family:var(--font-bold);font-size:1.35rem;background:var(--ttt-cell-bg)}.ttt-mini .is-x{color:var(--color-primary)}.ttt-mini .is-o{color:var(--ttt-o)}.ttt-mini .is-num{font-family:var(--font-label);font-size:1.05rem;color:var(--color-muted)}.ttt-mini .is-threat{background:color-mix(in srgb,var(--color-primary) 30%,var(--color-bg))}.ttt-mini .is-draw{background:color-mix(in srgb,var(--color-muted) 30%,var(--color-bg))}.ttt-mini .is-loss{background:color-mix(in srgb,var(--ttt-loss) 30%,var(--color-bg))}@keyframes ttt-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes ttt-pop{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes ttt-pulse{0%,to{box-shadow:inset 0 0 0 0 var(--color-primary)}50%{box-shadow:inset 0 0 0 .2rem var(--color-primary)}}@media (prefers-reduced-motion: reduce){.ttt-cell.is-new .ttt-stroke,.ttt-winline.is-visible line,.ttt-cell.is-win svg,.ttt-cell.is-hint,.ttt-status[data-state=win]{animation-duration:.01ms;animation-delay:0s}}@media (max-width: 52rem){.ttt-layout{grid-template-columns:minmax(0,1fr)}}@media (max-width: 40rem){.ttt-lead,.ttt-prose,.ttt-list li{font-size:.98rem;text-align:left}.ttt-status{font-size:1.2rem}.ttt-play{padding:1rem .75rem}.ttt-badge{font-size:.68rem;bottom:.25rem}}@keyframes BGgradient{0%{background-position:0% 200%}50%{background-position:200% 0%}to{background-position:0% 330%}}.mine-grid{padding-right:.3rem;padding-bottom:.3rem;border-radius:.5rem;position:relative;background:#000}.mine-grid:before,.mine-grid:after{content:"";position:absolute;left:-.1rem;top:-.1rem;background:linear-gradient(120deg,#fff,#088,#fff,#088,#fff,#088,#fff,#088);background-size:300%;width:calc(100% + .1rem);height:calc(100% + .1rem);z-index:-1;animation:BGgradient 15s ease infinite;filter:blur(.3rem)}.j3GridLose:before,.j3GridLose:after{background:linear-gradient(120deg,#fff,#ff3939,#fff,red,#fff,red,#fff,#ff3939);background-size:300%;animation:BGgradient 15s ease infinite;filter:blur(.3rem)}.j3GridWin:before,.j3GridWin:after{background:linear-gradient(120deg,#fff,#39ff39,#fff,#0f0,#fff,#0f0,#fff,#39ff39);background-size:300%;animation:BGgradient 15s ease infinite;filter:blur(.3rem)}.j3Row{background-color:transparent;height:1.8rem;display:flex}.j3Element{background-color:var(--color-primary);height:1.5rem;width:1.5rem;margin-left:.3rem;margin-top:.3rem;cursor:pointer;display:flex;justify-content:center;border-radius:.2rem}.j3ElementValue{color:var(--color-text)}.j3ElementMine{background-color:transparent;height:1.5rem;width:1.5rem}.j3ElementFlag{background-color:transparent}.auxIconSVG{width:1.5rem;height:1.5rem}.mine-stat{color:var(--color-primary);opacity:.8}.mine-title{font-family:var(--font-bold);font-size:1.4rem;color:var(--color-primary);margin:1rem 1rem 0}.mine-options{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin:1rem 1rem .5rem}.mine-stats{display:flex;flex-wrap:wrap;gap:1rem;margin:.5rem 1rem}.mine-new-game{display:flex;flex-direction:column;gap:.75rem;margin:1rem;max-width:20rem}.j4Grid{color:var(--color-bg);margin-top:1rem;margin-left:1rem}.j4Row{display:flex}.j4InternalGrid{background-color:var(--color-text);margin:.1rem;border:2px var(--color-primary) solid;border-radius:.2rem}.j4InternalRow{display:flex}.j4Element{text-align:center;justify-content:center;font-family:ComputerModern;background-color:var(--color-text);height:1.5rem;width:1.5rem;margin:.1rem;border:2px var(--color-primary) solid;border-radius:.2rem;font-size:1.2rem}