.ck-site-header, .ck-site-header * { box-sizing: border-box; }
.ck-site-header { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 4.25rem; padding: .65rem clamp(1rem, 3vw, 2.25rem); color: var(--color-ink, #f4f7fb); background: var(--color-surface, rgba(14, 23, 32, .94)); border-bottom: 1px solid var(--color-line, rgba(42, 58, 73, .28)); box-shadow: 0 8px 28px rgba(0, 0, 0, .22); backdrop-filter: blur(14px); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ck-site-brand { display: inline-flex; align-items: center; gap: .7rem; min-width: max-content; color: inherit; text-decoration: none; }
.ck-site-brand > span:last-child { display: grid; line-height: 1.05; }
.ck-site-brand strong { font-size: .96rem; letter-spacing: .02em; }
.ck-site-brand small { margin-top: .22rem; color: var(--color-muted, #b4c0ca); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.ck-site-mark { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid var(--color-brand-500, rgba(143, 201, 255, .48)); border-radius: 50%; background: var(--color-brand-100, rgba(143, 201, 255, .055)); box-shadow: 0 0 24px var(--color-brand-200, rgba(143, 201, 255, .13)); }
.ck-site-mark img { width: 2rem; height: 2rem; display: block; }
.ck-site-nav { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.ck-nav-group { position: relative; }
.ck-nav-group summary { min-height: 2.55rem; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .8rem; border: 1px solid var(--color-line, rgba(255, 255, 255, .12)); border-radius: .45rem; color: var(--color-ink-soft, #d7ddd8); background: var(--color-surface-soft, rgba(255, 255, 255, .035)); cursor: pointer; font-size: .78rem; font-weight: 750; letter-spacing: .055em; list-style: none; text-transform: uppercase; }
.ck-nav-group summary::-webkit-details-marker { display: none; }
.ck-nav-group summary::after { content: "▾"; color: var(--color-brand-500, #8fc9ff); font-size: .72rem; }
.ck-nav-group[open] summary, .ck-nav-group summary:hover, .ck-nav-group summary:focus-visible { color: var(--color-brand-500, #8fc9ff); border-color: var(--color-brand-500, rgba(143, 201, 255, .5)); outline: none; }
.ck-nav-menu { position: absolute; top: calc(100% + .45rem); right: 0; display: grid; min-width: 15.5rem; max-height: min(70vh, 34rem); padding: .45rem; overflow: auto; border: 1px solid var(--color-line, rgba(42, 58, 73, .28)); border-radius: .55rem; background: var(--color-surface-soft, #121e29); box-shadow: 0 18px 45px rgba(0, 0, 0, .38); }
.ck-nav-menu a { display: block; padding: .72rem .78rem; border-radius: .35rem; color: var(--color-ink-soft, #c8d1da); text-decoration: none; font-size: .86rem; line-height: 1.25; }
.ck-nav-menu a:hover, .ck-nav-menu a:focus-visible, .ck-nav-menu a[aria-current="page"] { color: var(--color-surface, #0e1720); background: var(--color-brand-500, #8fc9ff); outline: none; }
@media (max-width: 760px) { .ck-site-header { align-items: stretch; flex-direction: column; gap: .6rem; padding: .7rem .8rem; } .ck-site-brand { align-self: flex-start; } .ck-site-nav { display: grid; grid-template-columns: 1fr; width: 100%; gap: .35rem; } .ck-nav-group summary { width: 100%; justify-content: space-between; } .ck-nav-menu { position: static; width: 100%; min-width: 0; max-height: none; margin-top: .3rem; box-shadow: none; } }