/* old bbs rail, but rich. chrome, gold, one pink. nothing loud else */
:root{
  --bg:#030306;
  --w:#f5f1e8;
  --s:#c8c4bb;
  --g:#8e8a82;
  --d:#6b6862;
  --y:#d8b25c;
  --n:#d8b25c;
  --c:#9ad9e6;
  --b:#7f95ff;
  --p:#ff4f9a;
  --r:#ff4f9a;
  --bar:#0b1240;
  --edge:#8e8a82;
}

html,body{margin:0;height:100%;background:var(--bg)}
body{
  display:flex;
  flex-direction:column;
  font-family:'VT323',ui-monospace,Menlo,monospace;
  color:var(--w);
}

#crt{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px 16px 0;
  cursor:default;
}

/* dotted on top, double line on side, like the frame in old bbs */
#scr{
  margin:0 auto;
  min-height:calc(100% - 20px);
  box-sizing:content-box;
  padding:1.2em 2ch 1em;
  border-top:3px dotted var(--edge);
  border-left:6px double var(--edge);
  border-right:6px double var(--edge);
  white-space:pre;
  line-height:1.25;
  font-size:22px;
  /* system text plain. half strike for weight, faint bleed like the tube warm up */
  text-shadow:.03em 0 0 currentColor,0 0 .3em color-mix(in srgb,currentColor 18%,transparent);
}

.w{color:var(--w)}
.s{color:var(--s)}
.g{color:var(--g)}
.d{color:var(--d)}
.r,.p{color:var(--r)}
.y{color:var(--y)}
.n{color:var(--n)}
.c{color:var(--c)}
.b{color:var(--b)}

a{color:inherit;text-decoration:none}
.key{color:var(--c)}
.key:hover,.key:focus-visible{background:var(--c);color:var(--bg);outline:none;text-shadow:none}

.cur{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* logo is ascii, one color each letter */
.logo{margin:0 auto;line-height:1.15}
/* brand get the heavy pixel and more glow. system stay plain */
.logo,.sigil{text-shadow:.06em 0 0 currentColor,0 0 .4em color-mix(in srgb,currentColor 28%,transparent)}
/* machine chatter, small and dim, you lean in to read */
.meta{font-size:.8em;color:var(--g);line-height:1.2}
.logo .row{display:flex;justify-content:center}

/* the sigil, square cell so star not squash */
.sigil{width:fit-content;margin:0 auto;line-height:1;white-space:pre}

/* developed photo, still behind old glass */
/* too big for the tube. sit on top of the frame line, cover it */
.bleed{position:relative;z-index:2;box-sizing:border-box}
/* outside the tube, stuck to the glass while you scroll */
.outside{position:fixed;z-index:5;margin:0}
.fax{line-height:1;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;align-items:center}
/* it is a print now, warm paper border, a little crooked */
.photo{padding:10px 10px 28px;margin-bottom:18px;background:#efe9dc;transform:rotate(-1.2deg);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.photo img{display:block;width:100%;height:100%;object-fit:contain;filter:contrast(1.08) saturate(.85)}
.photo::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.18) 2px 3px);
}

#scr input{
  font:inherit;
  color:var(--w);
  background:transparent;
  border:0;
  outline:0;
  padding:0;
  width:60ch;
  max-width:calc(100% - 3ch);
  caret-color:var(--y);
  text-shadow:inherit;
}

#bar{
  display:flex;
  font-size:22px;
  background:var(--bar);
  color:var(--y);
  white-space:nowrap;
  overflow:hidden;
  text-shadow:.06em 0 0 currentColor;
  margin:0 16px 12px;
}
#bar > *{padding:4px 18px;border-right:2px solid var(--y)}
#bar > :first-child{flex:1}
#bar > :last-child{border-right:0}
#bar a:hover{color:var(--w)}

@media (max-width:719px){
  #bar{font-size:17px}
  #bar > *{padding:4px 8px}
  #bar .wide{display:none}
}

@media (prefers-reduced-motion:reduce){
  .cur{animation:none}
}