html {
  background: #030303;
  color: #f4f6f5;
}

html[data-theme="light"] {
  background: #ffffff;
  color: #0b0b0f;
}

:root {
  color-scheme: dark;
  --bg: #030303;
  --bg-soft: #080909;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.105);
  --line-soft: rgba(255, 255, 255, 0.065);
  --text: #f4f6f5;
  --muted: #a6adaa;
  --faint: #707773;
  --cyan: #9ae6df;
  --green: #a7d9b8;
  --amber: #d8c48a;
  --danger: #d99a9a;
  --nav-bg: transparent;
  --nav-bg-compact: transparent;
  --nav-fade: transparent;
  --hover-bg: rgba(255, 255, 255, 0.065);
  --nav-group-bg: #101211;
  --nav-item-hover: #181b1a;
  --nav-item-shadow: rgba(0, 0, 0, 0.62);
  --nav-button-text: #f4f6f5;
  --control-bg: rgba(255, 255, 255, 0.07);
  --control-bg-strong: rgba(255, 255, 255, 0.105);
  --path-rgb: 109 40 217;
  --path-plane-rgb: 76 29 149;
  --ocean-curve: #5b21b6;
  --wave-purple: #9b72f7;
  --brand-accent: #7c3aed;
  --max: 1140px;
  --radius: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #faf8ff;
  --panel: rgba(124, 58, 237, 0.035);
  --panel-strong: rgba(124, 58, 237, 0.065);
  --line: rgba(17, 17, 24, 0.14);
  --line-soft: rgba(17, 17, 24, 0.08);
  --text: #0b0b0f;
  --muted: #4c4658;
  --faint: #756d83;
  --cyan: #006f69;
  --green: #2f7650;
  --amber: #8d6b11;
  --danger: #9d3f3f;
  --nav-bg: transparent;
  --nav-bg-compact: transparent;
  --nav-fade: transparent;
  --hover-bg: rgba(124, 58, 237, 0.08);
  --nav-group-bg: #ffffff;
  --nav-item-hover: #f4f0ff;
  --nav-item-shadow: rgba(76, 29, 149, 0.18);
  --nav-button-text: #0c100e;
  --control-bg: rgba(124, 58, 237, 0.055);
  --control-bg-strong: rgba(124, 58, 237, 0.095);
  --path-rgb: 109 40 217;
  --path-plane-rgb: 76 29 149;
  --ocean-curve: #5b21b6;
  --wave-purple: #9b72f7;
  --brand-accent: #7c3aed;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 120ms;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: none;
}

::view-transition-new(root) {
  animation-name: theme-reveal;
  clip-path: inset(0 100% 0 0);
}

@keyframes theme-reveal {
  to {
    clip-path: inset(0 0 0 0);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

main {
  position: relative;
  z-index: 1;
}

.wrap {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: 24px;
  min-height: calc(100svh - 62px);
  padding: clamp(48px, 7vh, 76px) 0 clamp(72px, 10vh, 110px);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: 68px;
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 720;
}

.lead {
  max-width: 650px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.hero-copy {
  max-width: 720px;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  margin-bottom: 38px;
  overflow: visible;
}

.hero-copy .actions {
  gap: 8px;
  margin-bottom: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nav-button-text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}

.button:hover,
.button:focus-visible {
  color: var(--text);
  background: var(--nav-item-hover);
  outline: none;
}

.button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: currentColor;
}

.button.github-button {
  gap: 7px;
  padding: 0 13px;
  background: #050607;
  color: #ffffff;
  box-shadow: none;
}

.button.github-button:hover,
.button.github-button:focus-visible {
  background: #111413;
  color: #ffffff;
}

.button.download-button {
  gap: 7px;
  padding: 0 13px;
  background: var(--wave-purple);
  color: #ffffff;
  box-shadow: none;
}

.button.download-button:hover,
.button.download-button:focus-visible {
  background: var(--wave-purple);
  color: #ffffff;
}

.download-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 560px);
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 14px;
  background: #050607;
  overflow: hidden;
}

.download-option {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 106px;
  padding: 16px;
  border-radius: 0;
  color: #ffffff;
  transition: background 160ms ease;
}

.download-option + .download-option {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.07);
}

.download-option:hover,
.download-option:focus-visible {
  background: #8b5cf6;
  outline: none;
}

.download-icon {
  position: relative;
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #cabdff;
}

.download-icon svg {
  width: 46px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.download-icon span {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.download-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.download-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.download-name {
  color: #ffffff;
  font-size: 22px;
  font-weight: 780;
  line-height: 1.05;
}

.download-version {
  color: rgba(255, 255, 255, 0.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.download-detail {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.download-note {
  max-width: 520px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.path-field {
  width: min(100%, 700px);
  height: clamp(430px, 45vw, 620px);
  position: relative;
  justify-self: end;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.86;
  contain: paint;
  -webkit-mask-image: radial-gradient(circle at center, black 48%, transparent 78%);
  mask-image: radial-gradient(circle at center, black 48%, transparent 78%);
}

.path-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.overview {
  position: relative;
  padding: 10px 0 90px;
  overflow: clip;
}

.overview-layout {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
}

.ocean-curves {
  position: absolute;
  top: -150px;
  bottom: -10px;
  left: 50%;
  width: 118vw;
  height: auto;
  z-index: 0;
  pointer-events: none;
  color: var(--wave-purple);
  transform: translateX(-50%);
}

.ocean-curves svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.ocean-curves path {
  fill: currentColor;
  stroke: none;
}

.ocean-curves .smear {
  opacity: 0.35;
  transform: translateX(38px) scaleX(1.04);
  transform-origin: center;
}

.side-nav {
  position: fixed;
  top: 50%;
  left: 24px;
  z-index: 12;
  transform: translateY(-50%);
  display: grid;
  gap: 5px;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
}

.side-nav a {
  display: block;
  padding: 6px 0;
  color: var(--faint);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  transition: color 160ms ease, transform 160ms ease;
}

.side-nav a:hover,
.side-nav a:focus-visible,
.side-nav a.is-active {
  color: var(--text);
  outline: none;
  transform: translateX(2px);
}

.side-nav a.is-active {
  font-weight: 760;
}

.overview-content {
  display: grid;
  max-width: 760px;
  margin: 0 auto;
}

.overview-section {
  position: relative;
  min-height: 72vh;
  padding: 10vh 0;
  scroll-margin-top: 86px;
}

.download-section {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: clamp(640px, 72vh, 760px);
  text-align: center;
  isolation: isolate;
}

.download-section > :not(.ocean-curves) {
  position: relative;
  z-index: 1;
}

.overview-section.download-section h2 {
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 720;
}

.overview-section.download-section > p:not(.download-note) {
  max-width: 570px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.65;
}

.overview-section.download-section > .download-note {
  max-width: 520px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.overview-section:last-child {
  min-height: 46vh;
}

.overview-section h2 {
  margin-bottom: 18px;
  color: var(--text);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
}

.overview-section p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.overview-section p + p {
  margin-top: 16px;
}

.overview-section:not(.download-section) {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 12vh 0;
}

.overview-section:not(.download-section) h2 {
  width: min(100%, 720px);
  max-width: 720px;
  margin-bottom: 24px;
  color: var(--text);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: 46px;
  font-weight: 560;
  line-height: 1.04;
  text-wrap: balance;
}

.overview-section:not(.download-section) h2::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--ocean-curve);
  opacity: 0.82;
}

.overview-section:not(.download-section) p {
  width: min(100%, 68ch);
  max-width: 68ch;
  color: var(--muted);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.82;
  text-wrap: pretty;
}

.overview-section:not(.download-section) p:first-of-type {
  width: min(100%, 62ch);
  max-width: 62ch;
  color: var(--text);
  font-size: 21px;
  line-height: 1.62;
}

.overview-section:not(.download-section) p + p {
  margin-top: 18px;
}

#why-qor {
  isolation: isolate;
  overflow: visible;
}

#why-qor > :not(.question-bg) {
  position: relative;
  z-index: 1;
}

.question-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 118vw;
  z-index: 0;
  pointer-events: none;
  color: var(--ocean-curve);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-weight: 800;
  line-height: 1;
  opacity: 0.18;
  transform: translateX(-50%);
}

.question-bg span {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%) rotate(var(--angle));
  font-size: var(--size);
}

.question-bg span:nth-child(1) { top: 6%; left: 6%; --size: 48px; --angle: -18deg; }
.question-bg span:nth-child(2) { top: 8%; left: 28%; --size: 30px; --angle: 21deg; }
.question-bg span:nth-child(3) { top: 5%; left: 52%; --size: 42px; --angle: -8deg; }
.question-bg span:nth-child(4) { top: 9%; left: 78%; --size: 58px; --angle: 17deg; }
.question-bg span:nth-child(5) { top: 18%; left: 16%; --size: 26px; --angle: 35deg; }
.question-bg span:nth-child(6) { top: 19%; left: 39%; --size: 54px; --angle: -26deg; }
.question-bg span:nth-child(7) { top: 17%; left: 66%; --size: 34px; --angle: 12deg; }
.question-bg span:nth-child(8) { top: 23%; left: 91%; --size: 46px; --angle: -31deg; }
.question-bg span:nth-child(9) { top: 31%; left: 7%; --size: 36px; --angle: 8deg; }
.question-bg span:nth-child(10) { top: 32%; left: 25%; --size: 62px; --angle: -14deg; }
.question-bg span:nth-child(11) { top: 29%; left: 52%; --size: 28px; --angle: 28deg; }
.question-bg span:nth-child(12) { top: 34%; left: 74%; --size: 50px; --angle: 19deg; }
.question-bg span:nth-child(13) { top: 41%; left: 14%; --size: 44px; --angle: -33deg; }
.question-bg span:nth-child(14) { top: 44%; left: 36%; --size: 32px; --angle: 11deg; }
.question-bg span:nth-child(15) { top: 43%; left: 61%; --size: 68px; --angle: -19deg; }
.question-bg span:nth-child(16) { top: 47%; left: 88%; --size: 30px; --angle: 30deg; }
.question-bg span:nth-child(17) { top: 56%; left: 4%; --size: 56px; --angle: 16deg; }
.question-bg span:nth-child(18) { top: 58%; left: 27%; --size: 34px; --angle: -11deg; }
.question-bg span:nth-child(19) { top: 55%; left: 47%; --size: 46px; --angle: 24deg; }
.question-bg span:nth-child(20) { top: 59%; left: 73%; --size: 38px; --angle: -27deg; }
.question-bg span:nth-child(21) { top: 64%; left: 94%; --size: 60px; --angle: 10deg; }
.question-bg span:nth-child(22) { top: 72%; left: 12%; --size: 30px; --angle: -24deg; }
.question-bg span:nth-child(23) { top: 74%; left: 34%; --size: 72px; --angle: 22deg; }
.question-bg span:nth-child(24) { top: 70%; left: 58%; --size: 36px; --angle: -9deg; }
.question-bg span:nth-child(25) { top: 76%; left: 82%; --size: 50px; --angle: 31deg; }
.question-bg span:nth-child(26) { top: 84%; left: 5%; --size: 40px; --angle: 13deg; }
.question-bg span:nth-child(27) { top: 88%; left: 24%; --size: 52px; --angle: -30deg; }
.question-bg span:nth-child(28) { top: 86%; left: 49%; --size: 28px; --angle: 18deg; }
.question-bg span:nth-child(29) { top: 89%; left: 70%; --size: 64px; --angle: -16deg; }
.question-bg span:nth-child(30) { top: 91%; left: 93%; --size: 34px; --angle: 27deg; }
.question-bg span:nth-child(31) { top: 3%; left: 17%; --size: 24px; --angle: 12deg; }
.question-bg span:nth-child(32) { top: 4%; left: 39%; --size: 36px; --angle: -28deg; }
.question-bg span:nth-child(33) { top: 6%; left: 67%; --size: 26px; --angle: 32deg; }
.question-bg span:nth-child(34) { top: 13%; left: 4%; --size: 34px; --angle: -10deg; }
.question-bg span:nth-child(35) { top: 14%; left: 20%; --size: 44px; --angle: 26deg; }
.question-bg span:nth-child(36) { top: 15%; left: 58%; --size: 24px; --angle: -17deg; }
.question-bg span:nth-child(37) { top: 16%; left: 86%; --size: 32px; --angle: 38deg; }
.question-bg span:nth-child(38) { top: 25%; left: 12%; --size: 54px; --angle: -22deg; }
.question-bg span:nth-child(39) { top: 24%; left: 33%; --size: 26px; --angle: 15deg; }
.question-bg span:nth-child(40) { top: 26%; left: 45%; --size: 40px; --angle: -36deg; }
.question-bg span:nth-child(41) { top: 26%; left: 61%; --size: 30px; --angle: 21deg; }
.question-bg span:nth-child(42) { top: 28%; left: 84%; --size: 58px; --angle: -7deg; }
.question-bg span:nth-child(43) { top: 37%; left: 4%; --size: 28px; --angle: 30deg; }
.question-bg span:nth-child(44) { top: 38%; left: 19%; --size: 36px; --angle: -14deg; }
.question-bg span:nth-child(45) { top: 39%; left: 43%; --size: 56px; --angle: 9deg; }
.question-bg span:nth-child(46) { top: 38%; left: 67%; --size: 24px; --angle: -29deg; }
.question-bg span:nth-child(47) { top: 40%; left: 96%; --size: 42px; --angle: 18deg; }
.question-bg span:nth-child(48) { top: 49%; left: 20%; --size: 26px; --angle: -34deg; }
.question-bg span:nth-child(49) { top: 50%; left: 31%; --size: 48px; --angle: 25deg; }
.question-bg span:nth-child(50) { top: 49%; left: 54%; --size: 32px; --angle: -13deg; }
.question-bg span:nth-child(51) { top: 51%; left: 80%; --size: 66px; --angle: 7deg; }
.question-bg span:nth-child(52) { top: 61%; left: 12%; --size: 30px; --angle: -20deg; }
.question-bg span:nth-child(53) { top: 64%; left: 35%; --size: 42px; --angle: 34deg; }
.question-bg span:nth-child(54) { top: 62%; left: 64%; --size: 52px; --angle: -18deg; }
.question-bg span:nth-child(55) { top: 68%; left: 2%; --size: 24px; --angle: 22deg; }
.question-bg span:nth-child(56) { top: 69%; left: 46%; --size: 26px; --angle: -8deg; }
.question-bg span:nth-child(57) { top: 68%; left: 76%; --size: 34px; --angle: 26deg; }
.question-bg span:nth-child(58) { top: 72%; left: 97%; --size: 48px; --angle: -32deg; }
.question-bg span:nth-child(59) { top: 80%; left: 18%; --size: 38px; --angle: 14deg; }
.question-bg span:nth-child(60) { top: 81%; left: 42%; --size: 56px; --angle: -24deg; }
.question-bg span:nth-child(61) { top: 80%; left: 63%; --size: 24px; --angle: 36deg; }
.question-bg span:nth-child(62) { top: 82%; left: 78%; --size: 30px; --angle: -12deg; }
.question-bg span:nth-child(63) { top: 84%; left: 98%; --size: 26px; --angle: 20deg; }
.question-bg span:nth-child(64) { top: 92%; left: 13%; --size: 60px; --angle: -21deg; }
.question-bg span:nth-child(65) { top: 94%; left: 32%; --size: 28px; --angle: 11deg; }
.question-bg span:nth-child(66) { top: 93%; left: 55%; --size: 44px; --angle: -35deg; }
.question-bg span:nth-child(67) { top: 94%; left: 82%; --size: 36px; --angle: 24deg; }
.question-bg span:nth-child(68) { top: 97%; left: 5%; --size: 22px; --angle: -6deg; }
.question-bg span:nth-child(69) { top: 97%; left: 72%; --size: 28px; --angle: 15deg; }
.question-bg span:nth-child(70) { top: 96%; left: 94%; --size: 52px; --angle: -26deg; }

#who-for {
  isolation: isolate;
  overflow: visible;
}

#who-for > :not(.protection-bg) {
  position: relative;
  z-index: 1;
}

.protection-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 118vw;
  z-index: 0;
  pointer-events: none;
  color: var(--ocean-curve);
  opacity: 0.16;
  transform: translateX(-50%);
}

.protect-mark {
  position: absolute;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(var(--angle));
}

.protect-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.protect-mark text {
  fill: currentColor;
  stroke: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
}

.protect-mark:nth-child(1) { top: 5%; left: 7%; --size: 56px; --angle: -14deg; }
.protect-mark:nth-child(2) { top: 8%; left: 29%; --size: 34px; --angle: 18deg; }
.protect-mark:nth-child(3) { top: 6%; left: 55%; --size: 46px; --angle: -8deg; }
.protect-mark:nth-child(4) { top: 9%; left: 82%; --size: 62px; --angle: 14deg; }
.protect-mark:nth-child(5) { top: 17%; left: 15%; --size: 38px; --angle: 31deg; }
.protect-mark:nth-child(6) { top: 19%; left: 43%; --size: 64px; --angle: -24deg; }
.protect-mark:nth-child(7) { top: 18%; left: 70%; --size: 42px; --angle: 11deg; }
.protect-mark:nth-child(8) { top: 24%; left: 94%; --size: 48px; --angle: -27deg; }
.protect-mark:nth-child(9) { top: 31%; left: 5%; --size: 44px; --angle: 22deg; }
.protect-mark:nth-child(10) { top: 31%; left: 25%; --size: 58px; --angle: -10deg; }
.protect-mark:nth-child(11) { top: 30%; left: 53%; --size: 32px; --angle: 29deg; }
.protect-mark:nth-child(12) { top: 34%; left: 78%; --size: 52px; --angle: 17deg; }
.protect-mark:nth-child(13) { top: 42%; left: 12%; --size: 62px; --angle: -30deg; }
.protect-mark:nth-child(14) { top: 44%; left: 37%; --size: 40px; --angle: 12deg; }
.protect-mark:nth-child(15) { top: 42%; left: 63%; --size: 66px; --angle: -18deg; }
.protect-mark:nth-child(16) { top: 47%; left: 89%; --size: 34px; --angle: 33deg; }
.protect-mark:nth-child(17) { top: 56%; left: 4%; --size: 50px; --angle: 9deg; }
.protect-mark:nth-child(18) { top: 57%; left: 29%; --size: 36px; --angle: -12deg; }
.protect-mark:nth-child(19) { top: 55%; left: 50%; --size: 54px; --angle: 24deg; }
.protect-mark:nth-child(20) { top: 59%; left: 73%; --size: 44px; --angle: -24deg; }
.protect-mark:nth-child(21) { top: 65%; left: 96%; --size: 60px; --angle: 10deg; }
.protect-mark:nth-child(22) { top: 72%; left: 14%; --size: 34px; --angle: -20deg; }
.protect-mark:nth-child(23) { top: 74%; left: 34%; --size: 68px; --angle: 20deg; }
.protect-mark:nth-child(24) { top: 71%; left: 58%; --size: 38px; --angle: -7deg; }
.protect-mark:nth-child(25) { top: 76%; left: 82%; --size: 52px; --angle: 31deg; }
.protect-mark:nth-child(26) { top: 85%; left: 7%; --size: 42px; --angle: 14deg; }
.protect-mark:nth-child(27) { top: 88%; left: 25%; --size: 54px; --angle: -27deg; }
.protect-mark:nth-child(28) { top: 87%; left: 49%; --size: 32px; --angle: 18deg; }
.protect-mark:nth-child(29) { top: 89%; left: 70%; --size: 64px; --angle: -16deg; }
.protect-mark:nth-child(30) { top: 92%; left: 93%; --size: 40px; --angle: 25deg; }
.protect-mark:nth-child(31) { top: 4%; left: 18%; --size: 30px; --angle: 16deg; }
.protect-mark:nth-child(32) { top: 5%; left: 39%; --size: 46px; --angle: -30deg; }
.protect-mark:nth-child(33) { top: 6%; left: 68%; --size: 34px; --angle: 29deg; }
.protect-mark:nth-child(34) { top: 14%; left: 5%; --size: 40px; --angle: -8deg; }
.protect-mark:nth-child(35) { top: 14%; left: 22%; --size: 58px; --angle: 22deg; }
.protect-mark:nth-child(36) { top: 15%; left: 58%; --size: 28px; --angle: -17deg; }
.protect-mark:nth-child(37) { top: 16%; left: 88%; --size: 44px; --angle: 36deg; }
.protect-mark:nth-child(38) { top: 25%; left: 13%; --size: 64px; --angle: -20deg; }
.protect-mark:nth-child(39) { top: 25%; left: 35%; --size: 32px; --angle: 12deg; }
.protect-mark:nth-child(40) { top: 26%; left: 47%; --size: 48px; --angle: -35deg; }
.protect-mark:nth-child(41) { top: 26%; left: 63%; --size: 30px; --angle: 20deg; }
.protect-mark:nth-child(42) { top: 29%; left: 86%; --size: 58px; --angle: -10deg; }
.protect-mark:nth-child(43) { top: 38%; left: 3%; --size: 34px; --angle: 30deg; }
.protect-mark:nth-child(44) { top: 39%; left: 20%; --size: 42px; --angle: -16deg; }
.protect-mark:nth-child(45) { top: 38%; left: 44%; --size: 60px; --angle: 8deg; }
.protect-mark:nth-child(46) { top: 39%; left: 68%; --size: 30px; --angle: -28deg; }
.protect-mark:nth-child(47) { top: 41%; left: 97%; --size: 46px; --angle: 18deg; }
.protect-mark:nth-child(48) { top: 50%; left: 18%; --size: 28px; --angle: -34deg; }
.protect-mark:nth-child(49) { top: 51%; left: 33%; --size: 52px; --angle: 25deg; }
.protect-mark:nth-child(50) { top: 50%; left: 55%; --size: 36px; --angle: -12deg; }
.protect-mark:nth-child(51) { top: 52%; left: 81%; --size: 68px; --angle: 7deg; }
.protect-mark:nth-child(52) { top: 63%; left: 13%; --size: 36px; --angle: -22deg; }
.protect-mark:nth-child(53) { top: 64%; left: 36%; --size: 46px; --angle: 34deg; }
.protect-mark:nth-child(54) { top: 62%; left: 65%; --size: 56px; --angle: -18deg; }
.protect-mark:nth-child(55) { top: 69%; left: 3%; --size: 28px; --angle: 22deg; }
.protect-mark:nth-child(56) { top: 69%; left: 46%; --size: 32px; --angle: -8deg; }
.protect-mark:nth-child(57) { top: 69%; left: 76%; --size: 40px; --angle: 26deg; }
.protect-mark:nth-child(58) { top: 73%; left: 98%; --size: 52px; --angle: -32deg; }
.protect-mark:nth-child(59) { top: 82%; left: 18%; --size: 42px; --angle: 14deg; }
.protect-mark:nth-child(60) { top: 84%; left: 43%; --size: 60px; --angle: -24deg; }

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding-top: clamp(42px, 8vh, 70px);
    padding-bottom: 44px;
  }

  .path-field {
    width: 100%;
    height: 340px;
    justify-self: stretch;
  }

  .overview-layout {
    width: min(100% - 32px, var(--max));
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-left: 0;
    padding-right: 0;
  }

  .side-nav {
    position: static;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding-left: 0;
    border-left: 0;
  }

  .overview-section {
    min-height: 48vh;
    padding: 7vh 0;
  }

  .overview-section:not(.download-section) {
    padding: 9vh 0;
  }

  .overview-section:not(.download-section) h2 {
    font-size: 40px;
  }

  h1 {
    font-size: 52px;
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 24px, var(--max));
  }

  .hero-grid {
    gap: 12px;
    padding-top: 34px;
    padding-bottom: 34px;
  }

  h1 {
    font-size: 42px;
    line-height: 1.04;
  }

  h2 {
    font-size: 30px;
  }

  .overview-section:not(.download-section) h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .overview-section:not(.download-section) p {
    font-size: 16px;
    line-height: 1.76;
  }

  .overview-section:not(.download-section) p:first-of-type {
    font-size: 18px;
    line-height: 1.58;
  }

  .download-options {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 520px;
    margin-top: 22px;
  }

  .download-option {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    min-height: 90px;
    padding: 14px;
  }

  .download-option + .download-option {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .lead {
    font-size: 16px;
  }

  .path-field {
    display: none;
  }

  .actions {
    flex-wrap: wrap;
  }

  .hero-copy .actions {
    gap: 6px;
  }

  .download-row {
    display: grid;
    gap: 5px;
  }

  .download-name {
    font-size: 20px;
  }

  .download-detail {
    font-size: 12px;
  }

  .side-nav {
    display: none;
  }

  .overview {
    padding-bottom: 64px;
  }

  .overview-section {
    min-height: auto;
    padding: 56px 0;
  }

  .download-section {
    min-height: 560px;
    padding: 70px 0 80px;
  }

  .ocean-curves {
    top: -96px;
    width: 190vw;
  }

  .overview-section.download-section h2 {
    font-size: 36px;
  }

  .overview-section.download-section > p:not(.download-note) {
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .wrap,
  .overview-layout {
    width: min(100% - 20px, var(--max));
  }

  h1 {
    font-size: 38px;
  }

  .download-option {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 86px;
    padding: 12px;
  }

  .download-icon,
  .download-icon svg {
    width: 38px;
    height: 44px;
  }

  .download-name {
    font-size: 18px;
  }

  .overview-section:not(.download-section) h2 {
    font-size: 30px;
  }

  .overview-section:not(.download-section) p:first-of-type {
    font-size: 17px;
  }
}