:root {
  color-scheme: dark;
  --mint:#7eefc0;
  --slate-900:#12181d;
  --slate-800:#1a2026;
  --slate-700:#242c34;
  --ink:#edf4ef;
  --muted:#9eafb0;
  --line:#354149;
  --surface:#1a2026;
  --paper:#12181d;
  --wrap:1180px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
a {
  color:inherit;
}
button {
  font:inherit;
}
:focus-visible {
  outline-color:var(--mint);
  outline:2px solid var(--mint);
  outline-offset:4px;
}
.wrap {
  width:min(100%,var(--wrap));
  margin-inline:auto;
  padding-inline:32px;
}
.site-header {
  min-height:82px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:fit-content;
  color:var(--ink);
  font-size:17px;
  font-weight:650;
  letter-spacing:-.03em;
  text-decoration:none;
}
.brand img {
  width:29px;
  height:29px;
}
nav {
  display:flex;
  gap:25px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
}
nav a {
  color:var(--muted);
  text-decoration:none;
}
nav a:hover,footer a:hover {
  color:var(--ink);
}
.github-star {
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid var(--line);
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  text-decoration:none;
}
.github-star:hover {
  border-color:var(--mint);
}
.github-star svg {
  width:14px;
  height:14px;
}
.github-stars {
  padding-left:7px;
  border-left:1px solid var(--line);
  color:var(--muted);
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);
  gap:clamp(54px,10vw,146px);
  align-items:center;
  min-height:655px;
  padding-top:76px;
  padding-bottom:82px;
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  margin-bottom:25px;
  font-size:clamp(54px,6.3vw,88px);
  font-weight:590;
  letter-spacing:-.072em;
  line-height:.93;
}
h1 em {
  color:var(--muted);
  font-style:normal;
}
.intro {
  max-width:43ch;
  margin-bottom:29px;
  color:var(--muted);
  font-size:18px;
  line-height:1.5;
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 24px;
}
.button {
  display:inline-flex;
  align-items:center;
  gap:19px;
  width:fit-content;
  padding:13px 16px;
  border:1px solid var(--mint);
  font-weight:650;
  text-decoration:none;
}
.button-primary {
  color:#102019;
  background:var(--mint);
}
.button-primary:hover {
  background:transparent;
  color:var(--ink);
  text-decoration:none;
}
.button-outline {
  border-color:rgb(237 244 239 / .28);
  color:var(--ink);
  background:transparent;
}
.button-outline:hover {
  border-color:var(--mint);
  background:rgb(126 239 192 / .1);
  text-decoration:none;
}
.button-outline svg {
  width:16px;
  height:16px;
}
.requirements {
  margin:18px 0 0;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
}
.why {
  padding-top:148px;
}
.section-intro {
  max-width:850px;
}
h2 {
  margin-bottom:0;
  text-wrap:balance;
  font-size:clamp(39px,5vw,67px);
  font-weight:580;
  letter-spacing:-.065em;
  line-height:.97;
}
.benefits {
  margin-top:88px;
  border-top:1px solid var(--line);
}
.benefits article {
  display:grid;
  grid-template-columns:2fr 3fr;
  gap:30px;
  align-items:baseline;
  padding:29px 0 31px;
  border-bottom:1px solid var(--line);
}
.benefits p {
  margin-bottom:0;
  color:var(--muted);
}
.benefits h3 {
  margin-bottom:0;
  font-size:23px;
  font-weight:590;
  letter-spacing:-.04em;
}
.inside {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:clamp(42px,9vw,124px);
  align-items:start;
  padding-top:171px;
}
.inside-intro p:last-child {
  margin:28px 0 0;
  color:var(--muted);
}
.shot {
  margin:0;
}
.shot-visual {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:12px;
  border:1px solid rgb(126 239 192 / .34);
  border-radius:24px;
  background:
    radial-gradient(ellipse at 14% 0%, rgb(126 239 192 / .4), transparent 56%),
    linear-gradient(145deg, rgb(28 72 69 / .92), rgb(22 29 35));
  box-shadow:0 30px 74px rgb(0 0 0 / .5),0 0 58px rgb(126 239 192 / .15);
  transition:transform .3s ease,box-shadow .3s ease;
}
.shot-menu .shot-visual {
  background:
    radial-gradient(ellipse at 18% 8%, rgb(126 239 192 / .42), transparent 57%),
    linear-gradient(145deg, rgb(22 69 64 / .94), rgb(21 28 34));
}
.shot-preferences .shot-visual {
  background:
    radial-gradient(ellipse at 78% 10%, rgb(126 239 192 / .34), transparent 55%),
    linear-gradient(145deg, rgb(20 61 61 / .94), rgb(22 28 35));
}
.shot-crop {
  overflow:hidden;
  border-radius:12px;
  aspect-ratio:1200 / 860;
}
.shot-preferences .shot-crop img {
  width:118.67%;
  max-width:none;
  transform:translate(-7.87%, -7.01%);
}
.shot img {
  position:relative;
  width:100%;
  border-radius:12px;
}
.shot:hover .shot-visual {
  box-shadow:0 36px 80px rgb(0 0 0 / .54),0 0 68px rgb(126 239 192 / .2);
  transform:translateY(-3px);
}
.shot figcaption {
  position:relative;
  z-index:1;
  margin-top:13px;
  color:var(--muted);
  font-size:13px;
}
.closing {
  padding-top:180px;
  padding-bottom:157px;
}
.closing h2 {
  margin-bottom:36px;
}
footer {
  border-top:1px solid var(--line);
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-top:27px;
  padding-bottom:27px;
}
.footer-inner p {
  margin:0;
}
.footer-inner a {
  text-decoration:none;
}
.footer-inner span {
  padding-inline:9px;
}
@media (max-width:820px) {
  .site-header {
    grid-template-columns:1fr auto
  }
  .site-header nav {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    gap:67px;
    min-height:0;
    padding-top:65px
  }
  .hero-copy {
    max-width:620px
  }
  .inside {
    grid-template-columns:1fr;
    gap:58px;
    padding-top:120px
  }
  .inside-intro {
    max-width:600px
  }
}
@media (max-width:560px) {
  .wrap {
    padding-inline:20px
  }
  .site-header {
    min-height:67px
  }
  h1 {
    font-size:clamp(49px,16vw,67px)
  }
  .hero {
    padding-top:52px;
    padding-bottom:61px;
    gap:54px
  }
  .intro {
    font-size:16px
  }
  .why {
    padding-top:94px
  }
  .benefits {
    margin-top:50px
  }
  .benefits article {
    grid-template-columns:1fr;
    gap:8px
  }
  .benefits h3 {
    font-size:21px
  }
  .inside {
    padding-top:93px
  }
  .shot-visual {
    border-radius:20px;
  }
  .shot img {
    border-radius:12px;
  }
  .closing {
    padding-top:111px;
    padding-bottom:99px
  }
  .footer-inner {
    flex-direction:column
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .shot-visual {
    transition:none;
  }
  .shot:hover .shot-visual {
    transform:none;
  }
}