.uttt-scope{--uttt-x:#e0621b;--uttt-o:#2f7bc4;--uttt-grid:#22304a;--uttt-cell-line:#c9d6e8;--uttt-playable:#fdf3d7;--uttt-playable-ring:#f2b824;--uttt-last:#efebff;--uttt-arrow:#6d5ce8;--uttt-draw:#eef1f6}.uttt-scope .mark-x{color:var(--uttt-x)}.uttt-scope .mark-o{color:var(--uttt-o)}.uttt-scope .uttt-frame{border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);background:#fff;padding:10px;position:relative}.uttt-scope .uttt-board{aspect-ratio:1;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0 auto;display:grid;position:relative}.uttt-scope .uttt-local{border-color:var(--uttt-grid);border-style:solid;border-width:0;border-radius:6px;padding:6%;transition:background-color .2s,box-shadow .2s;position:relative}.uttt-scope .uttt-local[data-col="0"],.uttt-scope .uttt-local[data-col="1"]{border-right-width:3px;border-top-right-radius:0;border-bottom-right-radius:0}.uttt-scope .uttt-local[data-row="0"],.uttt-scope .uttt-local[data-row="1"]{border-bottom-width:3px;border-bottom-right-radius:0;border-bottom-left-radius:0}.uttt-scope .uttt-local[data-playable=true]{background:var(--uttt-playable);box-shadow:inset 0 0 0 3px var(--uttt-playable-ring)}.uttt-scope .uttt-local[data-spotlight=true]{box-shadow:inset 0 0 0 4px var(--uttt-arrow)}.uttt-scope .uttt-local[data-status=X] .uttt-local-grid,.uttt-scope .uttt-local[data-status=O] .uttt-local-grid,.uttt-scope .uttt-local[data-status=draw] .uttt-local-grid{opacity:.3}.uttt-scope .uttt-local[data-status=draw]{background:var(--uttt-draw)}.uttt-scope .uttt-local-grid{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));width:100%;height:100%;transition:opacity .25s;display:grid}.uttt-scope .uttt-cell{border:0 solid var(--uttt-cell-line);min-width:0;min-height:0;color:inherit;cursor:default;background:0 0;justify-content:center;align-items:center;padding:14%;transition:background-color .15s;display:flex;position:relative}.uttt-scope .uttt-cell[data-col="0"],.uttt-scope .uttt-cell[data-col="1"]{border-right-width:2px}.uttt-scope .uttt-cell[data-row="0"],.uttt-scope .uttt-cell[data-row="1"]{border-bottom-width:2px}.uttt-scope .uttt-cell:enabled{cursor:pointer}.uttt-scope .uttt-cell[data-last=true]{background:var(--uttt-last)}.uttt-scope .uttt-cell:focus-visible{outline:3px solid var(--lake);outline-offset:-3px;z-index:1}.uttt-scope .uttt-preview{opacity:0;pointer-events:none;transition:opacity .12s;position:absolute;inset:14%}@media (hover:hover){.uttt-scope .uttt-cell:enabled:hover .uttt-preview{opacity:.3}}.uttt-scope .uttt-cell:enabled:focus-visible .uttt-preview{opacity:.3}.uttt-scope .uttt-mark{width:100%;height:100%}.uttt-scope .uttt-mark-new{animation:.2s ease-out uttt-pop}.uttt-scope .uttt-overlay{pointer-events:none;animation:.32s cubic-bezier(.2,.9,.3,1.2) uttt-claim;position:absolute;inset:8%}.uttt-scope .uttt-arrow{pointer-events:none;width:100%;height:100%;color:var(--uttt-arrow);z-index:2;position:absolute;inset:0}.uttt-scope .uttt-arrow path,.uttt-scope .uttt-arrow circle{stroke-dasharray:300;stroke-dashoffset:300px;animation:.7s ease-out forwards uttt-draw}.uttt-scope .uttt-arrow-flash{animation:.5s ease-in 1.5s forwards uttt-fade-out}.uttt-scope .uttt-glyph{vertical-align:middle;width:30px;height:30px;display:inline-block}.uttt-scope .uttt-glyph-sm{width:18px;height:18px}.uttt-scope .uttt-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px;display:grid}@media (width>=860px){.uttt-scope .uttt-layout{grid-template-columns:minmax(0,1fr) 280px}}.uttt-scope .uttt-board-col{width:100%;max-width:600px;margin:0 auto;position:relative}.uttt-scope .uttt-side{flex-direction:column;gap:14px;display:flex}.uttt-scope .uttt-side .dt-panel{border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px 16px 18px}.uttt-scope .uttt-side .dt-panel+.dt-panel{margin-top:0}.uttt-scope .uttt-meta{color:var(--muted);margin:0;font-size:14px;font-weight:700;line-height:1.5}.uttt-scope .uttt-meta b{color:var(--ink)}.uttt-scope .uttt-dot{vertical-align:middle;border:1.5px solid var(--ink);border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block}.uttt-scope .uttt-result-layer{z-index:10;border-radius:var(--radius-card);background:#cde2f78c;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.uttt-scope .uttt-result-layer .dt-result{width:min(360px,100%)}.uttt-scope .uttt-modes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px;display:grid}.uttt-scope .uttt-mode{text-align:left;color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);cursor:pointer;font:inherit;background:#fff;flex-direction:column;gap:6px;padding:18px;transition:box-shadow .14s;display:flex}.uttt-scope .uttt-mode:hover{box-shadow:var(--shadow-card-hover)}.uttt-scope .uttt-mode:focus-visible{outline:3px solid var(--lake);outline-offset:3px}.uttt-scope .uttt-mode-title{font-family:var(--font-display);align-items:center;gap:10px;font-size:20px;font-weight:600;display:flex}.uttt-scope .uttt-mode-title svg{width:22px;height:22px}.uttt-scope .uttt-mode p{color:var(--muted);margin:0;font-size:14.5px;font-weight:600;line-height:1.45}.uttt-scope .uttt-hero{flex-wrap:wrap;align-items:center;gap:22px;display:flex}.uttt-scope .uttt-hero-text{flex:300px}.uttt-scope .uttt-hero-art{flex:0 0 150px;width:150px}.uttt-scope .uttt-code{font-family:var(--font-display);letter-spacing:.25em;text-align:center;border:2px dashed var(--sky-deep);border-radius:var(--radius-card);font-variant-numeric:tabular-nums;padding-left:.25em;margin:12px 0 16px;padding-block:10px;font-size:clamp(36px,10vw,52px);font-weight:700}.uttt-scope .uttt-code-input{font-family:var(--font-display);letter-spacing:.3em;text-transform:uppercase;width:11ch;font-weight:600}.uttt-scope .uttt-history{font-variant-numeric:tabular-nums;max-height:200px;margin:0;padding:0;font-size:14px;font-weight:700;list-style:none;overflow-y:auto}.uttt-scope .uttt-history li{color:var(--muted);align-items:center;gap:8px;padding:2px 0;display:flex}.uttt-scope .uttt-history li b{color:var(--ink);text-align:right;min-width:2.5ch}.uttt-scope .uttt-tutorial{flex-direction:column;flex:auto;gap:10px;min-height:0;display:flex}.uttt-scope .uttt-tutorial>*{flex:none}.uttt-scope .uttt-tutorial-step{letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0;font-size:12px;font-weight:800}.uttt-scope .uttt-tutorial h3{font-family:var(--font-display);margin:2px 0 0;font-size:20px;font-weight:600}.uttt-scope .uttt-tutorial-body p{color:var(--muted);margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.5}.uttt-scope .uttt-tutorial>.uttt-tutorial-board{flex:366px;justify-content:center;min-height:200px;display:flex;container-type:size}.uttt-scope .uttt-tutorial-board .uttt-frame{width:min(100cqw,100cqh - 6px,360px);padding:6px}.uttt-scope .uttt-exercise{border:2px dashed var(--sky-deep);border-radius:14px;flex-wrap:wrap;align-items:center;column-gap:10px;padding:10px 14px;font-size:14.5px;font-weight:700;line-height:1.45;display:flex}.uttt-scope .uttt-exercise>div{flex:100%}.uttt-scope .uttt-exercise>.ok{flex:1 1 0;min-width:0}.uttt-scope .uttt-exercise>button{flex:none;margin-right:-8px}.uttt-scope .uttt-exercise .ok{color:#1d7a4f;font-weight:800}.uttt-scope .uttt-exercise .hint{color:var(--muted);margin-top:4px}.uttt-scope .uttt-tutorial-nav{justify-content:space-between;align-items:center;gap:10px;display:flex}.uttt-scope .uttt-dots{gap:6px;display:flex}.uttt-scope .uttt-dots span{background:var(--sky-deep);border-radius:50%;width:8px;height:8px}.uttt-scope .uttt-dots span[data-on=true]{background:var(--uttt-arrow)}.dt-modal:has(.uttt-tutorial){flex-direction:column;max-height:min(92dvh,760px);display:flex}.dt-modal:has(.uttt-tutorial) .dt-modal-body{flex-direction:column;flex:auto;min-height:0;display:flex}.dt-modal:has(.uttt-tutorial) .dt-modal-body>.uttt-scope{flex-direction:column;flex:auto;min-height:0;display:flex}@media (width<=520px){.dt-modal:has(.uttt-tutorial){padding:14px 16px 16px}.dt-modal:has(.uttt-tutorial) .dt-modal-title{margin:8px 0 4px;font-size:18px}.dt-modal:has(.uttt-tutorial) .dt-icon-btn{width:38px;height:38px}.dt-modal:has(.uttt-tutorial) .uttt-tutorial{gap:8px}.dt-modal:has(.uttt-tutorial) .uttt-tutorial h3{font-size:18px}.dt-modal:has(.uttt-tutorial) .uttt-tutorial-body p{margin-bottom:4px;font-size:14px;line-height:1.4}.dt-modal:has(.uttt-tutorial) .uttt-exercise{padding:8px 12px;font-size:13.5px;line-height:1.35}}@keyframes uttt-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes uttt-claim{0%{opacity:0;transform:scale(.4)rotate(-8deg)}to{opacity:1;transform:none}}@keyframes uttt-draw{to{stroke-dashoffset:0}}@keyframes uttt-fade-out{to{opacity:0}}@media (prefers-reduced-motion:reduce){.uttt-scope .uttt-mark-new,.uttt-scope .uttt-overlay{animation:none}.uttt-scope .uttt-arrow path,.uttt-scope .uttt-arrow circle{stroke-dashoffset:0;animation:none}}