/* pointless little apps — phosphor */
:root{
  --void:#060a07; --tube:#0a0f0b; --rule:#1d3a25;
  --dim:#2f8f52; --wash:#c9ffd9; --phosphor:#33ff66; --amber:#ffb43d;
  --mono:'Courier Prime',ui-monospace,'Courier New',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--void);color:var(--wash);font-family:var(--mono);font-size:15px;line-height:1.8}
body{position:relative;min-height:100vh;padding-bottom:52px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.28) 3px,rgba(0,0,0,.28) 4px)}
a{color:var(--phosphor);text-decoration:none}
a:hover{color:var(--wash)}
::selection{background:var(--dim);color:var(--void)}
:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px}
h1,h2{font-family:var(--mono);font-weight:700;margin:0;letter-spacing:-.02em;color:var(--phosphor);
  text-shadow:0 0 6px rgba(51,255,102,.4),0 0 26px rgba(51,255,102,.22)}
p{margin:0}
.label{font-size:12.5px;color:var(--dim);letter-spacing:.22em}
.wrap{max-width:1000px}
main{max-width:1000px}

header{border-bottom:1px solid var(--rule);padding:18px 40px;display:flex;justify-content:space-between;
  align-items:center;gap:24px;flex-wrap:wrap}
.brand{font-size:17px;color:var(--phosphor);text-shadow:0 0 14px rgba(51,255,102,.3);display:flex;align-items:center}
.brand .cur{width:9px;height:16px;background:var(--phosphor);margin-left:6px;animation:blink 1.1s step-end infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
nav{display:flex;gap:22px;font-size:13.5px}
nav a{color:var(--dim)}
nav a:hover,nav a[aria-current]{color:var(--phosphor)}

.btn{display:inline-block;font-size:13px;line-height:1.4;padding:9px 17px;border:1px solid var(--phosphor);color:var(--phosphor)}
.btn:hover{background:#0f2415;color:var(--phosphor)}
.btn-quiet{border-color:var(--rule);color:var(--dim)}
.btn-quiet:hover{border-color:var(--phosphor);color:var(--phosphor);background:none}
.row-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
pre.demo{font-family:var(--mono);margin:8px 0 0;font-size:13.5px;line-height:1;color:var(--phosphor);
  white-space:pre;overflow-x:auto;overflow-y:hidden}

.hero{padding:60px 40px 0;display:flex;flex-direction:column;gap:18px;max-width:54ch}
.hero h1{font-size:38px;line-height:1.2;text-wrap:pretty}
.featured{margin:56px 40px 0;border:1px solid var(--rule);background:var(--tube);padding:32px 30px;
  display:flex;flex-direction:column;gap:16px}
.featured h2{font-size:32px;line-height:1.2}
.list{margin:56px 40px 0;display:flex;flex-direction:column;gap:14px}
.list .items{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.list a.item{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 4px;
  border-bottom:1px solid #12210f;color:var(--wash)}
.list a.item:hover{background:var(--tube);color:var(--wash)}
.list .item .n{font-size:12.5px;color:var(--dim);flex:none}
.list .item .left{display:flex;align-items:baseline;gap:14px;min-width:0}
.list .item .m{font-size:12.5px;color:var(--dim);flex:none;letter-spacing:.08em}
.mail{margin:56px 40px 80px;display:flex;flex-direction:column;gap:12px;max-width:52ch}
.mail form{display:flex;max-width:420px;border:1px solid var(--rule)}
.mail input{flex:1;min-width:0;background:var(--tube);border:none;outline:none;font-family:var(--mono);
  font-size:14px;color:var(--wash);padding:11px 13px}
.mail button{font-family:var(--mono);font-size:13px;color:var(--phosphor);background:none;cursor:pointer;
  border:none;border-left:1px solid var(--rule);padding:11px 16px;white-space:nowrap}
.mail button:hover{background:#0f2415}

.back{display:block;padding:26px 40px 0;font-size:13px;color:var(--dim)}
.back:hover{color:var(--phosphor)}
.app-hero{margin:26px 0 0;padding:44px 40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--tube);display:flex;flex-direction:column;gap:20px}
.app-hero h1{font-size:42px;line-height:1.15}
.app-hero p{font-size:15px;line-height:1.7;max-width:52ch}
.story{padding:44px 40px 0;display:flex;flex-direction:column;gap:22px}
.story .body{display:flex;flex-direction:column;gap:18px;max-width:56ch}
.story .body p{line-height:1.85;text-wrap:pretty}
.facts{display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:22px;margin-top:6px}
.facts div{display:flex;flex-direction:column;gap:4px}
.facts dt,.facts .k{font-size:11.5px;color:var(--dim);letter-spacing:.18em}
.facts .v{font-size:14px;color:var(--wash)}
.facts .v.warn{color:var(--amber)}
.next{margin:20px 40px 80px;border:1px solid var(--rule);padding:20px 22px;display:flex;
  justify-content:space-between;align-items:center;gap:20px;color:var(--dim)}
.next:hover{border-color:var(--phosphor);color:var(--dim)}
.next .k{font-size:11.5px;letter-spacing:.18em;display:block}
.next .n{font-size:17px;color:var(--phosphor)}

.about{padding:60px 40px 80px;display:flex;flex-direction:column;gap:34px}
.about h1{font-size:34px;text-shadow:0 0 20px rgba(51,255,102,.25)}
.about .body{display:flex;flex-direction:column;gap:18px;max-width:56ch}
.about .body p{line-height:1.85;text-wrap:pretty}
.contact{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rule);padding-top:22px;font-size:14px}
.contact span{display:flex;gap:16px}
.contact .k{color:var(--dim);width:80px;flex:none}

footer.status{position:fixed;bottom:0;left:0;right:0;z-index:40;border-top:1px solid var(--rule);
  background:var(--void);padding:9px 40px;display:flex;justify-content:space-between;gap:20px;
  font-size:12.5px;color:var(--dim);letter-spacing:.06em}

@media (max-width:640px){
  header,.hero,.featured,.list,.mail,.app-hero,.story,.next,.about,footer.status{padding-left:20px;padding-right:20px}
  .featured,.list,.mail,.next{margin-left:0;margin-right:0}
  .hero h1{font-size:29px}.app-hero h1{font-size:31px}
  footer.status span:nth-child(3){display:none}
}
@media (max-width:640px){
  header,.hero,.featured,.list,.mail,.app-hero,.story,.next,.about,footer.status{padding-left:20px;padding-right:20px}
  .featured,.list,.mail,.next{margin-left:0;margin-right:0}
  .hero h1{font-size:29px}.app-hero h1{font-size:31px}
  footer.status span:nth-child(3){display:none}
  .list a.item{flex-direction:column;align-items:flex-start;gap:8px;justify-content:flex-start}
  .list .item .left{flex-wrap:wrap;min-width:100%}
  .list .item .n{flex-basis:100%;text-align:left}
}