.hl {--night:#141822;--panel:#1b2030;--lime:#c4f35b;--lilac:#aba7f8;--cream:#f6f5ef;background:var(--night);color:var(--cream)}
.hl h1,.hl h2,.hl h3{color:inherit}
.hl :focus-visible{outline:3px solid var(--lilac);outline-offset:4px}
.hl .wrap{max-width:1280px}
.hl-top{background:radial-gradient(ellipse at 82% 40%,#30304b 0%,transparent 55%),var(--night);overflow:hidden}
.hl-path,.hl-tag,.hl-code,.hl-mark{font:700 .75rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.hl-path{padding-top:27px;color:#b4b8c4;display:flex;align-items:center;gap:12px}
.hl-path a{color:var(--cream)}
.hl-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,84px);padding-block:clamp(46px,7vw,94px)}
.hl-tag{display:flex;align-items:center;gap:10px;color:var(--lilac)}
.hl-tag:before{content:'';display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--lime)}
.hl h1{font-size:clamp(3rem,6.5vw,6.3rem);line-height:.98;letter-spacing:-.065em;margin:20px 0}
.hl h1 span{display:block;color:var(--lime)}
.hl-intro{max-width:45ch;color:#d6d9e1;font-size:clamp(1.07rem,1.6vw,1.32rem)}
.hl-go{margin-top:26px;display:inline-flex;align-items:center;gap:25px;font-weight:750;background:var(--lime);color:var(--night);padding:13px 21px;border-radius:13px;text-decoration:none;box-shadow:0 4px 0 #758b42}
.hl-go:hover{background:#d3ff78}
.hl-stage{isolation:isolate;position:relative;transform:rotate(2deg);margin:0 7px}
.hl-stage:before{content:'';position:absolute;inset:3px;background:var(--lilac);border-radius:23px;transform:rotate(-5deg);z-index:-1}
.hl-screen{background:#202636;border:1px solid #545a70;border-radius:22px;padding:9px;box-shadow:0 20px 45px #07091466}
.hl-screen img{width:100%;border-radius:15px}
.hl-mark{display:flex;align-items:center;justify-content:space-between;color:#d6d9e1;padding:12px 7px 5px}
.hl-mark span:first-child{color:var(--lime)}
.hl-library{border-top:1px solid #363c4a;padding-block:clamp(42px,6vw,76px)}
.hl h2{font-size:clamp(2rem,3.5vw,3.2rem);letter-spacing:-.05em}
.hl-library h2,.hl-note h2{margin:10px 0 16px}
.hl-library>p:not(.hl-tag){color:#c7cbd3;max-width:65ch}
.hl-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.hl-card{overflow:hidden;background:var(--panel);border:1px solid #363c4a;border-radius:18px}
.hl-card img{aspect-ratio:3/2;width:100%;object-fit:cover}
.hl-card div{padding:21px}
.hl-code{color:var(--lilac)}
.hl-card h3{font-size:1.55rem;margin:8px 0}
.hl-card p:last-child{color:#ccd0d9}
.hl-note{background:#eeedf6;color:var(--night);padding-block:clamp(42px,6vw,76px)}
.hl-note .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,7vw,100px)}
.hl-note .hl-tag{color:#454063}
.hl-note .hl-tag:before{background:#7166a9}
.hl-note p+p{margin-top:12px}
@media(max-width:780px){.hl-hero,.hl-note .wrap{grid-template-columns:1fr}.hl-hero{gap:38px}.hl-stage{max-width:540px}.hl-games{grid-template-columns:1fr}.hl-card{display:grid;grid-template-columns:minmax(110px,35%) 1fr;align-items:center}.hl-card img{height:100%;object-fit:cover}.hl-card div{padding:16px}.hl-path,.hl-mark,.hl-code{letter-spacing:.07em}.hl h1{font-size:clamp(3rem,10vw,4.8rem)}}
@media(max-width:440px){.hl-card{display:block}.hl-card img{height:auto}}

.hl-study h2 {
  max-width: 24ch;
}

.hl-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 64px);
  margin-top: 32px;
}

.hl-examples section {
  border-top: 2px solid var(--lilac);
  padding-top: 22px;
}

.hl-examples h3 {
  margin-bottom: 16px;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.hl-examples p {
  max-width: 55ch;
  color: #d6d9e1;
}

.hl-examples p + p {
  margin-top: 12px;
}

.hl-examples a {
  color: var(--lime);
}

@media (max-width: 780px) {
  .hl-examples {
    grid-template-columns: 1fr;
  }
}