:root {
  --bg: #fff;
  --ink: #111;
  --g3: #888;
  --g5: #bbb;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  display: grid;
  place-items: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#watch {
  width: min(90vw, calc(100vh - 70px));
  width: min(90vw, calc(100dvh - 70px));
  aspect-ratio: 1;
}

.sheet {
  stroke: #9a5530;
  stroke-width: 0.02;
}

.pin { fill: #6e381b; }

.cut { stroke: #5a2e14; }
.lit { stroke: #f6c7a1; }
.shine { stroke: #f0a878; stroke-width: 0.025; fill: none; }

#mandala .cut { stroke-width: 0.008; stroke-opacity: 0.7; }
#mandala .lit { stroke-width: 0.008; stroke-opacity: 0.35; }

/* Controls, after the style guide: monospace, 1px borders, darken on hover. */
.controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, 90vw);
}

.controls input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--ink); height: 16px; }

#when {
  flex: 0 0 auto;
  min-width: 17ch;
  color: var(--g3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

button {
  font: inherit; padding: 4px 9px; background: #fff; color: var(--ink);
  border: 1px solid var(--g5); border-radius: 2px; cursor: pointer;
}
button:hover { border-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }