:root {
  --toolbar-stage-size: 120px;
  --toolbar-size: 104px;

  --page-bg: #f4f4f4;

  --normal-fill: #d4d4d4;
  --hover-fill: #c8c8c8;
  --selected-fill: #bfe8b8;

  --stroke: #7b7b7b;
  --stroke-hover: #5f5f5f;

  --text: #2f2f2f;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page-bg);
}

.demo-page {
  min-height: 100vh;
  display: block;
  padding: 0;
  pointer-events: none;
}

.demo-card {
  pointer-events: none;
}

.toolbar-stage {
  position: fixed;
  left: 16px;
  top: 16px;
  width: min(var(--toolbar-stage-size), calc(100vw - 32px));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  pointer-events: none;
  z-index: 999;
}

.radial-toolbar {
  position: relative;
  width: min(var(--toolbar-size), 86%);
  aspect-ratio: 1;
  overflow: visible;
  user-select: none;
  pointer-events: none;
  transform: scale(0.8);
  transform-origin: center;
}

.slice-button,
.center-button {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
  font: inherit;
}

.slice-button {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 150ms ease,
    visibility 0s linear 220ms;
}

.center-button {
  z-index: 10;
  opacity: 1;
  visibility: visible;
}

.slice-button:hover {
  z-index: 100;
}

.center-button:hover {
  z-index: 110;
}

.radial-toolbar:has(.center-button:hover) .slice-button,
.radial-toolbar:has(.slice-button:hover) .slice-button,
.radial-toolbar.is-open .slice-button {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.slice-svg,
.center-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  pointer-events: none;
}

.slice-shape,
.center-shape {
  fill: var(--normal-fill);
  stroke: var(--stroke);
  stroke-width: 5;
  stroke-linejoin: round;
  transition:
    fill 150ms ease,
    stroke 150ms ease,
    filter 150ms ease;
  pointer-events: visiblePainted;
}

.tool-icon {
  pointer-events: auto;
  filter: grayscale(1);
  opacity: 0.78;
}

.center-icon {
  pointer-events: auto;
  filter: none;
  opacity: 1;
}

.slice-button:hover .slice-shape {
  fill: var(--hover-fill);
  stroke: var(--stroke-hover);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16));
}

.center-button:hover .center-shape {
  stroke: var(--stroke-hover);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16));
}

.center-button .center-shape {
  fill: var(--selected-fill);
}

.center-button .center-icon {
  filter: none;
  opacity: 1;
}

.toolbar-stage.is-dragging .center-button {
  cursor: grabbing;
}

@media (max-width: 560px) {
  :root {
    --toolbar-stage-size: 104px;
    --toolbar-size: 90px;
  }

  .toolbar-stage {
    width: min(var(--toolbar-stage-size), calc(100vw - 24px));
  }
}