.routing-laptop{position:relative;width:min(1440px,100%);height:min(760px,calc(100svh - 84px));min-height:560px;margin:auto;background:radial-gradient(ellipse at 50% 35%,#fff 0,#f5f5f7 70%);isolation:isolate;overflow:hidden;overflow-anchor:none}
.product-routing #routing-create{scroll-margin-top:80px}
.routing-laptop>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.routing-laptop[data-laptop-screen-mode=flat]>canvas{opacity:0}
.laptop-css-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.laptop-screen{width:1200px;height:750px;overflow:hidden;border-radius:12px;background:#f8fafb;box-shadow:0 0 0 1px #cad3db;pointer-events:auto;color:#1d2833;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif}
.routing-demo-app{display:grid;grid-template:72px minmax(0,1fr)/190px minmax(0,1fr);height:100%;background:#f8fafb;text-align:left}
.routing-demo-app [hidden]{display:none!important}
.routing-demo-bar{grid-column:1/-1;display:flex;align-items:center;gap:26px;background:#fff;border-bottom:1px solid #e5e9ed;padding:0 28px;font-size:18px;color:#5c6670}
.routing-demo-bar>img{width:108px;height:28px;object-fit:contain}
.routing-demo-bar>span{border-left:1px solid #dbe1e5;padding-left:25px}
.routing-demo-tabs{display:flex;gap:5px;margin-left:auto;padding:5px;border-radius:12px;background:#f0f3f5}
.routing-demo-tabs>button{font:inherit;font-weight:500;border:0;background:transparent;border-radius:8px;padding:9px 20px;color:#71808e;cursor:pointer}
[data-demo-view=edit] [data-demo-edit],[data-demo-view=graph] [data-demo-graph]{color:#1c343f;background:#fff;box-shadow:0 1px 6px #1e3b5112}
.routing-demo-sidebar{padding:34px 23px;display:flex;flex-direction:column;gap:18px;background:#fff;border-right:1px solid #e5e9ed;font-size:16px;color:#71808e}
.routing-demo-sidebar-title{font-size:13px;letter-spacing:.06em;color:#a3acb5;font-weight:600}
.routing-demo-sidebar>strong{color:#23775f;font-size:17px;font-weight:600}
.routing-demo-sidebar-divider{height:1px;background:#e5e9ed;margin-block:12px}
.routing-demo-content{min-width:0;min-height:0;padding:36px 30px;overflow:auto}
.routing-demo-heading{margin-bottom:29px}
.routing-demo-heading h2{margin:0;font-size:29px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.routing-demo-heading p{margin:9px 0 0;color:#7e8a96;font-size:16px}
.routing-demo-form{display:grid;grid-template-columns:145px minmax(130px,1fr) 145px 190px;gap:18px 14px;padding:26px 24px;border:1px solid #e4e9ed;border-radius:14px;background:#fff}
.routing-demo-form label{display:flex;flex-direction:column;gap:9px;min-width:0;font-size:15px;font-weight:500;color:#687683}
.routing-demo-form input,.routing-demo-form select{width:100%;min-width:0;height:43px;padding:8px 12px;border:1px solid #dce3e8;border-radius:7px;background:#fff;font:400 16px/1.3 inherit;color:#1d2833}
.routing-demo-form input::placeholder{color:#a1acb6}
.routing-demo-form input:focus,.routing-demo-form select:focus{border-color:#52a58c;outline:3px solid #52a58c22}
.routing-demo-add{justify-self:end;grid-column:1/-1;display:flex;align-items:center;gap:24px;border:0;border-radius:8px;padding:12px 20px;background:#267c63;color:#fff;font:500 16px/1.3 inherit;cursor:pointer}
.routing-demo-rule-list{margin-top:27px;overflow:auto;border:1px solid #e4e9ed;border-radius:14px;background:#fff}
.routing-demo-table{width:100%;border-collapse:collapse;font-size:15px}
.routing-demo-table th,.routing-demo-table td{text-align:left;padding:17px 20px;border-bottom:1px solid #edf0f3;white-space:nowrap}
.routing-demo-table th{font-weight:500;font-size:13px;color:#83909b;background:#fcfdfe}
.routing-demo-table tr:last-child td{border-bottom:0}
.routing-demo-table th:first-child,.routing-demo-table td:first-child{width:60px;color:#8b98a4}
.routing-demo-table button{border:0;background:none;color:#81919d;font:inherit;cursor:pointer;padding:0;white-space:nowrap}
.routing-demo-table button:hover{color:#a05262}
.routing-demo-app[data-demo-view=edit] .routing-demo-graph-scroll{display:none}
.routing-demo-app[data-demo-view=graph] .routing-demo-content{padding:0;overflow:hidden}
.routing-demo-graph-scroll{height:100%;overflow:auto;background:#f8fafb;overscroll-behavior:contain;touch-action:pan-x pan-y}
.routing-demo-graph-scroll .routing-console-scene,.routing-native-scroll .routing-console-scene{touch-action:pan-x pan-y;cursor:auto}
.routing-demo-graph-scroll .routing-console-scene{height:100%;min-height:580px;background:#f8fafb}
.routing-demo-graph-scroll .gateway-motion{display:none}
.routing-laptop-controls{position:absolute;bottom:7px;left:50%;z-index:4;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px;background:#e9e9ecb8;border:1px solid #fff9;border-radius:40px;backdrop-filter:blur(16px);white-space:nowrap}
.routing-laptop-controls>button{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:11px 16px;border-radius:25px;color:#636369;font:400 13px/1 inherit;cursor:pointer}
.routing-laptop-controls>button:hover{background:#fff9;color:#1d1d1f}
.routing-laptop-controls>button:focus-visible{outline:2px solid #267c63;outline-offset:2px}
.routing-laptop-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[data-demo-motion]{width:38px;height:38px;justify-content:center;padding:0!important}
[data-demo-motion] .demo-play{display:none}
[data-demo-motion][aria-pressed=true] .demo-pause{display:none}
[data-demo-motion][aria-pressed=true] .demo-play{display:block}
.routing-native-scroll{overflow-x:auto;overscroll-behavior-x:contain}
@media(max-width:1050px){.routing-laptop{height:650px}.routing-laptop-controls{bottom:19px}}
@media(max-width:700px){
 .routing-laptop{height:690px;overflow:clip;background:#f5f5f7}
 .routing-laptop[data-laptop-screen-mode=flat] .laptop-screen{inset:18px 20px 78px!important;width:calc(100% - 40px)!important;height:calc(100% - 96px)!important;border-radius:16px;box-shadow:0 10px 40px #182a3b0a,0 0 0 1px #dce2e8}
 .routing-demo-app{grid-template:54px minmax(0,1fr)/minmax(0,1fr)}
 .routing-demo-bar{gap:12px;padding:0 14px;font-size:12px}.routing-demo-bar>img{width:68px;height:22px}.routing-demo-bar>span{display:none}
 .routing-demo-tabs{padding:4px;gap:2px}.routing-demo-tabs>button{padding:7px 10px;font-size:12px}
 .routing-demo-sidebar{display:none}.routing-demo-content{padding:24px 16px}
 .routing-demo-heading{margin-bottom:19px}.routing-demo-heading h2{font-size:22px}.routing-demo-heading p{font-size:13px;line-height:1.5;margin-top:6px}
 .routing-demo-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:16px 14px;gap:14px 12px}.routing-demo-form label{font-size:12px;gap:7px}.routing-demo-form input,.routing-demo-form select{height:40px;font-size:13px;padding:8px}
 .routing-demo-value{grid-column:1/-1;grid-row:2}.routing-demo-add{font-size:13px;padding:10px 14px;gap:18px}
 .routing-demo-rule-list{margin-top:18px}.routing-demo-table{font-size:12px}.routing-demo-table thead{display:none}.routing-demo-table tbody{display:block}.routing-demo-table tr{display:grid;grid-template-columns:25px minmax(0,1fr) 33px;padding:12px 10px;border-bottom:1px solid #edf0f3;gap:7px}.routing-demo-table th,.routing-demo-table td{padding:0;border:0;white-space:normal;min-width:0;overflow-wrap:anywhere}.routing-demo-table td:first-child{width:auto;grid-row:1/3}.routing-demo-table td:nth-child(2){grid-column:2;font-weight:500}.routing-demo-table td:nth-child(3){grid-column:2;grid-row:2;font-size:11px;color:#7a8b96}.routing-demo-table td:nth-child(4){grid-column:3;grid-row:1/3;align-self:center}.routing-demo-table td[colspan]{grid-column:1/-1;width:auto;font-size:12px}
 .routing-demo-graph-scroll .routing-console-scene{width:960px;min-height:0;height:100%}
 .routing-native-scroll>.routing-console-scene{width:960px;height:580px}
 .routing-laptop-controls{bottom:20px;gap:4px;padding:4px}.routing-laptop-controls>button{font-size:11px;padding:11px}.routing-laptop-controls svg{width:14px;height:14px}
}
@media(max-width:339px){.routing-laptop[data-laptop-screen-mode=flat] .laptop-screen{inset-inline:14px!important;width:calc(100% - 28px)!important}.routing-demo-content{padding:21px 12px}.routing-demo-form{padding:14px 10px;gap:12px 9px}.routing-demo-heading h2{font-size:20px}}