/* V10: an open presentation stage, consistent Codex steps, model ornaments. */
.extension-experiences .extension-case,.course-page .auto-practice .case-visual{position:relative;border:0;background:transparent;box-shadow:none;padding-left:38px;padding-right:38px}
.extension-experiences .extension-case::before,.course-page .auto-practice .case-visual::before{content:"";position:absolute;inset:-25px -15px -12px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 48% 46%,#f9fcffd6 0%,#e8f2f9a3 46%,#e8f2f900 72%)}
.extension-experiences .extension-case::after,.course-page .auto-practice .case-visual::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:6%;right:6%;bottom:7px;height:55px;filter:blur(15px);background:radial-gradient(ellipse at 23% 50%,#7094b02b,transparent 38%),radial-gradient(ellipse at 78% 50%,#7094b033,transparent 39%);transform:scaleY(.6)}
.codex-axis{width:100%;max-width:100%;margin:auto}
.codex-axis>h4{font-size:23px;margin:4px 0 20px}
.codex-axis>.codex-steps{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
.codex-axis .codex-steps>button{display:grid;grid-template-columns:20px minmax(0,1fr);gap:5px;padding:12px 6px;width:100%;min-height:50px;border:0;font:inherit;text-align:left;position:relative;border-radius:12px;background:transparent;color:#7691a7;cursor:pointer;transition:transform .6s,background .6s,color .6s}
.codex-axis .codex-steps>button>span{font-size:13px;color:#9cb1c1;font-weight:400}
.codex-axis .codex-steps>button>strong{font-size:16px;font-weight:500;line-height:1.6;white-space:nowrap}
.codex-axis .codex-steps>button:is([aria-pressed=true],.active){background:#f7fcffe8;color:#244f6d;transform:scale(1.06);box-shadow:0 8px 24px #54739115}
.codex-axis .codex-steps>button:is([aria-pressed=true],.active)>strong{font-weight:650}
.codex-axis .codex-steps>button:focus-visible{outline:2px solid #7298b4;outline-offset:3px}
.skill-explanation ul{margin:16px 0;padding-left:21px;color:#68849a;line-height:1.85}
.course-page .model-carousel{margin-bottom:14px}
.course-page .gallery-controls{margin-top:14px;margin-bottom:14px}
.course-page .model-gallery{margin-bottom:22px}
.course-page .model-information{margin-top:0}
.model-branches{height:40px}
.model-character{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform}
.whale-character{width:74px;height:46px;filter:drop-shadow(0 4px 6px #2d6cb532)}
.whale-character svg{width:100%;height:100%;overflow:visible}
.whale-tail{transform-origin:27px 35px}.whale-fin{transform-origin:57px 42px}
.whale-bubble{position:absolute;left:76%;top:1px;border:1px solid #85c5f9bd;width:5px;height:5px;border-radius:50%;opacity:0}
.whale-bubble.bubble-two{left:85%;top:9px;width:3px;height:3px;animation-delay:1.2s}
.model-motion-active .whale-tail{animation:whale-tail 1.5s ease-in-out infinite alternate}
.model-motion-active .whale-fin{animation:whale-tail 2.1s ease-in-out infinite alternate-reverse}
.model-motion-active .whale-bubble{animation:whale-bubble 2.6s ease-out infinite}
.doubao-perch{width:88px;height:72px;filter:drop-shadow(0 4px 5px #35597526)}
.perch-head{width:57px;height:57px;position:absolute;left:15px;top:0;border-radius:50%;z-index:2}
.perch-shoulders{position:absolute;left:7px;top:42px;width:74px;height:20px;border-radius:50% 50% 10px 10px;background:linear-gradient(160deg,#313f50,#1f2c3b)}
.perch-arm{position:absolute;top:53px;width:28px;height:13px;border-radius:8px;background:linear-gradient(#ffe1d3,#edb9a4);z-index:3;box-shadow:0 3px 3px #33566b13}
.arm-left{left:3px;transform:rotate(-8deg)}.arm-right{right:3px;transform:rotate(8deg)}
.brand-comet{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f5fbffc7;box-shadow:0 0 14px #f5fbffb3}
.comet-mark{width:27px;height:27px;object-fit:contain;position:relative;z-index:1}
.brand-comet>i{position:absolute;inset:-7px;border:1px solid var(--model-color);border-radius:50%;opacity:.3;border-left-color:transparent;border-right-color:transparent}
.model-motion-active .brand-comet>i{animation:brand-orbit 7s linear infinite}
.model-information .branch-panel{animation:none}
.model-information.model-motion-active .branch-panel{animation:model-card-arrive .75s cubic-bezier(.2,.7,.2,1) both}
.model-information.model-motion-active .branch-panel:nth-child(2){animation-delay:.09s}
.model-information.model-motion-active .branch-panel:nth-child(3){animation-delay:.18s}
.model-information .branch-panel::after{content:"";pointer-events:none;position:absolute;inset:-1px;border:1px solid var(--model-color);border-radius:inherit;opacity:0}
.model-motion-active .branch-panel::after{animation:model-card-light 2.3s ease both}
.model-motion-active .branch-panel:nth-child(2)::after{animation-delay:.16s}
.model-motion-active .branch-panel:nth-child(3)::after{animation-delay:.32s}
.course-page .capability-track{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:48px 0 0;padding:23px 0 25px;width:100%;border-bottom:1px solid #9bb4c44d}
.course-page .capability-track>div{flex:0 0 auto;display:flex;align-items:baseline;gap:15px}
.course-page .capability-track>div>span{font-size:13px;font-weight:400;color:#94aabd}
.course-page .capability-track strong{font-size:18px;font-weight:500;color:#365b74}
.course-page .capability-track>i{display:block;font-size:19px;font-style:normal;color:#b3c7d6;margin:0}
@keyframes whale-tail{from{transform:rotate(-7deg)}to{transform:rotate(8deg)}}
@keyframes whale-bubble{0%{opacity:0;transform:translateY(0) scale(.7)}25%{opacity:.6}100%{opacity:0;transform:translateY(-20px) scale(1.3)}}
@keyframes brand-orbit{to{transform:rotate(360deg)}}
@keyframes model-card-arrive{from{opacity:.6;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes model-card-light{0%,100%{opacity:0}26%,46%{opacity:.4}}
@media(min-width:1700px){.extension-experiences .extension-case,.course-page .auto-practice .case-visual{padding-left:48px;padding-right:48px}.codex-axis>h4{font-size:26px}.codex-axis .codex-steps>button>strong{font-size:18px}.course-page .capability-track strong{font-size:23px}.course-page .capability-track>div>span{font-size:16px}}
@media(max-width:1100px){.extension-experiences .extension-case,.course-page .auto-practice .case-visual{padding-left:28px;padding-right:28px}.codex-axis .codex-steps>button>strong{font-size:14px}.course-page .capability-track{gap:14px}.course-page .capability-track>div{gap:9px}.course-page .capability-track strong{font-size:16px}}
@media(max-width:800px){.extension-experiences .extension-case,.course-page .auto-practice .case-visual{padding:25px 18px}.codex-axis{width:100%;max-width:280px!important}.codex-axis .codex-steps>button>strong{font-size:16px}.skill-report-case>.extension-axis{transform:none!important;box-shadow:none!important}.course-page .capability-track{display:grid;grid-template-columns:1fr 1fr;row-gap:20px}.course-page .capability-track>div:nth-of-type(even){justify-self:end}.course-page .capability-track>i{display:none}.course-page .model-gallery{margin-bottom:28px}.course-page .family-tabs{row-gap:8px}}
@media(prefers-reduced-motion:reduce){.model-character,.model-character *,.model-information .branch-panel,.model-information .branch-panel::after{animation:none!important}.model-information .branch-panel{opacity:1;transform:none}}