:root{
  --ink:#dfe6e9;--paper:#07090b;--panel:#0c1013;--panel-hi:#171c1e;
  --muted:#a5afb3;--signal:#ff4d3d;--cyan:#45e6d4;--yellow:#ffb020;
  --line:#303638;--line-hi:#536064;--mono:"Courier New",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;min-height:100vh;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:16px;line-height:1.6;
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 1.25rem;
  background-image:
    radial-gradient(60rem 40rem at 50% -10%,rgba(69,230,212,.07),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
}
.shell{width:100%;max-width:44rem}
.shell::before{
  content:"SKYNET UNIVERSITY // ACCESS";display:block;
  font-size:.7rem;letter-spacing:.28em;color:var(--cyan);
  border-bottom:1px solid var(--line);padding-bottom:.75rem;margin-bottom:2rem;
}
h1{
  font-size:clamp(1.6rem,4.5vw,2.4rem);line-height:1.15;margin:0 0 1rem;
  letter-spacing:-.01em;text-transform:uppercase;
}
h2{font-size:.78rem;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;margin:2.5rem 0 .75rem}
p{margin:0 0 1rem;color:var(--muted);max-width:60ch}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--ink)}
form{margin:1.75rem 0 0;border:1px solid var(--line);border-left:2px solid var(--cyan);
  background:var(--panel);padding:1.25rem}
label{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
input[type=email],textarea{
  width:100%;background:var(--paper);color:var(--ink);font:inherit;
  border:1px solid var(--line-hi);padding:.7rem .8rem;border-radius:0;
}
input[type=email]:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:6rem}
button{
  margin-top:1rem;font:inherit;letter-spacing:.16em;text-transform:uppercase;
  background:var(--cyan);color:#04120f;border:0;padding:.7rem 1.4rem;cursor:pointer;
}
button:hover{background:var(--ink)}
button.quiet{background:transparent;color:var(--muted);border:1px solid var(--line-hi)}
button.quiet:hover{color:var(--ink);border-color:var(--line-hi)}
.notice{border-left:2px solid var(--yellow);padding-left:.8rem;color:var(--ink)}
.quoted{border-left:2px solid var(--line-hi);padding-left:.9rem;color:var(--ink)}
.meta{color:var(--muted);font-size:.8rem}
ul.queue{list-style:none;margin:0;padding:0}
ul.queue li{border:1px solid var(--line);border-top:2px solid var(--signal);
  background:var(--panel);padding:1rem 1.15rem;margin-bottom:1rem}
ul.queue li.aside{opacity:.5;border-top-color:var(--line-hi)}
ul.queue form{margin:.5rem .5rem 0 0;border:0;background:none;padding:0;display:inline-block}
ul.queue button{margin:0 .5rem 0 0}
input[type=text]{width:100%;background:var(--paper);color:var(--ink);font:inherit;
  border:1px solid var(--line-hi);padding:.7rem .8rem}
input[type=text]:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
input[type=number],select{background:var(--paper);color:var(--ink);font:inherit;
  border:1px solid var(--line-hi);padding:.6rem .7rem}
ul.queue form{display:block;margin:.75rem 0 0}
ul.queue form label{margin-top:.6rem}
@media (prefers-reduced-motion: no-preference){
  .shell::before{animation:flicker 6s ease-in-out infinite}
  @keyframes flicker{0%,97%,100%{opacity:1}98%{opacity:.55}}
}