/* examples.html, V2: flat, ruled, no cards. */
.ex-hero{padding:56px 0 36px}
.ex-hero h1{max-width:16ch}
.ex-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}
.ex-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:760px;counter-reset:s}
.ex-steps li{counter-increment:s;padding:11px 0 11px 40px;border-bottom:1px solid var(--line);position:relative;color:var(--mute);font-size:15.5px}
.ex-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:13px;font:500 12px/1.6 var(--mono);color:var(--accent)}
.ex-steps b{color:var(--text);font-weight:600}
.ex-steps code,.ex-env code,.fine code,.recipe code{font-size:.9em;color:var(--accent)}
.code code{color:inherit;font-size:inherit}
.code .k{color:#b9b3a1}.code .s{color:var(--accent)}.code .n{color:var(--up)}.code .c{color:#6b685c}
.ex-bar{position:sticky;top:61px;z-index:50;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ex-bar__in{display:flex;align-items:center;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.ex-bar__lbl{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ex-bar .tabs [role=tab]{padding:9px 12px;border-color:var(--line)}
.ex-bar__jump{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:thin;padding:2px 0}
.ex-bar__jump a{flex:none;font:500 12px/1 var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;white-space:nowrap}
.ex-bar__jump a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
@media(max-width:900px){.ex-bar__jump{flex-basis:100%;order:3}}
.ex-recipes{padding-top:28px;border-top:0}
.ex-env{margin:0 0 28px;line-height:1.7}
.recipe{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:150px}
.recipe:first-of-type{border-top:0}
.recipe__txt h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.5em}
.recipe__txt .plain{margin-top:14px}
.fine{color:var(--mute);font-size:14.5px;line-height:1.6}
.recipe__code{display:grid;gap:14px;min-width:0;align-content:start}
.recipe__code .code__bar{padding:6px 8px 6px 10px;min-height:46px}
.code--out pre{max-height:240px;color:var(--mute)}
.code--out .code__bar{padding:9px 12px}
.badge{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:var(--r);border:1px solid var(--line2);color:var(--mute)}
.badge--free{color:var(--up);border-color:var(--up)}
.ex-dl .ex-files{margin:26px 0}
.ex-dl .ex-files td:first-child{white-space:nowrap;font-family:var(--mono);font-size:14px}
.ex-list{list-style:none;margin:0 0 24px;padding:0;font-size:14px}
.ex-list li{padding:9px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
@media(max-width:980px){.recipe{grid-template-columns:minmax(0,1fr);gap:22px;padding:32px 0}}
@media(max-width:640px){.ex-hero{padding-top:40px}.code pre{font-size:12.5px}.ex-dl .ex-files td:first-child{white-space:normal;overflow-wrap:anywhere}}