:root {
  color-scheme: dark;
  --ink: #e9e8e3;
  --muted: #858783;
  --line: #343733;
  --accent: #d9f26b;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #111311;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  touch-action: manipulation;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 320px;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.topbar {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 30px;
  pointer-events: none;
}

.title, .hint, .tabs { pointer-events: auto; }
.title { font-size: 11px; letter-spacing: .12em; color: var(--muted); }

.tabs {
  position: fixed;
  left: 30px;
  right: 30px;
  bottom: 24px;
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(17, 19, 17, .92);
}

.tab {
  flex: 1;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  touch-action: manipulation;
}

.tab:hover, .tab:focus-visible { color: var(--ink); }
.tab.is-active { color: #111311; }
.tab[data-shape="cube"].is-active { background: #65e58a; }
.tab[data-shape="tetrahedron"].is-active { background: #f27bb5; }
.tab[data-shape="octahedron"].is-active { background: #f3df55; }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
}

@media (max-width: 600px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 18px; gap: 12px; }
  .tabs { max-width: 100%; overflow-x: auto; }
  .tab { white-space: nowrap; padding: 8px 10px; }
  .hint { margin-top: 8px; }
}