:root { --bg: #0d1117; --panel: #161b22; --ink: #e6edf3; --muted: #8b949e; --acc: #7dff9a; --acc2: #58a6ff; --border: #30363d; --code: #0d1117; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15.5px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .wrap { max-width: 980px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } a { color: var(--acc2); text-decoration: none; } a:hover { text-decoration: underline; } .hero h1 { font-size: 1.9rem; margin: 0 0 .2rem; } .hero .tag { display: inline-block; background: rgba(125,255,154,.12); color: var(--acc); border: 1px solid rgba(125,255,154,.35); border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; margin-bottom: 1rem; } .hero p { color: var(--muted); margin: 0; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1.25rem 0; } .card h2 { font-size: 1.15rem; margin: 0 0 .6rem; } .card ol, .card ul { padding-left: 1.25rem; } .card li { margin: .35rem 0; } code { font: 13px/1.5 "SF Mono", "Cascadia Code", Consolas, monospace; background: #161b22; color: #c9d1d9; padding: .1rem .35rem; border-radius: 4px; } pre { background: var(--code); color: #c9d1d9; border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; font-size: 12.8px; line-height: 1.5; } pre code { background: transparent; padding: 0; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border); } th { color: var(--muted); } .btn { display: inline-block; background: #238636; color: #fff; border-radius: 8px; padding: .5rem 1.1rem; font-weight: 600; text-decoration: none; border: none; } .btn.alt { background: #1f6feb; } .btn:hover { filter: brightness(1.1); } .cta { text-align: center; } .note { font-size: .86rem; color: var(--muted); } .badge { font-size: .8rem; } footer { margin-top: 3rem; color: var(--muted); font-size: .85rem; }