/** * NovaSpark Documentation — shell styles. * * Every colour, radius, shadow and space value below resolves to a token from * nk-tokens.css (copied verbatim from nk-core/assets/dist/css/nk-tokens.css). * Nothing is hardcoded, so the docs and the NS admin screens cannot drift. * * Theme: three states. `:root` is light, `prefers-color-scheme: dark` follows * the OS, and `[data-nk-theme="light"|"dark"]` on is an explicit choice * that beats the OS in both directions. That is the NS admin convention — see * the header comment in nk-tokens.css. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--nk-page-bg); color: var(--nk-text); font-family: var(--nk-font-admin); font-size: 16px; line-height: 1.61803399; -webkit-font-smoothing: antialiased; } a { color: inherit; } strong, b { font-weight: 600; } /* Visible only to assistive technology. Used for labels that would be noise on screen but are the only description of a control otherwise — the play button is an icon with no text. Without this rule the label renders, which is not just untidy: inside a centred flex row it pushes the icon off-centre. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Skip link ─────────────────────────────────────────────────────────── */ .nk-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--nk-accent); color: var(--nk-accent-ink); padding: 10px 16px; border-radius: 0 0 var(--nk-radius) 0; font-weight: 600; } .nk-skip:focus { left: 0; } /* ── Icons: Phosphor Fill ──────────────────────────────────────────────── */ /* Glyphs are font characters, so they size by font-size, not width/height. .nk-ic is the base; each context sets its own scale below. */ .nk-ic { font-size: 17px; line-height: 1; flex: none; } .nk-top__mark .nk-ic { font-size: 15px; } .nk-search .nk-ic { font-size: 16px; } .nk-nav__sub .nk-ic { font-size: 15px; } .nk-nav__chev { font-size: 13px; } .nk-theme__btn .nk-ic { font-size: 15px; } .nk-note__ic { font-size: 18px; } .nk-code__bar .nk-ic, .nk-code__copy .nk-ic { font-size: 14px; } .nk-toc__title .nk-ic, .nk-top-btn .nk-ic { font-size: 14px; } .nk-dlg__in .nk-ic { font-size: 18px; color: var(--nk-icon-muted); } /* ── Top bar ───────────────────────────────────────────────────────────── */ .nk-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px; background: var(--nk-header-bg); border-bottom: 1px solid var(--nk-border); } .nk-top__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nk-top__mark { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--nk-accent); color: var(--nk-accent-ink); } .nk-top__name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; color: var(--nk-title); } .nk-top__name span { color: var(--nk-text-muted); font-weight: 500; } .nk-pill { font-size: 11px; font-weight: 600; letter-spacing: .01em; padding: 3px 8px; border-radius: 999px; background: var(--nk-bg-muted); color: var(--nk-text-muted); border: 1px solid var(--nk-border); } .nk-top__spacer { flex: 1; } .nk-top__actions { display: flex; align-items: center; gap: 8px; } .nk-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--nk-radius); background: var(--nk-btn-bg); color: var(--nk-text); border: 1px solid var(--nk-btn-border); font: inherit; font-size: 13.5px; font-weight: 550; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .nk-btn:hover { background: var(--nk-btn-hover); } .nk-btn--primary { background: var(--nk-accent); border-color: transparent; color: var(--nk-accent-ink); } .nk-btn--primary:hover { background: var(--nk-accent-hover); } .nk-burger { display: none; } /* ── Layout ────────────────────────────────────────────────────────────── */ /* The mobile drawer's backdrop. It lives inside .nk-shell in the markup, so without an explicit display it is a grid ITEM at desktop widths — it silently claimed the content column and squeezed
into the 232px rail meant for the table of contents. It only exists for the drawer, so it is display:none until the drawer exists. */ .nk-scrim { display: none; } .nk-shell { display: grid; grid-template-columns: 284px minmax(0, 1fr) 232px; gap: 0; max-width: 1560px; margin: 0 auto; align-items: start; } /* ── Sidebar ───────────────────────────────────────────────────────────── */ .nk-side { position: sticky; top: 60px; height: calc(100vh - 60px); display: flex; flex-direction: column; padding: 18px 12px 0 20px; border-right: 1px solid var(--nk-border); } .nk-side__scroll { flex: 1; overflow-y: auto; padding-bottom: 16px; margin-right: -6px; padding-right: 6px; } .nk-side__scroll::-webkit-scrollbar { width: 8px; } .nk-side__scroll::-webkit-scrollbar-thumb { background: var(--nk-border-2); border-radius: 4px; } .nk-search { display: flex; align-items: center; gap: 9px; width: 100%; height: 38px; padding: 0 10px; margin-bottom: 18px; border-radius: var(--nk-radius); border: 1px solid var(--nk-border); background: var(--nk-bg-surface); color: var(--nk-text-muted); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: border-color .15s; } .nk-search:hover { border-color: var(--nk-border-2); } .nk-search__kbd { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--nk-bg-muted); border: 1px solid var(--nk-border); color: var(--nk-text-faint); } .nk-nav__label { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--nk-text-faint); text-transform: uppercase; padding: 0 10px; margin: 20px 0 7px; } .nk-nav__label:first-child { margin-top: 0; } .nk-nav__list { list-style: none; margin: 0; padding: 0; } .nk-nav__link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--nk-radius-sm); color: var(--nk-text-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.35; transition: background .12s, color .12s; } .nk-nav__link:hover { background: var(--nk-bg-muted); color: var(--nk-text); } .nk-nav__link .nk-ic { color: var(--nk-icon); transition: color .12s; } .nk-nav__link:hover .nk-ic { color: var(--nk-text-muted); } .nk-nav__link.is-active { background: var(--nk-accent-soft); color: var(--nk-accent); font-weight: 600; } .nk-nav__link.is-active .nk-ic { color: var(--nk-accent); } .nk-nav__text { flex: 1; min-width: 0; } /* Collapsible group */ .nk-nav__group > .nk-nav__link { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; } .nk-nav__chev { flex: none; color: var(--nk-text-faint); transition: transform .18s; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; transform-origin: left; transform: translate(4px, -1px); } .nk-nav__group[open] .nk-nav__chev { transform: translate(6px, -3px) rotate(90deg); } .nk-nav__sub { list-style: none; margin: 2px 0 4px; padding: 0 0 0 28px; } .nk-nav__sub .nk-nav__link { font-size: 13px; padding: 5px 10px; } .nk-nav__group summary::-webkit-details-marker { display: none; } /* Badges */ .nk-badge { font-size: 10px; font-weight: 650; letter-spacing: .02em; padding: 2px 6px; border-radius: 999px; flex: none; line-height: 1.5; border: 1px solid var(--nk-border); background: var(--nk-bg-muted); color: var(--nk-text-muted); } .nk-badge--dev { background: var(--nk-secondary-soft); color: var(--nk-secondary); } /* Theme switcher — three states, matching NS admin's auto/light/dark */ .nk-side__foot { border-top: 1px solid var(--nk-border); padding: 12px 0 14px; margin-right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nk-theme { display: inline-flex; padding: 3px; gap: 2px; background: var(--nk-bg-muted); border: 1px solid var(--nk-border); border-radius: 999px; } .nk-theme__btn { display: grid; place-items: center; width: 28px; height: 26px; border: 0; border-radius: 999px; background: none; color: var(--nk-icon-muted); cursor: pointer; transition: background .15s, color .15s; } .nk-theme__btn:hover { color: var(--nk-text); } .nk-theme__btn[aria-pressed="true"] { background: var(--nk-raised); color: var(--nk-accent); box-shadow: var(--nk-shadow-xs); } .nk-side__ver { font-size: 11.5px; color: var(--nk-text-faint); } /* ── Main ──────────────────────────────────────────────────────────────── */ /* One measure for the whole column. Every direct child of
shares it, so a note, a table and a paragraph all start and end on the same two lines. 880px is above the column's natural width at common viewports, so it only bites on very wide screens where prose would otherwise run too long. */ .nk-main { padding: 34px 56px 96px; min-width: 0; --nk-measure: 880px; } .nk-main > * { max-width: var(--nk-measure); } .nk-crumb { font-size: 13px; color: var(--nk-text-muted); margin-bottom: 8px; } .nk-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 6px; } .nk-head h1 { margin: 0; flex: 1; font-size: 38px; line-height: 1.15; font-weight: 680; letter-spacing: -.025em; color: var(--nk-title); } .nk-head__badges { display: flex; gap: 6px; padding-top: 12px; flex-wrap: wrap; justify-content: flex-end; } .nk-lede { font-size: 17px; color: var(--nk-muted); margin: 0 0 30px; max-width: 68ch; } .nk-main h2 { font-size: 24px; font-weight: 650; letter-spacing: -.018em; color: var(--nk-title); margin: 44px 0 12px; scroll-margin-top: 84px; } .nk-main h3 { font-size: 20px; font-weight: 620; color: var(--nk-title); margin: 30px 0 8px; scroll-margin-top: 84px; } .nk-main p { margin: 0 0 14px; } .nk-main ul, .nk-main ol { padding-left: 22px; } .nk-main li { margin-bottom: 7px; } /* Anchor links on headings */ .nk-anchor { opacity: 0; margin-left: 8px; color: var(--nk-text-faint); text-decoration: none; font-weight: 400; transition: opacity .15s; } h2:hover .nk-anchor, h3:hover .nk-anchor, .nk-anchor:focus { opacity: 1; } /* Numbered steps */ .nk-steps { list-style: none; padding: 0; margin: 40px 0; counter-reset: s; } .nk-steps > li { position: relative; counter-increment: s; padding: 0 0 20px 42px; margin: 0; border-left: 1px solid var(--nk-border); margin-left: 13px; } .nk-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } .nk-steps > li::before { content: counter(s); position: absolute; left: -14px; top: -2px; width: 27px; height: 27px; border-radius: 999px; display: grid; place-items: center; background: var(--nk-raised); border: 1px solid var(--nk-border); font-size: 12.5px; font-weight: 650; color: var(--nk-text-muted); } .nk-steps > li > strong:first-child { display: block; color: var(--nk-title); margin-bottom: 3px; font-size: 18px; font-weight: 600; } /* Callouts */ .nk-note { display: flex; gap: 12px; font-size: 14px; padding: 13px 15px; margin: 18px 0; border-radius: 0 var(--nk-radius) var(--nk-radius) 0; border: 1px solid var(--nk-border); background: var(--nk-bg-muted); border-left: 3px solid var(--nk-text-faint); } .nk-note p { margin: 0; } .nk-note__ic { flex: none; margin-top: 3px; } .nk-note strong { color: var(--nk-title); } .nk-note--tip { background: var(--nk-success-soft); border-color: var(--nk-border); border-left-color: var(--nk-success); } .nk-note--tip .nk-note__ic { color: var(--nk-success); } .nk-note--warn { background: var(--nk-warning-soft); border-color: var(--nk-border); border-left-color: var(--nk-warning); } .nk-note--warn .nk-note__ic { color: var(--nk-warning); } .nk-note--req { background: var(--nk-notice-soft); border-color: var(--nk-border); border-left-color: var(--nk-notice); } .nk-note--req .nk-note__ic { color: var(--nk-notice); } .nk-note--dev { background: var(--nk-secondary-soft); border-color: var(--nk-border); border-left-color: var(--nk-secondary); } .nk-note--dev .nk-note__ic { color: var(--nk-secondary); } .nk-note--note .nk-note__ic { color: var(--nk-info); } .nk-note--note { background: var(--nk-info-soft); border-left-color: var(--nk-info); } /* Code */ .nk-code { margin: 18px 0; border-radius: var(--nk-radius); border: 1px solid var(--nk-border); overflow: hidden; } .nk-code__bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 13px; background: var(--nk-bg-muted); border-bottom: 1px solid var(--nk-border); font-size: 12px; color: var(--nk-text-muted); font-weight: 550; } .nk-code__copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; color: var(--nk-text-muted); font: inherit; font-size: 12px; cursor: pointer; } .nk-code__copy:hover { background: var(--nk-btn-hover); border-color: var(--nk-border); color: var(--nk-text); } .nk-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--nk-bg-surface); } .nk-code code { font-family: var(--nk-font-mono); font-size: 12.5px; line-height: 1.7; } .tok-c { color: var(--nk-text-faint); font-style: italic; } .tok-k { color: var(--nk-src-google); } .tok-s { color: var(--nk-success); } .tok-f { color: var(--nk-accent); } :not(pre) > code { font-family: var(--nk-font-mono); font-size: .88em; color: var(--nk-fav); background: var(--nk-fav-tint); border: 1px solid var(--nk-border); padding: 1px 5px; border-radius: 5px; } /* Tables */ .nk-tw { overflow-x: auto; margin: 18px 0; background: var(--nk-bg-surface); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); } .nk-main table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .nk-main th { min-width: 200px; text-align: left; font-weight: 620; color: var(--nk-title); background: var(--nk-bg-muted); padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--nk-border-soft); } .nk-main td { min-width: 200px; padding: 10px 14px; border-bottom: 1px solid var(--nk-line); vertical-align: top; } .nk-main tr:last-child td { border-bottom: 0; } /* Settings tables share one column geometry. Auto layout sizes each table from its own contents, so the Setting column drifted wider or narrower table to table and the page read as ragged when scrolled. table-layout:fixed pins the proportions, so every settings table on every page lines up. min-width keeps it legible on narrow screens — .nk-tw scrolls rather than crushing the columns. */ .nk-main table.nk-fixed { table-layout: fixed; min-width: 560px; } .nk-main table.nk-fixed th { white-space: normal; } .nk-main table.nk-fixed :is(th, td):nth-child(1) { width: 34%; } .nk-main table.nk-fixed :is(th, td):nth-child(2) { width: 17%; } .nk-main table.nk-fixed :is(th, td):nth-child(3) { width: 49%; } /* A row that belongs to the one above it — used where a setting is nested under a parent setting in the interface being described. */ .nk-main td.is-sub { padding-left: 2.4em; position: relative; } .nk-main td.is-sub::before { content: ""; position: absolute; left: 1.2em; top: 0; bottom: 50%; border-left: 1px solid var(--nk-border-2); border-bottom: 1px solid var(--nk-border-2); width: .7em; border-bottom-left-radius: 4px; } /* Figures */ .nk-fig { margin: 22px 0; } .nk-fig img { display: block; width: 100%; height: auto; border-radius: var(--nk-radius); border: 1px solid var(--nk-border); background: var(--nk-bg-muted); } .nk-fig figcaption { font-size: 12.5px; color: var(--nk-text-muted); margin-top: 8px; } /* Video and animated clips, styled to match the still images exactly so a page mixing the two does not look assembled from two different documents. 16:9 is fixed here as well as on the element, so the box is reserved before anything loads and the page never jumps when a video arrives. */ .nk-fig video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--nk-radius); border: 1px solid var(--nk-border); background: var(--nk-bg-muted); } /* A clip is a short silent loop standing in for an animated GIF — same idea, a fraction of the file size, and it does not restart on every scroll past. No controls, because there is nothing to control. */ .nk-fig--clip video { pointer-events: none; } /* ── The play overlay ──────────────────────────────────────────────────── The button is added only when scripting is available (it ships `hidden` and docs.js reveals it), because its whole job is to load a video that preload="none" has deliberately not fetched. With no JavaScript the native controls do that unaided, and an overlay would sit uselessly on top of them. */ .nk-video { position: relative; display: block; } /* The button fills the frame so the whole poster is clickable, and carries a gentle vignette rather than a flat wash — enough to lift the disc off a busy screenshot without dulling the image behind it. */ .nk-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: var(--nk-radius); background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .16) 45%, rgba(0, 0, 0, .28) 100%); cursor: pointer; transition: background .2s ease; -webkit-appearance: none; appearance: none; } .nk-video__play:hover { background: rgba(0, 0, 0, .18); } /* The disc. A flex box centring an SVG centres the SHAPE, where the previous icon-font glyph was centred by its line box and always sat a little low. */ .nk-video__disc { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 999px; background: var(--nk-accent); color: var(--nk-accent-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 30px -8px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--nk-accent) 40%, transparent), 0 0 0 10px color-mix(in srgb, var(--nk-accent) 16%, transparent); transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; } .nk-video__disc svg { width: 30px; height: 30px; display: block; } .nk-video__play:hover .nk-video__disc { transform: scale(1.07); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 14px 36px -8px rgba(0, 0, 0, .65), 0 0 0 1px color-mix(in srgb, var(--nk-accent) 50%, transparent), 0 0 0 16px color-mix(in srgb, var(--nk-accent) 12%, transparent); } .nk-video__play:active .nk-video__disc { transform: scale(.98); } .nk-video__play:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .nk-video__disc, .nk-video__play { transition: none; } .nk-video__play:hover .nk-video__disc { transform: none; } } /* Once playing, the overlay is gone for good — the native controls take over. */ .nk-video.is-playing .nk-video__play { display: none; } /* Nothing is downloadable from a printed page. */ @media print { .nk-fig video { display: none; } } /* Page footer nav */ .nk-pagenav { display: flex; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--nk-border); } .nk-pagenav a { flex: 1; padding: 13px 16px; border-radius: var(--nk-radius); border: 1px solid var(--nk-border); background: var(--nk-card-bg); text-decoration: none; transition: border-color .15s; } .nk-pagenav a:hover { border-color: var(--nk-card-border-hover); } .nk-pagenav small { display: block; color: var(--nk-text-faint); font-size: 12px; margin-bottom: 2px; } .nk-pagenav strong { color: var(--nk-title); font-weight: 600; font-size: 14px; } .nk-pagenav .is-next { text-align: right; } /* ── Right rail ────────────────────────────────────────────────────────── */ .nk-toc { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 34px 20px 40px 0; font-size: 13px; } .nk-toc__title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 620; color: var(--nk-text-muted); margin-bottom: 12px; letter-spacing: .01em; } .nk-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--nk-border); } .nk-toc a { display: block; padding: 5px 0 5px 13px; margin-left: -1px; border-left: 2px solid transparent; color: var(--nk-text-muted); text-decoration: none; line-height: 1.45; transition: color .12s, border-color .12s; } .nk-toc a:hover { color: var(--nk-text); } .nk-toc a.is-active { color: var(--nk-accent); border-left-color: var(--nk-accent); font-weight: 550; } .nk-toc .is-sub a { padding-left: 26px; font-size: 12.5px; } .nk-top-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 6px 0; background: none; border: 0; color: var(--nk-text-muted); font: inherit; font-size: 12.5px; cursor: pointer; } .nk-top-btn:hover { color: var(--nk-accent); } /* ── Search dialog ─────────────────────────────────────────────────────── */ .nk-dlg { border: 0; padding: 0; background: none; max-width: 560px; width: calc(100% - 32px); } .nk-dlg::backdrop { background: var(--nk-scrim); } .nk-dlg__box { background: var(--nk-modal-bg); border: 1px solid var(--nk-border); border-radius: var(--nk-radius-lg); box-shadow: var(--nk-shadow); overflow: hidden; } .nk-dlg__in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--nk-border); } .nk-dlg__in input { flex: 1; border: 0; background: none; color: var(--nk-text); font: inherit; font-size: 15px; outline: none; } .nk-dlg__res { max-height: 320px; overflow-y: auto; padding: 8px; } .nk-dlg__res a { display: block; padding: 9px 11px; border-radius: var(--nk-radius-sm); text-decoration: none; color: var(--nk-text); } .nk-dlg__res a:hover, .nk-dlg__res a:focus { background: var(--nk-accent-soft); color: var(--nk-accent); outline: none; } .nk-dlg__res small { display: block; color: var(--nk-text-faint); font-size: 12px; } .nk-dlg__empty { padding: 26px; text-align: center; color: var(--nk-text-muted); font-size: 13.5px; } /* ── Focus ─────────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 2px; border-radius: 3px; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 1200px) { .nk-shell { grid-template-columns: 264px minmax(0, 1fr); } .nk-toc { display: none; } .nk-main { padding: 30px 36px 80px; } } @media (max-width: 900px) { .nk-shell { grid-template-columns: minmax(0, 1fr); } .nk-burger { display: inline-grid; place-items: center; width: 36px; height: 34px; padding: 0; } .nk-side { position: fixed; inset: 60px auto 0 0; z-index: 45; width: 290px; background: var(--nk-page-bg); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--nk-shadow); } body.nav-open .nk-side { transform: none; } .nk-scrim { display: block; position: fixed; inset: 60px 0 0; z-index: 44; background: var(--nk-scrim); border: 0; padding: 0; /* visibility, not just opacity: a transparent button is still focusable and still announced, so a closed drawer would leave an invisible control in the page. visibility:hidden removes it from the focus order and the accessibility tree, and still transitions. */ opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; } body.nav-open .nk-scrim { opacity: 1; visibility: visible; } .nk-main { padding: 24px 20px 72px; } .nk-head h1 { font-size: 30px; } .nk-head { flex-direction: column; gap: 10px; } .nk-head__badges { padding-top: 0; justify-content: flex-start; } .nk-top__name span { display: none; } } /* ── Print ─────────────────────────────────────────────────────────────── */ @media print { .nk-top, .nk-side, .nk-toc, .nk-pagenav, .nk-skip, .nk-scrim, .nk-code__copy, .nk-anchor { display: none !important; } .nk-shell { display: block; max-width: none; } .nk-main { padding: 0; } body { background: #fff; color: #000; font-size: 11pt; } .nk-main h2, .nk-main h3 { page-break-after: avoid; } .nk-code, .nk-note, .nk-tw, .nk-fig { page-break-inside: avoid; } a[href^="#"]::after { content: ""; } }