/* EarthOnline's public site (site-1021; eol-coord/landing-1021/site/SPEC.md): the homepage and the use-case pages
   (src/views/site.js), linked by those pages alone. Every rule is under .site-*; the tokens are ui.css's. Sizes: the hero
   title 72/76 (40/46 on a phone), page titles 64/68, section titles 44/50, body 20/28, menus and footer 15/22 and 14/20.
   Nothing moves but the capsule (Cube's agent-capsule.css, copied whole apart from its colours) and two robots' blink;
   menus open at once. Light by default (Bonan 10-21); a reader who chose Dark gets the tokens' dark halves (.site-dark). */

.site { color-scheme: light; min-height: 100vh; background: var(--c-bg); color: var(--c-text); font: 400 15px/22px var(--font); -webkit-font-smoothing: antialiased; }
.site.site-dark { color-scheme: dark; }
:where(.site) a { color: inherit; text-decoration: none; }
.site code { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; }

/* ---- the header [data-site-nav]: brand, the menus on the left (Linktree, Calendly, Framer), the button and Sign in on the right ---- */
.site-bar { position: sticky; top: 0; z-index: 20; height: 52px; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: var(--c-bg); }
.site-brand { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1; }
.site-brand img { display: block; width: 28px; height: 28px; }
.site-brand b { font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 20px; margin-right: auto; }
.site-nav-group { position: relative; }
.site-nav-i { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--c-text-2); font: 400 15px/22px var(--font); cursor: pointer; }
.site-nav-i:hover, .site-nav-i[aria-expanded="true"], .site-nav-i.site-here { color: var(--c-text); }
.site-nav-i svg { display: block; }
.site-nav-i[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-bar-end { display: flex; align-items: center; gap: 16px; }
.site-embed { display: inline-flex; align-items: center; min-height: 36px; line-height: 0; }
.site-menu-btn { display: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--c-text); place-items: center; cursor: pointer; }
.site-menu-btn svg { display: block; }
.site-menu-btn .site-shut, .site-menu-btn[aria-expanded="true"] .site-open { display: none; }
.site-menu-btn[aria-expanded="true"] .site-shut { display: block; }

/* the open menu [data-nav-menu]: the account menu's look, one column, 380 wide; no animation */
.site-menu { position: absolute; top: 46px; left: 0; width: 380px; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--c-bg-3); border-radius: 12px; background: var(--c-bg); box-shadow: 0 12px 32px -8px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .04); }
.site-menu[hidden] { display: none; }
.site-menu-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; }
.site-menu-row:hover, .site-menu-row:focus-visible { background: var(--c-bg-2); }
.site-ic { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--site-tint); }
.site-ic i { width: 10px; height: 10px; border-radius: 50%; background: var(--site-dot); }
.site-menu-words b { display: block; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--c-text); }
.site-menu-words span { display: block; font-size: 14px; line-height: 20px; color: var(--c-text-2); }

/* each use case's colour: the robot dot and its tint */
.site-k-website { --site-dot: #3D7BFF; --site-tint: #e3ecff; }
.site-k-profile { --site-dot: #FF2E93; --site-tint: #ffe0ef; }
.site-k-card { --site-dot: #F5B800; --site-tint: #fff3cc; }
.site-k-developers { --site-dot: #23A55A; --site-tint: #dcf5e6; }
.site-dark .site-k-website { --site-tint: rgba(61,123,255,0.24); }
.site-dark .site-k-profile { --site-tint: rgba(255,46,147,0.22); }
.site-dark .site-k-card { --site-tint: rgba(245,184,0,0.22); }
.site-dark .site-k-developers { --site-tint: rgba(35,165,90,0.22); }

/* ---- the one button [data-start] ---- */
/* (Bonan 10-21: no box, one button) the site's primary button (ui.css .btn: solid, the page's text colour, 500 weight) at the size
   the phone sheet's buttons already have (44px, 16px type), as a page's main action; centred under the lede where the box stood */
.site-start.btn { align-self: center; width: auto; max-width: 100%; height: 52px; margin: 40px 0 0; padding: 0 28px; font-size: 18px; line-height: 24px; font-weight: 500; }
/* /home?too_long=1 (src/onboarding-entry.js): the sentence, small, in the error red, under the button */
.site-start-say { position: relative; z-index: 1; margin: 12px 0 0; color: var(--c-danger); font-size: 14px; line-height: 20px; }

/* ---- the homepage's hero [data-hero]: a little above the middle of the first screen, the piles in the corners ---- */
.site-stage { position: relative; min-height: calc(100vh - 52px); overflow: hidden; }
.site-hero { position: relative; z-index: 1; min-height: calc(100vh - 52px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px 9vh; text-align: center; }
.site-hero h1 { margin: 0; font-size: 72px; line-height: 76px; font-weight: 600; letter-spacing: -.04em; }
.site-line { display: block; white-space: nowrap; }
.site-keep { white-space: nowrap; } /* "your ⟨capsule⟩" never breaks apart, so the capsule never starts a line alone */
.site-lede { margin: 20px 0 0; max-width: 640px; color: var(--c-text-2); font-size: 20px; line-height: 28px; text-wrap: balance; }

/* the capsule: Cube's agent-capsule.css, verbatim apart from colours (public/site.js sets the three per word) */
.site-capsule {
  --capsule-pad: 1.28em; --capsule-dot: #3D7BFF; --capsule-tint: #e3ecff; --capsule-dark: rgba(61,123,255,0.24);
  position: relative; display: inline-block; vertical-align: baseline; font-size: 0.86em; height: 1.26em; line-height: 1.26em;
  padding: 0 0.35em 0 0.93em; border-radius: 999px; clip-path: inset(0 round 999px); background: var(--capsule-tint);
  white-space: nowrap; font-weight: 500; letter-spacing: -0.02em;
  transition: width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.42s ease; will-change: width;
}
.site-dark .site-capsule { background: var(--capsule-dark); }
.site-capsule-dot { position: absolute; left: 0.33em; top: 50%; width: 0.37em; height: 0.37em; transform: translateY(-50%); border-radius: 999px; background: var(--capsule-dot); transition: background-color 0.42s ease; }
.site-capsule-words { position: relative; display: inline; }
.site-capsule-word { display: inline-block; white-space: nowrap; line-height: inherit; transform: translateY(0); opacity: 1; }
.site-capsule-word.site-in { animation: site-capsule-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.site-capsule-word.site-out { position: absolute; left: 0; top: 0; animation: site-capsule-out 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes site-capsule-in { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes site-capsule-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-110%); opacity: 0; } }
.site-capsule-dot, .site-capsule-word.site-out, .site-capsule-measure { -webkit-user-select: none; user-select: none; }
.site-capsule-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap; }
.site-capsule-measure span { display: inline-block; }
/* no reduced-motion stop: the capsule always rolls (Bonan 10-21: "不滚就没法看到三个 usecase") */

/* ---- the two corner piles: the robots' places below (src/site-pages.js pileLayout, written out once) ---- */
.site-pile { position: absolute; bottom: 0; width: 0; height: 0; pointer-events: none; }
.site-pile-l { left: 0; transform-origin: bottom left; }
.site-pile-r { right: 0; transform-origin: bottom right; }
.site-bot { position: absolute; display: block; color: var(--c-text); }
.site-bot svg { display: block; overflow: visible; }

/* ---- the use cases on the homepage [data-usecases]: one link a block, text one side and the picture the other ---- */
.site-ucs { padding: 40px 24px 0; }
.site-ucs-head { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.site-ucs-head h2 { margin: 0; font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -.035em; }
.site-ucs-head p { margin: 16px 0 0; color: var(--c-text-2); font-size: 20px; line-height: 28px; }
.site-uc, .site-sec { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 72px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 72px 0; }
.site-uc.site-flip, .site-sec.site-flip { grid-template-columns: minmax(0, 1fr) 420px; }
.site-flip .site-uc-text, .site-flip .site-sec-text { order: 2; }
.site-uc-text { display: block; }
.site-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--c-text); }
.site-eyebrow i { width: 10px; height: 10px; border-radius: 50%; background: var(--site-dot); }
.site-uc-title, .site-sec h2 { display: block; margin: 14px 0 0; font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.site-uc-body, .site-sec p { display: block; margin: 16px 0 0; color: var(--c-text-2); font-size: 20px; line-height: 28px; }
.site-more { display: flex; align-items: center; gap: 6px; width: max-content; margin-top: 24px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--c-text); }
.site-uc:hover .site-more { text-decoration: underline; text-underline-offset: 4px; }
.site-pic { display: block; overflow: hidden; border-radius: 24px; background: var(--c-bg-2); }
.site-pic img { display: block; width: 100%; height: auto; }
.site-cmd-line { display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin-top: 24px; height: 48px; padding: 0 18px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg); font-size: 15px; }
.site-cmd-line code { padding: 0; background: none; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-cmd-p { flex: none; color: var(--c-text-2); }

/* ---- a use-case page [data-usecase-page]: hero, its picture, points, sections, closing ---- */
.site-page-hero { display: flex; flex-direction: column; align-items: center; padding: 120px 24px 64px; text-align: center; }
.site-page-hero h1 { max-width: 980px; margin: 16px 0 0; font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; }
.site-page-hero .site-lede { max-width: 680px; }
.site-under { margin: 18px 0 0; font-size: 14px; line-height: 20px; color: var(--c-text-2); }
.site-under a:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.site-hero-pic { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.site-points { max-width: 1200px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.site-points div { padding: 28px; border-radius: 16px; background: var(--c-bg-2); }
.site-points b { display: block; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.site-points span { display: block; margin-top: 8px; color: var(--c-text-2); font-size: 16px; line-height: 24px; }
.site-sec { max-width: 1248px; padding: 72px 24px; scroll-margin-top: 52px; }
.site-sec ul { margin: 20px 0 0; padding: 0; list-style: none; }
.site-sec li { display: flex; gap: 10px; padding: 6px 0; font-size: 17px; line-height: 26px; }
.site-sec li svg { flex: none; margin-top: 5px; color: var(--c-text-2); }

/* the MCP commands on /developers (live's words, connector/docs.js agentStartParts), each with the site's Copy */
.site-cmds { margin-top: 24px; }
.site-cmd-name { margin: 16px 0 6px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--c-text); }
.site-sec .site-cmd-name { margin-top: 16px; color: var(--c-text); font-size: 15px; line-height: 22px; }
.site-cmd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg); }
.site-cmd code { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.site-cmd .btn { flex: none; }
.site-sec .site-cmd-then { margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.site-cmd-then code { font-size: 13px; padding: 1px 5px; border-radius: 5px; background: var(--c-bg-2); color: var(--c-text); }
.site-cmd-then a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.site-sec .site-cmd-manual { margin: 24px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--c-text-2); }
.site-under code { padding: 3px 8px; border-radius: 6px; background: var(--c-bg-2); color: var(--c-text); font-size: 14px; }

/* the two lines for an agent (docs/agent-start.md), in plain sight but quiet: small grey type, under the hero / over the closing */
.site-agents { max-width: 760px; margin: 0 auto; padding: 24px 24px 0; }
.site-agent-start, .site-agent-say { color: var(--c-text-2); font-size: 14px; line-height: 20px; }
.site-agent-say { margin: 0 0 8px; }
.site-agent-start p { margin: 0; }
.site-agent-start strong { font-weight: 500; color: var(--c-text-2); }
.site-agent-start ol { margin: 4px 0 0; padding-left: 20px; }
.site-agent-start li { margin: 2px 0 0; }
.site-agent-start code { font-size: 13px; overflow-wrap: anywhere; }

/* ---- the closing [data-closing]: one line and the same input, the sparse piles at its feet ---- */
.site-closing { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 64px; padding: 120px 24px 200px; overflow: hidden; text-align: center; }
.site-closing h2 { position: relative; z-index: 1; margin: 0; font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -.04em; }
.site-closing .site-start { position: relative; z-index: 1; }
.site-closing .site-pile { transform: scale(.62); }

/* ---- the footer [data-site-footer]: Notion's link grid ---- */
.site-foot { border-top: 1px solid var(--c-bg-3); }
.site-foot-in { max-width: 1200px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.site-foot .site-brand { font-size: 18px; }
.site-foot .site-brand img { width: 24px; height: 24px; }
.site-foot-in p { margin: 16px 0 0; color: var(--c-text-2); font-size: 14px; line-height: 20px; }
.site-foot-in .site-foot-agents { margin-top: 8px; }
.site-foot-agents a:hover { color: var(--c-text); }
.site-foot-in h2 { margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-text); }
.site-foot-in div > a:not(.site-brand) { display: block; padding: 4px 0; color: var(--c-text-2); font-size: 14px; line-height: 20px; }
.site-foot-in div > a:not(.site-brand):hover { color: var(--c-text); }

/* ---- the phone sheet [data-nav-sheet] ---- */
.site-sheet { display: none; }

/* ---- phone ---- */
@media (max-width: 767px) {
  .site-bar { gap: 8px; padding: 0 16px; }
  .site-nav, .site-brand b, .site-signin { display: none; }
  .site-bar .site-brand { margin-right: auto; }
  .site-bar-end { gap: 8px; }
  .site-menu-btn { display: grid; }
  .site-sheet:not([hidden]) { display: block; position: fixed; inset: 52px 0 0 0; z-index: 19; overflow: auto; padding: 8px 16px; background: var(--c-bg); }
  .site-sheet h2 { margin: 16px 4px 4px; color: var(--c-text-2); font-size: 14px; line-height: 20px; font-weight: 500; }
  .site-sheet-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--c-bg-3); font-size: 17px; line-height: 24px; }
  .site-sheet-row i { width: 10px; height: 10px; border-radius: 50%; background: var(--site-dot, transparent); }
  .site-sheet-btns { display: flex; gap: 8px; margin-top: 24px; }
  .site-sheet-btns .btn { flex: 1; height: 44px; font-size: 16px; }

  .site-hero { justify-content: flex-start; padding: 22vh 16px 0; }
  /* 34/40 (Bonan 10-21): "be your ⟨website⟩." on one line, so the title keeps one height while the words roll; under 390
     the size follows the width (the line is about 9.6 times the size), never above 34 */
  .site-hero h1 { font-size: min(34px, calc((100vw - 44px) / 9.8)); line-height: 1.18; letter-spacing: -.035em; }
  .site-hero .site-line { white-space: normal; } /* line 1 "Let your agent" whole (.site-keep), line 2 "be your ⟨capsule⟩." wraps only if it must, "your ⟨capsule⟩." kept together */
  .site-lede { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .site-start.btn { margin-top: 32px; }
  .site-stage .site-pile { transform: scale(.42); }
  .site-closing .site-pile { transform: scale(.3); }

  .site-ucs { padding: 24px 16px 0; }
  .site-ucs-head h2 { font-size: 32px; line-height: 38px; }
  .site-ucs-head p, .site-uc-body, .site-sec p { font-size: 16px; line-height: 24px; }
  .site-uc, .site-uc.site-flip, .site-sec, .site-sec.site-flip { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 0; }
  .site-sec, .site-sec.site-flip { padding: 40px 16px; }
  .site-flip .site-uc-text, .site-flip .site-sec-text { order: 0; }
  .site-uc-title, .site-sec h2 { font-size: 30px; line-height: 36px; }
  .site-pic { border-radius: 16px; }
  .site-page-hero { padding: 64px 16px 40px; }
  .site-page-hero h1 { font-size: 40px; line-height: 46px; letter-spacing: -.035em; }
  .site-hero-pic { padding: 0 16px; }
  .site-points { grid-template-columns: 1fr; gap: 12px; padding: 24px 16px; }
  .site-closing { padding: 72px 16px 140px; }
  .site-agents { padding: 16px 16px 0; }
  .site-closing h2 { font-size: 36px; line-height: 42px; }
  .site-foot-in { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding: 40px 16px 32px; }
  .site-foot-in > :first-child { grid-column: 1 / -1; }
}

/* the robots' places (generated from src/site-pages.js pileLayout; regenerate if it changes) */
.site-pile-l.site-pile-dense > :nth-child(1) { left: -15px; bottom: -23px; width: 118px; height: 118px; transform: rotate(-3.3deg); }
.site-pile-l.site-pile-dense > :nth-child(2) { left: 60px; bottom: -16px; width: 118px; height: 118px; transform: rotate(6.1deg); }
.site-pile-l.site-pile-dense > :nth-child(3) { left: 154px; bottom: -18px; width: 118px; height: 118px; transform: rotate(-5.9deg); }
.site-pile-l.site-pile-dense > :nth-child(4) { left: 239px; bottom: -20px; width: 118px; height: 118px; transform: rotate(-4.7deg); }
.site-pile-l.site-pile-dense > :nth-child(5) { left: 327px; bottom: -15px; width: 118px; height: 118px; transform: rotate(0deg); }
.site-pile-l.site-pile-dense > :nth-child(6) { left: 417px; bottom: -19px; width: 118px; height: 118px; transform: rotate(5.5deg); }
.site-pile-l.site-pile-dense > :nth-child(7) { left: 16px; bottom: 46px; width: 110px; height: 110px; transform: rotate(-2.2deg); }
.site-pile-l.site-pile-dense > :nth-child(8) { left: 100px; bottom: 46px; width: 110px; height: 110px; transform: rotate(1deg); }
.site-pile-l.site-pile-dense > :nth-child(9) { left: 184px; bottom: 45px; width: 110px; height: 110px; transform: rotate(3deg); }
.site-pile-l.site-pile-dense > :nth-child(10) { left: 272px; bottom: 45px; width: 110px; height: 110px; transform: rotate(6.2deg); }
.site-pile-l.site-pile-dense > :nth-child(11) { left: 351px; bottom: 44px; width: 110px; height: 110px; transform: rotate(-4.1deg); }
.site-pile-l.site-pile-dense > :nth-child(12) { left: 52px; bottom: 108px; width: 101px; height: 101px; transform: rotate(2deg); }
.site-pile-l.site-pile-dense > :nth-child(13) { left: 138px; bottom: 100px; width: 101px; height: 101px; transform: rotate(-6.3deg); }
.site-pile-l.site-pile-dense > :nth-child(14) { left: 210px; bottom: 101px; width: 101px; height: 101px; transform: rotate(-6.6deg); }
.site-pile-l.site-pile-dense > :nth-child(15) { left: 86px; bottom: 148px; width: 93px; height: 93px; transform: rotate(0deg); }
.site-pile-l.site-pile-dense > :nth-child(16) { left: 161px; bottom: 153px; width: 93px; height: 93px; transform: rotate(-0.6deg); }
.site-pile-l.site-pile-dense > :nth-child(17) { left: 89px; bottom: 188px; width: 128px; height: 112px; transform: rotate(-0.5deg); }
.site-pile-r.site-pile-dense > :nth-child(1) { right: -18px; bottom: -19px; width: 118px; height: 118px; transform: rotate(-1.2deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(2) { right: 67px; bottom: -20px; width: 118px; height: 118px; transform: rotate(6.5deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(3) { right: 153px; bottom: -19px; width: 118px; height: 118px; transform: rotate(2deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(4) { right: 238px; bottom: -23px; width: 118px; height: 118px; transform: rotate(-5.3deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(5) { right: 333px; bottom: -15px; width: 118px; height: 118px; transform: rotate(4.3deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(6) { right: 419px; bottom: -21px; width: 118px; height: 118px; transform: rotate(-5.7deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(7) { right: 21px; bottom: 47px; width: 110px; height: 110px; transform: rotate(-2.1deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(8) { right: 103px; bottom: 50px; width: 110px; height: 110px; transform: rotate(-3.6deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(9) { right: 184px; bottom: 49px; width: 110px; height: 110px; transform: rotate(6.1deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(10) { right: 258px; bottom: 49px; width: 110px; height: 110px; transform: rotate(-2.4deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(11) { right: 348px; bottom: 46px; width: 110px; height: 110px; transform: rotate(-6.2deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(12) { right: 58px; bottom: 109px; width: 101px; height: 101px; transform: rotate(-1.1deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(13) { right: 130px; bottom: 110px; width: 101px; height: 101px; transform: rotate(-0.6deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(14) { right: 211px; bottom: 101px; width: 101px; height: 101px; transform: rotate(-1.9deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(15) { right: 84px; bottom: 155px; width: 93px; height: 93px; transform: rotate(-1.7deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(16) { right: 154px; bottom: 148px; width: 93px; height: 93px; transform: rotate(-6.5deg) scaleX(-1); }
.site-pile-r.site-pile-dense > :nth-child(17) { right: 86px; bottom: 195px; width: 128px; height: 112px; transform: rotate(-5.8deg) scaleX(-1); }
.site-pile-l.site-pile-sparse > :nth-child(1) { left: -17px; bottom: -24px; width: 128px; height: 128px; transform: rotate(-3.3deg); }
.site-pile-l.site-pile-sparse > :nth-child(2) { left: 65px; bottom: -17px; width: 128px; height: 128px; transform: rotate(6.1deg); }
.site-pile-l.site-pile-sparse > :nth-child(3) { left: 167px; bottom: -20px; width: 128px; height: 128px; transform: rotate(-5.9deg); }
.site-pile-l.site-pile-sparse > :nth-child(4) { left: 21px; bottom: 51px; width: 119px; height: 119px; transform: rotate(-4.7deg); }
.site-pile-l.site-pile-sparse > :nth-child(5) { left: 110px; bottom: 56px; width: 119px; height: 119px; transform: rotate(0deg); }
.site-pile-l.site-pile-sparse > :nth-child(6) { left: 35px; bottom: 114px; width: 165px; height: 145px; transform: rotate(5.5deg); }
.site-pile-r.site-pile-sparse > :nth-child(1) { right: -20px; bottom: -21px; width: 128px; height: 128px; transform: rotate(-1.2deg) scaleX(-1); }
.site-pile-r.site-pile-sparse > :nth-child(2) { right: 73px; bottom: -22px; width: 128px; height: 128px; transform: rotate(6.5deg) scaleX(-1); }
.site-pile-r.site-pile-sparse > :nth-child(3) { right: 166px; bottom: -21px; width: 128px; height: 128px; transform: rotate(2deg) scaleX(-1); }
.site-pile-r.site-pile-sparse > :nth-child(4) { right: 19px; bottom: 48px; width: 119px; height: 119px; transform: rotate(-5.3deg) scaleX(-1); }
.site-pile-r.site-pile-sparse > :nth-child(5) { right: 115px; bottom: 56px; width: 119px; height: 119px; transform: rotate(4.3deg) scaleX(-1); }
.site-pile-r.site-pile-sparse > :nth-child(6) { right: 37px; bottom: 112px; width: 165px; height: 145px; transform: rotate(-5.7deg) scaleX(-1); }