.era-1986 {
  --ph: #39ff6a;
  --ph-dim: #1fae45;
  background: radial-gradient(ellipse at center, #0b0f0b 0%, #000 70%);
  display: grid; place-items: center;
  padding: 72px 16px 24px;
  font-family: "VT323", ui-monospace, monospace;
}
.crt { width: min(1040px, 100%); position: relative; }
.crt__screen {
  position: relative; height: min(78vh, 720px); min-height: 440px;
  background: radial-gradient(ellipse at 50% 40%, #071a0b 0%, #020703 80%);
  border-radius: 28px / 22px;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .95), inset 0 0 18px rgba(57, 255, 106, .15), 0 0 0 14px #141614, 0 0 0 16px #2a2d2a, 0 30px 80px rgba(0, 0, 0, .8);
  overflow: hidden;
  animation: crt-on .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes crt-on {
  0% { transform: scale(1, .004); filter: brightness(6); }
  45% { transform: scale(1, .004); filter: brightness(6); }
  70% { transform: scale(1, 1.02); filter: brightness(2); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
.crt__glass {
  position: absolute; inset: 0; overflow-y: auto; padding: 34px 40px 28px;
  color: var(--ph); font-size: clamp(18px, 2.1vw, 23px); line-height: 1.15;
  text-shadow: 0 0 2px var(--ph), 0 0 10px rgba(57, 255, 106, .55);
  scrollbar-width: thin; scrollbar-color: var(--ph-dim) transparent;
  animation: flicker 4s infinite steps(1);
}
@keyframes flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .86; } 98% { opacity: .95; } }
.crt__scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .65) 100%);
}
.crt__scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px;
  background: linear-gradient(transparent, rgba(57, 255, 106, .06), transparent);
  animation: roll 7s linear infinite;
}
@keyframes roll { to { top: 110%; } }
.crt__bezel {
  display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 26px;
  color: #6b6f6b; font-size: 16px; letter-spacing: .3em;
}
.crt__led { width: 8px; height: 8px; border-radius: 50%; background: var(--ph); box-shadow: 0 0 10px var(--ph); }

.term p { margin: 0; white-space: pre-wrap; word-break: break-word; min-height: 1.15em; }
.term a { color: #b6ffc8; }
.term .dim { color: var(--ph-dim); }
.term .echo { color: #b6ffc8; margin-top: 8px; }
.term .err { color: #ff6b6b; text-shadow: 0 0 8px rgba(255, 80, 80, .6); }

.splash { min-height: 100%; display: grid; place-content: center; text-align: center; gap: 6px; padding: 20px 0; }
.splash__logo { margin: 0 auto 16px; font-family: inherit; font-size: clamp(7px, 1.45vw, 15px); line-height: 1.05; color: var(--ph); }
.splash__title { font-size: 1.25em; letter-spacing: .08em; }
.btn-connect {
  margin: 22px auto 8px; padding: 12px 34px; min-height: 48px;
  font: inherit; font-size: 1.15em; letter-spacing: .1em; color: #000; background: var(--ph); border: 0;
  box-shadow: 0 0 22px rgba(57, 255, 106, .6), inset 0 -3px 0 rgba(0, 0, 0, .25);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
}
.btn-connect:hover { filter: brightness(1.15); box-shadow: 0 0 34px rgba(57, 255, 106, .9); }
.btn-connect:focus-visible { outline: 2px dashed var(--ph); outline-offset: 6px; }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 18px; margin: 8px 0 14px; }
.menu__item {
  text-align: left; background: transparent; border: 0; color: var(--ph); font: inherit; padding: 4px 6px; min-height: 36px;
  text-shadow: inherit;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--ph); color: #000; text-shadow: none; outline: none; }
.menu__item b { font-weight: 400; color: #b6ffc8; }
.menu__item:hover b, .menu__item:focus-visible b { color: #000; }

.term__prompt { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.term__ps1 { white-space: nowrap; }
.term__input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ph);
  font: inherit; text-shadow: inherit; caret-color: var(--ph); text-transform: uppercase; padding: 0;
}

.crt.is-matrix .crt__glass { color: #fff; animation: matrix .25s steps(2) infinite; }
@keyframes matrix { 50% { filter: hue-rotate(60deg) contrast(1.6); transform: translateX(1px); } }

@media (max-width: 640px) {
  .era-1986 { padding: 16px 10px calc(84px + env(safe-area-inset-bottom)); }
  .crt__screen { height: calc(100dvh - 148px - env(safe-area-inset-bottom)); border-radius: 18px; box-shadow: inset 0 0 80px rgba(0, 0, 0, .95), 0 0 0 8px #141614; }
  .crt__glass { padding: 22px 18px; }
  .crt__bezel { margin-top: 14px; font-size: 13px; }
}