/* Layout: one screen. The platter fills the stage and a small control deck floats under it. */
:root {
  --page: #e3e5e8;
  --deck: #f7f8f9;
  --deck-edge: #d0d4d9;
  --deck-shadow: rgba(28, 34, 44, .10);
  --chip: #e9ecf0;
  --chip-on: #dde2e8;
  --text: #1c2026;
  --muted: #6a717b;
  --accent: #d24f0c;
  --focus: #1d6fd6;
  --swatch-ring: rgba(20, 24, 30, .16);
  /* platter, read by the canvas */
  --rim-hi: #f7f8f9;
  --rim-mid: #d5d8dc;
  --rim-lo: #aab0b7;
  --rim-edge: #858b94;
  --dot: #393e46;
  --disc: #ffffff;
  --grid: #d8e0ec;
  --grid-strong: #adbcd3;
  --edge-shade: rgba(28, 34, 44, .14);
  --shadow: rgba(28, 34, 44, .32);
  --cursor: #393e46;
  --cursor-halo: rgba(255, 255, 255, .92);
  --font-ui: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --font-readout: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #141619;
    --deck: #1f2226;
    --deck-edge: #33373d;
    --deck-shadow: rgba(0, 0, 0, .4);
    --chip: #2a2e33;
    --chip-on: #343940;
    --text: #e6e8eb;
    --muted: #98a0aa;
    --accent: #ff8340;
    --focus: #6aa6ff;
    --swatch-ring: rgba(255, 255, 255, .28);
    --rim-hi: #767c85;
    --rim-mid: #4d5259;
    --rim-lo: #2e3237;
    --rim-edge: #0b0c0e;
    --dot: #101215;
    --disc: #eeefec;
    --grid: #cfd6e2;
    --grid-strong: #a3b2c9;
    --edge-shade: rgba(0, 0, 0, .22);
    --shadow: rgba(0, 0, 0, .65);
    --cursor: #393e46;
    --cursor-halo: rgba(255, 255, 255, .92);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #141619;
  --deck: #1f2226;
  --deck-edge: #33373d;
  --deck-shadow: rgba(0, 0, 0, .4);
  --chip: #2a2e33;
  --chip-on: #343940;
  --text: #e6e8eb;
  --muted: #98a0aa;
  --accent: #ff8340;
  --focus: #6aa6ff;
  --swatch-ring: rgba(255, 255, 255, .28);
  --rim-hi: #767c85;
  --rim-mid: #4d5259;
  --rim-lo: #2e3237;
  --rim-edge: #0b0c0e;
  --dot: #101215;
  --disc: #eeefec;
  --grid: #cfd6e2;
  --grid-strong: #a3b2c9;
  --edge-shade: rgba(0, 0, 0, .22);
  --shadow: rgba(0, 0, 0, .65);
  --cursor: #393e46;
  --cursor-halo: rgba(255, 255, 255, .92);
  color-scheme: dark;
}

html {
  height: 100%;
  box-sizing: border-box;
  /* viewport-fit=cover lets the page run under the notch and home indicator; keep the UI out of them. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: inherit; }
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page);
  color: var(--text);
  font: 14px/1.5 var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  /* An instrument, not a document: long presses and drags never select text or open callouts. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.app { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }

.stage {
  position: relative;
  min-height: 0;
  padding-block: 12px;
  /* The platter may run almost to the screen edge; the overlays keep the 16px gutter. */
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
}
#board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.transport {
  position: absolute;
  top: 12px;
  right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  justify-items: end;
  gap: 8px;
}
.transport .buttons { display: flex; gap: 6px; }
.readout {
  display: grid;
  justify-items: end;
  gap: 4px;
  font: 500 12px/1 var(--font-readout);
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.readout > div { display: flex; align-items: baseline; gap: 6px; }
.readout b { min-width: 5ch; font-size: 20px; font-weight: 500; text-align: right; color: var(--text); }
.readout #perframe b { font-size: 15px; }

.hint {
  position: absolute;
  bottom: 8px;
  left: max(16px, env(safe-area-inset-left, 0px));
  max-width: min(340px, calc(100% - 32px));
  margin: 0;
  padding: 8px 34px 8px 12px;
  background: var(--deck);
  border: 1px solid var(--deck-edge);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  word-break: auto-phrase;
  text-wrap: pretty;
  pointer-events: none;
  transition: opacity .4s;
}
.hint ul { margin: 0; padding: 0; list-style: none; color: var(--muted); }
.hint b { font-weight: 600; color: var(--text); }
.hint .close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 18px/1 var(--font-ui);
  cursor: pointer;
  pointer-events: auto;
}
.hint .close:hover { background: var(--chip); color: var(--text); }
.hint.fading { opacity: 0; }

.toast {
  position: absolute;
  bottom: 8px;
  left: 50%;
  translate: -50% 0;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  background: var(--text);
  color: var(--page);
  border-radius: 8px;
  font-size: 12.5px;
  pointer-events: none;
}

.dock {
  display: flex;
  justify-content: center;
  padding-block: 0 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.deck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 14px;
  max-width: 100%;
  padding: 6px 10px;
  background: var(--deck);
  border: 1px solid var(--deck-edge);
  border-radius: 14px;
  box-shadow: 0 2px 8px var(--deck-shadow);
}
.group { display: flex; align-items: center; gap: 2px; }

.deck button, .transport button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.transport button { background: var(--deck); box-shadow: inset 0 0 0 1px var(--deck-edge); }
:is(.deck, .transport) button:hover { background: var(--chip); }
:is(.deck, .transport) button[aria-pressed="true"] { background: var(--chip-on); color: var(--accent); }
:is(.deck, .transport) button:focus-visible, .hint .close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.deck button:disabled { opacity: .35; cursor: default; background: transparent; }
.transport button:disabled { opacity: .45; cursor: default; background: var(--deck); }
:is(.deck, .transport) svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.transport svg { width: 18px; height: 18px; fill: currentColor; stroke-width: 1.4; }
.transport #slower svg, .transport #faster svg, .transport .camera svg { fill: none; stroke-width: 2; }
.transport .camera { width: 58px; grid-auto-flow: column; gap: 3px; font: 500 12px/1 var(--font-readout); }

.swatch i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px var(--swatch-ring);
}
.deck .swatch[aria-pressed="true"] { background: transparent; }
.swatch[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px var(--swatch-ring), 0 0 0 2px var(--deck), 0 0 0 4px var(--text); }

.size i { width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; }
.deck .size { width: 34px; }

.deck .wide { width: auto; padding: 0 10px 0 8px; grid-auto-flow: column; gap: 4px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .hint { transition: none; }
}