@layer reset,tokens,base,components,board,hud,shell,screens,motion;@layer board{.board-shell{--active: var(--rule-edge);position:relative;width:var(--board-px, 352px);height:var(--board-px, 352px);flex:none;margin-inline:auto}.board-shell[data-mover=x]{--active: var(--x)}.board-shell[data-mover=o]{--active: var(--o)}.board-shell.low{--active: var(--warn)}.board-shell.paused{--active: var(--line-strong)}.board-shell[data-me=x],.loupe[data-me=x]{--me-wash: var(--x-wash)}.board-shell[data-me=o],.loupe[data-me=o]{--me-wash: var(--o-wash)}.clock{position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--clock-track);pointer-events:none}.clock .seg{position:absolute;display:block;background:var(--active);transition:background-color .2s}.clock .tr{top:0;left:50%;width:50%;height:3px}.clock .r{top:0;right:0;width:3px;height:100%}.clock .b{bottom:0;left:0;width:100%;height:3px}.clock .l{top:0;left:0;width:3px;height:100%}.clock .tl{top:0;left:0;width:50%;height:3px}.board{position:absolute;inset:3px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;contain:layout paint;outline:none}.no-clock .board{inset:0}.art{display:block;width:100%;height:100%;overflow:visible}.paper{fill:var(--paper)}.grid{fill:none;stroke:var(--rule);stroke-width:var(--hair, 1px);vector-effect:non-scaling-stroke;shape-rendering:crispEdges}.dot{fill:var(--rule-edge)}.aim{fill:var(--me-wash, var(--x-wash))}.hl rect{fill:var(--hl);transform-box:fill-box;transform-origin:0 50%}.hl rect.swipe{animation:hl-in .16s var(--ease-swipe) both;animation-delay:var(--d, 0ms)}.ghost{opacity:.4;pointer-events:none}.ghost.mouse{opacity:.3}.ghost.pinned{opacity:.55}.ghost.keyboard{opacity:.4}.ink-rest,.ink-win{transition:opacity .3s var(--ease-swipe)}.dim-rest .ink-rest{opacity:.42}.draw-end .ink-rest,.draw-end .ink-win{opacity:.7}.mark{fill:none;stroke-linecap:round;stroke-linejoin:round}.mark.x{stroke:var(--x)}.mark.o{stroke:var(--o)}.mark.pencil{stroke:var(--pencil);opacity:.7}.mark path{stroke-dasharray:1 2;stroke-dashoffset:0}.mark.fresh path{animation:draw .22s var(--ease-ink) both;animation-delay:var(--d, 0ms)}.mark.x.fresh path{animation-duration:.11s;animation-timing-function:var(--ease-ink-fast)}.mark.x.fresh path+path{animation-delay:calc(var(--d, 0ms) + .15s)}.mark.erase path{animation:erase .16s var(--ease-exit) both;animation-delay:var(--d, 0ms)}.mark.x.erase path:first-child{animation-delay:calc(var(--d, 0ms) + 80ms)}.mk.wiggle{animation:wiggle 40ms ease-in-out 4 alternate}@keyframes erase{0%{stroke-dashoffset:0}to{stroke-dashoffset:1.01}}.move-no{font:600 .28px var(--font-num);fill:var(--pencil)}.strike{fill:none;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1.01}.strike.x{stroke:var(--x)}.strike.o{stroke:var(--o)}.strike.on{animation:draw var(--dur-strike) var(--ease-strike) both}.strike.done{stroke-dashoffset:0}.pencil-line{fill:none;stroke:var(--pencil);stroke-linecap:round;stroke-linejoin:round}.pencil-line.draw{stroke-dasharray:1 2;animation:draw .3s var(--ease-swipe) both}.refused-g{transition:opacity .4s}.refused-g.quiet-rec{opacity:.3}.refused{fill:none;stroke:var(--pencil);stroke-linecap:round;stroke-dasharray:.18 .12}.refused.draw{animation:fade-in .3s var(--ease-swipe) both}.pencil-c{fill:none;stroke:var(--pencil)}.hint-c{fill:none;stroke:var(--pencil);stroke-dasharray:.12 .1}.hint-c.out{transition:opacity .16s;opacity:0}.pin-sq{fill:none;stroke:var(--pencil);stroke-dasharray:1 2;animation:draw .12s var(--ease-swipe) both}.focus-sq{fill:none;stroke:var(--ink)}.arrival{fill:none;transform-box:fill-box;transform-origin:center;animation:arrive .32s var(--ease-swipe) both}.arrival.x{stroke:var(--x)}.arrival.o{stroke:var(--o)}@keyframes arrive{0%{transform:scale(.55);opacity:.6}to{transform:scale(1);opacity:0}}.cells{position:absolute;inset:0;display:grid;grid-template-rows:repeat(var(--n, 15),1fr);pointer-events:none}.cells>[role=row]{display:grid;grid-template-columns:repeat(var(--n, 15),1fr)}.cells [role=gridcell]{outline:none}.loupe{position:fixed;left:0;top:0;z-index:70;width:136px;height:136px;border-radius:50%;overflow:hidden;pointer-events:none;background:var(--paper-raised);box-shadow:0 0 0 1.5px var(--ink),var(--lift)}.loupe svg{width:100%;height:100%}.loupe-sq{fill:none;stroke:var(--pencil)}.thumb{display:block;border-radius:3px;outline:1px solid var(--line);outline-offset:-1px}.thumb .t-paper{fill:var(--paper)}.thumb .tx{fill:none;stroke:var(--x)}.thumb .to{fill:none;stroke:var(--o)}.thumb .t-strike.x{stroke:var(--x)}.thumb .t-strike.o{stroke:var(--o)}.page-fly{position:fixed;z-index:30;pointer-events:none;transform-origin:center}.page-fly svg{width:100%;height:100%;overflow:visible}}@layer hud{.pips{display:flex;align-items:center;justify-content:center;gap:5px;min-width:12px}.pip{width:7px;height:7px;flex:none;border-radius:50%;display:block}.pip.x{background:var(--x)}.pip.o{background:var(--o)}.pip.d{box-shadow:inset 0 0 0 1.5px var(--pencil-soft)}.pip.now{box-shadow:inset 0 0 0 1.5px var(--line-strong)}.pip.pop{animation:pop .3s var(--spring-pop) both}.pip.fade{animation:fade-in .12s ease-out both}.pips .more{margin-right:2px;font:600 .75rem/1rem var(--font-print);color:var(--pencil-soft)}@keyframes pop{0%{transform:scale(0)}}.digits{--dh: 32px;display:flex;align-items:center}.dgrp{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:calc(var(--dh) * .62);height:var(--dh);transition:color .2s}.dgrp.right{justify-content:flex-start}.dgrp.lead{color:var(--ink)}.dgrp.trail{color:var(--pencil-soft)}.dg{flex:none;overflow:visible}.digits .dg,.digits .dg-gap{width:calc(var(--dh) * .62);height:var(--dh)}.digits .dash-svg{width:calc(var(--dh) * .5625);height:var(--dh)}.dg path{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:0}.dg.write path{animation:draw .22s var(--ease-ink) both}.dg.write path:first-child:not(:last-child){animation-duration:.14s}.dg.write path+path{animation-duration:.1s;animation-delay:.18s}.dg-gap{display:block;flex:none}.dash-svg{flex:none}.dash-svg path{fill:none;stroke:var(--pencil);stroke-width:2.2;stroke-linecap:round}.dgrp .old{position:absolute;inset:0;display:flex;align-items:center;justify-content:inherit}.dgrp .old.leave{opacity:0;transform:translateY(-4px);transition:opacity .14s,transform .14s}.dgrp .strk{position:absolute;left:-10%;right:-10%;top:30%;width:120%;height:40%;overflow:visible;pointer-events:none}.dgrp .strk path{fill:none;stroke:var(--pencil);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 2;animation:draw .12s var(--ease-swipe) both}.dgrp .circ{position:absolute;left:50%;top:50%;width:calc(var(--dh) * 1.25);height:calc(var(--dh) * 1.25);translate:-50% -50%;overflow:visible;pointer-events:none;color:var(--ink)}.dgrp .circ path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1 2;animation:draw .3s var(--ease-ink) both}.tally{display:inline-flex;gap:4px;min-height:12px;color:var(--ink)}.tally[data-ink=x]{color:var(--x)}.tally[data-ink=o]{color:var(--o)}.tally svg{width:12px;height:12px;overflow:visible}.tally path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}}@layer screens{.resume-card{padding:14px 14px 14px 16px;border-radius:var(--r-l);background:var(--paper-raised);box-shadow:var(--e-1)}.resume-row{display:flex;align-items:center;gap:12px}.resume-text{flex:1;min-width:0;font:600 .9375rem/1.25rem var(--font-print)}.resume-text .num{font-family:var(--font-num)}.resume-msg:empty{display:none}.resume-msg{margin-top:8px}.resume-msg .info-line{margin-top:0}.resume-help{display:flex;align-items:baseline;margin:0;font:400 .875rem/1.25rem var(--font-print);color:var(--pencil)}.session-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;border-radius:var(--r-l);background:var(--paper-raised);box-shadow:var(--e-1)}.session-card .s-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-6px -10px -6px 0}.session-card .s-date{margin:0;color:var(--pencil)}.session-card .s-top.titled{align-items:flex-start}.session-card .s-top.titled .s-title{flex:1;min-width:0;padding-top:8px}.session-card .s-title{font:800 1.375rem/1.75rem var(--font-print);text-wrap:balance}.session-card .s-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}.session-card .s-p{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;font:600 .875rem/1.125rem var(--font-print)}.session-card .s-p.them{align-items:flex-end;text-align:right}.session-card .s-p .nm{max-width:100%;max-height:2.25rem;overflow:hidden;overflow-wrap:break-word;text-wrap:balance}.session-card .digits{--dh: 56px}.session-card .s-thumbs{display:flex;align-items:flex-end;gap:6px}.session-card .s-thumbs .t{flex:0 1 44px;min-width:0}.session-card .s-thumbs .t.big{flex:0 0 56px}.session-card .s-thumbs svg{width:100%;height:auto}.session-card .s-line{margin:2px 0 0;color:var(--pencil)}.session-card .s-h2h,.session-card .s-rating{margin:-4px 0 0}.session-card .s-actions{display:flex;gap:10px;margin-top:4px}.session-card .s-err{margin-top:0}.session-card .thumb{outline:1px solid var(--line);outline-offset:-1px}.session-card .s-p .av{--av: 36px}@media(max-width:599px){.session-card{position:relative;gap:8px;padding:12px 14px 14px}.session-card .s-close{position:absolute;top:0;right:0}.session-card .s-top{min-height:22px;margin:0;padding-right:32px}.session-card .s-top.titled .s-title{padding-top:0}.session-card .s-top:not(.titled){display:contents}.session-card .s-top:not(.titled) .s-date{display:none}.session-card>.s-title{padding-right:32px}.session-card .s-title{font-size:1.0625rem;line-height:1.375rem}.session-card .s-score{gap:6px}.session-card .s-p{flex-direction:row;align-items:center;gap:8px}.session-card .s-p.them{flex-direction:row-reverse;align-items:center}.session-card .s-p .av{--av: 28px;flex:none}.session-card .s-p .nm{min-width:0}.session-card .tally,.session-card .s-thumbs{display:none}.session-card .digits{--dh: 36px}.session-card .s-line{margin:0}.session-card .s-h2h,.session-card .s-rating{margin:-6px 0 0}.session-card .s-actions{margin-top:2px}.session-card .s-actions .btn{min-height:44px}.session-card .s-actions .btn>.face{height:41px;font-size:.9375rem}}@media(min-width:600px)and (max-width:959px){.session-card{max-width:560px}}}