:root{
  --bg:#001b1b;           /* deep teal CRT */
  --fg:#c7f7f7;           /* phosphor glow */
  --accent:#49f1f1;       /* cyan accent */
  --dim:#7bdcdc;
  --scanline:rgba(255,255,255,0.03);
  --baud-gap:8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:radial-gradient(60% 100% at 50% 0%, #002626 0%, #000d0d 100%), var(--bg);
  color:var(--fg);
  font-family: var(--mono);
  text-shadow: 0 0 6px rgba(73,241,241,0.35);
  height:100vh;
  overflow:hidden;
}

/* subtle CRT scanlines */
body::after{
  content:"";
  position:fixed; inset:0;
  background:linear-gradient(to bottom, transparent 95%, var(--scanline) 96%), linear-gradient(to bottom, transparent 98%, var(--scanline) 99%);
  background-size:100% 3px, 100% 5px;
  pointer-events:none;
  mix-blend-mode:screen;
}

#app{
  display:grid;
  grid-template-rows: 56px 1fr 40px;
  height:100vh;
}

/* TOP BAR */
#topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--dim);
  background: linear-gradient(to bottom, rgba(0,50,50,0.6), rgba(0,0,0,0.3));
}
#topbar .brand{ letter-spacing:2px; font-weight:700; color:var(--accent); }
#topbar .weather{ display:flex; gap:14px; align-items:center; font-size:14px; color:var(--dim); }
#topbar .clock{ font-weight:600; }

/* MIDDLE VIEWPORT */
#viewport{
  overflow:hidden; padding: 12px 18px;
}
#typewriter{
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 17px;
  max-width: 1100px;
}

#typewriter h1, #typewriter h2, #typewriter h3 {
  margin: 10px 0 6px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#typewriter p, #typewriter li {
  margin: 4px 0;
}


/* BOTTOM MARQUEE */
#marquee{
  border-top:1px solid var(--dim);
  overflow:hidden; position:relative;
}
#marquee-track{
  position:absolute; white-space:nowrap;
  will-change: transform;
  animation: scroll-left linear infinite;
  left:100%;
  font-size: 15px;
  padding:8px 0;
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* “printing” caret */
.caret{
  display:inline-block; width:10px; background:var(--accent); margin-left:2px; animation: blink 1s steps(1,end) infinite;
}
@keyframes blink{
  50% { opacity:0; }
}

/* Links styled old-school */
a{ color:var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent); }
a:hover{ text-decoration:underline; }