body { position: relative; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--line) .8px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 72% 48%, #000, transparent 72%);
  opacity: .55;
}

main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-content: center;
  padding-block: 48px 64px;
}

.intro-detail { display: flex; align-items: center; gap: 13px; margin-top: 36px; height: 5px; }
.intro-detail span:first-child { width: 64px; height: 1px; background: var(--accent); opacity: .35; }
.intro-detail span:nth-child(2) { width: 4px; height: 4px; border: 1px solid var(--accent); opacity: .65; }
.intro-detail span:last-child { width: 4px; height: 4px; background: #bd8b68; transform: rotate(45deg); }

.contour { width: 100%; max-width: 420px; justify-self: end; pointer-events: none; }
.contour svg { width: 100%; height: auto; display: block; overflow: visible; }
.contour-line { fill: none; stroke: var(--accent); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.contour-line-1 { opacity: .24; }
.contour-line-2 { opacity: .32; }
.contour-line-3 { opacity: .4; }
.contour-line-4 { opacity: .48; }
.contour-line-7 { opacity: .7; }
.contour-line-8 { opacity: .8; }
.contour-guide { fill: none; stroke: var(--line); stroke-width: .85; }
.contour-dot-halo { stroke: var(--accent); opacity: .3; }
.contour-dot { fill: var(--accent); animation: quiet-pulse 6s ease-in-out infinite; }
.contour-accent { fill: #bd8b68; }
.contour-label { fill: var(--muted); font: 9px ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; opacity: .65; }

@keyframes quiet-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

@media (max-width: 740px) {
  main { grid-template-columns: 1fr; gap: 22px; padding-block: 50px 32px; }
  .intro { padding-block: 0; }
  .intro-detail { margin-top: 28px; }
  .contour { max-width: 270px; justify-self: center; }
  body::before { mask-image: radial-gradient(ellipse at 55% 64%, #000, transparent 70%); }
}

@media (prefers-reduced-motion: reduce) {
  .contour-dot { animation: none; opacity: .8; }
}