.routing-demo{--routing-muted:#b3bccb;background:#0b0d11;border:1px solid #282e38;border-radius:22px;overflow:hidden;box-shadow:0 24px 80px #0005}.routing-demo button{border-radius:8px}.routing-experience{background:#0d1016;border:1px solid #2a303a;border-radius:16px;overflow:hidden}.routing-storyline{color:#c6cdd8;border-bottom:1px solid #ffffff0b;justify-content:space-between;gap:16px;padding:20px 26px;font-size:12px;display:flex}.routing-storyline span:first-child{color:#f0f2f7}.routing-theater{grid-template-columns:minmax(0,1fr) 235px;display:grid}.routing-stage{background:radial-gradient(at 48%,#262c373d,#0000 65%);height:400px;position:relative;overflow:hidden}.routing-stage canvas{position:absolute;inset:0}.routing-object{pointer-events:none;position:absolute;transform:translate(-50%,-50%)}.routing-source{color:#a0aabb;place-items:center;transition:color .25s;display:grid}.routing-source[data-active=true]{color:#fff}.routing-object-caption{white-space:nowrap;color:#c5cddb;font-size:13px;position:absolute}.routing-core-caption{text-align:center;width:160px}.routing-core-caption strong{letter-spacing:-.04em;color:#fff;font-size:18px;font-weight:600;display:block}.routing-core-caption span{color:var(--routing-muted);margin-top:3px;font-size:11px;display:block}.routing-context{color:#c4cddc;white-space:nowrap;opacity:.35;background:#151b24;border:1px solid #303946;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-size:10px;transition:opacity .25s,border-color .25s;display:flex;position:absolute;transform:translate(-50%,-50%)}.routing-context[data-active=true]{opacity:1;border-color:#b3785366}.routing-status-dot{background:#ff9a64;border-radius:50%;width:5px;height:5px}.routing-context-divider{background:#526072;width:1px;height:12px}.routing-destination{color:#aab6c9;opacity:.4;background:#111720;border-radius:12px;transition:opacity .25s;overflow:hidden}.routing-destination[data-active=true],.routing-destination[data-open=true]{opacity:1}.routing-device-top{justify-content:center;align-items:center;gap:3px;height:20px;display:flex}.routing-device-top b{background:#05070b;border-radius:9px;width:25%;height:5px}.routing-device-top i{background:#647085;border-radius:50%;width:3px;height:3px}.routing-destination[data-device=Desktop] .routing-device-top{border-bottom:1px solid #ffffff0a;justify-content:start;padding-left:10px}.routing-app-surface{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:9px;height:calc(100% - 20px);padding:6px;display:flex}.routing-app-surface>svg{box-sizing:content-box;color:#d2dbe9;background:#202937;border:1px solid #ffffff10;border-radius:12px;padding:10px}.routing-app-surface strong{color:#e8edf6;font-size:12px;font-weight:500;line-height:1.25}.routing-app-surface>span{color:var(--routing-muted);font-size:9px;line-height:1.3}.routing-screen-action{background:#c6d6ed0a;border:1px solid #8495ad29;border-radius:4px;place-items:center;width:70%;height:20px;margin-top:3px;display:grid}.routing-destination[data-active=true] .routing-screen-action{color:#ffb48b;background:#ff925716;border-color:#ff925730}.routing-destination[data-device=Desktop] .routing-app-surface{gap:5px}.routing-destination[data-device=Desktop] .routing-app-surface>svg{width:18px;height:18px;padding:5px}.routing-destination[data-device=Desktop] .routing-screen-action{display:none}.routing-analytics{white-space:nowrap;color:#9ba8bc;align-items:center;gap:5px;font-size:10px;display:flex;position:absolute;transform:translate(-50%,-50%)}.routing-analytics>svg{visibility:hidden}.routing-analytics[data-active=true]{color:#b1d7c6}.routing-analytics[data-active=true]>svg{visibility:visible}.routing-explanation{background:#10141b80;border-left:1px solid #ffffff0b;flex-direction:column;justify-content:center;padding:26px 22px;display:flex}.routing-step-count{color:#a4afbf;justify-content:space-between;font-size:11px;display:flex}.routing-step-count span{font-variant-numeric:tabular-nums}.routing-step-track{gap:4px;margin:12px 0 28px;display:flex}.routing-step-track i{background:#303845;border-radius:2px;flex:1;height:2px}.routing-step-track i[data-complete=true]{background:#697587}.routing-step-track i[data-current=true]{background:#ff985f}.routing-explanation .routing-phase{color:#ffad7e;letter-spacing:.12em;font-size:10px}.routing-explanation h3{color:#f0f3f8;letter-spacing:-.025em;margin:12px 0;font-size:21px;font-weight:500;line-height:1.25}.routing-explanation .routing-detail{color:#bdc6d5;font-size:12px;line-height:1.7}.routing-config-summary{color:#a5b0c2;border-top:1px solid #ffffff0b;gap:6px;margin-top:24px;padding-top:18px;font-size:10px;display:grid}.routing-config-summary span{justify-content:space-between;gap:10px;display:flex}.routing-config-summary strong{color:#dde4ef;font-weight:400}.routing-steps summary{color:#c6cedb;cursor:pointer;width:fit-content;padding:6px 0 16px;font-size:12px}.routing-steps li{border-radius:10px}.routing-fallback{color:#d7dfeb;background:#141922;border:1px solid #303847;border-radius:12px;padding:18px 20px}.routing-fallback-title{color:#f1f4f9;font-size:14px}.routing-fallback p+p{margin-top:6px;font-size:12px;line-height:1.7}.routing-fallback-current{border-top:1px solid #ffffff12;margin-top:18px;padding-top:16px}.routing-fallback-current>span{letter-spacing:.1em;color:#ffad7e;font-size:10px;display:block}.routing-fallback-current>strong{margin-top:7px;font-size:16px;font-weight:500;display:block}.routing-fallback-current>p{color:#bdc6d5;margin-top:8px;font-size:12px}.routing-placeholder{color:#bdc6d5;background:#0d1016;border:1px solid #2a303a;border-radius:16px;place-items:center;min-height:455px;font-size:13px;display:grid}@media (max-width:1100px){.routing-theater{grid-template-columns:1fr}.routing-stage{height:355px}.routing-explanation{-moz-column-gap:28px;border-top:1px solid #ffffff0b;border-left:0;grid-template-columns:1fr 1.5fr;column-gap:28px;padding:20px 24px;display:grid}.routing-step-count,.routing-step-track{grid-column:1}.routing-step-track{margin:8px 0 16px}.routing-phase,.routing-explanation h3{grid-column:1}.routing-explanation h3{margin-bottom:0}.routing-explanation .routing-detail{grid-area:1/2/5;align-self:center}.routing-config-summary{display:none}}@media (max-width:600px){.routing-demo{border-radius:14px}.routing-placeholder{text-align:center;min-height:96px;padding:16px}}@media (prefers-reduced-motion:reduce){.routing-experience *{transition:none!important}}