h4 {
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: var(--font-weight-strong);
    margin: 0 0 var(--space-2);
}

q {
    color: var(--color-cream);
}

.button {
    background: transparent;
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-gold);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    padding: var(--space-1) var(--space-3);
    transition: border-color var(--motion-fast) ease;
}

.button:hover,
.button:focus-visible {
    border-color: var(--color-gold-soft);
}

.button:disabled {
    color: var(--color-graphite-light);
    cursor: default;
}

.button--quiet {
    color: var(--color-silver);
}

.good {
    color: var(--color-live);
}

.bad {
    color: var(--color-ember);
}

.facts {
    margin: var(--space-3) 0 var(--space-4);
}

.facts th[scope="row"] {
    color: var(--color-silver);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.points,
.checklist {
    margin: var(--space-3) 0;
    max-width: var(--measure);
    padding-left: var(--space-6);
}

.points li,
.checklist li {
    margin-bottom: var(--space-2);
}

.checklist {
    border-top: var(--border-subtle);
    list-style: none;
    padding: var(--space-3) 0 0;
}

.checklist li::before {
    color: var(--color-live);
    content: "\2713\00a0\00a0";
}

.guide {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
}

.guide__index {
    display: flex;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0;
}

.guide__item {
    align-items: center;
    background: transparent;
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-silver);
    cursor: pointer;
    display: flex;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.guide__item:hover,
.guide__item:focus-visible {
    color: var(--color-cream);
}

.guide__item[aria-current="step"] {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.guide__num {
    align-items: center;
    border: var(--border-subtle);
    border-radius: var(--radius-full);
    display: inline-flex;
    flex: none;
    font-family: var(--font-data);
    font-size: var(--fs-xs);
    height: var(--space-6);
    justify-content: center;
    width: var(--space-6);
}

.guide__item.is-done .guide__num {
    border-color: var(--color-green);
    color: var(--color-live);
}

.guide__item[aria-current="step"] .guide__num {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-graphite-dark);
}

.guide__step {
    backdrop-filter: blur(var(--blur-glass));
    background: var(--gradient-bg-components);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
}

.guide__step > h3 {
    color: var(--color-gold);
    font-size: var(--fs-base);
    margin-bottom: var(--space-3);
}

.guide__step > h3:focus {
    outline: none;
}

.guide__step > p {
    max-width: var(--measure);
}

.guide__pager {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
}

.guide:not(.guide--live) .guide__nav {
    display: none;
}

.code {
    margin: var(--space-3) 0;
}

.code__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.code__tab {
    background: transparent;
    border: var(--border-subtle);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: var(--color-silver);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    padding: var(--space-1) var(--space-3);
}

.code__tab[aria-selected="true"] {
    background: var(--surface-code);
    color: var(--color-gold);
}

.code__block {
    background: var(--surface-code);
    border: var(--border-subtle);
    border-radius: 0 var(--radius-md) var(--radius-md);
    color: var(--color-cream);
    font-family: var(--font-data);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    margin: 0;
    max-height: var(--code-max-height);
    overflow: auto;
    padding: var(--space-3) var(--space-4);
    position: relative;
}

.code__single {
    border-radius: var(--radius-md);
    margin: var(--space-3) 0;
}

.code__block code {
    color: inherit;
    font-size: inherit;
}

.code__copy {
    background: var(--color-graphite);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-silver);
    cursor: pointer;
    float: right;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    margin: 0 0 var(--space-2) var(--space-2);
    padding: var(--space-1) var(--space-2);
    position: sticky;
    right: 0;
    top: 0;
}

.code__copy:hover,
.code__copy:focus-visible {
    color: var(--color-gold);
}

.code__copy[data-state="done"] {
    color: var(--color-live);
}

.code__copy[data-state="failed"] {
    color: var(--color-ember);
}

.tok--comment {
    color: var(--color-graphite-light);
    font-style: italic;
}

.tok--string {
    color: var(--color-code-string);
}

.tok--number {
    color: var(--color-code-number);
}

.tok--keyword {
    color: var(--color-azure);
}

.fill {
    background: var(--surface-fill);
    border-radius: var(--radius-md);
    color: var(--color-gold);
    outline: var(--border-width-hair) dashed var(--color-gold-faint);
}

.fill--set {
    background: var(--surface-fill-set);
    color: var(--color-live);
}

.seq {
    margin: var(--space-3) 0 var(--space-4);
    max-width: var(--seq-max-width);
}

.seq__plot {
    display: block;
    width: 100%;
}

.seq__lanes text,
.seq__msg text {
    fill: var(--color-silver);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    text-anchor: middle;
}

.seq__lanes text {
    fill: var(--color-gold);
}

.seq__lanes line {
    stroke: var(--border-color-subtle);
    stroke-dasharray: 4 4;
}

.seq__msg line {
    stroke: var(--color-gold-soft);
    stroke-width: 1.5;
}

.seq__head {
    fill: var(--color-gold-soft);
}

.seq figcaption {
    align-items: center;
    color: var(--color-graphite-light);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}

.seq--playing .seq__msg {
    opacity: var(--opacity-dim);
    transition: opacity var(--motion-fast) ease;
}

.seq--playing .seq__msg.is-on {
    opacity: 100%;
}

.seq--playing .seq__msg.is-now line {
    animation: seq-draw var(--motion-step) ease-out;
    stroke: var(--color-gold);
    stroke-dasharray: var(--dash-draw);
}

.seq--playing .seq__msg.is-now text {
    fill: var(--color-cream);
}

@keyframes seq-draw {
    from {
        stroke-dashoffset: var(--dash-draw);
    }

    to {
        stroke-dashoffset: 0;
    }
}

.tool {
    border: var(--border-subtle-dashed);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0 0;
    max-width: var(--measure);
    padding: var(--space-3) var(--space-4);
}

.tool__label {
    color: var(--color-graphite-light);
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    margin-top: var(--space-2);
    text-transform: uppercase;
}

.tool__input {
    background: var(--surface-code);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-cream);
    display: block;
    font-family: var(--font-data);
    font-size: var(--fs-sm);
    margin: var(--space-1) 0 var(--space-2);
    min-height: var(--input-min-height);
    padding: var(--space-1) var(--space-2);
    resize: vertical;
    width: 100%;
}

.tool__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tool__out {
    display: grid;
    font-size: var(--fs-sm);
    gap: var(--space-1) var(--space-3);
    grid-template-columns: max-content minmax(0, 1fr);
    margin: var(--space-3) 0 0;
}

.tool__out[hidden] {
    display: none;
}

.facts th code {
    text-transform: none;
}

.tool__out dt {
    color: var(--color-graphite-light);
}

.tool__out dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.tool__note {
    color: var(--color-silver);
    font-size: var(--fs-sm);
    margin: var(--space-2) 0 0;
}

.filter {
    margin-bottom: var(--space-3);
    max-width: var(--measure);
}

.filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.filter__chip {
    background: transparent;
    border: var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--color-silver);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    padding: var(--space-1) var(--space-3);
}

.filter__chip[aria-pressed="true"] {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.mock {
    margin: 0;
}

.mock__panel {
    background: var(--color-graphite);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    max-width: var(--col-min-wide);
    padding: var(--space-3);
}

.mock__head {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-3);
}

.mock__title {
    color: var(--color-gold);
    font-family: var(--font-brand);
    font-size: var(--fs-xl);
}

.mock__sub {
    color: var(--color-live);
    font-size: var(--fs-xs);
}

.mock__banner {
    animation: mock-pulse var(--motion-pulse) ease-in-out var(--pulse-count) alternate;
    border: var(--border-width-strong) solid var(--color-live);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-2);
}

.mock__banner p {
    margin: var(--space-1) 0;
}

.mock__banner-head {
    color: var(--color-live);
    display: flex;
    font-size: var(--fs-xs);
    justify-content: space-between;
    text-transform: uppercase;
}

.mock__actions {
    display: flex;
    gap: var(--space-2);
}

.mock__confirm,
.mock__reject {
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}

.mock__confirm {
    color: var(--color-live);
}

.mock__reject {
    color: var(--color-ember);
}

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

.mock__switches li {
    border-top: var(--border-subtle);
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
}

.mock__on {
    color: var(--color-live);
}

.mock__off {
    color: var(--color-graphite-light);
}

.mock figcaption {
    color: var(--color-graphite-light);
    font-size: var(--fs-sm);
    margin-top: var(--space-2);
}

.api {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
}

.api__index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.api__link {
    background: transparent;
    border: 0;
    color: var(--color-azure);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    padding: var(--space-1) 0;
    text-align: left;
}

.api__link:hover,
.api__link:focus-visible {
    text-decoration: underline;
}

.ref {
    border-bottom: var(--border-subtle);
    padding: var(--space-2) 0;
}

.ref > summary {
    cursor: pointer;
    overflow-wrap: anywhere;
}

.ref[open] > summary {
    margin-bottom: var(--space-2);
}

.ref__method {
    color: var(--color-azure);
    font-family: var(--font-data);
    font-size: var(--fs-xs);
}

.ref__note {
    color: var(--color-silver);
    font-size: var(--fs-sm);
}

.ref__facts {
    display: grid;
    font-size: var(--fs-sm);
    gap: var(--space-1) var(--space-3);
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0 0 var(--space-2);
}

.ref__facts dt {
    color: var(--color-graphite-light);
}

.ref__facts dd {
    margin: 0;
}

.home__audience {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(var(--col-min-index), 1fr));
    margin-bottom: var(--space-4);
}

.flow {
    margin: 0 0 var(--space-4);
}

.flow__lanes {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.flow__node {
    backdrop-filter: blur(var(--blur-glass));
    background: var(--gradient-bg-components);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    position: relative;
}

.flow__node--store {
    border-color: var(--color-gold-faint);
}

.flow__node:not(:last-child)::after {
    background: var(--color-gold-faint);
    content: "";
    height: var(--border-width-strong);
    left: 100%;
    position: absolute;
    top: 50%;
    width: var(--space-8);
}

.flow__node:not(:last-child)::before {
    background: var(--color-gold);
    border-radius: var(--radius-full);
    content: "";
    height: var(--dot-size);
    left: 100%;
    opacity: 0%;
    position: absolute;
    top: calc(50% - var(--dot-size) / 2 + var(--border-width-hair));
    width: var(--dot-size);
    z-index: 1;
}

.flow--in .flow__node:nth-child(1)::before,
.flow--out .flow__node:nth-child(2)::before {
    animation: flow-dot var(--motion-step) ease-in-out;
}

.flow__name {
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.flow__figure {
    color: var(--color-cream);
    font-family: var(--font-data);
}

.flow__note {
    color: var(--color-graphite-light);
    font-size: var(--fs-sm);
}

.flow figcaption {
    color: var(--color-graphite-light);
    font-size: var(--fs-sm);
    margin-top: var(--space-2);
}

@keyframes flow-dot {
    from {
        opacity: 100%;
        transform: translateX(0);
    }

    to {
        opacity: 0%;
        transform: translateX(var(--space-8));
    }
}

.card__hint {
    color: var(--color-graphite-light);
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--font-weight-regular);
    letter-spacing: normal;
    line-height: var(--lh-normal);
    margin-top: var(--space-1);
    text-transform: none;
}

.code__copy--inline {
    float: none;
    margin: 0 0 0 var(--space-2);
    position: static;
    vertical-align: middle;
}

.legend {
    color: var(--color-silver);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: var(--space-1) var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.legend li {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.legend__swatch {
    border-radius: var(--radius-md);
    flex: none;
    height: var(--space-3);
    width: var(--space-3);
}

@keyframes mock-pulse {
    from {
        border-color: var(--color-live);
    }

    to {
        border-color: var(--color-green);
    }
}

@media (width >= 60rem) {
    .guide {
        grid-template-columns: var(--col-guide-nav) minmax(0, 1fr);
    }

    .guide__nav {
        align-self: start;
        position: sticky;
        top: var(--scroll-offset);
    }

    .guide__index,
    .api__index {
        flex-direction: column;
        overflow: visible;
    }

    .api {
        grid-template-columns: var(--col-guide-nav) minmax(0, 1fr);
    }

    .api__nav {
        align-self: start;
        position: sticky;
        top: var(--scroll-offset);
    }
}

@media (prefers-reduced-motion: reduce) {
    .seq--playing .seq__msg.is-now line,
    .mock__banner,
    .flow--in .flow__node:nth-child(1)::before,
    .flow--out .flow__node:nth-child(2)::before {
        animation: none;
    }

    .seq--playing .seq__msg,
    .button {
        transition: none;
    }
}