.case-chapter-nav{position:sticky;top:var(--case-header-height,72px);z-index:15;border-bottom:1px solid #e6dfda;background:#fffdf8ed;backdrop-filter:blur(12px)}
.case-chapter-inner{display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:none;padding-block:7px}
.case-chapter-inner::-webkit-scrollbar{display:none}
.case-chapter-inner a{flex:none;padding:8px 13px;border-radius:8px;color:#686174;font-size:11px;font-weight:800;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.case-chapter-inner a:hover,.case-chapter-inner a:focus-visible{background:#f0eafd;color:#5546a2;transform:translateY(-1px)}
.case-chapter-inner a[aria-current="location"]{background:#eae3fb;color:#5747a9}
#case-start,#case-problem,#case-screens,#case-contact{scroll-margin-top:calc(var(--case-header-height,72px) + 60px)}
.case-detail-image{position:relative}
.case-hotspot{position:absolute;z-index:2;display:grid;place-items:center;width:43px;height:43px;padding:0;border:2px solid #fff;border-radius:50%;background:#6757cf;color:#fff;font-size:27px;line-height:1;box-shadow:0 0 0 6px #6757cf44,0 8px 20px #302c4866;transform:translate(-50%,-50%);cursor:pointer;transition:box-shadow .2s,scale .2s}
.case-hotspot:hover,.case-hotspot:focus-visible{scale:1.12;box-shadow:0 0 0 10px #6757cf44,0 8px 20px #302c4866}
.case-zoom-dialog{width:min(1050px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:16px;border:1px solid #302c48;border-radius:17px;background:#fffdf8;box-shadow:8px 9px 0 #302c48;overflow:auto}
.case-zoom-dialog::backdrop{background:#17132dbc;backdrop-filter:blur(4px)}
.case-zoom-dialog img{display:block;width:100%;height:auto;max-height:67vh;object-fit:contain;object-position:top;border-radius:10px;background:#fff}
.case-zoom-dialog>div{padding:12px 8px 4px}
.case-zoom-dialog h2{margin:0 0 4px;font-family:Nunito,Manrope,sans-serif;font-size:22px}
.case-zoom-dialog p{margin:0;color:#676171;font-size:12px;line-height:1.6}
.case-zoom-close{display:block;margin:0 0 11px auto;padding:8px 12px;border:1px solid #cbbfe1;border-radius:8px;background:#f2eaff;color:#4f438a;font-weight:800;cursor:pointer}
.case-related{padding:25px 0 85px}
.case-related-heading h2{margin:9px 0 20px;font-family:Nunito,Manrope,sans-serif;font-size:clamp(27px,3vw,38px)}
.case-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.case-related-card{display:grid;grid-template-columns:130px 1fr 26px;align-items:center;gap:18px;min-width:0;padding:12px;border:1.5px solid #302c48;border-radius:14px;background:#fffdf8;box-shadow:4px 5px 0 #302c48;color:#302c48;text-decoration:none;transition:transform .22s,box-shadow .22s}
.case-related-card:hover,.case-related-card:focus-visible{transform:translate(-2px,-3px);box-shadow:6px 8px 0 #302c48}
.case-related-card img{width:130px;height:88px;object-fit:cover;object-position:top;border-radius:8px;background:#eee}
.case-related-card div{display:flex;flex-direction:column;gap:5px;min-width:0}
.case-related-card div span{color:#776d83;font-size:10px;font-weight:800;text-transform:uppercase}
.case-related-card strong{font-family:Nunito,Manrope,sans-serif;font-size:20px;line-height:1.2}
.case-related-card>span{color:#6757cf;font-size:22px}
@media (prefers-reduced-motion:no-preference){
  @keyframes caseStep {from{opacity:.28;transform:translateY(14px) rotateX(-8deg)}to{opacity:1;transform:none}}
  .case-brief-route.can-animate.is-in-view li,.case-flow.can-animate.is-in-view article{animation:caseStep .56s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc((var(--step,0)) * 120ms)}
  .case-brief-route li:nth-child(2),.case-flow article:nth-child(2){--step:1}
  .case-brief-route li:nth-child(3),.case-flow article:nth-child(3){--step:2}
  .case-brief-route li:nth-child(4),.case-flow article:nth-child(4){--step:3}
  .case-hotspot{animation:hotspotPulse 2.5s ease-in-out infinite}
  @keyframes hotspotPulse{50%{box-shadow:0 0 0 11px #6757cf20,0 8px 20px #302c4866}}
  .button-primary span{display:inline-block;transition:transform .22s}
  .button-primary:hover span,.button-primary:focus-visible span{transform:translate(3px,-2px)}
  .button-primary:active{transform:translate(2px,2px) scale(.98)}
}
@media(max-width:700px){.case-related-grid{grid-template-columns:1fr}.case-related{padding-bottom:55px}}
@media(max-width:430px){.case-chapter-inner a{font-size:10px;padding:8px 10px}.case-related-card{grid-template-columns:100px 1fr 18px;gap:10px}.case-related-card img{width:100px;height:75px}.case-related-card strong{font-size:17px}.case-hotspot{width:39px;height:39px}}