/* The viewport is fixed; applet.js is the single owner of overall scaling. */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
html { background: #101c28; color: #eef6ff; font: 20px/1.3 system-ui, sans-serif; }
body { --accent: #91e3cb; }

#design {
  /* Design dimensions come from DESIGN_WIDTH / DESIGN_HEIGHT in applet.js. */
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  visibility: hidden; /* Avoid showing the unscaled design before the first fit. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 64px 20px;
  gap: 12px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #304455;
  border-radius: 20px;
  background: #14293b;
}
header, .reading { min-width: 0; min-height: 0; overflow: hidden; }
p, h1 { margin: 0; }
.eyebrow { color: var(--accent); font-size: 14px; letter-spacing: 0.12em; }
h1 { font-size: 32px; line-height: 1.2; }
h1, #variable-name, #value, #status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading { display: flex; flex-direction: column; justify-content: center; }
#variable-name { color: #b5c9da; font-size: 18px; }
#value { display: block; font-size: 64px; line-height: 1.25; font-variant-numeric: tabular-nums; }
button {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #102a25;
  font: 600 22px system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
button:active { filter: brightness(0.9); }
button:disabled { opacity: 0.6; cursor: default; }
#status { color: #b5c9da; font-size: 14px; line-height: 20px; }