.ar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.ar-canvas {
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 340 / 560;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 3px var(--color-border);
  background: #0b0e1a;
  cursor: pointer;
  touch-action: none;
}

.ar-controls {
  display: flex;
  gap: 18px;
}

.ar-btn {
  min-width: 64px;
  height: 54px;
  padding: 0 18px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.3rem;
  cursor: pointer;
  user-select: none;
}
.ar-btn:active, .ar-btn:hover { border-color: #4fd8e0; }