#suase-workshop[data-version="v21"]{font-family:Arial,"PingFang SC",sans-serif}#suase-workshop[data-version="v21"] *{box-sizing:border-box}#suase-workshop[data-version="v21"] [hidden]{display:none!important}#suase-workshop[data-version="v21"] button{cursor:pointer;font-family:inherit}#suase-workshop[data-version="v21"] a{color:inherit}#suase-workshop[data-version="v21"] :focus-visible{outline:3px solid #fbce70;outline-offset:4px}
#suase-workshop[data-version="v21"]{position:relative;overflow:hidden;background:#21323e;color:#fff;margin:auto;width:100%;min-height:320px;aspect-ratio:16/9;container-type:inline-size;border-radius:5px;isolation:isolate}
#suase-workshop[data-version="v21"] .hero-scene{position:absolute;inset:0;overflow:hidden;background:#21323e}
#suase-workshop[data-version="v21"] .poster{display:contents}#suase-workshop[data-version="v21"] .poster img,#suase-workshop[data-version="v21"] .workshop-video{position:absolute;display:block;max-width:none;object-fit:fill}
#suase-workshop[data-version="v21"] .workshop-video{opacity:0;pointer-events:none}#suase-workshop[data-version="v21"][data-media-ready="true"] .workshop-video{opacity:1}
#suase-workshop[data-version="v21"] .hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#11212e85,transparent 17%,transparent 77%,#14232d85);z-index:1}
#suase-workshop[data-version="v21"] .hero-nav{position:absolute;left:4%;right:4%;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:8}
#suase-workshop[data-version="v21"] .brand-logo{width:clamp(106px,11cqw,175px);height:auto;display:block}
#suase-workshop[data-version="v21"] .hero-nav nav{display:flex;align-items:center;gap:clamp(12px,2.4cqw,40px);font-size:clamp(11px,1.1cqw,17px);font-weight:600;letter-spacing:.035em}
#suase-workshop[data-version="v21"] .hero-nav a{text-decoration:none}#suase-workshop[data-version="v21"] .hero-nav button{border:0;background:none;color:#fff;font-size:inherit;padding:10px 0;font-weight:600;letter-spacing:inherit}
#suase-workshop[data-version="v21"] .language-link{font-size:12px;white-space:nowrap}#suase-workshop[data-version="v21"] .mobile-menu-toggle{display:none}
#suase-workshop[data-version="v21"] #process-menu{position:absolute;z-index:10;right:4%;top:66px;background:#142a37f5;border:1px solid #66808c;border-radius:6px;box-shadow:0 8px 28px #0005;display:grid;grid-template-columns:1fr 1fr;padding:10px;max-width:420px;gap:4px}
#suase-workshop[data-version="v21"] #process-menu a{display:block;padding:11px 12px;color:#fff;font-size:13px;text-decoration:none;border-radius:3px}#suase-workshop[data-version="v21"] #process-menu a:hover{background:#385565}
#suase-workshop[data-version="v21"] .brand-copy{position:absolute;left:5%;right:5%;bottom:1.8%;text-align:center;z-index:3;pointer-events:none}
#suase-workshop[data-version="v21"] .brand-copy h1{font-size:clamp(23px,2.6cqw,46px);line-height:1.1;letter-spacing:-.025em;margin:0 0 6px;font-weight:700}
#suase-workshop[data-version="v21"] .brand-copy p{font-size:clamp(11px,1.2cqw,21px);line-height:1.35;margin:0}
#suase-workshop[data-version="v21"] .playback-controls{position:absolute;left:4%;bottom:2.5%;z-index:6;display:flex;gap:8px;align-items:center;max-width:28%;font-size:11px}
#suase-workshop[data-version="v21"] .motion-toggle{display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:36px;padding:7px 10px;background:#152b38e8;border:1px solid #738996;border-radius:4px;color:#fff;font-size:11px}
#suase-workshop[data-version="v21"] .motion-icon{font-size:11px;min-width:11px}#suase-workshop[data-version="v21"] .motion-status{font-size:11px;line-height:1.4}
#suase-workshop[data-version="v21"] .noscript-note{position:relative;padding:10px;background:#16303d;z-index:10}
#suase-workshop[data-version="v21"][data-mobile="true"]{max-width:none}
#suase-workshop[data-version="v21"][data-mobile="true"] .hero-nav{height:64px!important;left:18px;right:18px}
#suase-workshop[data-version="v21"][data-mobile="true"] .brand-logo{width:115px}
#suase-workshop[data-version="v21"][data-mobile="true"] .hero-nav nav,#suase-workshop[data-version="v21"][data-mobile="true"] .language-link{display:none}
#suase-workshop[data-version="v21"][data-mobile="true"] .mobile-menu-toggle{display:block;font-size:11px}
#suase-workshop[data-version="v21"][data-mobile="true"] .brand-copy{top:89px;bottom:auto;left:14px;right:14px}
#suase-workshop[data-version="v21"][data-mobile="true"] .brand-copy h1{font-size:29px;margin-bottom:9px}
#suase-workshop[data-version="v21"][data-mobile="true"] .brand-copy p{font-size:13px;line-height:1.4}
#suase-workshop[data-version="v21"][data-mobile="true"] .process-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:absolute;left:18px;right:18px}
#suase-workshop[data-version="v21"] .process-grid button{min-height:44px;background:#2d4553;border:1px solid #66808c;color:#fff;font-size:12px;padding:8px 5px;border-radius:4px}
#suase-workshop[data-version="v21"] .process-grid button[aria-pressed="true"]{background:#405e6d;border-color:#fff}
#suase-workshop[data-version="v21"] .process-grid button:last-child{grid-column:span 2}
#suase-workshop[data-version="v21"][data-mobile="true"] .playback-controls{bottom:16px;left:18px;right:18px;max-width:none}
#suase-workshop[data-version="v21"][data-mobile="true"] #process-menu{left:12px;right:12px;top:61px;padding:8px}#suase-workshop[data-version="v21"][data-mobile="true"] #process-menu a{font-size:12px;padding:10px 8px}
@media(prefers-reduced-motion:reduce){#suase-workshop[data-version="v21"] *{scroll-behavior:auto;transition:none!important}}

#suase-workshop[data-version="v21"] .process-grid{display:none}
#suase-workshop[data-version="v21"][data-mobile="true"] .hero-shade{display:none}
/* v19.1: gentle card transitions, persistent content and process line icons. */
#suase-workshop[data-version="v21"] [hidden]{display:none!important}
#suase-workshop[data-version="v21"] .hotpoint{position:absolute;z-index:4;width:32px;height:32px;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;touch-action:manipulation}
#suase-workshop[data-version="v21"] .hotpoint::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;background:#c82840;box-shadow:0 0 0 1px #21323eb3;pointer-events:none}
#suase-workshop[data-version="v21"] .hotpoint::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border:1px solid #f6c6cf;border-radius:50%;pointer-events:none;opacity:0;animation:suase-ripple 3.6s cubic-bezier(.2,.6,.3,1) var(--pulse-delay,0s) infinite}
#suase-workshop[data-version="v21"] .hotpoint[data-active="true"]::before{background:#fff;border-color:#c92c42;box-shadow:0 0 0 2px #c92c4250}
#suase-workshop[data-version="v21"] .hotpoint[data-active="true"]::after{border-color:#fff}
#suase-workshop[data-version="v21"] .hotpoint:focus-visible{outline:2px solid #fff;outline-offset:0}
#suase-workshop[data-version="v21"] .process-popover{position:absolute;z-index:7;width:252px;box-sizing:border-box;padding:14px;background:#152935fa;color:#f8fafb;border:1px solid #78909c80;border-radius:8px;box-shadow:0 8px 24px #06131d40;font:12px/1.5 Arial,"PingFang SC",sans-serif;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity 160ms ease,transform 160ms ease}
#suase-workshop[data-version="v21"] .process-popover[data-visible="true"]{opacity:1;transform:translateY(0);pointer-events:auto;transition-duration:240ms;transition-timing-function:cubic-bezier(.2,.7,.3,1)}
#suase-workshop[data-version="v21"] .popover-header{display:flex;gap:10px;align-items:flex-start;margin-bottom:7px}
#suase-workshop[data-version="v21"] .popover-header h2{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font:600 15px/1.3 Arial,sans-serif;letter-spacing:0;margin:1px 0 0}
#suase-workshop[data-version="v21"] .process-icon{display:grid;place-items:center;flex:0 0 26px;height:26px;border:1px solid #efaab626;border-radius:5px;background:#efaab60d;color:#efaab6}
#suase-workshop[data-version="v21"] .process-icon svg{display:block}
#suase-workshop[data-version="v21"] .process-title-text{min-width:0}
#suase-workshop[data-version="v21"] .close-popover{display:grid;place-items:center;flex:0 0 26px;height:26px;margin:-5px -5px 0 0;padding:0;border:0;border-radius:4px;background:transparent;color:#bbcbd4;font-size:22px;line-height:1;cursor:pointer}
#suase-workshop[data-version="v21"] .close-popover:hover{color:white;background:#ffffff12}
#suase-workshop[data-version="v21"] .popover-copy{margin:0 0 10px;color:#c5d2da;font-size:12px;line-height:1.5}
#suase-workshop[data-version="v21"] .process-tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 0 12px}
#suase-workshop[data-version="v21"] .process-tags span{display:flex;align-items:center;justify-content:center;min-width:0;min-height:22px;padding:3px 4px;border:1px solid #8ca1ad30;border-radius:3px;color:#a9bfcc;font-size:10px;line-height:1.4;white-space:nowrap}
#suase-workshop[data-version="v21"] .process-tags span:last-child{grid-column:1 / -1}
#suase-workshop[data-version="v21"] .popover-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #a2b6c126;padding-top:10px}
#suase-workshop[data-version="v21"] .process-link{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:32px;font-size:12px;font-weight:600;text-decoration:none;color:#fff;white-space:nowrap;transition:color 220ms ease}
#suase-workshop[data-version="v21"] .process-link span{display:inline-block;margin-right:3px;color:#efaab6;font-size:18px;line-height:1;transform:translate(0,0);transition:transform 220ms cubic-bezier(.2,.7,.3,1),color 220ms ease}
#suase-workshop[data-version="v21"] .process-link:is(:hover,:focus-visible){color:#f6cad2}
#suase-workshop[data-version="v21"] .process-link:is(:hover,:focus-visible) span{transform:translate(4px,0);color:#fff}
#suase-workshop[data-version="v21"][data-mobile="true"] .process-link{min-height:44px}
#suase-workshop[data-version="v21"] .hotspot-connector{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;opacity:0;transition:opacity 160ms ease}
#suase-workshop[data-version="v21"][data-popup="open"] .hotspot-connector{opacity:1;transition-duration:240ms}
#suase-workshop[data-version="v21"] .hotspot-connector path{stroke:#d8a5b2;stroke-width:1;fill:none;opacity:.65}
#suase-workshop[data-version="v21"] .process-grid button[data-active="true"]{background:#405e6d;border-color:#fff}
#suase-workshop[data-version="v21"][data-playing="false"] .hotpoint::after{animation-play-state:paused}
#suase-workshop[data-version="v21"][data-mobile="true"] .process-popover{padding:15px}
@media(pointer:coarse){#suase-workshop[data-version="v21"] .hotpoint{width:44px;height:44px}}
@keyframes suase-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.58)}10%{opacity:.64}65%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@media(prefers-reduced-motion:reduce){#suase-workshop[data-version="v21"] *,#suase-workshop[data-version="v21"] *::before,#suase-workshop[data-version="v21"] *::after{animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){#suase-workshop[data-version="v21"] .process-link span{transform:none!important}}

/* Chinese typography; the approved layout and motion remain shared. */
#suase-workshop[data-version="v21"][lang="zh-CN"]{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif}
#suase-workshop[data-version="v21"][lang="zh-CN"] .brand-copy h1{font-size:clamp(28px,3cqw,46px);line-height:1.2;letter-spacing:.12em}
#suase-workshop[data-version="v21"][lang="zh-CN"] .brand-copy p{letter-spacing:.08em;line-height:1.5}
#suase-workshop[data-version="v21"][lang="zh-CN"] .popover-header h2{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.5}
#suase-workshop[data-version="v21"][lang="zh-CN"] .popover-copy{font-size:13px;line-height:1.7}
#suase-workshop[data-version="v21"][lang="zh-CN"] .process-tags span{font-size:11px;line-height:14px}
#suase-workshop[data-version="v21"][lang="zh-CN"] .process-link{font-size:13px;letter-spacing:.04em}
#suase-workshop[data-version="v21"][lang="zh-CN"] .process-grid button{font-size:13px}
#suase-workshop[data-version="v21"][lang="zh-CN"][data-mobile="true"] .brand-copy h1{font-size:32px}
#suase-workshop[data-version="v21"][lang="zh-CN"][data-mobile="true"] .brand-copy p{font-size:14px}


/* v21 is loaded AFTER the existing shared component.css. No selectors affect #suaseModule. */
#suase-workshop[data-version="v21"]{display:block;text-align:left;border-radius:0}
/* Keep the first paint usable while the small interaction script loads. */
#suase-workshop[data-version="v21"] .poster img{width:100%;height:auto;left:0;top:0}
#suase-workshop[data-version="v21"][data-site-header="true"] .hero-nav{display:none}
#suase-workshop[data-version="v21"][data-full-bleed="true"]{width:var(--suase-viewport-width,100vw);max-width:none;left:50%;transform:translateX(-50%);margin:0}
#suase-workshop[data-version="v21"] .brand-copy p,#suase-workshop[data-version="v21"] .popover-copy{padding:0}
#suase-workshop[data-version="v21"] .hotpoint{width:44px;height:44px;background:transparent;box-shadow:none;border:0;filter:none;transition:none}
#suase-workshop[data-version="v21"] .hotpoint::before,#suase-workshop[data-version="v21"] .hotpoint::after{content:none;animation:none}
/* v21.3: translucent colour wash; all hover layers fade without restarting the ripple. */
#suase-workshop[data-version="v21"] .marker-art{width:44px;height:44px;display:block;overflow:visible;pointer-events:none;filter:none;transform:scale(1);transform-origin:50% 50%;transition:transform 480ms cubic-bezier(.2,.65,.25,1)}
#suase-workshop[data-version="v21"] .marker-art circle{vector-effect:non-scaling-stroke}
#suase-workshop[data-version="v21"] .marker-ring{stroke:#ffe4e84d;stroke-width:.65;opacity:.92;transition:opacity 480ms ease,stroke 480ms ease}
#suase-workshop[data-version="v21"] .marker-hover{stroke:none;opacity:0;transition:opacity 480ms ease}
#suase-workshop[data-version="v21"] .marker-halo{fill:none;stroke:#ffe4e8;stroke-width:.8;opacity:0;transition:opacity 480ms ease}
#suase-workshop[data-version="v21"] .marker-core{fill:#fff;fill-opacity:.94;stroke:#aa2c4933;stroke-width:.45;transition:fill-opacity 480ms ease}
#suase-workshop[data-version="v21"] .marker-wave{fill:none;stroke:#f2b7c3;stroke-width:.85;transform-origin:22px 22px;animation:suase-v21-wave 5.6s cubic-bezier(.2,.55,.3,1) var(--pulse-delay,0s) infinite;opacity:0}
#suase-workshop[data-version="v21"] .hotpoint:is(:hover,:focus-visible,[data-active="true"]){filter:none}
#suase-workshop[data-version="v21"] .hotpoint:is(:hover,:focus-visible,[data-active="true"]) .marker-art{transform:scale(1.035)}
#suase-workshop[data-version="v21"] .hotpoint:is(:hover,:focus-visible,[data-active="true"]) .marker-ring{opacity:1;stroke:#ffe4e87a}
#suase-workshop[data-version="v21"] .hotpoint:is(:hover,:focus-visible,[data-active="true"]) .marker-hover{opacity:.28}
#suase-workshop[data-version="v21"] .hotpoint:is(:hover,:focus-visible,[data-active="true"]) .marker-halo{opacity:.35}
#suase-workshop[data-version="v21"] .hotpoint:is(:hover,:focus-visible,[data-active="true"]) .marker-core{fill-opacity:1}
#suase-workshop[data-version="v21"][data-playing="false"] .marker-wave{animation-play-state:paused}
@keyframes suase-v21-wave{0%{opacity:0;transform:scale(1)}18%{opacity:.28}74%,100%{opacity:0;transform:scale(1.5)}}
#suase-workshop[data-version="v21"] .process-popover{width:272px;font-size:14px;max-height:var(--popover-max-height,none);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;box-shadow:0 10px 30px #06131d33}
#suase-workshop[data-version="v21"][data-mobile="true"] .process-popover{max-height:none;overflow:visible}
#suase-workshop[data-version="v21"] .popover-copy,#suase-workshop[data-version="v21"][lang="zh-CN"] .popover-copy{font-size:14px;line-height:1.6}
#suase-workshop[data-version="v21"] .process-tags span,#suase-workshop[data-version="v21"][lang="zh-CN"] .process-tags span{font-size:12px;line-height:1.4;min-height:27px}
#suase-workshop[data-version="v21"] .process-link{font-size:13px}
#suase-workshop[data-version="v21"] .close-popover{flex-basis:32px;height:32px}
#suase-workshop[data-version="v21"] .motion-toggle{min-width:44px;min-height:44px;border-color:#81959e66;border-radius:6px;background:#152b38b3}
#suase-workshop[data-version="v21"] .workshop-interaction-hint{position:absolute;right:3%;top:calc(var(--workshop-nav-height,88px) + 10px);z-index:4;margin:0;padding:0;color:#e6edef;font:12px/1.5 Arial,"PingFang SC",sans-serif;pointer-events:none;opacity:0;transition:opacity .45s;max-width:230px;text-shadow:0 1px 3px #0b1d29}
#suase-workshop[data-version="v21"] .workshop-interaction-hint::before{content:none}
#suase-workshop[data-version="v21"] .workshop-interaction-hint[data-show="true"]{opacity:.85}
#suase-workshop[data-version="v21"][data-mobile="true"] .workshop-interaction-hint{display:none}
#suase-workshop[data-version="v21"][data-mobile="true"] .close-popover{flex-basis:44px;height:44px}
#suase-workshop[data-version="v21"][data-mobile="true"] .brand-copy{top:calc(var(--workshop-nav-height,64px) + 20px)}
@media(min-width:620px){
 #suase-workshop[data-version="v21"] .motion-toggle{position:relative;width:44px;height:44px;justify-content:center;padding:0;gap:0}
 #suase-workshop[data-version="v21"] .motion-text{position:absolute;left:54px;top:50%;transform:translateY(-50%);display:block;white-space:nowrap;padding:6px 9px;background:#152b38f2;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .18s}
 #suase-workshop[data-version="v21"] .motion-toggle:is(:hover,:focus-visible) .motion-text{opacity:1}
}
@media(prefers-reduced-motion:reduce){#suase-workshop[data-version="v21"] .marker-wave{animation:none;opacity:0}}