@font-face {
    font-family: "Rodondo";
    src: url("../_fonts/Rodondo.otf") format("opentype");
}
@font-face {
    font-family: "PixelOperator";
    src: url("../_fonts/PixelOperator.ttf") format("truetype");
}
.theme-dark-1, :root {
    --c-highlight-1: #ffffffc0;
    --c-highlight-2: #767e74;
    --c-main-1: #272727;
    --c-main-2: #191A19;
    --c-main-3: #1E201D;
    --c-main-4: #282A27;
    --c-main-5: #616959;
    --c-main-6: #B7B9B6;
    --header-img: url("/_img/assets/rw-assets/main-header-dark.png");
    --header-small: url("/_img/assets/main-header-dark-small.jpg");
    --blog-background-img: url(/_img/assets/rw-assets/aiimg1_rivend-dark.png);
    --gallery-thumbnail-size: calc((636px / 5) - 4px);
}
html ::selection {
    color: var(--c-main-1);
    background-color: var(--c-highlight-1);
}
html >::after {
    content: "";
    background-image: url("/_img/assets/noise.png");
    opacity: 0.03;
    position: fixed;
    pointer-events: none;
    inset: 0;
    z-index: 200;
}
@media only screen and (max-width: 768px) {
    html >::after {
        content: none;
    }
}
* {
    scrollbar-width: thin;
    box-sizing: border-box;
    image-rendering: pixelated;
    scrollbar-color: var(--c-main-4) var(--c-main-2);
}
img {
    max-width: 100%;
}
body {
    margin: 0 auto;
    background-color: var(--c-main-1);
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    color: var(--c-main-6);
    overflow-x: hidden;
    overflow-y: visible;
}
.container {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0;
}
@media only screen and (max-width: 768px) {
    .container {
        padding: 0 0 24px 0;
    }
}
.container .main-header {
    text-align: center;
    position: relative;
    height: 300px;
    background: var(--header-img);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rodondo";
    font-size: 3.2em;
    font-weight: 100;
    color: #ffffff;
    line-height: 1.5em;
    border-radius: 3px;
    image-rendering: auto;
}
@media only screen and (max-width: 768px) {
    .container .main-header {
        font-size: 2.8em;
        border-radius: 0 0 3px 3px;
    }
}
.container .main-header .header-title {
    z-index: 90;
    max-width: 90%;
}
.bar-marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    background-color: var(--c-main-2);
}
.bar-marquee-track {
    display: flex;
    flex-shrink: 0;
    animation: bar-marquee-scroll 40s linear infinite;
}
.bar-marquee:hover .bar-marquee-track {
    animation-play-state: paused;
}
.bar-marquee-track img {
    width: 88px;
    height: 31px;
    display: block;
    image-rendering: pixelated;
    object-fit: cover;
    flex-shrink: 0;
}
@keyframes bar-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
.container .main {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 8px;
}
@media only screen and (max-width: 768px) {
    .container .main {
        flex-direction: column;
    }
}
.container .main .main-left {
    min-width: 180px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 5px;
    height: fit-content;
}
@media only screen and (max-width: 768px) {
    .container .main .main-left {
        position: relative;
        top: 0;
        max-width: none;
    }
}
/* Site chrome buttons must not inherit the 7.css (Win7 widget) button skin —
   gradients, glow overlays and min sizes leak in because 7.css styles bare
   <button>. Scoped reset; the disclaimer window keeps the Win7 look. */
.main-left .navigation-container .navigation-title,
.main-right.tabs .tab-button,
.back-to-top-button {
    background-image: none;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
}
.main-left .navigation-container .navigation-title::before,
.main-left .navigation-container .navigation-title::after,
.main-right.tabs .tab-button::before,
.main-right.tabs .tab-button::after,
.back-to-top-button::before,
.back-to-top-button::after {
    content: none;
    position: static;
    background: none;
    box-shadow: none;
    opacity: 1;
    transition: none;
}
.main-left .navigation-container {
    display: flex;
    flex-direction: column;
    z-index: 10;
}
@media only screen and (max-width: 768px) {
    .main-left .navigation-container {
        margin: 0 8px;
    }
    .main-left .navigation-container button, .main-left .navigation-container a {
        padding: 6px 8px !important;
    }
}
.main-left .navigation-container .navigation-title {
    border: none;
    border-radius: 3px 3px 0 0;
    background-color: var(--c-main-4);
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    font-size: 1em;
    color: var(--c-main-6);
    text-align: left;
    width: fit-content;
    z-index: 2;
    padding: 3px 12px;
}
@media only screen and (max-width: 768px) {
    .main-left .navigation-container .navigation-title {
        width: 100%;
        border-radius: 3px;
    }
    .main-left .navigation-container:has(.navigation-open) .navigation-title {
        border-radius: 3px 3px 0px 0px;
    }
    .main-left .navigation-container .navigation-title::before {
        content: "";
        width: 8px;
        height: 8px;
        margin-left: 4px;
        border: 1px solid var(--c-main-6);
        border-top: none;
        border-left: none;
        margin-right: 8px;
        display: inline-block;
        transform: translateY(-3px) rotate(45deg);
        transition: transform 100ms ease-in-out;
    }
    .main-left .navigation-container:has(.navigation-open) .navigation-title::before {
        transform: translateY(2px) rotate(-135deg);
    }
}
.main-left .navigation-container .navigation-links {
    font-size: 1em;
    display: flex;
    flex-direction: column;
    background-color: var(--c-main-3);
    padding: 0 5px 5px 5px;
    border-radius: 2px 3px 3px 3px;
    z-index: 1;
}
@media only screen and (max-width: 768px) {
    .main-left .navigation-container .navigation-links {
        max-height: 0;
        overflow-y: hidden;
        padding: 0;
        transition: max-height 150ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .main-left .navigation-container .navigation-links.navigation-open {
        height: fit-content;
        max-height: 300px;
        padding: 0 5px 5px 5px;
    }
}
.main-left .navigation-container .navigation-links a {
    color: var(--c-main-6);
    text-decoration: none;
    display: block;
    border-radius: 1px;
    border-left: 1px dotted var(--c-main-5);
    border-bottom: 1px dotted var(--c-main-5);
    padding: 3px 5px 2px 10px;
}
.main-left .navigation-container .navigation-links a:first-of-type {
    padding-top: 5px;
    border-top-left-radius: 0;
}
.main-left .navigation-container .navigation-links a:last-of-type {
    border-bottom-left-radius: 3px;
}
.main-left .navigation-container .navigation-links a:hover {
    color: var(--c-highlight-1);
    text-decoration: underline;
}
/* "back to nicoteen" link on vomitboy sub-pages — stands out from the rest of the nav */
.main-left .navigation-container .navigation-links a.back-to-nicoteen {
    color: var(--c-highlight-1);
    font-weight: bold;
}
.main-left .navigation-container .navigation-links a.back-to-nicoteen:hover {
    text-decoration: underline;
}
.main-left .status {
    background: linear-gradient(to bottom, #fffdf0 0%, #fff8c6 100%);
    border: 1px solid #9a8f5a;
    border-radius: 3px;
    padding: 4px 8px;
    position: relative;
    color: #2b2b1d;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.35);
}
@media only screen and (max-width: 768px) {
    .main-left .status {
        margin: 0 8px;
    }
}
.main-left .status::after {
    content: "";
    position: absolute;
    background: #fff8c6;
    border-right: 1px solid #9a8f5a;
    border-bottom: 1px solid #9a8f5a;
    clip-path: polygon(100% 100%, 0% 0%, 0% 100%);
    left: 70px;
    bottom: -14px;
    height: 18px;
    width: 22px;
    transform: rotate(-180deg) scaleX(-1);
}
.main-left .status #statuscafe-username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main-left .status #statuscafe-username a {
    color: #2b2b1d;
}
.main-left .status .status-time {
    color: #9a8f5a;
    font-size: 11px;
}
.main-left .status #statuscafe-content {
    margin: 5px 0;
}
.main-left .status+#status-sona {
    height: 140px;
    align-self: flex-start;
    margin-top: 1px;
}
.main-left .status+#status-sona img {
    max-height: 100%;
    image-rendering: auto;
}
/* sidebar widgets: last.fm, view/visitor stats, fc2 clap */
.main-left #lastfm-widget,
.main-left #site-stats {
    background-color: var(--c-main-3);
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--c-main-6);
}
.main-left #lastfm-widget #lastfm-label {
    color: var(--c-main-5);
    margin-bottom: 2px;
}
.main-left #lastfm-widget #lastfm-song {
    display: block;
    color: var(--c-highlight-1);
    word-break: break-word;
}
.main-left #site-stats div+div {
    margin-top: 2px;
}
.main-left #clap-widget {
    text-align: center;
}
.main-left #clap-widget img {
    image-rendering: auto;
}
#theme-dropdown select,
.container .main #gallery-filter {
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;;
    font-size: 1em;
    padding: 3px 10px;
    color: var(--c-main-6);
    background-color: var(--c-main-4);
    border: 1px solid var(--c-main-4);
    border-radius: 3px;
    outline: 0;
    width: 100%;
}
#theme-dropdown select:hover,
.container .main #gallery-filter:hover {
    cursor: pointer;
    background-color: var(--c-main-3);
}
@media only screen and (max-width: 768px) {
    .main-left #theme-dropdown {
        margin: 0 8px;
    }
    .main-left #theme-dropdown select {
        padding: 6px 8px !important;
    }
}
.container .main .main-right.notabs {
    border-radius: 3px;
    background-color: var(--c-main-3);
    padding: 4px 8px 18px 8px;
    height: fit-content;
    position: relative;
    z-index: 2;
    overflow-y: hidden;
}
.tooltip {
    position: fixed;
    background-color: var(--c-highlight-1);
    color: var(--c-main-1);
    padding: 2px 4px;
    font-size: 16px;
    border-radius: 3px;
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    white-space: nowrap;
    display: none;
    pointer-events: none;
    z-index: 10;
}
@media only screen and (max-width: 768px) {
    .tooltip {
        display: none !important;
    }
}
.tooltip::after {
    content: "";
    position: absolute;
    border-radius: 3px;
    background-color: var(--c-highlight-1);
    clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
    left: 8px;
    bottom: -10px;
    height: 12px;
    width: 18px;
    transform: rotate(-180deg);
}
.home-page.container .main .main-right.notabs {
    background: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 8px;
    grid-template-areas:
        "intro intro intro"
        "chattable-column chattable-art chattable-art"
        "watching player player"
        "featured featured changelog";
}
@media only screen and (max-width: 768px) {
    .home-page.container .main .main-right.notabs {
        display: flex;
        flex-direction: column;
    }
}
.main-right.notabs >.page-section {
    background-color: var(--c-main-3);
    padding: 4px 8px 4px 8px;
    border-radius: 3px;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.home-page.container .main .main-right.notabs >div img {
    border-radius: 3px;
}
.home-page #home-page-introduction {
    grid-area: intro;
    position: relative;
}
.home-page #home-page-introduction .attention {
    padding-right: 92px;
}
.home-page #home-page-introduction .attention:last-of-type {
    padding-right: 8px;
}
@media only screen and (max-width: 768px) {
    .home-page #home-page-introduction .attention {
        padding-right: 8px;
    }
    .home-page #home-page-introduction .attention:last-of-type {
        padding-right: 42px;
    }
}
.home-page #chattable-column {
    grid-area: chattable-column;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.home-page #chattable-container {
    max-width: 100%;
    height: 360px;
    border: 1px solid var(--c-main-4);
    border-radius: 3px;
}
@media only screen and (max-width: 768px) {
    .home-page #chattable-column {
        margin: 0px 8px;
    }
}
.home-page #chattable-container #chattable {
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 3px;
}
.home-page #chattable-art {
    grid-area: chattable-art;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--c-main-2);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}
.home-page #chattable-art #art-title {
    font-family: "Courier New", Consolas, monospace;
    /* 84-char ascii banner must fit the ~400px grid column */
    font-size: 7px;
    line-height: 1.15;
    color: var(--c-highlight-1);
    white-space: pre;
    margin: 0 0 8px 0;
    overflow: hidden;
}
.home-page #chattable-art #art-text {
    /* same font as the navigation panel */
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-main-6);
    /* grow to fill the leftover height (this column stretches to match the
       taller chattable iframe next to it) instead of leaving blank canvas
       between the text and the ascii walker below */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-page #chattable-art #art-text p {
    margin: 0 0 10px 0;
}
.home-page #chattable-art #art-text p:last-child {
    margin-bottom: 0;
}
.home-page #chattable-art #ascii-walker {
    font-family: "Courier New", Consolas, monospace;
    font-size: 11px;
    line-height: 1.05;
    color: var(--c-main-5);
    white-space: pre;
    margin: 12px 0 0 0;
    text-align: center;
    overflow: hidden;
}
@media only screen and (max-width: 768px) {
    .home-page #chattable-art {
        margin: 0 8px;
        height: auto;
    }
    .home-page #chattable-art #art-title {
        font-size: 5.5px;
    }
}
/* dungeon.gif link — sits in the left sidebar, under the clap counter */
.main-left #dungeon-link {
    /* dungeon.gif is a tall 832x1024 portrait shot; object-fit:cover with a
       landscape box used to crop off the "ENTER THE DUNGEON" text at the
       bottom, so it's shown here at its natural ratio instead. */
    display: block;
    overflow: hidden;
    border-radius: 3px;
    transition: filter 0.15s ease;
}
.main-left #dungeon-link:hover {
    filter: brightness(1.15);
}
.main-left #dungeon-link img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}
@media only screen and (max-width: 768px) {
    .main-left #dungeon-link {
        margin: 0 8px;
    }
}
/* 88x31 button strip under the main header banner — scrolls like bar-marquee
   so a short placeholder row never leaves empty space on wide screens */
.button-strip {
    display: flex;
    overflow: hidden;
    width: 100%;
    background-color: var(--c-main-2);
    border-radius: 3px;
}
.button-strip-track {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
    padding: 4px;
    animation: button-strip-scroll 30s linear infinite;
}
.button-strip:hover .button-strip-track {
    animation-play-state: paused;
}
.button-strip .ph-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 31px;
    background-color: var(--c-main-3);
    border: 1px dashed var(--c-main-5);
    color: var(--c-main-5);
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    font-size: 10px;
    flex-shrink: 0;
}
@keyframes button-strip-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
/* stamp placeholders filling the empty cell next to the player */
/* "now watching" youtube widget — populated by /_js/yt-watching.js from a
   Firebase RTDB stream fed by the local chrome extension
   (_dev/yt-watching-extension). Empty until the DB url is configured;
   min-height keeps the reserved cell from collapsing meanwhile. */
.home-page #yt-watching {
    grid-area: watching;
    position: relative;
    min-height: 120px;
    padding-top: 28px;
    border-radius: 3px;
}
@media only screen and (max-width: 768px) {
    .home-page #yt-watching {
        margin: 0 8px;
    }
}
.home-page #yt-watching .yt-watching-label {
    position: absolute;
    top: 0;
    padding: 4px 8px;
    background-color: var(--c-main-4);
    line-height: 0.8em;
}
.home-page #yt-watching .yt-watching-paused {
    color: var(--c-main-5);
    font-size: 0.85em;
}
.home-page #yt-watching .yt-watching-idle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: var(--c-main-3);
    border-radius: 3px;
    color: var(--c-main-5);
    font-size: 0.9em;
    padding: 12px;
    text-align: center;
}
.home-page #yt-watching .yt-watching-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--c-main-3);
    border-radius: 3px;
    padding: 8px;
    color: var(--c-main-6);
    text-decoration: none;
}
.home-page #yt-watching .yt-watching-body:hover .yt-watching-title {
    color: var(--c-highlight-1);
    text-decoration: underline;
}
.home-page #yt-watching .yt-watching-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
    filter: grayscale(30%);
}
.home-page #yt-watching .yt-watching-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.home-page #yt-watching .yt-watching-title {
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.home-page #yt-watching .yt-watching-channel {
    color: var(--c-main-5);
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-page #yt-watching .yt-watching-time {
    font-size: 0.85em;
    color: var(--c-main-5);
}
.home-page #yt-watching .yt-watching-bar {
    display: block;
    height: 4px;
    background-color: var(--c-main-4);
    border-radius: 2px;
    overflow: hidden;
}
.home-page #yt-watching .yt-watching-bar-fill {
    display: block;
    height: 100%;
    background-color: var(--c-highlight-1);
    border-radius: 2px;
}
.home-page #webdeck-player-container {
    grid-area: player;
    margin-right: 8px;
    /* this row is only as tall as it is because #yt-watching's card next to
       it is tall; bottom-align instead of top so the player sits flush with
       the card below it rather than leaving a gap under itself */
    align-self: end;
    position: relative;
    aspect-ratio: 560 / 255;
    overflow: hidden;
    border-radius: 3px;
}
.home-page #webdeck-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: none;
    border-radius: 3px;
    width: 560px;
    height: 255px;
    transform-origin: top left;
    /* --player-scale is set by main.js (container width / 560); the cqw-based
       calc was dropped because length division in calc() is not widely supported
       and the whole transform got discarded, leaving the iframe unscaled. */
    transform: scale(var(--player-scale, 1));
}
@media only screen and (max-width: 768px) {
    .home-page #webdeck-player-container {
        margin: 0 8px;
        max-width: 100%;
    }
}
.home-page #filler-image {
    position: relative;
    height: 360px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--header-small);
    background-size: cover;
    background-position: center top;
}
.folder-title {
    position: relative;
    background-color: var(--c-main-3);
    box-shadow: 0 1px 0 var(--c-main-3);
    border-bottom: none;
    width: fit-content;
    padding: 3px 12px;
    margin-left: 8px;
    border-radius: 3px 3px 0 0;
    color: var(--c-main-6);
}
.folder-content {
    background-color: var(--c-main-3);
    padding: 5px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-page #changelog-container {
    grid-area: changelog;
    display: flex;
    flex-direction: column;
    /* both cells sit in an auto-sized grid row, so whichever box has
       taller natural content (usually the changelog list) stretches the
       row to match — height:100% can't fix that (circular against an
       auto track). JS mirrors #featured's real pixel height here instead
       (see initChangelogHeightSync in widgets.js), this is just the
       fallback before that runs / if JS is disabled. */
    max-height: 260px;
}
.home-page #changelog-container .folder-content {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}
@media only screen and (max-width: 768px) {
    .home-page #changelog-container {
        margin: 0 8px;
        max-height: none;
    }
}
.home-page #changelog {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: baseline;
    background-color: var(--c-main-2);
    border-radius: 3px;
    padding: 4px 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}
@media only screen and (max-width: 768px) {
    .home-page #changelog {
        height: auto;
        max-height: 115px;
    }
}
#changelog ul {
    padding-left: 14px;
    margin: 0;
}
#changelog li {
    list-style: "-";
    padding-left: 10px;
    width: fit-content;
}
#changelog div {
    padding-left: 4px;
}
#changelog .date {
    background: var(--c-highlight-2);
    padding: 0px 4px;
}
.home-page #featured {
    grid-area: featured;
    position: relative;
    height: fit-content;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding-top: 28px;
}
@media only screen and (max-width: 768px) {
    .home-page #featured {
        margin: 0 8px;
    }
}
.home-page #featured .featured-label {
    position: absolute;
    padding: 4px 8px;
    background-color: var(--c-main-4);
    top: 0;
    line-height: 0.8em;
}
.home-page #featured .featured-label a {
    color: inherit;
    text-decoration: underline;
}
.home-page #featured .feature-link {
    display: flex;
    position: relative;
    word-break: break-word;
}
.home-page #featured .feature-link::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background-color: var(--c-highlight-1);
    mix-blend-mode: multiply;
    opacity: 20%;
    pointer-events: none;
}
.home-page #featured .feature-link div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: end;
    justify-content: baseline;
    padding: 5px;
    background-color: color-mix(in srgb, var(--c-main-2) 80%, transparent);
    border-radius: 3px;
    display: none;
    z-index: 10;
    border: 1px solid var(--c-highlight-1);
    font-size: 1.1em;
}
.home-page #featured .feature-link:hover div {
    display: flex;
}
.home-page #featured .feature-link img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    image-rendering: auto;
    filter: grayscale(50%);
    border-radius: 3px;
}
/* loading state — shown until the pins arrive, so the grid never flashes
   the old broken placeholder tiles before swapping to real content */
.home-page #featured .feature-skeleton {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 3px;
    background-color: var(--c-main-3);
    animation: featured-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes featured-skeleton-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}
.home-page #featured .feature-error {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 1;
    color: var(--c-main-5);
    font-size: 0.9em;
    text-align: center;
    padding: 12px;
}
.main-right.tabs .tab-buttons {
    margin: 0 8px;
}
.main-right.tabs .tab-button {
    position: relative;
    border: none;
    border-radius: 3px 3px 0 0;
    background-color: var(--c-main-4);
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    font-size: 1em;
    color: var(--c-main-5);
    text-align: left;
    width: fit-content;
    padding: 3px 12px;
    text-align: center;
}
@media only screen and (max-width: 768px) {
    .main-right.tabs .tab-button {
        padding: 6px 12px;
    }
}
.main-right.tabs .tab-button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: var(--c-main-4);
    bottom: -5px;
    left: 0;
}
@media only screen and (max-width: 768px) {
    .main-right.tabs .tab-button {
        width: fit-content;
        max-width: 40%;
    }
}
.main-right.tabs .tab-button:hover {
    cursor: pointer;
    transform: translateY(-4px);
}
.main-right.tabs .tab-button.active {
    background-color: var(--c-main-3);
    box-shadow: 0 1px 0 var(--c-main-3);
    color: var(--c-main-6);
    z-index: 3;
}
.main-right.tabs .tab-button.active::before {
    content: none;
}
.main-right.tabs .tab-button.active:hover {
    transform: none;
}
.main-right.tabs .tab-content {
    position: relative;
    border-radius: 3px;
    background-color: var(--c-main-3);
    padding: 4px 8px 18px 8px;
    height: fit-content;
    display: none;
    z-index: 2;
    overflow-y: hidden;
}
.main-right.tabs .tab-content.active {
    display: block;
    height: fit-content;
}
a {
    color: var(--c-highlight-1);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.link-out::after {
    content: "↗";
    padding-left: 3px;
    font-size: 0.8em;
    vertical-align: top;
}
.attention {
    background-color: color-mix(in srgb, var(--c-highlight-1) 10%, transparent);
    border-radius: 3px;
    padding: 8px 8px 8px 8px;
    margin: 4px 0px;
    position: relative;
}
.attention p:first-of-type {
    margin-top: 0;
}
.attention p:last-of-type {
    margin-bottom: 0;;
}
.attention.warning::before {
    content: "⚠";
    line-height: 16px;
    padding-right: 12px;
    font-size: 1.2em;
    color: var(--c-highlight-1);
}
.highlight-basic {
    background-color: var(--c-highlight-2);
    padding: 0 2px;
}
.highlight-marker {
    --marker-color-1: color-mix(in srgb, var(--c-highlight-1) 30%, transparent);
    --marker-color-2: color-mix(in srgb, var(--c-highlight-1) 15%, transparent);
    --marker-color-3: color-mix(in srgb, var(--c-highlight-1) 20%, transparent);
    --marker-color-4: color-mix(in srgb, var(--c-highlight-1) 40%, transparent);
    background: linear-gradient(290deg,rgba(0,0,0,0) .9%, var(--marker-color-1) 2.4%, var(--marker-color-2) 5.8%, var(--marker-color-3) 93%, var(--marker-color-4) 96%,rgba(0,0,0,0) 98%),linear-gradient(290deg,rgba(0,0,0,0) 0, var(--marker-color-1) 7.9%,rgba(0,0,0,0) 15%);
    border-radius: 0.8em 0px 0.5em 0px;
}
.underline-basic {
    border-bottom: 1px dotted var(--c-main-5);
}
.redacted {
    background-color: var(--c-main-6);
    padding: 0px 2px;
}
.redacted:hover {
    color: var(--c-main-1);
}
h2.main-heading-2 {
    font-family: "PixelOperator", "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    font-weight: 100;
    background-color: var(--c-main-2);
    border-radius: 0 3px 3px 0;
    padding: 2px 4px;
    margin: 3px 0;
    font-size: 2em;
}
h2.main-heading-2.line-left {
    border-left: 1px dotted var(--c-main-5);
}
h2.main-heading-2.line-left::after {
    content: "";
    height: calc(100% - 10px);
    border-left: 1px dotted var(--c-main-5);
    position: absolute;
    top: 5px;
    left: 8px;
    z-index: -2;
}
h3.main-heading-3 {
    font-family: "PixelOperator", "MS PGothic", Arial, sans-serif;
    font-weight: 100;
    padding: 2px 8px;
    margin: 8px 0;
    border-bottom: 1px dotted var(--c-main-5);
    border-radius: 2px;
    font-size: 1.5em;
}
h3.main-heading-3.hide-line-left {
    position: relative;
    border-radius: 0 0 0 2px;
    border-left: 1px dotted var(--c-main-5);
}
h3.main-heading-3.hide-line-left::after {
    content: "";
    position: absolute;
    height: 1000vh;
    background-color: var(--c-main-3);
    width: 4px;
    top: 0;
    left: -1px;
    z-index: -1;
}
.main-right.notabs:has(.line-left)>div,
.main-right.notabs:has(.line-left)>p,
.main-right .tab-content:has(.line-left)>div,
.main-right .tab-content:has(.line-left)>p {
    padding-left: 8px;
    padding-right: 8px;
}
.about-page .introduction-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
@media only screen and (max-width: 768px) {
    .about-page .introduction-container  {
        flex-direction: column;
    }
}
.about-page .introduction-container .introduction-bubbles {
    flex: 2;
}
@media only screen and (max-width: 768px) {
    .about-page .introduction-container .introduction-bubbles {
        margin-bottom: 0;
    }
}
.about-page .introduction-container .introduction-mascot {
    flex: 1;
    aspect-ratio: 388 / 643;
    min-width: 80px;
    max-width: 210px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.about-page .introduction-container .introduction-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: translateY(16px);
}
@media only screen and (max-width: 768px) {
    .about-page .introduction-container .introduction-mascot {
        margin-bottom: 0;
        margin-top: 8px;
        max-width: 100%;
    }
}
.about-page .introduction-bubbles .introduction-bubble {
    position: relative;
    background-color: var(--c-main-4);
    margin: 0;
    margin-top: 14px;
    padding: 10px 14px;
    color: var(--c-main-6);
    border-radius: 3px;
    font-size: 1.15em;
}
.about-page .introduction-bubbles .introduction-bubble::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -14px;
    background-color: var(--c-main-4);
    width: 14px;
    height: 14px;
    z-index: 1;
}
.about-page .introduction-bubbles .introduction-bubble:last-of-type {
    position: relative;
}
.about-page .introduction-bubbles .introduction-bubble:last-of-type::after {
    right: -12px;
    bottom: 0px;
    height: 18px;
    border-radius: 3px;
    background-color: var(--c-main-4);
    clip-path: polygon(100% 100%, 0% 0%, 0% 100%);
}
@media only screen and (max-width: 768px) {
    .about-page .introduction-bubbles .introduction-bubble:last-of-type::after {
        right: 8px;
        bottom: -14px;
        height: 18px;
        width: 18px;
        transform: rotate(-180deg);
    }
}
.about-page .introduction-bubbles .intro-fly {
    /* the gif itself animates the fly crawling across its full 360px canvas,
       so stretching it to the container width makes the fly walk edge to edge */
    display: block;
    width: 100%;
    height: auto;
}
.about-page .introduction-bubbles .ph-intro-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    margin-top: 14px;
    background-color: var(--c-main-3);
    border-radius: 3px;
    color: var(--c-main-5);
    font-size: 10px;
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    box-sizing: border-box;
}
.about-page .introduction-container .introduction-profile-picture {
    flex: 1;
    position: relative;
}
.about-page .introduction-container .introduction-profile-picture::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    mask-image: url(/_img/assets/kiki.png);
    top: -10px;
    left: -1px;
    background-color: var(--c-highlight-1);
    z-index: -1;
}
.about-page .introduction-container .introduction-profile-picture img {
    width: 100%;
    image-rendering: auto;
}
@media only screen and (max-width: 768px) {
    .about-page .introduction-container .introduction-profile-picture img {
        max-width: 300px;
        max-height: 200px;
    }
    .about-page .introduction-container .introduction-profile-picture::before {
        display: none;
    }
}
.about-page .introduction-container .introduction-profile-picture img#desktop-pfp {
    transform: scaleX(-1);
    padding-right: 24px;
}
.about-page .introduction-container .introduction-profile-picture img#mobile-pfp {
    display: none;
}
@media only screen and (max-width: 768px) {
    .about-page .introduction-container .introduction-profile-picture img#desktop-pfp {
        display: none;
    }
    .about-page .introduction-container .introduction-profile-picture img#mobile-pfp {
        display: inline;
        padding-top: 24px;
    }
}
.about-page .main-right .box-masonry-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
@media only screen and (max-width: 768px) {
    .about-page .main-right .box-masonry-container {
        flex-direction: column;
    }
}
.about-page .box-masonry-container .box-masonry-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: fit-content;
    gap: 8px;
}
@media only screen and (max-width: 768px) {
    .about-page .box-masonry-container .box-masonry-column#column-2,
    .about-page .box-masonry-container .box-masonry-column#column-3 {
        display: none;
    }
}
.about-page .box-masonry-item .item-title {
    position: relative;
    background-color: var(--c-main-2);
    border: 1px solid var(--c-main-4);
    box-shadow: 0 1px 0 var(--c-main-2);
    border-bottom: none;
    width: fit-content;
    padding: 3px 8px;
    margin-left: 8px;
    border-radius: 3px 3px 0 0;
}
.about-page .box-masonry-item .item-content {
    background-color: var(--c-main-2);
    border: 1px solid var(--c-main-4);
    padding: 8px 5px;
    border-radius: 3px;
}
.about-page .box-masonry-item .item-content ul {
    padding-left: 14px;
    margin: 0;
}
.about-page .box-masonry-item .item-content li {
    list-style: "-";
    padding-left: 10px;
    width: fit-content;
    color: var(--c-main-5);
}
.about-page .box-masonry-item .item-content li.star {
    list-style-position: inside;
    position: relative;
    list-style: "☆";
    margin-left: 4px;
    padding: 0 4px;
    color: var(--c-main-6);
}
.about-page .box-masonry-item .item-content li.star:has(a) {
    color: var(--c-highlight-1);
}
.about-page #alphacentauri-wiki {
    margin-left: 8px;
}
.about-page #alphacentauri-wiki::before {
    content: "✦︎˚";
    line-height: 16px;
    padding-right: 12px;
    font-size: 1.2em;
    color: var(--c-highlight-1);
}
.about-page #crowley-run-away-gif {
    float: right;
    position: relative;
    margin: 8px 0px 8px 16px;
    width: 268px;
    padding: 0;
    display: flex;
}
.about-page #crowley-run-away-gif img {
    border-radius: 3px;
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    transition: filter 100ms ease-in-out;
}
.about-page #crowley-run-away-gif:hover img {
    filter: none;
}
.about-page #crowley-run-away-gif::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background-color: var(--c-highlight-2);
    left: 0;
    top: 0;
    opacity: 20%;
    mix-blend-mode: multiply;
    transition: opacity 100ms ease-in-out;
}
.about-page #crowley-run-away-gif:hover::after {
    opacity: 0%;
}
@media only screen and (max-width: 768px) {
    .about-page #crowley-run-away-gif {
        float: none;
        margin: 0 auto;
        display: flex;
        max-width: calc(100% - 8px);
        transform: translateX(8px);
    }
}
.about-page .snapshot-container {
    margin-bottom: 8px;
}
.about-page .snapshot-container .snapshot-title {
    position: relative;
    background-color: var(--c-main-2);
    border: 1px solid var(--c-main-4);
    box-shadow: 0 1px 0 var(--c-main-2);
    border-bottom: none;
    width: fit-content;
    padding: 3px 12px;
    margin-left: 8px;
    border-radius: 3px 3px 0 0;
}
.about-page .snapshot-container .snapshot-content {
    background-color: var(--c-main-2);
    border: 1px solid var(--c-main-4);
    padding: 8px;
    border-radius: 3px;
    display: flex;
}
.about-page .snapshot-container img {
    max-width: 100%;
    image-rendering: auto;
}
/* topster tabs (about page) — music / games / anime charts from topsters.org.
   Self-contained widget so it works inside .main-right.notabs; reuses the
   global switchTab() from main.js via the shared .tab-button/.tab-content classes. */
.about-page .topster-tabs {
    margin-bottom: 8px;
}
.about-page .topster-tabs .tab-buttons {
    display: flex;
    gap: 4px;
    margin: 0 8px;
}
.about-page .topster-tabs .tab-button {
    position: relative;
    border: none;
    border-radius: 3px 3px 0 0;
    background-color: var(--c-main-4);
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    font-size: 1em;
    color: var(--c-main-5);
    padding: 3px 12px;
    cursor: pointer;
}
.about-page .topster-tabs .tab-button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: var(--c-main-4);
    bottom: -5px;
    left: 0;
}
.about-page .topster-tabs .tab-button:hover {
    transform: translateY(-4px);
}
.about-page .topster-tabs .tab-button.active {
    background-color: var(--c-main-3);
    box-shadow: 0 1px 0 var(--c-main-3);
    color: var(--c-main-6);
    z-index: 3;
}
.about-page .topster-tabs .tab-button.active::before {
    content: none;
}
.about-page .topster-tabs .tab-button.active:hover {
    transform: none;
}
.about-page .topster-tabs .tab-content {
    position: relative;
    z-index: 2;
    display: none;
    background-color: var(--c-main-3);
    border-radius: 3px;
    padding: 8px;
}
.about-page .topster-tabs .tab-content.active {
    display: block;
}
.about-page .topster-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    cursor: zoom-in;
}
/* click-to-zoom overlay — topster exports are ~1800px wide with small text,
   shrunk to the ~670px column they'd be illegible without a full-size view */
.image-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    cursor: zoom-out;
    padding: 20px;
}
.image-lightbox.open {
    display: flex;
}
.image-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
}
/* resources page: obsidian tab + bookmarks table */
.tab-button .tab-icon {
    height: 13px;
    vertical-align: -2px;
    margin-right: 5px;
    image-rendering: auto;
}
h2.main-heading-2 .heading-icon {
    height: 0.8em;
    vertical-align: baseline;
    margin-right: 8px;
    image-rendering: auto;
}
.resources-page .note-tags {
    color: var(--c-main-5);
    font-size: 12px;
    margin: 0 0 6px 0;
}
/* dark table — every background/border/font is set explicitly because 7.css
   skins bare <table> as a white Win7 listview (white cells, gradient header) */
.resources-page .bookmarks-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    background: var(--c-main-3);
    table-layout: auto;
    white-space: normal;
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
    font-size: 13px;
    color: var(--c-main-6);
}
.resources-page .bookmarks-table th {
    font-family: "PixelOperator", "MS PGothic", Arial, sans-serif;
    font-weight: 100;
    font-size: 1.15em;
    text-align: left;
    color: var(--c-main-5);
    background: var(--c-main-2);
    border: none;
    height: auto;
    padding: 3px 10px;
}
.resources-page .bookmarks-table td {
    padding: 4px 10px;
    border: none;
    border-bottom: 1px dotted var(--c-main-5);
    background: transparent;
    vertical-align: top;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.resources-page .bookmarks-table tr:last-child td {
    border-bottom: none;
}
.resources-page .bookmarks-table td:first-child {
    white-space: nowrap;
}
.resources-page .bookmarks-table td:last-child {
    color: var(--c-main-5);
}
.resources-page .bookmarks-table tbody tr:hover td {
    background: var(--c-main-4);
    color: var(--c-main-6);
}
.resources-page .bookmarks-table a {
    color: var(--c-highlight-1);
}
@media only screen and (max-width: 768px) {
    .resources-page .bookmarks-table td:first-child {
        white-space: normal;
    }
}

/* kinnies / blinkies / stamps shrine boxes */
.about-page .shrine-box {
    border: 1px dashed var(--c-main-5);
    border-radius: 3px;
    background-color: var(--c-main-2);
    padding: 8px;
    margin-bottom: 8px;
}
.about-page .shrine-box-title {
    display: inline-block;
    font-family: "PixelOperator", "MS PGothic", Arial, sans-serif;
    font-size: 1.15em;
    color: var(--c-main-6);
    background-color: var(--c-main-4);
    border-radius: 2px;
    padding: 1px 10px;
    margin-bottom: 8px;
}
.about-page .shrine-columns {
    /* blinkies column shrinks to blinkie width, stamps take the rest */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
}
@media only screen and (max-width: 768px) {
    .about-page .shrine-columns {
        grid-template-columns: 1fr;
    }
}
.about-page .shrine-columns .shrine-box {
    margin-bottom: 0;
}
.about-page .kinnies-row {
    /* marquee: tracks scroll left like the 88x31 button strip on the home page */
    display: flex;
    overflow: hidden;
}
.about-page .kinnies-track {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    padding-right: 6px;
    animation: button-strip-scroll 25s linear infinite;
}
.about-page .kinnies-row:hover .kinnies-track {
    animation-play-state: paused;
}
.about-page .blinkies-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.about-page .stamps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 99px);
    justify-content: center;
    gap: 8px;
}
.about-page .ph-kin,
.about-page .ph-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-main-3);
    border: 1px dashed var(--c-main-5);
    border-radius: 2px;
    color: var(--c-main-5);
    font-size: 10px;
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;
}
.about-page .ph-kin {
    width: 56px;
    height: 56px;
}
.about-page .blinkie {
    height: 20px;
    width: auto;
    image-rendering: pixelated;
}
.about-page .ph-stamp {
    width: 99px;
    height: 56px;
}
.about-page .stamps-grid .stamp-img {
    display: block;
    width: 99px;
    height: 56px;
    object-fit: cover;
    border-radius: 2px;
    image-rendering: pixelated;
}
.gallery-page #gallery-page-blob-1 {
    position: absolute;
    height: 400px;
    bottom: 33px;
    left: -96px;
    image-rendering: pixelated;
    z-index: -1;
}
.gallery-page #gallery-page-blob-2 {
    position: absolute;
    height: 400px;
    top: 24px;
    right: -232px;
    image-rendering: pixelated;
    z-index: -1;
}
@media only screen and (max-width: 768px) {
    .gallery-page #gallery-page-blob-1,
    .gallery-page #gallery-page-blob-2 {
        display: none;
    }
}
.gallery-page .main-right #gallery-filter {
    width: 120px;
}
.gallery-page .main-right .art-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--gallery-thumbnail-size));
    gap: 4px;
    justify-content: left;
    margin-bottom: 12px;
}
@media only screen and (max-width: 1024px) {
    .gallery-page .main-right .art-gallery {
        justify-content: left;
    }
}
@media only screen and (max-width: 768px) {
    .gallery-page .main-right .art-gallery {
        justify-content: left;
    }
}
.gallery-page .art-gallery .gallery-image {
    display: flex;
    position: relative;
}
.gallery-page .art-gallery .gallery-image::before {
    position: absolute;
    content: "";
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: end;
    justify-content: baseline;
    background-color: color-mix(in srgb, var(--c-highlight-1) 20%, transparent);
    border-radius: 3px;
    display: none;
    z-index: 10;
    border: 1px solid var(--c-highlight-1);
}
.gallery-page .art-gallery .gallery-image:hover::before {
    display: flex;
}
.gallery-page .art-gallery .gallery-image:has(.gif)::after {
    content: "gif";
    position: absolute;
    top: 0;
    right: 0;
    color: var(--c-main-6);
    background-color: var(--c-main-3);
    padding: 2px 5px;
    text-transform: uppercase;
    z-index: 11;
}
.gallery-page .art-gallery .gallery-image img {
    height: var(--gallery-thumbnail-size);
    width: var(--gallery-thumbnail-size);
    object-fit: cover;
    border-radius: 2px;
    display: flex;
}
.gallery-page .art-gallery .gallery-image:hover img {
    cursor: pointer;
    filter: brightness(80%);
}
.gallery-page .art-gallery .gallery-image img,
.glightbox-container img {
    image-rendering: auto;
}
.glightbox-container .gdesc-inner {
    margin-top: 5px;
    color: var(--c-main-6);
    background-color: #0f100f;
}
@media only screen and (max-width: 768px) {
    :root {
        --gallery-thumbnail-size: calc(((100vw - 20px) / 3) - 10px);
    }
}
.main-right .boxed-text-1 {
    background-color: var(--c-main-4);
    padding: 8px;
    border-radius: 3px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.container.shrines-page .main .main-right.notabs {
    background: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shrines-page .main-right .shrine-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}
@media only screen and (max-width: 768px) {
    .shrines-page .main-right .shrine-grid {
        grid-template-columns: 1fr;
    }
}
.shrine-grid .shrine-box {
    display: flex;
    position: relative;
}
@media only screen and (max-width: 768px) {
    .shrine-grid {
        margin: 0 8px;
    }
}
.shrine-grid .shrine-box::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background-color: var(--c-highlight-1);
    mix-blend-mode: multiply;
    opacity: 20%;
    pointer-events: none;
}
.shrine-grid .shrine-box div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: end;
    justify-content: baseline;
    padding: 5px;
    background-color: color-mix(in srgb, var(--c-main-2) 80%, transparent);
    border-radius: 3px;
    display: none;
    z-index: 10;
    border: 1px solid var(--c-highlight-1);
    font-size: 1.1em;
}
.shrine-grid .shrine-box:hover div {
    display: flex;
}
@media only screen and (max-width: 768px) {
    .shrine-grid .shrine-box div {
        display: flex;
        width: fit-content;
        height: fit-content;
        border: none;
        background-color: var(--c-highlight-1);
        color: var(--c-main-1);
        top: 5px;
        left: 5px;
    }
}
.shrine-grid .shrine-box img {
    width: 100%;
    object-fit: cover;
    image-rendering: auto;
    filter: grayscale(100%);
    border-radius: 3px;
}
.links-page #ac-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}
.links-page #ac-buttons textarea {
    height: 31px;
}
.links-page .buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding-right: 4px !important;
}
.links-page .buttons-container:hover img {
    filter: grayscale(0%);
}
.links-page .buttons-container a {
    position: relative;
    display: flex;
    border: 1px solid #00000000;
    border-radius: 3px;
}
.links-page .buttons-container a:hover {
    border: 1px solid var(--c-highlight-1);
}
.links-page .buttons-container a::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 3px;
    background-color: var(--c-highlight-1);
    mix-blend-mode: multiply;
    opacity: 20%;
    pointer-events: none;
}
.links-page .buttons-container:hover a::after {
    opacity: 0;
}
.links-page .buttons-container a img {
    width: 88px;
    height: 31px;
    border-radius: 3px;
    filter: grayscale(100%);
}
.links-page .buttons-container a:hover img {
    cursor: pointer;
}
.links-page .webrings {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}
.links-page .bookmarks-list {
    padding-left: 18px;
}
.links-page .bookmarks-list li {
    list-style: "-";
    padding-left: 10px;
    width: fit-content;
}
.container .footer {
    text-align: center;
    color: var(--c-main-5);
    margin-top: 8px;
}
.container.sitemap-page {
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media only screen and (max-width: 768px) {
    .container.sitemap-page {
        padding: 24px 8px;
    }
}
.sitemap-page .sitemap-title {
    text-align: end;
    background-color: var(--c-main-3);
    padding: 2px 4px;
}
@media only screen and (max-width: 768px) {
    .sitemap-page .sitemap-title {
        padding: 4px 8px;
    }
}
.sitemap-page a {
    color: var(--c-main-6);
}
.sitemap-page a:hover {
    color: var(--c-highlight-1);
}
.sitemap-page .sitemap-tab::after {
    content: "Tab";
    text-transform: uppercase;
    font-size: 70%;
    vertical-align: top;
    padding-left: 4px;
    color: var(--c-main-5);
}
.sitemap-page .sitemap-item {
    background-color: var(--c-main-3);
    padding: 2px 4px;
    width: fit-content;
}
@media only screen and (max-width: 768px) {
    .sitemap-page .sitemap-item {
        padding: 4px 8px;
    }
}
.sitemap-page .indent {
    margin-left: 42px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.sitemap-page .indent::after {
    content: "";
    position: absolute;
    width: 2px;
    height: calc(100% - 6px);
    border-left: 1px dotted var(--c-main-5);
    border-radius: 3px;
    left: -18px;
    top: -4px;
}
.sitemap-page .indent * {
    position: relative;
    padding: 2px 4px;
}
.sitemap-page .indent *::before {
    content: "";
    height: 12px;
    width: 16px;
    position: absolute;
    top: 0px;
    left: -18px;
    border-bottom: 1px dotted var(--c-main-5);
    border-radius: 0px 2px;
}
.container.blog-page {
    max-width: 700px;
    padding: 30px 0px;
}
.container.blog-page .main {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
@media only screen and (max-width: 768px) {
    .container.blog-page .main {
        flex-direction: column;
    }
}
.blog-page .blog-navigation {
    display: flex;
    flex-direction: column;
    position: relative;
    height: fit-content;
    flex: 1;
}
.blog-page .blog-navigation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 37px);
    background: var(--blog-background-img);
    background-position: 50%;
    border-radius: 3px;
    z-index: -1;
    opacity: 20%;
}
@media only screen and (max-width: 768px) {
    .blog-page .blog-navigation::after {
        height: calc(100% - 42px);
    }
}
.blog-page .blog-navigation img {
    width: 158px;
    border-radius: 3px;
    align-self: flex-end;
}
.blog-page .blog-navigation .blog-intro {
    background-color: var(--c-main-3);
    background-color: color-mix(in srgb, var(--c-main-1) 80%, transparent);
    padding: 4px 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 3px 3px;
}
.blog-page .blog-navigation .blog-intro h1 {
    margin: 4px 0;
    color: var(--c-highlight-1);
}
.blog-page .blog-navigation .blog-intro span {
    color: var(--c-main-5)
}
@media only screen and (max-width: 768px) {
    .blog-page #theme-dropdown {
        margin: 0 8px;
    }
    #theme-dropdown select {
        padding: 6px 8px !important;
    }
}
.blog-page .blog-entries {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex: 2;
}
@media only screen and (max-width: 768px) {
    .blog-page .blog-entries {
        padding: 8px;
    }
}
.blog-entries .entry-link {
    background-color: var(--c-main-3);
    color: var(--c-main-6);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
    position: relative;
}
.blog-entries .entry-link:hover {
    background-color: var(--c-highlight-2) !important;
    text-decoration: none;
    transform: translateY(-4px);
}
.blog-entries .entry-link:hover {
    box-shadow: 3px 3px 0px color-mix(in srgb, black 20%, var(--c-main-1) 100%);
}
.blog-entries .entry-link img {
    width: 58px;
    height: 58px;
    border-radius: 3px;
    float: left;
    object-fit: cover;
    image-rendering: auto;
}
.blog-entries .entry-link div {
    display: flex;
    flex-direction: column;
}
.blog-entries .entry-link .entry-title {
    color: var(--c-highlight-1);
}
.entry-link .entry-date {
    color: var(--c-main-5);
}
.simple-return-link {
    margin: 8px;
    text-align: end;
}
.container.blog-entry {
    max-width: 600px;
    margin-top: 28px;
}
.container.tutorial-page {
    max-width: 700px;
    margin-top: 28px;
}
.blog-entry .main, .tutorial-page .main {
    display: flex;
    flex-direction: column;
}
@media only screen and (max-width: 768px) {
    .container.blog-entry, .container.tutorial-page {
        padding-top: 12px;
        padding-bottom: 24px;
    }
    .entry-nav, .tutorial-nav, .blog-entry .entry-content, .comments, .tutorial-content {
        margin: 0px 12px;
    }
}
.blog-entry .entry-header {
    position: relative;
    padding-top: 98px;
}
.blog-entry .entry-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--blog-background-img);
    opacity: 20%;
    background-position: 0%;
    z-index: -1;
    border-radius: 3px 3px 0px 0px;
}
.blog-entry .entry-header:has(img)::before {
    opacity: 20%;
    background-position: 0%;
    background: #cfff11;
    mix-blend-mode: multiply;
}
.blog-entry .entry-header img {
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    mask: linear-gradient(#000000 0%, #00000084 30%, #00000000 90%);
    filter: grayscale(100%);
    border-radius: 3px 3px 0px 0px;
}
.blog-entry .entry-header .header-title {
    font-family: sans-serif;
    font-size: 2.6em;
    line-height: 0.9em;
    letter-spacing: -1px;
    margin: 12px 0px;
    padding: 0px 8px;
}
.blog-entry .entry-header .header-date {
    background-color: var(--c-main-2);
    padding: 0px 8px;
}
@media only screen and (max-width: 768px) {
    .blog-entry .entry-header .header-title,
    .blog-entry .entry-header .header-date {
        padding: 0px 12px;
    }
}
.blog-entry li {
    list-style: "-  ";
}
.divider {
    width: 100%;
    border-bottom: 1px dotted var(--c-main-5);
}
.divider-with-text {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 8px;
}
.divider-with-text span {
    width: fit-content;
    color: var(--c-main-5);
}
.divider-with-text::before, .divider-with-text::after {
    content: "";
    flex: 1;
    border-bottom: 1px dotted var(--c-main-5);
    transform: translateY(-0.5em);
}
.blog-heading-1, .tutorial-heading-1 {
    font-family: sans-serif;
    line-height: 0.9em;
    letter-spacing: -1px;
    text-align: left;
    margin-bottom: 0px;
    font-size: 2.6em;
    margin-top: 10px;
}
@media only screen and (max-width: 768px) {
    .blog-heading-1, .tutorial-heading-1 {
        margin-left: 8px;
        margin-right: 8px;
    }
}
.blog-heading-2, .tutorial-heading-2 {
    font-family: sans-serif;
    line-height: 0.9em;
    letter-spacing: -1px;
    font-size: 1.6em;
    text-align: left;
}
.blog-heading-3 {
    font-family: sans-serif;
    color: color-mix(in srgb, var(--c-main-6) 60%, transparent);
}
.tutorial-heading-3 {
    font-family: sans-serif;
    margin-bottom: 0px;
    border-bottom: 1px dotted var(--c-main-5);
}
.entry-content img {
    max-width: 100%;
    border-radius: 3px;
    image-rendering: auto;
}
.layout-1-column {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.layout-1-column img {
    width: 480px;
}
@media only screen and (max-width: 768px) {
    .mobile-layout-1-column {
        display: grid;
        grid-template-columns: 1fr !important;
        justify-items: center;
    }
}
.layout-2-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.layout-3-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.blog-entry .youtube-embed {
    width: 300px;
    height: 170px;
}
.blog-entry .quote {
    padding-left: 12px;
    border-left: 1px dotted var(--c-main-5);
    color: color-mix(in srgb, var(--c-main-6) 60%, transparent);
    background-color: var(--c-main-2);
    padding: 8px;
    border-radius: 0px 3px 3px 0px;
}
.comments {
    position: relative;
    padding-top: 12px;
}
.comments::before {
    content: "";
    background-color: var(--c-main-2);
    position: absolute;
    z-index: -20;
    top: 0;
    left: calc(-100vw - 12px);
    width: 200vw;
    height: calc(100% + 68px);
}
.comments.no-background::before {
    display: none;
}
.blog-section-background {
    position: relative;
    padding-top: 12px;
    padding-bottom: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.blog-section-background::before {
    content: "";
    background-color: var(--c-main-2);
    position: absolute;
    z-index: -20;
    top: 0;
    left: calc(-100vw - 9px);
    width: 200vw;
    height: calc(100%);
}
.table-of-contents-container {
    margin: 18px 0px;
}
.table-of-contents, .table-of-contents .indent {
    display: flex;
    flex-direction: column;
    position: relative;
}
.table-of-contents::after, .table-of-contents .indent::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 4px;
    height: calc(100% - 12px);
    width: 2px;
    border-left: 1px dotted var(--c-main-5);
    border-bottom-left-radius: 3px;
}
.table-of-contents .indent {
    margin-left: 24px;
}
.table-of-contents a {
    margin-left: 24px;
    text-decoration: none;
    position: relative;
    text-transform: lowercase;
}
.table-of-contents a:hover {
    text-decoration: underline;
}
.table-of-contents a::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: -12px;
    border-bottom: 1px dotted var(--c-main-5);
    border-radius: 0px 3px;
}
.tutorial-page .tutorial-header {
    margin-bottom: 12px;
}
.tutorial-page img {
    image-rendering: auto;
    border-radius: 3px;
}
.code {
    background-color: var(--c-main-2);
    border-radius: 3px;
    padding: 6px;
    font-size: 1em;
}
.code pre {
    white-space:pre-wrap;
    color: var(--c-main-6);
    margin: 0px;
}
.code-comment {
    color: var(--c-main-6);
    opacity: 60%;
}
.code-html pre {
    color: var(--c-main-6);
}
.code-html pre .highlight {
    color: var(--c-highlight-1);
}
.not-found {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 120px;
}
.not-found .folder {
    max-width: 360px;
    position: relative;
    margin: 0 8px;
}
.not-found .folder-title {
    border: 1px solid var(--c-main-4);
    box-shadow: 0 1px 0 var(--c-main-3);
    border-bottom: none;
    z-index: 2;
}
.not-found .folder .folder-content {
    display: inline-block;
    padding: 24px 8px;
    text-align: center;
    border: 1px solid var(--c-main-4);
}
.back-to-top-button {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 20;
    background-color: var(--c-main-4);
    color: var(--c-main-6);
    padding: 4px 8px;
    border: 1px solid var(--c-main-4);
    border-radius: 3px;
    font-size: 1em;
    font-family: "MS PGothic", 'Trebuchet MS', Arial, sans-serif;;
    font-weight: 400;
    white-space: nowrap;
    transform: translateY(100px);
    transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1)
}
.back-to-top-button:hover {
    background-color: var(--c-main-3);
    cursor: pointer;
}
.back-to-top-button.show {
    transform: translateY(0px);
}
@media only screen and (max-width: 768px) {
    .back-to-top-button {
        display: none;
    }
}


.youtube-music-player {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--c-main-3);
    border-radius: 3px;
    background-color: var(--c-main-2);
}
.youtube-music-player img {
    width: 89px;
    height: 89px;
    object-fit: cover;
    display: none;
}
@media only screen and (max-width: 768px) {
    .youtube-music-player img {
        display: none;
    }
}
.youtube-music-player .player-info {
    flex: 1;
}
.youtube-music-player .artist {
    color: color-mix(in srgb, var(--c-main-6) 60%, transparent);
    margin-bottom: 8px;
}
.youtube-music-player .player-iframe {
    position: absolute;
    width: 0;
    height: 0;
    display: none;
}
.youtube-music-player .controls {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}
.youtube-music-player .controls .seekbar {
    flex: 1;
}
.youtube-music-player .controls input[type="range"] {
  accent-color: var(--c-highlight-1);
}
.youtube-music-player .controls .play-button {
    border: none;
    background-color: var(--c-main-1);
    border-radius: 3px;
    margin-right: 8px;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-main-6);
}
@media only screen and (max-width: 768px) {
    .youtube-music-player .controls .play-button {
        width: 2.5em;
        height: 2.5em
    }
}
.youtube-music-player .controls .play-button:hover {
    background-color: var(--c-highlight-1);
    color: var(--c-main-1);
    cursor: pointer;
}