:root {
    --color-text: #222;
    --color-muted: #888;
    --color-background: #fff;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 48px;
}

/* Cross-document page transitions */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 180ms ease-in both page-transition-fade-out;
}

::view-transition-new(root) {
    animation: 220ms ease-out both page-transition-fade-in;
}

@keyframes page-transition-fade-out {
    to { opacity: 0; }
}

@keyframes page-transition-fade-in {
    from { opacity: 0; }
}

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

html,
body {
    margin: 0;
    padding: 0;
    background: var(--color-background);
    color: var(--color-text);
}

img {
    max-width: 100%;
}

a:focus-visible,
button:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}
/* Shared monochrome interface arrow. Inline SVG avoids emoji glyph substitution. */
.arrow-icon {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    flex: 0 0 auto;
    color: currentColor;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arrow-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

svg.arrow-icon {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

svg.arrow-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}