/* css reset */
:root{-webkit-text-size-adjust:100%}*,*::before,*::after{box-sizing:border-box}html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0;padding:0}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}ul,ol{list-style:none}a{color:inherit;text-decoration:none}img,picture,video,canvas,svg{display:block;max-width:100%}table{border-collapse:collapse;border-spacing:0}button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0}button{cursor:pointer}

/* Base layout and typography */
html {
    height: 100%;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    background: #111;
    color: #f5f5f5;
}

/* App shell */
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: var(--app-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
    background: #111;
    position: relative;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--bg-image, linear-gradient(#00000055));
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 900ms ease;
    z-index: 0;
}
body.bg-ready::before {
    opacity: 1;
}
body.bg-fade-out::before {
    opacity: 0;
}
body > * {
    position: relative;
    z-index: 1;
}
body.is-loading #header,
body.is-loading #container,
body.is-loading nav {
    opacity: 0;
    pointer-events: none;
}
#header,
#container,
nav {
    transition: opacity 600ms ease;
}

/* Header */
header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background-color: #00000077;
    background: linear-gradient(178deg, #000000DD 0%, #00000000 100%), #00000033;
    backdrop-filter: blur(12px);
    box-shadow: 0 -1px 0 0 #FFFFFF33 inset, 0 1px 0 0 #00000077, 0 1px 8px 4px #00000077;
}
    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 128px;
        aspect-ratio: 1 / 1;
        width: auto;
        flex-shrink: 0;
    }
    .headline {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.35rem;
        text-align: left;
    }
        header h1 {
            font-size: 2rem;
            line-height: 1;
        }
        header h2 {
            font-size: 1rem;
            line-height: 1;
            font-weight: 500;
            color: #FFFFFFBB;
        }

/* Main container and panes */
#container {
    flex: 1 1 auto;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
    height: 0;
    min-height: 0;
}
    #links {
        flex: 0 0 320px;
        min-width: 560px;
        white-space: nowrap;
    }
    #rules ol {
        list-style-type: decimal;
    }
        #rules li {
            margin: 0 2.5em;
            line-height: 1.25em;
        }
    .pane {
        flex: 1 1 0;
        background: #FFFFFF11;
        border-radius: 0.25rem;
        padding: 1rem;
        overflow: auto;
        min-width: 0;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
        .pane ul,
        .pane ol {
            list-style-position: outside;
            margin: 0.5rem 0 0.5rem 1.5rem;
            padding: 0;
        }
        .pane ul {
            list-style-type: disc;
        }
        .pane ol {
            list-style-type: decimal;
        }
        .pane li {
            margin: 0.35rem 0;
            line-height: 1.35;
        }
    .alwaysShow {
        display: block;
    }
        h3 {
            font-size: 1.5rem;
            text-align: center;
            border-bottom: 1px solid #FFFFFF77;
            margin: 0 0 8px;
        }

        .pane .linkList {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 0;
            margin: 0;
            justify-content: flex-start;
            list-style: none;
        }
            .linkList > li {
                flex: 0 0 calc(50% - 2px);
                list-style: none;
                padding: 0;
                margin: 0;
                min-width: 0;
            }
            .linkList > li.fullWidth {
                flex: 0 0 100%;
            }
            .linkList > li.separator {
                flex: 0 0 100%;
            }
                .linkList > li > a {
                    display: block;
                    border: 1px solid #FFFFFF77;
                    border-radius: 32px;
                    background-color: #00000033;
                    position: relative;
                    isolation: isolate;
                    --link-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ctitle%3Elink-variant%3C/title%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M10.59%2C13.41C11%2C13.8%2011%2C14.44%2010.59%2C14.83C10.2%2C15.22%209.56%2C15.22%209.17%2C14.83C7.22%2C12.88%207.22%2C9.71%209.17%2C7.76V7.76L12.71%2C4.22C14.66%2C2.27%2017.83%2C2.27%2019.78%2C4.22C21.73%2C6.17%2021.73%2C9.34%2019.78%2C11.29L18.29%2C12.78C18.3%2C11.96%2018.17%2C11.14%2017.89%2C10.36L18.36%2C9.88C19.54%2C8.71%2019.54%2C6.81%2018.36%2C5.64C17.19%2C4.46%2015.29%2C4.46%2014.12%2C5.64L10.59%2C9.17C9.41%2C10.34%209.41%2C12.24%2010.59%2C13.41M13.41%2C9.17C13.8%2C8.78%2014.44%2C8.78%2014.83%2C9.17C16.78%2C11.12%2016.78%2C14.29%2014.83%2C16.24V16.24L11.29%2C19.78C9.34%2C21.73%206.17%2C21.73%204.22%2C19.78C2.27%2C17.83%202.27%2C14.66%204.22%2C12.71L5.71%2C11.22C5.7%2C12.04%205.83%2C12.86%206.11%2C13.65L5.64%2C14.12C4.46%2C15.29%204.46%2C17.19%205.64%2C18.36C6.81%2C19.54%208.71%2C19.54%209.88%2C18.36L13.41%2C14.83C14.59%2C13.66%2014.59%2C11.76%2013.41%2C10.59C13%2C10.2%2013%2C9.56%2013.41%2C9.17Z%22%20/%3E%3C/svg%3E");
                    text-align: center;
                    height: 36px;
                    line-height: 36px;
                    padding: 0 8px;
                    width: 100%;
                    text-decoration: none;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    min-width: 0;
                    text-shadow: 0 2px 4px #000000AA;
                }
                .link.cta {
                    font-weight: 700;
                    font-size: 1.15rem;
                    background-color: #4A8BE055;
                    border-color: #8FC0FF99;
                    height: 40px;
                    line-height: 40px;
                }
                .linkList > li > a::before {
                    content: "";
                    position: absolute;
                    left: 8px;
                    top: 8px;
                    height: calc(100% - 16px);
                    aspect-ratio: 1 / 1;
                    background-image: var(--link-icon);
                    background-repeat: no-repeat;
                    background-position: left top;
                    background-size: cover;
                    opacity: 0.5;
                    pointer-events: none;
                    transform-origin: center;
                    transform: translateY(8px) rotate(15deg) scale(2);
                    z-index: 0;
                }
                .linkLabel {
                    position: relative;
                    z-index: 1;
                }

            .link:hover {
                background-color: #77777733;
                border: 1px solid #FFFFFFBB;
            }
            .link.cta:hover {
                background-color: #5AA0F055;
                border-color: #A8D2FFBB;
            }
            .link:hover::before {
                opacity: 0.75;
            }
            .link:active {
                background-color: #00000055;
                border: 1px solid #FFFFFF55;
            }
            .link.cta:active {
                background-color: #3970BE66;
                border-color: #6EA7F5AA;
            }
        .pane a:not(.link) {
            font-weight: 600;
        }
        .pane a:not(.link):hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .fullWidth {
            flex-basis: 100%;
        }

        .hidden {
            display: none !important;
        }

        hr {
            height: 2px;
            border: none;
            border-top: 1px solid #00000099;
            border-bottom: 1px solid #FFFFFF55;
            width: 100%;
        }

/* Navigation */
nav {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
}
    .navBarWrap {
        position: relative;
        display: inline-flex;
        justify-content: center;
        max-width: 100%;
        isolation: isolate;
    }
    .navBar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        width: max-content;
        max-width: 100%;
        margin: 0 0 8px;
        padding: 0.75rem 1.25rem;
        border-radius: 128px;
        overflow-x: visible;
    }
    .navBarFadeLayer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: 128px;
        z-index: 3;
        contain: paint;
        transform: translateZ(0);
    }
    .navBarFade {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 48px;
        opacity: 0;
        transition: opacity 150ms ease;
        pointer-events: none;
        border-radius: 128px;
    }
    .navBarFadeLeft {
        left: 0;
        background: linear-gradient(to right, #111111, rgba(17, 17, 17, 0));
    }
    .navBarFadeRight {
        right: 0;
        background: linear-gradient(to left, #111111, rgba(17, 17, 17, 0));
    }
    .navBarWrap.navFadeLeft .navBarFadeLeft {
        opacity: 1;
    }
    .navBarWrap.navFadeRight .navBarFadeRight {
        opacity: 1;
    }
    .navBar.navBarFull {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
        .navBar li {
            list-style: none;
            flex: 0 0 auto;
        }
        .navBar li.isHidden {
            display: none;
        }
        .navBar .navSeparator {
            width: 1px;
            height: 28px;
            background: #FFFFFF77;
            border-radius: 1px;
            align-self: center;
        }
            .navBar li a {
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FFFFFF11;
                border-radius: 64px;
                border: 1px solid #FFFFFF33;
                font-weight: 600;
                padding: 0;
                text-align: center;
                width: 42px;
                height: 42px;
                color: inherit;
                text-decoration: none;
                user-select: none;
            }
            .navBar li a svg {
                width: 24px;
                height: 24px;
                max-height: 24px;
                max-width: 24px;
                margin: 0 auto;
                fill: currentColor;
            }
            .navBar li a.navActive {
                border-color: #FFFFFFAA;
                background: #FFFFFF22;
            }
                .navBar li a:hover {
                    background-color: #77777733;
                    border: 1px solid #FFFFFFBB;
                }
            .navBar li a:active {
                background-color: #00000055;
                border: 1px solid #FFFFFF55;
            }

/* Footer */
.footer {
    font-size: 0.8rem;
    color: #FFFFFFAA;
}
.footer .authorLink {
    display: inline;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer .authorPlain {
    color: inherit;
}


/* Shared glassmorphism surfaces */
.glassConvex,
.glassConcave {
    backdrop-filter: blur(8px);
    background-color: #00000077;
    box-shadow: 0 0 0 1px #FFFFFF33 inset, 0 0 0 1px #00000077, 0 1px 8px 4px #00000077;
}
.glassConvex {
    background: linear-gradient(358deg, #00000099 0%, #00000055 100%), #00000011;
}
.glassConcave {
    background: linear-gradient(178deg, #00000099 0%, #00000055 100%), #00000011;
}

/* Responsive layout */
@media (max-width: 979px) {
    #container {
        flex-direction: column;
    }
        #links {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            max-width: none;
            min-width: 0;
        }
}