:root{
  --bg:#000;
  --fg:#d0d0d0;
  --dim:#8c8c8c;
  --neon:#00ff99;
  --neon2:#00b3ff;
  --neon3:#00ffcc;
  --frameBg: rgba(2, 6, 10, 0.96);
  --codeBg: rgba(0, 32, 16, 0.55);
}

html, body { margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--fg); font-family: Arial, sans-serif; }

body{
  padding:20px;
  background: radial-gradient(circle at 50% 10%, #101820 0%, #020406 55%, #000 100%);
  position:relative;
  overflow-x:hidden;
}

.bg-grid{
  position:fixed; inset:-50px;
  background-image:
    linear-gradient(rgba(0,255,153,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,0.06) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.35;
  mix-blend-mode:screen;
  animation:gridShift 26s linear infinite;
  pointer-events:none;
}

.scanlines{
  pointer-events:none; position:fixed; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015),
    rgba(255,255,255,0.015) 1px,
    rgba(0,0,0,0.16) 2px
  );
  mix-blend-mode:soft-light;
  opacity:0.38;
}

.frame{
  position:relative; width:100%; max-width:820px;
  margin:40px auto; padding:32px 26px 22px;
  border-radius:6px;
  border:1px solid rgba(0,255,153,0.15);
  background:
    radial-gradient(circle at top, rgba(0,255,153,0.10), transparent 55%),
    radial-gradient(circle at bottom, rgba(0,179,255,0.12), transparent 60%),
    var(--frameBg);
  box-shadow: 0 0 18px rgba(0,0,0,0.9), 0 0 40px rgba(0,255,180,0.18);
}

.frame::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px;
  background: linear-gradient(to bottom, var(--neon), var(--neon2));
  box-shadow: 0 0 10px rgba(0,255,153,0.8);
  opacity:0.85;
}

.header-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; padding-left:6px; gap:12px; }
.header-left{ display:flex; flex-direction:column; }
.tag{ font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:#6ddfba; }

h1{
  margin:4px 0 4px;
  font-size:26px; color:#fff; letter-spacing:0.14em;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(0,255,153,0.85);
}

.status-pill{
  font-size:10px; text-transform:uppercase; letter-spacing:0.18em;
  padding:3px 9px; border-radius:999px;
  border:1px solid rgba(0,255,153,0.4);
  color:#bfffe6; background: rgba(0,40,30,0.55);
  white-space:nowrap;
}

.subtitle{
  margin:2px 0 16px 6px;
  font-size:12px; letter-spacing:0.20em;
  text-transform:uppercase; color:#888;
}

.divider{
  margin:4px 0 18px; height:1px;
  background: linear-gradient(to right, var(--neon), var(--neon2), #222);
  opacity:0.7;
}

.section-label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.18em;
  color:#8ea6a6; margin:16px 0 6px;
}

.line{
  font-family:"Courier New", monospace;
  font-size:15px; line-height:1.7;
  color:#e0e0e0;
}

.dim{ color:var(--dim); }

.code{
  display:block; margin:5px 0; padding:6px 10px;
  border-left:2px solid var(--neon);
  font-family:"Courier New", monospace;
  font-size:14px; color:#8aff8a;
  background: var(--codeBg);
  word-wrap:break-word;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.navblock{
  margin-top:22px;
  font-family:"Courier New", monospace;
  font-size:12px; letter-spacing:0.12em;
  color:#6ba394;
}
.navblock a{ color:var(--neon3); text-decoration:none; }
.navblock a:hover{ text-decoration:underline; }

@keyframes gridShift { 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(-40px,-40px,0);} }

/* --- Typewriter --- */

.typewriter-shell{
  border:1px solid rgba(0,255,153,0.18);
  border-radius:8px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 22px rgba(0,0,0,0.75), 0 0 24px rgba(0,255,180,0.10);
  overflow:hidden;
}

.typewriter-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px dashed rgba(120,255,200,0.20);
  background: linear-gradient(to right, rgba(0,255,153,0.08), rgba(0,179,255,0.07));
}

.typewriter-badge{
  font-family:"Courier New", monospace;
  font-size:12px;
  letter-spacing:0.18em;
  color:#bfffe6;
  text-transform:uppercase;
}

.typewriter-led{
  width:10px; height:10px;
  border-radius:50%;
  background: rgba(0,255,153,0.35);
  box-shadow: 0 0 12px rgba(0,255,153,0.55);
  animation: ledPulse 2.6s ease-in-out infinite;
}

@keyframes ledPulse{
  0%,100%{ opacity:0.45; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}

.typewriter-paper{
  position:relative;
  padding:12px;
  min-height:170px;
  max-height:240px;
  overflow:auto;
  background:
    radial-gradient(circle at 20% 0%, rgba(0,255,204,0.07), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0,179,255,0.07), transparent 55%),
    rgba(0,0,0,0.20);
  font-family:"Courier New", monospace;
}

.paper-line{
  font-size:13px;
  line-height:1.65;
  margin:0 0 8px;
}

.paper-content{
  font-size:14px;
  line-height:1.7;
  color:#e9e9e9;
  white-space:pre-wrap;
  word-break:break-word;
}

.paper-cursor{
  display:inline-block;
  width:8px; height:1.1em;
  background: rgba(0,255,153,0.85);
  margin-left:2px;
  vertical-align:bottom;
  animation: blink 1s steps(2,start) infinite;
  position:sticky;
  bottom:6px;
}

@keyframes blink{
  0%,50%{ opacity:1; }
  50.01%,100%{ opacity:0; }
}

.typewriter-controls{
  padding:12px;
  border-top:1px solid rgba(0,255,153,0.10);
  background: rgba(0,0,0,0.18);
}

.control-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.input-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.prompt{
  font-family:"Courier New", monospace;
  width:12px;
}

.tw-input{
  flex:1;
  min-width:180px;
  padding:10px 10px;
  border-radius:6px;
  border:1px solid rgba(0,255,153,0.18);
  background: rgba(0,0,0,0.35);
  color:#e8e8e8;
  font-family:"Courier New", monospace;
  font-size:14px;
  outline:none;
}

.tw-input:focus{
  border-color: rgba(0,255,204,0.35);
  box-shadow: 0 0 0 2px rgba(0,255,204,0.08);
}

.tw-btn{
  padding:9px 12px;
  border-radius:6px;
  border:1px solid rgba(0,255,153,0.22);
  background: rgba(0,40,30,0.35);
  color:#bfffe6;
  font-family:"Courier New", monospace;
  font-size:13px;
  letter-spacing:0.12em;
  cursor:pointer;
  user-select:none;
}

.tw-btn:hover{
  border-color: rgba(0,255,204,0.45);
  background: rgba(0,60,40,0.40);
}

.tw-btn:active{
  transform: translateY(1px);
}

.tw-btn-quiet{
  border-style:dashed;
  color:#a9d8cc;
  background: rgba(0,0,0,0.22);
}

.micro{
  margin-top:10px;
  font-family:"Courier New", monospace;
  font-size:11px;
  letter-spacing:0.10em;
}

@media (max-width: 480px){
  body{padding:16px;}
  .frame{ margin:24px auto; padding:26px 18px 18px; }
  h1{ font-size:22px; letter-spacing:0.10em; }
  .subtitle{ font-size:11px; letter-spacing:0.16em; }
  .line{ font-size:14px; }
  .code{ font-size:13px; padding:6px 8px; }
  .typewriter-paper{ max-height:220px; }
}