.kn{--kn-dim:color-mix(in srgb, var(--paper) 62%, transparent);--kn-line:color-mix(in srgb, var(--paper) 34%, transparent);--kn-rule:color-mix(in srgb, var(--paper) 20%, transparent);--kn-faint:color-mix(in srgb, var(--paper) 8%, transparent);--kn-pad:24px;--kn-cell:clamp(22px, 2.6cqw, 32px);--kn-move:.24s;border:2px solid var(--kn-rule);max-width:1320px;min-height:clamp(540px,100svh - 210px,680px);color:var(--paper);font-family:var(--font-display);grid-template-columns:minmax(300px,360px) minmax(0,1fr);margin-inline:auto;display:grid}.kn :focus-visible{outline:2px solid var(--yellow);outline-offset:3px}.kn-words{min-width:0;padding:22px var(--kn-pad);border-right:2px solid var(--kn-rule);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;align-content:start;gap:12px;display:grid}.kn-eyebrow{font:400 11px / 1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--kn-dim);justify-content:space-between;align-items:center;gap:12px;margin:0;display:flex}.kn-steps{grid-template-columns:repeat(9,14px);gap:4px;display:grid}.kn-steps span{background:var(--kn-rule);height:3px}.kn-steps span[data-on]{background:var(--paper)}.kn-title{min-height:2.3em;font:600 clamp(22px, 1.9vw, 27px) / 1.15 var(--font-display);letter-spacing:-.015em;text-wrap:balance;margin:0}.kn-body{font:400 16px / 1.5 var(--font-display);text-wrap:pretty;margin:0}.kn-note{font:400 12px / 1.5 var(--font-mono);color:var(--kn-dim);text-wrap:pretty;margin:0}.kn-controls{grid-row:6;gap:14px;display:grid}.kn-chips{grid-template-columns:1fr 1fr;gap:8px;display:grid}.kn-chip,.kn-back,.kn-go,.kn-link{font-family:var(--font-display);cursor:pointer}.kn-chip{border:2px solid var(--kn-line);min-height:40px;color:var(--paper);text-align:left;background:0 0;padding:6px 10px}.kn-chip[aria-pressed=true]{border-color:var(--yellow);background:var(--yellow);color:var(--ink)}.kn-moves{grid-template-columns:auto minmax(0,1fr);gap:8px;display:grid}.kn-back{border:2px solid var(--kn-line);min-width:76px;color:var(--paper);background:0 0;grid-column:1;padding:0 14px}.kn-go{border:2px solid var(--paper);background:var(--paper);color:var(--ink);grid-column:2;padding:0 16px;font-weight:600}.kn-go:disabled{border-color:var(--kn-rule);color:var(--kn-dim);cursor:default;background:0 0}.kn-link{color:var(--paper);text-underline-offset:3px;background:0 0;border:0;padding:0;text-decoration:underline}.kn-board{min-width:0;padding:22px var(--kn-pad);align-items:center;display:grid;container-type:inline-size}.kn-desk{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,4cqw,44px);display:grid}.kn-pad{gap:8px;width:clamp(200px,38cqw,300px);display:grid}.kn-pad__canvas{aspect-ratio:1;border:2px solid var(--kn-line);background:color-mix(in srgb, var(--ink) 55%, transparent);touch-action:none;cursor:crosshair;width:100%;display:block}.kn-pad__foot{font:400 11px / 1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--kn-dim);justify-content:space-between;display:flex}.kn-pad__foot .kn-link{font:400 11px / 1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;min-height:0}.kn-readout{grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px 24px;display:grid}.kn-readout__name,.kn-answer__name,.kn-card__name{font:600 18px / 1.2 var(--font-display)}.kn-readout__name{grid-column:1/-1}.kn-readout__big{width:1.2ch;font:600 clamp(64px, 9cqw, 112px) / .9 var(--font-display);text-align:center;font-variant-numeric:tabular-nums;grid-area:2/1}.kn-lamps{flex-wrap:wrap;align-items:flex-start;gap:14px;display:flex}.kn-digits{grid-template-columns:repeat(10, var(--kn-cell));gap:3px;display:grid}.kn-digit{justify-items:center;gap:4px;display:grid}.kn-digit__cell{width:var(--kn-cell);height:var(--kn-cell);border:1px solid var(--kn-rule);background:color-mix(in srgb, var(--paper) calc(var(--p) * 100%), transparent);transition:background-color var(--kn-move) ease-out}.kn-digit[data-pick] .kn-digit__cell{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}.kn-digit__label{font:400 11px / 1 var(--font-mono);color:var(--kn-dim)}.kn-digit[data-pick] .kn-digit__label{color:var(--paper)}.kn-spare{height:var(--kn-cell);align-items:center;gap:6px;display:flex}.kn-shape{width:22px;height:22px}.kn-shape rect,.kn-shape circle,.kn-shape polygon{transition:opacity var(--kn-move) ease-out}.kn-shape--square rect{fill:var(--red)}.kn-shape--circle circle{fill:var(--blue)}.kn-shape--triangle polygon{fill:var(--yellow)}.kn-answers{gap:18px;display:grid}.kn-answer{gap:8px;display:grid}.kn-bar{font:400 11px / 1.3 var(--font-mono);letter-spacing:.06em;color:var(--kn-dim);grid-template-columns:minmax(84px,max-content) minmax(0,1fr) 4ch;align-items:center;gap:10px;display:grid}.kn-bar__label{text-transform:uppercase}.kn-bar__track{background:var(--kn-faint);height:6px;overflow:hidden}.kn-bar__fill{transform-origin:0;background:var(--paper);height:100%;transition:transform var(--kn-move) ease-out;display:block}.kn-bar[data-tone=lie] .kn-bar__fill{background:var(--red)}.kn-bar[data-tone=read] .kn-bar__fill{background:var(--blue)}.kn-bar__value{text-align:right;color:var(--paper);font-variant-numeric:tabular-nums}.kn-tree{justify-items:center;gap:0;display:grid}.kn-root{border:2px solid var(--kn-line);grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:center;gap:8px 18px;padding:12px 16px;display:grid;position:relative}.kn-root .kn-card__name{grid-column:1}.kn-root .kn-spare{grid-area:2/1}.kn-root:after{content:"";background:var(--kn-line);width:2px;height:22px;margin-left:-1px;position:absolute;top:100%;left:50%}.kn-kids{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin-top:44px;display:grid;position:relative}.kn-kids:before{content:"";background:var(--kn-line);height:2px;position:absolute;top:-22px;left:calc(16.6667% - 5.33333px);right:calc(16.6667% - 5.33333px)}.kn-card{border:2px solid var(--kn-line);min-width:0;color:var(--paper);text-align:left;background:0 0;align-content:start;gap:10px;padding:14px;display:grid;position:relative;container-type:inline-size}.kn-kids .kn-card:before{content:"";background:var(--kn-line);width:2px;height:22px;margin-left:-1px;position:absolute;bottom:100%;left:50%}.kn-card[data-picked]{border-color:var(--yellow)}.kn-card__how{min-height:4.2em;font:400 14px / 1.4 var(--font-display);color:var(--kn-dim);text-wrap:pretty}.kn-tile{image-rendering:pixelated;display:block}.kn-tile--static{border:2px solid var(--kn-line);background:var(--ink);grid-area:1/2/3;width:84px;height:84px}.kn-lineup{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:14px;display:grid}[data-shot=insides] .kn-lineup{grid-template-columns:repeat(5,minmax(0,1fr))}.kn-suspect{cursor:pointer;font:inherit}.kn-suspect:disabled{cursor:default}.kn-suspect[aria-pressed=true]{border-color:var(--yellow)}.kn-suspect[data-stolen]{border-color:var(--red)}.kn-suspect--parent{border-style:dashed}.kn-suspect__letter{font:600 36px / 1 var(--font-display)}.kn-suspect--parent .kn-suspect__letter{font-size:22px;line-height:36px}.kn-gauge{gap:6px;display:grid}.kn-gauge__track{background:var(--kn-faint);height:22px;position:relative;container-type:inline-size}.kn-gauge__zero,.kn-gauge__line{background:var(--kn-line);width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.kn-gauge__line{background:var(--yellow)}.kn-gauge__needle{background:var(--paper);width:4px;transition:transform var(--kn-move) ease-out, opacity var(--kn-move) ease-out;margin-left:-2px;position:absolute;top:-3px;bottom:-3px;left:0}.kn-gauge[data-family] .kn-gauge__needle{background:var(--red)}.kn-gauge__value{font:400 12px / 1.3 var(--font-mono);font-variant-numeric:tabular-nums}.kn-insides{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;display:grid}.kn-tile--filter{aspect-ratio:1;background:var(--kn-faint);width:100%}.kn-map{gap:10px;margin:0;display:grid;container-type:inline-size}.kn-map__readout{min-height:2.8em;font:400 12px / 1.4 var(--font-mono);gap:2px;margin:0;display:grid}.kn-map__readout span:last-child{color:var(--kn-dim)}.kn-map__box{height:clamp(220px,34cqw,360px);position:relative}.kn-map__plot{position:absolute;inset:0;overflow:visible}.kn-map__split{stroke:var(--kn-rule);stroke-width:1px;stroke-dasharray:2 4}.kn-map__capable{fill:var(--kn-faint)}.kn-map__line{stroke:var(--yellow);stroke-width:2px;stroke-dasharray:6 4}.kn-map__zero{stroke:var(--kn-rule);stroke-width:1px}.kn-map__tick{font:400 11px var(--font-mono);fill:var(--kn-dim)}.kn-map__point{cursor:pointer;outline:none}.kn-map__point line{stroke:var(--kn-rule);stroke-width:2px}.kn-map__point circle,.kn-map__point rect,.kn-map__point polygon{stroke-width:2px;fill:none;transition:stroke-width var(--kn-move) ease-out}.kn-map__point[data-family=descendant] circle{fill:var(--paper);stroke:var(--paper)}.kn-map__point[data-family=imitator] rect{stroke:var(--blue)}.kn-map__point[data-family=stranger] polygon{stroke:var(--yellow)}.kn-map__point[data-family=reborn] circle{stroke:var(--red)}.kn-map__point[data-active] circle,.kn-map__point[data-active] rect,.kn-map__point[data-active] polygon,.kn-map__point:focus-visible circle,.kn-map__point:focus-visible rect,.kn-map__point:focus-visible polygon{stroke-width:4px}.kn-map__point[data-active] line{stroke:var(--kn-dim)}.kn-map__legend{font:400 11px / 1.3 var(--font-mono);letter-spacing:.06em;color:var(--kn-dim);flex-wrap:wrap;gap:6px 16px;display:flex}.kn-map__legend span:before{content:"";vertical-align:-1px;border:2px solid;width:10px;height:10px;margin-right:6px;display:inline-block}.kn-map__legend [data-family=descendant]:before{background:var(--paper);border-color:var(--paper);border-radius:50%}.kn-map__legend [data-family=imitator]:before{border-color:var(--blue)}.kn-map__legend [data-family=stranger]:before{background:var(--yellow);clip-path:polygon(50% 0,100% 100%,0 100%);border:0}.kn-map__legend [data-family=reborn]:before{border-color:var(--red);border-radius:50%}.kn-map__legend .kn-map__key-line:before{border-style:dashed;border-width:2px 0 0;border-color:var(--yellow);vertical-align:3px;height:0}.kn-map__legend .kn-map__key-capable:before{background:var(--kn-faint);border:0}@container (max-width:250px){.kn-bar{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) 4ch;gap:4px 8px}.kn-bar__label{grid-column:1/-1}}.kn-trace{border-bottom:1px solid var(--kn-rule);width:100%;height:120px;display:block;overflow:visible}.kn-trace__zero,.kn-trace__line,.kn-trace__path{vector-effect:non-scaling-stroke;fill:none}.kn-trace__zero{stroke:var(--kn-rule);stroke-width:1px}.kn-trace__line{stroke:var(--yellow);stroke-width:1.5px;stroke-dasharray:4 3}.kn-trace__path{stroke:var(--paper);stroke-width:2px;stroke-linejoin:round}.kn-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.kn-chips{border:0;min-inline-size:0;margin:0;padding:0}.kn-map:has(input:focus-visible) .kn-map__box{outline:2px solid var(--yellow);outline-offset:4px}[data-shot=insides] .kn-suspect .kn-bar{display:none}
@media (max-width:900px){.kn{--kn-pad:14px;--kn-cell:clamp(11px, 3.7cqw, 15px);border-width:0;grid-template:"eyebrow""title"58px"body"96px"board"minmax(0,1fr)"note""controls"/minmax(0,1fr);height:calc(100svh - 96px);min-height:600px;max-height:820px}.kn-words{display:contents}.kn-eyebrow{padding:12px var(--kn-pad) 0;grid-area:eyebrow}.kn-title{min-height:0;padding:8px var(--kn-pad) 0;grid-area:title;font-size:21px}.kn-body{min-height:0;padding:6px var(--kn-pad) 0;grid-area:body;font-size:15px;line-height:1.45}.kn-note{min-height:3em;padding:0 var(--kn-pad);grid-area:note}.kn-controls{padding:10px var(--kn-pad) 12px;grid-area:controls}.kn-board{padding:10px var(--kn-pad);grid-area:board;overflow:hidden}.kn-desk{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}.kn-pad{width:100%}.kn-readout{grid-template-columns:minmax(0,1fr);gap:8px}.kn-readout__big{text-align:left;grid-area:auto/1;font-size:64px}.kn-readout__name,.kn-answer__name,.kn-card__name{font-size:15px}.kn-lamps{gap:8px}.kn-digits{gap:2px}.kn-digit__label{font-size:9px}.kn-shape{width:15px;height:15px}.kn-answers{gap:10px}.kn-bar{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) 4ch;gap:3px 6px;font-size:10px}.kn-bar__label{grid-column:1/-1}.kn-answer .kn-bar{display:none}.kn-root{gap:6px 12px;padding:8px 10px}.kn-tile--static{width:56px;height:56px}.kn-kids{gap:8px;margin-top:32px}.kn-kids:before{top:-16px;left:calc(16.6667% - 2.66667px);right:calc(16.6667% - 2.66667px)}.kn-root:after,.kn-kids .kn-card:before{height:16px}.kn-card{gap:8px;padding:8px}.kn-card__how{display:none}.kn-lineup,[data-shot=insides] .kn-lineup{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}[data-shot=insides] .kn-suspect--parent{display:none}[data-shot=insides] .kn-card__how{min-height:0;font-size:11px;line-height:1.3;display:block}[data-shot=insides] .kn-gauge,[data-shot=insides] .kn-bar{display:none}.kn-trace{height:44px}.kn-suspect__letter{font-size:24px}.kn-insides{grid-template-columns:repeat(9,minmax(0,1fr));gap:2px}.kn-chips{gap:6px}.kn-chip{min-height:36px}.kn-map__readout{min-height:4.2em}.kn-map__legend{gap:4px 10px;font-size:10px}}
.kn-notes-table{border-collapse:collapse;width:100%;font:400 13px / 1.4 var(--font-mono);margin:12px 0 8px}.kn-notes-table th,.kn-notes-table td{border-bottom:1px solid color-mix(in srgb, currentColor 18%, transparent);text-align:left;vertical-align:top;padding:6px 8px 6px 0}.kn-notes-table td:last-child,.kn-notes-table th:last-child{text-align:right;white-space:nowrap}.kn-hash{font:400 12px / 1.4 var(--font-mono);overflow-wrap:anywhere}
