.dev-main { overflow-y: auto; }
.dev-public { min-height: 70vh; }
.dev-wrap { max-width: 1120px; margin: auto; padding: 64px 32px 88px; }
.dev-wrap h1 { font: 500 clamp(42px, 6vw, 68px)/1.02 Georgia, serif; letter-spacing: -.05em; max-width: 850px; margin: 18px 0; }
.dev-lede { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 800px; }
.dev-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 42px; }
.dev-tabs a { background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 700; padding: 10px 15px; text-decoration: none; }
.dev-tabs a:hover, .dev-tabs .primary { background: var(--green); border-color: var(--green); color: #fff; }
.dev-note { background: var(--mint); border: 1px solid #c9e5d8; border-radius: 16px; line-height: 1.65; padding: 20px 22px; }
.dev-wrap h2 { font: 500 28px Georgia, serif; margin: 46px 0 14px; }
.dev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dev-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.dev-card h3 { margin: 0 0 8px; }
.dev-card p, .dev-copy { color: var(--muted); line-height: 1.6; }
.dev-card code { background: var(--ink); border-radius: 7px; color: #e9f5ef; display: block; margin-top: 14px; overflow: auto; padding: 9px 11px; }
.dev-card code b { color: #77d9b3; }
.dev-wrap pre { background: var(--ink); border-radius: 16px; color: #e9f5ef; line-height: 1.65; overflow: auto; padding: 22px; }
@media (max-width: 720px) { .dev-wrap { padding: 36px 18px 70px; } .dev-grid { grid-template-columns: 1fr; } .dev-wrap h1 { font-size: 42px; } }