@font-face{font-family:Bedstead;src:url(/fonts/bedstead.woff2)format("woff2");font-display:block}:root{--c0:#000;--c1:red;--c2:#0f0;--c3:#ff0;--c4:#00f;--c5:#f0f;--c6:#0ff;--c7:#fff;--page-bg:#111;--ui-fg:#ddd;--gutter:16px;--pad-y:16px;--gap:12px;--bar-h:44px;--bar-pad:0px;--key-h:40px;--fx-h:28px;--controls-h:calc(2 * var(--key-h) + var(--fx-h) + 12px + 2 * var(--bar-pad));--avail-w:calc(100vw - 2 * var(--gutter));--avail-h:calc(100svh - 2 * var(--pad-y) - var(--bar-h) - var(--controls-h) - 2 * var(--gap));--cell-w:min(var(--avail-w) / 40, max(var(--avail-h) / 30, 8px), 30px);--cell-h:calc(var(--cell-w) * 1.25);--font:var(--cell-h);--sx:1.33333;--sy:1;--px:1px;color-scheme:dark}@media (resolution>=2x){:root{--px:.5px}}@media (resolution>=3x){:root{--px:calc(1px / 3)}}@supports (width:round(down, 1.5px, 1px)){:root{--cell-w:round(down, min(var(--avail-w) / 40, max(var(--avail-h) / 30, 8px), 30px), var(--px))}:root.js{--cell-h:round(down, clamp(var(--cell-w) * 1.25, var(--avail-h) / 24, var(--cell-w) * 2), var(--px));--font:20px}}*{box-sizing:border-box}html,body{background:var(--page-bg);color:var(--ui-fg);margin:0;font-family:system-ui,sans-serif}main{align-items:center;gap:var(--gap);min-height:100svh;padding:var(--pad-y) var(--gutter);flex-direction:column;display:flex}.tv{width:calc(var(--cell-w) * 40);height:calc(var(--cell-h) * 24);background:var(--c0);touch-action:none;user-select:text;flex:none;overflow:hidden}.screen{width:calc(var(--font) * 24);transform:scale(var(--sx), var(--sy));transform-origin:0 0;font-family:Bedstead,monospace;font-size:var(--font);font-kerning:none;font-variant-ligatures:none;line-height:1}.r{height:var(--font);white-space:pre}.r>*{color:inherit;text-decoration:none}.dt{z-index:1;transform-origin:top;display:inline-block;position:relative;transform:scaleY(2)}.db{visibility:hidden}.f0{color:var(--c0)}.f1{color:var(--c1)}.f2{color:var(--c2)}.f3{color:var(--c3)}.f4{color:var(--c4)}.f5{color:var(--c5)}.f6{color:var(--c6)}.f7{color:var(--c7)}.b0{background:var(--c0)}.b1{background:var(--c1)}.b2{background:var(--c2)}.b3{background:var(--c3)}.b4{background:var(--c4)}.b5{background:var(--c5)}.b6{background:var(--c6)}.b7{background:var(--c7)}.screen a:hover{outline:1px solid}.bar{width:max(calc(var(--cell-w) * 40), min(100%, 20rem));padding:var(--bar-pad) 0}.topbar{height:var(--bar-h);align-items:center;gap:8px;padding-block:0;display:flex}.page-num{font-variant-numeric:tabular-nums;margin-right:auto;font-size:1.75rem}.page-num.entry{color:var(--c3)}.subnav{align-items:center;gap:4px;display:flex}.topbar .key{flex:none;min-width:44px;min-height:36px}.topbar .text-key{padding:0 12px}.sub-count{text-align:center;font-variant-numeric:tabular-nums;min-width:3.5em;font-size:1.25rem}.controls{flex-direction:column;order:1;gap:6px;margin-top:auto;display:flex}.keys{gap:4px;display:flex}.key{min-width:0;min-height:var(--key-h);color:var(--ui-fg);font:inherit;cursor:pointer;background:#222;border:1px solid #444;border-radius:4px;flex:1 1 0;justify-content:center;align-items:center;padding:0;font-size:1rem;text-decoration:none;display:inline-flex}.key:hover{background:#333}.key:focus-visible,.text-mode a:focus-visible{outline:2px solid var(--c3);outline-offset:2px}.key.wide{flex-grow:1.5}.fx{min-height:var(--fx-h)}.fx-red{background:#c00000}.fx-green{background:#00a000}.fx-yellow{background:#c0c000}.fx-blue{background:#0000c0}.key[aria-disabled=true]{opacity:.3;cursor:default}.js-only{display:none}.js .js-only{display:flex}.text-mode{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.text-mode:target,.text-on .text-mode{clip-path:none;white-space:normal;width:min(100%,40rem);height:auto;font-size:1.125rem;line-height:1.5;position:static;overflow:visible}#app:has(.text-mode:target) .tv,.text-on .tv{display:none}.text-mode h1{font-size:1.5rem}.text-mode h2{font-size:1.125rem}.text-mode .meta{color:#aaa}.text-mode a{color:var(--c6)}@media (width<=699px){:root{--gutter:4px;--pad-y:0px;--gap:8px;--bar-pad:8px}.bar{width:auto;margin-inline:calc(-1 * var(--gutter));background:#1a1a1a;align-self:stretch;padding-inline:8px}}@media (height<=500px) and (orientation:landscape){:root{--pad-y:4px;--avail-h:calc(100svh - 2 * var(--pad-y))}}
