@layer reset,tokens,base,layout,components,utilities;@layer reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,svg,video,canvas,picture{display:block;max-inline-size:100%}input,button,textarea,select{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{text-wrap:balance}p,li,figcaption{text-wrap:pretty}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}}@layer tokens{:root{color-scheme:light dark;--frame: oklch(.849 .01 252.8);--rim: oklch(.908 .007 247.9);--rim-edge: oklch(.796 .012 252.1);--frame-shadow: oklch(.2 .01 250 / .18);--surface: oklch(.99 .002 200);--surface-2: oklch(.975 .004 248);--ink: oklch(.253 .012 248.3);--ink-2: oklch(.42 .02 251);--ink-3: oklch(.502 .021 250.8);--soft: oklch(.836 .011 248);--x: oklch(.516 .188 261);--o: oklch(.57 .2 28.7);--win: oklch(.617 .147 153.8);--win-text: oklch(.5 .13 153.8);--violet: oklch(.51 .195 300.2);--lose: var(--o);--focus: var(--x);--board-sheen: linear-gradient( 115deg, transparent 40%, oklch(1 0 0 / .9) 48%, transparent 56% );--board-smudge: radial-gradient(ellipse 30% 12% at 18% 62%, oklch(.6 .02 250 / .07), transparent 70%), radial-gradient(ellipse 22% 9% at 82% 88%, oklch(.6 .02 250 / .06), transparent 70%);--cell-hover: color-mix(in oklab, var(--x) 7%, transparent);--cell-held: color-mix(in oklab, var(--x) 20%, transparent);--cell-target: color-mix(in oklab, var(--x) 8%, transparent);--region-live: color-mix(in oklab, var(--x) 9%, transparent);--tint-ink: color-mix(in oklab, var(--ink) 10%, transparent);--tint-x: color-mix(in oklab, var(--x) 12%, transparent);--tint-o: color-mix(in oklab, var(--o) 12%, transparent);--tint-win: color-mix(in oklab, var(--win) 14%, transparent);--qr-paper: oklch(.99 .002 200);--qr-ink: oklch(.2 .012 248.3);--qr-x: oklch(.38 .16 261);--qr-o: oklch(.43 .16 28.7);--qr-rim: oklch(.836 .011 248);--qr-stroke-x: .42;--qr-stroke-o: .14;--qr-stroke-finder: 1;--qr-stroke-logo: .14;--qr-round: 1.5px;--qr-stroke-rim: .3;--qr-size: 20rem;--invite-text: 14rem;--font-hand: "Shantell Sans", "Comic Sans MS", "Chalkboard SE", cursive;--font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--loud-1: "INFM" 80, "BNCE" 60;--loud-2: "INFM" 68, "BNCE" 44, "SPAC" 4;--loud-3: "INFM" 92, "BNCE" 72;--loud-4: "INFM" 76, "BNCE" -46, "SPAC" 2;--talk-1: "INFM" 35, "BNCE" 15;--talk-2: "INFM" 28, "BNCE" -12;--talk-3: "INFM" 42, "BNCE" 22;--hands: 4;--loud-a: var(--loud-1);--loud-b: var(--loud-2);--loud-c: var(--loud-3);--loud-d: var(--loud-4);--talk-a: var(--talk-1);--talk-b: var(--talk-2);--talk-c: var(--talk-3);--mark-letter-size: 1.25em;--mark-letter-hand: "INFM" 80, "BNCE" 0;--weight-talk: 420;--weight-strong: 620;--weight-loud: 700;--step-0: clamp(1.0625rem, 1.0208rem + .2083vw, 1.1875rem);--step-1: clamp(1.3281rem, 1.276rem + .2604vw, 1.4844rem);--step-2: clamp(1.6602rem, 1.595rem + .3255vw, 1.8555rem);--step-3: clamp(2.0752rem, 1.9938rem + .4069vw, 2.3193rem);--step-4: clamp(2.594rem, 2.4923rem + .5086vw, 2.8992rem);--step-5: clamp(3.2425rem, 3.1153rem + .6358vw, 3.624rem);--step-6: clamp(4.0531rem, 3.8941rem + .7948vw, 4.53rem);--small: .9em;--leading: 1.55;--leading-tight: 1.15;--one-line: 1lh;--space: 1rem;--space-1: calc(var(--space) * .5);--space-2: var(--space);--space-3: calc(var(--space) * 1.5);--space-4: calc(var(--space) * 2);--space-5: calc(var(--space) * 3);--space-6: calc(var(--space) * 5);--column: 52rem;--radius: .75rem;--rule-width: 1px;--underline-offset: .2em;--underline-width: .09em;--frame-gap: clamp(.375rem, .125rem + 1.25vw, 1.75rem);--gutter: clamp(1rem, .5rem + 2.5vw, 1.5rem);--board-min-height: calc(100dvh - 2 * var(--frame-gap));--board-radius: 10px;--board-rim: inset 0 0 0 10px var(--rim), inset 0 0 0 12px var(--rim-edge), 0 12px 30px var(--frame-shadow);--marker: 3px;--marker-soft: 2px;--ruled: var(--marker-soft) solid var(--soft);--radius-marker-a: 255px 18px 225px 18px / 18px 225px 18px 255px;--radius-marker-b: 22px 255px 22px 225px / 225px 22px 255px 22px;--radius-marker-c: 225px 22px 255px 18px / 22px 255px 18px 225px;--focus-width: 3px;--focus-offset: 3px;--wobble-scale: 1.06;--wobble-turn: -2deg;--wobble-turn-alt: 1.5deg;--wobble-duration: .15s;--ease-bounce: cubic-bezier(.3, 1.8, .5, 1);--bob-duration: .5s;--bob-rise: .5rem;--bob-turn-1: -3deg;--bob-turn-2: 2.5deg;--bob-turn-3: -1.5deg;--bob-turn-4: 3.5deg;--stroke-width-board: 6;--stroke-width-row: 4;--stroke-width-major: 8;--stroke-width-minor: 4.5;--stroke-width-mark: 7;--stroke-width-win: 9;--stroke-width-macro: 15;--stroke-width-region-mark: 16;--stroke-board: var(--ink);--board-size: 27rem;--cell-min: 1.5rem;--target: 2.75rem;--board-pad: calc(var(--cell-min) * .22);--doodle: 4.5rem;--doodle-stroke: 3px;--doodle-stroke-minor: 1.5px;--magnet: 1.625rem;--middle: 50%;--round: 50%;--magnet-shadow: inset -.25rem -.25rem 0 oklch(0 0 0 / .2), 0 .1875rem .25rem oklch(0 0 0 / .25);--home-title-above: clamp(var(--space-2), 3cqi, var(--space-5));--home-title-below: clamp(calc(var(--space-5) + var(--space-1)), 5cqi, var(--space-6));--card-name-narrow: min(var(--step-1), 5.5cqi);--swoosh-height: 1.375rem;--stroke-width-swoosh: 6;--diagram-size: 13rem;--diagram-size-small: 7.5rem;--figure-width: 30rem;--region-spent: .4;--region-wipe: .8;--region-drawn: color-mix(in oklab, var(--ink) 16%, transparent);--region-radius: 18px;--draw-duration: .22s;--draw-gap: .18s;--draw-duration-o: .42s;--draw-ease: cubic-bezier(.5, 0, .3, 1);--strike-duration: .45s;--strike-delay: var(--draw-duration-o);--strike-ease: cubic-bezier(.3, .1, .3, 1);--grid-draw-duration: .26s;--grid-draw-stagger: .3s;--fall-distance: 300px;--fall-duration: .28s;--fall-ease: cubic-bezier(.6, 0, .9, .6);--ghost-opacity: .28;--user-unit: 1px;--sweep-lead: .12s;--sweep-pass: .25s;--sweep-most: 1.5s;--sweep-ease: cubic-bezier(.45, .05, .4, 1);--smear-duration: .34s;--smear-ease: ease-in;--smear-ghost-duration: 1.1s;--smear-ghost-ease: ease-out;--smear-mid-opacity: .45;--smear-mid-blur: .8px;--smear-mid-shift: 4px;--smear-mid-turn: -3deg;--smear-opacity: .16;--smear-blur: 1.6px;--smear-shift: 6px;--smear-turn: -4deg;--eraser-least: 92;--eraser-share: .31;--eraser-tilt: 6deg;--eraser-stroke: 3;--eraser-top: var(--x);--eraser-felt: var(--ink-3);--page-morph-duration: .46s;--celebrate-unit: 1cqi;--celebrate-reach: 26cqi;--celebrate-room: max( 0px, min(var(--celebrate-reach), (100vw - 100cqi) / 2 - var(--frame-gap) - var(--space-3)) );--celebrate-gap: var(--space-1);--celebrate-stroke: 4.5;--celebrate-lead: .5s;--celebrate-stagger: 70ms;--celebrate-draw: .35s;--celebrate-draw-ease: cubic-bezier(.3, 1.4, .5, 1);--celebrate-hold: 2.2s;--celebrate-fade: 1.4s;--celebrate-ghost: .12;--celebrate-ghost-blur: 1.5px;--scrawl-size: 13cqi;--scrawl-turn: -6deg;--scrawl-pop-turn: -12deg;--scrawl-pop-scale: .5;--scrawl-pop: .45s;--scrawl-hold: 2.4s;--scrawl-overlap: .3em;--scrawl-drop: 0px;--margin-doodle-room: 9rem;--margin-doodle-gap: var(--space-3);--margin-doodle-edge: var(--space-3);--margin-doodle-settle: .2s;--margin-doodle-fade: .084;--margin-doodle-haze: .098;--margin-doodle-residue: var(--ink-3);--margin-doodle-blur: 1.6;--margin-doodle-haze-blur: 5;--margin-doodle-wipe-blur: 8;--margin-doodle-stroke-ink: 3.5;--margin-doodle-stroke: 4;--margin-doodle-stroke-haze: 9;--margin-doodle-kept: oklch(1 0 0);--margin-doodle-wiped: oklch(0 0 0);--margin-doodle-wiped-most: oklch(.349 0 0);--margin-doodle-wiped-some: oklch(.633 0 0);--reply-delay: calc(var(--draw-duration-o) * 1.4)}:root[data-hand="1"]{--loud-a: var(--loud-2);--loud-b: var(--loud-3);--loud-c: var(--loud-4);--loud-d: var(--loud-1);--talk-a: var(--talk-2);--talk-b: var(--talk-3);--talk-c: var(--talk-1)}:root[data-hand="2"]{--loud-a: var(--loud-3);--loud-b: var(--loud-4);--loud-c: var(--loud-1);--loud-d: var(--loud-2);--talk-a: var(--talk-3);--talk-b: var(--talk-1);--talk-c: var(--talk-2)}:root[data-hand="3"]{--loud-a: var(--loud-4);--loud-b: var(--loud-1);--loud-c: var(--loud-2);--loud-d: var(--loud-3);--talk-a: var(--talk-1);--talk-b: var(--talk-3);--talk-c: var(--talk-2)}@property --reply-delay{syntax: "<time>"; inherits: true; initial-value: 0s;}@property --margin-doodle-room{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --margin-doodle-gap{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --margin-doodle-edge{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --margin-doodle-settle{syntax: "<time>"; inherits: true; initial-value: 0s;}@property --celebrate-gap{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --margin-doodle-blur{syntax: "<number>"; inherits: true; initial-value: 0;}@property --margin-doodle-haze-blur{syntax: "<number>"; inherits: true; initial-value: 0;}@property --margin-doodle-wipe-blur{syntax: "<number>"; inherits: true; initial-value: 0;}@media(prefers-reduced-motion:reduce){:root{--reply-delay: 0s}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--frame: oklch(.303 .013 253);--rim: oklch(.236 .012 248.3);--rim-edge: oklch(.36 .012 250);--frame-shadow: oklch(0 0 0 / .5);--surface: oklch(.171 .008 248.3);--surface-2: oklch(.215 .01 248);--ink: oklch(.975 .005 247.9);--ink-2: oklch(.86 .01 248);--ink-3: oklch(.714 .018 248.1);--soft: oklch(.975 .005 247.9 / .35);--x: oklch(.81 .13 224.6);--o: oklch(.697 .225 353.5);--win: oklch(.93 .215 124.8);--win-text: oklch(.93 .215 124.8);--violet: oklch(.728 .166 299.5);--eraser-felt: oklch(.37 .014 250);--margin-doodle-fade: .14;--margin-doodle-haze: 0;--margin-doodle-blur: 0;--board-sheen: linear-gradient( 115deg, transparent 25%, oklch(1 0 0 / .018) 50%, transparent 75% );--board-smudge: radial-gradient(ellipse 30% 12% at 18% 62%, oklch(1 0 0 / .035), transparent 70%), radial-gradient(ellipse 22% 9% at 82% 88%, oklch(1 0 0 / .03), transparent 70%)}}[data-theme=dark]{--frame: oklch(.303 .013 253);--rim: oklch(.236 .012 248.3);--rim-edge: oklch(.36 .012 250);--frame-shadow: oklch(0 0 0 / .5);--surface: oklch(.171 .008 248.3);--surface-2: oklch(.215 .01 248);--ink: oklch(.975 .005 247.9);--ink-2: oklch(.86 .01 248);--ink-3: oklch(.714 .018 248.1);--soft: oklch(.975 .005 247.9 / .35);--x: oklch(.81 .13 224.6);--o: oklch(.697 .225 353.5);--win: oklch(.93 .215 124.8);--win-text: oklch(.93 .215 124.8);--violet: oklch(.728 .166 299.5);--eraser-felt: oklch(.37 .014 250);--margin-doodle-fade: .14;--margin-doodle-haze: 0;--margin-doodle-blur: 0;--board-sheen: linear-gradient( 115deg, transparent 25%, oklch(1 0 0 / .018) 50%, transparent 75% );--board-smudge: radial-gradient(ellipse 30% 12% at 18% 62%, oklch(1 0 0 / .035), transparent 70%), radial-gradient(ellipse 22% 9% at 82% 88%, oklch(1 0 0 / .03), transparent 70%)}}@layer base{@font-face{font-family:Shantell Sans;src:url(/assets/ShantellSans-Latin.5c5694fc6ca0.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}@font-face{font-family:Shantell Sans;src:url(/assets/ShantellSans-Latin.5c5694fc6ca0.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap}html{background:var(--frame)}body{margin:var(--frame-gap);min-block-size:var(--board-min-height);border-radius:var(--board-radius);background-color:var(--surface);background-image:var(--board-sheen),var(--board-smudge);box-shadow:var(--board-rim);color:var(--ink);font-family:var(--font-hand);font-size:var(--step-0);font-weight:var(--weight-talk);font-variation-settings:var(--talk-a);line-height:var(--leading)}h1,h2,h3,h4{font-weight:var(--weight-loud);line-height:var(--leading-tight)}h1{font-size:var(--step-5);font-variation-settings:var(--loud-a)}h2{font-size:var(--step-3);font-variation-settings:var(--loud-b)}h3{font-size:var(--step-2);font-variation-settings:var(--loud-c)}h4{font-size:var(--step-1);font-variation-settings:var(--loud-d)}b,strong{font-weight:var(--weight-strong)}code,pre,kbd,samp{font-family:var(--font-code);font-size:var(--small)}pre{overflow-x:auto;padding:var(--space-2);background:var(--surface-2);border-radius:var(--radius)}pre code{font-size:inherit}a{color:var(--x);text-decoration-thickness:var(--underline-width);text-underline-offset:var(--underline-offset)}a:hover{color:var(--o)}hr{border:0;border-block-start:var(--ruled)}figure{counter-increment:figure}figcaption{font-size:var(--small);color:var(--ink-3);line-height:var(--leading-tight)}figcaption:before{content:"Fig. " counter(figure) ". ";color:var(--ink-2);font-weight:var(--weight-strong)}table{font-variant-numeric:tabular-nums}:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}}@layer layout{.site-head,.site-foot{container-type:inline-size;padding-inline:var(--gutter)}.site-head{padding-block-start:var(--space-3)}.site-bar{max-inline-size:var(--column);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--space-4);row-gap:var(--space-1)}.site-foot{margin-block-start:var(--space-5);padding-block-end:var(--space-4)}.site-foot .site-bar{flex-direction:column;align-items:center;text-align:center}.page{container-type:inline-size;counter-reset:figure;padding-inline:var(--gutter);padding-block:var(--space-4) 0}.page-main{max-inline-size:var(--column);margin-inline:auto}.section+.section{margin-block-start:var(--space-6)}:is(.prose,.section)>*+*{margin-block-start:var(--space-3)}:is(.prose,.section)>*+:is(h2,h3){margin-block-start:var(--space-5)}:is(.prose,.section)>:is(h2,h3)+*{margin-block-start:var(--space-2)}@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}.site-head:not([data-morph=away]){view-transition-name:site-head}[data-morph=board]{view-transition-name:morph-board}[data-morph=title]{view-transition-name:morph-title}}::view-transition-group(morph-board),::view-transition-group(morph-title){animation-duration:var(--page-morph-duration)}::view-transition-old(site-head){animation:none;visibility:hidden}::view-transition-new(site-head){animation:none}}@layer components{ttt-game{display:block}ttt-room{display:flex;flex-direction:column;gap:var(--space-3)}ttt-board{display:block;inline-size:100%;max-inline-size:var(--board-size);margin-inline:auto}ttt-board[kind=strip]{max-inline-size:100%}ttt-board[hidden]{display:none}.board{inline-size:100%;block-size:auto}ttt-board[interactive]{overflow-x:auto}ttt-board[interactive]>.board{min-inline-size:calc(var(--cols, 1) * var(--cell-min) + var(--board-pad))}ttt-board[data-cols="3"]{--cols: 3}ttt-board[data-cols="6"]{--cols: 6}ttt-board[data-cols="7"]{--cols: 7}ttt-board[data-cols="8"]{--cols: 8}ttt-board[data-cols="9"]{--cols: 9}ttt-board[data-cols="10"]{--cols: 10}ttt-board[data-cols="11"]{--cols: 11}ttt-board[data-cols="12"]{--cols: 12}ttt-board[data-cols="13"]{--cols: 13}ttt-board[data-cols="14"]{--cols: 14}.art{fill:none;stroke-linecap:round;stroke-linejoin:round}.art .grid{stroke:var(--stroke-board);stroke-width:var(--stroke-width-board)}.art .point{fill:var(--stroke-board);stroke:none}.art .grid.row{stroke-width:var(--stroke-width-row)}.art .wipe{fill:var(--surface);stroke:none}.art .region-mark>.wipe{fill-opacity:var(--region-wipe)}.art .grid.major{stroke-width:var(--stroke-width-major)}.art .grid.minor{stroke-width:var(--stroke-width-minor)}.art .region-wash{fill:transparent;rx:var(--region-radius)}.art .region.active .region-wash{fill:var(--region-live)}.art .region:is(.won,.drawn){opacity:var(--region-spent)}.art .region.drawn .region-wash{fill:var(--region-drawn)}.art .mark-x{stroke:var(--x);stroke-width:var(--stroke-width-mark)}.art .mark-o{stroke:var(--o);stroke-width:var(--stroke-width-mark)}.art .region-mark{stroke-width:var(--stroke-width-region-mark)}.art .mark path,.art .win{stroke-dasharray:1;stroke-dashoffset:0}.art .mark.falling{animation:ttt-fall var(--fall-duration) var(--fall-ease) both}.art .mark:is(.drawing,.falling)>path:not(.wipe){animation:ttt-draw var(--draw-duration) var(--draw-ease) both}.art .mark-o:is(.drawing,.falling)>path{animation-duration:var(--draw-duration-o)}.art .mark:is(.drawing,.falling)>path:not(.wipe)+path{animation-delay:var(--draw-gap)}@keyframes ttt-draw{0%{stroke-dashoffset:1}}@keyframes ttt-grid-draw{0%{stroke-dashoffset:1;visibility:hidden}}@media(prefers-reduced-motion:no-preference){.art.draw-in .grid{stroke-dasharray:1;animation:ttt-grid-draw var(--grid-draw-duration) var(--draw-ease) both}.art.draw-in .grid:nth-child(2){animation-delay:var(--grid-draw-stagger)}.art.draw-in .grid:nth-child(3){animation-delay:calc(var(--grid-draw-stagger) * 2)}.art.draw-in .grid:nth-child(4){animation-delay:calc(var(--grid-draw-stagger) * 3)}}@keyframes ttt-fall{0%{transform:translateY(calc(-1 * var(--fall-distance)))}}.art .mark.ghost{opacity:var(--ghost-opacity)}.art .eraser{opacity:0}.art .eraser-size{transform:scale(calc(max(var(--eraser-least),var(--sweep-short) * var(--eraser-share)) / var(--eraser-drawn)))}.art :is(.eraser-top,.eraser-felt){stroke:var(--ink);stroke-width:var(--eraser-stroke)}.art .eraser-top{fill:var(--eraser-top)}.art .eraser-felt{fill:var(--eraser-felt)}.art .eraser-label{fill:var(--surface);font-family:var(--font-hand);font-weight:var(--weight-loud);font-variation-settings:var(--loud-3)}@media(prefers-reduced-motion:no-preference){ttt-board[erasing]{--sweep-each: min(var(--sweep-pass), var(--sweep-most) / var(--sweep-rows));--sweep-duration: calc(var(--sweep-each) * var(--sweep-rows))}ttt-board[erasing] .marks .mark{--smear-at: calc(var(--sweep-lead) + var(--sweep-each) * (var(--row, 0) + var(--along, 0)));transform-box:fill-box;transform-origin:center;animation:ttt-smear var(--smear-duration) var(--smear-ease) forwards,ttt-smear-ghost var(--smear-ghost-duration) var(--smear-ghost-ease) forwards;animation-delay:var(--smear-at),calc(var(--smear-at) + var(--smear-duration))}ttt-board[erasing] .eraser{animation:ttt-sweep-down var(--sweep-duration) linear var(--sweep-lead) both,ttt-sweep-show var(--sweep-duration) linear var(--sweep-lead) both}ttt-board[erasing] .eraser-pass{animation:ttt-sweep-across var(--sweep-each) var(--sweep-ease) var(--sweep-lead) var(--sweep-rows) alternate both}}.game-board{position:relative;container-type:inline-size}.celebration{position:absolute;inset-block:calc(-1 * var(--celebrate-reach));inset-inline:calc(-1 * var(--celebrate-room));overflow:clip;pointer-events:none}.celebration-ring{position:absolute;inset-block:var(--celebrate-reach);inset-inline:var(--celebrate-room)}.celebration-doodles{position:absolute;inset:0}.celebration-doodle{position:absolute;inset-block-start:calc(var(--middle) + var(--dy) * var(--celebrate-unit));inset-inline-start:calc(var(--middle) + var(--dx) * var(--celebrate-unit));inline-size:calc(var(--size) * var(--celebrate-unit));block-size:auto;overflow:visible;translate:calc(-1 * var(--middle)) calc(-1 * var(--middle));rotate:var(--turn);fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--celebrate-stroke);stroke-dasharray:1;stroke-dashoffset:0}.celebration-doodle path[data-ink=x]{stroke:var(--x)}.celebration-doodle path[data-ink=o]{stroke:var(--o)}.celebration-doodle path[data-ink=win]{stroke:var(--win)}.celebration-doodle path[data-ink=violet]{stroke:var(--violet)}.scrawl{display:none;position:absolute;inset-inline-end:0;inset-block-end:calc(100% - var(--scrawl-overlap) - var(--scrawl-drop));margin:0;font-size:var(--scrawl-size);font-weight:var(--weight-loud);font-variation-settings:var(--loud-3);line-height:var(--leading-tight);white-space:nowrap;rotate:var(--scrawl-turn)}.celebration[data-outcome=win] .scrawl[data-outcome=win]{display:block;color:var(--win)}.celebration[data-outcome=draw] .scrawl[data-outcome=draw]{display:block;color:var(--violet)}.celebration[data-outcome=loss] .scrawl[data-outcome=loss]{display:block;color:var(--ink-3)}@media(prefers-reduced-motion:no-preference){.celebration-doodle{--drawn-at: calc(var(--celebrate-lead) + var(--i) * var(--celebrate-stagger));animation:ttt-draw var(--celebrate-draw) var(--celebrate-draw-ease) both,ttt-ghost var(--celebrate-fade) ease-out forwards;animation-delay:var(--drawn-at),calc(var(--drawn-at) + var(--celebrate-hold))}.scrawl{animation:ttt-pop var(--scrawl-pop) var(--ease-bounce) both,ttt-ghost var(--celebrate-fade) ease-out var(--scrawl-hold) forwards}}@media(prefers-reduced-motion:reduce){.celebration-doodles{display:none}}@keyframes ttt-pop{0%{opacity:0;scale:var(--scrawl-pop-scale);rotate:var(--scrawl-pop-turn)}}@keyframes ttt-ghost{to{opacity:var(--celebrate-ghost);filter:blur(var(--celebrate-ghost-blur))}}@keyframes ttt-smear{60%{opacity:var(--smear-mid-opacity);filter:blur(var(--smear-mid-blur));transform:translate(var(--smear-mid-shift)) rotate(var(--smear-mid-turn))}to{opacity:var(--smear-opacity);filter:blur(var(--smear-blur));transform:translate(var(--smear-shift)) rotate(var(--smear-turn))}}@keyframes ttt-smear-ghost{0%{opacity:var(--smear-opacity)}to{opacity:0}}@keyframes ttt-sweep-down{0%{transform:translateY(calc(var(--sweep-top) * var(--user-unit)))}to{transform:translateY(calc(var(--sweep-bottom) * var(--user-unit)))}}@keyframes ttt-sweep-across{0%{transform:translate(calc(var(--sweep-left) * var(--user-unit))) rotate(calc(-1 * var(--eraser-tilt)))}to{transform:translate(calc(var(--sweep-right) * var(--user-unit))) rotate(var(--eraser-tilt))}}@keyframes ttt-sweep-show{0%{opacity:0}8%,92%{opacity:1}to{opacity:0}}.art .win{stroke:var(--win);stroke-width:var(--stroke-width-win)}.art .win.lose{stroke:var(--lose)}.art .win.macro{stroke-width:var(--stroke-width-macro)}.art .win.drawing{animation:ttt-draw var(--strike-duration) var(--strike-ease) both;animation-delay:var(--strike-delay)}.art .lines,.art .marks{pointer-events:none}.cell,.column{inline-size:100%;block-size:100%;padding:0;border:0;border-radius:var(--radius);background:transparent;cursor:pointer}.cell[aria-disabled=true],.column[aria-disabled=true]{cursor:default}.cell:hover:not([aria-disabled=true]),.column:hover:not([aria-disabled=true]){background:var(--cell-hover)}.cell[aria-pressed=true]{background:var(--cell-held)}.cell[aria-pressed=false]:not([aria-disabled=true]){background:var(--cell-target)}ttt-board[anywhere] .cell[aria-pressed=false]{background:transparent}.cell:focus-visible,.column:focus-visible{outline-offset:calc(var(--focus-width) * -1.5)}.status{font-size:var(--small);line-height:var(--leading-tight);color:var(--ink-2)}.figure{inline-size:min(100%,var(--figure-width));margin-inline:auto;text-align:center;overflow-x:auto;border:var(--marker) solid var(--soft);border-radius:var(--radius-marker-b);padding:var(--space-3)}.figure:nth-of-type(2n){border-radius:var(--radius-marker-c)}.figure>figcaption{margin-block-start:var(--space-3)}.figure-art{max-inline-size:var(--diagram-size);margin-inline:auto}.guide .figure-art{max-inline-size:var(--diagram-size-small)}.prose table{inline-size:100%;border-collapse:collapse;font-size:var(--small);line-height:var(--leading-tight)}.prose :is(th,td){padding-block:var(--space-1);padding-inline-end:var(--space-2);border-block-end:var(--ruled);text-align:start;vertical-align:top}.prose th{color:var(--ink-3);font-weight:var(--weight-strong)}.prose thead th{border-block-end:var(--marker) solid var(--ink-3)}.prose tr>:last-child{padding-inline-end:0}.prose .num{text-align:end}.codes>dt+dd{margin-inline-start:0;color:var(--ink-2)}.codes>dd+dt{margin-block-start:var(--space-2)}.note{--card-ink: var(--violet);position:relative;padding:var(--space-4) var(--space-3) var(--space-3);border:var(--marker) solid var(--card-ink);border-radius:var(--radius-marker-b);background:var(--surface);font-size:var(--small);line-height:var(--leading-tight);color:var(--ink-2)}.note:before,.card:before{content:"";position:absolute;inset-block-start:calc(var(--magnet) / -2);inset-inline-start:var(--middle);translate:calc(-1 * var(--middle)) 0;inline-size:var(--magnet);block-size:var(--magnet);border-radius:var(--round);background:var(--card-ink);box-shadow:var(--magnet-shadow)}.site-name{font-size:var(--step-3);font-weight:var(--weight-loud);font-variation-settings:var(--loud-d);line-height:var(--leading-tight)}.site-name a{color:var(--ink);text-decoration:none}.site-name .tac{color:var(--x)}.site-name .toe{color:var(--o)}.site-nav{font-size:var(--step-0);line-height:var(--leading-tight)}.site-nav ul{display:flex;list-style:none;padding:0;column-gap:var(--space-3)}@container (min-width: 48rem){.site-name{font-size:var(--step-4)}.site-nav{font-size:var(--step-1)}.site-nav ul{column-gap:var(--space-4)}}.site-nav li{white-space:nowrap}.site-nav li:nth-child(odd){font-variation-settings:var(--talk-b)}.site-nav li:nth-child(2n){font-variation-settings:var(--talk-c)}.site-nav a,.site-colophon a{display:inline-flex;align-items:center;min-block-size:var(--target)}.site-nav a{color:var(--ink);text-decoration-color:transparent}.site-nav a:hover{color:var(--ink);text-decoration-color:var(--o)}.site-foot{color:var(--ink-3)}.site-colophon{font-size:var(--small);line-height:var(--leading-tight)}.skip-link:focus{display:inline-block;padding:var(--space-1) var(--space-2);background:var(--surface)}.game-report{position:relative;text-align:center}.game-turn,.stats-empty{min-block-size:var(--one-line);color:var(--win);font-size:var(--step-2);font-weight:var(--weight-loud);font-variation-settings:var(--loud-b);line-height:var(--leading-tight);text-wrap:balance}.mark-letter{font-size:var(--mark-letter-size);font-variation-settings:var(--mark-letter-hand);line-height:0}.game-last{min-block-size:var(--one-line);margin-block-start:var(--space-1);font-size:var(--small);line-height:var(--leading-tight);color:var(--ink-2);text-wrap:balance}.game-turn[data-hand="1"]{font-variation-settings:var(--loud-1);animation:ttt-bob-1 var(--bob-duration) var(--ease-bounce)}.game-turn[data-hand="2"]{font-variation-settings:var(--loud-2);animation:ttt-bob-2 var(--bob-duration) var(--ease-bounce)}.game-turn[data-hand="3"]{font-variation-settings:var(--loud-3);animation:ttt-bob-3 var(--bob-duration) var(--ease-bounce)}.game-turn[data-hand="4"]{font-variation-settings:var(--loud-4);animation:ttt-bob-4 var(--bob-duration) var(--ease-bounce)}@keyframes ttt-bob-1{0%{opacity:0;transform:translateY(var(--bob-rise)) rotate(var(--bob-turn-1))}}@keyframes ttt-bob-2{0%{opacity:0;transform:translateY(var(--bob-rise)) rotate(var(--bob-turn-2))}}@keyframes ttt-bob-3{0%{opacity:0;transform:translateY(var(--bob-rise)) rotate(var(--bob-turn-3))}}@keyframes ttt-bob-4{0%{opacity:0;transform:translateY(var(--bob-rise)) rotate(var(--bob-turn-4))}}.game-notice{margin-block-start:var(--space-1);color:var(--ink-2)}.game-note{font-size:var(--small);line-height:var(--leading-tight);color:var(--ink-2);margin-block-start:var(--space-3)}.game-title{font-size:var(--step-4)}.share-note{font-size:var(--small);line-height:var(--leading-tight);color:var(--ink-3)}.stats-empty{text-align:center}.game{display:flex;flex-direction:column;gap:var(--space-4);max-inline-size:var(--board-size);margin-inline:auto}.game-play,.game-side{display:flex;flex-direction:column;gap:var(--space-3);min-inline-size:0;text-align:center}.game-actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2)}.game-actions[hidden],.game-actions [hidden]{display:none}.app{min-block-size:0}.app>.game{padding:var(--space-4) var(--gutter)}.app .game-note{margin-block-start:0;text-align:center}.control{padding:var(--space-1) var(--space-3);font-size:var(--step-1);font-weight:var(--weight-loud);font-variation-settings:var(--loud-c);line-height:var(--leading-tight);color:var(--ink);background:transparent;border:var(--marker) solid var(--ink);border-radius:var(--radius-marker-a);cursor:pointer;transition:transform var(--wobble-duration) var(--ease-bounce)}.control:nth-child(3n+2){font-variation-settings:var(--loud-a);border-radius:var(--radius-marker-b)}.control:nth-child(3n){font-variation-settings:var(--loud-d);border-radius:var(--radius-marker-c)}.control:hover{transform:scale(var(--wobble-scale)) rotate(var(--wobble-turn))}.control:nth-child(2n):hover{transform:scale(var(--wobble-scale)) rotate(var(--wobble-turn-alt))}.control:focus-visible{outline-offset:var(--focus-offset)}.control[data-action=new],.control[data-action=again]{color:var(--x);border-color:var(--x)}a.control{text-decoration:none}.control-ink,.control-ink:hover{color:var(--surface);background:var(--x);border-color:var(--x)}.control-quiet,ttt-room:not([over]) .control[data-action=room]{color:var(--x);border-color:transparent;text-decoration:underline;text-decoration-thickness:var(--underline-width);text-underline-offset:var(--underline-offset)}.room-seats{color:var(--ink-2);text-align:center}.room-score{font-size:var(--step-1);font-variant-numeric:tabular-nums;line-height:var(--leading-tight);text-align:center}.room-score[hidden]{display:none}.room-invite{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--marker) solid var(--soft);border-radius:var(--radius-marker-b)}.room-invite[hidden],ttt-room[over] .control[data-action=qr],ttt-room[full] .control[data-action=qr]{display:none}.room-invite-text{flex:1 1 var(--invite-text);min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.room-invite-title{font-size:var(--step-2);line-height:var(--leading-tight)}.room-link{font-size:var(--small);line-height:var(--leading-tight);overflow-wrap:anywhere}.room-invite-code{min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.room-note{line-height:var(--leading-tight);color:var(--ink-2)}ttt-qr{display:block;width:var(--qr-size);max-width:100%}.qr{display:block;width:100%;height:auto}.qr-plate{fill:var(--qr-paper)}.qr>.qr-plate{rx:var(--qr-round);stroke:var(--qr-rim);stroke-width:var(--qr-stroke-rim)}.qr-module{fill:var(--qr-ink)}.qr-mark{fill:none;stroke-linecap:round}.qr-mark-x{stroke:var(--qr-x);stroke-width:var(--qr-stroke-x)}.qr-mark-o{stroke:var(--qr-o);stroke-width:var(--qr-stroke-o)}.qr-finder-ring{fill:none;stroke:var(--qr-ink);stroke-width:var(--qr-stroke-finder)}.qr-finder-core{fill:var(--qr-o)}.qr-logo-lines{fill:none;stroke:var(--qr-ink);stroke-width:var(--qr-stroke-logo)}.qr-logo-x,.qr-logo-win{fill:none;stroke:var(--qr-x);stroke-width:var(--qr-stroke-x)}.qr-logo-o{fill:none;stroke:var(--qr-o);stroke-width:var(--qr-stroke-x)}.game-symbols{display:flex;justify-content:center;gap:var(--space-2);margin-block-end:var(--space-2)}.symbol[aria-pressed=true]{background:var(--tint-ink)}.symbol[data-symbol=x][aria-pressed=true]{color:var(--x);border-color:var(--x);background:var(--tint-x)}.symbol[data-symbol=o][aria-pressed=true]{color:var(--o);border-color:var(--o);background:var(--tint-o)}.game-against,.game-lengths{margin:0;border:var(--marker) solid var(--soft);border-radius:var(--radius-marker-b);padding:var(--space-2) var(--space-2) var(--space-3);line-height:var(--leading-tight);color:var(--ink)}.game-lengths{border-radius:var(--radius-marker-c)}.game-levels{margin:0;margin-block-start:var(--space-2);border:0;padding:0}.game-levels[hidden]{display:none}.game-compact .game-against{border-color:transparent;padding:0}.game-legend{margin-inline:auto;padding-inline:var(--space-1);font-size:var(--step-1);font-weight:var(--weight-loud);font-variation-settings:var(--loud-d)}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1)}.chip{display:flex;align-items:center;gap:var(--space-1);min-block-size:var(--target);cursor:pointer;padding:var(--space-1) var(--space-1);border:var(--marker) solid transparent;border-radius:var(--radius-marker-a);accent-color:var(--chip-ink, var(--x));color:var(--chip-text, var(--ink));transition:transform var(--wobble-duration) var(--ease-bounce)}.chip:nth-child(2n){border-radius:var(--radius-marker-c);font-variation-settings:var(--talk-b)}.chip:hover{transform:rotate(var(--wobble-turn))}.chip:has(:checked){font-weight:var(--weight-strong);border-color:var(--chip-ink, var(--x));background:var(--chip-tint, var(--tint-x))}.chip:has(:focus-visible),.chip:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}.chip :focus-visible{outline:0}.chip-room{background:transparent;line-height:inherit}.chip-room:disabled{cursor:progress;color:var(--ink-3)}.chip-easy{--chip-ink: var(--win);--chip-text: var(--win-text);--chip-tint: var(--tint-win)}.chip-medium{--chip-text: var(--x)}.chip-hard{--chip-ink: var(--o);--chip-text: var(--o);--chip-tint: var(--tint-o)}.coming-games{display:flex;flex-wrap:wrap;gap:0 var(--space-2);list-style:none;padding:0}.coming{color:var(--ink-3)}.lede{font-size:var(--step-1);color:var(--ink-2)}.note>*+*{margin-block-start:var(--space-2)}.game-actions-start{justify-content:flex-start}ttt-stats{display:block}:is(ttt-stats,[data-ttt-played])>*+*{margin-block-start:var(--space-3)}.stats-opponent{display:block;font-size:var(--small);color:var(--ink-2)}.stats-label{display:none}@container not (min-width: 48rem){.stats-table,.stats-table tbody{display:block}.stats-table thead{position:absolute;clip-path:inset(100%);block-size:var(--rule-width);inline-size:var(--rule-width);overflow:hidden;white-space:nowrap}.stats-table tr:not([hidden]){display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;column-gap:var(--space-2);row-gap:var(--space-1);padding-block:var(--space-2);border-block-end:var(--ruled)}.stats-table :is(th,td){padding:0;border:0}.stats-table th[scope=row]{grid-column:1 / -1}.stats-table .num{display:flex;flex-direction:column;justify-content:space-between;text-align:start}.stats-label{display:block;font-size:var(--small);color:var(--ink-3)}}.home-title{margin-block:var(--home-title-above) var(--home-title-below);font-size:var(--step-3);text-align:center;text-wrap:balance}.nowrap{white-space:nowrap}.home-friends{position:relative;display:inline-block;color:var(--x)}.swoosh{position:absolute;inset-inline:0;inset-block-end:calc(var(--swoosh-height) * -.6);inline-size:100%;block-size:var(--swoosh-height);overflow:visible;fill:none;stroke:var(--o);stroke-width:var(--stroke-width-swoosh);stroke-linecap:round}.home-games{margin-block-start:var(--space-6)}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-2);list-style:none;padding:0;padding-block-start:var(--space-2)}@container (min-width: 48rem){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5) var(--space-3)}}.card{--card-ink: var(--x);position:relative;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-2) var(--space-3);border:var(--marker) solid var(--card-ink);border-radius:var(--radius-marker-a);background:var(--surface);transition:transform var(--wobble-duration) var(--ease-bounce)}@container (min-width: 48rem){.card{padding-inline:var(--space-3)}}.card:nth-child(5n+2){--card-ink: var(--o);border-radius:var(--radius-marker-b)}.card:nth-child(5n+3){--card-ink: var(--win);border-radius:var(--radius-marker-c)}.card:nth-child(5n+4){--card-ink: var(--violet)}.card:nth-child(5n){--card-ink: var(--ink);border-radius:var(--radius-marker-b)}.card:hover{transform:translateY(calc(-1 * var(--space-1))) rotate(var(--wobble-turn))}.card:nth-child(2n):hover{transform:translateY(calc(-1 * var(--space-1))) rotate(var(--wobble-turn-alt))}.card:has(:focus-visible){outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}.card-name{font-size:var(--step-1);font-weight:var(--weight-loud);font-variation-settings:var(--loud-b);line-height:var(--leading-tight)}@container not (min-width: 48rem){.card-name{font-size:var(--card-name-narrow)}}.card:nth-child(odd) .card-name{font-variation-settings:var(--loud-c)}.card-name a{color:var(--ink);text-decoration:none}.name-word{white-space:nowrap}.card-name a:focus-visible{outline:0}.card-name a:after{content:"";position:absolute;inset:0}.card-hook{font-size:var(--small);line-height:var(--leading-tight);color:var(--ink-2)}.card-art{inline-size:var(--doodle);max-inline-size:100%;margin-inline:0;margin-block-end:var(--space-1)}.card-art[kind=strip]{inline-size:100%}.card-art .art .grid{stroke:var(--card-ink);stroke-width:var(--doodle-stroke);vector-effect:non-scaling-stroke}.card-art .art :is(.grid.minor,.grid.row){stroke-width:var(--doodle-stroke-minor)}.card-art .art .point{fill:var(--card-ink)}.game-head{margin-block-end:var(--space-4);text-align:center}.game-head h1{font-size:var(--step-4)}.game-hook{font-size:var(--step-1);color:var(--ink-2)}.game-more{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center;margin-block-start:var(--space-5);font-size:var(--small);line-height:var(--leading-tight);color:var(--ink-3)}.game-more>a{font-size:var(--step-1);font-weight:var(--weight-strong)}.read{margin-block-start:var(--space-6);margin-inline:auto}.read-heading{font-size:var(--step-2);font-variation-settings:var(--loud-a);color:var(--x)}body{position:relative;isolation:isolate}.margin-doodles{position:absolute;inset:0;z-index:-1;inline-size:100%;block-size:100%;overflow:hidden;pointer-events:none;contain:strict}.margin-doodles mask rect{fill:var(--margin-doodle-kept)}.margin-doodles [data-wipe]{fill:none;stroke-linecap:round}.margin-doodles [data-wipe=full]{stroke:var(--margin-doodle-wiped)}.margin-doodles [data-wipe=most]{stroke:var(--margin-doodle-wiped-most)}.margin-doodles [data-wipe=some]{stroke:var(--margin-doodle-wiped-some)}.doodle-haze,.doodle-ink{fill:none;stroke-linecap:round;stroke-linejoin:round}.doodle-haze{opacity:var(--margin-doodle-haze);stroke:var(--margin-doodle-residue);stroke-width:var(--margin-doodle-stroke-haze)}.doodle-ink{opacity:var(--margin-doodle-fade);stroke-width:var(--margin-doodle-stroke)}.doodle-ink path[data-ink=ink]{stroke:var(--ink);stroke-width:var(--margin-doodle-stroke-ink)}.doodle-ink path[data-ink=x]{stroke:var(--x)}.doodle-ink path[data-ink=o]{stroke:var(--o)}.doodle-ink path[data-ink=win]{stroke:var(--win)}.doodle-ink path[data-ink=violet]{stroke:var(--violet)}.doodle-ink .doodle-dots{fill:var(--ink);stroke:none}.doodle-ink text{stroke:none;font-family:var(--font-hand);font-weight:var(--weight-loud);font-variation-settings:var(--loud-3)}.doodle-ink text[data-ink=ink]{fill:var(--ink)}.doodle-ink text[data-ink=x]{fill:var(--x)}.doodle-ink text[data-ink=o]{fill:var(--o)}.doodle-ink text[data-ink=win]{fill:var(--win)}.doodle-ink text[data-ink=violet]{fill:var(--violet)}@media print{.margin-doodles{display:none}}}@layer utilities{.visually-hidden:not(:focus):not(:active){position:absolute;clip-path:inset(100%);block-size:var(--rule-width);inline-size:var(--rule-width);overflow:hidden;white-space:nowrap}.stack{display:flex;flex-direction:column;gap:var(--space-2)}.cluster{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2)}}