/* One Thirteen site styles.
   The site is an index: the home page lists the work, with each name on the
   left and its details on the right. Every other page reads in one column.
   It uses the system font and follows the system's light or dark appearance. */

:root {
    color-scheme: light dark;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --page: #fff;
    --label: #111113;
    --label-2: #6e6e73;
    --label-3: #a1a1a6;
    --separator: #e6e6e9;
    --group: #f5f5f7;
    --group-hover: #ededf0;
    --control: rgb(0 0 0 / 5%);
    --control-hover: rgb(0 0 0 / 9%);
    --studio: var(--label);
    --studio-fill: #1d1d1f;

    --edge: clamp(1.25rem, 5vw, 5rem);
    --content: 64rem;
    --columns: minmax(0, 5fr) minmax(0, 6fr) 2.5rem;
    --title-size: clamp(2.25rem, 4vw, 3.75rem);
    --gutter: clamp(1.25rem, 2.5vw, 2.5rem);
    --prose-width: 40rem;
    --radius-group: 0.9rem;
    --radius-card: 1rem;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --page: #0c0c0d;
        --label: #f5f5f7;
        --label-2: #98989f;
        --label-3: #5c5c63;
        --separator: #26262a;
        --group: #18181b;
        --group-hover: #202024;
        --control: rgb(255 255 255 / 8%);
        --control-hover: rgb(255 255 255 / 13%);
        --studio-fill: #3a3a3e;
    }
}

/* Each app has a fill color (white text on it passes contrast in both
   appearances) and an ink color for its links and text on the page. */
.app-flyby { --app: #0e74b8; --app-ink: #0e74b8; }
.app-slug { --app: #5c7a24; --app-ink: #5c7a24; }
.app-bitbuddy { --app: #14806f; --app-ink: #14806f; }
.app-cribbo { --app: #c2334a; --app-ink: #c2334a; }
.app-sparrow { --app: #806843; --app-ink: #806843; }

@media (prefers-color-scheme: dark) {
    .app-flyby { --app-ink: #5cb5f2; }
    .app-slug { --app-ink: #a5cc66; }
    .app-bitbuddy { --app-ink: #4fd1b8; }
    .app-cribbo { --app-ink: #ff8293; }
    .app-sparrow { --app-ink: #d4b47e; }
}

/* Base */

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

html {
    background: var(--page);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--label);
    background: var(--page);
    font: 400 1.0625rem/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

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

h1,
h2,
h3,
p,
figure,
dl,
dd,
blockquote {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

code,
pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

pre code {
    font-size: inherit;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--label);
    outline-offset: 3px;
    border-radius: 4px;
}

.icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    color: var(--page);
    background: var(--label);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Masthead and footer */

.site-masthead,
.site-footer {
    width: min(100% - 2 * var(--edge), var(--content));
    margin-inline: auto;
}

.site-masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block: clamp(1.25rem, 2.5vw, 2rem);
}

.site-masthead__name {
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.site-masthead__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
}

.site-masthead__nav a {
    color: var(--label-2);
    text-decoration: none;
}

.site-masthead__nav a:hover,
.site-masthead__nav a[aria-current] {
    color: var(--label);
}

/* The footer keeps to the left like the pages: its links, then the copyright. */
.site-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 2rem 3rem;
    border-top: 1px solid var(--separator);
    color: var(--label-2);
    font-size: 0.95rem;
}

.site-footer__legal {
    order: 1;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2.5rem;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--label);
}

/* Pages: one column on the left, under the masthead's name, read top to
   bottom. Only the home page's list spreads across the whole frame. */

.pane {
    display: grid;
    grid-template-columns: minmax(0, var(--prose-width));
    align-content: start;
    width: min(100% - 2 * var(--edge), var(--content));
    margin-inline: auto;
    padding-block: clamp(2.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.pane:focus {
    outline: none;
}

/* Where a page belongs, above its title: an app, or a set of guides. */
.pane-context {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    color: var(--label-2);
    font-weight: 500;
    text-decoration: none;
}

.pane-context img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 23%;
}

.pane-context:hover {
    color: var(--label);
}

.pane-head {
    padding-bottom: clamp(2rem, 4.5vw, 3.5rem);
}

.pane-head > h1 {
    font-size: var(--title-size);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-wrap: balance;
}

.pane-head > p {
    max-width: 34rem;
    color: var(--label-2);
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.45;
    text-wrap: pretty;
}

.pane-head > * + * {
    margin-top: 1rem;
}

.lede {
    max-width: 34rem;
    margin-top: 1rem;
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.45;
}

/* Sections: a hairline above, then the title, then the content. */
.group {
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--separator);
}

.group-title {
    margin-bottom: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}

/* A section's title with a link to everything in it, side by side. */
.group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.group-head .group-title {
    margin-bottom: 0;
}

.group-head a {
    color: var(--label-2);
    font-size: 0.95rem;
    text-decoration: none;
}

.group-head a:hover {
    color: var(--label);
}

.group-intro {
    max-width: 34rem;
    margin-bottom: 1rem;
    color: var(--label-2);
}

.footnote {
    max-width: 34rem;
    margin-top: 1rem;
    color: var(--label-2);
    font-size: 0.92rem;
}

.footnote a {
    color: var(--label);
}

/* Lists: rows divided by hairlines, the way the home page lists the work. */

.list > * {
    position: relative;
    border-bottom: 1px solid var(--separator);
}

.list > :last-child {
    border-bottom: 0;
}

.list + .list {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--separator);
}

.list-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-block: 0.85rem;
    text-decoration: none;
}

.list > :first-child > .list-row {
    padding-top: 0;
}

.list-row > img {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 23%;
}

.list-row > .avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
}

.list-row__text {
    flex: 1 1 auto;
    min-width: 0;
}

.list-row__text strong {
    display: block;
    font-weight: 500;
}

.list-row__text small,
.list-row__text p {
    display: block;
    color: var(--label-2);
    font-size: 0.95rem;
    line-height: 1.45;
}

.list-row__text p + p {
    margin-top: 0.35rem;
}

a.list-row:hover strong {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.list-row__external {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--label-2);
}

/* A row that holds its own links instead of being one. */
.list > .list-row:first-child {
    padding-top: 0;
}

.list-row__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 0.15rem;
    font-size: 0.95rem;
}

.list-row__links a {
    color: var(--app-ink, var(--label));
    text-decoration: none;
}

.list-row__links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.list--info > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
}

.list--info > div:first-child {
    padding-top: 0;
}

.list--info dt {
    color: var(--label-2);
}

.list--info dd {
    text-align: right;
}

.list--steps {
    counter-reset: step;
}

.list--steps > li {
    display: flex;
    gap: 1rem;
    padding-block: 0.75rem;
    counter-increment: step;
}

.list--steps > li:first-child {
    padding-top: 0;
}

.list--steps > li::before {
    flex: 0 0 1.25rem;
    color: var(--label-2);
    content: counter(step);
    font-variant-numeric: tabular-nums;
}

.list--steps a:hover {
    text-decoration-thickness: 1px;
}

/* Questions open in place, with the same plus as the home page's rows. */
.list--questions summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.list--questions > :first-child > summary {
    padding-top: 0.25rem;
}

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

.list--questions summary::after {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    color: var(--label-2);
    content: "";
    transition: transform 320ms var(--ease), color 200ms ease;
}

.list--questions summary:hover::after,
.list--questions details[open] > summary::after {
    color: var(--label);
}

.list--questions details[open] > summary::after {
    transform: rotate(45deg);
}

.answer {
    max-width: 34rem;
    padding-bottom: 1.1rem;
    color: var(--label-2);
}

.answer > * + * {
    margin-top: 0.6rem;
}

.answer ol {
    padding-left: 1.25rem;
    list-style: decimal;
}

.answer ul {
    padding-left: 1.25rem;
    list-style: disc;
}

.answer li + li {
    margin-top: 0.25rem;
}

.answer a,
.answer strong {
    color: var(--label);
}

.answer code {
    font-size: 0.85em;
}

/* Buttons */

.pill {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0 1.15rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pill--app {
    color: #fff;
    background: var(--app, var(--studio-fill));
}

.pill--app:hover {
    filter: brightness(1.08);
}

.pill--quiet {
    color: var(--app-ink, var(--label));
    background: var(--control);
}

.pill--quiet:hover {
    background: var(--control-hover);
}

/* A small mark beside a name or title for something recent: New or Updated. */
.tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    color: var(--app-ink, var(--label));
    background: var(--control);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.45;
    white-space: nowrap;
    vertical-align: 0.15em;
}

/* Notices */

.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    max-width: 40rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-group);
    background: var(--group);
}

.notice > .icon {
    margin-top: 0.2rem;
    color: var(--app-ink, var(--label-2));
}

.notice p + p {
    margin-top: 0.35rem;
}

.notice a {
    color: var(--label);
}

.status-message {
    color: var(--label-2);
}

.status-message--error {
    color: var(--label);
}

/* Long-form text: guides, policies, posts */

.prose {
    max-width: var(--prose-width);
    line-height: 1.65;
}

.prose > * + * {
    margin-top: 1em;
}

.prose h2 {
    margin-top: 2.25em;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.prose h3 {
    margin-top: 1.75em;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.prose h4 {
    margin-top: 1.5em;
    font-size: 1rem;
    font-weight: 600;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
    margin-top: 0.5em;
}

.prose ul {
    padding-left: 1.4rem;
    list-style: disc;
}

.prose ol {
    padding-left: 1.5rem;
    list-style: decimal;
}

.prose li + li {
    margin-top: 0.4em;
}

.prose a {
    text-decoration-color: var(--label-3);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.prose a:hover {
    text-decoration-color: currentColor;
}

.prose strong {
    font-weight: 600;
}

.prose code {
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
    background: var(--control);
    font-size: 0.88em;
}

.prose img {
    border-radius: var(--radius-group);
}

.prose figcaption {
    margin-top: 0.5rem;
    color: var(--label-2);
    font-size: 0.9rem;
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--separator);
}

/* Loading placeholders */

.skeleton {
    border-radius: 0.4rem;
    background: var(--control);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    50% {
        opacity: 0.5;
    }
}

/* Home: the work, as a list. Opening a row shows a little more about it. */

.home {
    width: min(100% - 2 * var(--edge), var(--content));
    margin-inline: auto;
}

.home-intro {
    padding-block: clamp(3rem, 9vw, 7rem) clamp(2rem, 4vw, 3.5rem);
}

.home-intro p {
    max-width: 32ch;
    color: var(--label-2);
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
}

/* The story the admin features, when there is one. */
.home-callout {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 0.45rem 1rem 0.45rem 0.55rem;
    border-radius: 999px;
    background: var(--group);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.home-callout:hover {
    background: var(--group-hover);
}

.home-callout img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 23%;
}

.home-callout__dot {
    width: 0.5rem;
    height: 0.5rem;
    margin-inline: 0.25rem 0.1rem;
    border-radius: 50%;
    background: var(--label);
}

.home-callout img:not([hidden]) + .home-callout__dot {
    display: none;
}

.index {
    border-top: 1px solid var(--separator);
}

.index > li {
    border-bottom: 1px solid var(--separator);
}

.row {
    display: grid;
    grid-template-columns: var(--columns);
    gap: var(--gutter);
    align-items: baseline;
    padding-block: clamp(0.9rem, 1.5vw, 1.35rem);
    list-style: none;
    cursor: pointer;
}

.row::-webkit-details-marker {
    display: none;
}

.row__name {
    font-size: var(--title-size);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.02;
    transition: color 200ms ease;
}

.row__name small {
    margin-left: 0.5rem;
    color: var(--label-2);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: 0.2em;
}

.row__name .tag {
    font-size: 0.85rem;
    vertical-align: 0.55em;
}

.row__line {
    color: var(--label-2);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    text-wrap: pretty;
}

/* A plus that turns into a close mark when the row is open. */
.row__toggle {
    position: relative;
    align-self: center;
    justify-self: end;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--label-2);
    transition: transform 320ms var(--ease), color 200ms ease;
}

.row__toggle::before,
.row__toggle::after {
    position: absolute;
    top: calc(50% - 0.75px);
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    content: "";
}

.row__toggle::after {
    transform: rotate(90deg);
}

.work[open] .row__toggle {
    color: var(--label);
    transform: rotate(45deg);
}

.row:hover .row__toggle {
    color: var(--label);
}

/* Pointing at one row quiets the others, so the list reads one name at a time. */
@media (hover: hover) {
    .index:has(.row:hover) .work:not([open]) .row:not(:hover) .row__name {
        color: var(--label-3);
    }
}

/* Paused work stays in the list, but quietly. */
.work--paused .row__name {
    color: var(--label-2);
}

/* The panel: the work's picture under its name, the words under its line. */
.panel {
    display: grid;
    grid-template-columns: var(--columns);
    gap: var(--gutter);
    align-items: start;
    padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.panel__media {
    grid-column: 1;
}

.panel__body {
    display: grid;
    grid-column: 2 / -1;
    gap: 1.25rem;
    justify-items: start;
    max-width: 34rem;
}

.shot,
.still img {
    width: 100%;
    border-radius: var(--radius-group);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.still {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--radius-group);
}

.still__label {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.4rem;
    padding: 0 1rem;
    border-radius: 999px;
    color: #111113;
    background: rgb(255 255 255 / 92%);
    font-size: 0.92rem;
    font-weight: 600;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.still__label svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

.still:hover .still__label {
    background: #fff;
}

.posters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.posters a {
    display: block;
}

.posters img {
    width: 100%;
    border-radius: 0.5rem;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.panel__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 22.5%;
}

.panel__text {
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.45;
    text-wrap: pretty;
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.25rem;
    font-size: 0.95rem;
}

.facts dt {
    color: var(--label-2);
}

/* The admin can hide an app's status; its label goes with it. */
.facts > div:has(> dd[hidden]) {
    display: none;
}

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-weight: 500;
}

.links a {
    color: var(--app-ink, var(--label));
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.links--quiet {
    margin-top: -0.5rem;
    font-size: 0.95rem;
    font-weight: 400;
}

.links--quiet a {
    color: var(--label-2);
}

.links--quiet a:hover {
    color: var(--label);
}

.home-updates {
    display: grid;
    grid-template-columns: var(--columns);
    gap: var(--gutter);
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.home-updates__title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.home-updates__body {
    grid-column: 2 / -1;
}

.home-updates__list a {
    display: flex;
    align-items: baseline;
    gap: 0 1.5rem;
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--separator);
    text-decoration: none;
}

.home-updates__list li:first-child a {
    padding-top: 0;
}

.home-updates__list time {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--label-2);
    font-size: 0.95rem;
}

.home-updates__list a:hover > span:first-child {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.home-updates__all {
    display: inline-block;
    margin-top: 1rem;
    color: var(--label-2);
    font-size: 0.95rem;
    text-decoration: none;
}

.home-updates__all:hover {
    color: var(--label);
}

/* The film player */

.film-dialog {
    width: min(92vw, 84rem);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-card);
    background: #000;
}

.film-dialog::backdrop {
    background: rgb(0 0 0 / 80%);
}

.film-dialog video {
    width: 100%;
}

.film-dialog__close {
    position: absolute;
    z-index: 1;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #fff;
    background: rgb(0 0 0 / 55%);
    font-size: 1.5rem;
    line-height: 1;
}

/* Phones and narrow windows: one column, with titles above their content. */

@media (max-width: 760px) {
    .row,
    .panel,
    .home-updates {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel__media,
    .panel__body,
    .home-updates__body {
        grid-column: 1;
    }

    .pane-head > * + * {
        margin-top: 0.75rem;
    }

    .row {
        grid-template-columns: minmax(0, 1fr) 1.5rem;
        gap: 0.35rem 1rem;
    }

    .row__line {
        grid-row: 2;
    }

    .row__toggle {
        grid-row: 1 / 3;
        grid-column: 2;
    }

    .panel__body {
        gap: 1rem;
    }

    .panel__icon {
        display: none;
    }

    .home-updates__title {
        margin-bottom: 0.25rem;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}