/* ===================================================================== Arboles — Design Tokens (CSS custom properties) --------------------------------------------------------------------- The brand is the ceiba (kapok, silk-cotton tree): Puerto Rico's national tree, sacred to the Taíno, with a wide umbrella crown and buttress roots that fan out into red earth. Neutrals are its grey-green bark, the accent is the clay the roots hold (--ar-root), the second voice its canopy (--ar-canopy), the third the kapok pod and fibre (--ar-kapok). Light is the default (:root); dark is data-theme="dark" on (legacy .dark kept). Every product surface reads ONLY these variables. Pairs: *-ink is text (4.5:1 on bg/surface/surface-2), *-fill carries --ar-on-accent, *-soft is a tinted ground for the matching *-ink. ===================================================================== */ :root, [data-theme="light"] { /* Core surfaces: kapok-fibre paper and bark-grey rules */ --ar-bg: #f1efe9; --ar-surface: #faf9f5; --ar-surface-2: #e6e3da; --ar-line: #d9d5c9; --ar-line-strong: #767c70; /* Text: deep bark */ --ar-ink: #22251f; --ar-ink-soft: #5c6157; /* Brand */ --ar-root: #a14d2d; --ar-root-ink: #843d22; --ar-root-fill: #9a4a2c; --ar-root-soft: #f2dfd5; --ar-canopy: #2f5f44; --ar-canopy-ink: #2f5f44; --ar-canopy-soft: #d5e4d8; --ar-kapok: #97733f; --ar-kapok-ink: #755a2e; --ar-kapok-fill: #755a2e; --ar-kapok-soft: #efe6d3; --ar-bark: #7a8275; /* Utility */ --ar-on-accent: #faf9f5; --ar-bar: rgba(241, 239, 233, 0.84); /* Inverse band (footer) */ --ar-deep: var(--ar-ink); --ar-on-deep: #ecebe4; --ar-on-deep-soft: #a3a99c; /* Texture strength (bark grain, root fan) */ --ar-grain: rgba(34, 37, 31, 0.10); /* Presence */ --ar-online: #2f8a57; --ar-away: var(--ar-kapok); --ar-offline: var(--ar-ink-soft); } [data-theme="dark"], .dark { --ar-bg: #131512; --ar-surface: #1a1d19; --ar-surface-2: #232721; --ar-line: #30352e; --ar-line-strong: #737a6d; --ar-ink: #ecebe4; --ar-ink-soft: #a3a99c; --ar-root: #d27b58; --ar-root-ink: #e59a7b; --ar-root-fill: var(--ar-root); --ar-root-soft: #3a241a; --ar-canopy: #6aa982; --ar-canopy-ink: #7cbb94; --ar-canopy-soft: #1f3328; --ar-kapok: #d3b07a; --ar-kapok-ink: var(--ar-kapok); --ar-kapok-fill: var(--ar-kapok); --ar-kapok-soft: #332a1b; --ar-bark: #8d9588; --ar-on-accent: #131512; --ar-bar: rgba(19, 21, 18, 0.82); --ar-deep: #0c0d0b; --ar-grain: rgba(236, 235, 228, 0.07); --ar-online: #46b072; --ar-shadow-card: 0 12px 30px -12px rgba(0, 0, 0, 0.55); --ar-shadow-float: 0 20px 40px -20px rgba(0, 0, 0, 0.70); --ar-shadow-hero: 0 30px 70px -30px rgba(0, 0, 0, 0.75); --ar-shadow-panel: 0 40px 90px -50px rgba(0, 0, 0, 0.80); --ar-shadow-segment: 0 2px 6px -2px rgba(0, 0, 0, 0.50); --ar-focus-ring: 0 0 0 2px #131512, 0 0 0 4px #d27b58; } /* Typography families */ :root { --ar-font-serif: "Newsreader", Georgia, "Times New Roman", serif; --ar-font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --ar-font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace; } /* Radius / shadow / motion tokens */ :root { --ar-r-pill: 999px; --ar-r-lg: 22px; --ar-r-md: 16px; --ar-r-sm: 12px; --ar-r-xs: 10px; --ar-shadow-card: 0 12px 30px -12px rgba(34, 37, 31, 0.15); --ar-shadow-float: 0 20px 40px -20px rgba(34, 37, 31, 0.40); --ar-shadow-hero: 0 30px 70px -30px rgba(34, 37, 31, 0.42); --ar-shadow-panel: 0 40px 90px -50px rgba(34, 37, 31, 0.50); --ar-shadow-segment: 0 2px 6px -2px rgba(34, 37, 31, 0.15); --ar-focus-ring: 0 0 0 2px #f1efe9, 0 0 0 4px #9a4a2c; --ar-ease: cubic-bezier(0.4, 0, 0.2, 1); --ar-dur-fast: 160ms; --ar-dur: 180ms; } /* Selection color */ ::selection { background: var(--ar-root-fill); color: var(--ar-on-accent); } /* Keyframes */ @keyframes ar-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: .35; } } @keyframes ar-rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Bark grain: the ceiba's vertical furrows, painted in --ar-grain through a mask so it follows the theme. Put .ar-bark on a surface (media placeholders have it built in); content stays above the grain. */ .ar-bark, .ar-media-placeholder { position: relative; isolation: isolate; } .ar-bark::before, .ar-media-placeholder::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ar-grain); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22140%22%20viewBox%3D%220%200%20180%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6.0%20-7.0%20L6.7%204.2%20L6.8%2014.7%20L4.9%2027.7%20L2.8%2041.7%20L0.9%2055.2%20L0.6%2065.9%20L-1.0%2082.5%20L-0.5%2094.3%20L-0.1%20111.9%20L2.0%20125.1%20L3.5%20135.4%20L2.0%20147.8%20L1.1%20158.7%22%20stroke-width%3D%220.8%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M12.3%208.8%20l-0.9%208.8%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M19.8%20-2.9%20L20.1%209.6%20L19.3%2023.2%20L20.1%2039.6%20L20.5%2051.6%20L22.1%2065.8%20L21.2%2081.6%20L19.5%2099.4%20L20.6%20112.8%20L20.6%20124.0%20L21.3%20134.3%20L21.6%20150.4%22%20stroke-width%3D%221%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M26.2%2063.9%20l1.3%2019.8%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M25.6%2093.0%20l0.6%208.8%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M33.3%2019.7%20L32.3%2036.3%20L33.1%2049.4%20L32.9%2059.6%20L31.2%2070.9%20L32.4%2081.4%20L31.3%2092.4%20L32.9%20105.5%20L32.7%20116.2%20L34.4%20130.6%20L36.0%20147.1%20L35.6%20159.4%22%20stroke-width%3D%220.8%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M37.4%2032.5%20l-0.0%2011.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M46.4%20-9.5%20L46.1%200.5%20L46.4%2013.5%20L47.2%2031.1%20L47.7%2045.2%20L45.7%2060.7%20L47.0%2077.9%20L48.3%2094.8%20L47.8%20108.0%20L48.4%20118.8%20L46.5%20129.3%20L45.0%20141.0%20L43.1%20153.7%22%20stroke-width%3D%220.6%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M49.6%20122.4%20l-1.1%2016.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M50.9%2048.6%20l-1.1%2013.1%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M54.5%20139.0%20l-0.0%2014.5%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M56.0%20-15.9%20L55.0%20-3.2%20L53.5%2013.5%20L55.5%2023.6%20L53.9%2037.9%20L51.8%2052.2%20L53.9%2066.4%20L54.8%2083.3%20L54.2%2095.4%20L55.4%20106.8%20L56.6%20121.0%20L55.4%20133.7%20L57.6%20150.2%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M60.2%2069.0%20l1.5%2018.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M70.5%20-1.1%20L71.0%2010.4%20L72.4%2023.2%20L71.7%2039.0%20L69.9%2056.8%20L69.7%2067.6%20L69.7%2080.3%20L70.1%2098.2%20L71.9%20108.2%20L72.6%20120.9%20L70.9%20137.6%20L71.8%20150.7%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M74.1%20132.5%20l-0.1%2018.1%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M78.0%2011.9%20l1.5%2010.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M79.7%203.6%20L80.4%2017.4%20L80.8%2032.2%20L82.8%2046.0%20L83.0%2057.3%20L84.3%2067.5%20L82.6%2083.3%20L81.0%2099.3%20L79.6%20117.2%20L77.5%20134.2%20L77.6%20145.9%22%20stroke-width%3D%221.3%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M88.2%2049.5%20l0.3%2014.4%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M95.1%20-3.2%20L95.1%2014.2%20L95.2%2028.4%20L94.9%2038.6%20L92.7%2050.0%20L91.3%2066.4%20L92.3%2080.2%20L91.5%2094.7%20L91.8%20108.8%20L90.0%20125.1%20L88.9%20139.6%20L90.1%20151.8%22%20stroke-width%3D%220.6%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M101.7%2070.8%20l0.6%2015.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M100.8%2074.7%20l1.3%2014.7%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M109.0%2015.1%20L107.9%2032.6%20L109.9%2047.1%20L108.3%2063.8%20L108.0%2074.8%20L106.9%2085.3%20L107.6%2095.9%20L109.4%20112.2%20L110.3%20123.4%20L108.7%20138.7%20L110.8%20155.8%22%20stroke-width%3D%221.3%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M117.9%20116.5%20l-0.2%2010.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M121.6%20-6.4%20L120.8%205.1%20L118.7%2020.9%20L118.4%2035.3%20L117.7%2045.5%20L117.7%2060.5%20L119.8%2071.0%20L121.9%2087.3%20L120.9%2098.1%20L122.1%20108.5%20L120.5%20120.6%20L122.3%20134.0%20L121.2%20150.5%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M125.1%208.1%20l-0.2%2017.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M125.0%20131.4%20l0.9%2016.9%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M131.2%2014.2%20L132.8%2024.8%20L132.0%2038.4%20L133.9%2052.8%20L132.3%2065.0%20L131.1%2079.2%20L129.7%2090.1%20L128.3%20100.5%20L127.5%20113.0%20L126.6%20129.0%20L125.1%20143.0%20L123.0%20155.8%22%20stroke-width%3D%220.8%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M135.6%2062.6%20l0.5%2017.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M138.1%2076.4%20l1.4%2020.4%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M142.3%20-11.4%20L141.0%200.4%20L142.0%2017.5%20L144.2%2028.6%20L145.6%2046.5%20L146.2%2056.6%20L145.9%2073.6%20L146.6%2084.1%20L146.6%2097.1%20L147.1%20114.9%20L145.1%20130.4%20L144.1%20141.9%20L143.5%20151.9%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M151.1%2043.3%20l-1.5%2013.0%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M154.0%20-1.0%20L152.7%2013.0%20L150.5%2027.0%20L148.7%2039.2%20L146.7%2052.4%20L145.8%2062.5%20L146.2%2074.4%20L147.3%2088.6%20L148.2%20103.9%20L147.8%20120.9%20L149.9%20133.5%20L150.9%20144.7%20L148.9%20159.9%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M161.9%2019.5%20l0.0%2015.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M162.0%20112.7%20l0.3%2019.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M162.3%2095.6%20l-0.8%2017.7%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M163.2%20-14.7%20L161.5%20-1.8%20L161.7%2014.9%20L162.3%2029.9%20L162.2%2045.4%20L163.5%2055.4%20L163.6%2071.4%20L164.3%2085.7%20L165.3%2096.2%20L163.4%20108.2%20L164.4%20120.3%20L165.5%20132.0%20L165.5%20149.8%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M170.0%2027.8%20l-0.5%2016.4%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M170.1%2097.0%20l-1.1%2016.7%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M169.1%2068.0%20l-1.2%2021.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M173.7%20-0.4%20L172.8%2015.3%20L174.0%2029.0%20L174.2%2046.9%20L172.4%2059.4%20L171.4%2073.2%20L171.5%2083.8%20L173.6%20101.8%20L175.5%20114.9%20L173.6%20132.3%20L174.7%20143.0%20L174.1%20155.1%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M178.9%2069.7%20l-0.3%2020.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M177.7%20133.0%20l-0.3%2017.5%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M181.1%2058.3%20l-1.1%2013.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22140%22%20viewBox%3D%220%200%20180%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6.0%20-7.0%20L6.7%204.2%20L6.8%2014.7%20L4.9%2027.7%20L2.8%2041.7%20L0.9%2055.2%20L0.6%2065.9%20L-1.0%2082.5%20L-0.5%2094.3%20L-0.1%20111.9%20L2.0%20125.1%20L3.5%20135.4%20L2.0%20147.8%20L1.1%20158.7%22%20stroke-width%3D%220.8%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M12.3%208.8%20l-0.9%208.8%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M19.8%20-2.9%20L20.1%209.6%20L19.3%2023.2%20L20.1%2039.6%20L20.5%2051.6%20L22.1%2065.8%20L21.2%2081.6%20L19.5%2099.4%20L20.6%20112.8%20L20.6%20124.0%20L21.3%20134.3%20L21.6%20150.4%22%20stroke-width%3D%221%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M26.2%2063.9%20l1.3%2019.8%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M25.6%2093.0%20l0.6%208.8%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M33.3%2019.7%20L32.3%2036.3%20L33.1%2049.4%20L32.9%2059.6%20L31.2%2070.9%20L32.4%2081.4%20L31.3%2092.4%20L32.9%20105.5%20L32.7%20116.2%20L34.4%20130.6%20L36.0%20147.1%20L35.6%20159.4%22%20stroke-width%3D%220.8%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M37.4%2032.5%20l-0.0%2011.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M46.4%20-9.5%20L46.1%200.5%20L46.4%2013.5%20L47.2%2031.1%20L47.7%2045.2%20L45.7%2060.7%20L47.0%2077.9%20L48.3%2094.8%20L47.8%20108.0%20L48.4%20118.8%20L46.5%20129.3%20L45.0%20141.0%20L43.1%20153.7%22%20stroke-width%3D%220.6%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M49.6%20122.4%20l-1.1%2016.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M50.9%2048.6%20l-1.1%2013.1%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M54.5%20139.0%20l-0.0%2014.5%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M56.0%20-15.9%20L55.0%20-3.2%20L53.5%2013.5%20L55.5%2023.6%20L53.9%2037.9%20L51.8%2052.2%20L53.9%2066.4%20L54.8%2083.3%20L54.2%2095.4%20L55.4%20106.8%20L56.6%20121.0%20L55.4%20133.7%20L57.6%20150.2%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M60.2%2069.0%20l1.5%2018.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M70.5%20-1.1%20L71.0%2010.4%20L72.4%2023.2%20L71.7%2039.0%20L69.9%2056.8%20L69.7%2067.6%20L69.7%2080.3%20L70.1%2098.2%20L71.9%20108.2%20L72.6%20120.9%20L70.9%20137.6%20L71.8%20150.7%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M74.1%20132.5%20l-0.1%2018.1%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M78.0%2011.9%20l1.5%2010.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M79.7%203.6%20L80.4%2017.4%20L80.8%2032.2%20L82.8%2046.0%20L83.0%2057.3%20L84.3%2067.5%20L82.6%2083.3%20L81.0%2099.3%20L79.6%20117.2%20L77.5%20134.2%20L77.6%20145.9%22%20stroke-width%3D%221.3%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M88.2%2049.5%20l0.3%2014.4%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M95.1%20-3.2%20L95.1%2014.2%20L95.2%2028.4%20L94.9%2038.6%20L92.7%2050.0%20L91.3%2066.4%20L92.3%2080.2%20L91.5%2094.7%20L91.8%20108.8%20L90.0%20125.1%20L88.9%20139.6%20L90.1%20151.8%22%20stroke-width%3D%220.6%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M101.7%2070.8%20l0.6%2015.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M100.8%2074.7%20l1.3%2014.7%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M109.0%2015.1%20L107.9%2032.6%20L109.9%2047.1%20L108.3%2063.8%20L108.0%2074.8%20L106.9%2085.3%20L107.6%2095.9%20L109.4%20112.2%20L110.3%20123.4%20L108.7%20138.7%20L110.8%20155.8%22%20stroke-width%3D%221.3%22%20opacity%3D%220.5%22%2F%3E%3Cpath%20d%3D%22M117.9%20116.5%20l-0.2%2010.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M121.6%20-6.4%20L120.8%205.1%20L118.7%2020.9%20L118.4%2035.3%20L117.7%2045.5%20L117.7%2060.5%20L119.8%2071.0%20L121.9%2087.3%20L120.9%2098.1%20L122.1%20108.5%20L120.5%20120.6%20L122.3%20134.0%20L121.2%20150.5%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M125.1%208.1%20l-0.2%2017.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M125.0%20131.4%20l0.9%2016.9%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M131.2%2014.2%20L132.8%2024.8%20L132.0%2038.4%20L133.9%2052.8%20L132.3%2065.0%20L131.1%2079.2%20L129.7%2090.1%20L128.3%20100.5%20L127.5%20113.0%20L126.6%20129.0%20L125.1%20143.0%20L123.0%20155.8%22%20stroke-width%3D%220.8%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M135.6%2062.6%20l0.5%2017.2%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M138.1%2076.4%20l1.4%2020.4%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M142.3%20-11.4%20L141.0%200.4%20L142.0%2017.5%20L144.2%2028.6%20L145.6%2046.5%20L146.2%2056.6%20L145.9%2073.6%20L146.6%2084.1%20L146.6%2097.1%20L147.1%20114.9%20L145.1%20130.4%20L144.1%20141.9%20L143.5%20151.9%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M151.1%2043.3%20l-1.5%2013.0%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M154.0%20-1.0%20L152.7%2013.0%20L150.5%2027.0%20L148.7%2039.2%20L146.7%2052.4%20L145.8%2062.5%20L146.2%2074.4%20L147.3%2088.6%20L148.2%20103.9%20L147.8%20120.9%20L149.9%20133.5%20L150.9%20144.7%20L148.9%20159.9%22%20stroke-width%3D%221.3%22%20opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M161.9%2019.5%20l0.0%2015.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M162.0%20112.7%20l0.3%2019.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M162.3%2095.6%20l-0.8%2017.7%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M163.2%20-14.7%20L161.5%20-1.8%20L161.7%2014.9%20L162.3%2029.9%20L162.2%2045.4%20L163.5%2055.4%20L163.6%2071.4%20L164.3%2085.7%20L165.3%2096.2%20L163.4%20108.2%20L164.4%20120.3%20L165.5%20132.0%20L165.5%20149.8%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M170.0%2027.8%20l-0.5%2016.4%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M170.1%2097.0%20l-1.1%2016.7%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M169.1%2068.0%20l-1.2%2021.6%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M173.7%20-0.4%20L172.8%2015.3%20L174.0%2029.0%20L174.2%2046.9%20L172.4%2059.4%20L171.4%2073.2%20L171.5%2083.8%20L173.6%20101.8%20L175.5%20114.9%20L173.6%20132.3%20L174.7%20143.0%20L174.1%20155.1%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M178.9%2069.7%20l-0.3%2020.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M177.7%20133.0%20l-0.3%2017.5%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3Cpath%20d%3D%22M181.1%2058.3%20l-1.1%2013.3%22%20stroke-width%3D%22.5%22%20opacity%3D%22.35%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat; -webkit-mask-size: 180px 140px; mask-size: 180px 140px; border-radius: inherit; } /* Root fan: buttress roots spreading from a trunk, as a divider or under a hero. */ .ar-roots { display: block; width: 100%; max-width: 480px; aspect-ratio: 3 / 1; background: var(--ar-line-strong); opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20160%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M240%200v160%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M236%2018c-6%2040-40%2092-150%20142M244%2018c6%2040%2040%2092%20150%20142%22%20stroke-width%3D%221.6%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M232%2034c-14%2044-70%2092-196%20126M248%2034c14%2044%2070%2092%20196%20126%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M230%2054c-22%2042-100%2082-230%20104M250%2054c22%2042%20100%2082%20230%20104%22%20stroke-width%3D%22.9%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M238%2026c-2%2046-14%2096-44%20134M242%2026c2%2046%2014%2096%2044%20134%22%20stroke-width%3D%221.2%22%2F%3E%0A%3C%2Fsvg%3E%0A") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20160%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M240%200v160%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M236%2018c-6%2040-40%2092-150%20142M244%2018c6%2040%2040%2092%20150%20142%22%20stroke-width%3D%221.6%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M232%2034c-14%2044-70%2092-196%20126M248%2034c14%2044%2070%2092%20196%20126%22%20stroke-width%3D%221.2%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M230%2054c-22%2042-100%2082-230%20104M250%2054c22%2042%20100%2082%20230%20104%22%20stroke-width%3D%22.9%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M238%2026c-2%2046-14%2096-44%20134M242%2026c2%2046%2014%2096%2044%20134%22%20stroke-width%3D%221.2%22%2F%3E%0A%3C%2Fsvg%3E%0A") center / contain no-repeat; }