.howto-root{font-family:Space Grotesk,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.howto-root .font-mono{font-family:IBM Plex Mono,Consolas,Monaco,Lucida Console,monospace}.howto-kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.25em;color:#64748b}.dark .howto-kicker{color:#94a3b8}.howto-hero-meta{display:flex;flex-direction:column;gap:.35rem;text-align:center;font-size:.95rem;color:#475569}.dark .howto-hero-meta{color:#cbd5f5}.howto-hero{background:linear-gradient(180deg,#f7faf8,#eef2f1)}.dark .howto-hero{background:linear-gradient(180deg,#0b1120,#0f172a)}.howto-panel{border-radius:1.25rem;border:1px solid rgba(148,163,184,.3);background:#ffffffe6;box-shadow:0 12px 30px #0f172a14;backdrop-filter:blur(12px)}.dark .howto-panel{border-color:#47556999;background:#0f172abf;box-shadow:0 18px 40px #0003}.howto-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:999px;background:#10b9811f;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:#065f46}.dark .howto-pill{color:#a7f3d0;background:#10b98126}.howto-card{border-radius:1rem;border:1px solid rgba(148,163,184,.25);padding:1.25rem;background:#fffc;box-shadow:0 8px 20px #0f172a0f;transition:transform .2s ease,box-shadow .2s ease}.howto-card:hover{transform:translateY(-2px);box-shadow:0 14px 24px #0f172a1a}.dark .howto-card{background:#0f172a99;border-color:#33415580}.howto-card-title{font-weight:600;font-size:1rem;color:#0f172a;margin-bottom:.5rem}.dark .howto-card-title{color:#f8fafc}.howto-card-body{font-size:.95rem;color:#526175}.dark .howto-card-body{color:#cbd5f5}.howto-callout{border-radius:1rem;border:1px solid rgba(148,163,184,.35);padding:1rem 1.25rem;background:#f1f5f999}.dark .howto-callout{background:#1e293bb3;border-color:#47556999}.howto-showcase{display:flex;flex-direction:column;gap:.75rem;padding:1rem;border-radius:1rem;border:1px solid rgba(148,163,184,.3);background:#ffffffb3;align-items:center;text-align:center}.howto-showcase-plain{border:none;background:transparent;padding:0}.dark .howto-showcase{border-color:#47556999;background:#0f172a99}.dark .howto-showcase-plain{background:transparent;border:none}.howto-showcase-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:#64748b}.dark .howto-showcase-label{color:#94a3b8}.howto-showcase-caption{font-size:.85rem;color:#526175}.dark .howto-showcase-caption{color:#cbd5f5}.howto-showcase-pattern{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:0}.howto-showcase-block{display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center}.howto-pattern-rows{display:grid;gap:1.75rem}.howto-pattern-entry{display:grid;gap:1.5rem;align-items:center;text-align:left;border-radius:1.25rem;border:1px solid rgba(148,163,184,.3);background:#ffffffb3;padding:1.25rem;box-shadow:0 12px 24px #0f172a14}.dark .howto-pattern-entry{border-color:#47556999;background:#0f172a99}@media(min-width:1024px){.howto-pattern-entry{grid-template-columns:1.1fr .9fr}}.howto-pattern-title{font-size:1.05rem;font-weight:600;color:#0f172a;letter-spacing:.04em;text-transform:uppercase}.dark .howto-pattern-title{color:#f8fafc}.howto-pattern-text{font-size:.95rem;color:#526175}.dark .howto-pattern-text{color:#cbd5f5}.howto-pattern-visual{display:flex;flex-direction:column;align-items:center;gap:.75rem}.howto-button{padding:.55rem 1.1rem;border-radius:999px;border:1px solid rgba(148,163,184,.6);background:#ffffffd9;color:#0f172a;font-size:.9rem;font-weight:600;transition:transform .2s ease,background .2s ease}.howto-button:hover{transform:translateY(-1px)}.howto-button-primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent}.dark .howto-button{background:#0f172acc;color:#e2e8f0;border-color:#475569b3}.howto-link{font-size:.85rem;font-weight:600;color:#0f766e}.dark .howto-link{color:#5eead4}.howto-faq{border-radius:1rem;border:1px solid rgba(148,163,184,.35);padding:1.25rem 1.5rem;background:#ffffffb3}.dark .howto-faq{background:#0f172a99;border-color:#47556999}@media(prefers-reduced-motion:reduce){.howto-card,.howto-button{transition:none}}