:root {
    --kwx-accent: #276f63;
    --kwx-accent-soft: rgba(39, 111, 99, .11);
    --kwx-line: rgba(41, 52, 49, .13);
    --kwx-panel: rgba(255, 255, 255, .72);
    --kwx-muted: #6d7976;
}

body.night {
    --kwx-accent: #7fc7b8;
    --kwx-accent-soft: rgba(127, 199, 184, .12);
    --kwx-line: rgba(221, 235, 231, .12);
    --kwx-panel: rgba(27, 31, 31, .8);
    --kwx-muted: #9ca8a5;
}

.kwx-hub-main { min-height: 62vh; }
.kwx-hub-main > .wrap { padding-top: 4.5rem; padding-bottom: 4rem; }
.kwx-hub-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.8rem; }
.kwx-hub-hero h1 { margin: .25rem 0 .6rem; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.kwx-hub-hero p { max-width: 42rem; margin: 0; color: var(--kwx-muted); font-size: 1.05rem; }
.kwx-eyebrow { color: var(--kwx-accent); font-size: .76rem; font-weight: 700; letter-spacing: .18em; }
.kwx-action { flex: 0 0 auto; display: inline-flex; align-items: center; padding: .72rem 1.1rem; border-radius: 999px; color: #fff; background: var(--kwx-accent); }
.kwx-action:hover { color: #fff; transform: translateY(-1px); }

.kwx-memo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kwx-memo-card { position: relative; padding: 1.4rem; border: 1px solid var(--kwx-line); border-radius: 1.1rem; background: var(--kwx-panel); box-shadow: 0 12px 40px rgba(22, 43, 38, .05); }
.kwx-memo-card.is-pinned:before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 1.1rem 0 0 1.1rem; background: var(--kwx-accent); }
.kwx-memo-card h2 { margin: .8rem 0 .45rem; font-size: 1.25rem; }
.kwx-memo-card h2:before { content: none; }
.kwx-memo-card h2 a { color: inherit; }
.kwx-memo-card > p { min-height: 3.4em; margin: 0 0 1rem; color: var(--kwx-muted); }
.kwx-card-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; color: var(--kwx-muted); font-size: .78rem; }
.kwx-visibility { display: inline-flex; padding: .24rem .56rem; border-radius: 999px; background: var(--kwx-accent-soft); color: var(--kwx-accent); white-space: nowrap; }
.kwx-private { color: #7c6540; background: rgba(174, 136, 71, .13); }
.kwx-restricted { color: #665c9b; background: rgba(101, 86, 162, .13); }
.kwx-read-more { font-size: .87rem; font-weight: 600; color: var(--kwx-accent); }
.kwx-empty { grid-column: 1 / -1; padding: 4rem 1rem; border: 1px dashed var(--kwx-line); border-radius: 1rem; text-align: center; color: var(--kwx-muted); }

.kwx-docs-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.kwx-docs-nav, .kwx-reader-sidebar { position: sticky; top: 5.5rem; padding: 1.1rem; border: 1px solid var(--kwx-line); border-radius: 1rem; background: var(--kwx-panel); }
.kwx-docs-nav nav, #kwx-toc { display: flex; flex-direction: column; gap: .25rem; margin-top: .7rem; }
.kwx-docs-nav a, #kwx-toc a { padding: .46rem .62rem; border-radius: .45rem; color: var(--kwx-muted); font-size: .9rem; }
.kwx-docs-nav a:hover, #kwx-toc a:hover { color: var(--kwx-accent); background: var(--kwx-accent-soft); }
.kwx-doc-section { scroll-margin-top: 5.5rem; margin: 0 0 2.4rem; }
.kwx-doc-section > h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.kwx-doc-list { border-top: 1px solid var(--kwx-line); }
.kwx-doc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1.1rem .25rem; border-bottom: 1px solid var(--kwx-line); color: inherit; }
.kwx-doc-row:hover { padding-left: .75rem; padding-right: .75rem; background: var(--kwx-accent-soft); }
.kwx-doc-row h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.kwx-doc-row p { margin: 0; color: var(--kwx-muted); }
.kwx-doc-meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .35rem; color: var(--kwx-muted); font-size: .78rem; }

.kwx-reader { min-width: 0; max-width: 52rem; padding: 2rem clamp(1.2rem, 4vw, 3.6rem) 3.5rem; margin: 0 auto; border: 1px solid var(--kwx-line); border-radius: 1.2rem; background: var(--kwx-panel); box-shadow: 0 20px 60px rgba(22, 43, 38, .06); }
.kwx-reader header { margin-bottom: 2.4rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--kwx-line); }
.kwx-reader h1 { margin: 1rem 0 .35rem; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.12; letter-spacing: -.04em; }
.kwx-source-note { margin: .5rem 0 0; color: var(--kwx-muted); font-size: .82rem; }
.kwx-breadcrumb { display: flex; gap: .55rem; margin-bottom: 2rem; color: var(--kwx-muted); font-size: .9rem; }
.kwx-breadcrumb a, .kwx-back-link { color: var(--kwx-accent); }
.kwx-doc-reader-layout { display: grid; grid-template-columns: 14rem minmax(0, 52rem); gap: 2rem; justify-content: center; align-items: start; }
.kwx-reader-sidebar { min-width: 0; }
.kwx-reader-sidebar > .kwx-back-link { display: block; padding-bottom: .8rem; border-bottom: 1px solid var(--kwx-line); }
.kwx-document-body { line-height: 1.85; }
.kwx-document-body h1:before,
.kwx-document-body h2:before,
.kwx-document-body h3:before,
.kwx-document-body h4:before,
.kwx-document-body h5:before,
.kwx-document-body h6:before { content: none; }
.kwx-document-body h2, .kwx-document-body h3 { scroll-margin-top: 5.5rem; }
.kwx-document-body img { max-width: 100%; border-radius: .65rem; }
.kwx-document-body table { display: block; max-width: 100%; overflow-x: auto; }
.kwx-document-body code { overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .kwx-hub-main > .wrap { padding-top: 2.6rem; }
    .kwx-hub-hero { align-items: flex-start; flex-direction: column; margin-bottom: 1.8rem; }
    .kwx-memo-grid { grid-template-columns: 1fr; }
    .kwx-docs-layout, .kwx-doc-reader-layout { grid-template-columns: 1fr; gap: 1rem; }
    .kwx-docs-nav, .kwx-reader-sidebar { position: static; }
    .kwx-docs-nav nav { flex-direction: row; flex-wrap: wrap; }
    #kwx-toc { max-height: 12rem; overflow-y: auto; }
    .kwx-doc-row { grid-template-columns: 1fr; }
    .kwx-doc-meta { flex-direction: row; justify-content: space-between; align-items: center; }
    .kwx-reader { padding: 1.35rem 1.1rem 2.5rem; border-radius: .8rem; }
}