.square-circle-field {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(690px, 132%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 0 58%, rgba(0,0,0,0.82) 72%, transparent 94%);
  mask-image: radial-gradient(circle, #000 0 58%, rgba(0,0,0,0.82) 72%, transparent 94%);
}

.square-circle-field::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194,20,58,0.075), rgba(224,67,92,0.025) 45%, transparent 72%);
  filter: blur(30px);
}

.square-circle-field canvas {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.square-circle-debug {
  position: fixed;
  z-index: 400;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  min-height: 46px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  color: #ece4d6;
  background: rgba(16,12,7,0.91);
  box-shadow: 0 18px 42px -20px rgba(16,12,7,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.square-circle-debug__seed {
  max-width: 130px;
  padding: 0 9px;
  overflow: hidden;
  color: #b8ab97;
  font-size: 0.62rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.square-circle-debug button {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  color: #ece4d6;
  background: rgba(255,255,255,0.055);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.square-circle-debug button:hover {
  border-color: rgba(224,67,92,0.55);
  background: rgba(194,20,58,0.19);
}

.square-circle-debug button:active { transform: scale(0.97); }
.square-circle-debug button:focus-visible { outline-color: #f06a82; }
.square-circle-debug svg { width: 14px; height: 14px; overflow: visible; }
.square-circle-debug svg * { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 800px) {
  .square-circle-field { width: min(610px, 142vw); }
}

@media (max-width: 520px) {
  .square-circle-field { width: 138vw; }
  .square-circle-debug {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .square-circle-debug__seed { display: none; }
  .square-circle-debug button { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .square-circle-debug button { transition: none; }
}