/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:.7em 1.5em;font-weight:800;font-size:var(--step-0);line-height:1.2;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn--black{background:var(--ue-black);color:var(--ue-yellow)}
.btn--yellow{background:var(--ue-yellow);color:var(--ue-black)}
.btn--block{width:100%;justify-content:center}
/* clip-path 会把 outline 裁掉，按钮的焦点态改用内描边 */
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ue-white)}
.btn--yellow:focus-visible{box-shadow:inset 0 0 0 3px var(--ue-black)}
.link-u{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:800;text-decoration:none;border-bottom:3px solid currentColor}

/* ---------- 顶部导航 ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--ue-yellow);border-bottom:2px solid var(--ue-black)}
.nav__in{display:flex;align-items:center;justify-content:space-between;min-height:64px;position:relative}
.nav__logo{display:inline-flex;align-items:center;min-height:44px}
.nav__logo img{height:28px;width:auto}
.nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{display:block;width:24px;height:3px;background:var(--ue-black)}
.nav__toggle span{position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0}
.nav__toggle span::before{top:-8px}
.nav__toggle span::after{top:8px}
.nav__links{display:none;position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:100%;background:var(--ue-yellow);border-bottom:2px solid var(--ue-black);padding:var(--space-1) var(--gutter) var(--space-3)}
.nav__links.is-open{display:block}
.nav__links a{display:flex;align-items:center;min-height:48px;font-weight:700;text-decoration:none}
.nav__links .nav__cta{display:none}
@media (min-width:960px){
  .nav__toggle{display:none}
  .nav__links{display:flex;align-items:center;gap:var(--space-4);position:static;padding:0;border:0;background:none}
  .nav__links a{min-height:44px}
  .nav__links .nav__cta{display:inline-flex}
}
.nav__links a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--ue-black)}

/* ---------- 主视觉 ---------- */
.hero{padding-bottom:0;padding-top:var(--space-5)}
.hero__grid{display:grid;gap:var(--space-4);align-items:center;padding-bottom:var(--space-5)}
.hero__sub{font-size:var(--step-1);max-width:30em;margin-top:var(--space-3)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.hero__media{aspect-ratio:4/3;background:var(--ue-black);overflow:hidden}
.hero__media>img,.hero__media>video{width:100%;height:100%;object-fit:cover}
.hero__placeholder{display:grid;place-items:center;height:100%}
.hero__placeholder img{width:38%;height:auto}
@media (min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--space-5)}}

.facts{background:var(--ue-black);color:var(--ue-white)}
.facts__in{display:grid}
.facts li{padding:var(--space-3) 0;border-top:1px solid rgba(255,255,255,.16)}
.facts li:first-child{border-top:0}
.facts b{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--step-2);line-height:1.2;color:var(--ue-yellow);letter-spacing:.02em}
.facts span{font-size:var(--step--1)}
@media (min-width:640px){
  .facts__in{grid-template-columns:repeat(3,1fr)}
  .facts li{border-top:0;padding:var(--space-3) var(--space-3);border-left:1px solid rgba(255,255,255,.16)}
  .facts li:first-child{padding-left:0;border-left:0}
}

/* ---------- 课程阶梯 ---------- */
.steps{display:grid;gap:var(--space-2)}
.step{background:var(--ue-white);border:2px solid var(--ue-black);padding:var(--space-3)}
.step--top{background:var(--ue-yellow)}
.step__n{font-family:var(--font-display);font-size:var(--step-2);line-height:1;opacity:.45}
.step__name{font-size:var(--step-2);font-weight:900;line-height:1.2;margin-top:.2em}
.step__tag{font-weight:800;margin-bottom:var(--space-1)}
@media (min-width:960px){
  .steps{grid-template-columns:repeat(3,1fr);align-items:end}
  .step:nth-child(2){padding-top:calc(var(--space-3) + 2rem)}
  .step:nth-child(3){padding-top:calc(var(--space-3) + 4rem)}
}

/* ---------- 卡片 ---------- */
.cards{display:grid;gap:var(--space-3)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--ue-white);border:2px solid var(--ue-black);padding:var(--space-3)}
.card__title{font-size:var(--step-1);font-weight:900;margin-bottom:.4em}
.sec--black .card{background:transparent;border-color:rgba(255,255,255,.3)}
.sec--black .card__title{color:var(--ue-yellow)}

/* ---------- 手风琴（常见问题） ---------- */
.acc{border-top:2px solid var(--ue-black)}
.acc details{border-bottom:2px solid var(--ue-black)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);min-height:64px;padding:var(--space-2) 0;font-weight:800;font-size:var(--step-1);cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:none;font-family:var(--font-display);font-size:var(--step-2);line-height:1;transition:transform .2s ease}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc__body{padding:0 0 var(--space-3);max-width:46em}

/* ---------- 表单 ---------- */
.form{display:grid;gap:var(--space-3)}
.field label,.field legend{display:block;font-weight:700;margin-bottom:.4em;padding:0}
.field input[type=text],.field input[type=tel],.field textarea{width:100%;min-height:52px;padding:.75em 1em;font-size:1rem;background:var(--ue-white);border:2px solid var(--ue-black);border-radius:0;-webkit-appearance:none;appearance:none}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:4px 4px 0 var(--ue-black)}
.sec--black .field input,.sec--black .field textarea{border-color:var(--ue-white)}
.sec--black .field input:focus-visible,.sec--black .field textarea:focus-visible{box-shadow:4px 4px 0 var(--ue-yellow)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0;margin:0;min-width:0}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1em;font-weight:700;background:var(--ue-white);color:var(--ue-black);border:2px solid var(--ue-black);cursor:pointer}
.chip input:checked + span{background:var(--ue-black);color:var(--ue-yellow)}
.sec--black .chip span{border-color:var(--ue-white)}
.sec--black .chip input:checked + span{background:var(--ue-yellow);color:var(--ue-black);border-color:var(--ue-yellow)}
.chip input:focus-visible + span{box-shadow:4px 4px 0 currentColor}
.sec--black .chip input:focus-visible + span{box-shadow:4px 4px 0 var(--ue-yellow)}
.field__err{margin-top:.35em;font-weight:700}
.field__err::before{content:"！"}

/* ---------- 常驻咨询入口 ---------- */
.fab{display:none}
.fab__in{display:inline-block;background:var(--ue-yellow);padding:2px;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.4fr;border-top:2px solid var(--ue-black);padding-bottom:env(safe-area-inset-bottom);background:var(--ue-black)}
.mbar a,.mbar button{display:flex;align-items:center;justify-content:center;gap:.4em;min-height:var(--bar-h);font-weight:800;text-decoration:none;border:0;cursor:pointer}
.mbar__copy{background:var(--ue-white);color:var(--ue-black)}
.mbar__cta{background:var(--ue-black);color:var(--ue-yellow)}
.mbar > :only-child{grid-column:1 / -1}
@media (min-width:960px){
  .mbar{display:none}
  .fab{display:block;position:fixed;right:24px;bottom:24px;z-index:60;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));transition:opacity .2s ease}
}
.fab.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fab{transition:none}}

/* ---------- 页脚 / 提示 ---------- */
.footer{background:var(--ue-black);color:var(--ue-white);padding-top:var(--space-5);padding-bottom:calc(var(--space-5) + var(--bar-h) + env(safe-area-inset-bottom))}
.footer__in{display:grid;gap:var(--space-3)}
.footer__logo img{height:36px;width:auto}
.footer__name{margin-top:var(--space-2);font-weight:700}
.footer__meta{font-size:var(--step--1);color:rgba(255,255,255,.64)}
.footer__meta a{color:var(--ue-yellow);display:inline-flex;align-items:center;min-height:44px}
@media (min-width:960px){.footer__in{grid-template-columns:1fr auto;align-items:end}.footer__meta{text-align:right}.footer{padding-bottom:calc(var(--space-5) + 6rem)}}
.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 24px);z-index:70;max-width:calc(100% - 2rem);transform:translate(-50%,20px);background:var(--ue-black);color:var(--ue-yellow);padding:.7em 1.2em;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 首屏媒体与跑马灯 ---------- */
.hero__media{position:relative}
.hero__tag{position:absolute;left:0;bottom:var(--space-3);margin:0;padding:.55em 1em;background:var(--ue-black);color:var(--ue-white);font-size:var(--step--1);font-weight:700}
.hero__tag span{color:var(--ue-yellow)}
.marquee{overflow:hidden;background:var(--ue-yellow);border-top:2px solid var(--ue-black);border-bottom:2px solid var(--ue-black);padding-block:.3em;font-size:var(--step-3);line-height:1.2}
.marquee__track{display:flex;width:max-content}
.marquee span{flex:none;padding-right:.5em;font-family:var(--font-display);font-weight:900;white-space:nowrap;letter-spacing:.02em}
@keyframes ue-marquee{to{transform:translateX(-50%)}}
.js .marquee__track{animation:ue-marquee 32s linear infinite}
@media (prefers-reduced-motion:reduce){.js .marquee__track{animation:none}}
.motion-paused .marquee__track{animation-play-state:paused}

/* ---------- 动效暂停开关（无 JS 时不可交互、对 AT 隐藏，但保留占位避免 CLS） ---------- */
.motion-toggle{visibility:hidden;display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-3);padding:.5em 1.1em;font-weight:800;font-size:var(--step--1);background:var(--ue-black);color:var(--ue-yellow);border:0;cursor:pointer;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.js .motion-toggle{visibility:visible}
.motion-toggle:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ue-yellow)}

/* ---------- 区块通用 ---------- */
.sec-cta{margin-top:var(--space-4)}
.card__n{font-size:var(--step-3);line-height:1;margin-bottom:var(--space-2);color:var(--ue-yellow)}
.sec--white .card__n,.sec--paper .card__n{color:var(--ue-black)}

/* ---------- 课程卡补充 ---------- */
.step__h{margin:var(--space-3) 0 .4em;font-size:var(--step--1);font-weight:800;letter-spacing:.1em}
.step__meta{margin-top:var(--space-3);padding-top:var(--space-2);border-top:2px solid var(--ue-black);font-weight:700}
.ticks li{position:relative;padding-left:1.4em;margin-bottom:.4em;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.65em;height:.65em;background:var(--ue-black);clip-path:polygon(0 0,100% 0,100% 55%,55% 100%,0 100%)}

/* ---------- 上课方式 ---------- */
.method__grid{display:grid;gap:var(--space-4)}
.method__points{display:grid;gap:var(--space-3)}
.method__points li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);align-items:start;padding-top:var(--space-3);border-top:2px solid var(--ue-black)}
.method__n{min-width:1.1em;font-size:var(--step-3);line-height:1}
.method__imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
.method__img{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ue-black)}
.method__img:first-child{grid-column:1 / -1;aspect-ratio:16/9}
.method__img img{width:100%;height:100%;object-fit:cover}
@media (min-width:640px){.method__points{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){
  .method__grid--media{grid-template-columns:1.1fr .9fr;align-items:start}
  .method__grid--media .method__points{grid-template-columns:1fr}
}

/* ---------- 区块标题行（右侧带链接） ---------- */
.sec-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-4)}

/* ---------- 学员故事卡 ---------- */
.vgrid{display:grid;gap:var(--space-4) var(--space-3)}
@media (min-width:640px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.scard{display:block;text-decoration:none}
.scard__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ue-black)}
.scard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.scard__media--tall img{object-position:50% 88%}
.scard:hover .scard__media img{transform:scale(1.04)}
.scard__ph{width:100%;height:100%;background:var(--ue-black) url("/static/img/uni-yellow.png") center/28% no-repeat}
.scard__play{position:absolute;left:var(--space-2);bottom:var(--space-2);display:grid;place-items:center;width:52px;height:52px;background:var(--ue-yellow);color:var(--ue-black);font-size:1.1rem;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.scard__name{margin-top:var(--space-2);font-size:var(--step--1);font-weight:800;letter-spacing:.12em}
.scard__title{margin-top:.2em;font-size:var(--step-1);font-weight:900;line-height:1.35}
.scard:focus-visible{outline-offset:6px}

/* ---------- 动态卡 ---------- */
.pcard{display:block;padding:var(--space-3);background:var(--ue-white);border:2px solid var(--ue-black);text-decoration:none;transition:transform .15s ease}
.pcard:hover{transform:translateY(-3px)}
.pcard__media{aspect-ratio:16/9;overflow:hidden;margin:calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);background:var(--ue-black)}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__date{display:block;font-size:var(--step-0);letter-spacing:.06em;color:var(--ue-gray-5)}
.pcard__title{margin-top:.3em;font-size:var(--step-1);font-weight:900;line-height:1.35}
.pcard__sum{margin-top:.5em;color:var(--ue-gray-5)}

/* ---------- 师资 ---------- */
.tgrid{display:grid;gap:var(--space-4) var(--space-3)}
@media (min-width:640px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tcard{display:flex;gap:var(--space-3);align-items:flex-start}
.tcard__photo{display:grid;place-items:center;flex:none;width:104px;aspect-ratio:1;overflow:hidden;background:var(--ue-yellow)}
.tcard__photo img{width:100%;height:100%;object-fit:cover}
.tcard__initial{font-size:clamp(2.25rem,9vw,2.75rem);line-height:1;color:var(--ue-black)}
.tcard__body{min-width:0}
.tcard__name{margin-top:0;font-size:var(--step-3);line-height:1.1}
.tcard__role{margin:.2em 0 .6em;font-size:var(--step--1);font-weight:800;letter-spacing:.12em}
.tcard__list{margin:0;padding:0;list-style:none;font-size:var(--step--1);line-height:1.6}
.tcard__list li{position:relative;padding-left:1.1em}
.tcard__list li + li{margin-top:.3em}
.tcard__list li::before{content:"";position:absolute;left:0;top:.55em;width:.5em;height:.5em;background:var(--ue-yellow);outline:1.5px solid var(--ue-black);outline-offset:-1.5px}
@media (min-width:640px){
  .tcard{display:block}
  .tcard__photo{width:auto}
  .tcard__initial{font-size:clamp(5rem,16vw,9rem)}
  .tcard__name{margin-top:var(--space-2)}
}
.tgroup__title{margin:var(--space-5) 0 var(--space-3)}
.sec-head + .tgroup__title{margin-top:0}
@media (min-width:960px){.tgrid--4{grid-template-columns:repeat(4,1fr)}}
.team{margin-top:var(--space-5);padding:var(--space-4);background:var(--ue-black);color:var(--ue-white)}
.team .h3{color:var(--ue-yellow);margin-bottom:.4em}
.team p{max-width:46em}

/* ---------- 咨询区 ---------- */
.contact{display:grid;gap:var(--space-5)}
@media (min-width:960px){.contact{grid-template-columns:1fr 1fr;align-items:start}}
.wx{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.wx__qr{flex:none;width:120px;height:auto;background:var(--ue-white)}
.wx__info{min-width:0}
.wx__who{font-weight:700}
.wx__id{margin:.1em 0 .5em;font-size:clamp(1.15rem,6.5vw,1.75rem);line-height:1.1;color:var(--ue-yellow);overflow-wrap:anywhere}
.wx__hint{margin-top:var(--space-2);max-width:22em;font-size:var(--step--1);color:rgba(255,255,255,.64)}
@media (min-width:640px){
  .wx__qr{width:180px}
  .wx__id{font-size:var(--step-3)}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:var(--step--1);color:rgba(255,255,255,.64)}
.sec--black .field__err{color:var(--ue-yellow)}
.form-done{padding:var(--space-4);background:var(--ue-yellow);color:var(--ue-black)}
.form-done p{margin:.5em 0 var(--space-3)}
.form-done:focus{outline:none}
[hidden]{display:none !important}

/* ---------- 子页面头部 / 空状态 / 返回 ---------- */
.page-head{padding-block:var(--space-5)}
.page-head .h2{max-width:20em}
.back{display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-bottom:var(--space-2);font-weight:700;text-decoration:none}
.back:hover{text-decoration:underline}
.story__meta{margin-bottom:.4em}
.empty{max-width:32em;padding:var(--space-5) 0}
.empty p{margin:.4em 0 var(--space-3)}

/* ---------- 视频播放器 ---------- */
.vplayer{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ue-black)}
.vplayer--tall{aspect-ratio:8/9;max-width:560px}
.vplayer img{width:100%;height:100%;object-fit:cover}
.vplayer video{width:100%;height:100%;object-fit:contain;background:var(--ue-black)}
.vplayer__btn{position:absolute;inset:0;display:grid;place-items:center;width:100%;padding:0;border:0;background:rgba(38,38,38,.28);cursor:pointer}
.vplayer__btn span{display:grid;place-items:center;width:88px;height:88px;background:var(--ue-yellow);color:var(--ue-black);font-size:1.8rem;transition:transform .15s ease;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.vplayer__btn:hover span{transform:scale(1.06)}
.vplayer__btn:focus-visible{outline:none}
.vplayer__btn:focus-visible span{box-shadow:inset 0 0 0 4px var(--ue-black)}

/* ---------- 正文排版 ---------- */
.prose{max-width:42em;margin-top:var(--space-4);font-size:var(--step-0);line-height:1.85}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:var(--step-2);font-weight:900;line-height:1.3;margin-top:1.8em}
.prose h3{font-size:var(--step-1);font-weight:900;margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li{margin-top:.4em}
.prose img{width:100%;height:auto}
.prose blockquote{margin-inline:0;padding:.2em 0 .2em 1.2em;border-left:6px solid var(--ue-yellow);font-weight:700}
.prose a{text-decoration-thickness:2px;text-underline-offset:.2em}

/* ---------- 子页面底部咨询条 ---------- */
.cta-band{padding-block:var(--space-5);border-top:2px solid var(--ue-black)}
.cta-band__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.cta-band p{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.cta-band button.link-u{background:none;border:0;border-bottom:3px solid currentColor;padding:0;cursor:pointer;font:inherit;font-weight:800}

/* ---------- 痛点卡片：演示动画 + 翻面 ---------- */
.pains{display:grid;gap:var(--space-3)}
@media (min-width:960px){.pains{grid-template-columns:repeat(3,1fr)}}
.pain{perspective:1400px}
.pain__inner{height:100%}
.pain__face{display:flex;flex-direction:column;padding:var(--space-3);border:2px solid rgba(255,255,255,.3)}
.pain__front .card__title{color:var(--ue-yellow)}
.pain__back{margin-top:var(--space-2);background:var(--ue-yellow);color:var(--ue-black);border-color:var(--ue-yellow)}
.pain__back{position:relative;overflow:hidden;isolation:isolate}
.pain__ghost{position:absolute;z-index:-1;right:var(--space-2);bottom:-.16em;font-size:clamp(7rem,16vw,11rem);font-weight:900;line-height:1;color:rgba(38,38,38,.09);pointer-events:none}
.pain__answer{margin-top:var(--space-2);font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);font-weight:900;line-height:1.5}
.pain__toggle{align-self:flex-start;min-height:44px;margin-top:auto;padding:var(--space-2) 0 0;background:none;border:0;color:inherit;font-weight:800;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.pain__toggle:focus-visible{outline:3px solid currentColor;outline-offset:4px}
/* 有脚本时两面叠在同一格里做 3D 翻面；没脚本时背面直接排在正面下方 */
.js .pain[data-flip] .pain__inner{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.js .pain[data-flip] .pain__face{grid-area:1 / 1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.js .pain[data-flip] .pain__back{margin-top:0;transform:rotateY(180deg)}
.js .pain.is-flipped .pain__inner{transform:rotateY(180deg)}
.js .pain[data-flip]{cursor:pointer}
/* 减少动效 / 暂停动效：翻面瞬时切换，不转 3D */
@media (prefers-reduced-motion:reduce){
  .js .pain[data-flip] .pain__inner{transition:none}
  .lvstep{transition:none}
}
.motion-paused .pain[data-flip] .pain__inner{transition:none}
.motion-paused .lvstep{transition:none}

.demo{display:flex;flex-direction:column;justify-content:center;gap:.4rem;height:128px;margin-bottom:var(--space-3);padding:var(--space-2);overflow:hidden;background:rgba(255,255,255,.07);font-size:.8125rem;line-height:1.35}
.demo p{margin:0}
.demo__bubble{display:flex;align-items:center;align-self:flex-start;max-width:100%;min-height:2.5em;padding:.5em .9em;background:var(--ue-white);color:var(--ue-black);border-radius:14px 14px 14px 2px;font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:.9375rem;font-weight:700}
.demo__type{display:inline-block;width:21ch;overflow:hidden;white-space:nowrap}
.demo__caret{flex:none;width:2px;height:1.15em;margin-left:2px;background:var(--ue-black)}
.demo__bar{display:grid;grid-template-columns:1.4em 1fr;align-items:center;gap:.7em;font-size:.9375rem;font-weight:800}
.demo__bar span{display:block;height:16px;background:rgba(255,255,255,.16)}
.demo__fill{display:block;height:100%;background:var(--ue-yellow);transform-origin:left center}
.demo__fill--listen{transform:scaleX(.94)}
.demo__fill--speak{transform:scaleX(.1)}
.demo__msg{max-width:88%;padding:.35em .8em;font-weight:700;color:var(--ue-black)}
.demo__msg--a{align-self:flex-start;background:var(--ue-white);border-radius:12px 12px 12px 2px}
.demo__msg--b{align-self:flex-end;background:var(--ue-yellow);border-radius:12px 12px 2px 12px}
.demo__msg--dots{display:flex;align-items:center;gap:4px;min-height:1.9em}
.demo__msg--dots i{width:6px;height:6px;border-radius:50%;background:var(--ue-black);opacity:.35}
@media (prefers-reduced-motion:no-preference){
  .js .demo.is-live .demo__type{animation:ue-type 7s infinite}
  .js .demo.is-live .demo__caret{animation:ue-blink .8s steps(1,end) infinite}
  .js .demo.is-live .demo__fill--listen{animation:ue-listen 6s ease-in-out infinite}
  .js .demo.is-live .demo__fill--speak{animation:ue-speak 6s ease-in-out infinite}
  .js .demo.is-live .demo__msg{animation:ue-msg 8s ease infinite both}
  .js .demo.is-live .demo__msg:nth-child(2){animation-name:ue-msg2}
  .js .demo.is-live .demo__msg:nth-child(3){animation-name:ue-msg3}
  .js .demo.is-live .demo__msg--dots i{animation:ue-dot 1.2s ease-in-out infinite}
  .js .demo.is-live .demo__msg--dots i:nth-child(2){animation-delay:.2s}
  .js .demo.is-live .demo__msg--dots i:nth-child(3){animation-delay:.4s}
  .motion-paused .demo *{animation-play-state:paused !important}
}
@keyframes ue-type{0%{width:0;animation-timing-function:steps(21,end)}40%{width:21ch}58%{width:21ch;animation-timing-function:steps(21,end)}88%,100%{width:0}}
@keyframes ue-blink{0%{opacity:1}50%{opacity:0}}
@keyframes ue-listen{0%{transform:scaleX(0)}55%,90%{transform:scaleX(.94)}100%{transform:scaleX(0)}}
@keyframes ue-speak{0%{transform:scaleX(0)}55%,90%{transform:scaleX(.1)}100%{transform:scaleX(0)}}
@keyframes ue-msg{0%{opacity:0;transform:translateY(8px)}6%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ue-msg2{0%,18%{opacity:0;transform:translateY(8px)}24%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ue-msg3{0%,40%{opacity:0;transform:translateY(8px)}46%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ue-dot{0%,100%{opacity:.25;transform:none}50%{opacity:1;transform:translateY(-2px)}}

/* ---------- 课程级别：台阶切换 + 自测勾选 ---------- */
.levels{display:grid;gap:var(--space-3)}
.levels__stairs{display:none}
.js .levels__stairs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;gap:.5rem;padding-top:16px;border-bottom:6px solid var(--ue-black)}
.lvstep{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.1em;min-height:92px;padding:.7em .8em;background:var(--ue-white);color:var(--ue-black);border:2px solid var(--ue-black);text-align:left;cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.lvstep:nth-child(2){min-height:120px}
.lvstep:nth-child(n+3){min-height:148px}
.lvstep__n{font-size:var(--step-1);line-height:1;opacity:.45}
.lvstep__name{font-size:var(--step-1);font-weight:900;line-height:1.2;white-space:nowrap}
.lvstep__tag{font-size:var(--step--1);font-weight:700}
.lvstep__match{position:absolute;top:-14px;right:-2px;padding:.2em .6em;background:var(--ue-black);color:var(--ue-yellow);font-size:.75rem;font-weight:800;white-space:nowrap}
.lvstep{border-bottom:0}
.lvstep[aria-selected="true"]{background:var(--ue-yellow);transform:translateY(-8px);box-shadow:0 8px 0 var(--ue-black)}
.lvstep:focus-visible{outline:3px solid var(--ue-black);outline-offset:3px}
/* clip-path 会把斜边那段 border 裁掉，所以描边用「黑底 + 内缩 2px 的白色切角」来画；内层切角小 1.17px，斜边才同样是 2px 宽 */
.lvpanel{position:relative;isolation:isolate;padding:calc(var(--space-3) + 2px);background:var(--ue-black)}
.lvpanel::before{content:"";position:absolute;inset:2px;z-index:-1;background:var(--ue-white);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut) + 1.17px),calc(100% - var(--cut) + 1.17px) 100%,0 100%)}
.lvpanel + .lvpanel{margin-top:var(--space-2)}
.lvpanel__title{font-size:var(--step-2);font-weight:900;line-height:1.25}
.lvpanel__title .en{opacity:.35;margin-right:.2em}
.lvpanel__cols{display:grid;gap:0 var(--space-4)}
@media (min-width:640px){.lvpanel__cols{grid-template-columns:1fr 1fr}}
.lvcheck{min-width:0;margin:0;padding:0;border:0}
.lvcheck legend{float:left;width:100%;padding:0}
.lvcheck legend + *{clear:both}
.lvcheck__hint{margin-left:.8em;font-weight:500;letter-spacing:0;opacity:.6}
.lvcheck__item{display:flex;align-items:flex-start;gap:.7em;min-height:44px;margin:0 -.6em;padding:.45em .6em;line-height:1.6;cursor:pointer}
.lvcheck__item:hover{background:rgba(249,208,82,.28)}
.lvcheck__item input{flex:none;display:grid;place-content:center;width:22px;height:22px;margin:.2em 0 0;background:var(--ue-white);border:2px solid var(--ue-black);border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.lvcheck__item input::after{content:"";width:12px;height:12px;background:var(--ue-black);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);transform:scale(0);transition:transform .15s ease}
.lvcheck__item input:checked{background:var(--ue-yellow)}
.lvcheck__item input:checked::after{transform:scale(1)}
.lvcheck__item input:focus-visible{outline:3px solid var(--ue-black);outline-offset:2px}
.js .lvpanel[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .js .lvpanel:not([hidden]){animation:ue-panel .35s ease both}
}
@keyframes ue-panel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:960px){
  .js .levels{grid-template-columns:minmax(340px,1fr) 1.7fr;align-items:end;gap:var(--space-4)}
  .lvstep{min-height:150px;padding:1em}
  .lvstep:nth-child(2){min-height:230px}
  .lvstep:nth-child(n+3){min-height:310px}
  .lvstep__name{font-size:clamp(1.375rem,.6rem + 1.3vw,1.75rem)}
  .lvstep__n{font-size:var(--step-2)}
  .js .lvpanel{min-height:340px}
}