/* Apple system typography; local fonts fall back gracefully on other platforms. */
:root {
    --body-font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Helvetica Neue", sans-serif;
    --mono-font: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
    --surface-radius: 16px;
}
html { font-family: var(--body-font); }
button, input, select, textarea { font-family: inherit; }
pre, code, kbd, samp { font-family: var(--mono-font); }
:where(button, input:not([type=checkbox]):not([type=radio]), select, textarea, .icon-button, .theme-popup, #mdbook-help-popup, #mdbook-searchresults li, main img, main video, main iframe, main blockquote, main details, main .admonition, main .mdbook-alert, .table-wrapper, .code-window, .image-gallery) {
    border-radius: var(--surface-radius);
    corner-shape: squircle;
}
button, input, select, textarea, .icon-button { border-radius: 10px; }
.theme-popup, #mdbook-help-popup, #mdbook-searchbar, main blockquote, main details, main .admonition, main .mdbook-alert { border-radius: var(--surface-radius); corner-shape: squircle; }
main :not(pre) > code, kbd { border-radius: 5px; corner-shape: squircle; }
main img { box-shadow: 0 6px 24px rgb(0 0 0 / 16%); }
main img[data-gallery-image] { cursor: zoom-in; }
:where(button, [tabindex], input, select, textarea):focus-visible { outline: 2px solid var(--links); outline-offset: 4px; }

/* One scroll container keeps wide and tall tables usable with a sticky header. */
main .table-wrapper { max-height: 65vh; overflow: auto; margin: 1.5em 0; border: 1px solid var(--table-border-color); isolation: isolate; }
main .table-wrapper table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
main table thead { position: sticky; top: 0; z-index: 2; background: var(--table-header-bg); }
main table th, main table td { padding: 10px 14px; }
main table tbody tr { background: var(--bg); }
main table tbody tr:nth-child(even) { background: var(--table-alternate-bg); }

.code-window { margin: 1.5em 0; overflow: hidden; border: 1px solid var(--table-border-color); background: var(--quote-bg); }
.code-toolbar { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 4px 12px; box-sizing: border-box; }
.code-lights { display: flex; gap: 7px; flex-shrink: 0; }
.code-lights span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
.code-lights span:nth-child(2) { background: #febc2e; }
.code-lights span:nth-child(3) { background: #28c840; }
.code-language { font-size: 1.2rem; color: var(--fg); opacity: .7; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-toggle, .image-gallery button, .back-to-top { border: 1px solid var(--table-border-color); background: var(--theme-popup-bg); color: var(--fg); cursor: pointer; }
.code-toggle { padding: 6px 10px; white-space: nowrap; }
.code-window > pre { margin: 0; border-radius: 0; }
.code-window > pre > code { padding: 16px; }
.code-window > pre > .buttons { visibility: visible; opacity: 1; z-index: 3; }
.code-window > pre:has(> .buttons) > code { padding-top: 44px; }
.back-to-top { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); width: 46px; height: 46px; z-index: 110; font-size: 24px; box-shadow: 0 4px 20px rgb(0 0 0 / 18%); }
.back-to-top[hidden] { display: none; }

.image-gallery { width: min(1100px, calc(100vw - 32px)); max-width: none; height: min(850px, calc(100dvh - 32px)); max-height: none; padding: 16px; box-sizing: border-box; border: 1px solid var(--table-border-color); background: var(--bg); color: var(--fg); overflow: hidden; }
.image-gallery[open] { display: flex; flex-direction: column; gap: 12px; }
.image-gallery::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(10px); }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.image-gallery button { min-width: 44px; min-height: 44px; font-size: 1.6rem; }
.gallery-stage { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; min-height: 0; }
.gallery-stage > img { width: 0; flex: 1; height: 100%; min-width: 0; object-fit: contain; }
.gallery-caption { text-align: center; margin: 0; overflow-wrap: anywhere; max-height: 4em; overflow: auto; }
.gallery-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 5px; flex-shrink: 0; }
.gallery-thumbnails button { flex: 0 0 76px; height: 60px; padding: 3px; }
.gallery-thumbnails button[aria-current=true] { outline: 2px solid var(--links); outline-offset: 1px; }
.gallery-thumbnails img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
html.gallery-open { overflow: hidden; }
@media (max-width: 600px) { .image-gallery { padding: 10px; } .gallery-stage { gap: 4px; } .gallery-stage button { min-width: 36px; } }
@media print {
    .back-to-top, .image-gallery, .code-toolbar { display: none !important; }
    .code-window > pre[hidden] { display: block !important; }
    main .table-wrapper { max-height: none; overflow: visible; }
    main table thead { position: static; display: table-header-group; }
    main img { box-shadow: none; }
    .code-window { overflow: visible; }
}