.pf{--pf-text:var(--paper);--pf-dim:color-mix(in srgb, var(--paper) 60%, transparent);--pf-line:color-mix(in srgb, var(--paper) 28%, transparent);--pf-faint:color-mix(in srgb, var(--paper) 8%, transparent);max-width:1400px;color:var(--pf-text);font-family:var(--font-display);gap:clamp(16px,2vw,24px);margin-inline:auto;display:grid}:where(.pf) button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.frame__stage .pf button{min-height:0}.pf button:disabled{cursor:default}.pf :focus-visible{outline:2px solid var(--yellow);outline-offset:3px}.pf code,.pf pre{font-family:var(--font-mono)}.pf-eyebrow{font:400 11px / 1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pf-dim);margin:0}.pf-eyebrow code{letter-spacing:0;text-transform:none;color:var(--pf-text)}.pf-rail{border-bottom:2px solid var(--pf-text);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-bottom:12px;display:flex}.pf-rail ol{flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;display:flex}.pf-rail button{min-height:32px;font:400 13px / 1.5 var(--font-mono);color:var(--pf-dim);font-variant-numeric:tabular-nums;transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);border-bottom:2px solid #0000;padding:4px 0;position:relative}.pf-rail button:hover,.pf-rail button[aria-current]{color:var(--pf-text)}.pf-rail button[aria-current]{border-bottom-color:var(--red)}.pf-rail button[data-solved]:after{content:"";background:var(--yellow);width:5px;height:5px;position:absolute;top:5px;right:-7px}.pf-status{font:400 12px / 1.5 var(--font-mono);color:var(--pf-dim);margin:0}.pf-screen{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:clamp(20px,2.6vw,40px);min-height:clamp(560px,100svh - 200px,720px);display:grid}.pf-board{grid-template-rows:auto clamp(340px,100svh - 440px,420px) auto;align-content:start;gap:16px;min-width:0;display:grid}.pf-say{gap:10px;display:grid}.pf-say-head{flex-wrap:wrap;justify-content:space-between;gap:4px 12px;display:flex}.pf-say-status,.pf-key--board,.pf .pf-primary.pf-next--say,.pf-actions:empty{display:none}.pf-tools{flex-wrap:wrap;gap:4px 18px;display:flex}.pf .pf-hint{margin-left:auto}.pf-line{border-left:4px solid var(--blue);max-width:48ch;min-height:4.2em;font:500 clamp(18px, 1.6vw, 22px) / 1.4 var(--font-display);text-wrap:pretty;transition:border-color var(--dur-2) var(--ease);margin:0;padding-left:14px}.pf-line[data-tone=ask]{border-left-color:var(--paper)}.pf-line[data-tone=miss]{border-left-color:var(--red)}.pf-line[data-tone=done]{border-left-color:var(--yellow)}.pf-state{border:2px solid var(--pf-text);min-height:0;transition:opacity var(--dur-2) var(--ease);grid-template-rows:auto minmax(0,1fr);display:grid}.pf-state[data-loading]{opacity:.5}.pf-have{gap:10px;padding:16px 18px;display:grid}.pf-have ul{flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;display:flex}.pf-hyp{border:2px solid var(--pf-line);gap:2px;min-width:72px;padding:12px 14px 10px;display:grid;position:relative}.pf-hyp[data-new]{border-color:var(--pf-text);animation:.28s ease-out pf-arrive}.pf-hyp[data-new]:before{content:"";background:var(--yellow);height:6px;position:absolute;inset:-2px -2px auto}.pf-hyp-names{font:400 13px / 1.3 var(--font-mono);color:var(--yellow)}.pf-hyp-type{font:500 22px / 1.2 var(--font-display);letter-spacing:-.01em}.pf-hyp small{font:400 10px / 1.3 var(--font-mono);color:var(--pf-dim)}.pf-none{min-height:87px;color:var(--pf-dim);align-items:center;margin:0;font-size:16px;display:flex}.pf-need{border-top:2px solid var(--pf-text);align-content:center;gap:12px;min-width:0;padding:18px 18px 22px;display:grid}.pf-turnstile{align-items:baseline;gap:10px;display:flex}.pf-turnstile>span[aria-hidden]{font:500 20px / 1 var(--font-display);color:var(--yellow);letter-spacing:0}.pf-case{text-transform:none;letter-spacing:0;color:var(--pf-text);margin-left:auto}.pf-target{font:500 clamp(34px, 4.2vw, 64px) / 1.1 var(--font-display);letter-spacing:-.03em;overflow-wrap:anywhere;text-wrap:balance;margin:0;animation:.24s ease-out pf-swap}.pf-target--done span{color:var(--red)}.pf-queue{gap:6px;margin:4px 0 0;padding:0;list-style:none;display:grid}.pf-queue li{font:400 12px / 1.4 var(--font-mono);color:var(--pf-dim);align-items:baseline;gap:12px;display:flex}.pf-queue b{font:500 18px / 1.3 var(--font-display);color:var(--pf-text)}.pf-slot{align-content:start;gap:8px;height:150px;display:grid;overflow:hidden}.pf-slot[data-kind=error]{border-top:6px solid var(--red);background:var(--pf-faint);padding:14px 16px 12px;animation:.2s ease-out pf-swap}.pf-error{white-space:pre-wrap;max-height:76px;color:var(--pf-text);margin:0;font-size:13px;line-height:1.5;overflow:auto}.pf-slot-note{font:400 12px / 1.4 var(--font-mono);color:var(--pf-dim);margin:0}.pf-key{flex-wrap:wrap;gap:8px 24px;margin:0;padding-top:4px;display:flex}.pf-key div{align-items:baseline;gap:8px;display:flex}.pf-key dt{font:500 20px / 1 var(--font-display);color:var(--yellow)}.pf-key dd{font:400 12px / 1.4 var(--font-mono);color:var(--pf-dim);margin:0}.pf-proved{font:600 34px / 1 var(--font-display);letter-spacing:-.03em;gap:6px;margin:0;display:grid}.pf-proved>span{color:var(--red)}.pf-proved small{font:400 12px / 1.4 var(--font-mono);letter-spacing:0;color:var(--pf-dim)}.pf-offline{border:2px solid var(--pf-line);align-content:center;justify-items:start;gap:16px;padding:24px;font-size:18px;display:grid}.pf-offline button{background:var(--paper);color:var(--ink);font:400 13px / 1 var(--font-mono);padding:10px 16px}.pf-side{grid-template-rows:auto minmax(0,1fr);gap:20px;min-width:0;display:grid}.pf-moves{gap:10px;display:grid}.pf-moves ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.pf .pf-move{border:2px solid var(--pf-line);text-align:left;width:100%;transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), translate var(--dur-2) var(--ease);gap:3px;padding:10px 14px;display:grid;position:relative}.pf .pf-move code{color:var(--pf-text);font-size:15px;line-height:1.35}.pf .pf-move span{font:400 13px / 1.4 var(--font-display);color:var(--pf-dim)}.pf .pf-move:not(:disabled):hover{border-color:var(--pf-text);background:var(--pf-faint);translate:4px}.pf .pf-move[data-hint]{border-color:var(--yellow)}.pf .pf-move[data-hint]:after{content:"hint";font:400 10px / 1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);position:absolute;top:10px;right:12px}.pf .pf-move[data-pending]{border-color:var(--pf-text);background:var(--pf-faint)}.pf .pf-move:disabled:not([data-pending]){opacity:.45}.pf .pf-text-button{min-height:32px;font:400 12px / 1.4 var(--font-mono);color:var(--pf-dim);text-underline-offset:4px;align-items:center;gap:6px;text-decoration:underline;display:inline-flex}.pf .pf-text-button:not(:disabled):hover{color:var(--pf-text)}.pf .pf-text-button:disabled{opacity:.4;text-decoration:none}.pf-write{gap:6px;margin-top:4px;display:grid}.pf-write>div{gap:8px;display:flex}.pf-write input{border:2px solid var(--pf-line);min-width:0;color:var(--pf-text);font:400 15px / 1.3 var(--font-mono);background:0 0;border-radius:0;flex:1;padding:9px 12px}.pf-write input:focus{border-color:var(--pf-text);outline:none}.pf-write input::placeholder{color:color-mix(in srgb, var(--paper) 35%, transparent)}.pf-write button{background:var(--paper);color:var(--ink);font:400 13px / 1 var(--font-mono);padding:0 16px}.pf-write button:disabled{opacity:.35}.pf-proof{border:2px solid var(--pf-line);grid-template-rows:auto minmax(0,1fr) auto;gap:10px;min-height:0;padding:14px 16px;display:grid}.pf-proof pre{min-height:96px;margin:0;font-size:13px;line-height:1.6;overflow:auto}.pf-code-head{white-space:pre-wrap;color:var(--pf-dim);display:block}.pf-code-line{white-space:pre;display:block}.pf-code-line[data-last]{box-shadow:inset 3px 0 var(--yellow)}.pf-code-line[data-pending]{opacity:.5}.pf-code-line[data-failed]{color:var(--red);text-decoration:line-through}.pf-actions{flex-wrap:wrap;align-items:center;gap:8px 18px;display:flex}.pf .pf-primary{background:var(--yellow);color:var(--ink);font:600 16px / 1 var(--font-display);align-items:center;gap:10px;padding:10px 16px;animation:.24s ease-out pf-swap;display:inline-flex}@keyframes pf-swap{0%{opacity:0}}@keyframes pf-arrive{0%{opacity:0;translate:0 8px}}@media (max-width:900px){.pf{gap:12px}.pf-rail{padding-bottom:6px}.pf-rail ol{flex-wrap:nowrap;justify-content:space-between;gap:0;width:100%}.pf-rail button{min-width:32px;min-height:40px}.pf-status,.pf .pf-primary.pf-next--side,.pf-slot[data-kind=key],.pf-slot[data-kind=done]{display:none}.pf-screen{flex-direction:column;gap:12px;min-height:0;display:flex}.pf-board,.pf-side{display:contents}.pf-state,.pf-offline{order:1}.pf-say{order:2;gap:8px}.pf-moves{order:3;gap:8px}.pf-slot{order:4;height:auto;min-height:0}.pf-proof{order:5}.pf-say-status{text-transform:none;letter-spacing:0;display:block}.pf .pf-primary.pf-next--say{justify-self:start;display:inline-flex}.pf-line{min-height:4.05em;font-size:16px;line-height:1.35}.pf-have{gap:6px;padding:10px 12px}.pf-have ul{gap:6px}.pf-hyp{min-width:52px;padding:7px 10px 6px}.pf-hyp-names{font-size:12px}.pf-hyp-type{font-size:17px}.pf-none{min-height:52px}.pf-need{align-content:start;gap:8px;min-height:150px;padding:10px 12px 12px}.pf-target{font-size:clamp(28px,8.4vw,40px)}.pf-queue b{font-size:16px}.pf-key--board{gap:4px 14px;margin-top:auto;padding-top:6px;display:flex}.pf-key--board dt{font-size:15px}.pf-key--board dd{font-size:11px}.pf-slot[data-kind=error]{padding:10px 12px}.pf-error{max-height:96px;font-size:12px}.pf-moves ul{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:6px}.pf .pf-move{align-content:start;gap:2px;height:100%;padding:8px 10px}.pf .pf-move code{font-size:13px}.pf .pf-move span{font-size:12px;line-height:1.3}.pf .pf-move:not(:disabled):hover{translate:none}.pf-tools .pf-text-button{min-height:40px}}@media (prefers-reduced-motion:reduce){.pf-target,.pf-hyp[data-new],.pf-slot[data-kind=error],.pf .pf-primary{animation:none}.pf .pf-move{transition:none}}.pf-notes h3{font:600 18px / 1.3 var(--font-display);margin:28px 0 8px}.pf-notes p{max-width:68ch;margin:0}.pf-notes p+p{margin-top:12px}.pf-notes code{font:400 .88em / 1 var(--font-mono)}