:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  background: #090b12;
  color: #edf1ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 960px;
  min-height: 720px;
  background: radial-gradient(circle at 50% 15%, #18203a, #090b12 55%);
}

main {
  width: 960px;
  margin: 0 auto;
  padding: 18px 0;
}

header, .controls, .result {
  display: flex;
  align-items: center;
}

header { justify-content: space-between; }
h1 { margin: 0; font-size: 24px; letter-spacing: 0.12em; }
p { margin: 4px 0 14px; color: #99a4c4; }
#status { color: #62e6a7; letter-spacing: 0.12em; }

.controls {
  gap: 10px;
  padding: 12px;
  border: 1px solid #333d5b;
  background: #111624;
}

label { display: flex; align-items: center; gap: 8px; }
select, button {
  border: 1px solid #4a587e;
  border-radius: 3px;
  padding: 7px 10px;
  background: #1a2237;
  color: inherit;
  font: inherit;
}
button { cursor: pointer; }
button:hover { background: #283452; }
.operator { color: #6e7fae; }

.result {
  justify-content: space-between;
  min-height: 48px;
  gap: 20px;
}

#result-details { color: #aab4d2; font-size: 12px; text-align: right; }

canvas {
  display: block;
  width: 960px;
  height: 540px;
  max-width: 100%;
  border: 1px solid #3d496b;
  background: #080b13;
}