:root{--bg:#000;--fg:#c8c8c8;--hi:#fff;--y:#ffff55;--c:#55ffff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 "Courier New",Courier,monospace}
.page{max-width:92ch;margin:0 auto;padding:12px}
a{color:var(--c)}
h1,h2,h3{color:var(--hi);margin:0 0 .5em;font-size:1rem}
h1{font-size:1.6rem;line-height:1.1}
h2{color:var(--y);font-size:1.15rem}
p,ul{margin:0 0 1em}
ul{padding-left:3ch;list-style:"* "}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:8px}
.tag p{margin:.3em 0 0}
.logo{text-decoration:none;color:var(--y);flex:none}
.logo pre{margin:0;line-height:1}
.logo:hover,.logo:focus-visible{color:var(--hi);outline:1px dashed var(--hi);outline-offset:3px}
.hline{overflow:hidden;white-space:nowrap;line-height:1;color:var(--c)}
.menu{display:flex;flex-wrap:wrap;gap:0 2ch;padding:4px 0;justify-content:flex-start}
.menu a{color:var(--hi);text-decoration:none}
.menu a::before{content:"[ "}.menu a::after{content:" ]"}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current]{background:var(--fg);color:var(--bg);outline:none}
main{padding:16px 0 8px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(26ch,1fr));gap:12px}
.box{border:1px solid var(--c);padding:8px 12px;margin-bottom:12px}
.box.framed{display:grid;grid-template-columns:1ch minmax(0,1fr) 1ch;border:0;padding:0;color:var(--fg)}
.box.framed>.in{padding:8px 1ch}
.box.framed>.ch{color:var(--c);line-height:1;overflow:hidden;white-space:nowrap}
.box.framed>.v{contain:size;white-space:pre}
.cols>.box{margin-bottom:0}
.screen{min-height:14em;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--y)}
footer{text-align:right;padding-top:2px}
footer p{margin:.4em 0 0}
:focus-visible{outline:1px dashed var(--hi);outline-offset:2px}
@media (max-width:600px){
  body{font-size:14px}
  h1{font-size:1.25rem}
  .logo pre{font-size:12px}
  .menu{gap:0 1.2ch}
}