:root{--bud:#1f1c19;--bark:var(--ink);--clay:#a98a6c;--leaf-spring:var(--spring,linear(0,.35 8%,.82 18%,1.06 28%,1.1 34%,1.03 46%,.99 58%,1 72%,1))}
html[data-mode=night]{--bud:#ece4d3;--bark:#a89d8a;--clay:#6d5745}
@media (prefers-color-scheme:dark){html:not([data-mode=paper]){--bud:#ece4d3;--bark:#a89d8a;--clay:#6d5745}}

/* the drawing */
.tree{width:100%;height:auto;overflow:visible}
.ink{fill:var(--ink);stroke:none}
.ink.bark{fill:var(--bark)}
.streak{fill:var(--paper);fill-opacity:.13}
.pad{fill:#6f8f5a;fill-opacity:.11}
.padlink{pointer-events:none}
.pot{fill:var(--clay);stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}
.pot-in{fill:var(--clay);stroke:var(--ink);stroke-width:3.5}
.pot-line{fill:none;stroke:var(--ink);stroke-opacity:.4;stroke-width:2}
.soil{fill:#3b3026}
.moss{fill:#5c7a4c}
.mp{fill:none;stroke:#fff;stroke-linecap:round}

/* leaves: always full in the status colour; the pivot is the stem, the origin of .lf */
.leaf{cursor:pointer}
.leaf:hover{opacity:1}
.lf path{stroke:var(--ink);stroke-width:1}
.lf .rib{fill:none;stroke-opacity:.45}
.lf-black .rib{stroke:var(--paper)}
.bud{rotate:calc(var(--turn,0deg) + var(--lean,0deg));transition:rotate .45s var(--leaf-spring)}

/* labels */
.leaf-label{font:400 23px var(--hand);fill:var(--ink);white-space:pre}
.leaf-big{font-weight:700}
.lab{font-size:17px;font-weight:400;fill:var(--soft)}
.lab.own{fill:var(--red)}
.fork{font-family:var(--hand);font-weight:700;fill:var(--ink)}
.fork-1{font-size:34px;fill:var(--red)}
.fork-2{font-size:26px}
.fork-3{font-size:23px}

/* hover and focus: no colour, no wave, no change of width */
.leaf:hover .bud,.leaf:focus-visible .bud{--turn:6deg}
.leaf:hover .leaf-label{stroke:var(--ink);stroke-width:.45px}
.leaf:hover .lab{stroke:var(--soft)}
.leaf:hover .lab.own,.leaf:hover .fork-1{stroke:var(--red);stroke-width:.45px}
.leaf:focus-visible{outline:none}
.brush{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset var(--t-touch,120ms) ease-out}
.leaf:focus-visible .brush{stroke-dashoffset:0;opacity:1}
@media (forced-colors:active){.leaf:focus-visible{outline:2px solid CanvasText}.brush{display:none}}

/* first visit of a session: the tree grows. Only with JS, so without it the finished tree stands there. Never animate a text directly. */
html.tj:not([data-seen]) .mp{stroke-dasharray:1 1.1;animation:ink .5s cubic-bezier(.3,.1,.3,1) var(--dl,0s) backwards}
html.tj:not([data-seen]) .mp.mt{animation-duration:.85s;animation-timing-function:cubic-bezier(.1,.6,.3,1)}
html.tj:not([data-seen]) .tw{animation:fade .3s ease-out var(--dl) backwards}
html.tj:not([data-seen]) .bud{animation:open .5s var(--leaf-spring) var(--dl) backwards}
html.tj:not([data-seen]) .lt{animation:fade .3s ease-out calc(var(--dl) + .12s) backwards}
html.tj:not([data-seen]) .padlink{animation:fade .5s ease-out var(--dl) backwards}
html.tj:not([data-seen]) .names{animation:fade .4s ease-out 1.45s backwards}
html.tj:not([data-seen]) .seal-big{animation:press .32s cubic-bezier(.2,1.4,.4,1) 2.05s backwards}
@keyframes ink{from{stroke-dashoffset:1.02}}
@keyframes fade{from{opacity:0}}
@keyframes open{from{scale:0}}
@keyframes press{from{scale:1.6;opacity:0}}

/* wind: a quiet breath, then a gust that crosses the tree. One transform animation per leaf, so it stays off the main thread */
html.tj .sway{animation:wind 13s ease-in-out var(--g) infinite}
.tree.still .sway{animation-play-state:paused}
@keyframes wind{0%,100%{transform:rotate(calc(var(--a)*-.6))}15%{transform:rotate(calc(var(--a)*.7))}31%{transform:rotate(calc(var(--a)*-.7))}47%{transform:rotate(calc(var(--a)*.6))}62%{transform:rotate(calc(var(--a)*-.3))}70%{transform:rotate(calc(var(--a)*1.6))}78%{transform:rotate(calc(var(--a)*-.7))}86%{transform:rotate(calc(var(--a)*.5))}93%{transform:rotate(calc(var(--a)*-.4))}}
.canopy{position:relative}

/* below 1180 the tree is a picture: labels go, each pad jumps to its group in the list */
@media (max-width:1179px){
  .lt,.names{display:none}
  .leaf{pointer-events:none}
  .padlink{pointer-events:auto;cursor:pointer}
}