.phase-art{min-height:560px}.phase-art .art-top{margin-bottom:8px}.phase-art .art-bottom{margin-top:22px;letter-spacing:1.2px}.phase-art button{font:inherit}.phase-art #phase-play{font-size:10px;letter-spacing:.3px;color:white;background:#ffffff12;border:1px solid #ffffff65;padding:6px 10px;min-width:76px}.phase-stage{position:relative;width:76%;margin:20px auto 28px;perspective:1000px;z-index:1}.phase-shadow{position:absolute;inset:0;background:#26c6b8;transform:translate(12px,-8px) rotate(3deg);border:1px solid #ffffff65}.phase-card{position:relative;background:#f8fcff;color:#1462ee;padding:24px 27px;box-shadow:0 18px 38px #003ca13b;min-height:306px;transition:transform .45s}.phase-card.phase-enter{animation:phase-arrive .65s cubic-bezier(.2,.7,.2,1)}.phase-card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;gap:12px}.phase-badge{font-size:7px;color:#007e80}.phase-visual{height:122px;display:flex;justify-content:center;align-items:center;margin:12px 0}.phase-illustration{height:112px;width:230px}.drawing{display:none}.phase-card[data-phase="0"] .drawing-0,.phase-card[data-phase="1"] .drawing-1,.phase-card[data-phase="2"] .drawing-2,.phase-card[data-phase="3"] .drawing-3{display:block;animation:draw-in .7s ease-out}.phase-card[data-phase="2"] .phase-illustration,.phase-card[data-phase="3"] .phase-illustration{color:#00876c}.phase-card h3{font-size:42px;letter-spacing:-2px}.phase-card p{font-size:12px;line-height:1.5;color:#4d6373;margin:9px 0 17px;min-height:18px}.phase-outcome{border-top:1px solid #d7e4eb;padding-top:12px;display:flex;gap:9px;align-items:center;font-size:10px;color:#007b66}.phase-check{font-size:15px}.phase-track{width:82%;margin:0 auto;display:flex;justify-content:space-between;position:relative;z-index:2}.phase-track button{background:transparent;border:0;color:#e7f4ff;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;width:52px;padding:0;position:relative}.phase-track button>span{border-radius:50%;display:grid;place-items:center;width:29px;height:29px;border:1px solid #a4caff;background:#1462ee;color:white;font-size:9px;transition:background .4s,transform .4s}.phase-track button[aria-pressed="true"]>span{background:#8affdc;border-color:#8affdc;color:#065646;transform:scale(1.16);box-shadow:0 0 0 5px #8affdc25}.phase-track button.completed>span{background:#f0fffa;color:#007b66;border-color:#f0fffa}.phase-rail{height:2px;position:absolute;left:26px;right:26px;top:14px;background:#ffffff40}.phase-rail>span{display:block;height:100%;background:#8affdc;width:0;transition:width .65s ease}.phase-art:focus-within #phase-play{border-color:white}@keyframes phase-arrive{from{opacity:.15;transform:translateX(28px) rotateY(-8deg)}to{opacity:1;transform:translateX(0) rotateY(0)}}@keyframes draw-in{from{opacity:.1;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.phase-stage{width:80%}.phase-card{padding:22px}.phase-badge{display:none}}@media(max-width:760px){.phase-art{min-height:540px}.phase-stage{margin:18px auto 25px;width:79%}.phase-card{padding:22px 20px}.phase-card h3{font-size:36px}.phase-card p{min-height:36px}.phase-art .art-bottom{font-size:7px;letter-spacing:.7px}.phase-card-top{font-size:8px}}
