body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
    flex-direction: column;
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #263238;
    background-image:
        linear-gradient(rgba(128, 128, 128, 0.6), rgba(128, 128, 128, 0.6)),
        url('images/bg.jpg');
    background-blend-mode: soft-light;
    /* or multiply, overlay, etc */
}

body>* {
    width: 600px;
    max-width: 90vw;
}

img {
    max-width: calc(100% - 2px);
    border: 1px solid #26323866;
}

.codehilite {
    border: 1px solid #26323866;
    padding: 0;
    position: relative;
}

.codehilite > pre {
    margin: 0;
    overflow: auto;
    padding: 10px;
}

/* Toolbar for code blocks */
.code-toolbar {
    position: absolute;
    top: -24px;
    right: -1px;
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #26323844;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
    z-index: 1;
}

.codehilite:hover .code-toolbar,
.codehilite:focus-within .code-toolbar,
.code-block-enhanced:hover .code-toolbar,
.code-block-enhanced:focus-within .code-toolbar,
.codehilite.toolbar-visible .code-toolbar,
.code-block-enhanced.toolbar-visible .code-toolbar {
    opacity: 1;
    pointer-events: auto;
}

.code-toolbar button {
    font: 12px/1.2 "M PLUS Rounded 1c", sans-serif;
    padding: 2px 6px;
    border: 1px solid #26323844;
    background: #fff;
    color: #263238;
    border-radius: 4px;
    cursor: pointer;
}

.code-toolbar button:hover {
    background: #f0f4f8;
}

/* Wrapping support */
.codehilite.wrap > pre,
.code-block-enhanced.wrap > pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
}

/* Expanded state: center to viewport, use natural width up to viewport width */
.codehilite.expanded,
.code-block-enhanced.expanded {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 20px);
}

/* Ensure no wrapping when expanded */
.codehilite.expanded > pre,
.code-block-enhanced.expanded > pre {
    white-space: pre;
    overflow-x: auto;
}

/* Hide Wrap button when expanded (no-op in expanded mode) */
.codehilite.expanded .code-toolbar [data-role="wrap"],
.code-block-enhanced.expanded .code-toolbar [data-role="wrap"] {
    display: none;
}


.content {
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}


.yusei-magic {
    font-family: "Yusei Magic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Thirteen Pixel Fonts';
    src: url('./Thirteen-Pixel-Fonts.ttf') format('truetype');
}

.thirteen {
    font-family: "Thirteen Pixel Fonts", system-ui;
}

h1,
h2,
h3,
h4,
h5,
h6,
.admonition-title {
    font-family: "Yusei Magic", sans-serif
}


.main-header {
    font-size: 84px;
    line-height: calc(clamp(24px, 84px, 10vw) + 10px);
    /* font is a bit funky, so use margins to align it to the box */
    margin-left: -10px;
    margin-top: -10px;
}

.main-header a {
    text-decoration: none;
    color: inherit;
    font-size: clamp(24px, 84px, 10vw);
    line-height: clamp(24px, 84px, 10vw);
}

b,
strong {
    font-weight: 700;
}

.bsky {
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* space between icon and text */
    text-decoration: underline;
    color: inherit;
}

.bsky::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 13.5px;
    background: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 64 57" xmlns="http://www.w3.org/2000/svg"><path fill="%230085ff" d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"/></svg>') no-repeat center/contain;
}

.animated-gradient-text {
    background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15);
    background-size: 800% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-pan 10s ease infinite;
}

@keyframes gradient-pan {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

p code {
    font-family: "Source Code Pro", monospace;
    font-weight: 500;
    background-color: #5000FF16;
}

section.main-nav h2 {
    margin-top: 41.5px;
}

section.main-nav h3 {
    margin-bottom: 0;
}

section.main-nav h3+p {
    margin-top: 0;
}

a {
    transition: color 0.2s ease-in-out;
    color: inherit;
}

a:hover {
    color: blue;
}

section.main-nav h3 a {
    text-decoration: none;
}

section.main-nav h3 a::after {
    content: " 🔗";
    font-size: 0.8em;
}

/* Base styling for all admonitions */
.admonition {
    border-left: 4px solid #ccc;
    padding: 0.8em 1em;
    margin: 1em 0;
    background-color: #f9f9f9;
    border-radius: 4px;
    font-size: 0.95em;
}

.admonition-title {
    margin-bottom: 0.5em;
    font-size: 1.17em;
}

/* Note style */
.admonition.note {
    border-color: #2c82c9;
    background-color: #e7f3fa;
}

.admonition.note .admonition-title::before {
    content: "📝 ";
}

/* Warning style */
.admonition.warning {
    border-color: #d93e3e;
    background-color: #fcebea;
}

.admonition.warning .admonition-title::before {
    content: "⚠️ ";
}