.blend-row.blend-demo{display:block;padding:20px;background:#f8faf4;border:1px solid var(--line);border-radius:14px}.blend-demo-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#7c8a71;margin-bottom:14px}.blend-stages{display:flex;gap:12px;align-items:center}.blend-stage{flex:1;min-width:0;text-align:center;background:white;border:1px solid #dfe7d6;border-radius:12px;padding:12px 6px;transition:background .18s,border-color .18s,box-shadow .18s}.blend-stage small{display:block;font-size:10px;color:#85937c;line-height:1.6}.blend-row .blend-stage strong{display:block;font:38px/1.4 Georgia;color:var(--green);margin-top:5px}.blend-stage-arrow{font-size:20px;color:#a4b096}.blend-tone-tag{display:inline-block;font-size:10px;color:#879671;margin-top:4px}.blend-stage.active{border-color:#7e9a6c;background:#edf4e3;box-shadow:0 0 0 3px #dfead44d}.blend-stage.active strong{animation:blend-read-emphasis .4s ease-out}.blend-stage.active small,.blend-stage.active .blend-tone-tag{color:#45673b}.blend-demo-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.blend-row .blend-demo-controls button{width:auto;min-height:38px;padding:8px 14px;font-size:12px}.blend-status{font-size:12px;color:#6d815e;line-height:1.8;min-height:22px;margin:12px 0 0}.blend-run.is-playing{background:var(--green);color:white;border-color:var(--green)}.blend-stage[aria-current="true"]{position:relative}.blend-stage[aria-current="true"]:after{content:"";display:block;width:18px;height:3px;border-radius:3px;background:#91aa7a;margin:5px auto 0}@keyframes blend-read-emphasis{0%{transform:scale(.93);opacity:.65}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@media(max-width:650px){.blend-row.blend-demo{padding:14px 11px}.blend-stages{gap:5px}.blend-stage{padding:10px 3px;border-radius:9px}.blend-stage small{font-size:8px}.blend-row .blend-stage strong{font-size:28px}.blend-stage-arrow{font-size:15px}.blend-demo-heading{font-size:10px}.blend-row .blend-demo-controls button{font-size:10px;padding:7px 10px;min-height:36px}.blend-status{font-size:10px}}@media(prefers-reduced-motion:reduce){.blend-stage{transition:none}.blend-stage.active strong{animation:none}}
.blend-demo[data-playing-stage="2"] .blend-stage-arrow{color:var(--green);animation:blend-link-flow .6s ease-out}.blend-demo[data-playing-stage="1"] .blend-tone-tag{background:#e0ebd4;border-radius:5px;padding:2px 6px;animation:blend-tone-emphasis .5s ease-out}@keyframes blend-link-flow{from{transform:translateX(-5px);opacity:.25}to{transform:translateX(0);opacity:1}}@keyframes blend-tone-emphasis{from{transform:translateY(3px);opacity:.4}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.blend-demo .blend-stage-arrow,.blend-demo .blend-tone-tag{animation:none!important}}
.blend-row .blend-demo-controls button{margin-left:0}.blend-demo-controls{justify-content:flex-start}
.blend-row .blend-stage{width:auto;height:auto;min-width:0;min-height:110px;margin:0;padding:12px 6px;display:block;flex:1;border:1px solid #dfe7d6;border-radius:12px;background:#fff;cursor:pointer;line-height:1.4}.blend-row .blend-stage:hover:not(:disabled){border-color:#829d72;background:#f4f8ee}.blend-row .blend-stage:focus-visible{outline:3px solid #d6a36a;outline-offset:3px}.blend-row .blend-stage.active{border-color:#7e9a6c;background:#edf4e3;box-shadow:0 0 0 3px #dfead44d}.blend-row .blend-stage:disabled{opacity:.5;cursor:not-allowed}.blend-status:not(.missing-audio){position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:650px){.blend-row .blend-stage{min-height:100px;padding:10px 3px;border-radius:9px}}
.blend-stages{align-items:stretch}.blend-stage-arrow{align-self:center}