* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: monospace; }

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  font-size: 0.85em;
  background: rgba(248, 248, 248, 0.95);
}
.nav-bar a { color: #222; text-decoration: none; }
.nav-bar a:hover { text-decoration: underline; }

.wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.screen-a { background: #f8f8f8; color: #222; }
.screen-b { background: #222; color: #f8f8f8; }

.label {
  font-size: 0.75em;
  opacity: 0.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 { font-size: 2.5em; font-weight: bold; }

.btn {
  font-family: monospace;
  font-size: 0.85em;
  padding: 8px 20px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.btn:hover { opacity: 0.6; }