html, body { margin: 0; }
body { font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
:root { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
[hidden] { display: none !important; }

/* Layout: one full-bleed canvas, a quiet pill row at the bottom that fades when idle. Single dark world by choice. */
:root {
  --void: #050507;
  --ink: #e9e4da;
  --glass: rgba(12, 12, 14, 0.55);
  --edge: rgba(233, 228, 218, 0.18);
  --gold: #d9a441;
  --live: #5fd38a;
  --dim: rgba(233, 228, 218, 0.55);
  --font-ui: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--void); color: var(--ink); }
canvas { display: block; width: 100%; height: 100%; background: var(--void); opacity: 0; transition: opacity 1.4s ease; cursor: pointer; }
canvas.on { opacity: 1; }
.ui {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.desk {
  pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  padding: 8px 10px 8px 14px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 10.5px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  transition: opacity 0.8s ease; max-width: 100%;
}
.readout { display: flex; align-items: center; gap: 10px; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 2s ease-in-out infinite; }
.readout .t { color: var(--dim); min-width: 5.5ch; }
.readout { cursor: help; border-radius: 6px; }
.desk { position: relative; }
.readout:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.desk .tip {
  position: absolute; left: -1px; bottom: calc(100% + 8px); width: max-content; max-width: min(300px, 80vw);
  white-space: normal; text-transform: none; letter-spacing: 0.02em; line-height: 1.45; font-size: 11.5px; color: var(--ink);
  padding: 9px 12px; border-radius: 8px; background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none;
}
.desk:has(.readout:hover) .tip, .desk:has(.readout:focus) .tip { opacity: 1; transform: none; }   /* sits just above the console, flush with its left edge */
.group { display: flex; gap: 4px; padding-left: 14px; border-left: 1px solid var(--edge); }
.desk button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; cursor: pointer;
}
.desk button:hover { border-color: var(--edge); }
.desk button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.desk button.lit { color: var(--gold); border-color: var(--gold); }
body.idle .desk:not(:hover):not(:focus-within) { opacity: 0; }   /* stays up while you're reading or using it */
body.exhibit .desk { opacity: 0; pointer-events: none; }
body.exhibit, body.exhibit canvas { cursor: none; }
.hint {
  position: fixed; left: 50%; top: calc(24px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  font: 500 10.5px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  padding: 9px 14px; border-radius: 8px; background: var(--glass); border: 1px solid var(--edge);
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none; white-space: nowrap;
}
.hint.show { opacity: 1; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .readout .dot { animation: none; } }
@media (max-width: 560px) { .group { padding-left: 0; border-left: 0; } .readout { width: 100%; justify-content: center; } }