.city-demo{--purple:#663399;--purple-soft:#f4effa;--navy:#282a3e;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--green:#22a06b;--red:#b22e36;font-family:inherit}.city-demo .cd-stage{position:relative;container-type:inline-size;aspect-ratio:620/375;background:radial-gradient(ellipse at 50% 45%,#ffffff 0,#f8fafc 70%,#f1f5f9 100%)}.city-demo .cd-svg{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 55%,transparent 100%)}.city-demo .cd-chip,.city-demo .cd-hud{position:absolute;top:12px;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:500;color:var(--ink)}.city-demo .cd-chip{left:12px}.city-demo .cd-hud{right:12px}.city-demo .cd-sim{position:absolute;right:14px;bottom:10px;z-index:5;font-size:11px;letter-spacing:.02em;color:#94a3b8}.city-demo .cd-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;transition:background .3s}.city-demo[data-phase="0"] .cd-dot{background:#94a3b8}.city-demo:not([data-phase="0"]) .cd-dot{background:var(--purple)}.city-demo .cd-hud b{font-size:15px;font-weight:600;min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums}.city-demo .cd-hud span{color:var(--muted)}.city-demo .pin{position:absolute;z-index:4;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none;font-size:clamp(8px,1.55cqw,12px)}.city-demo .pin-body{display:flex;align-items:center;gap:.5em;padding:.45em .8em .45em .55em;background:#fff;border:1px solid var(--line);border-radius:999px;white-space:nowrap;font-weight:500;color:var(--ink);transition:border-color .3s,background .3s,color .3s,transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:50% 100%}.city-demo .pin-stem{width:1px;height:2.4em;background:#cbd5e1}.city-demo .pin-ic{width:1.5em;height:1.5em;background:#f1f5f9;display:flex;align-items:center;justify-content:center;flex:none}.city-demo .pin-ic,.city-demo .pin-ic i{border-radius:50%;transition:background .3s}.city-demo .pin-ic i{width:.55em;height:.55em;background:#94a3b8}.city-demo .pin-bars{display:none;align-items:flex-end;gap:2px;height:1.5em}.city-demo .pin-bars i{width:.4em;background:var(--purple);border-radius:2px 2px 0 0;height:12%;transition:height .35s}.city-demo .pin-bars i+i{background:#5274ba}.city-demo[data-phase="1"] .pin-ic{background:var(--purple-soft)}.city-demo[data-phase="1"] .pin-ic i{background:var(--purple);animation:cdPulse 1s ease-in-out infinite}.city-demo[data-phase="2"] .pin-ic{display:none}.city-demo[data-phase="2"] .pin-bars{display:flex}.city-demo[data-phase="3"] .pin-body,.city-demo[data-phase="4"] .pin-body{border-color:var(--purple);background:var(--purple);color:#fff}.city-demo[data-phase="3"] .pin-ic,.city-demo[data-phase="4"] .pin-ic{background:rgba(255,255,255,.2)}.city-demo[data-phase="3"] .pin-ic i,.city-demo[data-phase="4"] .pin-ic i{background:#fff}.city-demo .pin[data-k=fin] .pin-body{background:var(--navy)!important;border-color:var(--navy)!important}.city-demo .pin[data-k=omi] .pin-body{background:#475569!important;border-color:#475569!important}.city-demo .pin.pop .pin-body{transform:scale(1.12)}@keyframes cdPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}@container (max-width:519px){.city-demo .pin-t{display:none}.city-demo .pin-body{padding:.5em}.city-demo .pin-bars{height:1.8em}}.city-demo .zone{fill:var(--purple);opacity:0;transition:opacity .5s}.city-demo[data-phase="1"] .zone,.city-demo[data-phase="2"] .zone{opacity:.12}.city-demo[data-phase="3"] .zone,.city-demo[data-phase="4"] .zone{opacity:.05}.city-demo .ring{fill:none;stroke:var(--purple);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}.city-demo[data-phase="1"] .ring{animation:cdRing 1.5s ease-out infinite}@keyframes cdRing{0%{transform:scale(.4);opacity:.7}to{transform:scale(1.6);opacity:0}}.city-demo .cd-cap{display:flex;align-items:center;justify-content:center;min-height:3.4rem;padding:.7rem 1.25rem;border-top:1px solid #f1f5f9;text-align:center;font-size:15px;font-weight:500;color:var(--ink)}.city-demo .cd-cap p{animation:cdIn .4s ease both}@keyframes cdIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.city-demo .cd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #f1f5f9;list-style:none;margin:0;padding:0}.city-demo .cd-step{position:relative;padding:1.1rem .75rem .9rem;border-right:1px solid #f1f5f9}.city-demo .cd-step:last-child{border-right:0}.city-demo .cd-step .bar{position:absolute;inset:0 0 auto 0;height:2px;background:#f1f5f9}.city-demo .cd-step .bar i{display:block;height:100%;width:0;background:var(--purple)}.city-demo .cd-step .t{gap:.4rem;font-size:14px;font-weight:600;transition:color .3s}.city-demo .cd-step .n,.city-demo .cd-step .t{display:flex;align-items:center;color:var(--muted)}.city-demo .cd-step .n{width:20px;height:20px;border-radius:50%;background:#f1f5f9;font-size:11px;justify-content:center;transition:background .3s,color .3s}.city-demo .cd-step .d{margin-top:.35rem;font-size:12px;line-height:1.3;color:var(--muted)}.city-demo .cd-step.done .t,.city-demo .cd-step.on .t{color:var(--ink)}.city-demo .cd-step.on .n{background:var(--purple);color:#fff}.city-demo .cd-step.done .n{background:#ede7f5;color:var(--purple)}.city-demo .cd-step.on .bar i{animation:cdFill var(--dur,3s) linear forwards}.city-demo .cd-step.done .bar i{width:100%}@keyframes cdFill{0%{width:0}to{width:100%}}@media (max-width:639px){.city-demo .cd-step .d,.city-demo .cd-step .n{display:none}.city-demo .cd-step .t{justify-content:center}.city-demo .cd-step{padding:1rem .4rem .8rem}.city-demo .cd-step .t{font-size:12.5px;gap:.25rem}.city-demo .cd-cap{font-size:14px}}@media (prefers-reduced-motion:reduce){.city-demo .cd-cap p,.city-demo .pin-ic i,.city-demo .ring{animation:none!important}.city-demo .cd-step.on .bar i{animation:none;width:100%}}