/* What only the tools page needs: everything else is site/style.css, copied in at deploy */

/* the landing page's bloom, cut down to sit behind the header */
.bloom-head{position:relative;isolation:isolate;overflow:hidden;margin-top:-12px;margin-bottom:64px}
.bloom-head .dock-head{margin-bottom:0;padding-bottom:88px}
.bloom-head .hero-wall{
  --art-scrim:radial-gradient(58% 46% at 50% 46%,rgba(10,11,16,.76),rgba(10,11,16,.36) 64%,transparent 84%);
  z-index:-1;
}
[data-theme="light"] .bloom-head .hero-wall{--art-scrim:radial-gradient(58% 46% at 50% 46%,rgba(255,255,255,.88),rgba(255,255,255,.42) 64%,transparent 84%)}
.bloom-head .art{will-change:rotate}
/* each ring drifts on its own, so the petals keep shifting against each other */
.still .art-1{animation:art-open 2s var(--settle) both,sway 17s ease-in-out 2s infinite alternate}
.still .art-2{animation:art-open 1.8s var(--settle) .1s both,sway 13s ease-in-out 2s infinite alternate-reverse}
.still .art-3{animation:art-open 1.6s var(--settle) .2s both,sway 11s ease-in-out 2s infinite alternate}
@keyframes sway{from{rotate:-1.6deg}to{rotate:1.6deg}}

/* the logo stays in the island and the footer, the bloom behind this header is enough here */
.dock-head h1::before{display:none}

/* ---------- What's going on: petals growing in from the corner of each card, each its own hue ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.path{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:4px;
  min-height:128px;justify-content:flex-end;padding:18px 20px;text-align:left;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-tile);color:var(--text);font:400 15px/1.4 var(--font);
  background:
    linear-gradient(135deg,rgba(255,255,255,.047),hsl(var(--g) 90% 72% / .09) 50%,transparent) padding-box,
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.31),rgba(255,255,255,.03) 38%,rgba(255,255,255,.07)) border-box;
  transition:transform .25s var(--settle);
}
.path b{font-size:17px;font-weight:600}
[data-theme="light"] .path svg{fill:hsl(var(--g) 75% 62%)}
.path span{color:var(--text-2);font-size:14.5px}
.path svg{
  position:absolute;right:0;top:0;z-index:-1;width:96px;height:96px;opacity:.5;
  fill:hsl(var(--g) 80% 74%);fill-opacity:.62;overflow:visible;transform-origin:100% 0;
  transition:transform .5s var(--spring),opacity .2s var(--ease);
}
.path[aria-expanded="true"]{background:
    linear-gradient(135deg,hsl(var(--g) 90% 72% / .2),hsl(var(--g) 90% 72% / .07) 60%,transparent) padding-box,
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,hsl(var(--g) 90% 76%),hsl(var(--g) 90% 76% / .25)) border-box}
.path[aria-expanded="true"] svg{opacity:.95;transform:scale(1.14) rotate(6deg)}
[data-theme="light"] .path{
  background:linear-gradient(135deg,hsl(var(--g) 90% 70% / .12),transparent 60%),#FFF;
  border-color:var(--outline);box-shadow:var(--lift);
}
[data-theme="light"] .path[aria-expanded="true"]{background:linear-gradient(135deg,hsl(var(--g) 90% 70% / .24),transparent 70%),#FFF;border-color:hsl(var(--g) 70% 50%)}
@media (hover:hover) and (pointer:fine){
  .path:hover{transform:translateY(-3px)}
  .path:hover svg{opacity:.85;transform:scale(1.1) rotate(5deg)}
}

.guide{margin-top:20px;animation:rise .35s var(--settle);scroll-margin-top:96px}
.guide > h3{font-size:22px;letter-spacing:-.01em;margin-bottom:14px}
.step h4{margin:0 0 4px;font-size:17px;font-weight:600}
.guide-needs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:14.5px}

/* step numbers sit on a petal */
.step-n{position:relative;isolation:isolate;background:none}
.step-n::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--accent-container);border-radius:4% 62%;rotate:0deg;transition:rotate .35s var(--spring)}
.row.step:hover .step-n::before{rotate:90deg}
[data-theme="light"] .step-n{background:none}
[data-theme="light"] .step-n::before{background:var(--violet)}

/* ---------- Downloads ---------- */
#downloads{max-width:none;margin-bottom:14px;scroll-margin-top:96px}
.kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.kinds .pill[aria-pressed="true"]{background:var(--accent-container);border-color:transparent;color:var(--text)}
[data-theme="light"] .kinds .pill[aria-pressed="true"]{background:var(--accent-container);color:#4F22C7}
#packages{margin-bottom:96px}
#packages section{margin-bottom:48px}
#packages section:last-child{margin-bottom:0}
#packages .row-head h2{font-size:21px}
.fits{padding:12px 14px;border-radius:var(--r-s);background:color-mix(in srgb,var(--pink) 12%,transparent);color:var(--text);font-size:14.5px}

@media (max-width:900px){
  .paths{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bloom-head{margin-top:-8px;margin-bottom:48px}
  .bloom-head .dock-head{padding-bottom:64px}
  .paths{gap:8px}
  .path{min-height:118px;padding:14px}
  .path b{font-size:15.5px}
  .path span{font-size:13.5px}
  .path svg{width:60px;height:60px}
  #packages{margin-bottom:72px}
}