), and ringing the whole content column reads as a bug. */ :where(a, button, input, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--accent-green-light); outline-offset: 2px; border-radius: var(--radius-sm); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* No fixed height on : position:sticky only sticks within the parent's box, so height:100% would release the topbar after one viewport of scroll. */ html { height: 100%; } body { background: var(--app-base-gradient) fixed; color: var(--text-body); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100%; } /* Soft vignette, same trick as the app */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.5) 100%); } .kd-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent-green); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius) 0; font-weight: 600; } .kd-skip:focus { left: 0; } /* Shared floating-panel treatment: translucent fill + 1px gradient stroke that fades from brand green, exactly like the app's .panel surfaces. */ .kd-panel { position: relative; background: rgba(38, 38, 51, 0.72); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(0,0,0,0.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .kd-panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(158deg, rgba(28,162,112,0.55) 0%, rgba(28,162,112,0.10) 38%, rgba(255,255,255,0.05) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* ---- Topbar ------------------------------------------------------------ */ .kd-topbar { position: sticky; top: 0; z-index: 60; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 18px; background: rgba(26, 26, 40, 0.82); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--border-color); } .kd-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition); } .kd-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .kd-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .kd-menu-btn { display: none; } .kd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; } .kd-brand-mark { width: 30px; height: 30px; flex: none; } .kd-mark-frame { fill: rgba(28,162,112,0.12); stroke: var(--accent-green); stroke-width: 1.6; } .kd-mark-k { fill: none; stroke: var(--accent-green-light); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .kd-mark-dot { fill: var(--accent-pink); } .kd-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .kd-brand-text strong { font-size: 15px; font-weight: 650; color: var(--text-primary); letter-spacing: -0.01em; } .kd-brand-text span { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .kd-topbar-spacer { flex: 1; } .kd-search-trigger { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px 0 11px; min-width: 260px; border: 1px solid var(--border-color); border-radius: 999px; background: rgba(26, 26, 40, 0.7); color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); } .kd-search-trigger:hover { border-color: var(--border-active); color: var(--text-secondary); background: var(--bg-input); } .kd-search-trigger svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; } .kd-search-trigger span { flex: 1; text-align: left; } .kd-kbd-hint, kbd { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--text-secondary); background: rgba(255,255,255,0.06); border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; white-space: nowrap; } .kd-home { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 550; text-decoration: none; flex: none; transition: border-color var(--transition), color var(--transition), background var(--transition); } .kd-home:hover { color: var(--accent-green-light); border-color: rgba(28,162,112,0.5); background: rgba(28,162,112,0.09); } .kd-home svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .kd-devtoggle { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 550; cursor: pointer; flex: none; transition: all var(--transition); } .kd-devtoggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); box-shadow: none; transition: all var(--transition); } .kd-devtoggle[aria-pressed="true"] { color: var(--accent-yellow); border-color: rgba(222,186,58,0.45); background: rgba(222,186,58,0.08); } .kd-devtoggle[aria-pressed="true"] .kd-devtoggle-dot { background: var(--accent-yellow); box-shadow: 0 0 8px rgba(222,186,58,0.7); } /* ---- Shell ------------------------------------------------------------- */ .kd-shell { position: relative; z-index: 2; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; gap: 0; max-width: 1680px; margin: 0 auto; } /* ---- Sidebar ----------------------------------------------------------- */ .kd-sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--border-soft); scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent; } .kd-sidebar-inner { padding: 22px 14px 28px 20px; display: flex; flex-direction: column; min-height: 100%; } .kd-sidebar-eyebrow { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 650; padding: 0 8px 10px; } .kd-toc { list-style: none; flex: 1; } .kd-toc li { margin-bottom: 1px; } .kd-toc-group { margin: 18px 0 4px; } .kd-toc-group:first-child { margin-top: 0; } .kd-toc-group > ol { list-style: none; } .kd-toc-group-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding: 4px 10px 7px; } .kd-toc-kids { list-style: none; margin: 1px 0 6px; padding-left: 15px; } .kd-toc-kids .kd-toc-link { font-size: 12.8px; padding: 5.5px 10px; } .kd-toc-kids .kd-toc-num { font-size: 10px; min-width: 24px; } .kd-toc-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.35; transition: background var(--transition), color var(--transition); } .kd-toc-link:hover { background: var(--bg-hover); color: var(--text-primary); } /* The active row must not change text metrics. Bumping font-weight re-wraps a long title onto a second line the moment you click it, which makes the whole sidebar jump; the faux-bold text-shadow reads the same at identical width. */ .kd-toc-link[data-state="active"] { background: var(--bg-selected); color: var(--text-primary); text-shadow: 0 0 0.6px currentColor; box-shadow: inset 2px 0 0 var(--accent-green); } .kd-toc li[data-branch="active"] > .kd-toc-link { color: var(--text-primary); } .kd-toc-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); min-width: 16px; flex: none; font-weight: 500; } .kd-toc-link[data-state="active"] .kd-toc-num { color: var(--accent-green-light); } .kd-toc-sub { list-style: none; margin: 2px 0 8px; padding-left: 26px; display: none; } .kd-toc li[data-state="active"] > .kd-toc-sub { display: block; } .kd-toc-kids .kd-toc-sub { padding-left: 20px; } .kd-toc-sub a { display: block; padding: 4.5px 10px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; font-size: 12.5px; line-height: 1.4; border-left: 1.5px solid var(--border-soft); transition: color var(--transition), border-color var(--transition); } .kd-toc-sub a:hover { color: var(--text-secondary); border-left-color: var(--text-muted); } .kd-toc-sub a[data-state="active"] { color: var(--accent-green-light); border-left-color: var(--accent-green); text-shadow: 0 0 0.6px currentColor; } /* The app / manual version line, rendered on the Welcome page. */ .kd-version { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin: 18px 0 0; } /* ---- Main / prose ------------------------------------------------------ */ /* A flex column at least as tall as the viewport, with the footer pushed to the bottom. Together with a bottom padding matching .kd-sidebar-inner's, the copyright line and the sidebar's version line sit on the same baseline — on a short page and at the end of a long one alike. */ .kd-main { min-width: 0; padding: 0 44px 32px; display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h)); } .kd-article { padding-top: 40px; } .kd-boot { color: var(--text-muted); padding: 60px 0; } .kd-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: var(--accent-green-light); margin-bottom: 14px; } .kd-eyebrow::before { content: ''; width: 22px; height: 1.5px; background: currentColor; opacity: .6; } .kd-article h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; font-weight: 680; letter-spacing: -0.025em; color: var(--text-primary); margin-bottom: 14px; } .kd-lede { font-size: 18.5px; line-height: 1.6; color: var(--text-secondary); max-width: var(--measure); margin-bottom: 34px; } .kd-part { scroll-margin-top: calc(var(--topbar-h) + 20px); padding-top: 8px; } .kd-part + .kd-part { margin-top: 54px; } .kd-article h2 { font-size: 25px; line-height: 1.25; font-weight: 640; letter-spacing: -0.018em; color: var(--text-primary); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: baseline; gap: 12px; } .kd-h2-num { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent-green); flex: none; } .kd-article h3 { font-size: 17.5px; font-weight: 620; color: var(--text-primary); letter-spacing: -0.01em; margin: 32px 0 10px; } .kd-article h4 { font-size: 14px; font-weight: 650; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; margin: 26px 0 8px; } .kd-article p { max-width: var(--measure); margin-bottom: 16px; } .kd-article ul, .kd-article ol { max-width: var(--measure); margin: 0 0 18px 0; padding-left: 22px; } .kd-article li { margin-bottom: 7px; } .kd-article li::marker { color: var(--text-muted); } .kd-article ul li::marker { color: var(--accent-green); } .kd-article strong { color: var(--text-primary); font-weight: 620; } .kd-article em { color: var(--text-secondary); } .kd-article a { color: var(--accent-green-light); text-decoration: none; border-bottom: 1px solid rgba(76,201,154,0.32); transition: border-color var(--transition); } .kd-article a:hover { border-bottom-color: var(--accent-green-light); } .kd-article code { font-family: var(--font-mono); font-size: 0.855em; background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 1.5px 5px; color: var(--accent-cyan); white-space: nowrap; } .kd-article pre { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; margin-bottom: 20px; color: var(--text-body); white-space: pre; scrollbar-width: thin; } .kd-article pre code { background: none; border: none; padding: 0; color: inherit; white-space: pre; font-size: inherit; } .kd-article pre .c { color: var(--text-muted); } .kd-article pre .d { color: var(--accent-yellow); } .kd-article hr { border: none; border-top: 1px solid var(--border-soft); margin: 34px 0; max-width: var(--measure); } .kd-path { font-family: var(--font-mono); font-size: 0.855em; color: var(--accent-yellow); background: rgba(222,186,58,0.08); border: 1px solid rgba(222,186,58,0.2); border-radius: var(--radius-sm); padding: 1.5px 5px; white-space: nowrap; } .kd-lead-in { color: var(--text-primary); font-weight: 620; } /* ---- Callouts ---------------------------------------------------------- */ .kd-callout { position: relative; max-width: var(--measure); margin: 22px 0; padding: 15px 18px 15px 17px; border-radius: var(--radius); border: 1px solid var(--border-color); border-left: 3px solid var(--text-muted); background: rgba(30, 30, 45, 0.6); font-size: 14.5px; line-height: 1.6; } .kd-callout p { max-width: none; margin-bottom: 8px; } .kd-callout p:last-child { margin-bottom: 0; } .kd-callout ul, .kd-callout ol { max-width: none; margin-bottom: 0; } .kd-callout-title { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 680; margin-bottom: 6px; } .kd-callout--tip { border-left-color: var(--accent-green); background: rgba(28,162,112,0.07); } .kd-callout--tip .kd-callout-title { color: var(--accent-green-light); } .kd-callout--note { border-left-color: var(--accent-blue); background: rgba(59,130,246,0.07); } .kd-callout--note .kd-callout-title { color: #7ea9f8; } .kd-callout--warn { border-left-color: var(--accent-yellow); background: rgba(222,186,58,0.07); } .kd-callout--warn .kd-callout-title { color: var(--accent-yellow); } .kd-callout--stop { border-left-color: var(--accent-red); background: rgba(231,76,60,0.07); } .kd-callout--stop .kd-callout-title { color: #f08070; } .kd-callout--soon { border-left-color: var(--accent-archive); background: rgba(181,146,118,0.07); } .kd-callout--soon .kd-callout-title { color: var(--accent-archive); } /* ---- Steps ------------------------------------------------------------- */ .kd-steps { list-style: none; counter-reset: kdstep; max-width: var(--measure); margin: 22px 0; padding: 0; } .kd-steps > li { counter-increment: kdstep; position: relative; padding: 0 0 20px 42px; margin: 0; } .kd-steps > li::before { content: counter(kdstep); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(28,162,112,0.14); border: 1px solid rgba(28,162,112,0.45); color: var(--accent-green-light); font-size: 12px; font-weight: 680; font-family: var(--font-mono); } .kd-steps > li::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: linear-gradient(var(--border-color), transparent); } .kd-steps > li:last-child { padding-bottom: 0; } .kd-steps > li:last-child::after { display: none; } .kd-step-title { display: block; color: var(--text-primary); font-weight: 620; margin-bottom: 3px; } /* ---- Tables ------------------------------------------------------------ */ .kd-table-wrap { max-width: 100%; overflow-x: auto; margin: 22px 0; scrollbar-width: thin; } .kd-table { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 14px; background: rgba(30, 30, 45, 0.5); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; } .kd-table th { text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 680; color: var(--text-muted); padding: 11px 14px; background: rgba(26,26,40,0.7); border-bottom: 1px solid var(--border-color); white-space: nowrap; } .kd-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: top; line-height: 1.55; } .kd-table tbody tr:last-child td { border-bottom: none; } .kd-table tbody tr:hover td { background: rgba(58,58,79,0.28); } .kd-table td:first-child { color: var(--text-primary); font-weight: 550; } /* ---- Chips ------------------------------------------------------------- */ .kd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 680; letter-spacing: 0.06em; text-transform: uppercase; padding: 2.5px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; vertical-align: middle; } .kd-chip--soon { color: var(--accent-archive); background: rgba(181,146,118,0.1); } .kd-chip--live { color: var(--accent-green-light); background: rgba(28,162,112,0.1); } .kd-chip--partial { color: var(--accent-yellow); background: rgba(222,186,58,0.1); } .kd-chip--mac { color: var(--accent-cyan); background: rgba(129,220,211,0.1); } .kd-chip--dep { color: var(--accent-purple); background: rgba(174,138,210,0.1); text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-weight: 550; } /* ---- Card grids -------------------------------------------------------- */ .kd-grid { display: grid; gap: 14px; margin: 24px 0; } .kd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .kd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); } /* Fixed two-up. An auto-fit track list gives four cards an unbalanced 3 + 1. */ .kd-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kd-card { position: relative; padding: 17px 18px; border-radius: var(--radius); border: 1px solid var(--border-color); background: rgba(30, 30, 45, 0.55); transition: border-color var(--transition), transform var(--transition); } .kd-card:hover { border-color: rgba(28,162,112,0.4); } .kd-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 640; color: var(--text-primary); margin-bottom: 7px; } .kd-card-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-green); display: block; margin-bottom: 5px; } .kd-card p { font-size: 14px; line-height: 1.58; color: var(--text-secondary); max-width: none; margin-bottom: 0; } .kd-card p + p { margin-top: 9px; } .kd-card--pink { border-left: 3px solid var(--accent-pink); } .kd-card--green { border-left: 3px solid var(--accent-green); } .kd-card--blue { border-left: 3px solid var(--accent-blue); } .kd-card--orange { border-left: 3px solid var(--accent-orange); } .kd-card--purple { border-left: 3px solid var(--accent-purple); } .kd-card--cyan { border-left: 3px solid var(--accent-cyan); } .kd-card--yellow { border-left: 3px solid var(--accent-yellow); } /* ---- Figures + annotation layer ---------------------------------------- */ .kd-fig { margin: 30px 0; } /* The shell deliberately does NOT clip. Clipping happens on the stage, which is what keeps the hotspot spotlight inside the picture while letting the tooltip layer above it overhang the edges. */ .kd-fig-shell { position: relative; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-input); box-shadow: 0 20px 46px rgba(0,0,0,0.4); } .kd-fig-stage { position: relative; display: block; line-height: 0; border-radius: inherit; overflow: hidden; } .kd-fig-stage img { display: block; width: 100%; height: auto; } /* Placeholder frame when a capture has not landed yet */ .kd-fig-ph { position: relative; width: 100%; aspect-ratio: var(--kd-ar, 16 / 10); background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.018) 0 12px, transparent 12px 24px), linear-gradient(145deg, #2b2b3b, #1e1e2d); display: grid; place-items: center; text-align: center; padding: 24px; } .kd-fig-ph-inner { max-width: 420px; } .kd-fig-ph-badge { display: inline-block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 680; color: var(--accent-archive); border: 1px dashed rgba(181,146,118,0.5); border-radius: 999px; padding: 3px 11px; margin-bottom: 12px; } .kd-fig-ph-title { font-size: 15px; font-weight: 620; color: var(--text-secondary); line-height: 1.4; margin-bottom: 6px; } .kd-fig-ph-path { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); word-break: break-all; } .kd-fig-layer { position: absolute; inset: 0; } .kd-spot { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1.5px rgba(76,201,154,0); transition: box-shadow 180ms ease, background 180ms ease; } .kd-spot--round { border-radius: 999px; } .kd-fig-shell:hover .kd-spot { box-shadow: inset 0 0 0 1.5px rgba(76,201,154,0.32); } .kd-spot[data-on] { box-shadow: inset 0 0 0 2px var(--accent-green-light), 0 0 0 3px rgba(28,162,112,0.28), 0 0 0 100vmax rgba(10, 10, 18, 0.66); background: rgba(76,201,154,0.08); z-index: 3; } .kd-spot-pin { position: absolute; top: -11px; left: -11px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-green); color: #06170f; font-size: 11.5px; font-weight: 780; font-family: var(--font-mono); box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 0 2px rgba(10,10,18,0.5); transition: transform 180ms ease, background 180ms ease; } .kd-tip-anchor[data-on] .kd-spot-pin { transform: scale(1.18); background: var(--accent-green-light); } /* Tooltip layer — a sibling of the clipped stage. Each tip is anchored to an invisible copy of its hotspot's box, so placement maths stays identical. */ .kd-fig-tips { position: absolute; inset: 0; pointer-events: none; z-index: 6; } .kd-tip-anchor { position: absolute; } .kd-spot-tip { position: absolute; z-index: 5; width: max-content; max-width: min(300px, 62vw); padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(16, 16, 26, 0.96); border: 1px solid rgba(76,201,154,0.4); box-shadow: 0 12px 30px rgba(0,0,0,0.6); font-size: 12.5px; line-height: 1.5; color: var(--text-body); text-align: left; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; } .kd-tip-anchor[data-on] .kd-spot-tip { opacity: 1; transform: translateY(0); } .kd-spot-tip b { display: block; color: var(--accent-green-light); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 3px; font-weight: 700; } .kd-spot-tip[data-place="below"] { top: calc(100% + 10px); } .kd-spot-tip[data-place="above"] { bottom: calc(100% + 10px); } .kd-spot-tip[data-align="left"] { left: 0; } .kd-spot-tip[data-align="right"] { right: 0; } .kd-spot-tip[data-align="center"] { left: 50%; transform: translateX(-50%) translateY(4px); } .kd-tip-anchor[data-on] .kd-spot-tip[data-align="center"] { transform: translateX(-50%) translateY(0); } .kd-fig-cap { display: flex; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 11px; max-width: var(--measure); } .kd-fig-cap::before { content: 'Fig'; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-green); padding-top: 2px; flex: none; font-weight: 650; } .kd-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .kd-legend li { margin: 0; } .kd-legend button { display: flex; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13.5px; line-height: 1.5; cursor: pointer; transition: background var(--transition), border-color var(--transition); } .kd-legend button:hover { background: rgba(58,58,79,0.4); } .kd-legend button[data-on] { background: rgba(28,162,112,0.1); border-color: rgba(28,162,112,0.4); } .kd-legend-num { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(28,162,112,0.16); border: 1px solid rgba(28,162,112,0.45); color: var(--accent-green-light); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; margin-top: 2px; } .kd-legend button[data-on] .kd-legend-num { background: var(--accent-green); color: #06170f; } .kd-legend-body b { color: var(--text-primary); font-weight: 620; display: block; } .kd-legend-body span { color: var(--text-muted); font-size: 13px; } /* Inline prose reference that drives the annotation layer */ .kd-ref { color: var(--accent-green-light); border-bottom: 1px dashed rgba(76,201,154,0.5); cursor: help; font-weight: 550; transition: background var(--transition); border-radius: 2px; } .kd-ref:hover, .kd-ref[data-on] { background: rgba(28,162,112,0.16); border-bottom-style: solid; } .kd-ref::after { content: attr(data-n); font-family: var(--font-mono); font-size: 0.68em; vertical-align: super; margin-left: 2px; color: var(--accent-green); font-weight: 700; } /* ---- Dev notes --------------------------------------------------------- */ body[data-dev="off"] .kd-dev { display: none; } .kd-dev { max-width: var(--measure); margin: 26px 0 0; border: 1px dashed rgba(222,186,58,0.38); border-radius: var(--radius); background: rgba(222,186,58,0.045); overflow: hidden; } .kd-dev > summary { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 650; color: var(--accent-yellow); letter-spacing: 0.05em; text-transform: uppercase; user-select: none; } .kd-dev > summary::-webkit-details-marker { display: none; } .kd-dev > summary::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; flex: none; transition: transform var(--transition); } .kd-dev[open] > summary::before { transform: rotate(90deg); } .kd-dev-summary-label { flex: none; } .kd-dev-summary-stats { margin-left: auto; display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; } .kd-dev-summary-stats span { color: var(--text-muted); } .kd-dev-summary-stats b { color: var(--text-secondary); font-weight: 650; } .kd-dev-body { padding: 4px 14px 15px; } .kd-dev-note { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); max-width: none; margin: 12px 0 0; } .kd-dev-note:first-child { margin-top: 4px; } .kd-meter { margin-bottom: 9px; } .kd-meter-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; margin-bottom: 4px; } .kd-meter-label { color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 650; } .kd-meter-val { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); font-size: 12.5px; } .kd-meter-track { display: block; height: 6px; border-radius: 999px; background: rgba(0,0,0,0.42); overflow: hidden; } .kd-meter-fill { display: block; height: 100%; border-radius: 999px; transition: width 600ms cubic-bezier(.2,.8,.3,1); } .kd-meter--mvp .kd-meter-fill { background: linear-gradient(90deg, var(--accent-green), var(--accent-green-light)); } .kd-meter--prod .kd-meter-fill { background: linear-gradient(90deg, #b8621f, var(--accent-orange)); } /* ---- Readiness panel (front page) -------------------------------------- */ .kd-readiness { margin: 34px 0 10px; padding: 26px 26px 22px; } .kd-readiness-head { margin-bottom: 22px; } .kd-readiness-head h3 { margin: 0; font-size: 19px; } .kd-readiness-head p { margin: 0; font-size: 13.5px; color: var(--text-muted); max-width: 46ch; } .kd-dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; margin-bottom: 26px; } .kd-dial { display: flex; align-items: center; gap: 16px; } .kd-dial-ring { position: relative; width: 84px; height: 84px; flex: none; } .kd-dial-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .kd-dial-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; } .kd-dial-bg { stroke: rgba(0,0,0,0.4); } /* Grid-centre the whole value, then let the % ride the number's own baseline as an ordinary inline child. Baseline alignment on the outer flex box put the text at the top of the ring instead of its middle. */ .kd-dial-val { position: absolute; inset: 0; display: grid; place-items: center; } .kd-dial-num { font-family: var(--font-mono); font-size: 20px; font-weight: 720; color: var(--text-primary); line-height: 1; } .kd-dial-num small { font-size: 11.5px; font-weight: 650; color: var(--text-secondary); margin-left: 1px; } .kd-dial-meta b { display: block; font-size: 14.5px; color: var(--text-primary); font-weight: 640; margin-bottom: 3px; } .kd-dial-meta span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; display: block; } .kd-dial--mvp .kd-dial-fg { stroke: var(--accent-green); } .kd-dial--prod .kd-dial-fg { stroke: var(--accent-orange); } .kd-scoreboard { display: grid; gap: 3px; } .kd-score-head, .kd-score-row { display: grid; grid-template-columns: minmax(140px, 1.5fr) minmax(90px, 1fr) minmax(90px, 1fr); gap: 16px; align-items: center; padding: 8px 12px; border-radius: var(--radius-sm); } .kd-score-head { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 680; padding-bottom: 4px; } .kd-score-head span:not(:first-child) { text-align: left; } .kd-score-row { transition: background var(--transition); } .kd-score-row:hover { background: rgba(58,58,79,0.35); } .kd-scoreboard .kd-score-name { font-size: 13.5px; color: var(--text-primary); font-weight: 560; text-decoration: none; border: 0; } .kd-scoreboard .kd-score-name:hover { color: var(--accent-green-light); } .kd-score-bar { display: flex; align-items: center; gap: 9px; } .kd-score-track { display: block; flex: 1; height: 5px; border-radius: 999px; background: rgba(0,0,0,0.42); overflow: hidden; min-width: 40px; } .kd-score-fill { display: block; height: 100%; border-radius: 999px; transition: width 600ms cubic-bezier(.2,.8,.3,1); } .kd-score-bar--mvp .kd-score-fill { background: var(--accent-green); } .kd-score-bar--prod .kd-score-fill { background: var(--accent-orange); } .kd-score-num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 650; color: var(--text-secondary); min-width: 30px; text-align: right; } /* ---- Vocabulary diagram ------------------------------------------------ */ .kd-hier { margin: 26px 0; display: grid; gap: 10px; max-width: 640px; } .kd-hier-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; padding: 13px 16px; border-radius: var(--radius); border: 1px solid var(--border-color); background: rgba(30,30,45,0.5); position: relative; } .kd-hier-row[data-depth="1"] { margin-left: 22px; } .kd-hier-row[data-depth="2"] { margin-left: 44px; } .kd-hier-row[data-depth="3"] { margin-left: 66px; } .kd-hier-row[data-depth]:not([data-depth="0"])::before { content: ''; position: absolute; left: -13px; top: 50%; width: 11px; height: 1px; background: var(--border-color); } .kd-hier-term { font-weight: 660; color: var(--text-primary); font-size: 14.5px; } .kd-hier-term small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); font-weight: 500; margin-top: 2px; } .kd-hier-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; } /* ---- Pager ------------------------------------------------------------- */ .kd-pager { display: flex; gap: 12px; margin-top: 56px; max-width: var(--measure); } /* Each link takes half the column. A lone Next (first page) or Previous (last page) keeps that width rather than stretching across the whole measure. */ .kd-pager a { flex: 0 1 calc(50% - 6px); display: block; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border-color); background: rgba(30,30,45,0.5); text-decoration: none; transition: border-color var(--transition), background var(--transition); } .kd-pager a:hover { border-color: var(--accent-green); background: rgba(28,162,112,0.07); } .kd-pager small { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 650; margin-bottom: 4px; } .kd-pager b { display: block; font-size: 14.5px; color: var(--text-primary); font-weight: 600; } .kd-pager a[data-dir="next"] { text-align: right; } .kd-pager a[data-dir="next"]:only-child { margin-left: auto; } .kd-foot { margin-top: auto; padding-top: 64px; } .kd-foot p { font-size: 11px; color: var(--text-muted); text-align: center; letter-spacing: 0.03em; } /* ---- Search overlay ---------------------------------------------------- */ .kd-search { position: fixed; inset: 0; z-index: 110; background: rgba(8, 8, 14, 0.72); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 20px 20px; } .kd-search[hidden] { display: none; } .kd-search-panel { width: min(660px, 100%); max-height: 74vh; display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: rgba(30, 30, 45, 0.97); box-shadow: 0 40px 100px rgba(0,0,0,0.65); overflow: hidden; } .kd-search-field { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border-color); } .kd-search-field svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; flex: none; } .kd-search-field input { flex: 1; background: none; border: none; color: var(--text-primary); font: inherit; font-size: 16px; padding: 4px 0; } .kd-search-field input::placeholder { color: var(--text-muted); } .kd-search-field input::-webkit-search-cancel-button { display: none; } .kd-search-results { overflow-y: auto; padding: 8px; flex: 1; scrollbar-width: thin; } .kd-result { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background var(--transition); } .kd-result:hover, .kd-result[data-on] { background: var(--bg-selected); border-color: rgba(28,162,112,0.4); } .kd-result-crumb { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-green); font-weight: 650; margin-bottom: 3px; } .kd-result-title { font-size: 14.5px; color: var(--text-primary); font-weight: 600; margin-bottom: 2px; } .kd-result-snip { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kd-result mark { background: rgba(222,186,58,0.28); color: var(--accent-yellow); border-radius: 2px; padding: 0 1px; } .kd-search-empty { padding: 30px 16px; text-align: center; color: var(--text-muted); font-size: 14px; } .kd-search-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border-color); font-size: 11.5px; color: var(--text-muted); } .kd-search-foot span { display: flex; align-items: center; gap: 5px; } /* ---- Scrim / drawer ---------------------------------------------------- */ .kd-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(8,8,14,0.6); backdrop-filter: blur(3px); } .kd-scrim[hidden] { display: none; } /* ---- Scrollbars -------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(96,96,109,0.4); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(96,96,109,0.65); background-clip: content-box; } /* ---- Content column ---------------------------------------------------- */ /* Declared after the component styles on purpose: several of them set a `margin: N 0` shorthand that would otherwise pin the block to the left. The class is doubled to raise specificity past element-qualified rules like `.kd-article ol` — the duplication is load-bearing, not a typo. */ .kd-article.kd-article > *, .kd-part.kd-part > * { max-width: var(--measure); margin-left: auto; margin-right: auto; } .kd-article > .kd-part { max-width: none; } .kd-fig.kd-fig, .kd-grid.kd-grid, .kd-readiness.kd-readiness { max-width: min(var(--wide), 100%); } /* width:100% is load-bearing: these are flex items of .kd-main, and a flex item with auto cross-axis margins opts out of `align-items: stretch`, so without an explicit width they shrink-wrap their content instead of filling the column. */ .kd-pager, .kd-foot { width: 100%; max-width: var(--measure); margin-left: auto; margin-right: auto; } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 1439px) { .kd-main { padding: 0 36px 32px; } } @media (max-width: 1023px) { :root { --sidebar-w: 292px; } .kd-menu-btn { display: inline-grid; } .kd-shell { grid-template-columns: minmax(0, 1fr); } .kd-main { padding: 0 24px 48px; } .kd-sidebar { position: fixed; z-index: 58; top: var(--topbar-h); left: 0; width: var(--sidebar-w); max-width: 86vw; background: rgba(26, 26, 40, 0.98); backdrop-filter: blur(18px); border-right: 1px solid var(--border-color); transform: translateX(-102%); transition: transform 220ms cubic-bezier(.3,.8,.3,1); box-shadow: 24px 0 60px rgba(0,0,0,0.5); } body[data-nav="open"] .kd-sidebar { transform: translateX(0); } .kd-search-trigger { min-width: 0; width: 34px; padding: 0; justify-content: center; border-radius: var(--radius-sm); } .kd-search-trigger span, .kd-kbd-hint { display: none; } .kd-devtoggle-label { display: none; } .kd-home span { display: none; } .kd-home { padding: 0 11px; } .kd-devtoggle { padding: 0 11px; } } @media (max-width: 700px) { body { font-size: 15.5px; } :root { --measure: 100%; --wide: 100%; --topbar-h: 54px; } .kd-topbar { padding: 0 12px; gap: 8px; } .kd-brand-text span { display: none; } .kd-main { padding: 0 16px 40px; } .kd-grid--pair { grid-template-columns: 1fr; } .kd-article { padding-top: 26px; } .kd-article h2 { font-size: 21px; } .kd-lede { font-size: 16.5px; } .kd-legend { grid-template-columns: 1fr; } .kd-pager { flex-direction: column; } .kd-readiness { padding: 20px 16px 18px; } .kd-score-head, .kd-score-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 8px; } .kd-score-head { display: none; } .kd-score-row { border-bottom: 1px solid var(--border-soft); border-radius: 0; } .kd-score-bar::before { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 650; min-width: 34px; } .kd-score-bar--mvp::before { content: 'MVP'; } .kd-score-bar--prod::before { content: '1.0'; } .kd-hier-row { grid-template-columns: 1fr; gap: 5px; } .kd-hier-row[data-depth="1"] { margin-left: 12px; } .kd-hier-row[data-depth="2"] { margin-left: 24px; } .kd-hier-row[data-depth="3"] { margin-left: 36px; } .kd-hier-row[data-depth]:not([data-depth="0"])::before { display: none; } .kd-search { padding: 0; } .kd-search-panel { max-height: 100vh; height: 100%; border-radius: 0; border: none; } .kd-spot-tip { max-width: 70vw; font-size: 12px; } } /* ---- Print ------------------------------------------------------------- */ @media print { body { background: #fff; color: #111; } body::after { display: none; } .kd-topbar, .kd-sidebar, .kd-pager, .kd-search, .kd-scrim { display: none !important; } .kd-shell { display: block; max-width: none; } .kd-main { padding: 0; } .kd-article h1, .kd-article h2, .kd-article h3, .kd-article strong { color: #000; } .kd-article p, .kd-article li { color: #222; } .kd-panel, .kd-card, .kd-callout, .kd-table { background: #fff; border-color: #ccc; box-shadow: none; } .kd-panel::before { display: none; } .kd-part { break-inside: avoid-page; } .kd-dev { break-inside: avoid; } }