.tree-rings{display:block;width:100%;height:auto;overflow:visible}
.tree-ring{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:.52;transition:stroke .35s,opacity .35s,stroke-width .35s}
.ring-heart{fill:var(--amber)}
.ring-story{min-width:0;align-self:center;padding:0 0 4px;color:var(--sage)}
.ring-story-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:35px;font-size:9px;letter-spacing:.16em;border-bottom:1px solid #456156;padding-bottom:12px}
.ring-replay{display:flex;align-items:center;gap:8px;color:var(--sage);font-size:11px;letter-spacing:0;background:none;border:0;padding:5px 0 5px 10px;min-height:32px}
.ring-replay span{font-size:19px;line-height:1}
.ring-replay:hover{color:var(--amber)}
.ring-stage{position:relative;width:100%;max-width:520px;margin:8px auto 0}
.ring-caption{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:max-content;max-width:85%;padding:14px 18px;background:var(--forest);color:var(--paper);font-size:29px;font-weight:600;line-height:1.2;letter-spacing:-.045em;text-align:center}
.ring-caption span{color:var(--sage)}
.ring-choices{display:grid;grid-template-columns:1fr 1.15fr 1.1fr;border-top:1px solid #456156;border-bottom:1px solid #456156;gap:12px}
.ring-choices button{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;border:0;background:none;color:#d0dccc;font-size:12px;min-height:52px;padding:12px 0;text-align:left;line-height:1.4}
.ring-choices button span{font-size:9px;color:#a8bca6}
.ring-choices button[aria-pressed=true]{color:var(--amber)}
.ring-choices button[aria-pressed=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--amber)}
.ring-choices button:hover{color:var(--paper)}
.ring-story-note{font-size:12px;line-height:1.65;color:#d0dccc;min-height:40px;margin:16px 0 0;max-width:480px}
[data-active-ring="0"] [data-ring-band="0"], [data-active-ring="1"] [data-ring-band="1"], [data-active-ring="2"] [data-ring-band="2"]{stroke:var(--amber);opacity:1;stroke-width:2}
.is-drawing .tree-ring{animation:ring-draw 2.7s cubic-bezier(.22,.65,.3,1) var(--ring-delay) both}
@keyframes ring-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.invite{position:relative;isolation:isolate;overflow:hidden}
.invite-rings{position:absolute;width:480px;left:-180px;top:50%;transform:translateY(-50%);color:var(--sage);opacity:.22;pointer-events:none;z-index:-1}
.invite-grid{position:relative}
.tool-hero:has(.tool-ring-emblem){position:relative}
.tool-ring-emblem{position:absolute;width:230px;right:15px;top:125px;color:var(--forest);pointer-events:none}
.tool-ring-emblem .tree-ring{stroke-width:4;opacity:.55}
.tool-ring-emblem .tree-ring:last-of-type{stroke:var(--amber);opacity:1}
.tool-hero:has(.tool-ring-emblem) h1,.tool-hero:has(.tool-ring-emblem) .lead{max-width:calc(100% - 280px)}
.assessment-progress-heading{display:flex;align-items:center;gap:22px;margin-bottom:32px}
.assessment-progress-rings{width:76px;flex-shrink:0;color:#a6b59d}
.assessment-progress-rings .tree-ring{stroke-width:5;opacity:.45}
.assessment-progress-rings .tree-ring.is-complete{stroke:var(--forest);opacity:1}
.assessment-progress-rings .tree-ring.is-current{stroke:#936112;opacity:1;stroke-width:7}
.assessment-progress-copy{flex:1;min-width:0}
.assessment-progress-copy .progress-head{margin-bottom:10px}
.assessment-progress-copy progress{margin:0;display:block}
@media(max-width:1120px){.ring-caption{font-size:25px;padding:12px}.ring-choices{gap:8px}.ring-choices button{font-size:11px;gap:6px}.ring-story-note{font-size:11px;min-height:54px}.tool-ring-emblem{width:175px}.tool-hero:has(.tool-ring-emblem) h1,.tool-hero:has(.tool-ring-emblem) .lead{max-width:calc(100% - 215px)}}
@media(max-width:900px){.ring-caption{font-size:22px}.ring-choices button{flex-direction:column;align-items:flex-start;gap:4px}.ring-choices button span{font-size:8px}.ring-story-heading{font-size:8px;letter-spacing:.1em}.ring-story-note{min-height:58px}.tool-ring-emblem{width:145px;top:140px}.tool-hero:has(.tool-ring-emblem) h1,.tool-hero:has(.tool-ring-emblem) .lead{max-width:calc(100% - 175px)}}
@media(max-width:700px){.ring-story{padding-top:15px}.ring-stage{max-width:430px;margin:10px auto}.ring-caption{font-size:26px;padding:12px 10px}.ring-story-heading{font-size:9px}.ring-choices{gap:12px}.ring-choices button{font-size:12px;min-height:61px;gap:5px}.ring-choices button span{font-size:9px}.ring-story-note{font-size:12px;min-height:60px;margin-top:17px}.invite-rings{left:auto;right:-135px;width:380px;top:115px;opacity:.17}.tool-ring-emblem{position:static;width:78px;margin:0 0 24px}.tool-hero:has(.tool-ring-emblem) h1,.tool-hero:has(.tool-ring-emblem) .lead{max-width:100%}.assessment-progress-heading{gap:15px;margin-bottom:25px}.assessment-progress-rings{width:58px}.assessment-progress-copy .progress-head{flex-direction:column;gap:4px;font-size:9px}.assessment-progress-copy .progress-head span:last-child{font-size:8px}}
@media(prefers-reduced-motion:reduce){.tree-ring{transition:none!important;animation:none!important}.ring-replay{display:none!important}}
@media print{.tree-ring{animation:none!important}.ring-story-heading button,.ring-choices,.tool-ring-emblem{display:none!important}.assessment-progress-rings{color:black}}
