:root { --ink:#19352b; --muted:#61766c; --line:#c7d5c9; --paper:#f7f5eb; --card:#fffef9; --moss:#146449; --lime:#b4df70; --sky:#e4f1ea; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font:16px Georgia, 'Times New Roman', serif; background:repeating-linear-gradient(0deg, rgba(20,100,73,.035) 0 1px, transparent 1px 5px),var(--paper); }
.shell { width:min(960px,calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; }
.topbar { display:flex; justify-content:space-between; align-items:end; gap:24px; border-bottom:3px solid var(--ink); padding-bottom:22px; }
.eyebrow { margin:0 0 9px; color:var(--moss); font:700 11px ui-monospace,Consolas,monospace; letter-spacing:.12em; }
h1,h2,p { margin:0; } h1 { font-size:clamp(2rem,5vw,3.5rem); line-height:1; } h2 { font-size:20px; margin:14px 0 9px; }
nav { display:flex; gap:8px; flex-wrap:wrap; } nav a { padding:8px 10px; border:1px solid var(--ink); color:var(--ink); background:var(--lime); font:700 12px ui-monospace,Consolas,monospace; text-decoration:none; }
.intro { max-width:680px; padding:42px 0 30px; font-size:22px; line-height:1.45; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } article,.note { border:1px solid var(--line); background:var(--card); padding:20px; box-shadow:5px 5px 0 rgba(22,49,41,.1); } article strong { color:var(--moss); font:700 12px ui-monospace,Consolas,monospace; } article p,.note p { color:var(--muted); line-height:1.5; } article a,.note a { color:var(--moss); font-weight:700; } .note { margin-top:20px; border-left:6px solid var(--moss); background:var(--sky); } code { padding:2px 5px; background:rgba(255,255,255,.7); font:14px ui-monospace,Consolas,monospace; }
@media (max-width:700px) { .shell { padding-top:28px; } .topbar { align-items:start; flex-direction:column; } .intro { padding-top:30px; font-size:19px; } .steps { grid-template-columns:1fr; } }