:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000;
  color: #f5f5f5;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

button, input { font: inherit; }

button {
  border: 1px solid #444;
  border-radius: 999px;
  background: #252525;
  color: #fff;
  padding: .6rem 1rem;
  cursor: pointer;
}

button:hover, button:focus-visible { background: #353535; border-color: #777; }

.app-shell {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0;
  background: #000;
}

.stage {
  width: min(100vw, 177.7777778vh);
  width: min(100vw, 177.7777778dvh);
  height: min(100vh, 56.25vw);
  height: min(100dvh, 56.25vw);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  touch-action: none;
  user-select: none;
}

#face { width: 100%; height: 100%; display: block; background: #000; }
#face.invert { filter: invert(1); }

dialog {
  width: min(92vw, 720px);
  max-height: 90dvh;
  border: 1px solid #444;
  border-radius: 1.5rem;
  padding: 0;
  background: #161616;
  color: #f5f5f5;
  box-shadow: 0 2rem 7rem #000c;
}

dialog::backdrop { background: #000b; backdrop-filter: blur(8px); }

.settings-card { padding: 1.4rem; overflow: auto; max-height: 90dvh; }
.settings-card > header { display: flex; justify-content: space-between; align-items: start; }
.dialog-actions { display: flex; align-items: center; gap: .5rem; }
.settings-card h1 { margin: 0; font-size: 1.7rem; }
.settings-card h2 { font-size: .9rem; color: #aaa; margin: 1.5rem 0 .75rem; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow { margin: 0 0 .2rem; color: #777; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.close { padding: .25rem .7rem; font-size: 1.5rem; }

.expression-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.expression-grid button { border-radius: .8rem; padding: .75rem .4rem; }

.settings-list { display: grid; gap: .15rem; }
.settings-list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.1rem;
  border-bottom: 1px solid #2c2c2c;
}
.settings-list small { display: block; color: #777; font-size: .68rem; }
.settings-list input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: #fff; }
.range-row { align-items: stretch !important; flex-direction: column; padding: .65rem 0; }
.range-row input { width: 100%; accent-color: #fff; }
.range-row output { float: right; color: #fff; }
.about p { color: #aaa; line-height: 1.6; font-size: .9rem; }
.about-links { display: flex; gap: .75rem; margin: .8rem 0 1rem; }
.about-links a { color: #ddd; }
.danger { color: #ffaaaa; border-color: #693f3f; }

@media (max-width: 700px) {
  .expression-grid { grid-template-columns: repeat(2, 1fr); }
  .dialog-actions #sensorButton { padding: .45rem .7rem; font-size: .78rem; }
}