:root {
  color-scheme: dark;
  --ink: #ece3d2;
  --amber: #e2c795;
  --metal: #302d2e;
  --font: 'Courier New',Courier,monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: #0b0b0d;
}

body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  padding: 24px 20px;
  font: 16px/1.45 var(--font);
  color: var(--ink);
}

[hidden] {
  display: none!important;
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled {
  opacity: .42;
  cursor: default;
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

::selection {
  background: #615444;
  color: #fff6e6;
}

.garden {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.console {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  background: #29272af5 url('assets/metal-grain.svg');
  border: 3px solid #1a1918;
  box-shadow: inset 2px 2px 1px #88837e,inset -3px -3px 1px #171716,0 3px 0 #090909,0 20px 65px #000000bb;
  padding: 0 15px 5px;
  animation: power-on .35s steps(5);
}

.console::before,.console::after {
  content: '';
  position: absolute;
  top: 50px;
  bottom: 46px;
  width: 4px;
  background: linear-gradient(90deg,#1b1a19,#696662,#161514);
  pointer-events: none;
}

.console::before {
  left: 5px;
}

.console::after {
  right: 5px;
}

.console-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 2px 12px;
  border-bottom: 2px solid #1f1e1d;
  box-shadow: 0 1px #6e6a66;
}

.engraved {
  color: #d4c2a2;
  text-shadow: 0 -1px #08080a;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .28em;
}

.serial {
  color: #aaa49d;
  font-size: 10px;
  letter-spacing: .1em;
  text-shadow: 0 -1px #121110;
}

.screw,.bolt {
  display: block;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: linear-gradient(145deg,#6e6a66,#2c2a29 60%);
  box-shadow: inset 1px 1px #a09a94,inset -1px -1px #171615,0 1px 2px #0b0b0b;
  position: relative;
}

.screw::after,.bolt::after {
  content: '';
  height: 2px;
  background: #1a1a19;
  box-shadow: 0 1px #6f6b67;
  position: absolute;
  top: 6px;
  left: 3px;
  right: 3px;
  transform: rotate(-28deg);
}

.upper-deck {
  display: grid;
  grid-template-columns: 1fr minmax(280px,450px) 1fr;
  gap: 26px;
  align-items: stretch;
  padding: 20px 18px 16px;
}

.portrait-frame {
  padding: 10px;
  background: linear-gradient(145deg,#74706c,#3a3836 18%,#2c2b29 80%,#66625e);
  border: 2px solid #1a1918;
  box-shadow: 1px 1px #807b76,inset 2px 2px 2px #99938e,inset -3px -3px 3px #161514;
}

.portrait-screen {
  height: 278px;
  overflow: hidden;
  position: relative;
  background: #09090b;
  border: 4px solid #151413;
  border-bottom-color: #706c68;
  border-right-color: #5e5b58;
  box-shadow: inset 0 0 20px #000000;
  border-color: #0c0c0f #77716a #77716a #0c0c0f;
}

.portrait {
  width: 100%;
  height: auto;
  background-image: url('assets/serpent-states.webp');
  background-size: 200% 200%;
  background-position: 0% 0%;
  image-rendering: pixelated;
  filter: sepia(.12) saturate(.55) brightness(1.14) contrast(1.07);
  transform-origin: center bottom;
  animation: idle-drift 11s steps(4,end) infinite;
  aspect-ratio: 1;
  position: absolute;
  left: 0;
  top: -7px;
}

.portrait[data-mouth=partial] {
  background-position: 100% 0%;
}

.portrait[data-mouth=open] {
  background-position: 0% 100%;
}

.portrait[data-mouth=blink] {
  background-position: 100% 100%;
}

.scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,#00000033 0 1px,transparent 1px 3px);
  opacity: .55;
  box-shadow: inset 0 0 24px 7px #00000099;
}

.screen-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: url('assets/metal-grain.svg');
  mix-blend-mode: screen;
  animation: interference 23s steps(1,end) infinite;
}

.nameplate {
  text-align: center;
  line-height: 20px;
  font-size: 10px;
  color: #b6b0a9;
  padding-top: 7px;
  text-shadow: 0 -1px #121110;
}

.hardware {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
}

.bolt {
  width: 17px;
  height: 17px;
}

.bolt::after {
  top: 8px;
  left: 4px;
  right: 4px;
}

.lamp-housing {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1f1e1d;
  box-shadow: 1px 1px #7a7571,inset 1px 1px 3px #000000;
  display: grid;
  place-items: center;
}

.lamp {
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background: #d1b17b;
  box-shadow: inset 2px 2px 3px #ffdfaa,inset -2px -2px 3px #5b4733;
}

.tube {
  height: 97px;
  width: 23px;
  border: 3px solid #1d1c1a;
  outline: 1px solid #6e6a66;
  background: linear-gradient(90deg,#272624,#615e5a 40%,#353331);
  box-shadow: inset 2px 0 5px #000000;
  position: relative;
}

.tube span {
  position: absolute;
  inset: 28% 4px 6px;
  background: repeating-linear-gradient(0deg,#65625e 0 4px,#9d9892 5px,#736f6b 6px);
  opacity: .75;
}

.tube.short {
  height: 50px;
}

.scale {
  display: flex;
  gap: 6px;
}

.scale i {
  height: 8px;
  width: 2px;
  background: #1c1b1a;
  box-shadow: 1px 0 #7d7974;
}

.scale i:nth-child(3) {
  height: 13px;
}

.speaker {
  width: 65%;
  height: 93px;
  max-width: 100px;
  border: 3px solid #2a2927;
  box-shadow: 1px 1px #6c6864,inset 2px 2px 4px #070707;
  background: repeating-linear-gradient(0deg,#171716 0 3px,#504d4a 4px 5px);
}

.dial {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 6px solid #2c2b29;
  outline: 1px solid #797570;
  box-shadow: 2px 4px 4px #161514,inset 2px 2px 2px #89847f;
  background: repeating-conic-gradient(#4d4a47 0 5deg,#3a3836 6deg 12deg);
  position: relative;
}

.dial::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #3d3b39;
  box-shadow: inset 2px 2px 4px #676460;
}

.dial i {
  height: 17px;
  width: 3px;
  background: #d0ae77;
  position: absolute;
  top: 6px;
  left: 24px;
  transform: rotate(30deg);
  transform-origin: center 20px;
}

.status-lights {
  display: flex;
  gap: 10px;
}

.status-lights i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #302f2d;
  box-shadow: inset 1px 1px 2px #0b0b0a,1px 1px #6e6a66;
}

.status-lights i:first-child {
  background: #a5b5d3;
}

.lower-deck {
  border-top: 2px solid #1b1a19;
  box-shadow: 0 -1px #77736e;
  padding: 14px 10px 0;
}

.response-frame,.choices-frame {
  background: #101013ed;
  border: 3px solid;
  border-color: #08080a #77716a #77716a #08080a;
  box-shadow: inset 2px 2px 8px #040404;
}

.panel-heading {
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 17px 0;
  color: #bbab91;
  font-size: 10px;
  letter-spacing: .18em;
}

.panel-heading #signal {
  font-size: 8px;
  color: #9e9484;
}

body[data-speaking=true] #signal {
  color: #e9c58c;
}

.response-scroll {
  padding: 10px 17px 16px;
  scrollbar-color: #64615d #121110;
  scrollbar-width: thin;
  min-height: 80px;
  overflow: visible;
  scroll-margin-top: 18px;
}

#caption {
  scroll-margin-top: 18px;
  margin: 0;
}

.control-rail {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 0;
  align-items: start;
}

.control-rail button,dialog button {
  min-height: 44px;
  padding: 6px 13px;
  border: 2px solid;
  border-color: #8d8174 #161418 #161418 #8d8174;
  background: linear-gradient(#494344,#2c292c);
  box-shadow: 1px 2px 0 #131312;
  color: #e5d7bf;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px #09080b;
  letter-spacing: .06em;
}

.control-rail button:active:not(:disabled),dialog button:active {
  border-color: #222120 #7a7671 #76726e #1d1c1b;
  transform: translateY(1px);
}

.control-rail button:hover:not(:disabled),dialog button:hover {
  color: #fff0d1;
  background: #5a5048;
}

#mute {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

#mute i {
  display: block;
  width: 6px;
  height: 6px;
  background: #e3c289;
  box-shadow: 0 0 0 2px #171419;
}

#mute[aria-pressed=true] i {
  background: #746774;
}

#motion[aria-pressed=true] {
  color: #ffe4b0;
  border-bottom-color: #d1b888;
}

.choices-frame {
  padding: 9px 12px 10px;
  scrollbar-color: #64615d #121110;
  scrollbar-width: thin;
  overflow: visible;
}

.choices-frame ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.choices-frame button {
  display: flex;
  width: 100%;
  gap: 12px;
  text-align: left;
  color: #ddd0bc;
  background: none;
  border: 1px solid transparent;
  min-height: 44px;
  padding: 9px 7px;
  font-size: 16px;
  line-height: 1.35;
}

.choice-number {
  min-width: 22px;
  color: #c7b496;
  font-size: 14px;
}

.choices-frame button:hover {
  background: #3e352b;
  color: #fff0d3;
  border-color: #8c7655;
}

.choices-frame button[data-visited=true] .choice-number {
  color: #d4bd93;
}

.console-bottom {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 3px 3px 0;
}

.console-bottom .engraved {
  font-size: 10px;
  margin-left: auto;
}

.bottom-grille {
  height: 8px;
  width: 150px;
  background: repeating-linear-gradient(90deg,#1d1c1b 0 2px,#6c6964 3px,#3d3b38 4px 7px);
}

.skip {
  position: absolute;
  z-index: 9;
  top: -200px;
  background: #282625;
  color: #dfd7ce;
  padding: 12px;
}

.skip:focus {
  top: 5px;
}

.sr-only {
  position: absolute!important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

dialog {
  width: min(760px,calc(100% - 30px));
  max-height: 85svh;
  color: #ece3d2;
  background: #1a181c;
  border: 6px ridge #686561;
  padding: 18px;
  box-shadow: 0 20px 70px #000000;
  border-color: #756b60;
}

dialog::backdrop {
  background: #000000bb;
}

dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #575451;
  padding-bottom: 12px;
  gap: 15px;
}

dialog h2 {
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--amber);
  margin: 0;
}

dialog #history {
  max-height: 60svh;
  overflow: auto;
  padding-right: 10px;
  scrollbar-color: #64615d #121110;
}

dialog article {
  padding: 16px 0;
  border-bottom: 1px solid #403e3c;
}

dialog article:last-child {
  border: 0;
}

dialog h3 {
  font: inherit;
  font-size: 14px;
  color: var(--amber);
  margin: 0 0 10px;
}

dialog p {
  line-height: 1.65;
  margin: 0;
  font-size: 15px;
}

body.still *,body.still *::before,body.still *::after {
  animation: none!important;
}

body.still .portrait {
  transform: none;
}

.question-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 8px 7px 0;
  padding-top: 9px;
  border-top: 1px solid #464441;
  border-top-color: #53483b;
}

.question-navigation button {
  width: auto;
  min-height: 40px;
  font-size: 12px;
  letter-spacing: .06em;
  color: #cabda7;
  padding: 8px 4px;
}

.question-navigation button:last-child {
  margin-left: auto;
}

#restart-dialog {
  max-width: 440px;
}

#restart-description {
  margin: 20px 0;
}

.restart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.restart-actions button {
  min-height: 44px;
  padding: 10px 14px;
}

body.held-gaze .portrait,body.held-gaze .screen-noise {
  animation: none!important;
  transform: none!important;
}

.serial,.nameplate {
  color: #cbbdA6;
}

.response-scroll,.choices-frame,dialog #history {
  scrollbar-color: #86745d #111114;
}

dialog header,dialog article {
  border-bottom-color: #53483b;
}

.garden img,.garden canvas,.garden video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
  filter: brightness(1.18);
}

#answer-visual {
  margin: 0;
  white-space: pre-wrap;
  font-size: 17px;
  line-height: 1.5;
  color: #eee5d7;
  text-shadow: 1px 1px #050507;
}

#answer-visual .spoken-sentence {
  color: #fff0d6;
}

#answer-visual .spoken-word {
  color: #ffe2a8;
  background: #5b493d;
  border-radius: 2px;
}

.choices-frame button[data-visited=true] {
  color: #bfb4a3;
}

.choices-frame button[data-visited=true] span:last-child {
  font-style: italic;
}

.utilities {
  position: relative;
  margin-left: auto;
}

.utilities summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  border: 2px solid;
  border-color: #8d8174 #161418 #161418 #8d8174;
  background: linear-gradient(#494344,#2c292c);
  color: #e5d7bf;
  font-size: 12px;
  font-weight: bold;
  list-style: none;
}

.utilities summary::-webkit-details-marker {
  display: none;
}

.utilities summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.utility-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 12;
  padding: 8px;
  display: grid;
  gap: 6px;
  min-width: 160px;
  background: #29272a;
  border: 2px ridge #8d8174;
  box-shadow: 0 4px 12px #0009;
}

.utility-menu button {
  width: 100%;
}

.held-gaze .upper-deck {
  scroll-margin-top: 8px;
}

.held-gaze .response-scroll {
  min-height: 84px;
}

@keyframes power-on{from{opacity:0;filter:brightness(.5)}to{opacity:1;filter:brightness(1)}}
@keyframes idle-drift{0%,100%{transform:translate(0,0)}42%{transform:translate(1px,1px)}73%{transform:translate(-1px,0)}}
@keyframes interference{0%,96%,98%,100%{opacity:0}97%{opacity:.035}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.portrait{transform:none!important}}

@media(max-width:650px){
  body{padding:8px 6px;font-size:15px}
  .console{padding:0 6px 3px}
  .console::before,.console::after,.hardware{display:none}
  .console-top{height:30px;padding:0 7px}
  .engraved{font-size:15px}.serial{font-size:8px}
  .upper-deck{display:block;position:sticky;top:0;z-index:3;padding:8px 3px;background:#29272af5}
  .portrait-frame{max-width:320px;margin:auto;padding:5px}
  .portrait-screen{height:140px}
  .portrait{width:210px;left:calc(50% - 105px);top:-9px}
  .nameplate{font-size:9px;padding-top:2px;line-height:15px}
  .lower-deck{padding:8px 2px 0}
  .panel-heading{padding-left:10px;height:22px}
  .response-scroll{min-height:48px;padding:8px 10px 12px;scroll-margin-top:190px}
  #answer-visual{font-size:16px}
  #caption{scroll-margin-top:190px}
  .control-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 0}
  .control-rail button,.utilities summary{font-size:11px;padding:6px 3px;letter-spacing:0;min-height:44px}
  #mute{margin:0;justify-content:center;gap:4px}
  #mute i{width:5px;height:5px}
  #hear-opening{grid-column:1/-1}
  .utilities{margin:0}
  .utility-menu button{font-size:12px}
  .choices-frame{padding:5px 4px}
  .choices-frame button{font-size:15px;min-height:44px;gap:5px;padding:9px 4px}
  .choice-number{min-width:20px}
  .question-navigation{gap:4px 10px;margin:6px 2px 0;padding-top:6px}
  .question-navigation button{font-size:11px}
  .console-bottom{gap:12px;height:26px}.bottom-grille{width:80px}
  dialog{padding:12px}dialog p{font-size:15px}
  .held-gaze .response-scroll{min-height:72px}
}
@media(max-width:650px) and (max-height:620px){
  .portrait-screen{height:112px}
  .portrait{width:180px;left:calc(50% - 90px);top:-8px}
  .upper-deck{padding:5px 3px}
  .response-scroll{scroll-margin-top:150px}
  #caption{scroll-margin-top:150px}
}
@media(min-width:651px) and (max-height:800px){
  .upper-deck{grid-template-columns:1fr minmax(280px,380px) 1fr;padding-top:12px;padding-bottom:12px}
  .portrait-screen{height:240px}
}
@media(forced-colors:active){
  .choices-frame button[data-visited=true] span:last-child{text-decoration:underline dotted}
  #answer-visual .spoken-word{outline:1px solid Highlight}
}

.subject-title { margin: 4px 8px 8px; color: var(--ivory, #e8dfc6); font: inherit; font-size: 16px; letter-spacing: .04em; }