@font-face {
  font-family: "PF Videotext Pro";
  src: url("/fonts/pf-videotext.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --ink: #050b17;
  --panel: #0a1726;
  --line: #326d8e;
  --cyan: #82dbef;
  --red: #f04b45;
  --white: #dff8ff;
  --muted: #9bc1cf;
}

html, body, button { font-family: "PF Videotext Pro", monospace; text-rendering: geometricprecision; }
body { background: #050b17; }
header { background: #123d72; border-bottom: 4px solid #02060d; box-shadow: inset 0 -3px #5da8c7, inset 0 3px #1e6b9d, 0 5px #0006; }
.brand { font-family: "PF Videotext Pro", monospace; }
.brand-mark { width: 50px; height: 50px; padding: 0; background: none; clip-path: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.source-logo { position: absolute; left: 50%; top: 50%; width: 280px; height: auto; transform: translate(-50%,-50%); opacity: .72; image-rendering: pixelated; }
.rail button,.eyebrow,h1,.state strong,.wake,.panel-head,.grid-data b,.mission .num,.mission h3,.modal-card small,.modal-card h2,.modal-card button { font-family: "PF Videotext Pro", monospace; }
h1 { letter-spacing: .04em; font-weight: 400; }
.console { border: 4px solid #02060d; outline: 2px solid #326d8e; background: #071328; box-shadow: inset 0 0 0 2px #123d72, 7px 7px #02060d; }
.console-top { background: #123d72; border-bottom: 4px solid #02060d; color: #dff8ff; }
.character { background: radial-gradient(circle,#123d72 0,#071328 48%,#050b17 100%); isolation: isolate; }
.radar { position: absolute; width: 300px; height: 300px; object-fit: contain; opacity: .45; animation: radarSpin 20s linear infinite; z-index: 0; image-rendering: pixelated; }
.silhouette { position: absolute; left: 3%; bottom: -36%; width: 230px; opacity: .23; filter: drop-shadow(0 0 10px #82dbef); z-index: 0; image-rendering: pixelated; }
.listening-sprite { width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated; z-index: 3; filter: drop-shadow(5px 5px #02060d) drop-shadow(0 0 14px #82dbef); animation: gifFloat 1.4s steps(2,end) infinite alternate; }
.listening-sprite { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.listening-sprite:focus-visible { outline: 3px solid var(--cream); outline-offset: 9px; }
.listening-sprite:active { transform: scale(.94); }
.ornament { position: absolute; width: 135px; opacity: .72; z-index: 1; image-rendering: pixelated; }
.ornament-left { left: 13%; top: 45%; transform: rotate(-9deg); }
.ornament-right { right: 13%; top: 45%; transform: scaleX(-1) rotate(-9deg); }
.mask.listening-sprite { position: relative; width: 128px; height: 128px; background: none; clip-path: none; filter: drop-shadow(5px 5px #02060d) drop-shadow(0 0 14px #82dbef); }
.orbit { border-color: #82dbef55; }
.wake { border: 4px solid #02060d; box-shadow: inset -4px -4px #962d2a, 4px 4px #02060d; }
.modal-card { border: 4px solid #02060d; outline: 2px solid #326d8e; background: #0a1726; box-shadow: inset 0 0 0 2px #123d72, 8px 8px #02060d; }
.modal-icon { background-image: url("/assets/pixel-spider-button.png"); background-size: cover; color: transparent; image-rendering: pixelated; }
.modal-card button { border: 4px solid #02060d; box-shadow: inset -3px -3px #999586, 3px 3px #02060d; }
.modal-card button:first-child { box-shadow: inset -3px -3px #962d2a, 3px 3px #02060d; }
.noise { opacity: .15; mix-blend-mode: screen; }

/* Full-screen live-link workspace. */
html, body { height: 100%; overflow: hidden; }
body { display: grid; grid-template-rows: 80px minmax(0, 1fr) 46px; }
header, main, footer { min-height: 0; }
main { display: block; min-height: 0; }
.hero {
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  padding: 12px;
  display: block;
}
.hero > .eyebrow, .hero > h1, .hero > .lede { display: none; }
.hero .console {
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) auto;
}
.character { height: auto; min-height: 0; }
.radar { width: min(480px, 68vh); height: min(480px, 68vh); }
.listening-sprite,
.mask.listening-sprite { width: 160px; height: 160px; }
.pulse-ring { width: 235px; height: 235px; }
.o1 { width: 310px; height: 310px; }
.o2 { width: 430px; height: 280px; }
.ornament { width: 160px; }
.ornament-left { left: 9%; }
.ornament-right { right: 9%; }
.voice-panel { grid-template-columns: 180px 1fr 220px; }

@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes gifFloat { to { transform: translateY(-8px); } }

@media(max-width:1000px){
  .hero{padding:10px}.source-logo{display:none}.ornament{width:120px}.silhouette{width:180px}
}
@media(max-width:680px){
  body{grid-template-rows:58px minmax(0,1fr);height:100svh;min-height:100svh}
  header{height:58px;padding:0 10px;border-bottom-width:3px}.brand{gap:7px;font-size:10px;letter-spacing:1px}.brand-mark{width:38px;height:38px}.brand i{display:inline}
  .header-readouts{gap:7px}.header-readouts span{display:none}.header-readouts button{padding:8px;font-size:7px}
  main{height:100%;min-height:0}.hero{height:100%;min-height:0;padding:5px}
  .hero .console{width:100%;height:100%;grid-template-rows:34px minmax(0,1fr) auto;border-width:3px;box-shadow:none}
  .console-top{height:34px;padding:0 9px;border-bottom-width:3px;font-size:7px}.character{height:auto;min-height:0}
  .voice-panel{padding:9px;display:grid;grid-template-columns:1fr auto;gap:8px}.state{min-width:0}.state strong{font-size:9px}.state small{font-size:6px}
  .wave{grid-column:1/-1;order:3;height:22px;overflow:hidden}.wake{width:174px;height:48px;padding:0 9px;font-size:8px}.wake small{font-size:6px}.voice-panel>p{display:none}
  .ornament{width:72px}.ornament-left{left:3%}.ornament-right{right:3%}.silhouette{width:115px;bottom:-20%}
  .listening-sprite,.mask.listening-sprite{width:112px;height:112px}.radar{width:min(310px,78vw);height:min(310px,78vw)}
  .pulse-ring{width:166px;height:166px}.o1{width:220px;height:220px}.o2{width:310px;height:210px}.tag{font-size:6px}.t1{left:8px;top:10px}.t2{right:8px;bottom:10px}.source-logo{display:none}
  footer{display:none}
}
@media(max-width:380px){.brand i{display:none}.wake{width:158px}.listening-sprite,.mask.listening-sprite{width:96px;height:96px}.radar{width:250px;height:250px}}