The diagonal-cut token pair

--radius-card: 28px and --radius-btn: 14px drive every card and button: border-radius: var(--radius-btn) 0 var(--radius-btn) 0; rounds the top-left and bottom-right corners and leaves the other two sharp. Small badges and tags skip this — the cut doesn't read cleanly at that size.

Three rules that keep the garden look intact

The leaf clip is one global .leaf-clip class (a CSS mask, not an image), so any card can use it by setting --leaf-color and --leaf-rotate inline — no new markup per color.

A rotated card creates its own stacking context, so the leaf clip can't out-rank the card's own background with z-index alone. Lift the card's content instead (.card > *:not(.leaf-clip) { position: relative; z-index: 1; }).

The background pattern is .pattern-band (scattered leaves) or .pattern-hills (a horizon line with small tree silhouettes; currently unused, kept as an available option) — a plain background-image with background-attachment: fixed right on the section's own box, so it stays pinned to the viewport as you scroll through that section. Being a normal background property rather than a separate fixed-position element, it's confined to the section by definition and can't bleed into neighbors the way a fixed ::before pseudo-element did in an earlier version. The trade-off: most mobile browsers ignore fixed attachment and scroll it normally there, which is an accepted, well-known degradation. Applied to alternating accent sections only — never hero sections, which use HeroTreeScene instead, and never every section — so it reads as an accent, not wallpaper behind every card. Desktop also swaps in a dimmer variant of the same pattern above 861px, where it covers more of the viewport at once.