:root {
  color-scheme: dark;
  --green: #53ff78;
  --dim-green: #176d31;
  --amber: #ffc24b;
  --red: #ff5151;
  --ink: #020603;
  font-family: "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--green);
  background:
    radial-gradient(circle at 50% 15%, #112719 0, #07100a 38%, #010302 78%),
    var(--ink);
}

button, kbd { font: inherit; }

.shell {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px);
}

.masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 4px 14px;
}

.eyebrow, h1 { margin: 0; }
.eyebrow { color: #74a980; font-size: .72rem; letter-spacing: .22em; }
h1 { font-size: clamp(1.55rem, 4vw, 2.7rem); letter-spacing: .14em; }

.hardware-status {
  border: 1px solid var(--dim-green);
  padding: 8px 12px;
  color: #74a980;
  font-size: .76rem;
  letter-spacing: .08em;
}

.hardware-status.online { color: var(--green); border-color: var(--green); }

.viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--dim-green);
  background: #000;
  box-shadow: 0 0 40px rgb(38 255 88 / 8%), inset 0 0 35px #000;
}

.viewport::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 8%) 0 1px, transparent 1px 4px);
}

video { display: none; }

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.permission-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 5;
  width: min(430px, calc(100% - 32px));
  padding: 28px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--green);
  background: rgb(1 8 3 / 94%);
  text-align: center;
  box-shadow: 0 0 30px rgb(83 255 120 / 15%);
}

.permission-panel.hidden { display: none; }
.permission-panel h2 { margin: 8px 0 12px; font-size: 1rem; letter-spacing: .08em; }
.permission-panel p { color: #91b999; font-size: .78rem; line-height: 1.5; }
.permission-panel .panel-code { color: var(--green); letter-spacing: .2em; }
.permission-panel .error { min-height: 1.2em; margin-bottom: 0; color: var(--red); }

button {
  border: 1px solid var(--dim-green);
  color: var(--green);
  background: #061008;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}

button:hover, button:focus-visible, button.active {
  outline: none;
  border-color: var(--green);
  background: #0c2613;
  box-shadow: 0 0 14px rgb(83 255 120 / 13%);
}

button:disabled { cursor: not-allowed; opacity: .35; }
.permission-panel button { padding: 13px 18px; letter-spacing: .08em; }

.console {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) 2.4fr;
  gap: 10px;
  margin-top: 10px;
}

.readout {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #133b20;
  background: rgb(3 10 5 / 80%);
}

.readout span { display: block; color: #558262; font-size: .62rem; letter-spacing: .14em; }
.readout strong { display: block; overflow: hidden; margin-top: 5px; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }

.commands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.commands button { min-height: 54px; padding: 8px 4px; font-size: .68rem; }
kbd { color: #83a98c; }
.hint { margin: 12px 0 0; color: #557860; font-size: .7rem; text-align: center; }

@media (max-width: 840px) {
  .console { grid-template-columns: 1fr 2fr; }
  .commands { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .masthead { align-items: center; }
}

@media (max-width: 520px) {
  .hardware-status { display: none; }
  .permission-panel { padding: 18px; }
  .console { grid-template-columns: 1fr; }
  .commands, .transcript { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}