:root {
    --blue: #02569f;
    --blue-hover: #1d74bf;
    --d-1: #000;
    --d-2: #333;
    --d-3: #666;
    --l-1: #fff;
    --l-2: #ccc;
    --l-3: #aaa;
    --violet: #4e02bd;
}
a {
    color: var(--d-1);
    text-decoration: none;
}
a:hover { color: var(--d-2); }
.actors { font-size: .9rem; }
.anchor {
    color: var(--d-2);
    opacity: .1;
    position: absolute;
    transform: translateX(-135%) scale(90%) translateY(5%);
}
body,
button,
input {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
body {
    color: var(--d-2);
    margin: 0;
}
.caption { font-size: .9rem; }
.commit {
    align-items: center;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
}
.commit:not(:first-child) { border-top: 1px solid  color-mix(in srgb, var(--l-2) 50%, transparent); }
.commit:first-child {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.commit:first-child > :nth-child(1) { border-top-left-radius: .5em; }
.commit:last-child {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.commit:last-child > :nth-child(1) { border-bottom-left-radius: .5em; }
.commit > * {
    font-size: .9rem;
    padding: .7rem .8rem;
}
.commit > :nth-child(1) {
    align-items: center;
    background: var(--blue);
    border: none;
    box-sizing: border-box;
    color: var(--l-1);
    cursor: pointer;
    display: flex;
    font-family: monospace;
    font-size: .8rem;
    height: 100%;
    justify-content: center;
    position: relative;
}
.commit > :nth-child(1):focus-visible,
.commit > :nth-child(1):hover {
    background: var(--blue-hover);
}
.commit > :nth-child(1) > span:nth-child(1) { z-index: 2; }
.commit > :nth-child(1) > span:nth-child(2) {
    background: var(--blue-hover);
    border-radius: 100%;
    font-size: .9rem;
    padding: .8rem;
    position: absolute;
    right: -1.2rem;
    z-index: 1;
}
.commit > :nth-child(1):not(:hover) > span:nth-child(2) { display: none; }
.commit > div:nth-child(2) {
    column-gap: .5em;
    display: flex;
    flex-flow: row wrap;
}
.commit > span:nth-child(4) {
    font-size: .9rem;
}
.commits summary { font-size: 1.4rem; }
:not(details) + details {
    margin-top: 2rem;
}
details + details {
    border-top: 1px solid color-mix(in srgb, var(--l-2) 50%, transparent);
    margin-top: .5rem;
    padding-top: .5rem;
}
details summary { cursor: pointer; }
details:not(.commits) summary { list-style: none; }
footer {
    color: var(--d-3);
    margin-block: 2rem;
}
h1 {
    color: var(--d-1);
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
header { margin-block: 2rem 4rem; }
main {
    margin-inline: auto;
    max-width: 60rem;
    padding-inline: 1.5rem;
}
nav {
    display: flex;
    flex-flow: row wrap;
    gap: .4em;
    margin-block: 1rem;
}
nav a {
    border: 1px solid var(--l-2);
    border-radius: .5rem;
    padding: .3em .5em;
}
nav a:hover {
    border: 1px solid var(--l-3);
}
nav a.active {
    background: var(--blue);
    border: 1px solid var(--blue);
    color: var(--l-1);
}
nav a.active.unreleased {
    background: var(--violet);
    border: 1px solid var(--violet);
    color: var(--l-1);
}
nav a.unreleased {
    border: 1px solid var(--violet);
    color: var(--violet);
}
.outline_item {
    margin-block: 4rem;
}
.outline_item.text { line-height: 1.4; }
.outline_item.text a {
    text-decoration: underline var(--l-3);
    text-underline-position: under;
}
.outline_item.text a:focus-visible,
.outline_item.text a:hover {
    text-decoration-color: var(--l-2);
}
.outline_item:hover .anchor { opacity: 1; }
.outline_item h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}
.outline_item img {
    border-radius: .5rem;
    box-shadow: 0 0 1rem var(--l-2);
    max-width: 100%;
    max-height: 60dvh;
}
.outline_item video {
    border-radius: .5rem;
    box-shadow: 0 0 1rem var(--l-2);
    max-width: 100%;
}
.project {
    align-items: center;
    column-gap: .8rem;
    display: flex;
    flex-flow: row wrap;
    font-size: 1.2rem;
    margin-block: 2rem;
}
.project strong {
    align-items: center;
    column-gap: .4em;
    display: flex;
    flex: 1;
    font-size: 1.4rem;
    font-weight: 500;
    white-space: nowrap;
}
.project strong img {
    height: 1.2rem;
    width: 1.2rem;
}
.release {
    align-items: center;
    column-gap: .5rem;
    display: flex;
    margin-top: .2rem;
}
.release h2 {
    font-weight: 400;
    margin: 0;
}
.release span:nth-child(3) {
    flex: 1;
    font-size: .9rem;
    text-align: right;
}
.stat {
    text-decoration: underline;
    text-underline-position: under;
}
.stat + .divider { color: var(--l-3); }
summary.change {
    align-items: center;
    column-gap: .5rem;
    display: flex;
}
summary.change > :nth-child(1) { flex: 1; }
summary.change > svg { color: var(--l-3); }
summary.change:hover > svg { color: #aa2019; }
.synopsis {
    color: var(--d-1);
    font-size: 1.4rem;
    margin-block: .5rem;
}
svg {
    display: block;
    fill: currentColor;
    height: 1em;
    width: 1em;
}
ul {
    list-style: none;
    padding-left: 0;
}
ul.commits {
    border-radius: .5rem;
    border: 1px solid  color-mix(in srgb, var(--l-2) 50%, transparent);
    /*box-shadow: 0 0 1rem var(--l-2);*/
    margin-block: 1.5rem;
}
.unreleased_badge {
    background: var(--violet);
    border-radius: .2rem;
    bottom: .2em;
    color: var(--l-1);
    font-size: .6em;
    margin-left: .5em;
    padding: .3em .5em;
    position: relative;
}