@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(/assets/bricolage-grotesque-a79fdb52.woff2);
}

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/assets/instrument-sans-2ee17598.woff2);
}

@font-face {
    font-family: "Instrument Sans";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url(/assets/instrument-sans-italic-77210cdd.woff2);
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url(/assets/jetbrains-mono-18be4527.woff2);
}

@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/assets/caveat-891951df.woff2);
}

:root {
    --bg: #FFFFFF;
    --bg-2: #EEF1F5;
    --ink: #1F2733;
    --ink-2: #5B6472;
    --line: #E3E7ED;
    --accent: #2455A4;
    --accent-soft: #E4ECF8;
    --slate: #6B7F99;
    --slate-soft: #E6EBF2;
    --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
    --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --script: "Caveat", "Bradley Hand", "Segoe Script", cursive;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14171C;
        --bg-2: #1C2027;
        --ink: #E8EBF0;
        --ink-2: #9AA3B2;
        --line: #2A2F38;
        --accent: #6FA1E8;
        --accent-soft: #1E2B44;
        --slate: #8FA5C2;
        --slate-soft: #222A36;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #14171C;
    --bg-2: #1C2027;
    --ink: #E8EBF0;
    --ink-2: #9AA3B2;
    --line: #2A2F38;
    --accent: #6FA1E8;
    --accent-soft: #1E2B44;
    --slate: #8FA5C2;
    --slate-soft: #222A36;
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg {
    max-width: 100%;
    display: block;
}

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

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
}

section {
    padding-block: clamp(56px, 9vw, 120px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}

.art {
    width: 100%;
    height: auto;
}

.hills {
    margin-top: clamp(24px, 5vw, 56px);
    width: 100%;
    height: auto;
}

/* The shapes of the illustrations take their colours from `fill=""` and
   `stroke=""` attributes, which is how the design writes them and how they stay
   readable next to the path data. A stylesheet rule reaches none of those, so
   three of the theme's colours -- the two slates and the soft accent -- would
   look unread to the build and be reported as dead. These three rules are where
   they are read: the sun and the ridge of the hills, whose colours are the same
   three, take them from here rather than from an attribute. */
.sun {
    fill: var(--accent-soft);
    stroke: var(--accent);
}

.ridge {
    fill: var(--slate-soft);
}

.ridge-line {
    fill: none;
    stroke: var(--slate);
}

/* The rising notes are only ever seen in motion: at rest they are
   transparent, so a reader who asked for less motion sees the pictures as the
   design draws them. */
.rise {
    opacity: 0;
}

/* The two landscapes come alive: the big note floats and rocks, small notes
   rise from the music stands, the trees sway from their foot and the clouds
   drift. In the hero's window the lessons drop into the timetable when the page
   opens, the selection steps down the sidebar, and the accent lesson is moved to
   the next day and back. `fill-box` makes each shape turn and scale about itself rather than
   about the corner of the picture. None of it runs for a reader who asked for
   less motion. */
@media (prefers-reduced-motion: no-preference) {
    .bob {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: bob 5s ease-in-out infinite;
    }

    .rise {
        animation: rise 4.5s ease-out infinite;
    }

    .rise + .rise {
        animation-delay: 1.5s;
    }

    .rise + .rise + .rise {
        animation-delay: 3s;
    }

    .tree {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: sway 5s ease-in-out infinite alternate;
    }

    .tree:nth-child(2n) {
        animation-duration: 6.5s;
        animation-delay: -2s;
    }

    .cloud {
        animation: drift 26s ease-in-out infinite alternate;
    }

    .cloud + .cloud {
        animation-duration: 34s;
        animation-direction: alternate-reverse;
    }

    .cursor {
        animation: pick 10s ease-in-out 1.2s infinite;
    }

    .lesson {
        transform-box: fill-box;
        transform-origin: center;
        animation: drop .5s cubic-bezier(.2, .8, .3, 1.4) both;
    }

    .lesson:nth-of-type(1) {
        animation-delay: .3s;
    }

    .lesson:nth-of-type(2) {
        animation-delay: .45s;
    }

    .lesson:nth-of-type(3) {
        animation-delay: .6s;
    }

    .lesson:nth-of-type(4) {
        animation-delay: .75s;
    }

    .lesson:nth-of-type(5) {
        animation-delay: .9s;
    }

    .lesson.shift {
        animation:
            drop .5s cubic-bezier(.2, .8, .3, 1.4) .45s both,
            shift 9s ease-in-out 2s infinite;
    }
}

@keyframes bob {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translateY(-6px) rotate(-4deg);
    }

    50% {
        transform: translateY(-9px) rotate(0);
    }

    75% {
        transform: translateY(-6px) rotate(4deg);
    }
}

@keyframes rise {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    20% {
        opacity: 1;
    }

    50% {
        transform: translate(-6px, -30px);
    }

    100% {
        opacity: 0;
        transform: translate(4px, -60px);
    }
}

@keyframes sway {
    from {
        transform: rotate(-2.5deg);
    }

    to {
        transform: rotate(2.5deg);
    }
}

@keyframes drift {
    to {
        transform: translateX(90px);
    }
}

@keyframes pick {
    0%, 16% {
        transform: translateY(0);
    }

    20%, 36% {
        transform: translateY(24px);
    }

    40%, 56% {
        transform: translateY(48px);
    }

    60%, 76% {
        transform: translateY(72px);
    }

    80%, 96% {
        transform: translateY(96px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes shift {
    0%, 30% {
        transform: translateX(0);
    }

    40%, 80% {
        transform: translateX(42px);
    }

    90%, 100% {
        transform: translateX(0);
    }
}

@keyframes drop {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.6);
    }
}

.wrap {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: clamp(16px, 5vw, 48px);
}

.eyebrow {
    font: 500 12.5px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.lede {
    font-size: clamp(17px, 1.4vw, 20px);
    color: var(--ink-2);
    max-width: 56ch;
}

.sec-head {
    display: grid;
    gap: 14px;
    max-width: 62ch;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.sec-head h2 {
    font-size: clamp(30px, 4vw, 46px);
}

.sec-head h1 {
    font-size: clamp(30px, 4vw, 46px);
}

.flush {
    margin-bottom: 0;
}

.wide h2 {
    font-size: clamp(32px, 4.6vw, 56px);
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15.5px;
    border: 1.5px solid var(--ink);
    transition: transform .15s, background .15s, color .15s;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn.primary {
    background: var(--ink);
    color: var(--bg);
}

.btn.primary:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.btn.ghost:hover {
    background: var(--bg-2);
}

.btn svg {
    width: 16px;
    height: 16px;
}

.bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
}

.bullets li {
    display: grid;
    gap: 6px;
    padding-left: 16px;
    border-left: 2px solid var(--accent);
}

.bullets b {
    font-weight: 600;
}

.bullets span {
    color: var(--ink-2);
    font-size: 15px;
}

.card {
    display: grid;
    gap: 26px;
    font-size: 16px;
    align-content: center;
}

.card dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 22px;
}

.card dt {
    font: 500 12px/1.6 var(--mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-2);
    padding-top: 3px;
}

.card dd {
    margin: 0;
}

.card a {
    border-bottom: 1.5px solid var(--accent);
    transition: color .15s;
}

.card a:hover {
    color: var(--accent);
}

.prose > div {
    max-width: calc(72ch + 2 * clamp(16px, 5vw, 48px));
}

.prose .sec-head {
    margin-bottom: clamp(24px, 4vw, 40px);
}

.prose .card {
    align-content: start;
}

.prose .bullets {
    margin-top: 18px;
    gap: 16px;
}

.prose .bullets li {
    gap: 5px;
}

.prose .bullets b {
    font-size: 17px;
    color: var(--ink);
}

.prose > div > h2 {
    font: 600 19px/1.4 var(--display);
    letter-spacing: -.01em;
    margin-top: clamp(28px, 4vw, 40px);
}

.prose > div > p {
    color: var(--ink-2);
    margin-top: 12px;
}

.prose > div > p a {
    border-bottom: 1.5px solid var(--accent);
    transition: color .15s;
}

.prose > div > p a:hover {
    color: var(--accent);
}

.prose > div > .updated {
    font: 500 12.5px/1 var(--mono);
    margin-top: clamp(36px, 5vw, 56px);
}

.nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.nav > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 64px;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font: 800 24px/1 var(--display);
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}

.brand em {
    font: 700 30px/1 var(--script);
    font-style: normal;
    color: var(--accent);
    letter-spacing: .005em;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(14px, 3vw, 32px);
    font-weight: 500;
    font-size: 15px;
}

.nav a:not(.brand):not(.pill):not(.burger) {
    padding: 6px 0;
    border-bottom: 1.5px solid transparent;
    transition: border-color .15s;
}

.nav a:not(.brand):not(.pill):not(.burger):hover {
    border-color: var(--accent);
}

.pill {
    display: none;
    font: 500 12.5px/1 var(--mono);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}

.pill:hover {
    color: var(--accent);
    border-color: var(--accent);
}

@media (min-width: 1080px) {
    .pill {
        display: inline-block;
    }
}

.burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    place-items: center;
    cursor: pointer;
    flex: none;
}

.burger:hover {
    border-color: var(--accent);
}

.burger span {
    display: block;
    position: relative;
    width: 18px;
    height: 2px;
    background: var(--ink);
    box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink);
    transition: box-shadow .15s, transform .15s;
}

.burger-close span {
    transform: rotate(45deg);
    box-shadow: none;
}

.burger-close span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: rotate(90deg);
}

.only-mobile {
    display: none;
}

@media (max-width: 640px) {
    .nav > div {
        height: 60px;
    }

    .brand {
        font-size: 21px;
    }

    .brand em {
        font-size: 26px;
    }

    .burger {
        display: grid;
    }

    .burger-close {
        display: none;
    }

    .nav nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .25);
    }

    #menu:target {
        display: block;
    }

    #menu:target ~ .burger {
        display: none;
    }

    #menu:target ~ .burger-close {
        display: grid;
    }

    .nav ul {
        flex-direction: column;
        gap: 0;
        padding: 6px clamp(16px, 5vw, 48px) 10px;
    }

    .nav ul li a {
        display: block;
        padding: 14px 0;
        font-size: 17px;
        border-bottom: 1px solid var(--line);
    }

    .nav ul li:last-child a {
        border-bottom: 0;
    }

    .only-mobile {
        display: block;
    }

    .only-mobile a {
        font-family: var(--mono);
        font-size: 14px;
        color: var(--accent);
    }
}

.foot {
    border-top: 1px solid var(--line);
    padding-block: 26px;
}

.foot > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--ink-2);
}

.foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.foot a:hover {
    color: var(--accent);
}

.doku {
    padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px);
}

.doku > div {
    max-width: 1240px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.doku-side {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    padding-bottom: 16px;
}

.doku-side nav,
.doku-menu nav {
    display: grid;
    gap: 26px;
}

.doku-side nav > div,
.doku-menu nav > div {
    display: grid;
    gap: 22px;
}

.doku-side nav > div + div,
.doku-menu nav > div + div {
    border-top: 1px solid var(--line);
    padding-top: 22px;
}

.doku-side b,
.doku-menu nav b,
.doku-side nav > div > a,
.doku-menu nav > div > a {
    font: 600 16px/1.2 var(--display);
    color: var(--ink);
}

.doku-side nav > div > a,
.doku-menu nav > div > a {
    padding: 0;
    margin: 0;
    border: 0;
}

.doku-side nav > div > a:hover,
.doku-menu nav > div > a:hover {
    color: var(--accent);
}

.doku-side p,
.doku-menu nav p {
    font: 500 11.5px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 8px;
}

.doku-side ul,
.doku-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    border-left: 1px solid var(--line);
}

.doku-side li,
.doku-menu li {
    font-size: 15px;
    line-height: 1.35;
}

.doku-side a,
.doku-menu a {
    display: block;
    padding: 6px 0 6px 14px;
    margin-left: -1px;
    border-left: 2px solid transparent;
}

.doku-side a:hover,
.doku-menu a:hover {
    color: var(--accent);
}

.doku-side a[aria-current],
.doku-menu a[aria-current] {
    color: var(--accent);
    font-weight: 600;
    border-left-color: var(--accent);
}

.doku-menu {
    display: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 24px;
}

.doku-menu summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
}

.doku-menu nav {
    padding: 4px 16px 18px;
}

.doku-main {
    min-width: 0;
    max-width: 820px;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font: 500 12.5px/1.4 var(--mono);
    color: var(--ink-2);
    margin-bottom: 22px;
}

.crumbs a {
    color: var(--accent);
}

.crumbs a::after {
    content: "/";
    color: var(--ink-2);
    margin-left: 8px;
}

.crumbs a:hover {
    text-decoration: underline;
}

.doku-head {
    display: grid;
    gap: 14px;
}

.doku-head h1 {
    font-size: clamp(34px, 4.4vw, 52px);
}

.toc {
    margin-top: clamp(28px, 4vw, 40px);
    padding: 18px 20px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.toc p {
    font: 500 11.5px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 12px;
}

.toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 28px;
    font-size: 15px;
}

.toc li {
    break-inside: avoid;
    padding: 3px 0;
}

.toc a:hover {
    color: var(--accent);
}

.toc a::before {
    content: "→ ";
    color: var(--accent);
}

.topic {
    display: grid;
    gap: 14px;
    margin-top: clamp(28px, 4vw, 40px);
    scroll-margin-top: 88px;
}

.topic[id] {
    margin-top: clamp(44px, 6vw, 64px);
}

.topic h2 {
    font-size: clamp(24px, 2.6vw, 30px);
}

.topic h2 a:hover {
    color: var(--accent);
}

.topic h2 a:hover::after {
    content: " #";
    color: var(--accent);
    font-weight: 400;
}

.topic p a {
    border-bottom: 1.5px solid var(--accent);
}

.topic p a:hover {
    color: var(--accent);
}

.doku-main kbd {
    display: inline-block;
    font: 500 .84em/1.3 var(--body);
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--bg-2);
    color: var(--ink);
    white-space: nowrap;
}

.fields {
    margin: 4px 0 0;
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    border-top: 1px solid var(--line);
}

.fields dt,
.fields dd {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.fields dt {
    font-weight: 600;
    padding-right: 24px;
}

.fields dd {
    color: var(--ink-2);
}

.note {
    display: grid;
    gap: 4px;
    padding: 14px 18px;
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    background: var(--accent-soft);
}

.note b {
    font: 600 11.5px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

.shot {
    margin: clamp(20px, 3vw, 28px) 0 0;
}

.shot > a,
.shot > div {
    display: block;
    width: fit-content;
    max-width: 100%;
    border: 1.5px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

.shot > a:hover {
    border-color: var(--accent);
}

.shot > a::before,
.shot > div::before {
    content: "";
    display: block;
    height: 26px;
    border-bottom: 1.5px solid var(--ink);
    background:
        radial-gradient(circle at 16px 50%, var(--accent) 4px, transparent 4.5px),
        radial-gradient(circle at 30px 50%, var(--line) 4px, transparent 4.5px),
        radial-gradient(circle at 44px 50%, var(--line) 4px, transparent 4.5px),
        var(--bg-2);
}

.shot img {
    height: auto;
}

.shot figcaption {
    margin-top: 10px;
    font: 500 12.5px/1.5 var(--mono);
    color: var(--ink-2);
}

.marks > div {
    position: relative;
}

.marks span {
    position: absolute;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #FFFFFF;
    font: 700 13px/1 var(--mono);
    box-shadow: 0 0 0 3px #FFFFFF, 0 4px 10px rgba(0, 0, 0, .25);
}

.legend {
    list-style: none;
    counter-reset: mark;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    font-size: 15px;
}

.legend li {
    counter-increment: mark;
    position: relative;
    padding-left: 36px;
    color: var(--ink-2);
}

.legend li::before {
    content: counter(mark);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #FFFFFF;
    font: 700 12px/1 var(--mono);
}

.legend b {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

.chapters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 20px;
}

.chapters ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.chapters li > a {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .15s, transform .15s;
}

.chapters li > a:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.chapters b {
    font-weight: 600;
}

.chapters b::after {
    content: " →";
    color: var(--accent);
}

.chapters span {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
}

.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: clamp(48px, 7vw, 80px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.pager a {
    display: grid;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .15s;
}

.pager a:hover {
    border-color: var(--accent);
}

.pager a:last-child:not(:first-child) {
    text-align: right;
}

.pager span {
    font: 500 11.5px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.pager b {
    font: 600 17px/1.3 var(--display);
    color: var(--accent);
}

@media (max-width: 900px) {
    .doku > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .doku-side {
        display: none;
    }

    .doku-menu {
        display: block;
    }
}

@media (max-width: 640px) {
    .toc ul,
    .legend,
    .chapters {
        columns: 1;
        grid-template-columns: 1fr;
    }

    .fields {
        grid-template-columns: 1fr;
    }

    .fields dt {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .marks span {
        width: 20px;
        height: 20px;
        font-size: 11px;
        box-shadow: 0 0 0 2px #FFFFFF;
    }
}

.hero {
    padding-block: clamp(48px, 8vw, 104px) clamp(48px, 7vw, 88px);
}

.hero > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

.hero h1 {
    font-size: clamp(44px, 6.6vw, 86px);
    font-weight: 800;
    letter-spacing: -.035em;
    margin-top: 18px;
}

.hero h1 em {
    font-style: normal;
    color: var(--accent);
}

.hero h1 + p {
    margin-top: 22px;
}

.hero > div > svg {
    max-width: 560px;
    justify-self: end;
}

.modules {
    border-top: 1px solid var(--line);
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mod {
    border-left: 2px solid var(--accent);
    padding-left: 16px;
    display: grid;
    gap: 6px;
    align-content: start;
}

.mod h3 {
    font: 600 17px/1.5 var(--body);
    letter-spacing: 0;
}

.mod p {
    color: var(--ink-2);
    font-size: 15px;
}

.more {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid;
    gap: 14px;
}

.more p {
    font-weight: 500;
}

.more p a {
    border-bottom: 1.5px solid var(--accent);
    transition: color .15s;
}

.more p a:hover {
    color: var(--accent);
}

.tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tags li {
    font: 500 12.5px/1 var(--mono);
    border: 1px solid var(--line);
    background: var(--bg);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--ink-2);
}

.swiss {
    background: var(--bg-2);
    border-block: 1px solid var(--line);
}

.swiss > div {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(24px, 5vw, 64px);
    align-items: center;
}

.demo > div {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

.demo > div > svg {
    max-width: 600px;
    justify-self: end;
}

.faq {
    background: var(--bg-2);
    border-block: 1px solid var(--line);
}

.faq > div {
    max-width: calc(72ch + 2 * clamp(16px, 5vw, 48px));
}

.faq details {
    border-top: 1px solid var(--line);
}

.faq details:last-child {
    border-bottom: 1px solid var(--line);
}

.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    font: 600 17.5px/1.4 var(--display);
    letter-spacing: -.01em;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 999px;
    display: grid;
    place-items: center;
    font: 500 18px/1 var(--mono);
    color: var(--accent);
    transition: transform .15s;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

.faq details p {
    padding: 0 46px 22px 0;
    color: var(--ink-2);
    max-width: 62ch;
}

.faq details p a {
    border-bottom: 1.5px solid var(--accent);
}

.faq details p a:hover {
    color: var(--accent);
}

.contact {
    padding-bottom: 0;
    overflow: hidden;
}

.contact > div {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(24px, 5vw, 64px);
}

.person {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: clamp(28px, 4vw, 40px) 0 0;
}

.person img {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-2);
}

.person figcaption {
    display: grid;
    gap: 2px;
}

.person b {
    font-weight: 600;
}

.person span {
    color: var(--ink-2);
    font-size: 15px;
}

@media (max-width: 900px) {
    .hero > div,
    .swiss > div,
    .demo > div,
    .contact > div {
        grid-template-columns: 1fr;
    }

    .grid3 {
        grid-template-columns: 1fr;
    }

    .demo > div > svg {
        justify-self: start;
    }
}