/* SSG Custom CSS — Material-inspired design */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--md-default-fg-color); background: linear-gradient(180deg, #f8f8f8 0%, var(--md-default-bg-color) 200px); }
:root { --md-primary-fg-color: #1a1a2e; --md-primary-fg-color--light: #2d2d44; --md-primary-bg-color: #fff; --md-accent-fg-color: #4051b5; --md-default-fg-color: rgba(0,0,0,.87); --md-default-fg-color--light: rgba(0,0,0,.54); --md-default-fg-color--lighter: rgba(0,0,0,.32); --md-default-bg-color: #fff; --md-code-bg-color: #f5f5f5; --md-code-fg-color: #36464e; --md-footer-fg-color: #fff; --md-footer-fg-color--light: rgba(255,255,255,.7); --md-footer-bg-color: rgba(0,0,0,.87); --md-shadow-z1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); --md-shadow-z2: 0 3px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.12); --md-grid-width-margin: 61rem; }
[data-md-color-scheme="slate"] { --md-default-fg-color: rgba(255,255,255,.87); --md-default-fg-color--light: rgba(255,255,255,.54); --md-default-fg-color--lighter: rgba(255,255,255,.32); --md-default-bg-color: #292929; --md-code-bg-color: #1e1e1e; --md-code-fg-color: #d6d6d6; --md-primary-fg-color: #5f6dc4; }
.md-grid { max-width: var(--md-grid-width-margin); margin: 0 auto; padding: 0 1rem; }
.md-header { position: sticky; top: 0; z-index: 10; background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); box-shadow: var(--md-shadow-z1); }
.md-header__inner { display: flex; align-items: center; padding: 0.5rem 1rem; min-height: 2.4rem; }
.md-header__button { padding: 0.4rem; cursor: pointer; border-radius: 0.1rem; transition: opacity .25s; color: inherit; text-decoration: none; }
.md-header__button:hover { opacity: .7; }
.md-header__button.md-logo { padding: 0.2rem; margin: 0; }
.md-header__button.md-logo img { display: block; height: 1.6rem; width: auto; }
.md-header__title { flex: 1; margin-left: 0.5rem; overflow: hidden; min-width: 0; }
.md-header__ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.md-header__topic { color: inherit; text-decoration: none; font-weight: 700; }
.md-header__options { color: inherit; flex-shrink: 0; }
.md-header__lang { color: inherit; text-decoration: none; font-size: 0.85rem; padding: 0.4rem; opacity: .8; }
.md-header__lang:hover { opacity: 1; }
.md-header__button.md-icon svg { height: 1.2rem; width: 1.2rem; fill: currentColor; }
.md-tabs { background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); overflow-x: auto; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.1); }
.md-tabs__inner { display: flex; }
.md-tabs__item { padding: 0.8rem 1rem; color: inherit; text-decoration: none; font-size: 0.85rem; opacity: .7; transition: opacity .25s; text-transform: uppercase; letter-spacing: .05em; }
.md-tabs__item:hover { opacity: 1; }
.md-tabs__item--active { opacity: 1; border-bottom: 2px solid currentColor; }
.md-container { display: flex; flex-direction: column; min-height: calc(100vh - 3rem); }
.md-main { flex: 1; padding: 1.5rem 0; }
.md-main__inner { display: flex; gap: 2rem; }
.md-content { flex: 1; min-width: 0; }
.md-content__inner { padding: 0 0 2rem; }
.md-typeset h1 { font-size: 2em; margin: 0 0 1em; font-weight: 700; line-height: 1.3; }
.md-typeset h2 { font-size: 1.5em; margin: 1.5em 0 .8em; font-weight: 700; line-height: 1.4; border-bottom: 1px solid var(--md-default-fg-color--lighter); padding-bottom: .3em; }
.md-typeset h3 { font-size: 1.25em; margin: 1.2em 0 .6em; font-weight: 600; }
.md-typeset p { margin: 0 0 1em; }
.md-typeset a { color: var(--md-accent-fg-color); text-decoration: none; }
.md-typeset a:hover { text-decoration: underline; }
.md-typeset ul, .md-typeset ol { padding-left: 1.5em; }
.md-typeset li { margin: .3em 0; }
.md-typeset code { background: var(--md-code-bg-color); color: var(--md-code-fg-color); padding: .1em .3em; border-radius: .2em; font-size: .85em; }
.md-typeset pre { background: var(--md-code-bg-color); padding: 1em; border-radius: .3em; overflow-x: auto; }
.md-typeset pre code { background: none; padding: 0; color: inherit; }
.md-typeset img { max-width: 100%; height: auto; border-radius: .3em; }
.md-typeset blockquote { border-left: .2rem solid var(--md-default-fg-color--lighter); padding: .5rem 1rem; margin: 1rem 0; color: var(--md-default-fg-color--light); }
.md-typeset table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.md-typeset th, .md-typeset td { border: 1px solid var(--md-default-fg-color--lighter); padding: .5em .8em; text-align: left; }
.md-typeset th { background: var(--md-code-bg-color); font-weight: 600; }
.article-cover { margin: 1.5rem 0; text-align: center; }
.article-cover img { max-height: 400px; width: auto; display: inline-block; }
.article-meta { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; color: var(--md-default-fg-color--light); font-size: .85rem; }
.article-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.tag { background: var(--md-code-bg-color); padding: .15em .5em; border-radius: .2em; font-size: .8em; }
.md-sidebar { width: 12rem; flex-shrink: 0; }
.md-sidebar__scrollwrap { position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
.md-sidebar__inner { padding: .5rem 0; }
.md-nav__title { font-weight: 700; font-size: .85rem; margin-bottom: .5rem; color: var(--md-default-fg-color--light); }
.md-nav__list { list-style: none; padding: 0; margin: 0; }
.md-nav__link { display: block; padding: .25rem .5rem; color: var(--md-default-fg-color--light); text-decoration: none; font-size: .8rem; border-radius: .2rem; }
.md-nav__link:hover { background: var(--md-code-bg-color); color: var(--md-default-fg-color); }
.mdx-container { background: linear-gradient(135deg, var(--md-primary-fg-color), var(--md-primary-fg-color--light)); padding: 3rem 0; color: var(--md-primary-bg-color); }
.mdx-hero { text-align: center; padding: 2rem 0; }
.mdx-hero__content h1 { font-size: 2.2rem; margin: 0 0 .5rem; color: inherit; border: none; }
.mdx-hero__content p { font-size: 1.1rem; opacity: .9; margin: 0 0 1.5rem; max-width: 40rem; margin-left: auto; margin-right: auto; }
.mdx-hero__image { display: none; }
.md-button { display: inline-block; padding: .5rem 1.5rem; border: .05rem solid currentColor; border-radius: .1rem; color: var(--md-primary-fg-color); text-decoration: none; font-size: .85rem; font-weight: 700; transition: background .25s, color .25s; cursor: pointer; }
.md-button:hover { background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); text-decoration: none; }
.md-button--primary { background: var(--md-primary-bg-color); color: var(--md-primary-fg-color); }
.md-button--primary:hover { background: rgba(255,255,255,.9); }
.grid { display: grid; gap: 1.5rem; }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.card { background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lighter); border-radius: .3rem; padding: 1.2rem; transition: box-shadow .25s; }
.card:hover { box-shadow: var(--md-shadow-z2); }
.card h2 { font-size: 1.1rem; margin: 0 0 .5rem; border: none; }
.card h2 a { color: var(--md-default-fg-color); text-decoration: none; }
.card h2 a:hover { color: var(--md-accent-fg-color); }
.card p { color: var(--md-default-fg-color--light); font-size: .9rem; margin: 0 0 .8rem; }
.card img { width: 100%; height: auto; border-radius: .2rem; margin: .5rem 0; }
.card .md-button { font-size: .8rem; padding: .3rem 1rem; }
.md-footer { background: var(--md-footer-bg-color); color: var(--md-footer-fg-color--light); }
.md-footer-meta { padding: 1.5rem 0; }
.md-footer-meta__inner { display: flex; justify-content: center; font-size: .85rem; }
.md-footer-copyright { color: var(--md-footer-fg-color--light); }
ins.adsbygoogle { display: block; margin: 1.5rem auto; text-align: center; }
@media screen and (max-width: 76.25em) { .md-sidebar { display: none; } }
@media screen and (max-width: 48em) { .md-tabs__item { padding: .6rem .7rem; font-size: .8rem; } .mdx-hero__content h1 { font-size: 1.6rem; } .grid.cards { grid-template-columns: 1fr; } }

/* Drawer (mobile navigation) */
.md-drawer-overlay { position: fixed; inset: 0; top: 0; z-index: 20; background: rgba(0,0,0,.54); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.md-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 14rem; background: var(--md-default-bg-color); box-shadow: -2px 0 8px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }
.md-drawer__nav { display: flex; flex-direction: column; padding: 1rem 0; margin-top: 3rem; }
.md-drawer__item { padding: .6rem 1.5rem; color: var(--md-default-fg-color--light); text-decoration: none; font-size: .95rem; transition: background .2s, color .2s; }
.md-drawer__item:hover { background: var(--md-code-bg-color); color: var(--md-default-fg-color); }
.md-drawer__item--active { color: var(--md-primary-fg-color); font-weight: 700; border-left: 2px solid var(--md-primary-fg-color); padding-left: calc(1.5rem - 2px); }
#__drawer:checked ~ .md-drawer-overlay { opacity: 1; visibility: visible; }
#__drawer:checked ~ .md-drawer-overlay .md-drawer { transform: translateX(0); }
.md-drawer-overlay { pointer-events: none; }
.md-drawer-overlay * { pointer-events: auto; }

/* Dark mode toggle: sun/moon icons */
.md-dark-mode-toggle { background: none !important; border: none !important; }
.md-dark-mode-toggle svg { height: 1.2rem; width: 1.2rem; }