.trace-story{background:linear-gradient(180deg,#fff,#f2f8fc 60%,#f5f9ff);color:#273b58}
.trace-story-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}
.trace-story-copy h2{font-size:clamp(30px,3.5vw,46px);line-height:1.4;letter-spacing:-1px;margin:15px 0 20px}.trace-story-copy>p:not(.eyebrow){font-size:17px;line-height:1.9;color:#65788f}
.trace-story-copy ol{list-style:none;padding:0;margin:30px 0}.trace-story-copy li{position:relative;padding:0 0 22px 66px}.trace-story-copy li>span{position:absolute;left:0;top:0;background:#e4eefc;color:#467abc;padding:9px 11px;border-radius:12px;font-size:13px}.trace-story-copy li:nth-child(2)>span{background:#def3ec;color:#328573}.trace-story-copy li:nth-child(3)>span{background:#eeebfa;color:#7764b2}.trace-story-copy li strong{font-size:16px;font-weight:600}.trace-story-copy li p{font-size:13px;color:#667b91;margin-top:7px}.trace-story-copy>a{font-size:14px;color:#3269aa}
.trace-stage{position:relative;padding:28px;border-radius:32px;background:linear-gradient(135deg,#e0edff,#e0f4ef 68%,#ece9fb);border:1px solid #fff;box-shadow:0 18px 54px #547eac10}.trace-stage::before{content:"";position:absolute;inset:9px;border:1px solid #ffffffa8;border-radius:25px;pointer-events:none}.trace-stage-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:#456586}.trace-stage-heading>span{display:flex;align-items:center;gap:9px}.trace-stage svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.trace-stage-heading small{font-size:11px;letter-spacing:1px;color:#667c92}
.trace-scan-object{max-width:390px;margin:34px auto 24px;background:#fff;padding:24px;border-radius:20px;box-shadow:0 16px 35px #467b9a12;border:1px solid #e1ebf5}.trace-package{display:flex;gap:14px;align-items:center;border-bottom:1px solid #edf2f7;padding-bottom:20px}.trace-package-symbol{display:grid;place-items:center;width:44px;height:44px;background:#e9f4ff;color:#458fdc;border-radius:13px;font-size:26px}.trace-package strong{display:block;font-size:17px}.trace-package small{display:block;font-size:12px;color:#75879b;margin-top:5px}
.trace-scan-window{position:relative;margin-top:22px;padding:13px 12px;border:1px solid #b6d8ed;border-radius:12px;background:#f9fcff;overflow:hidden;color:#314b66}.trace-scan-window svg{display:block;width:100%;height:auto;stroke:none}.trace-scan-window text{font-family:Consolas,monospace;font-size:11px;letter-spacing:2px;fill:#677d90}.trace-scan-light{position:absolute;left:0;right:0;top:0;height:25%;background:linear-gradient(transparent,#50c5dc38);border-bottom:2px solid #52bfd2;animation:trace-sweep 7s ease-in-out infinite}
.trace-result{display:flex;align-items:center;gap:13px;background:#ffffffed;border:1px solid white;border-radius:16px;padding:18px 20px;max-width:420px;margin:0 auto;animation:trace-result 7s ease-in-out infinite}.trace-result-check{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#299d81;background:#e1f6ed;font-size:22px}.trace-result strong{font-size:15px;font-weight:600}.trace-result p{font-size:12px;color:#6a8195;margin-top:5px}.trace-demo-badge{margin-left:auto;font-size:11px;color:#6b8197}.trace-flow{display:flex;justify-content:center;align-items:center;gap:18px;margin:25px 0}.trace-flow>div{display:flex;align-items:center;gap:7px;color:#487893;font-size:12px}.trace-flow strong{font-weight:500}.trace-flow>i{font-style:normal;color:#9ebbc9}.trace-stage-note{text-align:center;font-size:11px;color:#647c90}
.trace-story .trace-scan-light,.trace-story .trace-result,.trace-story .trace-scan-window::after{animation-play-state:paused}.trace-story.is-in-view .trace-scan-light,.trace-story.is-in-view .trace-result,.trace-story.is-in-view .trace-scan-window::after{animation-play-state:running}.motion-paused .trace-story .trace-scan-light,.motion-paused .trace-story .trace-result,.motion-paused .trace-story .trace-scan-window::after{animation-play-state:paused}
@keyframes trace-sweep{0%,8%{transform:translateY(-100%);opacity:0}15%{opacity:1}48%{transform:translateY(350%);opacity:1}55%,100%{transform:translateY(350%);opacity:0}}
@keyframes trace-result{0%,35%{opacity:0;transform:translateY(7px)}48%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@media(max-width:900px){.trace-story-layout{gap:35px;grid-template-columns:1fr 1.2fr}.trace-stage{padding:24px 20px}.trace-flow{gap:8px}.trace-flow>div{flex-direction:column}}
@media(max-width:650px){.trace-story-layout{grid-template-columns:1fr;gap:25px}.trace-story-copy h2 br{display:none}.trace-story-copy ol{margin-bottom:5px}.trace-stage{border-radius:24px}.trace-scan-object{padding:20px;margin-top:25px}.trace-result{padding:14px}.trace-flow{justify-content:space-around}}
@media(prefers-reduced-motion:reduce){.trace-story .trace-scan-light{animation:none;display:none}.trace-story .trace-result{animation:none;opacity:1;transform:none}}
/* Barcode pattern, rose scanner and light sweep adapted from Login.vue. */
.trace-package{display:none}.trace-scan-object{padding:22px 24px;background:linear-gradient(90deg,#0077b61a 0 4px,transparent 4px),linear-gradient(180deg,#fff,#f7fcff);border:1px solid #fff;box-shadow:inset 0 0 0 1px #ffffffb8,0 18px 42px #228be629}.trace-scan-window{margin:0;border:1px dashed #0077b62e;background:transparent;padding:20px 14px 18px}.trace-scan-window::before{content:'药品追溯码';display:block;text-align:center;font-size:17px;font-weight:700;color:#187fae;margin-bottom:20px}.trace-scan-window svg{height:116px}.trace-scan-window svg path{display:none}.trace-scan-window{background:repeating-linear-gradient(90deg,#1f2d4d 0 2px,transparent 2px 4px,#1f2d4d 4px 5px,transparent 5px 8px,#1f2d4d 8px 12px,transparent 12px 15px,#1f2d4d 15px 16px,transparent 16px 19px) center 62px / calc(100% - 32px) 72px no-repeat}.trace-scan-light{top:60px;left:12px;right:12px;height:2px;border:0;border-radius:999px;background:linear-gradient(90deg,transparent,#ff4f78,#ff9fbd,transparent);box-shadow:0 0 14px #ff4f78c7,0 8px 24px #ff4f7857;animation-name:trace-login-scanner;animation-duration:2.4s}.trace-scan-window::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent 0 18%,#ffffffb8 46%,transparent 72% 100%);opacity:.62;transform:translateX(-120%);animation:trace-login-sweep 3.2s ease-in-out infinite;pointer-events:none}.trace-result{animation:none}
@keyframes trace-login-scanner{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(52px);opacity:1}}
@keyframes trace-login-sweep{45%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.trace-story .trace-scan-window::after{animation:none;display:none}}