:root { --guide-blue: #1d4ed8; --guide-blue-dark: #172554; }
html { scroll-behavior: smooth; }
body { line-height: 1.55; }
.guide-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--guide-blue-dark), #1d4ed8 62%, #2563eb); box-shadow: 0 24px 60px rgba(30,64,175,.2); }
.guide-hero::after { content: ""; position: absolute; width: 220px; height: 220px; right: -60px; top: -90px; border-radius: 999px; background: rgba(255,255,255,.1); }
.guide-hero h1 { position: relative; z-index: 1; max-width: 820px; font-size: clamp(2rem,5vw,3rem); line-height: 1.08; }
.guide-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin-bottom: 2rem; }
.guide-overview > div { border: 1px solid #dbeafe; border-radius: 1rem; background: #fff; padding: 1rem; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.guide-overview strong { display: block; color: #0f172a; font-size: .92rem; }
.guide-overview span { display: block; margin-top: .25rem; color: #64748b; font-size: .78rem; }
.guide-resource { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; border: 1px solid #bfdbfe; border-radius: 1.25rem; background: linear-gradient(135deg,#eff6ff,#fff); padding: 1.25rem; }
.guide-resource__icon { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; height: 3rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: 1rem; font-weight: 900; }
.guide-resource__content { flex: 1; }
.guide-resource__content strong { display: block; color: #0f172a; }
.guide-resource__content span { display: block; margin-top: .2rem; color: #64748b; font-size: .8rem; }
.guide-resource__link { white-space: nowrap; border-radius: .8rem; background: #1d4ed8; padding: .7rem 1rem; color: #fff; font-size: .78rem; font-weight: 800; }
.guide-resource__link:hover { background: #1e40af; }
.guide-resource--docs .guide-resource__icon { background: #0f172a; }
.todo-card label { cursor: pointer; }
.todo-card span { font-weight: 600; }
@media (max-width: 680px) { .guide-overview { grid-template-columns: 1fr; } .guide-resource { align-items: flex-start; flex-wrap: wrap; } .guide-resource__content { min-width: calc(100% - 4rem); } .guide-resource__link { width: 100%; text-align: center; } }
body.theme-dark .guide-overview > div, body.theme-dark .guide-resource { background: #111827; border-color: #334155; }
body.theme-dark .guide-overview strong, body.theme-dark .guide-resource__content strong { color: #f8fafc; }
body.theme-dark .guide-overview span, body.theme-dark .guide-resource__content span { color: #cbd5e1; }