/* Dark is the default look. Light follows the visitor's own setting, and
   data-theme="dark" on <html> pins dark (the share image is rendered that way). */
:root{
  --desk:#050505; --fg:#ececea; --mute:#a3a3a3; --dim:#5f5f5f; --soft:#cfcfcc;
  --win:#0b0b0c; --green:#32cf75; --ink:#32cf75; --shadow:#000; --scrim:rgba(0,0,0,.4);
  --term:#000; --term-fg:#32cf75; --term-me:#ececea; --term-err:#e9c46a; --term-hint:#1b8a4b; --term-rule:#1f1f1f;
  --pen:#32cf75; --turtle:#f2f2f0;
  --dither:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23171717'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23171717'/%3E%3C/svg%3E");
  --ui:"Jersey 10", ui-monospace, Menlo, monospace;
  --mono:"VT323", ui-monospace, Menlo, monospace;
  --bar:28px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --desk:#dcdcd8; --fg:#0b0b0c; --mute:#5a5a5a; --dim:#a3a3a3; --soft:#262626;
    --win:#fff; --ink:#157a42; --shadow:#0b0b0c; --scrim:rgba(0,0,0,.2);
    --term:#fff; --term-fg:#157a42; --term-me:#0b0b0c; --term-err:#8a5a00; --term-hint:#4a8462; --term-rule:#d6d6d2;
    --pen:#157a42; --turtle:#0b0b0c;
    --edge:drop-shadow(3px 0 0 #0b0b0c) drop-shadow(-3px 0 0 #0b0b0c) drop-shadow(0 3px 0 #0b0b0c) drop-shadow(0 -3px 0 #0b0b0c);
    --dither:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23c2c2bd'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23c2c2bd'/%3E%3C/svg%3E");
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{background:var(--desk);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--fg);font:400 16px/1.4 var(--ui);
  background-color:var(--desk);
  background-image:var(--dither);
  background-size:4px 4px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--green);color:#000}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button{font:inherit;color:inherit}
img{image-rendering:pixelated;image-rendering:crisp-edges}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* menu bar */
.menubar{
  position:sticky;top:0;z-index:1000;height:calc(var(--bar) + 1px);
  display:flex;align-items:stretch;padding:0 6px;
  background:var(--win);border-bottom:1px solid var(--fg);
  font:400 20px/var(--bar) var(--ui);letter-spacing:.02em;user-select:none;-webkit-user-select:none;
}
.menu{position:relative;display:flex}
.mt{height:var(--bar);padding:0 10px;background:none;border:0;color:var(--fg);font:inherit;line-height:var(--bar)}
.mt[aria-expanded="true"]{background:var(--green);color:#000}
.mt-logo{padding:0 12px;display:flex;align-items:center}
.mt-logo img{display:block;width:16px;height:16px}
.mt-logo[aria-expanded="true"] img{filter:brightness(0)}
.dd{
  position:absolute;top:calc(var(--bar) + 1px);left:0;min-width:210px;padding:4px 0;
  background:var(--win);border:1px solid var(--fg);box-shadow:3px 3px 0 var(--shadow);z-index:1001;
}
.dd[hidden]{display:none}
.dd button,.dd a{
  display:block;text-decoration:none;box-sizing:border-box;width:100%;text-align:left;background:none;border:0;
  color:var(--fg);font:400 20px/1 var(--ui);letter-spacing:.02em;padding:6px 20px;white-space:nowrap;
}
.dd button:hover:not(:disabled),.dd button:focus-visible,.dd a:hover,.dd a:focus-visible{background:var(--green);color:#000;outline:0}
.dd button:disabled{color:var(--dim)}
.dd hr{border:0;border-top:1px dotted var(--dim);margin:4px 0}
.mb-right{margin-left:auto;display:flex;gap:18px;padding:0 8px;white-space:nowrap}
.mb-app{color:var(--fg)}

/* desktop */
.desk{position:relative;padding:16px 12px 48px}
.icons{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;margin:0 auto 10px;max-width:560px}
.icon{
  text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  width:84px;padding:6px 2px;background:none;border:0;color:var(--fg);
}
.icon img{width:48px;height:48px;display:block;filter:var(--edge,none)}
.icon span{font:400 20px/1.1 var(--ui);letter-spacing:.02em;background:var(--win);color:var(--fg);padding:1px 5px;white-space:nowrap}
.icon:focus-visible{outline:0}
.icon:focus-visible span,.icon.sel span{background:var(--green);color:#000}
.icon.sel img{filter:var(--edge,) brightness(.5)}

/* windows */
.win{
  position:relative;margin:0 auto 22px;max-width:560px;
  background:var(--win);border:1px solid var(--fg);box-shadow:3px 3px 0 var(--shadow);
  scroll-margin-top:44px;
}
.win[hidden]{display:none}
.tb{
  position:relative;height:22px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--fg);user-select:none;-webkit-user-select:none;touch-action:none;
}
.tb::before{
  content:"";position:absolute;left:3px;right:3px;top:5px;height:11px;
  background:repeating-linear-gradient(to bottom,var(--fg) 0 1px,transparent 1px 2px);
}
.tb h2{position:relative;margin:0;padding:0 10px;background:var(--win);font:400 20px/22px var(--ui);letter-spacing:.02em;color:var(--fg)}
.close{
  position:absolute;left:9px;top:4px;width:14px;height:14px;padding:0;
  background:var(--win);border:1px solid var(--fg);box-shadow:0 0 0 2px var(--win);
}
.close:active{background:var(--green);border-color:var(--green)}

.body{padding:22px 24px 24px}
.body h1{font:400 40px/1 var(--ui);letter-spacing:.01em;margin:0 0 6px}
.body p{font:400 23px/1.15 var(--mono);color:var(--soft);margin:0 0 12px;max-width:44ch}
.body p.role{font:400 20px/1.2 var(--ui);letter-spacing:.02em;color:var(--mute);margin:0 0 22px}
.body p.big{font:400 40px/1.05 var(--ui);letter-spacing:.01em;color:var(--fg);margin:0 0 20px;max-width:none}
.body p.lead{font:400 30px/1.1 var(--ui);letter-spacing:.01em;color:var(--fg);margin:0 0 12px}
.body p.addr{font:400 22px/1 var(--mono);color:var(--ink);margin:20px 0 0}
.body p.fine{font:400 19px/1 var(--mono);margin:14px 0 0}
.body p.fine a{color:var(--mute)}
.body p.fine a:hover{color:var(--fg)}
.blk{display:inline-block;width:.5em;height:.88em;margin-left:.12em;vertical-align:-.06em;background:var(--green);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.row{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end;margin-top:24px}
.btn{
  display:inline-block;min-width:96px;padding:9px 18px;text-align:center;text-decoration:none;
  font:400 20px/1 var(--ui);letter-spacing:.03em;color:var(--fg);background:var(--win);
  border:1px solid var(--fg);border-radius:8px;
}
.btn:hover{background:var(--fg);color:var(--win)}
.btn:active{background:var(--green);border-color:var(--green);color:#000}
.btn.default{box-shadow:0 0 0 2px var(--win),0 0 0 5px var(--green)}

/* green screen chat */
.term{
  height:280px;overflow-y:auto;padding:12px 14px;background:var(--term);color:var(--term-fg);
  font:400 21px/1.15 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
}
.term .ln{margin:0 0 8px}
.term .me{color:var(--term-me)}
.term .err{color:var(--term-err)}
.prompt{display:flex;align-items:center;gap:6px;padding:8px 14px 10px;background:var(--term);border-top:1px solid var(--term-rule);font:400 22px/1 var(--mono);color:var(--term-fg)}
.prompt label{flex:none}
.prompt input{
  flex:1;min-width:0;padding:2px 0;background:transparent;border:0;outline:0;
  color:var(--term-fg);font:inherit;caret-color:var(--term-fg);caret-shape:block;border-radius:0;text-overflow:ellipsis;
}
.prompt input::placeholder{color:var(--term-hint);opacity:1}
.w-logo .prompt input{text-transform:uppercase}

/* Logo */
.paper{height:260px;background:var(--term);display:flex;align-items:center;justify-content:center;overflow:hidden}
.paper canvas{display:block;image-rendering:pixelated}

/* alert */
.alert-wrap{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:var(--scrim);padding:16px}
.alert-wrap[hidden]{display:none}
.alert{
  width:100%;max-width:400px;display:grid;grid-template-columns:48px 1fr;gap:14px 18px;padding:24px 26px 22px;
  background:var(--win);border:1px solid var(--fg);
  box-shadow:inset 0 0 0 3px var(--win),inset 0 0 0 5px var(--fg),3px 3px 0 var(--shadow);
}
.alert img{width:48px;height:48px;filter:var(--edge,none)}
.alert p{margin:8px 0 0;font:400 20px/1.25 var(--ui);letter-spacing:.02em}
.alert .row{grid-column:1 / -1;margin-top:4px}

.zr{position:fixed;z-index:1500;border:1px dotted var(--fg);pointer-events:none}

/* the desktop proper, switched on by script for a mouse and a wide screen */
.deskmode body{overflow:hidden}
.deskmode .desk{position:fixed;top:calc(var(--bar) + 1px);left:0;right:0;bottom:0;padding:0;overflow:hidden}
.deskmode .icons{
  position:absolute;top:18px;right:14px;bottom:14px;width:100px;margin:0;max-width:none;
  flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:12px;
}
.deskmode .icon-trash{margin-top:auto}
.deskmode .win{position:absolute;margin:0;max-width:none}
.deskmode .win:not(.active) .tb::before{opacity:0}
.deskmode .win:not(.active) .close{visibility:hidden}
.deskmode .win:not(.active) .tb h2{color:var(--mute)}
.deskmode .w-readme{width:560px}
.deskmode .w-contact{width:420px}
.deskmode .w-chat{width:480px}
.deskmode .w-logo{width:440px}
.deskmode .paper{height:300px}

@media (max-width:420px){
  .m-edit,.mb-app{display:none}
  .body{padding:20px 18px 22px}
  .body p.big{font-size:30px}
  .body h1{font-size:30px}
  .row{justify-content:center}
  .icon{width:64px}
  .icon span{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.blk{animation:none}}
.og .blk{animation:none}