/* <corpus-tree> — hub hero tree. Tokens follow the hub (product-design 2026 green). */
.tree-band { position: relative; padding: 8px 0 56px; }
.tree-band > .wrap { position: relative; padding: 26px 28px 24px; border-radius: 24px;
  background: color-mix(in srgb, var(--product-surface, #fffefb) 92%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-soft, rgba(23,40,32,.08));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 640px) { .tree-band > .wrap { padding: 18px 14px; border-radius: 18px; } }
.tree-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 28px; margin-bottom: 16px; }
.tree-kicker { font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--product-accent, #176557); }
.tree-title { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; text-wrap: balance; }
.tree-title em { font-style: italic; color: var(--product-accent, #176557); }
.tree-read { max-width: 470px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft, var(--product-muted)); }
.tree-read b { color: var(--ink); font-weight: 600; }

corpus-tree { display: block; position: relative; --bark: #6b4f3a; --ink-t: var(--ink, #172820); }
html[data-theme="dark"] corpus-tree { --bark: #8a6c55; }

/* controls */
.ct-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.ct-topic { display: inline-flex; align-items: center; gap: 10px; }
.ct-topic span { font: 600 10.5px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--product-accent, #176557); }
.ct-topic input { width: 240px; max-width: 58vw; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line, rgba(23,40,32,.14));
  background: var(--product-surface, #fffefb); color: var(--ink); font: 500 14px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; }
.ct-topic input:focus-visible { outline: 2px solid var(--product-accent, #176557); outline-offset: 2px; }
.ct-topic em { font: italic 12px/1.3 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink-faint); }
.ct-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct-try span { font: 600 10.5px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
.ct-try button, .ct-also button { font: 500 12.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; padding: 7px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, rgba(23,40,32,.14)); background: transparent; color: var(--ink-soft); transition: background .2s, color .2s, border-color .2s; }
.ct-try button:hover, .ct-also button:hover { border-color: var(--product-accent, #176557); color: var(--ink); }
.ct-try button[aria-pressed="true"] { background: var(--product-accent, #176557); border-color: var(--product-accent, #176557); color: #fff; }

/* stage + reading */
.ct-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .ct-body { grid-template-columns: minmax(0, 1fr); } }
.ct-stage { position: relative; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, #8fbf7a 13%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, #dceee4 35%, var(--product-surface, #fffefb)), var(--product-surface, #fffefb) 70%);
  box-shadow: inset 0 0 0 1px var(--line-soft, rgba(23,40,32,.08)), 0 30px 60px -40px rgba(15,77,66,.35); }
html[data-theme="dark"] .ct-stage { background:
    radial-gradient(90% 70% at 50% 35%, rgba(111,170,120,.12), transparent 70%),
    linear-gradient(180deg, #17221d, var(--product-surface, #141a17) 75%); }
.ct-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ct-loading { position: absolute; right: 14px; top: 12px; font: 500 11px/1 'IBM Plex Mono', monospace; color: var(--ink-faint); }

.ct-grid line { stroke: var(--line-soft, rgba(23,40,32,.08)); stroke-dasharray: 2 5; }
.ct-grid text, .ct-note { font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace; fill: var(--ink-faint, #8B8297); letter-spacing: .04em; }
.ct-ground { stroke: color-mix(in srgb, var(--bark) 45%, transparent); stroke-width: 1.2; }
.ct-roots path { fill: none; stroke: var(--bark); opacity: .5; stroke-linecap: round; }
.ct-trunk-body { filter: drop-shadow(0 6px 10px rgba(40,25,10,.18)); }
.ct-rings line { stroke: rgba(255,240,215,.42); stroke-width: 1.1; stroke-linecap: round; }
.ct-trunk { cursor: ns-resize; }
.ct-limb { fill: none; stroke: var(--bark); stroke-linecap: round; transition: stroke .3s, opacity .3s; }
.ct-leaf { stroke: rgba(255,255,255,.35); stroke-width: .4; transition: opacity .3s, filter .3s; }
.ct-leaf.is-on { stroke: var(--ink-t); stroke-width: 1.4; filter: brightness(1.08); }
.ct-branch { cursor: pointer; }
.ct-label { font: 600 12px/1 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--ink-t); paint-order: stroke;
  stroke: color-mix(in srgb, var(--product-surface, #fffefb) 85%, transparent); stroke-width: 3.5px; stroke-linejoin: round; }
.ct-label-n { font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace; fill: var(--ink-faint); paint-order: stroke;
  stroke: color-mix(in srgb, var(--product-surface, #fffefb) 85%, transparent); stroke-width: 3px; }
.ct-svg.is-reading .ct-branch { opacity: .22; transition: opacity .3s; }
.ct-svg.is-reading .ct-branch.is-on { opacity: 1; }
.ct-svg.is-reading .ct-branch.is-on .ct-limb { stroke: color-mix(in srgb, var(--bark) 70%, #000); }
.ct-name { font: 500 21px/1 'Fraunces', Georgia, serif; fill: var(--ink-t); letter-spacing: -.01em; }
.ct-sub { font: 500 10.5px/1 'IBM Plex Mono', ui-monospace, monospace; fill: var(--ink-faint); letter-spacing: .03em; }
@media (max-width: 560px) { .ct-name { font-size: 17px; } .ct-label { font-size: 11px; } }
.ct-seed ellipse { fill: #a77b4c; stroke: rgba(0,0,0,.15); }
.ct-sprout { fill: none; stroke: #6aa864; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 2 2; }
.ct-seed-l { font: 500 10.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--ink-soft); }
.ct-seed:hover .ct-seed-l, .ct-seed:focus .ct-seed-l { fill: var(--product-accent, #176557); text-decoration: underline; }
.ct-seed:focus-visible { outline: none; }
.ct-seed:focus-visible ellipse { stroke: var(--product-accent, #176557); stroke-width: 2; }

/* the grow — trunk rises, limbs draw out in the year they sprouted, leaves open by their year */
corpus-tree.is-growing .ct-trunk-body { animation: ct-rise 1.1s cubic-bezier(.22, 1, .36, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
corpus-tree.is-growing .ct-rings line { animation: ct-fade .5s ease both; animation-delay: var(--d); }
corpus-tree.is-growing .ct-limb { stroke-dasharray: 1; animation: ct-draw .9s cubic-bezier(.3, .7, .2, 1) both; animation-delay: var(--d); }
corpus-tree.is-growing .ct-leaf { animation: ct-fade .7s ease both; animation-delay: calc(var(--d) + .6s); }
corpus-tree.is-growing .ct-label, corpus-tree.is-growing .ct-label-n { animation: ct-fade .6s ease both; animation-delay: calc(var(--d) + .7s); }
corpus-tree.is-growing .ct-seeds { animation: ct-fade .8s ease 3.4s both; }
@keyframes ct-rise { from { transform: scaleY(.04); } to { transform: scaleY(1); } }
@keyframes ct-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ct-fade { from { opacity: 0; } to { opacity: 1; } }

.ct-tip { position: absolute; left: 0; top: 0; z-index: 2; max-width: 320px; padding: 10px 12px; border-radius: 12px; pointer-events: none;
  background: color-mix(in srgb, var(--product-surface, #fffefb) 92%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--line, rgba(23,40,32,.14)), 0 14px 30px -14px rgba(15,40,30,.35); font-size: 12.5px; line-height: 1.45; }
.ct-tip-y { font: 600 10.5px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .05em; color: var(--product-accent, #176557); margin-bottom: 4px; }
.ct-tip-y span { color: var(--ink-faint); font-weight: 500; }
.ct-tip-t { font-family: 'Fraunces', Georgia, serif; font-size: 14px; line-height: 1.3; color: var(--ink); }
.ct-tip-j { margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); font-style: italic; }
.ct-tip-n b { font-weight: 700; }
.ct-tip-hint { margin-top: 6px; font-size: 11px; color: var(--ink-faint); }

.ct-read { padding: 18px 18px 16px; border-radius: 16px; background: var(--product-surface, #fffefb);
  box-shadow: inset 0 0 0 1px var(--line-soft, rgba(23,40,32,.08)); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ct-k { font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--product-accent, #176557); }
.ct-k span { letter-spacing: .02em; text-transform: none; color: var(--ink-faint); font-weight: 500; }
.ct-k2 { margin-top: 16px; margin-bottom: 7px; }
.ct-read h3 { font: 500 22px/1.15 'Fraunces', Georgia, serif; color: var(--ink); margin: 8px 0 4px; letter-spacing: -.01em; }
.ct-meta { font-size: 12px; color: var(--ink-faint); }
.ct-facts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.ct-facts li { padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--product-accent, #176557) 35%, transparent); }
.ct-facts b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.ct-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ct-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ct-list button { all: unset; cursor: pointer; padding: 4px 0; color: var(--ink); font-weight: 500; border-bottom: 1px dashed transparent; }
.ct-list button:hover, .ct-list button:focus-visible { border-bottom-color: currentColor; color: var(--product-accent, #176557); }
.ct-list a { font: 500 11.5px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.ct-list a:hover { color: var(--product-accent, #176557); text-decoration: underline; }
.ct-seedlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.ct-seedlist a { color: var(--ink); text-decoration: none; font-weight: 500; }
.ct-seedlist a span { color: var(--ink-faint); font-weight: 400; font-size: 11.5px; }
.ct-seedlist a:hover { color: var(--product-accent, #176557); }
.ct-also { margin-top: 12px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ct-open { display: inline-block; margin-top: 16px; padding: 9px 14px; border-radius: 10px; background: var(--product-accent, #176557); color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; }
.ct-open:hover { filter: brightness(1.08); }
.ct-honest { margin-top: 12px; font-size: 11px; line-height: 1.45; color: var(--ink-faint); }

.ct-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 12px; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 11px/1.3 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink-faint); }
.ct-lg { display: inline-flex; align-items: center; gap: 6px; }
.ct-lg svg { color: #6aa864; }
.ct-ramp { display: inline-block; width: 72px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #b8692f, #cf9440, #bfae46, #86ad55, #3f9a62, #16785a); }
.ct-seed-k { display: inline-block; width: 9px; height: 6px; border-radius: 50%; background: #a77b4c; transform: rotate(-24deg); }
.ct-grow { font: 600 12.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; padding: 8px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--product-accent, #176557); background: transparent; color: var(--product-accent, #176557); }
.ct-grow:hover { background: color-mix(in srgb, var(--product-accent, #176557) 9%, transparent); }
.ct-canopy { fill: #7fb36a; opacity: .16; }
html[data-theme="dark"] .ct-canopy { fill: #8fd07a; opacity: .12; }
corpus-tree.is-growing .ct-canopy { animation: ct-fade .8s ease both; animation-delay: calc(var(--d, 1s) + .4s); }