:root {
  color-scheme: light;
  --ddd-brand: #597f5b;
  --ddd-brand-active: #3f5c41;
  --ddd-ink: #17211d;
  --brand: var(--ddd-brand);
  --brand-hover: #496a4b;
  --brand-active: var(--ddd-brand-active);
  --brand-soft: #acbfad;
  --line: var(--brand-active);
  --shadow: rgba(23, 33, 29, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--brand);
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) min(58vw, 28rem)),
    linear-gradient(135deg, var(--brand-active) 0%, var(--brand) 58%, var(--brand-soft) 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow-x: hidden;
}

main {
  width: min(980px, calc(100% - 32px));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 24px 0;
}

.molecule {
  --core-size: clamp(210px, 24vw, 310px);
  --node-size: clamp(62px, 7vw, 88px);
  position: relative;
  width: min(1020px, 100%);
  aspect-ratio: 1000 / 720;
  min-height: 520px;
  margin: 0 auto;
}

.bonds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.bonds line {
  stroke: var(--line);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 18 16;
  filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.28));
}

.core,
.node {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 20px 50px var(--shadow);
}

.core {
  width: var(--core-size);
  height: var(--core-size);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: clamp(8px, 1.3vw, 13px) solid var(--brand-active);
  background: #fff;
  overflow: hidden;
  isolation: isolate;
  z-index: 3;
}

.core img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
}

.core:focus-visible,
.core:hover {
  outline: none;
  box-shadow: 0 28px 60px rgba(23, 32, 42, 0.22);
}

.node {
  width: var(--node-size);
  height: var(--node-size);
  color: var(--brand-active);
  background: #fff;
  border: clamp(3px, 0.45vw, 5px) solid currentColor;
  transform: translate(-50%, -50%);
  transition: translate 160ms ease, box-shadow 160ms ease;
  z-index: 2;
}

.node:focus-visible,
.node:hover {
  outline: none;
  translate: 0 -4px;
  box-shadow: 0 28px 60px rgba(23, 32, 42, 0.22);
}

.node-content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.icon-img {
  width: var(--icon-size, 66%);
  height: var(--icon-size, 66%);
  object-fit: contain;
  display: block;
}

@media (max-width: 680px) {
  main {
    align-content: center;
    width: 100%;
    padding: 18px 0;
  }

  .molecule {
    --core-size: clamp(165px, 47vw, 230px);
    --node-size: clamp(52px, 15vw, 70px);
    width: min(calc(100vw - 22px), 430px);
    aspect-ratio: 1;
    min-height: 0;
  }

  .bonds line {
    stroke-width: 7;
    stroke-dasharray: 14 12;
  }
}

@media (max-width: 680px) and (orientation: portrait) {
  body {
    background:
      radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 72vw),
      linear-gradient(145deg, var(--brand-active) 0%, var(--brand) 62%, var(--brand-soft) 100%);
    background-attachment: fixed;
    background-size: 100% 100%;
  }

  main {
    padding:
      max(14px, env(safe-area-inset-top))
      0
      max(14px, env(safe-area-inset-bottom));
  }

  .molecule {
    width: min(calc(100vw - 18px), 410px);
    margin: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node {
    transition: none;
  }
}