/* coffandcode — the front door: one beige monitor standing in a dark room,
   with an amber tube in it that still takes commands. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --amber:#ffb336;
  --amber-dim:#a9701d;
  --amber-hot:#ffd79a;
  --screen:#140d05;
  --case:#d6cdb8;
  --case-hi:#f2ece0;
  --case-lo:#a49b86;
  --case-deep:#6d6656;
}
html,body{height:100%}
body{
  background:#0c0906;
  color:var(--amber);
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
  line-height:1.5;
  overflow:hidden;
}

/* the room it is standing in: one lamp, a long way off */
.room{
  position:fixed;inset:0;display:grid;place-items:center;padding:3vh 3vw;
  background:
    radial-gradient(70% 55% at 50% 42%, #2a2119 0%, #17120c 55%, #090705 100%);
}
.room::after{                       /* what the tube throws back into the room */
  content:'';position:absolute;left:50%;top:46%;width:min(1300px,120vw);height:70vh;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,170,60,0.10), rgba(0,0,0,0) 70%);
}

/* monitor, neck and base, stacked and centred */
.rig{position:relative;display:flex;flex-direction:column;align-items:center}

.monitor{
  position:relative;aspect-ratio:4 / 3;
  height:min(60vh, calc(74vw * 0.75));width:auto;
  display:flex;flex-direction:column;
  padding:2.2% 2.4% 0;border-radius:3.2% / 4.2%;
  background:
    linear-gradient(158deg, var(--case-hi) 0%, var(--case) 38%, var(--case-lo) 100%);
  box-shadow:
    0 40px 70px rgba(0,0,0,0.75),
    0 6px 0 rgba(70,64,52,0.5),
    inset 0 3px 0 rgba(255,255,255,0.85),
    inset 3px 0 0 rgba(255,255,255,0.4),
    inset -3px 0 0 rgba(90,84,70,0.45),
    inset 0 -4px 0 rgba(90,84,70,0.5);
}
.monitor::before{                   /* moulded plastic, seen close up */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0.045) 0 1px, rgba(0,0,0,0.02) 1px 3px);
  opacity:.6;
}
/* the row of slots along the top, where the heat went */
.vents{
  position:absolute;left:12%;right:12%;top:0.9%;height:0.9%;
  background:repeating-linear-gradient(90deg,
    rgba(110,102,86,0.55) 0 3px, rgba(0,0,0,0) 3px 9px);
  border-radius:2px;
}

/* the bezel is a second, deeper piece of plastic around the glass */
.bezel{
  position:relative;flex:1;min-height:0;margin-top:1.4%;
  padding:2.6% 2.6% 2.2%;border-radius:2.6% / 3.6%;
  background:linear-gradient(180deg, #c8bfa9 0%, #b7ae98 60%, #cdc4ae 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -2px 3px rgba(90,84,70,0.5);
}

/* the glass: a rectangle that has given up on its corners */
.screen{
  position:relative;height:100%;overflow:hidden;
  border-radius:7% / 9%;
  background:var(--screen);
  box-shadow:
    inset 0 0 0 2px #171208,
    inset 0 0 30px rgba(0,0,0,0.95),
    0 0 0 3px rgba(60,54,42,0.85),
    0 0 0 5px rgba(214,205,184,0.9),
    0 2px 10px rgba(0,0,0,0.6);
}

/* the panel under the glass */
.chin{
  flex:0 0 auto;display:flex;align-items:center;gap:2%;
  padding:1.6% 2% 1.8%;
}
.badge{
  font-size:clamp(8px,0.95vh,11px);letter-spacing:0.16em;color:#6d6656;
  text-transform:uppercase;font-weight:700;display:flex;gap:.5em;align-items:baseline;
}
.badge b{color:#8a8270;letter-spacing:0.08em}
.knobs{margin-left:auto;display:flex;gap:clamp(8px,1.4vh,16px);align-items:center}
.knob{
  width:clamp(9px,1.5vh,15px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#eae4d5,#a8a08c);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 2px rgba(0,0,0,0.35),
             0 1px 1px rgba(0,0,0,0.3);
}
.power{
  display:grid;place-items:center;cursor:pointer;border:0;padding:0;
  width:clamp(16px,2.4vh,24px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#eae4d5,#b0a793);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 2px rgba(0,0,0,0.35);
}
.led{
  width:40%;aspect-ratio:1;border-radius:50%;background:#7bf1a8;
  box-shadow:0 0 8px #7bf1a8;
  animation:pulse 3.4s ease-in-out infinite;
}
.power.off .led{background:#6f6959;box-shadow:none;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.72}}

/* what holds it up */
.neck{
  width:26%;height:2.2vh;margin-top:-0.4vh;
  background:linear-gradient(180deg,var(--case-lo),var(--case-deep));
  border-radius:0 0 14px 14px;
  box-shadow:0 4px 8px rgba(0,0,0,0.5);
}
.base{
  width:52%;height:1.9vh;border-radius:50%;
  background:linear-gradient(180deg,var(--case),var(--case-deep));
  box-shadow:0 18px 30px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.5);
}

/* ---- what is on the tube ---- */
#crt{
  position:absolute;inset:0;padding:3.4% 3.2%;overflow-y:auto;overflow-x:hidden;
  font-size:clamp(10px,1.55vh,15px);
  background:radial-gradient(120% 100% at 50% 0%,#241605 0%,var(--screen) 55%,#0a0602 100%);
  text-shadow:0 0 6px rgba(255,179,54,0.45);
  cursor:text;
}
#crt::-webkit-scrollbar{width:6px}
#crt::-webkit-scrollbar-thumb{background:#ffb33633;border-radius:8px}

#out{white-space:pre-wrap;word-break:break-word}
.dim{color:var(--amber-dim)}
.hot{color:var(--amber-hot)}
.dir{color:#7ed4ff}
.exe{color:#7bf1a8}
.err{color:#ff6b6b}
.wake{color:#7bf1a8;text-shadow:0 0 10px rgba(123,241,168,0.55)}

#line{display:flex;align-items:baseline}
#prompt{white-space:pre;flex-shrink:0}
#typed{white-space:pre-wrap;word-break:break-word}
#cursor{
  display:inline-block;width:0.62em;height:1.05em;translate:0 0.16em;
  background:var(--amber);box-shadow:0 0 8px rgba(255,179,54,0.7);
}
#cursor.off{opacity:0}
#line.busy{opacity:.55}
#line.busy #cursor{display:none}

#keys{position:absolute;opacity:0;pointer-events:none;left:-9999px;width:1px;height:1px}

/* ---- the glass in front of the phosphor ---- */
.scan,.glow,.flicker,.vignette,.glare{position:absolute;inset:0;pointer-events:none}
.glow{z-index:1;background:radial-gradient(80% 60% at 50% 45%,rgba(255,179,54,0.07),rgba(0,0,0,0) 70%)}
#rain{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;background:#000}
#rain.hidden{display:none}
.scan{
  z-index:3;mix-blend-mode:multiply;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.2) 2px 4px);
}
/* a curved tube loses its corners and its edges */
.vignette{
  z-index:4;
  box-shadow:inset 0 0 90px rgba(0,0,0,0.85), inset 0 0 30px rgba(0,0,0,0.7);
  background:radial-gradient(118% 112% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.6) 100%);
}
.flicker{z-index:5;background:rgba(255,179,54,0.03);animation:flick 7s steps(2) infinite}
@keyframes flick{0%,96%{opacity:0}97%{opacity:1}98%{opacity:0}99%{opacity:.6}100%{opacity:0}}
/* and the room shows up in it */
.glare{
  z-index:6;
  background:
    linear-gradient(116deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.05) 13%,
                    rgba(255,255,255,0) 32%),
    radial-gradient(55% 38% at 24% 12%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%);
}

@media (prefers-reduced-motion:reduce){
  .flicker,.led{animation:none}
}
@media (max-width:820px){
  .monitor{height:min(66vh, calc(96vw * 0.75));border-radius:4% / 3%}
  .neck{height:1.6vh}
  .base{height:1.4vh}
}

/* ---- the keyboard it is plugged into ------------------------------- */
.deck{
  position:relative;width:min(74vw, 900px);margin-top:2.4vh;
  perspective:1100px;pointer-events:none;
}
/* ivory case, thick lip, keys sunk into it */
.board{
  transform:rotateX(56deg);transform-origin:50% 0;
  display:flex;flex-direction:column;gap:0.55%;
  padding:2.4% 2.2% 3%;border-radius:10px;
  background:linear-gradient(180deg,#f2eee2 0%,#e2ddcd 42%,#c6c0ae 100%);
  box-shadow:
    0 34px 44px rgba(0,0,0,0.72),
    inset 0 2px 0 rgba(255,255,255,0.9),
    inset 0 -3px 0 rgba(140,133,115,0.55);
}
.krow{display:flex;gap:0.55%}
/* the two greys of a keyboard from that decade */
.key{
  flex:1 1 0;min-width:0;height:2.3vh;border-radius:3px;
  background:linear-gradient(180deg,#f6f4ec,#d9d4c6);
  box-shadow:0 1px 0 rgba(120,113,96,0.85), inset 0 1px 0 rgba(255,255,255,0.9);
  font-size:0.72vh;line-height:2.3vh;text-align:center;color:#7d7663;
  overflow:hidden;white-space:nowrap;
}
.key.mod{
  background:linear-gradient(180deg,#c9c4b6,#a9a394);
  color:#4f4a3d;
}
.key.space{background:linear-gradient(180deg,#fbf9f2,#e4dfd0)}
.key.badge{
  background:linear-gradient(180deg,#e8d9a4,#c8ad63);
  color:#6a5520;
}
.key.down{
  background:linear-gradient(180deg,#bdb7a6,#a7a08e);
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.4);
  transform:translateY(1px);
}

@media (max-width:820px){
  .deck{display:none}          /* no room for it, and no keys to press */
}

/* ---- the tube going out, and what takes its place ------------------ */
.crt-off{
  position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:#fff;transform-origin:50% 50%;
}
.screen.off .crt-off{animation:crtoff .62s cubic-bezier(.5,0,.7,1) forwards}
.screen.off #crt,.screen.off .glow,.screen.off .glare{filter:brightness(0);transition:filter .18s .18s}
@keyframes crtoff{
  0%   {opacity:0;   transform:scale(1,1)}
  18%  {opacity:.85; transform:scale(1,1)}
  48%  {opacity:1;   transform:scale(1,0.012)}
  74%  {opacity:1;   transform:scale(0.22,0.012)}
  90%  {opacity:.9;  transform:scale(0.02,0.012)}
  100% {opacity:0;   transform:scale(0,0)}
}

/* the room, once the power has gone */
body.blackout .room{opacity:0;transition:opacity .35s ease-out}
body.blackout{background:#000}

.full{position:fixed;inset:0;z-index:9999;background:#000}
.full.hidden{display:none}
.full canvas{display:block;width:100%;height:100%;background:#000}