:root {
  --black: #030303;
  --enamel: #080808;
  --soft-black: #111;
  --steel: #d7d7d0;
  --steel-mid: #84847f;
  --steel-dark: #2c2c2a;
  --plate-blue: #5ea6db;
  --plate-blue-dark: #286d9d;
  --cream: #f2f1e8;
  --red: #d00b08;
  --amber: #ffbc43;
  --terminal: #ffcf8a;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(120, 0, 0, .20), transparent 17rem),
    radial-gradient(circle at 50% 50%, #1a1a1a 0, #050505 58%, #000 100%);
  color: var(--cream);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .22;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 43%, rgba(0,0,0,.72));
  mix-blend-mode: screen;
}

.hal-room {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.2vw, 28px);
}

.hal-unit {
  position: relative;
  width: min(92vw, 455px);
  height: min(96svh, 1120px);
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, #353533 0 3.2%, #070707 3.3% 96.7%, #363634 96.8% 100%),
    var(--enamel);
  box-shadow:
    0 38px 110px rgba(0,0,0,.88),
    0 0 0 1px rgba(255,255,255,.12),
    inset 18px 0 22px rgba(255,255,255,.055),
    inset -18px 0 22px rgba(255,255,255,.045);
}

.edge { position: absolute; pointer-events: none; z-index: 4; }
.edge-top,
.edge-bottom { left: 0; right: 0; height: 15px; }
.edge-top { top: 0; background: linear-gradient(135deg, #f4f4ee 0 42%, #565653 43% 58%, #151515 59%); }
.edge-bottom { bottom: 0; background: linear-gradient(315deg, #f4f4ee 0 42%, #565653 43% 58%, #151515 59%); }
.edge-left,
.edge-right { top: 0; bottom: 0; width: 15px; }
.edge-left {
  left: 0;
  clip-path: polygon(0 0, 100% 15px, 100% calc(100% - 15px), 0 100%);
  background: linear-gradient(135deg, #f1f1eb, #8c8c86 13%, #30302e 33%, #101010 70%);
}
.edge-right {
  right: 0;
  clip-path: polygon(100% 0, 0 15px, 0 calc(100% - 15px), 100% 100%);
  background: linear-gradient(315deg, #f1f1eb, #8c8c86 13%, #30302e 33%, #101010 70%);
}

.hal-badge {
  position: absolute;
  z-index: 6;
  top: 42px;
  left: 48px;
  right: 38px;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  border: 3px solid var(--plate-blue);
  border-left: 0;
  background: #111;
  font-family: 'Michroma', sans-serif;
  letter-spacing: .035em;
  line-height: 1;
  box-shadow: 0 9px 20px rgba(0,0,0,.42);
}

.badge-left,
.badge-right {
  display: grid;
  place-items: center;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,.96);
  text-shadow: 0 0 4px rgba(255,255,255,.38);
  font-size: clamp(2.05rem, 7.2vw, 3.28rem);
}
.badge-right { font-size: clamp(1.85rem, 6.4vw, 3rem); }
.badge-left {
  background: linear-gradient(180deg, #76bbe9 0, var(--plate-blue) 50%, var(--plate-blue-dark) 100%);
  border-right: 3px solid var(--plate-blue);
}
.badge-right { background: #151515; letter-spacing: .015em; }

.face {
  position: absolute;
  inset: 15px 15px 318px;
  display: grid;
  grid-template-rows: 126px 1fr 74px;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.035), transparent 20%),
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 10% 90%, rgba(255,255,255,.03)),
    #060606;
}

.tiny-readout {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.lens-button {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-row: 2;
  place-items: center;
  align-self: end;
  justify-self: center;
  width: min(78%, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-8px);
}
.lens-button:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 14px;
}

.lens {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
  background: #160000;
  animation: pulse 5.2s ease-in-out infinite;
  filter: saturate(1.08);
}
.lens *, .lens::before, .lens::after { position: absolute; content: ''; border-radius: 50%; pointer-events: none; }

.outer-chrome {
  inset: -8%;
  z-index: -3;
  background:
    conic-gradient(from 225deg, #f7f7ef, #8a8a83, #101010, #020202, #666660, #e8e8df, #7b7b75, #f7f7ef);
  box-shadow:
    0 24px 34px rgba(0,0,0,.82),
    0 0 0 8px #050505,
    inset 0 0 23px rgba(255,255,255,.38);
}
.outer-chrome::after {
  inset: 9%;
  background: #050505;
  box-shadow: inset 0 0 17px rgba(255,255,255,.22);
}

.inner-glass {
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, #ffe06d 0 2.6%, #ff8f29 3.2% 6.4%, #e82216 7.5% 14%, #750000 25%, #170000 48%, #030000 75%),
    #060000;
  box-shadow:
    inset 0 0 72px rgba(0,0,0,.94),
    inset 0 0 23px rgba(255,255,255,.14),
    0 0 24px rgba(255,24,16,.54),
    0 0 90px rgba(255,16,8,.25);
}
.red-depth {
  inset: 9%;
  background:
    radial-gradient(ellipse at 40% 33%, rgba(255,255,255,.15), transparent 18%),
    radial-gradient(ellipse at 28% 38%, rgba(210,0,0,.38), transparent 36%),
    radial-gradient(ellipse at 69% 43%, rgba(50,0,0,.78), transparent 43%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.92) 80%);
  mix-blend-mode: screen;
}
.iris-core {
  inset: 28%;
  border: 17px solid rgba(18,0,0,.82);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.98),
    0 0 22px rgba(255,50,30,.28);
}
.hot-pupil {
  inset: 42%;
  background: radial-gradient(circle, #fff6a4 0 7%, #ffc549 11% 24%, #ff631d 31%, #d3150f 47%, #4c0000 76%);
  box-shadow: 0 0 30px rgba(255,35,17,.95), 0 0 68px rgba(255,35,17,.55);
}
.white-streak {
  background: rgba(255,255,255,.90);
  filter: blur(.7px);
  box-shadow: 0 0 11px rgba(255,255,255,.35);
}
.streak-one { width: 39%; height: 5%; left: 18%; top: 20%; transform: rotate(-14deg); border-radius: 55% 60% 45% 40%; }
.streak-two { width: 16%; height: 4%; left: 18%; top: 33%; transform: rotate(-27deg); opacity: .82; }
.streak-three { width: 14%; height: 3.5%; right: 20%; top: 33%; transform: rotate(21deg); opacity: .74; }
.lens-noise {
  left: 27%; right: 27%; bottom: 20%; height: 16%;
  border-radius: 0;
  opacity: .6;
  background:
    radial-gradient(circle, rgba(255,180,65,.78) 0 1px, transparent 1.8px) 0 0 / 15px 9px,
    radial-gradient(circle, rgba(255,80,28,.5) 0 1px, transparent 1.8px) 7px 4px / 18px 11px;
  mask-image: radial-gradient(ellipse at center, black 0 40%, transparent 70%);
}

.lens.listening { animation-duration: .78s; }
.lens.thinking { animation-duration: .48s; filter: saturate(1.35) brightness(1.12); }
@keyframes pulse { 0%, 100% { transform: scale(.985); } 50% { transform: scale(1.018); } }

.spoken-line {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.speaker {
  position: absolute;
  z-index: 5;
  left: 15px;
  right: 15px;
  bottom: 15px;
  height: 303px;
  background:
    linear-gradient(90deg, #e5e5de 0, #777771 11%, #f1f1eb 35%, #74746e 63%, #ecece6 84%, #777771 100%);
  border-top: 2px solid #f2f2eb;
  box-shadow:
    inset 0 11px 20px rgba(255,255,255,.34),
    inset 0 -18px 28px rgba(0,0,0,.34),
    0 -7px 18px rgba(0,0,0,.56);
  overflow: hidden;
}
.grille {
  position: absolute;
  inset: 9px 9px;
  background:
    radial-gradient(circle, #050505 0 3.8px, transparent 4.4px) 0 0 / 20px 15px,
    repeating-linear-gradient(0deg, rgba(0,0,0,.48) 0 2px, rgba(255,255,255,.72) 2px 5px, rgba(55,55,52,.55) 5px 10px, rgba(255,255,255,.86) 10px 13px);
  filter: contrast(1.08);
}

.console-slot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 8px;
  background: rgba(3,3,3,.58);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 18px rgba(0,0,0,.52), inset 0 0 0 1px rgba(0,0,0,.7);
  opacity: .20;
  transition: opacity .18s ease, background .18s ease;
}
.console-slot:hover,
.console-slot:focus-within {
  opacity: .96;
  background: rgba(3,3,3,.88);
}
.transcript {
  display: none;
  max-height: 86px;
  overflow-y: auto;
  padding-right: 5px;
  color: var(--terminal);
  font-size: .83rem;
  line-height: 1.34;
}
.console-slot:focus-within .transcript,
.console-slot:hover .transcript { display: block; }
.bubble { margin: 0 0 7px; }
.bubble p { margin: 0; white-space: pre-wrap; }
.speaker-name {
  color: rgba(255,255,255,.55);
  margin-right: 8px;
  letter-spacing: .16em;
  font-size: .72rem;
}
.bubble.user { color: #caecff; }
.composer {
  display: grid;
  grid-template-columns: 1fr 68px;
  gap: 7px;
  margin-top: 8px;
}
textarea {
  resize: none;
  min-height: 34px;
  max-height: 88px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 0;
  padding: 8px 9px;
  color: #ffe0ad;
  background: rgba(0,0,0,.66);
  font: inherit;
  outline: none;
}
textarea:focus { border-color: rgba(255,196,105,.72); box-shadow: 0 0 0 2px rgba(255,70,30,.16); }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .56; cursor: wait; }
.send {
  border: 1px solid rgba(255,255,255,.26);
  color: #050505;
  background: linear-gradient(180deg, #f8f2d5, #d6a85a 58%, #83542a);
  letter-spacing: .12em;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (max-height: 820px) and (min-width: 620px) {
  .hal-unit { width: min(68vh, 455px); min-height: 680px; }
  .hal-badge { top: 34px; height: 66px; }
  .face { bottom: 274px; grid-template-rows: 108px 1fr 58px; }
  .speaker { height: 259px; }
  .lens-button { width: min(76%, 315px); transform: translateY(25px); }
}

@media (max-width: 520px) {
  .hal-room {
    min-height: 100svh;
    padding: 14px 0 18px;
    align-items: start;
  }
  .hal-unit {
    width: min(82vw, 455px);
    height: auto;
    aspect-ratio: 455 / 1120;
    min-height: 0;
  }
  .edge-top,
  .edge-bottom { height: 11px; }
  .edge-left,
  .edge-right { width: 11px; }
  .hal-badge {
    top: 31px;
    left: 34px;
    right: 27px;
    height: 54px;
    border-width: 2px;
  }
  .badge-left,
  .badge-right {
    -webkit-text-stroke-width: 1px;
    font-size: clamp(1.55rem, 9.4vw, 2.55rem);
  }
  .badge-right { font-size: clamp(1.35rem, 8.4vw, 2.3rem); }
  .face {
    inset: 11px 11px 210px;
    grid-template-rows: 96px 1fr 30px;
  }
  .lens-button {
    width: 74%;
    transform: translateY(-4px);
  }
  .speaker {
    left: 11px;
    right: 11px;
    bottom: 11px;
    height: 199px;
  }
  .grille {
    inset: 7px;
    background:
      radial-gradient(circle, #050505 0 2.8px, transparent 3.3px) 0 0 / 16px 12px,
      repeating-linear-gradient(0deg, rgba(0,0,0,.48) 0 2px, rgba(255,255,255,.72) 2px 4px, rgba(55,55,52,.55) 4px 8px, rgba(255,255,255,.86) 8px 10px);
  }
  .console-slot {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 6px;
    opacity: .12;
  }
  .console-slot:focus-within,
  .console-slot:hover { opacity: .94; }
  .transcript { max-height: 54px; font-size: .72rem; }
  .composer { grid-template-columns: 1fr 56px; gap: 5px; margin-top: 0; }
  textarea { min-height: 30px; padding: 6px 7px; }
}