:root {
    color-scheme: dark;
    --background: #000;
    --text: #fff;
    --muted: #bab8b8;
    --border: #aaa;
    --logo-filter: invert(1);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --background: #f2efe7;
        --text: #171715;
        --muted: #5f5c55;
        --border: #77736a;
        --logo-filter: none;
    }
}

:root[data-theme="light"] {
    color-scheme: light;
    --background: #f2efe7;
    --text: #171715;
    --muted: #5f5c55;
    --border: #77736a;
    --logo-filter: none;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #000;
    --text: #fff;
    --muted: #bab8b8;
    --border: #aaa;
    --logo-filter: invert(1);
}

body {
    width: 100%;
    max-width: 680px;
    box-sizing: border-box;
    margin: 4rem auto;
    padding: 0 1.25rem;
    font: 18px/1.7 system-ui, sans-serif;
    color: var(--text);
    background-color: var(--background);
}

.home-page {
    max-width: 500px;
}

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    color: var(--text);
}

.site-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.site-controls > span {
    color: var(--muted);
    font-size: 0.75rem;
}

.site-controls a,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    border: none;
    padding: 0;
    color: var(--text);
    background: none;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

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

.site-controls,
main {
    font-weight: 300;
}

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

.organization {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.organization-logo {
    width: 1em;
    height: 1em;
    margin-right: 0.35rem;
    object-fit: contain;
    vertical-align: -0.2em;
}

.intro {
    max-width: 30rem;
    margin: 0;
    font-size: 1.15rem;
}

.timeline {
    margin-top: 2.5rem;
}

.timeline-entry {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.timeline-entry h2 {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-entry p {
    margin: 0 0 0.35rem;
}

@media (max-width: 480px) {
    .timeline-entry {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        gap: 0.75rem;
    }
}

section {
    margin-top: 3rem;
}

h2 {
    margin-bottom: 0.5rem;
    font: inherit;
}

main > h1,
main > h2 {
    font-size: 1.5em;
}

main > h1 {
    font-weight: inherit;
}

ul {
    margin-top: 0;
    padding-left: 1.25rem;
}

#blog-heading + ul {
    padding-left: 0;
    list-style: none;
}

footer {
    margin-top: 4rem;
}

.webring-controls {
    display: grid;
    grid-template-columns: repeat(3, 24px);
    align-items: center;
    gap: 8px;
    width: 88px;
    perspective: 160px;
}

.webring-controls > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    line-height: 1;
    text-decoration: none;
}

.webring-logo-link {
    position: relative;
    width: 24px;
    isolation: isolate;
}

.webring-logo-link img {
    display: block;
    width: 24px;
    height: 24px;
    filter: var(--logo-filter);
    transform-origin: center;
}

.webring-controls.is-torque .webring-logo-link img {
    animation: torque-launch 760ms linear both;
}

.webring-controls.is-torque > a:first-child {
    animation: torque-arrow-left 950ms cubic-bezier(0.16, 1, 0.3, 1);
}

.webring-controls.is-torque > a:last-child {
    animation: torque-arrow-right 950ms cubic-bezier(0.16, 1, 0.3, 1);
}

.webring-controls.is-torque .webring-logo-link::after,
.webring-controls.is-ripple .webring-logo-link::before,
.webring-controls.is-ripple .webring-logo-link::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: 0;
}

.webring-controls.is-torque .webring-logo-link::after {
    animation: portal-pop 680ms 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes torque-launch {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    12% {
        transform: rotate(-18deg) scale(0.9, 1.08);
    }

    54% {
        transform: rotate(390deg) scale(1.13, 0.92);
    }

    73% {
        transform: rotate(405deg) scale(0.98, 1.03);
    }

    88% {
        transform: rotate(355deg) scale(1.01);
    }
}

@keyframes torque-arrow-left {
    0%, 100% { transform: translateX(0); }
    12% { transform: translateX(4px); }
    44%, 59% { transform: translateX(-7px); }
    76% { transform: translateX(2px); }
}

@keyframes torque-arrow-right {
    0%, 100% { transform: translateX(0); }
    12% { transform: translateX(-4px); }
    44%, 59% { transform: translateX(7px); }
    76% { transform: translateX(-2px); }
}

@keyframes portal-pop {
    0% { opacity: 0.75; transform: scale(0.65); }
    100% { opacity: 0; transform: scale(2.2); }
}

.webring-controls.is-coin .webring-logo-link img {
    animation: coin-flip 900ms cubic-bezier(0.16, 1, 0.3, 1);
    backface-visibility: visible;
}

@keyframes coin-flip {
    0%, 100% { transform: rotateY(0deg) scale(1); }
    20% { transform: rotateY(110deg) scale(0.82, 1.15); }
    48% { transform: rotateY(390deg) scale(1.12, 0.9); }
    76% { transform: rotateY(690deg) scale(0.96, 1.04); }
    100% { transform: rotateY(720deg) scale(1); }
}

.webring-controls.is-gyro .webring-logo-link img {
    animation: gyroscope 1.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
}

@keyframes gyroscope {
    0%, 100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    28% { transform: rotateX(72deg) rotateY(210deg) rotateZ(80deg) scale(1.1); }
    62% { transform: rotateX(-48deg) rotateY(520deg) rotateZ(260deg) scale(0.92); }
    86% { transform: rotateX(18deg) rotateY(700deg) rotateZ(350deg) scale(1.03); }
    100% { transform: rotateX(0deg) rotateY(720deg) rotateZ(360deg); }
}

.webring-controls.is-orbit > a:first-child {
    animation: orbit-left 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.webring-controls.is-orbit > a:last-child {
    animation: orbit-right 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.webring-controls.is-orbit .webring-logo-link img {
    animation: orbit-pulse 1.1s ease-in-out;
}

@keyframes orbit-left {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(22px, -18px) rotate(90deg); }
    50% { transform: translate(64px, 0) rotate(180deg); }
    75% { transform: translate(22px, 18px) rotate(270deg); }
}

@keyframes orbit-right {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-22px, 18px) rotate(-90deg); }
    50% { transform: translate(-64px, 0) rotate(-180deg); }
    75% { transform: translate(-22px, -18px) rotate(-270deg); }
}

@keyframes orbit-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.78) rotate(180deg); }
}

.webring-controls.is-glitch .webring-logo-link::before,
.webring-controls.is-glitch .webring-logo-link::after {
    position: absolute;
    inset: 0;
    background: url("assets/ring_logo_black.svg") center / contain no-repeat;
    content: "";
    filter: var(--logo-filter);
    opacity: 0;
    pointer-events: none;
}

.webring-controls.is-glitch .webring-logo-link img {
    animation: glitch-core 520ms steps(2, end);
}

.webring-controls.is-glitch .webring-logo-link::before {
    animation: glitch-clone-a 520ms steps(2, end);
}

.webring-controls.is-glitch .webring-logo-link::after {
    animation: glitch-clone-b 520ms steps(2, end);
}

@keyframes glitch-core {
    0%, 100% { opacity: 1; transform: translate(0) rotate(0deg); clip-path: inset(0); }
    18% { transform: translate(-5px, 2px) skewX(18deg); clip-path: inset(0 0 58% 0); }
    36% { opacity: 0.15; transform: translate(7px, -2px) rotate(24deg); clip-path: inset(42% 0 18% 0); }
    52% { opacity: 0; transform: scaleX(1.7); }
    68% { opacity: 1; transform: translate(-6px) rotate(330deg); clip-path: inset(65% 0 0 0); }
    84% { transform: translate(3px) rotate(365deg); clip-path: inset(0); }
}

@keyframes glitch-clone-a {
    0%, 100% { opacity: 0; transform: translate(0); }
    18%, 36% { opacity: 0.55; transform: translate(7px, -3px) scaleX(0.92); clip-path: inset(0 0 55% 0); }
    52%, 68% { opacity: 0.35; transform: translate(-8px, 3px); clip-path: inset(58% 0 0 0); }
}

@keyframes glitch-clone-b {
    0%, 100% { opacity: 0; transform: translate(0); }
    26%, 44% { opacity: 0.4; transform: translate(-6px, 4px); clip-path: inset(38% 0 22% 0); }
    60%, 76% { opacity: 0.5; transform: translate(6px, -2px) rotate(18deg); clip-path: inset(0 0 62% 0); }
}

.webring-controls.is-ripple .webring-logo-link img {
    animation: liquid-logo 760ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.webring-controls.is-ripple .webring-logo-link::before {
    animation: liquid-ring 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.webring-controls.is-ripple .webring-logo-link::after {
    animation: liquid-ring 760ms 110ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes liquid-logo {
    0%, 100% { transform: scale(1); }
    18% { transform: scale(1.28, 0.72); }
    42% { transform: scale(0.78, 1.24); }
    66% { transform: scale(1.12, 0.9); }
    84% { transform: scale(0.96, 1.05); }
}

@keyframes liquid-ring {
    0% { opacity: 0.7; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(2.35); }
}

blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 4px solid var(--border);
    color: var(--muted);
}

img {
    max-width: 100%;
}

pre {
    overflow-x: auto;
}