@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Martian+Mono:wght@400;700&display=swap");

:root {
    --m1: #141414;
    --m2: #d6ff00;
    --m3: #f2f2f0;
    --kw: #ff4d3a;
    --str: #d6ff00;
    --title: #141414;
    --sh: .4
}

* {
    box-sizing: border-box
}

html {
    background: #141414
}

body {
    margin: 0;
    font: 400 15px/1.6 "Martian Mono", monospace;
    color: #f2f2f0;
    background: radial-gradient(ellipse at 50% 38%, #e7e7e4 0, #c9c9c6 30%, #6e6e6c 62%, #141414 100%) fixed
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    mix-blend-mode: multiply;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")
}

a {
    color: inherit
}

:focus-visible {
    outline: 2px solid #ff4d3a;
    outline-offset: 3px
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: #141414;
    position: sticky;
    top: 0;
    z-index: 5
}

header a {
    text-decoration: none;
    font-weight: 700
}

nav {
    display: flex;
    gap: 20px
}

nav a[aria-current] {
    border-bottom: 3px solid #f2f2f0
}

h1,
h2 {
    font: 400 clamp(56px, 11vw, 172px)/.82 "Archivo Black", sans-serif;
    letter-spacing: -.04em;
    margin: 0;
    color: var(--title)
}

h2 {
    font-size: clamp(36px, 6vw, 84px)
}

h3 {
    margin: 0 0 8px;
    font-size: 15px
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px
}

.hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    align-items: center;
    padding: 56px 0 40px
}

.hero p {
    max-width: 34ch;
    margin: 28px 0;
    color: var(--title)
}

.btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn {
    display: inline-block;
    padding: 12px 18px;
    background: #141414;
    color: #f2f2f0;
    border: 2px solid #141414;
    text-decoration: none;
    font-weight: 700
}

.btn.alt {
    background: #f2f2f0;
    color: #141414
}

.btn:hover {
    transform: translateY(-3px);
    outline: 2px solid #141414
}

.stage {
    position: relative
}

.mass {
    width: 100%;
    height: auto;
    display: block
}

.f1 {
    fill: var(--m1)
}

.f2 {
    fill: var(--m2)
}

.f3 {
    fill: var(--m3)
}

.ln {
    stroke: var(--m1);
    stroke-width: 1
}

.sh {
    opacity: var(--sh)
}

section.slab {
    background: #101010;
    padding: 48px 0
}

.panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px
}

.badges {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #f2f2f0;
    background: none;
    color: #f2f2f0;
    font: 700 11px "Martian Mono", monospace;
    cursor: pointer
}

.badge[aria-pressed=true] {
    background: #f2f2f0;
    color: #141414
}

pre {
    margin: 0;
    overflow-x: auto;
    counter-reset: l;
    font-size: 14px
}

pre span.l {
    display: block;
    counter-increment: l;
    white-space: pre
}

pre span.l::before {
    content: counter(l);
    display: inline-block;
    width: 3ch;
    margin-right: 2ch;
    color: #b7b3aa;
    text-align: right
}

.k {
    color: var(--kw)
}

.s {
    color: var(--str)
}

.c {
    color: #b7b3aa
}

[hidden] {
    display: none !important
}

.props {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.props div {
    background: #f2f2f0;
    color: #141414;
    padding: 28px 24px;
    border: 2px solid #141414
}

.props div:nth-child(2) {
    background: #141414;
    color: #f2f2f0;
    border-color: #f2f2f0
}

.props div:nth-child(3) {
    background: var(--m2);
    color: #141414
}

.props b {
    font: 400 40px/1 "Archivo Black";
    display: block;
    margin-bottom: 12px
}

.comm {
    background: #141414;
    padding: 48px 0
}

.comm .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 2px solid #f2f2f0
}

.bar {
    height: 10px;
    background: #3a3a3a;
    margin-top: 6px
}

.bar i {
    display: block;
    height: 100%;
    background: var(--m2)
}

@media(max-width:760px) {
    .props.two {
        grid-template-columns: 1fr
    }

    .why {
        grid-template-columns: 1fr !important
    }

    .hero,
    .comm .cols,
    .props {
        grid-template-columns: 1fr
    }

    .panel {
        grid-template-columns: 1fr
    }

    .badges {
        flex-direction: row
    }
}

@media(prefers-reduced-motion:reduce) {
    .btn:hover {
        transform: none
    }
}

.props.two {
    grid-template-columns: repeat(2, 1fr)
}

.why {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 32px;
    align-items: start
}

.why p {
    margin: 0 0 16px;
    max-width: 60ch
}

.props+.slab,
.props+.comm {
    margin-top: 0
}