/* The site's parts (RFC 0042 D28 to D36). Every value is a token from tokens.css
   (generated from design/tokens/murmur.tokens.json): a warm ground, Spruce
   bands, a headline's stress in two tones, teammate colours only on AI
   teammates, Figtree only. The site is one warm light look: it does not read
   the visitor's colour scheme (D36). No colour value is written in this file;
   site/scripts/check-site.mjs fails on one. */

:root {
  --ground: var(--palette-spruce-field);
  --card: var(--palette-spruce-raised);
  --ink: var(--palette-spruce-ink);
  --ink-2: var(--palette-spruce-ink2);
  --ink-3: var(--palette-spruce-ink3);
  --band: var(--palette-spruce-side);
  --band-ink: var(--palette-spruce-side-ink);
  --band-ink-2: var(--palette-spruce-side-ink2);
  --band-hover: var(--palette-spruce-side-hover);
  --band-selected: var(--palette-spruce-sel);
  --action: var(--palette-spruce-primary);
  --action-hover: var(--palette-spruce-primary-hover);
  --on-action: var(--palette-spruce-canvas);
  --hairline: color-mix(in srgb, var(--palette-spruce-ink) 10%, transparent);
  --gutter: 24px;
  --measure: 62ch;
  --wrap-width: 1120px; /* the site's own page width, wider than the app's --column-page */
  --nav-height: 72px;
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-behavior: smooth; scrollbar-gutter: stable; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, summary, .btn { touch-action: manipulation; user-select: none; }
button:enabled:active, .btn:active { opacity: .8; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--ground); color: var(--ink);
  font-family: var(--type-family); font-size: var(--type-body-size); line-height: var(--type-body-line-height);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--radius-small); }
.band a:focus-visible, .band button:focus-visible { outline-color: var(--band-ink); }
.credits a:focus-visible, .credits button:focus-visible { outline-color: var(--band-ink); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
.wrap { width: min(var(--wrap-width), calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.skip { position: absolute; left: var(--space-l); top: -48px; padding: var(--space-s) var(--space-l); background: var(--action); color: var(--on-action); border-radius: var(--radius-medium); z-index: 10; }
.skip:focus { top: var(--space-s); }

/* ---------- type: the app's six sizes, and the three the site adds (D30) ---------- */
.hero-title, .section-title { font-weight: 720; letter-spacing: 0; text-wrap: balance; }
.hero-title { font-size: var(--site-hero-size-phone); line-height: var(--site-hero-line-height-phone); }
.section-title { font-size: var(--site-section-size-phone); line-height: var(--site-section-line-height-phone); }
.lead { font-size: var(--site-lead-size-phone); line-height: var(--site-lead-line-height-phone); color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 900px) {
  .hero-title { font-size: var(--site-hero-size); line-height: var(--site-hero-line-height); }
  .section-title { font-size: var(--site-section-size); line-height: var(--site-section-line-height); }
  .lead { font-size: var(--site-lead-size); line-height: var(--site-lead-line-height); }
}
.eyebrow { font-size: var(--type-meta-size); line-height: var(--type-meta-line-height); font-weight: 650; color: var(--ink-2); margin-bottom: var(--space-m); }
.band .eyebrow { color: var(--band-ink-2); }
.title { font-size: var(--type-display-size); line-height: var(--type-display-line-height); font-weight: var(--type-display-weight); }
.subtitle, .card-title { font-size: var(--type-title-size); line-height: var(--type-title-line-height); font-weight: var(--type-title-weight); }
.copy { font-size: var(--type-body-size); line-height: var(--type-body-line-height); color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.copy + .copy { margin-top: var(--space-m); }
.copy b, .copy strong { color: var(--ink); font-weight: 650; }
.small { font-size: var(--type-small-size); line-height: var(--type-small-line-height); color: var(--ink-2); }
.band .copy, .band .lead { color: var(--band-ink-2); }
.band .copy b { color: var(--band-ink); }

/* A headline's stress is two tones: the setup quiet, the payoff in full ink. */
.quiet { color: var(--ink-3); }
.band .quiet { color: var(--band-ink-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-s);
  min-height: 44px; padding: 0 var(--space-xl); border-radius: var(--radius-pill); border: 1px solid transparent;
  font: 650 var(--type-body-size)/1 var(--type-family); cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-quick) var(--motion-curve), border-color var(--motion-quick) var(--motion-curve);
}
.btn-primary { background: var(--action); color: var(--on-action); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--action-hover); } }
.btn-plain { background: var(--card); color: var(--ink); border-color: var(--hairline); }
@media (hover: hover) and (pointer: fine) { .btn-plain:hover { background: var(--ground); } }
.band .btn-primary { background: var(--card); color: var(--action); }
@media (hover: hover) and (pointer: fine) { .band .btn-primary:hover { background: var(--ground); } }
.btn-small { min-height: 36px; padding: 0 var(--space-l); font-size: var(--type-row-size); }

/* ---------- nav ---------- */
.nav { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
.brand { display: inline-flex; align-items: center; gap: var(--space-m); font-weight: 720; font-size: var(--type-title-size); }
.mark-tile { width: 40px; height: 40px; border-radius: var(--radius-medium); background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--elevation-raised); display: grid; place-items: center; }
.mark-tile img { height: 26px; width: auto; }
.nav-links { display: flex; gap: var(--space-xl); align-items: center; font-size: var(--type-row-size); font-weight: 600; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover, .nav-menu > summary:hover { color: var(--ink); } }
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.caret { width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--motion-quick) var(--motion-curve); }
.nav-menu[open] .caret { transform: rotate(-135deg); margin-top: 2px; }
.menu-card { position: absolute; top: calc(100% + 12px); left: -12px; z-index: 5; width: 296px; padding: 6px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-large); box-shadow: var(--elevation-raised); }
.menu-card a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 6px var(--space-m); border-radius: var(--radius-medium); }
@media (hover: hover) and (pointer: fine) { .menu-card a:hover { background: var(--ground); } }
.menu-card b { font-size: var(--type-row-size); line-height: var(--type-row-line-height); font-weight: 650; color: var(--ink); }
.menu-card span { font-size: var(--type-meta-size); line-height: var(--type-meta-line-height); color: var(--ink-2); font-weight: 400; }
.nav-mobile { display: none; position: relative; }
.nav-mobile > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--card); display: grid; place-items: center; }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.burger { position: relative; width: 18px; height: 14px; }
.burger::before, .burger::after, .burger span { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; border-radius: var(--radius-pill); background: currentColor; transition: transform var(--motion-quick) var(--motion-curve), opacity var(--motion-quick) var(--motion-curve); }
.burger::before { top: 0; } .burger span { top: 6px; } .burger::after { top: 12px; }
.nav-mobile[open] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-mobile[open] .burger span { opacity: 0; }
.nav-mobile[open] .burger::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-card { position: absolute; top: calc(100% + 10px); right: 0; z-index: 5; width: min(320px, calc(100vw - 2 * var(--gutter))); padding: var(--space-s); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-large); box-shadow: var(--elevation-raised); }
.mobile-card a { display: flex; align-items: center; min-height: 44px; padding: var(--space-s) var(--space-m); border-radius: var(--radius-medium); font-size: var(--type-row-size); font-weight: 600; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .mobile-card a:hover { color: var(--ink); background: var(--ground); } }
.mobile-card .indent { padding-left: var(--space-xl); }
.mobile-card .label { margin: var(--space-xs) var(--space-m) 2px; font-size: var(--type-meta-size); font-weight: 650; color: var(--ink-3); }
.mobile-card .btn { margin-top: 6px; color: var(--on-action); }
@media (max-width: 960px) { .nav > .nav-links { display: none; } .nav-mobile { display: block; } }
/* A page that opens on a band: the band runs up behind the nav, and the nav sits on it. */
.opens-on-band main > .band:first-child { margin-top: calc(-1 * var(--nav-height)); padding-top: var(--nav-height); }
.opens-on-band .nav-links { color: var(--band-ink-2); }
@media (hover: hover) and (pointer: fine) { .opens-on-band .nav-links a:hover, .opens-on-band .nav-menu > summary:hover { color: var(--band-ink); } }
.opens-on-band .nav-links > .btn-primary { background: var(--card); color: var(--action); }
@media (hover: hover) and (pointer: fine) { .opens-on-band .nav-links > .btn-primary:hover { background: var(--ground); } }
.opens-on-band .nav .mark-tile, .opens-on-band .nav-mobile > summary { border-color: transparent; box-shadow: none; }
.opens-on-band .nav > a:focus-visible, .opens-on-band .nav-links > a:focus-visible, .opens-on-band .nav-menu > summary:focus-visible, .opens-on-band .nav-mobile > summary:focus-visible, .opens-on-band .skip:focus-visible { outline-color: var(--band-ink); }
.opens-on-band .skip { background: var(--card); color: var(--action); }

/* ---------- bands and sections ---------- */
.band { background: var(--band); color: var(--band-ink); }
.section { padding: var(--space-section) 0; }
.section + .section { padding-top: 0; }
.section-head { max-width: 760px; margin-bottom: var(--space-xxl); }
.section-head .lead { margin-top: var(--space-l); }
@media (min-width: 900px) { .section { padding: calc(var(--space-section) * 1.5) 0; } .section + .section { padding-top: 0; } }
.section-band { padding: calc(var(--space-section) * 1.25) 0; }
.band .card { color: var(--ink); }

/* ---------- cards, captures, quotes ---------- */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-large); padding: var(--space-xl); }
.cards { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card .subtitle { margin-bottom: var(--space-s); }

/* A capture of the real app (D32): the picture is the app itself, so the frame only holds it. */
.capture { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-large); box-shadow: var(--elevation-pane); overflow: hidden; }
.capture picture, .capture img { display: block; width: 100%; height: auto; }
.capture figcaption, figure > .caption { font-size: var(--type-small-size); line-height: var(--type-small-line-height); color: var(--ink-2); }
figure.shot { display: grid; gap: var(--space-m); }
@media (max-width: 720px) { .capture { max-width: 340px; margin-inline: auto; } }

/* Two columns: words and a picture, alternating. */
.split { display: grid; gap: var(--space-xxl); align-items: center; }
.split + .split { margin-top: calc(var(--space-section) * 1.25); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--space-xxl) * 2); }
  .split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split.flip > :first-child { order: 2; }
}
.split .copy { margin-top: var(--space-m); }
.split .section-title { font-size: var(--type-display-size); line-height: var(--type-display-line-height); }

/* ---------- people and AI teammates ---------- */
.person { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; flex: none; }
.mark { width: 40px; height: 40px; border-radius: var(--radius-large); display: grid; place-items: center; flex: none; background: var(--mark, var(--palette-teammate-cobalt)); color: var(--palette-teammate-letters); font-weight: 720; font-size: var(--type-row-size); letter-spacing: 0; line-height: 1; }
.mark[data-hue="cobalt"] { --mark: var(--palette-teammate-cobalt); }
.mark[data-hue="plum"] { --mark: var(--palette-teammate-plum); }
.mark[data-hue="teal"] { --mark: var(--palette-teammate-teal); }
.mark[data-hue="ember"] { --mark: var(--palette-teammate-ember); }
.mark[data-hue="leaf"] { --mark: var(--palette-teammate-leaf); }
.mark[data-hue="violet"] { --mark: var(--palette-teammate-violet); }
.mark[data-hue="raspberry"] { --mark: var(--palette-teammate-raspberry); }
.tag { display: inline-block; padding: 0 6px; border-radius: var(--radius-small); background: var(--hairline); font-size: var(--type-tag-size); font-weight: 650; line-height: 1.6; color: var(--ink-2); vertical-align: 1px; }
.band .tag { background: var(--band-hover); color: var(--band-ink-2); }
/* An AI teammate's ring turns while it works (D34). */
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------- rooms ---------- */
.room-list { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.room-list .card { display: grid; gap: var(--space-m); align-content: start; }
.crew { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.crew .person, .crew .mark { width: 32px; height: 32px; font-size: var(--type-small-size); border-radius: var(--radius-medium); }
.crew .person { border-radius: var(--radius-pill); }

/* ---------- the reading pages ---------- */
.doc { max-width: 760px; padding: var(--space-xxl) 0 calc(var(--space-section) * 2); }
.doc h1 { margin-bottom: var(--space-l); }
.doc section { margin-top: calc(var(--space-section) * 1.25); }
.doc section h2 { font-size: var(--type-display-size); line-height: var(--type-display-line-height); font-weight: var(--type-display-weight); margin-bottom: var(--space-s); }
.doc p, .doc ul, .doc ol { font-size: var(--type-body-size); line-height: 1.6; color: var(--ink-2); max-width: var(--measure); margin-top: var(--space-m); text-wrap: pretty; }
.doc p b, .doc li b { color: var(--ink); font-weight: 650; }
.doc a:not(.btn) { color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--action) 35%, transparent); }
@media (hover: hover) and (pointer: fine) { .doc a:not(.btn):hover { text-decoration-color: currentColor; } }
.doc ul, .doc ol { padding-left: 22px; }
.doc li + li { margin-top: var(--space-s); }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-small); padding: 1px 5px; color: var(--ink); }
.doc .actions { display: flex; gap: var(--space-m); flex-wrap: wrap; margin-top: var(--space-xl); }
.doc .table-wrap { overflow-x: auto; margin-top: var(--space-l); border: 1px solid var(--hairline); border-radius: var(--radius-large); background: var(--card); }
.doc table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: var(--type-row-size); line-height: var(--type-row-line-height); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--space-m) var(--space-l); border-bottom: 1px solid var(--hairline); }
.doc tr:last-child td { border-bottom: 0; }
.doc th { font-size: var(--type-meta-size); font-weight: 650; color: var(--ink-2); background: var(--ground); }
.doc td:first-child { font-weight: 650; color: var(--ink); }
.doc td { color: var(--ink-2); }
.doc .doc-title { font-size: var(--site-section-size-phone); line-height: var(--site-section-line-height-phone); }
@media (min-width: 900px) { .doc .doc-title { font-size: var(--site-section-size); line-height: var(--site-section-line-height); } }
@media (max-width: 720px) { .doc td:first-child { white-space: normal; } .doc table { min-width: 0; } }

/* ---------- the footer is the credits (D38) ---------- */
.credits { background: var(--band); color: var(--band-ink); padding: calc(var(--space-section) * 1.25) 0 var(--space-xxl); flex-shrink: 0; }
.credits-head { max-width: 640px; }
.credits-head p { color: var(--band-ink-2); margin-top: var(--space-s); }
.credit-list { list-style: none; padding: 0; margin: var(--space-xxl) 0 0; display: grid; gap: var(--space-l) var(--space-xxl); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.credit-list li { display: flex; gap: var(--space-m); align-items: flex-start; }
.credit-list b { display: block; font-weight: 650; line-height: var(--type-row-line-height); }
.credit-list span { display: block; color: var(--band-ink-2); font-size: var(--type-small-size); line-height: var(--type-small-line-height); }
.credits .tag { display: inline-block; margin-left: 6px; background: var(--band-hover); color: var(--band-ink-2); font-size: var(--type-tag-size); line-height: 1.6; }
.credit-links { margin-top: calc(var(--space-section) * 1.25); padding-top: var(--space-xl); border-top: 1px solid var(--band-hover); display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.credit-links h3 { font-size: var(--type-meta-size); font-weight: 650; color: var(--band-ink-2); margin-bottom: var(--space-s); }
.credit-links a { display: block; padding: var(--space-xs) 0; color: var(--band-ink); font-size: var(--type-row-size); }
@media (hover: hover) and (pointer: fine) { .credit-links a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.credit-links .mail { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
.copy-mail { font: 650 var(--type-small-size)/1 var(--type-family); min-height: 36px; padding: 0 var(--space-m); border-radius: var(--radius-pill); border: 1px solid var(--band-selected); background: transparent; color: var(--band-ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .copy-mail:hover { background: var(--band-hover); } }
.credits .promise { margin-top: var(--space-xxl); color: var(--band-ink-2); font-size: var(--type-small-size); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret, .burger::before, .burger::after, .burger span { transition: none; }
}

@media (pointer: coarse) {
  .btn-small, .copy-mail, .brand, .nav-links > a, .nav-menu > summary { min-height: 44px; }
  .credit-links a { min-height: 44px; display: flex; align-items: center; }
}
@media (forced-colors: active) {
  .btn, .copy-mail, .mark, .initials { border: 1px solid ButtonText; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: Highlight; }
}

.initials { width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; flex: none; background: var(--band-selected); color: var(--band-ink); font-weight: 720; font-size: var(--type-row-size); line-height: 1; }
.credit-list li > .initials { display: grid; color: var(--band-ink); }
.band .card .copy { color: var(--ink-2); }
.band .card .copy b { color: var(--ink); }
.credit-list b { display: flex; align-items: center; }

/* Signed-off cards: words beside the part of the screen they talk about. */
.cards.rows { grid-template-columns: 1fr; }
.cards.rows .card.row { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 900px) { .cards.rows .card.row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xxl); padding: var(--space-xl); } }
/* On a band the rows sit on the band itself: words in the band's ink, the picture alone on its own card. */
.band .cards.rows { gap: calc(var(--space-section) * 1.25); }
.band .cards.rows .card.row { background: none; border: 0; padding: 0; color: var(--band-ink); }
.band .cards.rows .card.row .copy { color: var(--band-ink-2); }
.band .cards.rows .capture { border-color: transparent; padding: var(--space-l); }
.actions-row { display: flex; gap: var(--space-m); flex-wrap: wrap; margin-top: var(--space-xl); }
/* A story told by the minute. */
.timeline { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; gap: var(--space-l); }
.timeline li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-m); font-size: var(--type-body-size); line-height: 1.5; color: var(--ink-2); }
.timeline time { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.timeline b { color: var(--ink); font-weight: 650; }
/* The 404: the tree, with one turned leaf on the ground (RFC 0042 D46). */
.lost { display: grid; gap: var(--space-xl); align-items: center; padding: var(--space-xl) 0; }
.lost-tree { width: min(100%, 20rem); height: auto; justify-self: center; }
@media (min-width: 900px) { .lost { grid-template-columns: 20rem 1fr; gap: var(--space-xxl); } }
.credit-list li > .mark { display: grid; color: var(--palette-teammate-letters); }

/* The tree on the 404 (generated into partials/tree.html): its colours are the site's tokens, mixed. */
.lost-tree {
  --tree-wood: color-mix(in srgb, var(--palette-teammate-clay) 55%, var(--palette-spruce-ink));
  --tree-green: var(--palette-spruce-primary);
}
.lost-tree .tree-leaf-0 { fill: color-mix(in srgb, var(--tree-green) 80%, var(--palette-teammate-leaf)); }
.lost-tree .tree-leaf-1 { fill: color-mix(in srgb, var(--palette-teammate-leaf) 85%, var(--tree-green)); }
.lost-tree .tree-leaf-2 { fill: color-mix(in srgb, var(--palette-spruce-ok) 70%, var(--palette-teammate-leaf)); }
.lost-tree .tree-leaf-3 { fill: color-mix(in srgb, var(--palette-spruce-ok) 55%, var(--palette-spruce-canvas)); }
.lost-tree .tree-limb { stroke: var(--tree-wood); }
.lost-tree .tree-wood-bark { fill: var(--tree-wood); }
.lost-tree .tree-wood-lit { fill: color-mix(in srgb, color-mix(in srgb, var(--tree-wood) 65%, var(--palette-spruce-canvas)) 75%, transparent); }
.lost-tree .tree-wood-shade { fill: color-mix(in srgb, color-mix(in srgb, var(--tree-wood) 60%, var(--palette-spruce-ink)) 60%, transparent); }
.lost-tree .tree-vein { stroke: color-mix(in srgb, var(--tree-green) 28%, transparent); }
.lost-tree .tree-soil { stop-color: var(--palette-spruce-field); }
.lost-tree .tree-root { stop-color: color-mix(in srgb, var(--tree-wood) 60%, var(--palette-spruce-field)); }
.lost-tree .tree-ink { stop-color: var(--palette-spruce-ink); }
.lost-tree .tree-turned-stalk { stroke: var(--tree-wood); }
.lost-tree .tree-turned-side { fill: var(--palette-teammate-ember); }
.lost-tree .tree-turned-outer { fill: var(--palette-spruce-highlight-strong); }
.lost-tree .tree-turned-inner { fill: color-mix(in srgb, var(--palette-teammate-ember) 60%, var(--palette-spruce-highlight-strong)); }