/* Guide-specific light utility styles. Reuse global variables from /site.css */
.guide-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px}
.guide-card{background: linear-gradient(180deg, color-mix(in oklab, var(--card) 94%, transparent), color-mix(in oklab, var(--surface) 86%, transparent)); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.guide-card h3{margin:.2em 0 .4em; font-size:18px}
.callout{border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:12px; padding:12px; background:color-mix(in oklab, var(--surface) 90%, transparent); margin:12px 0}
.callout.warn{border-left-color:#f59e0b}
.callout.ok{border-left-color:var(--accent-2)}
.step-list{counter-reset: step; list-style:none; padding:0; margin:.2em 0}
.step-list li{counter-increment: step; padding-left:36px; position:relative; margin:10px 0}
.step-list li::before{content: counter(step); position:absolute; left:0; top:0; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in oklab, var(--surface) 86%, transparent); border:1px solid var(--border); border-radius:999px; font-weight:700}
.toc{margin:0; padding-left:18px}
.toc li{margin:.2em 0}
.figure{border:1px dashed var(--border); border-radius:12px; padding:12px; margin:14px 0; background:color-mix(in oklab, var(--surface) 90%, transparent)}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:color-mix(in oklab, var(--surface) 86%, transparent); border:1px solid var(--border); border-radius:6px; padding:0 6px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} }