/* CMDX official website — black canvas, purple identity, no external dependencies. */
:root {
    color-scheme: dark;
    --bg: #000;
    --surface: #09090d;
    --surface-raised: #111116;
    --text: #f4f2f8;
    --muted: #a09da9;
    --subtle: #8e879b;
    --border: #25232e;
    --accent: #b58aff;
    --accent-strong: #8948eb;
    --accent-hover: #a46af7;
    --green: #a6e1c3;
    --radius: 12px;
    --header-height: 76px;
    --font: Inter, "Segoe UI", Arial, sans-serif;
    --mono: "Cascadia Code", "Cascadia Mono", Consolas, monospace
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px
}

body {
    margin: 0;
    background: #000;
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

button,
input,
select {
    font: inherit
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    color: inherit;
    cursor: pointer
}

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

a:hover {
    color: var(--accent)
}

button:disabled {
    cursor: default
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px
}

::selection {
    color: white;
    background: #6d38a9
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0
}

.fill-icon {
    fill: currentColor;
    stroke: none
}

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

h1,
h2,
h3 {
    line-height: 1.12;
    letter-spacing: -.045em
}

h1,
h2 {
    font-weight: 650
}

h3 {
    font-weight: 600
}

p {
    color: var(--muted)
}

code,
pre,
kbd {
    font-family: var(--mono)
}

code {
    font-size: .9em
}

p code,
li code,
td code {
    color: #d1bbf7;
    background: #15111b;
    border: 1px solid #2a2038;
    border-radius: 4px;
    padding: 2px 5px;
    overflow-wrap: anywhere
}

button {
    border: 0
}

kbd {
    font-size: 10px;
    padding: 2px 4px;
    border: 1px solid #38343f;
    border-radius: 4px;
    color: #b7b3c1;
    white-space: nowrap
}

[hidden] {
    display: none !important
}

.container {
    width: min(1160px, calc(100% - 64px));
    margin-inline: auto
}

#particle-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

header,
main,
footer {
    position: relative;
    z-index: 1
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    background: var(--accent);
    color: #000;
    padding: 8px 14px;
    border-radius: 6px;
    transform: translateY(-160%)
}

.skip-link:focus {
    transform: translateY(0)
}

.site-header {
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .88);
    border-bottom: 1px solid #1c1922;
    backdrop-filter: blur(18px)
}

.nav-shell {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 54px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 25px;
    letter-spacing: -1.1px;
    font-weight: 750;
    color: white;
    flex-shrink: 0
}

.brand img {
    border-radius: 7px
}

.brand-dot {
    color: var(--accent)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
    font-size: 13px;
    font-weight: 500
}

.nav-links>a {
    color: #a09daa;
    position: relative
}

.nav-links>a:hover,
.nav-links>a[aria-current] {
    color: #f7f5fa
}

.nav-links>a[aria-current]:not(.icon-button)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    height: 2px;
    background: var(--accent)
}

.nav-divider {
    flex: 1
}

.search-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    background: #101014;
    border: 1px solid #29252f;
    color: #94909e;
    border-radius: 7px;
    font-size: 12px
}

.search-trigger:hover {
    border-color: #6c4b8e;
    color: #d7c6ed
}

.search-trigger svg {
    width: 16px;
    height: 16px
}

.search-trigger kbd {
    margin-left: 24px
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 8px;
    border-radius: 5px
}

.icon-button:hover {
    color: white;
    background: #201927
}

.github-link svg {
    width: 21px;
    height: 21px
}

.mobile-toggle {
    display: none
}

.hero {
    text-align: center;
    padding-top: 52px;
    padding-bottom: 61px
}

.release-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border: 1px solid #3c2b53;
    border-radius: 50px;
    color: #c9b6e9;
    background: #0b0710;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1px
}

.release-pill>span:last-child {
    margin-left: 8px;
    color: var(--accent)
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: var(--accent);
    box-shadow: 0 0 9px #aa73ff6b;
    flex-shrink: 0
}

.hero-logo {
    width: 95px;
    height: 95px;
    border-radius: 19px;
    margin: 25px auto 23px;
    filter: drop-shadow(0 0 27px #7135be34)
}

.hero h1 {
    font-size: clamp(50px, 5.7vw, 76px);
    line-height: 1.055;
    letter-spacing: -.055em;
    margin-bottom: 22px
}

.accent-text {
    color: var(--accent)
}

.hero-description {
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
    margin-bottom: 28px;
    letter-spacing: -.2px
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 21px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
    transition: background .16s, border-color .16s, transform .16s
}

.button svg {
    width: 18px;
    height: 18px
}

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

.button-primary {
    background: var(--accent-strong);
    color: white;
    border-color: #a166f2;
    box-shadow: 0 3px 18px #7640b829
}

.button-primary:hover {
    background: var(--accent-hover);
    color: white;
    border-color: #c899ff
}

.button-secondary {
    background: #0d0c11;
    border-color: #38323f;
    color: #efebf5
}

.button-secondary:hover {
    background: #19141f;
    border-color: #725388;
    color: white
}

.hero-command {
    display: inline-flex;
    align-items: center;
    text-align: left;
    gap: 13px;
    background: #0c0b0f;
    border: 1px solid #27232d;
    border-radius: 7px;
    margin-top: 27px;
    padding: 7px 9px 7px 15px;
    font-size: 13px;
    min-width: 280px
}

.hero-command code {
    flex: 1;
    color: #d4cedf;
    font-size: 12px
}

.prompt-symbol {
    color: var(--subtle)
}

.copy-button svg {
    width: 16px;
    height: 16px
}

.hero-meta {
    font-size: 11px;
    margin-top: 14px;
    margin-bottom: 0;
    color: #827d8e
}

.hero-meta span {
    margin-inline: 9px;
    color: #45404d
}

.intro-strip {
    border-top: 1px solid #26202e;
    border-bottom: 1px solid #26202e;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 24px 0;
    margin-bottom: 95px;
    position: relative;
    background: rgba(0, 0, 0, .78)
}

.intro-strip>div {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: center
}

.intro-strip>div+div {
    border-left: 1px solid #2a2432
}

.intro-strip strong {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.2
}

.intro-strip span {
    font-size: 12px;
    color: var(--muted)
}

.eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 1.8px;
    margin-bottom: 15px;
    line-height: 1.5
}

.eyebrow.muted {
    color: var(--subtle);
    letter-spacing: 1.5px
}

.section-heading h2 {
    font-size: 44px;
    line-height: 1.12;
    margin-bottom: 18px
}

.section-heading>p {
    font-size: 15px;
    max-width: 500px;
    line-height: 1.7
}

.showcase-section {
    margin-bottom: 110px
}

.experience-tabs {
    display: flex;
    gap: 4px;
    max-width: max-content;
    margin-top: 30px;
    margin-bottom: 32px;
    padding: 4px;
    border: 1px solid #2b2532;
    border-radius: 8px;
    background: #08070b
}

.experience-tabs button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5
}

.experience-tabs svg {
    width: 15px;
    height: 15px
}

.experience-tabs button[aria-selected=true] {
    background: #23172f;
    color: #d9b8ff;
    box-shadow: inset 0 0 0 1px #503266
}

.experience-tabs button:hover {
    color: white
}

.experience-panel {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 58px;
    align-items: center
}

.experience-copy h3 {
    font-size: 31px;
    line-height: 1.17;
    margin-bottom: 17px
}

.experience-copy>p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 380px;
    margin-bottom: 22px
}

.check-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.check-list li {
    position: relative;
    font-size: 12px;
    color: #c0bacd;
    margin: 10px 0;
    padding-left: 23px;
    line-height: 1.6
}

.check-list li::before {
    content: "✓";
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6
}

.text-link:hover {
    color: #dfc6ff
}

.experience-copy .text-link {
    margin-top: 20px
}

.text-link span {
    transition: transform .2s
}

.text-link:hover span {
    transform: translateX(4px)
}

.terminal-window,
.studio-window,
.first-command {
    border: 1px solid #36303f;
    border-radius: 10px;
    background: #060508;
    overflow: hidden;
    box-shadow: 0 16px 80px #0006
}

.window-bar {
    height: 42px;
    background: #100d15;
    border-bottom: 1px solid #292230;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 17px;
    color: #898393;
    font-size: 10px;
    letter-spacing: .25px
}

.window-lights {
    display: flex;
    align-items: center;
    gap: 5px
}

.window-lights i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4c394c
}

.window-lights i:first-child {
    background: #966a92
}

.window-lights i:nth-child(2) {
    background: #705066
}

.window-bar>span:has(.status-dot) {
    display: flex;
    align-items: center;
    gap: 9px
}

.window-bar .tiny-label {
    font-size: 8px;
    letter-spacing: 1px;
    color: #a38bb8
}

.terminal-body {
    font-family: var(--mono);
    font-size: 12px;
    padding: 24px 27px 20px;
    line-height: 1.7
}

.terminal-body p {
    margin-bottom: 16px;
    color: #ddd6e9;
    overflow-wrap: anywhere
}

.terminal-title {
    color: var(--accent) !important;
    font-size: 20px;
    font-weight: 600
}

.terminal-title>span:first-child {
    font-size: 10px;
    color: #80718e;
    margin-left: 8px;
    font-weight: 400
}

.terminal-subtitle {
    display: block;
    font-size: 10px;
    color: #8f869d;
    margin-top: 2px;
    font-weight: 400
}

.terminal-path {
    color: #a98ac5;
    font-size: 11px
}

.terminal-chevron {
    color: var(--accent);
    margin: 0 6px
}

.terminal-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px 25px;
    padding: 0 0 23px 0;
    font-size: 10px;
    line-height: 1.9
}

.terminal-categories>span {
    color: var(--accent);
    letter-spacing: .6px
}

.terminal-categories>span>span {
    display: block;
    color: #a8a0b7;
    font-size: 10px;
    letter-spacing: 0
}

.terminal-string {
    color: var(--green)
}

.terminal-body .terminal-dim {
    color: #a089b5;
    font-size: 10px;
    margin-top: -8px
}

.terminal-caret {
    display: inline-block;
    width: 7px;
    height: 13px;
    vertical-align: middle;
    background: #c4a3e9;
    animation: blink 1.1s steps(1) infinite
}

.studio-window #midi-demo {
    display: block;
    width: 100%;
    height: 300px;
    background: #030204
}

.demo-pause {
    background: transparent;
    color: #b3a7c0;
    font-size: 10px;
    padding: 5px
}

.demo-pause span {
    margin-left: 5px
}

.renderer-picker {
    display: flex;
    gap: 0;
    padding: 10px 9px 2px;
    border-top: 1px solid #251c30;
    background: #09060c;
    justify-content: space-between
}

.renderer-picker button {
    background: transparent;
    border: 1px solid transparent;
    color: #8c8199;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 0;
    padding: 7px 9px;
    border-radius: 4px;
    white-space: nowrap
}

.renderer-picker button[aria-pressed=true] {
    color: #d7b8fa;
    background: #21132f;
    border-color: #4d2d65
}

.renderer-picker small {
    font-size: 6px;
    color: #bc9b6b
}

.demo-caption {
    font-size: 8px;
    text-align: center;
    margin: 0;
    padding: 9px 8px 12px;
    background: #09060c;
    color: #aa8ac1
}

.demo-caption a {
    color: #ad91c8;
    margin-left: 5px
}

.tools-section {
    padding-top: 75px;
    border-top: 1px solid #27202e;
    margin-bottom: 95px
}

.tools-section .section-heading {
    text-align: center
}

.tools-section .section-heading>p {
    margin-inline: auto
}

.tools-section .section-heading h2 {
    font-size: 40px
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 46px;
    gap: 45px
}

.feature-item {
    padding-right: 10px
}

.feature-item+.feature-item {
    border-left: 1px solid #251e2d;
    padding-left: 34px;
    padding-right: 0
}

.feature-icon {
    width: 37px;
    height: 37px;
    border-radius: 8px;
    background: #1b1026;
    border: 1px solid #422956;
    color: #c598fb;
    display: grid;
    place-items: center;
    margin-bottom: 21px
}

.feature-icon svg {
    width: 20px;
    height: 20px
}

.feature-item h3 {
    font-size: 20px;
    letter-spacing: -.035em;
    margin-bottom: 14px
}

.feature-item p {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 21px
}

.code-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

.code-tags code {
    padding: 2px 7px;
    border: 1px solid #31243e;
    background: #100b16;
    border-radius: 4px;
    color: #bba3d7;
    font-size: 10px
}

.start-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    padding: 60px 0;
    border-top: 1px solid #29212f;
    border-bottom: 1px solid #29212f;
    margin-bottom: 65px;
    background: rgba(0, 0, 0, .7)
}

.start-copy h2 {
    font-size: 40px;
    margin-bottom: 17px
}

.start-copy p {
    font-size: 14px;
    max-width: 390px;
    margin-bottom: 25px;
    line-height: 1.8
}

.start-copy .button {
    font-size: 12px
}

.start-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    align-self: center
}

.start-steps li {
    display: flex;
    gap: 24px;
    margin-bottom: 28px
}

.start-steps li:last-child {
    margin-bottom: 0
}

.step-number {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
    width: 31px;
    height: 31px;
    border: 1px solid #3c2b50;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #100a18
}

.start-steps h3 {
    font-size: 15px;
    letter-spacing: -.015em;
    margin-bottom: 6px
}

.start-steps p {
    font-size: 12px;
    margin: 0
}

.bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 70px
}

.bottom-cta .eyebrow {
    font-size: 9px;
    margin-bottom: 8px
}

.bottom-cta h2 {
    font-size: 25px;
    margin: 0
}

.site-footer {
    border-top: 1px solid #221b2a;
    background: rgba(0, 0, 0, .92);
    padding-top: 43px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 45px;
    padding-bottom: 40px
}

.footer-brand .brand {
    font-size: 24px;
    letter-spacing: -1px
}

.footer-brand p {
    font-size: 12px;
    line-height: 1.8;
    margin: 15px 0
}

.footer-credit {
    font-size: 10px;
    color: #9983ab
}

.footer-credit a {
    color: #a797b9
}

.footer-grid>div>h2 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 7px 0 16px;
    color: #ddd6e8
}

.footer-grid>div:not(.footer-brand)>a,
.motion-toggle {
    display: block;
    font-size: 11px;
    color: #8e849d;
    margin-bottom: 10px
}

.footer-grid a:hover,
.motion-toggle:hover {
    color: var(--accent)
}

.motion-toggle {
    background: transparent;
    padding: 0;
    text-align: left;
    line-height: 1.8
}

.footer-bottom {
    border-top: 1px solid #211929;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 17px;
    padding-bottom: 22px;
    font-size: 9px;
    color: #9d84b1
}

.page-heading {
    text-align: center;
    padding: 71px 0 38px
}

.page-heading h1 {
    font-size: 60px;
    line-height: 1.08;
    margin-bottom: 18px
}

.page-heading>p {
    font-size: 16px
}

.download-platform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 11px;
    color: #a999bb;
    margin-top: 24px
}

.download-platform svg {
    width: 14px;
    height: 14px;
    color: var(--accent)
}

.download-platform>span:not([data-version]) {
    color: #584769
}

.download-main {
    max-width: 1040px
}

.download-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.download-card {
    background: rgba(10, 8, 14, .95);
    border: 1px solid #37303f;
    border-radius: 12px;
    padding: 28px 30px 0;
    position: relative
}

.download-card.recommended {
    border-color: #704398;
    background: rgba(13, 8, 20, .96);
    box-shadow: inset 0 1px 0 #9d63d524
}

.download-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px
}

.download-icon {
    color: #c190f9
}

.download-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.3
}

.small-badge {
    color: #ceacf7;
    background: #211330;
    border: 1px solid #4e3066;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .7px
}

.small-badge.neutral {
    color: #9e92b0;
    background: #15111b;
    border-color: #30243d
}

.download-card h2 {
    font-size: 30px;
    margin-bottom: 13px
}

.download-card>p {
    font-size: 13px;
    min-height: 42px;
    line-height: 1.7;
    max-width: 330px;
    margin-bottom: 15px
}

.download-card .check-list {
    min-height: 115px;
    margin-bottom: 19px
}

.download-card .check-list li {
    font-size: 11px;
    margin: 11px 0
}

.download-card .button {
    width: 100%;
    padding: 12px 10px;
    font-size: 13px
}

.package-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 9px;
    color: #a799b6;
    padding-top: 11px;
    padding-bottom: 24px;
    flex-wrap: wrap
}

.package-meta .package-size {
    color: #ac90c0
}

.checksum-details {
    border-top: 1px solid #30233c;
    font-size: 11px;
    margin: 0 -30px;
    padding: 0 30px
}

.checksum-details summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    color: #9886ad;
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.checksum-details summary::-webkit-details-marker {
    display: none
}

.checksum-details summary>span {
    font-size: 15px;
    line-height: 1;
    color: #9975be
}

.checksum-details[open] summary>span {
    transform: rotate(45deg)
}

.checksum-content {
    padding-bottom: 18px
}

.package-hash {
    display: block;
    word-break: break-all;
    font-size: 10px;
    color: #bca2d9;
    line-height: 1.8;
    background: #08050d;
    border: 1px solid #2d1f3b;
    border-radius: 4px;
    padding: 10px
}

.copy-hash {
    font-size: 10px;
    margin-top: 10px;
    background: #24132e;
    border: 1px solid #492b5b;
    color: #ccb0e8;
    border-radius: 4px;
    padding: 4px 9px
}

.checksum-file {
    font-size: 9px;
    margin-left: 8px;
    color: #ab8cca
}

.download-note {
    text-align: center;
    font-size: 10px;
    margin: 20px 0 67px;
    color: #8b7b9c
}

.download-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding-bottom: 64px;
    border-bottom: 1px solid #2b2136;
    margin-bottom: 60px;
    align-items: center
}

.download-next h2 {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 17px
}

.download-next p {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 20px
}

.first-command .window-bar {
    font-size: 10px
}

.code-block {
    position: relative;
    background: #08060c;
    border: 1px solid #2e2338;
    border-radius: 7px;
    margin: 16px 0
}

.first-command .code-block {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 24px
}

.code-block pre {
    overflow-x: auto;
    margin: 0;
    padding: 20px;
    line-height: 1.8;
    color: #dad0e6;
    font-size: 12px;
    tab-size: 4;
    max-width: 100%;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: #52365d transparent
}

.code-block .copy-button {
    position: absolute;
    right: 9px;
    top: 9px;
    background: #16101e;
    border: 1px solid #342040
}

.first-command pre {
    padding: 0
}

.code-comment {
    color: #a18ab8;
    font-size: 10px
}

.requirements-section,
.faq-section {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    margin-bottom: 67px
}

.requirements-section h2,
.faq-section h2 {
    font-size: 30px
}

.requirement-list>div {
    padding-bottom: 21px
}

.requirement-list h3 {
    font-size: 13px;
    letter-spacing: -.015em;
    margin-bottom: 7px
}

.requirement-list p {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 0
}

.faq-section {
    border-top: 1px solid #2a2132;
    padding-top: 60px
}

.faq-list details {
    border-bottom: 1px solid #2b2233;
    padding: 0
}

.faq-list details:first-child {
    border-top: 1px solid #2b2233
}

.faq-list summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    font-size: 12px;
    line-height: 1.7;
    color: #c9bed7;
    cursor: pointer;
    padding: 19px 0
}

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

.faq-list summary>span {
    font-size: 18px;
    color: #a986cf;
    transition: transform .15s
}

.faq-list details[open] summary>span {
    transform: rotate(45deg)
}

.faq-list details>p {
    font-size: 12px;
    line-height: 1.9;
    margin: 0 0 21px;
    padding-right: 12px
}

.faq-list details>p a {
    color: var(--accent)
}

.docs-layout {
    display: grid;
    grid-template-columns: 204px minmax(0, 1fr) 164px;
    gap: 42px;
    padding-top: 35px;
    min-height: calc(100vh - 180px)
}

.docs-sidebar {
    position: sticky;
    top: 109px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #3d244f transparent
}

.docs-sidebar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 21px
}

.version-small {
    font-size: 9px;
    line-height: 1.7;
    border: 1px solid #34233f;
    color: #b18ccb;
    background: #160c1e;
    padding: 1px 6px;
    border-radius: 4px
}

.docs-nav-group {
    margin-top: 20px
}

.docs-nav-group>span {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #c8b5de;
    margin-bottom: 8px;
    letter-spacing: .7px
}

.docs-nav-group>a {
    display: block;
    border-left: 1px solid #33243f;
    margin-left: 2px;
    padding: 6px 10px;
    font-size: 11px;
    color: #9784aa;
    line-height: 1.5
}

.docs-nav-group>a:hover {
    color: #ddc6f2;
    background: #0f0915
}

.docs-nav-group>a[aria-current=page] {
    border-color: #b885ec;
    background: #1a0e24;
    color: #d4a9fa;
    border-radius: 0 4px 4px 0
}

.sidebar-download {
    display: flex;
    gap: 9px;
    align-items: center;
    border-top: 1px solid #33233e;
    font-size: 11px;
    color: #ae86cf;
    margin-top: 25px;
    padding-top: 17px
}

.docs-menu-toggle {
    display: none
}

.docs-breadcrumb {
    display: flex;
    gap: 9px;
    font-size: 10px;
    color: #887497;
    margin: 4px 0 25px
}

.docs-breadcrumb>a {
    color: #b393ce
}

.docs-main {
    padding-bottom: 40px;
    min-width: 0
}

.docs-article h1 {
    font-size: 40px;
    line-height: 1.14;
    margin-bottom: 15px
}

.docs-article .docs-lead {
    font-size: 16px;
    color: #b3a4c2;
    line-height: 1.7;
    margin-bottom: 33px
}

.docs-article h2 {
    font-size: 25px;
    line-height: 1.25;
    letter-spacing: -.025em;
    margin: 33px 0 15px;
    scroll-margin-top: 100px
}

.docs-article h3 {
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin: 28px 0 12px;
    scroll-margin-top: 100px
}

.docs-article h4 {
    font-size: 14px;
    margin: 20px 0 10px
}

.docs-article p,
.docs-article li {
    font-size: 13px;
    line-height: 1.85;
    color: #b2a1c3
}

.docs-article p {
    margin-bottom: 17px
}

.docs-article strong {
    color: #e3d2f2;
    font-weight: 600
}

.docs-article ul,
.docs-article ol {
    padding-left: 22px;
    margin: 15px 0 20px
}

.docs-article li {
    padding-left: 3px;
    margin-bottom: 7px
}

.docs-article li::marker {
    color: #aa79d3
}

.docs-article a {
    color: #bd8ae8;
    text-underline-offset: 3px;
    text-decoration: underline;
    text-decoration-color: #784391
}

.docs-article a:hover {
    color: #e2b5fd
}

.docs-article .heading-anchor {
    color: #896599;
    text-decoration: none;
    font-size: .65em;
    vertical-align: middle;
    margin-left: 8px;
    opacity: 0
}

.docs-article h2:hover .heading-anchor,
.docs-article h3:hover .heading-anchor,
.heading-anchor:focus {
    opacity: 1
}

.docs-article .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    margin: 22px 0;
    border: 1px solid #33233f;
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: #4a2f58 transparent
}

.docs-article table {
    border-collapse: collapse;
    min-width: 100%;
    font-size: 11px;
    background: rgba(8, 4, 12, .9);
    text-align: left;
    line-height: 1.8
}

.docs-article th {
    font-size: 10px;
    background: #150b1e;
    color: #d0acdf;
    font-weight: 600;
    padding: 10px 13px;
    white-space: nowrap
}

.docs-article td {
    padding: 10px 13px;
    border-top: 1px solid #2a1b34;
    color: #ad96bc;
    vertical-align: top;
    min-width: 85px
}

.docs-article td:first-child {
    color: #d4b8e5
}

.docs-article td code {
    font-size: 10px;
    white-space: normal
}

.docs-article .code-block pre {
    font-size: 11px;
    line-height: 1.8;
    padding: 19px 43px 19px 18px
}

.docs-article pre>code {
    font-size: inherit;
    background: transparent
}

.docs-article .callout,
.docs-article blockquote {
    border-left: 3px solid #9654be;
    background: #170b22;
    border-radius: 0 5px 5px 0;
    padding: 14px 18px;
    margin: 22px 0;
    font-size: 12px;
    color: #ba9ece
}

.docs-article .callout p,
.docs-article blockquote p {
    font-size: 12px;
    margin-bottom: 0;
    color: #bfa3d4
}

.docs-toc {
    position: sticky;
    top: 116px;
    align-self: start
}

.docs-toc .eyebrow {
    font-size: 9px;
    color: #a284b4;
    letter-spacing: 1px;
    margin-bottom: 12px
}

.docs-toc nav>a {
    display: block;
    color: #8e739e;
    font-size: 10px;
    line-height: 1.6;
    padding: 6px 0
}

.docs-toc nav>a:hover,
.docs-toc nav>a.active {
    color: #d2a3f0
}

.docs-tip {
    border-top: 1px solid #33213f;
    padding-top: 21px;
    margin-top: 24px
}

.docs-tip>span {
    font-size: 15px;
    color: #b887d8;
    font-family: var(--mono)
}

.docs-tip p {
    font-size: 10px;
    line-height: 1.8;
    margin-top: 8px;
    color: #856d95
}

.docs-pagination {
    display: flex;
    gap: 15px;
    margin-top: 38px;
    border-top: 1px solid #35223f;
    padding-top: 25px
}

.docs-pagination>a {
    flex: 1;
    border: 1px solid #38233f;
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 11px;
    color: #c392df;
    background: #0c0611;
    line-height: 1.6
}

.docs-pagination>a:last-child {
    text-align: right
}

.docs-pagination>a:hover {
    border-color: #8b509b
}

.docs-pagination>a>span {
    display: block;
    font-size: 9px;
    color: #8c6c9c;
    margin-bottom: 2px
}

.docs-help {
    margin-top: 25px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 10px;
    color: #a27db8
}

.docs-help a {
    color: #b789c9
}

.docs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #2c1c35;
    color: #896b98;
    font-size: 10px
}

.docs-footer .motion-toggle {
    font-size: 10px;
    margin: 0
}

.search-dialog {
    position: fixed;
    padding: 0;
    border: 1px solid #584068;
    background: #0c080f;
    color: var(--text);
    border-radius: 12px;
    width: min(620px, calc(100% - 32px));
    max-height: 75vh;
    box-shadow: 0 20px 100px #000;
    overflow: hidden;
    margin: 13vh auto auto
}

.search-dialog::backdrop {
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(8px)
}

.search-dialog-top {
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #3b2448;
    padding: 18px 20px
}

.search-dialog-top>svg {
    width: 20px;
    height: 20px;
    color: #b68bca
}

.search-dialog input {
    width: 100%;
    min-width: 0;
    background: transparent;
    color: #e7d6f0;
    font-size: 15px;
    border: 0;
    outline: 0;
    padding: 3px
}

.search-dialog input:focus-visible {
    outline: 0
}

.search-dialog input::placeholder {
    color: #8e729e
}

.dialog-close {
    background: #25142f;
    color: #ae83be;
    border: 1px solid #4d2c5a;
    border-radius: 4px;
    padding: 3px 6px;
    font-family: var(--mono);
    font-size: 9px
}

.search-results {
    padding: 12px;
    overflow: auto;
    max-height: 50vh;
    scrollbar-width: thin;
    scrollbar-color: #523163 transparent
}

.search-result {
    display: block;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 6px
}

.search-result:hover,
.search-result.search-active {
    border-color: #65377c;
    background: #23102f
}

.search-result>span {
    display: block;
    color: #bf91d8;
    font-size: 9px;
    margin-bottom: 3px
}

.search-result>strong {
    display: block;
    font-size: 13px;
    color: #ead8f6;
    font-weight: 500
}

.search-result>p {
    font-size: 11px;
    color: #957aa6;
    margin: 4px 0 0;
    line-height: 1.6
}

.search-empty {
    padding: 18px;
    font-size: 12px;
    color: #a081b1
}

.search-dialog-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #392444;
    padding: 10px 19px;
    font-size: 9px;
    color: #90739f
}

.search-dialog-bottom kbd {
    font-size: 8px;
    margin: 0 2px;
    border-color: #50305c
}

.toast {
    position: fixed;
    z-index: 80;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 15px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #241332;
    border: 1px solid #81539d;
    color: #e5d1f3;
    border-radius: 7px;
    box-shadow: 0 4px 30px #000a;
    padding: 9px 19px;
    font-size: 12px;
    transition: opacity .2s, transform .2s, visibility .2s
}

.toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
}

.demo-caption a {
    text-decoration: underline;
    text-underline-offset: 2px
}

.table-wrap:focus-visible,
.code-block pre:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

@media(min-width:1600px) {
    .hero {
        padding-top: 70px;
        padding-bottom: 80px
    }

    .hero h1 {
        font-size: 82px
    }

    .hero-logo {
        margin-top: 31px;
        margin-bottom: 29px
    }

    .hero-description {
        font-size: 20px
    }

    .hero-actions .button {
        padding: 14px 24px
    }

    .intro-strip {
        margin-bottom: 110px
    }
}

@media(max-width:1100px) {
    .container {
        width: calc(100% - 48px)
    }

    .nav-shell {
        gap: 30px
    }

    .nav-links {
        gap: 23px
    }

    .search-trigger kbd {
        margin-left: 9px
    }

    .experience-panel {
        gap: 35px
    }

    .docs-layout {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 35px
    }

    .docs-toc {
        display: none
    }

    .feature-grid {
        gap: 27px
    }

    .feature-item+.feature-item {
        padding-left: 25px
    }

    .feature-item h3 {
        font-size: 18px
    }

    .download-main {
        max-width: 960px
    }

    .download-next {
        gap: 50px
    }
}

@media(max-width:800px) {
    :root {
        --header-height: 66px
    }

    .container {
        width: calc(100% - 40px)
    }

    .nav-shell {
        justify-content: space-between;
        gap: 18px
    }

    .brand {
        font-size: 22px
    }

    .brand img {
        width: 30px;
        height: 30px
    }

    .mobile-toggle {
        display: inline-flex
    }

    .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: 65px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 15px 20px 18px;
        background: #070609;
        border-bottom: 1px solid #3e2951;
        font-size: 14px
    }

    .nav-links.is-open {
        display: flex
    }

    .nav-links>a:not(.icon-button) {
        padding: 12px 5px
    }

    .nav-links>a[aria-current]::after {
        display: none
    }

    .nav-divider {
        display: none
    }

    .search-trigger {
        margin: 8px 0;
        justify-content: flex-start;
        padding: 12px
    }

    .search-trigger kbd {
        margin-left: auto
    }

    .github-link {
        align-self: flex-start
    }

    .hero {
        padding-top: 35px;
        padding-bottom: 44px
    }

    .hero-logo {
        width: 81px;
        height: 81px;
        margin: 23px auto
    }

    .hero h1 {
        font-size: 60px
    }

    .hero-description {
        font-size: 16px
    }

    .intro-strip {
        margin-bottom: 63px;
        padding: 19px 0
    }

    .intro-strip>div {
        flex-direction: column;
        gap: 5px
    }

    .intro-strip strong {
        font-size: 24px
    }

    .intro-strip span {
        font-size: 10px
    }

    .section-heading h2 {
        font-size: 38px
    }

    .experience-panel {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .experience-copy {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 35px
    }

    .experience-copy .eyebrow {
        grid-column: 1/-1
    }

    .experience-copy>h3 {
        font-size: 30px;
        grid-row: 2/4
    }

    .experience-copy>p {
        font-size: 13px;
        grid-row: 2
    }

    .experience-copy .check-list {
        grid-column: 2;
        grid-row: 3
    }

    .experience-copy .text-link {
        grid-column: 1/-1;
        margin-top: 5px
    }

    .terminal-window {
        max-width: 100%;
        width: 100%
    }

    .terminal-body {
        padding: 25px 30px;
        font-size: 13px
    }

    .terminal-categories {
        padding-bottom: 22px
    }

    .terminal-categories>span {
        font-size: 12px
    }

    .terminal-categories>span>span {
        font-size: 11px
    }

    .studio-window #midi-demo {
        height: 320px
    }

    .renderer-picker {
        justify-content: space-evenly
    }

    .renderer-picker button {
        font-size: 11px;
        padding: 8px 9px
    }

    .demo-caption {
        font-size: 9px
    }

    .showcase-section {
        margin-bottom: 65px
    }

    .tools-section {
        padding-top: 57px;
        margin-bottom: 56px
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .feature-item {
        padding: 0;
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 8px 18px
    }

    .feature-item+.feature-item {
        padding-left: 0;
        padding-top: 28px;
        border-left: 0;
        border-top: 1px solid #2c1d38
    }

    .feature-icon {
        grid-column: 1;
        grid-row: 1/4;
        margin: 0
    }

    .feature-item h3 {
        grid-column: 2;
        font-size: 19px;
        margin-bottom: 0
    }

    .feature-item p {
        grid-column: 2;
        margin-bottom: 3px;
        max-width: 500px
    }

    .feature-item .code-tags {
        grid-column: 2
    }

    .start-section {
        gap: 38px;
        padding: 45px 0;
        margin-bottom: 42px
    }

    .start-copy h2 {
        font-size: 33px
    }

    .start-copy p {
        font-size: 12px
    }

    .start-steps li {
        gap: 15px
    }

    .start-steps h3 {
        font-size: 13px
    }

    .start-steps p {
        font-size: 11px
    }

    .bottom-cta {
        padding-bottom: 45px;
        align-items: flex-start;
        flex-direction: column;
        gap: 17px
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 30px
    }

    .footer-grid>div h2 {
        margin-top: 0
    }

    .page-heading {
        padding: 48px 0 33px
    }

    .page-heading h1 {
        font-size: 48px
    }

    .download-card {
        padding: 24px 21px 0
    }

    .checksum-details {
        margin: 0 -21px;
        padding: 0 21px
    }

    .download-card h2 {
        font-size: 26px
    }

    .download-card .check-list {
        min-height: 130px
    }

    .package-meta {
        font-size: 8px;
        gap: 6px;
        flex-direction: column
    }

    .download-next {
        gap: 35px
    }

    .download-next h2 {
        font-size: 30px
    }

    .requirements-section,
    .faq-section {
        gap: 35px;
        grid-template-columns: .8fr 1.2fr
    }

    .requirements-section h2,
    .faq-section h2 {
        font-size: 27px
    }

    .docs-layout {
        gap: 25px;
        grid-template-columns: 160px minmax(0, 1fr);
        padding-top: 25px
    }

    .docs-sidebar {
        top: 90px
    }

    .docs-sidebar-title {
        font-size: 11px
    }

    .docs-article h1 {
        font-size: 34px
    }

    .docs-article .docs-lead {
        font-size: 14px
    }

    .docs-article h2 {
        font-size: 23px
    }

    .docs-footer {
        flex-wrap: wrap
    }
}

@media(max-width:600px) {
    .container {
        width: calc(100% - 36px)
    }

    .hero h1 {
        font-size: 49px;
        letter-spacing: -.06em
    }

    .hero-description {
        font-size: 14px;
        margin-bottom: 23px
    }

    .hero-logo {
        width: 76px;
        height: 76px;
        margin-bottom: 24px
    }

    .hero-actions {
        gap: 9px
    }

    .hero-actions .button {
        font-size: 12px;
        padding: 11px 14px;
        gap: 7px
    }

    .hero-actions svg {
        width: 15px;
        height: 15px
    }

    .hero-command {
        margin-top: 23px;
        min-width: 255px
    }

    .hero-meta {
        font-size: 9px
    }

    .hero-meta span {
        margin-inline: 5px
    }

    .intro-strip {
        padding: 17px 0;
        margin-bottom: 53px
    }

    .intro-strip strong {
        font-size: 20px
    }

    .intro-strip span {
        font-size: 8px
    }

    .section-heading h2 {
        font-size: 33px
    }

    .section-heading>p {
        font-size: 13px
    }

    .experience-tabs {
        margin-top: 22px;
        margin-bottom: 25px
    }

    .experience-tabs button {
        font-size: 11px;
        padding: 9px 15px
    }

    .experience-copy {
        display: block
    }

    .experience-copy h3 {
        font-size: 28px;
        margin-bottom: 14px
    }

    .experience-copy>p {
        font-size: 13px;
        max-width: none
    }

    .experience-copy .check-list li {
        font-size: 11px
    }

    .experience-copy .text-link {
        margin-top: 12px
    }

    .terminal-body {
        padding: 22px 18px;
        font-size: 11px
    }

    .terminal-title {
        font-size: 17px
    }

    .terminal-subtitle {
        font-size: 8px
    }

    .terminal-categories {
        gap: 17px 10px
    }

    .terminal-categories>span {
        font-size: 9px
    }

    .terminal-categories>span>span {
        font-size: 8px
    }

    .terminal-path {
        font-size: 10px
    }

    .terminal-body .terminal-dim {
        font-size: 9px
    }

    .window-bar {
        font-size: 9px;
        padding: 0 13px;
        gap: 7px
    }

    .window-bar .tiny-label {
        font-size: 6px
    }

    .studio-window #midi-demo {
        height: 250px
    }

    .renderer-picker {
        padding-inline: 5px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px
    }

    .renderer-picker button {
        font-size: 9px;
        padding: 7px
    }

    .demo-caption {
        font-size: 7px
    }

    .tools-section .section-heading h2 {
        font-size: 31px
    }

    .start-section {
        grid-template-columns: 1fr;
        gap: 31px;
        padding: 36px 0
    }

    .start-copy h2 {
        font-size: 31px
    }

    .start-copy p {
        font-size: 13px
    }

    .start-steps {
        border-top: 1px solid #291d34;
        padding-top: 27px
    }

    .start-steps li {
        gap: 18px
    }

    .start-steps h3 {
        font-size: 14px
    }

    .start-steps p {
        font-size: 11px
    }

    .bottom-cta h2 {
        font-size: 22px
    }

    .footer-grid {
        gap: 28px;
        grid-template-columns: 1.3fr 1fr
    }

    .footer-brand p {
        font-size: 11px
    }

    .footer-credit {
        font-size: 9px
    }

    .footer-grid>div:not(.footer-brand)>a,
    .motion-toggle {
        font-size: 10px
    }

    .footer-bottom {
        font-size: 8px;
        flex-direction: column;
        gap: 5px
    }

    .page-heading h1 {
        font-size: 43px
    }

    .page-heading>p {
        font-size: 13px
    }

    .download-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .download-card {
        padding: 25px 25px 0
    }

    .download-card h2 {
        font-size: 29px
    }

    .download-card>p {
        min-height: auto;
        max-width: none;
        margin-bottom: 18px
    }

    .download-card .check-list {
        min-height: auto;
        margin-bottom: 24px
    }

    .download-card .check-list li {
        font-size: 11px
    }

    .checksum-details {
        margin: 0 -25px;
        padding: 0 25px
    }

    .package-meta {
        flex-direction: row;
        font-size: 9px
    }

    .download-note {
        font-size: 9px;
        margin: 20px 10px 47px
    }

    .download-next {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 42px;
        padding-bottom: 40px
    }

    .download-next h2 {
        font-size: 32px
    }

    .requirements-section,
    .faq-section {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 38px
    }

    .requirements-section h2,
    .faq-section h2 {
        font-size: 28px;
        margin-bottom: 0
    }

    .faq-section {
        padding-top: 40px
    }

    .requirement-list>div {
        padding-bottom: 20px
    }

    .requirement-list h3 {
        font-size: 13px
    }

    .requirement-list p {
        font-size: 12px
    }

    .first-command .code-block {
        padding: 22px
    }

    .faq-list summary {
        font-size: 12px
    }

    .docs-layout {
        display: block;
        padding-top: 20px
    }

    .docs-sidebar {
        position: static;
        max-height: none;
        padding-right: 0;
        margin-bottom: 23px;
        overflow: visible
    }

    .docs-sidebar-title {
        display: none
    }

    .docs-menu-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        font-size: 12px;
        padding: 9px 13px
    }

    .docs-sidebar #docs-nav {
        display: none;
        border: 1px solid #44234f;
        border-top: 0;
        border-radius: 0 0 7px 7px;
        padding: 5px 16px 18px;
        background: #0d0513
    }

    .docs-sidebar #docs-nav.is-open {
        display: block
    }

    .docs-nav-group {
        margin-top: 13px
    }

    .docs-nav-group>a {
        padding: 7px 10px;
        font-size: 12px
    }

    .sidebar-download {
        display: none
    }

    .docs-breadcrumb {
        margin-bottom: 20px
    }

    .docs-article h1 {
        font-size: 35px
    }

    .docs-article .docs-lead {
        font-size: 14px;
        margin-bottom: 26px
    }

    .docs-article h2 {
        font-size: 24px
    }

    .docs-article p,
    .docs-article li {
        font-size: 13px
    }

    .docs-footer {
        font-size: 9px;
        gap: 9px
    }

    .docs-footer .motion-toggle {
        font-size: 9px
    }

    .docs-pagination>a {
        font-size: 11px;
        padding: 10px
    }

    .search-dialog {
        margin-top: 9vh
    }

    .search-dialog-top {
        gap: 10px;
        padding: 15px
    }

    .search-dialog input {
        font-size: 13px
    }

    .search-dialog-bottom {
        font-size: 8px;
        padding: 10px 13px
    }

    .search-dialog-bottom>span {
        white-space: nowrap
    }

    .desktop-break {
        display: none
    }
}

/* Progressive reveal and lightweight interaction motion. */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto
}

.nebula-product[data-reveal]:nth-child(2),
.download-card[data-reveal]:nth-child(2),
.credit-card[data-reveal]:nth-child(3n + 2) {
    --reveal-delay: 90ms
}

.nebula-product[data-reveal]:nth-child(3),
.credit-card[data-reveal]:nth-child(3n) {
    --reveal-delay: 180ms
}

.nebula-hero .nebula-announcement,
.nebula-hero h1,
.nebula-hero-description,
.nebula-release-note,
.nebula-hero-actions,
.nebula-hero-preview {
    animation: hero-enter .75s cubic-bezier(.2, .7, .2, 1) both
}

.nebula-hero h1 { animation-delay: 90ms }
.nebula-hero-description { animation-delay: 160ms }
.nebula-release-note { animation-delay: 220ms }
.nebula-hero-actions { animation-delay: 290ms }
.nebula-hero-preview { animation-delay: 380ms }

.site-header {
    animation: header-enter .55s cubic-bezier(.2, .7, .2, 1) both
}

.nebula-product,
.download-card,
.credit-card {
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease
}

.nebula-product:hover,
.nebula-product:focus-within,
.download-card:hover,
.download-card:focus-within,
.credit-card:hover,
.credit-card:focus-within {
    transform: translateY(-5px);
    border-color: rgba(224, 128, 255, .42);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28), 0 0 28px rgba(200, 0, 255, .08)
}

.credit-avatar {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease
}

.credit-card:hover .credit-avatar,
.credit-card:focus-within .credit-avatar {
    transform: scale(1.06);
    box-shadow: 0 0 20px rgba(224, 128, 255, .18)
}

.search-dialog[open] {
    animation: dialog-enter .22s ease-out both
}

.search-dialog[open]::backdrop {
    animation: backdrop-enter .22s ease-out both
}

.search-dialog.is-closing {
    animation: dialog-exit .18s ease-in both;
    pointer-events: none
}

.search-dialog.is-closing::backdrop {
    animation: backdrop-exit .18s ease-in both
}

.image-viewer {
    position: fixed;
    inset: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 3vw;
    border: 0;
    background: rgba(0, 0, 0, .94);
    color: white
}

.image-viewer[open] {
    display: flex
}

.image-viewer::backdrop {
    background: rgba(0, 0, 0, .88)
}

.image-viewer figure {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 100%;
    max-height: 100%;
    margin: 0
}

.image-viewer figure img {
    width: auto;
    height: auto;
    max-width: 94vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 70px rgba(0, 0, 0, .55)
}

.image-viewer figcaption {
    max-width: 90vw;
    color: #d8d2df;
    font-size: 14px;
    line-height: 1.5;
    text-align: center
}

.image-viewer-close {
    position: absolute;
    top: 18px;
    right: 22px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(28, 24, 35, .9);
    color: white;
    font: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer
}

main img[data-image-viewer] {
    cursor: zoom-in
}

@keyframes hero-enter {
    from { opacity: 0; transform: translate3d(0, 18px, 0) }
    to { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes header-enter {
    from { opacity: 0; transform: translate3d(0, -10px, 0) }
    to { opacity: 1; transform: translate3d(0, 0, 0) }
}

@keyframes dialog-enter {
    from { opacity: 0; transform: translateY(8px) scale(.985) }
    to { opacity: 1; transform: translateY(0) scale(1) }
}

@keyframes backdrop-enter {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes dialog-exit {
    from { opacity: 1; transform: translateY(0) scale(1) }
    to { opacity: 0; transform: translateY(6px) scale(.99) }
}

@keyframes backdrop-exit {
    from { opacity: 1 }
    to { opacity: 0 }
}

@media(prefers-reduced-motion:reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none
    }

    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }

    .button:hover {
        transform: none
    }
}