body { margin: 0; font-family: Carlito, Calibri, "Segoe UI", Helvetica, Arial, sans-serif; background: #fff; color: #222; }
header.lp-header { max-width: 1645px; margin: 0 auto; padding: 1rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
header.lp-header h1 { font-size: 1.4rem; margin: 0; }
img.logo { display: block; width: 240px; max-width: 100%; }
footer.lp-footer { max-width: 1645px; margin: 32px auto 0; padding: 16px 1rem 24px; border-top: 1px solid #eaecef; font-size: 85%; color: #6a737d; box-sizing: border-box; }
footer.lp-footer a { color: #0366d6; }
#chart { max-width: 1645px; margin: 0 auto; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.15); }
#chart svg { display: block; width: 100%; height: auto; font-family: Carlito, Calibri, "Segoe UI", Helvetica, Arial, sans-serif; }
.section-label { font-size: 15px; font-weight: bold; fill: #000; }
.bloom-title { font-size: 24px; font-style: italic; font-weight: bold; fill: #404040; }
.bloom-title-last { fill: #548235; }
.bloom-term { font-size: 16px; font-weight: bold; fill: #548235; }
.bloom-text { font-size: 16px; fill: #548235; }
.stages-title { font-size: 24px; font-style: italic; font-weight: bold; fill: #1a1acd; }
.stage-text { font-size: 16px; font-style: italic; fill: #7f7f7f; }
.level-label { font-size: 24px; font-style: italic; fill: #009dff; }
.box-label { fill: #000; pointer-events: none; }
.box a { cursor: pointer; }
.box a .box-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.box:hover rect { filter: brightness(1.08); }
.arrow:hover { stroke-width: 5; }
.index { max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
main.about { max-width: 980px; margin: 0 auto; padding: 0 1rem; line-height: 1.5; }
main.about ol { padding-left: 1.5rem; }
p.lp-citation { max-width: 1645px; margin: 16px auto 0; padding: 0 1rem; font-size: 85%; color: #6a737d; box-sizing: border-box; }
main.box-page .back { font-size: 90%; }
main.box-page .description { font-size: 1.1rem; }
main.box-page .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
a.tile { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem; border: 1px solid #335fa8; border-radius: 6px; background: #f4f8fd; color: inherit; text-decoration: none; }
a.tile:hover, a.tile:focus { background: #e3edf9; }
a.tile h3 { margin: 0; font-size: 1.05rem; color: #335fa8; }
a.tile p { margin: 0; font-size: 0.95rem; }
a.tile .tile-url { margin-top: auto; font-size: 80%; color: #6a737d; overflow-wrap: anywhere; }