:root { color-scheme: dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #101214; color: #e8edf2; }
main { width: min(960px, calc(100% - 16px)); margin: 24px auto; }
[hidden] { display: none !important; }
.light-only { display: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; align-items: stretch; }
.toolbar-group { display: flex; align-items: center; gap: 7px; padding: 6px; background: #171b1f; border: 1px solid #35414a; border-radius: 8px; }
.time-group { flex: 0 1 auto; }
.compact-label { margin: 0 2px 0 4px; color: #9ca8b3; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.step-input { display: flex; align-items: center; gap: 5px; color: #9ca8b3; }
.step-input input { width: 76px; text-align: right; }
.toolbar-help, .keyboard-help { color: #9ca8b3; font-size: 14px; margin: 7px 0 12px; }
.keyboard-help { color: #f4b740; }
button, input, select { font: inherit; color: inherit; background: #20262c; border: 1px solid #5c6973; border-radius: 4px; padding: 6px 10px; }
button:active { background: #384752; }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: #f4b740; font-family: "Segoe UI Symbol", system-ui, sans-serif; font-size: 20px; line-height: 1; }
.icon-button:hover { background: #29323a; border-color: #82919c; }
.icon-button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #f4b740; outline-offset: 2px; }
.device-wrap {
  container-type: inline-size;
  width: min(720px, 100%);
  margin: 58px auto 24px;
}
.device {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 652.36;
  margin: 0;
  padding: 10.5556cqw 15.5556cqw 10cqw;
  box-sizing: border-box;
  background: linear-gradient(145deg, #2b2e2d 0%, #1a1c1b 58%, #111312 100%);
  border: 1px solid #3d4240;
  border-radius: 1.9444cqw 1.9444cqw 3.0556cqw 3.0556cqw;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), inset -7px -8px 14px rgb(0 0 0 / 25%), 0 18px 30px rgb(0 0 0 / 38%);
}
.antenna {
  position: absolute;
  top: -6.6667cqw;
  width: 4.7222cqw;
  height: 7.3611cqw;
  border-radius: .4167cqw .4167cqw .1389cqw .1389cqw;
  background: repeating-linear-gradient(to bottom, #b8842f 0 4px, #74501d 4px 7px);
  box-shadow: inset 2px 0 2px rgb(255 227 132 / 45%), 0 1px 3px rgb(0 0 0 / 70%);
}
.antenna::after {
  content: '';
  position: absolute;
  left: -.6944cqw;
  bottom: 0;
  width: 6.1111cqw;
  height: 1.3889cqw;
  border-radius: .4167cqw .4167cqw .1389cqw .1389cqw;
  background: linear-gradient(90deg, #72501e, #d0a04a 45%, #76531f);
}
.antenna-left { left: 17%; transform: translateX(-50%); }
.antenna-right { right: 17%; transform: translateX(50%); }
.screen-bezel {
  padding: 1.5278cqw 1.6667cqw 1.8056cqw;
  background: #070808;
  border: 1px solid #303331;
  border-radius: .6944cqw;
  box-shadow: inset 0 2px 5px #000, 0 1px 0 rgb(255 255 255 / 7%);
}
#display {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: white;
}
#display:focus { outline: 2px solid #f4b740; outline-offset: 3px; }
#status { color: #ffcc66; min-height: 1.4em; }
.controls { display: flex; align-items: center; justify-content: space-between; margin-top: 9.3056cqw; padding: 0 0 0 3.3333cqw; }
.dpad { display: grid; grid-template: repeat(3, 5.9722cqw) / repeat(3, 5.9722cqw); filter: drop-shadow(0 .6944cqw .4167cqw rgb(0 0 0 / 35%)); }
.dpad button { min-width: 5.9722cqw; min-height: 5.9722cqw; padding: 0; border: 0; border-radius: 0; background: linear-gradient(#c86b30, #a84d20); color: #50200e; font-size: 2.3611cqw; font-weight: 800; text-shadow: 0 1px rgb(255 184 111 / 28%); }
.dpad button:active, .face-button:active { background: #dd7b3b; transform: translateY(1px); }
.dpad-up { grid-area: 1 / 2; border-radius: .9722cqw .9722cqw 0 0 !important; }
.dpad-left { grid-area: 2 / 1; border-radius: .9722cqw 0 0 .9722cqw !important; }
.dpad-right { grid-area: 2 / 3; border-radius: 0 .9722cqw .9722cqw 0 !important; }
.dpad-down { grid-area: 3 / 2; border-radius: 0 0 .9722cqw .9722cqw !important; }
.dpad-center { grid-area: 2 / 2; background: linear-gradient(#c86b30, #a84d20); }
.face-buttons { position: relative; top: .6944cqw; display: flex; align-items: center; gap: 3.8889cqw; }
.face-button { width: 10cqw; height: 10cqw; padding: 0; border: 1px solid #7d3518; border-radius: 50%; background: linear-gradient(145deg, #cb6f35, #a84d21); color: #642810; font-size: 3.3333cqw; font-weight: 800; text-shadow: 0 1px rgb(255 187 116 / 32%); box-shadow: inset 2px 2px 2px rgb(255 180 101 / 25%), inset -3px -4px 2px rgb(91 31 7 / 25%), 0 5px 5px rgb(0 0 0 / 35%); }
pre { max-height: 350px; overflow: auto; background: #171b1f; padding: 12px; }

html.light-mode .engineering-only { display: none !important; }
html.light-mode .light-only { display: flex; }
html.light-mode main { width: min(760px, calc(100% - 24px)); margin: 0 auto; padding: 16px 0 24px; }
html.light-mode h1 { margin: 0 0 10px; font-size: clamp(22px, 4vw, 32px); }
html.light-mode .light-toolbar {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: #cbd4dc;
}
html.light-mode .light-toolbar p { margin: 0; }
html.light-mode .light-toolbar button { flex: 0 0 auto; border-color: #a85625; color: #ffd09c; }
html.light-mode .phone-sensor-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #35414a;
  border-radius: 10px;
  background: #171b1f;
}
html.light-mode .phone-sensor-panel strong { display: block; margin-bottom: 4px; }
html.light-mode .phone-sensor-panel p { margin: 0; color: #cbd4dc; font-size: 14px; line-height: 1.4; }
html.light-mode .phone-sensor-panel .phone-sensor-privacy { margin-top: 3px; color: #8f9ba5; font-size: 12px; }
html.light-mode .phone-sensor-panel button { flex: 0 0 auto; border-color: #a85625; color: #ffd09c; }
html.light-mode .device-wrap { margin-top: 58px; }
html.light-mode #status { margin: 10px 0 0; font-size: 14px; }

@media (max-width: 620px) {
  html.light-mode main { width: min(100% - 16px, 760px); padding-top: 10px; }
  html.light-mode .light-toolbar { align-items: flex-start; }
  html.light-mode .light-toolbar p { max-width: 62%; }
  html.light-mode .phone-sensor-panel { align-items: flex-start; flex-direction: column; gap: 12px; }
  html.light-mode .phone-sensor-panel button { width: 100%; }
  html.light-mode .device-wrap { margin-top: 40px; }
}