.ck-main { max-width: 820px; padding-top: 12px; }
.ck-src { margin: 32px 0 0; padding: 16px 20px; border-inline-start: 3px solid var(--hm-line); background: var(--hm-surface); border-radius: var(--hm-r-s); font-size: 14.5px; line-height: 1.6; color: var(--hm-ink-2); }
.ck-src b { display: block; margin-bottom: 4px; font-weight: 500; color: var(--hm-ink); }
.ck-grp { margin-top: 48px; }
.ck-grp h2 { margin: 0 0 16px; font: 500 clamp(22px, 2vw, 26px)/1.25 var(--f-hero); color: var(--hm-ink); }
.ck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ck-list a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border: 1px solid var(--hm-line); border-radius: var(--hm-r); background: #fff; color: var(--hm-ink-2); text-decoration: none; transition: border-color 160ms, box-shadow 200ms; }
.ck-list a:hover { border-color: transparent; box-shadow: var(--hm-e2); }
.ck-list a:hover .ck-t { color: var(--hm-blue); }
.ck-code { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--hm-ink-3); }
.ck-t { font: 500 18px/1.35 var(--f-hero); color: var(--hm-ink); }
.ck-n { margin-top: auto; padding-top: 10px; font-size: 13.5px; color: var(--hm-ink-3); }
.ck-rel { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ck-rel a { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px; border: 1px solid var(--hm-line); border-radius: var(--hm-r); color: var(--hm-ink); text-decoration: none; font-weight: 500; transition: border-color 160ms; }
.ck-rel a:hover { border-color: var(--hm-blue); color: var(--hm-blue); }
@media print {
  .topbar, .site-foot, footer, .pr-crumbs, .pr-hp-b, .pr-pn, .skip { display: none !important; }
  .pr-steps li { break-inside: avoid; }
}