/* The demo site. Same rule as the game (GDD §15): people are photographed, information is screened.
   Screenshots keep their own Kodachrome mounts; everything that is text sits on a phosphor field in NASA amber. */
:root{
  --ink:#0b0a14;--field:#141c2a;--night:#0e1d33;--teal-d:#27424f;--teal:#3a6672;--teal-l:#9fc0bf;
  --gold:#d8a94a;--amber-d:#ff6a3d;--amber:#ffb24a;--amber-b:#ffe3a0;--red:#c8332e;--white:#f2e9d2;
  --pixel:'Silkscreen',ui-monospace,Menlo,Consolas,monospace;--crt:'VT323',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--teal-l);font:22px/1.25 var(--crt);-webkit-font-smoothing:none}
a{color:var(--amber)}a:hover{color:var(--amber-b)}
img.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block;width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.pix{font-family:var(--pixel);letter-spacing:.04em}
.bloom{color:var(--amber);text-shadow:1px 1px 0 #5e3a22,0 0 8px rgba(255,178,74,.35)}
.dim{color:var(--gold)}.soft{color:var(--teal-l)}.bright{color:var(--amber-b)}

/* phosphor field: rounded corners, scanlines inside the data region, one sync line */
.crt{position:relative;background:var(--field);border:1px solid var(--gold);border-radius:3px;padding:22px 24px;overflow:hidden}
.crt::before{content:"";position:absolute;left:-1px;top:-1px;width:8px;height:8px;border-top:2px solid var(--amber-b);border-left:2px solid var(--amber-b);border-top-left-radius:3px;z-index:2}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 37%,rgba(255,227,160,.07) 37%,rgba(255,227,160,.07) calc(37% + 1px),transparent calc(37% + 1px)),
  repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.22) 2px 4px)}
.crt h2,.crt h3{margin:0 0 14px;font:400 18px/1.2 var(--pixel);letter-spacing:.05em;color:var(--amber);text-shadow:0 0 6px rgba(255,178,74,.4)}
.crt>*{position:relative;z-index:1}

/* buttons: amber outline, the game's own button; hover fills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 26px;border:2px solid var(--amber);border-radius:3px;
  background:var(--field);color:var(--amber);font:400 20px/1 var(--pixel);letter-spacing:.06em;text-decoration:none;cursor:pointer;
  text-shadow:0 0 8px rgba(255,178,74,.4)}
.btn:hover,.btn:focus-visible{background:var(--amber);color:var(--ink);text-shadow:none;outline:none}
.btn.small{min-height:40px;padding:8px 16px;font-size:15px}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--amber-b);outline-offset:3px}

/* forms on phosphor */
label{display:block;font:400 14px/1.3 var(--pixel);letter-spacing:.05em;color:var(--gold);margin:0 0 6px}
input,select,textarea{width:100%;background:var(--ink);color:var(--amber-b);border:1px solid var(--teal);border-radius:3px;padding:10px 12px;font:22px/1.2 var(--crt)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--amber);outline:none}
.field{margin:0 0 18px}
.hp{position:absolute!important;left:-9999px!important}

@media (max-width:640px){body{font-size:20px}.crt{padding:18px 16px}.btn{width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}