/* The top bar every CrowOn site shares (server/site-header.mjs, docs/site-header.md). Copy this file as it is.
   44px on computers, 48px under 1000px (the site's own sticky things use --bar-h, set here). The page colour at 80% with
   saturate(180%) blur(20px); a hairline once the page moves. Light and dark follow the system; .sh-dark keeps it dark.
   Motion only for opening, closing and switching: the panel grows down out of the bar and its contents come in one after
   another; the phone menu fades in and a section's pages slide in from the side. */
:root { --bar-h: 44px; }
@media (max-width: 999px) { :root { --bar-h: 48px; } }
.sh { --sh-w: 1280px; --sh-g: 20px; --sh-bg: #fff; --sh-ink: #1d1d1f; --sh-ink-2: #6e6e73; --sh-line: rgba(0, 0, 0, .1); --sh-curtain: rgba(232, 232, 237, .4); --sh-ease: cubic-bezier(.4, 0, .6, 1); --sh-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", "Noto Sans JP", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sh { --sh-bg: #000; --sh-ink: #f5f5f7; --sh-ink-2: #a1a1a6; --sh-line: rgba(255, 255, 255, .14); --sh-curtain: rgba(0, 0, 0, .4); } }
:root[data-theme="dark"] .sh, .sh.sh-dark { --sh-bg: #000; --sh-ink: #f5f5f7; --sh-ink-2: #a1a1a6; --sh-line: rgba(255, 255, 255, .14); --sh-curtain: rgba(0, 0, 0, .4); }
@media (min-width: 768px) { .sh { --sh-g: 32px; } }
@media (min-width: 1200px) { .sh { --sh-g: 48px; } }

.sh { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); font-family: var(--sh-font); color: var(--sh-ink); -webkit-font-smoothing: antialiased; }
.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh ul { margin: 0; padding: 0; list-style: none; }
.sh p { margin: 0; }
.sh a { color: inherit; text-decoration: none; }
.sh button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sh :focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 2px; border-radius: 6px; }
.sh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sh-in { max-width: calc(var(--sh-w) + var(--sh-g) * 2); margin: 0 auto; padding: 0 var(--sh-g); }

/* The glass: one layer behind the bar that also grows down for the panel (.sh-fly), so bar and panel are one surface */
.sh-bar { position: relative; }
.sh-bar::before { content: ""; position: absolute; inset: calc(env(safe-area-inset-top, 0px) * -1) 0 0; z-index: -1; background: color-mix(in srgb, var(--sh-bg) 80%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 transparent; transition: box-shadow .3s; }
html.scrolled .sh-bar::before { box-shadow: 0 1px 0 var(--sh-line); }
.sh.open .sh-bar::before, .sh.menu .sh-bar::before { box-shadow: none; background: var(--sh-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sh-row { display: flex; align-items: center; gap: 28px; height: var(--bar-h); }

.sh-brand { display: flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; }
.sh-brand img { display: block; width: 26px; height: auto; }
.sh-brand .sh-dk { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sh-brand .sh-lt { display: none; } :root:not([data-theme="light"]) .sh-brand .sh-dk { display: block; } }
:root[data-theme="dark"] .sh-brand .sh-lt, .sh-dark .sh-brand .sh-lt { display: none; }
:root[data-theme="dark"] .sh-brand .sh-dk, .sh-dark .sh-brand .sh-dk { display: block; }
.sh-brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sh-brand em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--sh-ink-2); }

/* Sections (computers) */
.sh-nav { margin-inline-start: auto; }
.sh-nav > ul { display: flex; }
.sh-top-link { display: flex; align-items: center; height: var(--bar-h); padding: 0 10px; font-size: 12px; letter-spacing: -0.01em; opacity: .8; white-space: nowrap; transition: opacity .2s; }
.sh-top-link:hover, .sh-top-link[aria-expanded="true"] { opacity: 1; }
.sh-top-link[aria-current] { opacity: 1; font-weight: 600; }
.sh-end { display: flex; align-items: center; gap: 8px; flex: none; }
.sh-lang { display: inline-flex; align-items: center; min-height: var(--bar-h); padding: 0 6px; font-size: 12px; color: var(--sh-ink-2); transition: color .2s; }
.sh-lang:hover { color: var(--sh-ink); }

/* The panel: the glass grows from the bar to the open pane's height (set by the script); the pane's contents come in
   one after another, top first. Switching sections keeps the panel and changes only the height and the contents */
.sh-fly { position: absolute; left: 0; right: 0; top: 100%; z-index: -1; height: 0; background: var(--sh-bg); transition: height .32s var(--sh-ease); }
.sh-pane { position: absolute; left: 0; right: 0; top: 100%; visibility: hidden; pointer-events: none; }
.sh-item.open > .sh-pane { visibility: visible; pointer-events: auto; }
.sh-pane-in { display: flex; gap: 48px; padding-top: 40px; padding-bottom: 72px; }
.sh-g { min-width: 0; }
.sh-g-big { flex: 0 0 auto; min-width: 280px; max-width: 420px; }
.sh-g:not(.sh-g-big) { flex: 0 1 200px; }
.sh-g-h { margin-bottom: 14px; font-size: 12px; color: var(--sh-ink-2); }
.sh-g ul { display: grid; gap: 10px; }
.sh-g li a { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.35; }
.sh-g-big ul { gap: 12px; }
.sh-g-big li a { font-size: 24px; font-weight: 600; line-height: 1.17; letter-spacing: -0.015em; }
.sh-g a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-pane .sh-g-h, .sh-pane li { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.sh-item.open > .sh-pane .sh-g-h, .sh-item.open > .sh-pane li { opacity: 1; transform: none; transition: opacity .32s var(--sh-ease), transform .32s var(--sh-ease); }
/* The page below: blurred and dimmed while a panel or the phone menu is open */
.sh-curtain { position: fixed; inset: 0; z-index: -2; background: var(--sh-curtain); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); visibility: hidden; opacity: 0; transition: opacity .32s var(--sh-ease), visibility 0s .32s; }
.sh.open .sh-curtain { visibility: visible; opacity: 1; transition: opacity .32s var(--sh-ease); }

/* Phone: ☰ (two lines that turn into ×) opens a full-screen menu; a section's pages slide in from the side */
.sh-menu { display: none; }
.sh-menu > summary { list-style: none; position: relative; width: 44px; height: var(--bar-h); margin-inline-end: -12px; cursor: pointer; }
.sh-menu > summary::-webkit-details-marker { display: none; }
.sh-menu > summary span { position: absolute; left: 14px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .32s var(--sh-ease); }
.sh-menu > summary span:first-child { top: calc(50% - 3.5px); }
.sh-menu > summary span:last-child { top: calc(50% + 2.5px); }
.sh-menu[open] > summary span:first-child { transform: translateY(3px) rotate(45deg); }
.sh-menu[open] > summary span:last-child { transform: translateY(-3px) rotate(-45deg); }
.sh-sheet { position: fixed; inset: calc(var(--bar-h) + env(safe-area-inset-top, 0px)) 0 0; overflow: hidden; background: var(--sh-bg); }
.sh-main, .sh-sub { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; padding: 16px calc(var(--sh-g) + 28px) calc(40px + env(safe-area-inset-bottom, 0px)); transition: transform .38s var(--sh-ease), opacity .38s var(--sh-ease), visibility 0s; }
.sh-m-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.14; }
.sh-m-link svg { width: 20px; height: 20px; color: var(--sh-ink-2); }
.sh-main li, .sh-main .sh-cta { opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--sh-ease), transform .3s var(--sh-ease); }
.sh-menu[open] .sh-main li, .sh-menu[open] .sh-main .sh-cta { opacity: 1; transform: none; }
.sh-cta { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 28px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sh-ink); font-size: 17px; }
.sh-cta:active { transform: scale(.97); }
.sh-sub { transform: translateX(100%); visibility: hidden; transition: transform .38s var(--sh-ease), visibility 0s .38s; padding-top: 4px; }
.sh-sub.on { transform: none; visibility: visible; transition: transform .38s var(--sh-ease); }
.sh-sheet.sub .sh-main { transform: translateX(-24%); opacity: 0; visibility: hidden; transition: transform .38s var(--sh-ease), opacity .38s var(--sh-ease), visibility 0s .38s; }
.sh-back { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 8px -14px; color: var(--sh-ink-2); }
.sh-back svg { width: 22px; height: 22px; }
.sh-sub .sh-g { margin-bottom: 32px; }
.sh-sub .sh-g-h { margin-bottom: 10px; }
.sh-sub .sh-g-big li a { font-size: 28px; }
.sh-sub .sh-g li a { font-size: 17px; font-weight: 600; }
.sh-sub .sh-g ul { gap: 12px; }

@media (max-width: 999px) {
  .sh-nav { display: none; }
  .sh-end { margin-inline-start: auto; }
  .sh-menu { display: block; }
  .sh-lang { font-size: 14px; }
}
@media (max-width: 400px) { .sh-brand em { display: none; } }
@media (prefers-reduced-motion: reduce) { .sh *, .sh *::before, .sh *::after { transition: none !important; } }