:root {
    --bg-primary: #f7f8fa;
    --bg-secondary: #eef0f3;
    --text-primary: #171a1f;
    --text-secondary: #5a5f66;
    --border-color: #d7dae0;
    --code-bg: rgb(240, 240, 240);
    --code-text: rgb(68, 68, 68);
    --accent: rgb(0, 119, 255);
    --accent-hover: rgb(5, 150, 5);
    --scrollbar-color: var(--accent-hover);
    --footer-bg: #dde1e7;
    --footer-text: #3a3f47;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --icon-bg: #c7ccd4;
    --icon-hover-bg: #ffffff;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

[data-theme="dark"] {
    --bg-primary: #26282b;
    --bg-secondary: #2f3236;
    --text-primary: #eaebec;
    --text-secondary: #b0b3b8;
    --border-color: #45484e;
    --code-bg: rgb(240, 240, 240);
    --code-text: rgb(68, 68, 68);
    --footer-bg: #2f3236;
    --footer-text: #c8cbd0;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --icon-bg: #4a4d53;
    --icon-hover-bg: #eef0f3;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

img {
    max-width: 100%;
}

h1 {
    text-align: center;
    font-size: 2.2em;
    font-family: var(--font-mono), Inter, sans-serif;
}

h2 {
    font-family: var(--font-mono), Inter, sans-serif;
}

.code-span {
    font-family: var(--font-mono, monospace);
    background-color: var(--bg-secondary);
    border-radius: 5px;
    padding: 3px;
    margin: 0 5px;
}

.wrapper {
    display: block;
    width: 90%;
    margin: auto;
    line-height: 1.5em;
    font-size: 1em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html.sidebar-ready .wrapper {
    display: inline-block;
    width: 65%;
    margin: 0 0 0 2%;
    font-size: 1.1em;
}

.wrapper li {
    font-size: 1em;
}

pre code {
    border-radius: 10px;
}

pre.manual-highlight {
    border-radius: 10px;
    overflow-x: auto;
    padding: 0.5em;
    background: var(--code-bg);
    color: var(--code-text);
}

.language-tag {
    color: black;
}

.token-highlight {
    color: rebeccapurple;
}

.symbol-highlight {
    color: green;
    font-weight: bold;
}

.type-highlight {
    color: red;
}

.article-block {
    display: none;
    width: 24%;
    margin: 3%;
    vertical-align: top;
    font-family: var(--font-mono), Inter, sans-serif;
    border-right: 1px solid var(--border-color);
    padding-right: 3%;
    font-size: 2em;
    line-height: 1.3em;
    margin-bottom: 0%;
}

html.sidebar-ready .article-block {
    display: inline-block;
}

.article-block ul {
    list-style: none;
}

.article-block li {
    font-size: 1em;
    color: var(--text-primary);
    transition: color 0.5s ease;
    cursor: pointer;
    margin-bottom: 0.6em;
}

.no-touch .article-block li:hover {
    color: var(--accent-hover);
}

.content-nav-item {
    cursor: pointer;
    transition: color 0.3s ease;
}

.no-touch .content-nav-item:hover {
    color: var(--accent-hover);
}

.wrapper a {
    color: var(--accent);
    font-size: 1em;
    text-decoration: none;
    transition: color 0.5s ease;
}

.no-touch .wrapper a:hover {
    color: var(--accent-hover);
}

.navigator {
    text-align: center;
    width: 90%;
    margin: auto;
}

.navigator hr {
    border-color: var(--border-color);
}

.add-span-margin {
    margin: 2% 0;
}

.navigator span {
    font-family: var(--font-mono), Inter, sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: var(--text-primary);
    transition: color 0.5s ease;
    cursor: pointer;
    margin: 0 2%;
}

.no-touch .navigator span:hover {
    color: var(--accent-hover);
}

#nav-icon {
    display: flex;
    position: fixed;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 3;
    width: 2.6rem;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease, top 0.2s ease, left 0.2s ease;
}

html.sidebar-ready #nav-icon {
    display: none;
}

.no-touch #nav-icon:hover {
    border-color: var(--accent);
    transform: scale(1.06);
}

.hamburger-bars {
    position: relative;
    width: 1.2rem;
    height: 0.9rem;
}

.bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--text-primary);
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.bar1 {
    top: 0;
}

.bar2 {
    top: 50%;
    transform: translateY(-50%);
}

.bar3 {
    top: 100%;
    transform: translateY(-100%);
}

.animate-bar .bar1 {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.animate-bar .bar2 {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}

.animate-bar .bar3 {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

#content-navigation-anim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: var(--bg-secondary);
    clip-path: circle(0% at 1.9rem 1.9rem);
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

#content-navigation-anim.nav-open {
    clip-path: circle(150% at 1.9rem 1.9rem);
    pointer-events: auto;
}

#content-navigation-body {
    position: relative;
    width: 100%;
    height: 90%;
    top: 10%;
    left: 0%;
    scrollbar-width: none;
    overflow: auto;
    color: var(--text-primary);
}

.img-class {
    text-align: center;
}

.img-class img {
    width: min(300px, 90%);
    height: min(300px, 90%);
    max-width: 90%;
    max-height: none;
}

html.sidebar-ready .img-class img {
    width: 500px;
    height: 500px;
}

.video-class {
    text-align: center;
    margin: 1.8em 0;
}

.video-class video {
    width: 100%;
    max-width: 640px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    background-color: var(--bg-secondary);
}

.video-caption {
    text-align: center;
    margin-top: 0.6em;
    font-size: 0.85em;
    color: var(--text-secondary);
    font-family: var(--font-mono), Inter, sans-serif;
}

.social-media-icon {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    background-color: var(--icon-bg);
    border-color: transparent;
    color: var(--footer-text);
    border-radius: 30%;
    transition: all 0.5s ease;
    margin: 0 10px;
    flex-wrap: none;
    cursor: pointer;
    text-decoration: none;
}

.no-touch .social-media-icon:hover {
    color: rgb(68, 68, 68);
    background-color: var(--icon-hover-bg);
    width: 45px;
    height: 45px;
}

.icons {
    display: flex;
    margin: 10px;
}

.row-break {
    flex-basis: 100%;
    height: 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    width: 100%;
    min-height: 10rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: Raleway, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    flex-grow: 1;
}

/* Shared light/dark theme toggle button */
#theme-toggle {
    position: fixed;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, top 0.2s ease, right 0.2s ease;
}

.no-touch #theme-toggle:hover {
    transform: scale(1.08);
    border-color: var(--accent);
}

html.sidebar-ready #theme-toggle {
    top: 1rem;
    right: 1rem;
}

#theme-toggle svg {
    width: 1.3rem;
    height: 1.3rem;
    stroke: currentColor;
}

#theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] #theme-toggle .icon-moon {
    display: inline;
}

[data-theme="dark"] #theme-toggle .icon-sun {
    display: none;
}

/* The hamburger icon animates into an X and shifts to the top-right when the
   mobile contents overlay is open, which sits in the same spot as the toggle. */
body:has(#nav-icon.animate-bar) #theme-toggle {
    display: none;
}

.logo-image {
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
}

/* Shared "back to hub" link shown on individual blog pages */
.back-to-hub {
    position: fixed;
    top: 4.8rem;
    left: 0.6rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-mono), Inter, sans-serif;
    font-size: 0.8em;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, top 0.2s ease, left 0.2s ease;
}

.no-touch .back-to-hub:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.back-to-hub svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
}

body:has(#nav-icon.animate-bar) .back-to-hub {
    display: none;
}

html.sidebar-ready .back-to-hub {
    top: 1rem;
    left: 1rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9em;
}

/* Layout mode is decided at runtime by nav-layout.js, which measures the
   longest single word in the Contents list against the available sidebar
   width and adds this class only once the sidebar is confirmed to fit
   beside the article without overlapping it. The mobile/stacked styles
   above are therefore the default (safe) state — this avoids ever
   flashing the desktop sidebar layout before JS has had a chance to check,
   and the switch-over point adapts to each page's actual content instead
   of a hardcoded viewport width. */