:root {
  
  --blue: #0060f0;
  --blue-600: #0050cf;
  --blue-400: #2f7bff;
  --blue-300: #6fa3ff;
  --blue-200: #b9d2ff;
  --blue-100: #e3edff;
  --blue-50: #f1f6ff;
  --ink: #0a0e1a;
  --ink-2: #2a3350;
  --ink-3: #5b6685;
  --ink-4: #8a94ae;
  --line: #dde5f5;
  --paper: #f5f8ff;
  --white: #fff;
  --night: #04060c;
  --night-2: #0a1020;
  --night-3: #121a30;
  --night-line: rgba(255, 255, 255, 0.12);
  --orange: #ed7b2f;
  --green: #18b274;
  --red: #e34d59;
  --cyan: #19c8ff;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 44px;

  --shadow-1: 0 1px 2px rgba(10, 30, 90, 0.06), 0 8px 24px rgba(10, 30, 90, 0.08);
  --shadow-2: 0 2px 6px rgba(10, 30, 90, 0.08), 0 28px 64px rgba(10, 40, 120, 0.18);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 90px rgba(0, 70, 255, 0.35);

  --font-display: "Archivo", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Cormorant Garamond", "Songti SC", "STSong", serif;

  --wrap: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--ink-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }



:root {
  --ui-font: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ui-num: "Helvetica Neue", "SF Pro Display", "Inter", Arial, sans-serif;
}

.mock { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; container-type: normal; contain: layout paint; }
.mock-in {
  position: absolute; left: 0; top: 0;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform-origin: 0 0; scale: var(--s, 1);
  font-family: var(--ui-font); font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 0; text-align: left; color: #2a3350;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
}
.mock-in *, .mock-in *::before, .mock-in *::after { box-sizing: border-box; }
.mock-in svg { display: block; max-width: none; }
.mock-in img { display: none !important; } 
.mock-in .num { font-family: var(--ui-num); font-variant-numeric: tabular-nums; }
.js .mock:not(.ready) .mock-in { visibility: hidden; }
.mock-missing { display: grid; place-items: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, #eef2fb, #eef2fb 10px, #e4eaf7 10px, #e4eaf7 20px); color: #6f7fa6; font: 600 13px/1.4 var(--ui-font); }


.inc { position: relative; }


.chart { display: block; }
.chart svg { display: block; overflow: visible; }




.mock-in {
  --ph-nav: #1e7aff;          
  --ph-bg: #eaf1ff;           
  --ph-bg-hi: #f4f7ff;        
  --ph-ink: #364055;          
  --ph-num: #343f58;          
  --ph-ink2: #5d6779;         
  --ph-ink3: #98a2b3;         
  --ph-line: #e6ecf8;         
  --ph-tint: #f4f7ff;         
  --ph-blue: #2b6ff3;
  --ph-orange: #f5a50b;
  --ph-red: #f0555c;
  --ph-teal: #14bec8;
  --ph-green: #17b88f;
  --ph-up: #f0505a;           
  --ph-up-bg: #fde8ea;
  --ph-down: #12b4c0;         
  --ph-down-bg: #dcf6f8;
}


.mock-in .ph-ic { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; vertical-align: middle;
  -webkit-mask: var(--ph-ic) center / contain no-repeat; mask: var(--ph-ic) center / contain no-repeat; }

.mock-in .ph-ic--back{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5L8 12l7.5 7.5'/%3E%3C/svg%3E")}
.mock-in .ph-ic--close{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.mock-in .ph-ic--more{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='19' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.mock-in .ph-ic--chev-r{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.mock-in .ph-ic--chev-d{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E")}
.mock-in .ph-ic--chart{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 19.5l5.5-6 3.6 3.2L20 7.5'/%3E%3Cpath d='M14.5 7h5.5v5.5'/%3E%3C/svg%3E")}
.mock-in .ph-ic--bars{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 20V12M12 20V5M18.5 20v-5.5'/%3E%3C/svg%3E")}
.mock-in .ph-ic--alert{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7.2'/%3E%3Ccircle cx='12' cy='17.6' r='1.35' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.mock-in .ph-ic--qr{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1'/%3E%3Cpath d='M14 14h2.4v2.4H14zM18 18h2M18 14h2'/%3E%3C/svg%3E")}
.mock-in .ph-ic--drop{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3.6 4.1 6.2 7.2 6.2 10.3a6.2 6.2 0 0 1-12.4 0C5.8 10.400 8.400 7.300 12 3.200z'/%3E%3Cpath d='M9.200 14.200a2.900 2.900 0 0 0 2.600 2.600'/%3E%3C/svg%3E")}
.mock-in .ph-ic--pagoda{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5h17M6 20.500V12h12v8.500M3.500 12.500L12 6l8.500 6.500M12 3.500V6M9.500 20.500v-4a2.500 2.500 0 0 1 5 0v4'/%3E%3C/svg%3E")}
.mock-in .ph-ic--plane{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3.500L10.500 14M21 3.500l-6.500 17-4-6.500-6.500-4z'/%3E%3C/svg%3E")}
.mock-in .ph-ic--island{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V11M12 11c-2.500-2.200-5-2-7-.2M12 11c2.500-2.200 5-2 7-.2M12 11c-.5-3-2.500-4.800-5.500-4.500M12 11c.5-3 2.500-4.800 5.500-4.500M3.500 21h17'/%3E%3C/svg%3E")}
.mock-in .ph-ic--road{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.500 3.500L4.500 20.500M15.500 3.500l4 17M12 5v3M12 11v3M12 17v3'/%3E%3C/svg%3E")}
.mock-in .ph-ic--flame{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.5 3.500 4.500 5.500 4.500 10a4.500 4.500 0 0 1-9 0c0-2 .8-3.200 2-4.200.2 1.600 1 2.400 2 2.700C11.500 8.500 11.200 5.800 12 3z'/%3E%3C/svg%3E")}
.mock-in .ph-ic--hall{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.500 20.500h17M5.500 20.500v-8h13v8M3.500 12.500L12 5.500l8.500 7M9.500 20.500v-4.500h5v4.500M9 9.500h6'/%3E%3C/svg%3E")}
.mock-in .ph-ic--lungs{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v8.500M12 12.500c-2.500 0-3.800 1.800-4.800 4.200-.9 2.100-1.600 3.800-3 3.800C3 20.500 3 14 5.200 9.500 6.500 6.800 8.800 5.500 12 5.500M12 12.500c2.500 0 3.800 1.800 4.800 4.200.9 2.100 1.600 3.800 3 3.800 1.200 0 1.200-6.500-1-11C17.500 6.800 15.200 5.500 12 5.500'/%3E%3C/svg%3E")}
.mock-in .ph-ic--user{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.500 20c.4-3.800 3.600-6 7.500-6s7.100 2.200 7.500 6'/%3E%3C/svg%3E")}
.mock-in .ph-ic--users{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.500' r='3.200'/%3E%3Cpath d='M3 19.500c.3-3.200 2.800-5 6-5s5.700 1.800 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.600'/%3E%3Cpath d='M17.500 14.200c2.200.2 3.600 1.600 3.800 4'/%3E%3C/svg%3E")}
.mock-in .ph-ic--car{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.500 12.500l1.800-5.200A1.500 1.500 0 0 1 7.700 6.300h8.600a1.500 1.500 0 0 1 1.400 1l1.800 5.200M3.500 12.500h17v5h-17zM7 17.500v2M17 17.500v2'/%3E%3Cpath d='M7.500 15h.01M16.500 15h.01'/%3E%3C/svg%3E")}
.mock-in .ph-ic--bus{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.500' y='3.500' width='15' height='14' rx='2.500'/%3E%3Cpath d='M4.500 11h15M8 17.500v2.500M16 17.500v2.500M8 14.200h.01M16 14.200h.01'/%3E%3C/svg%3E")}
.mock-in .ph-ic--train{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.500' width='14' height='13.500' rx='3'/%3E%3Cpath d='M5 11h14M8.500 20.500l1.500-3.500M15.500 20.500L14 17M9 14h.01M15 14h.01'/%3E%3C/svg%3E")}
.mock-in .ph-ic--check{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E")}
.mock-in .ph-ic--coin{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.500'/%3E%3Cpath d='M8.800 8l3.200 4.200L15.200 8M9 12.500h6M9 15.500h6M12 12.200V17'/%3E%3C/svg%3E")}
.mock-in .ph-ic--db{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7.500' ry='2.800'/%3E%3Cpath d='M4.500 6v6c0 1.500 3.400 2.800 7.500 2.800s7.500-1.300 7.500-2.800V6M4.500 12v6c0 1.500 3.400 2.800 7.500 2.800s7.500-1.300 7.500-2.800v-6'/%3E%3C/svg%3E")}
.mock-in .ph-ic--pin{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.800-5.600-6.800-11a6.800 6.800 0 0 1 13.600 0c0 5.400-6.800 11-6.800 11z'/%3E%3Ccircle cx='12' cy='10' r='2.500'/%3E%3C/svg%3E")}
.mock-in .ph-ic--bolt{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.500 3L5.500 13.500h6L10.500 21l8-10.500h-6z'/%3E%3C/svg%3E")}
.mock-in .ph-ic--cloud{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.500a4.500 4.500 0 0 1-.4-9 6 6 0 0 1 11.500 1.500 3.800 3.800 0 0 1-.6 7.500z'/%3E%3C/svg%3E")}
.mock-in .ph-ic--sun{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.600 5.600L7 7M17 17l1.400 1.400M18.400 5.600L17 7M7 17l-1.400 1.400'/%3E%3C/svg%3E")}
.mock-in .ph-ic--wave{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9c2.200-2 3.800-2 6 0s3.800 2 6 0 3.800-2 6 0M3 15c2.200-2 3.800-2 6 0s3.800 2 6 0 3.800-2 6 0'/%3E%3C/svg%3E")}
.mock-in .ph-ic--shield{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.500l7 2.500v5.500c0 4.500-3 7.700-7 9.500-4-1.800-7-5-7-9.500V6z'/%3E%3C/svg%3E")}
.mock-in .ph-ic--pipe{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v8H4zM8 8v8M16 8v8M2.500 11v2M21.500 11v2'/%3E%3C/svg%3E")}
.mock-in .ph-ic--flag{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4M6 4.500h11l-2.500 4 2.500 4H6'/%3E%3C/svg%3E")}
.mock-in .ph-ic--list{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.500h11M9 12h11M9 17.500h11M4.500 6.500h.01M4.500 12h.01M4.500 17.500h.01'/%3E%3C/svg%3E")}
.mock-in .ph-ic--arrow{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 .5L15.600 10.200H10.600C10.600 15.200 10.900 19.200 12.400 23.500H4.600C5.600 19.200 5.900 15.200 5.900 10.200H.4Z' fill='%23000' stroke='none'/%3E%3C/svg%3E")}


.mock-in .ph-gi--tri::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 9L56.500 53H7.500z' fill='%23000' stroke='%23000' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 9L56.500 53H7.500z' fill='%23000' stroke='%23000' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mock-in .ph-gi--hex::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 7.500L54 20v24L32 56.500 10 44V20z' fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 7.500L54 20v24L32 56.500 10 44V20z' fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mock-in .ph-gi--shield::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 7L53 13.500V31c0 11-8.500 19.500-21 26C19.500 50.500 11 42 11 31V13.500z' fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 7L53 13.500V31c0 11-8.500 19.500-21 26C19.500 50.500 11 42 11 31V13.500z' fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mock-in .ph-gi--trap::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M25 10H39L54 54H10z' fill='%23000' stroke='%23000' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M25 10H39L54 54H10z' fill='%23000' stroke='%23000' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mock-in .ph-gi--bubble::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='28.500' r='23.500' fill='%23000'/%3E%3Cpath d='M22 46l6 11 12-9z' fill='%23000' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='28.500' r='23.500' fill='%23000'/%3E%3Cpath d='M22 46l6 11 12-9z' fill='%23000' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}


.mock-in .ph-sig{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cpath fill='%23000' d='M0 7.500h3V11H0zM4.600 5h3v6h-3zM9.200 2.500h3V11h-3zM13.800 0h3v11h-3z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11'%3E%3Cpath fill='%23000' d='M0 7.500h3V11H0zM4.600 5h3v6h-3zM9.200 2.500h3V11h-3zM13.800 0h3v11h-3z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mock-in .ph-wifi{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='%23000' d='M8 11.600L10.400 9.100A3.500 3.500 0 0 0 5.600 9.100zM3.700 7.100A6.500 6.500 0 0 1 12.300 7.100L10.900 8.500A4.500 4.500 0 0 0 5.100 8.500zM1.300 4.700A9.800 9.800 0 0 1 14.700 4.700L13.300 6.100A7.800 7.800 0 0 0 2.700 6.100z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='%23000' d='M8 11.600L10.400 9.100A3.500 3.500 0 0 0 5.600 9.100zM3.700 7.100A6.500 6.500 0 0 1 12.300 7.100L10.900 8.500A4.500 4.500 0 0 0 5.100 8.500zM1.300 4.700A9.800 9.800 0 0 1 14.700 4.700L13.300 6.100A7.800 7.800 0 0 0 2.700 6.100z'/%3E%3C/svg%3E") center/100% 100% no-repeat}



.mock-in .ph-screen { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, var(--ph-bg-hi) 0, #ecf2ff 380px, var(--ph-bg) 100%);
  color: var(--ph-ink2); font-size: 14px; line-height: 1.4; }
.mock-in .ph-screen--flat { background: var(--ph-bg); }


.mock-in .ph-head { position: relative; z-index: 5; height: 88px; color: #fff; background: linear-gradient(180deg, #1a77ff 0, #2182ff 100%); }
.mock-in .ph-status { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 3px 16px 0 32px; }
.mock-in .ph-time { font: 500 16px/1 var(--ui-num); letter-spacing: .3px; }
.mock-in .ph-sys { display: flex; align-items: center; gap: 6px; }
.mock-in .ph-sig { width: 18px; height: 12px; background: #fff; }
.mock-in .ph-wifi { width: 16px; height: 12px; background: #fff; }
.mock-in .ph-bat { position: relative; width: 25px; height: 12px; padding: 1.5px; border: 1px solid rgba(255,255,255,.6); border-radius: 3.5px; }
.mock-in .ph-bat::before { content: ""; display: block; height: 100%; border-radius: 1.8px; background: #fff; }
.mock-in .ph-bat::after { content: ""; position: absolute; right: -3.5px; top: 2.5px; width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.6); }

.mock-in .ph-nav { position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px; font-size: 16px; }
.mock-in .ph-back { display: flex; align-items: center; gap: 4px; }
.mock-in .ph-back .ph-ic { font-size: 22px; margin-left: -3px; }
.mock-in .ph-close { margin-left: 21px; }
.mock-in .ph-nav-t { position: absolute; left: 0; right: 0; top: 0; line-height: 44px; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: .5px; pointer-events: none; }
.mock-in .ph-nav-m { margin-left: auto; font-size: 20px; }


.mock-in .ph-sec { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 16px; }
.mock-in .ph-sec-t { font-size: 18px; font-weight: 600; color: var(--ph-ink); letter-spacing: .3px; }
.mock-in .ph-sec-d { font-size: 12px; color: #8f98a9; }
.mock-in .ph-sec-d .num { letter-spacing: 0; }


.mock-in .ph-card { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(50,100,220,.05), 0 6px 18px rgba(60,110,230,.07); }


.mock-in .ph-m { position: relative; padding: 13px 12px 14px; border-radius: 6px; background: var(--ph-tint); }
.mock-in .ph-m-l { font-size: 14px; line-height: 20px; color: var(--ph-ink2); white-space: nowrap; }
.mock-in .ph-m-v { margin-top: 7px; display: flex; align-items: baseline; gap: 6px; line-height: 28px; white-space: nowrap; }
.mock-in .ph-m-v b { font: 700 21px/28px var(--ui-num); letter-spacing: -.2px; color: var(--ph-num); }
.mock-in .ph-m-u { font-size: 12px; color: var(--ph-ink2); }
.mock-in .ph-m-y { margin-top: 5px; display: flex; align-items: center; gap: 4px; height: 17px; font-size: 12px; color: var(--ph-ink3); white-space: nowrap; }


.mock-in .ph-tag { display: inline-flex; align-items: center; gap: 2px; height: 17px; padding: 0 5px 0 3px; border-radius: 3px; font: 700 11px/17px var(--ui-num); letter-spacing: -.5px; font-style: italic; }
.mock-in .ph-tag .ph-ic { width: 9px; height: 14px; margin-right: 0; }
.mock-in .ph-tag--up { color: var(--ph-up); background: var(--ph-up-bg); }
.mock-in .ph-tag--down { color: var(--ph-down); background: var(--ph-down-bg); }
.mock-in .ph-tag--down .ph-ic { transform: scaleY(-1); }
.mock-in .ph-tag--hot { color: #fff; background: linear-gradient(90deg, #ff9a3d, #f2553c); }
.mock-in .ph-tag--hot .ph-ic { color: #ffd37a; }


.mock-in .ph-bn { position: relative; border-radius: 6px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0, rgba(125,190,255,.55), rgba(125,190,255,0) 60%), linear-gradient(105deg, #1357e6 0%, #2d78ff 55%, #4d96ff 100%);
  box-shadow: 0 8px 18px rgba(30,100,240,.22); }
.mock-in .ph-bn-t { font-size: 14px; line-height: 20px; opacity: .95; }
.mock-in .ph-bn-v { display: flex; align-items: baseline; gap: 6px; }
.mock-in .ph-bn-v b { font: 700 30px/36px var(--ui-num); letter-spacing: -.3px; }
.mock-in .ph-bn-u { font-size: 12px; opacity: .72; }



.mock-in .ph-tabs { position: relative; display: flex; height: 49px; background: linear-gradient(180deg, #f7faff, #fff); border-radius: 8px 8px 0 0; }
.mock-in .ph-tab { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #6c7689; }
.mock-in .ph-tab.on { color: var(--ph-blue); background: linear-gradient(180deg, #e0ebfe, #f0f6ff); }
.mock-in .ph-tab.on::before { content: ""; position: absolute; left: 50%; bottom: -7px; width: 66px; height: 8px; margin-left: -33px; border: 1px solid #b4cbf3; border-top: 0; border-radius: 0 0 33px 33px / 0 0 8px 8px; background: #f0f6ff; }
.mock-in .ph-tab.on::after { content: ""; position: absolute; left: 50%; bottom: -2.5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ph-blue); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #cfe0fb; }
.mock-in .ph-tabs--s .ph-tab { font-size: 14px; }

.mock-in .ph-seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #eef3fd; }
.mock-in .ph-seg-i { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; color: #8d97ab; }
.mock-in .ph-seg-i.on { color: var(--ph-blue); font-weight: 600; background: #fff; box-shadow: 0 1px 3px rgba(60,100,200,.12); }

.mock-in .ph-ul { display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid var(--ph-line); }
.mock-in .ph-ul-i { position: relative; padding: 9px 0; font-size: 14px; color: #8d97ab; }
.mock-in .ph-ul-i.on { color: var(--ph-blue); font-weight: 600; }
.mock-in .ph-ul-i.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ph-blue); }


.mock-in .ph-rk { position: relative; display: flex; align-items: center; height: 35px; padding: 0 16px 0 14px; margin-bottom: 1px; font-size: 14px; color: var(--ph-ink); }
.mock-in .ph-rk-n { width: 50px; flex: none; font: italic 800 14px/1 var(--ui-num); letter-spacing: .2px; color: #6e788b; }
.mock-in .ph-rk-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-in .ph-rk-v { font: 600 15px/1 var(--ui-num); color: var(--ph-num); }
.mock-in .ph-rk-u { margin-left: 3px; font-size: 12px; color: var(--ph-ink3); }
.mock-in .ph-rk--1 { background: linear-gradient(90deg, rgba(255,92,80,.13), rgba(255,92,80,0) 80%); }
.mock-in .ph-rk--1 .ph-rk-n { color: #f04a3e; }
.mock-in .ph-rk--2 { background: linear-gradient(90deg, rgba(255,150,60,.13), rgba(255,150,60,0) 80%); }
.mock-in .ph-rk--2 .ph-rk-n { color: #f27d1c; }
.mock-in .ph-rk--3 { background: linear-gradient(90deg, rgba(255,205,40,.20), rgba(255,205,40,0) 80%); }
.mock-in .ph-rk--3 .ph-rk-n { color: #f5c21a; }

.mock-in .ph-rk-bar { width: 72px; height: 6px; margin: 0 10px; border-radius: 3px; background: #edf2fc; overflow: hidden; }
.mock-in .ph-rk-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6aa8ff, #2b6ff3); }


.mock-in .ph-tbl { padding: 0 12px; }
.mock-in .ph-tr { display: grid; grid-template-columns: var(--cols, 1fr); align-items: center; height: 33px; font-size: 13px; color: #4d5668; border-bottom: 1px dashed var(--ph-line); }
.mock-in .ph-tr:last-child { border-bottom: 0; }
.mock-in .ph-tr--h { height: 32px; margin-bottom: 2px; border: 0; border-radius: 6px; background: #f1f5fd; font-size: 12px; color: #8d97ab; }
.mock-in .ph-td { padding: 0 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-in .ph-td--l { text-align: left; }
.mock-in .ph-td--r { text-align: right; }
.mock-in .ph-td .num { font-family: var(--ui-num); }

.mock-in .ph-st { display: inline-block; min-width: 40px; height: 22px; padding: 0 5px; border-radius: 4px; font-size: 12px; line-height: 22px; text-align: center; color: #66708a; background: #f0f3fa; }
.mock-in .ph-st--cyan { color: #14a39b; background: #d9f6f3; }
.mock-in .ph-st--yellow { color: #d4950a; background: #fff0c2; }
.mock-in .ph-st--blue { color: #4f72c4; background: #e3ecfc; }
.mock-in .ph-st--orange { color: #de7424; background: #fde0c6; }
.mock-in .ph-st--pink { color: #e0505a; background: #fdd9db; }
.mock-in .ph-st--red { color: #fff; background: #f23a3a; }
.mock-in .ph-st--green { color: #12a77a; background: #d8f6ea; }


.mock-in .ph-blk { position: relative; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e8f0ff, #f6f9ff); }
.mock-in .ph-blk--y { background: linear-gradient(135deg, #fff1c8, #fffaea); }
.mock-in .ph-blk--r { background: linear-gradient(135deg, #ffe2de, #fff4f2); }
.mock-in .ph-blk--g { background: linear-gradient(135deg, #d9f7ef, #f1fcf9); }
.mock-in .ph-blk--b { background: linear-gradient(135deg, #e0ebff, #f4f8ff); }
.mock-in .ph-blk-t { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--ph-ink); }

.mock-in .ph-blk-in { margin: 0 6px 6px; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(80,120,220,.08); }



.mock-in .ph-lg { --c: #2b6ff3; --bg: #dce8fb; position: absolute; display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 0 0 0; white-space: nowrap; }
.mock-in .ph-lg::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 99px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, var(--bg) 0, var(--bg) 40%, rgba(255,255,255,0) 100%); }
.mock-in .ph-lg-s { position: relative; width: 12px; height: 12px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1.5px #fff; }
.mock-in .ph-lg-t { position: relative; font-size: 12px; color: #4a5468; }
.mock-in .ph-lg-v { position: relative; font: 700 15px/1 var(--ui-num); color: var(--ph-num); }
.mock-in .ph-lg-d { position: absolute; height: 0; border-top: 1px dashed var(--c); opacity: .5; }


.mock-in .ph-gi { --gs: 28px; --g1: #7ab8ff; --g2: #1f62f0; position: relative; display: inline-block; flex: none; width: var(--gs); height: var(--gs); filter: drop-shadow(1.5px 2.5px 1.5px rgba(24,84,220,.26)); }
.mock-in .ph-gi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%;
  background: radial-gradient(110% 62% at 30% 4%, rgba(255,255,255,.78), rgba(255,255,255,0) 62%), linear-gradient(150deg, var(--g1) 0%, var(--g2) 100%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.7), inset 0 -3px 4px rgba(0,40,140,.26), inset 0 0 0 .6px rgba(255,255,255,.4); }
.mock-in .ph-gi--sq::before { border-radius: 24%; }
.mock-in .ph-gi--tri::before, .mock-in .ph-gi--trap::before, .mock-in .ph-gi--hex::before, .mock-in .ph-gi--shield::before, .mock-in .ph-gi--bubble::before { border-radius: 0; box-shadow: none; }
.mock-in .ph-gi .ph-ic { position: absolute; left: 50%; top: 50%; width: 64%; height: 64%; transform: translate(-50%, -50%); color: #fff; filter: drop-shadow(0 1px 0 rgba(10,50,160,.28)); }
.mock-in .ph-gi--tri .ph-ic { top: 62%; width: 46%; height: 46%; }
.mock-in .ph-gi--trap .ph-ic { width: 62%; height: 62%; }
.mock-in .ph-gi--bubble .ph-ic { top: 45%; width: 56%; height: 56%; }
.mock-in .ph-gi--shield .ph-ic { top: 48%; width: 56%; height: 56%; }
.mock-in .ph-gi--hex .ph-ic { width: 58%; height: 58%; }

.mock-in .ph-gi--floor::after { content: ""; position: absolute; left: 34%; right: -34%; bottom: -4%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(36,96,230,.45), rgba(36,96,230,0)); }

.mock-in .ph-gi--blue { --g1: #7ab8ff; --g2: #1f62f0; }
.mock-in .ph-gi--cyan { --g1: #63ece4; --g2: #0aa6b9; }
.mock-in .ph-gi--yellow { --g1: #ffd96a; --g2: #ff9d00; }
.mock-in .ph-gi--red { --g1: #ff9d9a; --g2: #ef444c; }
.mock-in .ph-gi--green { --g1: #6ae6ae; --g2: #12ad79; }
.mock-in .ph-gi--purple { --g1: #b4a6ff; --g2: #6a4df0; }
.mock-in .ph-gi--sm { --gs: 22px; }
.mock-in .ph-gi--lg { --gs: 40px; }


.mock-in .ph-fd { position: relative; width: 340px; filter: drop-shadow(0 6px 10px rgba(90,150,255,.2)); }
.mock-in .ph-fd-h { position: relative; height: 51px; clip-path: path("M0 6Q0 0 6 0H96C112 0 116 21 134 21H340V51H0Z"); background: linear-gradient(180deg, #8dc3ff 0, #6fb0ff 55%, #6aa9fb 100%); }
.mock-in .ph-fd-h::before { content: ""; position: absolute; left: 11px; top: 9px; width: 26px; height: 24px; background:
    linear-gradient(110deg, rgba(255,255,255,.34) 0, rgba(255,255,255,.12) 100%) left / 11px 100% no-repeat,
    linear-gradient(110deg, rgba(255,255,255,.34) 0, rgba(255,255,255,.12) 100%) right / 11px 100% no-repeat; clip-path: polygon(0 0, 40% 14%, 40% 100%, 0 100%, 55% 0, 100% 12%, 100% 100%, 55% 100%); }
.mock-in .ph-fd-t { position: absolute; left: 14px; top: 17px; font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 3px rgba(20,60,160,.35); }
.mock-in .ph-fd-b { position: relative; margin-top: -1px; padding: 12px 10px 10px; border-radius: 0 0 4px 4px; display: grid; grid-template-columns: repeat(3, 101px); gap: 8px; background: linear-gradient(180deg, #5f9cf3 0, #86b6fb 45%, #d3e5fe 100%); }
.mock-in .ph-fd-i { position: relative; height: 72px; border-radius: 6px; padding: 13px 0 0 12px; background: linear-gradient(145deg, rgba(255,255,255,.94) 0, rgba(255,255,255,.70) 100%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.8), 0 2px 6px rgba(20,80,200,.1); }
.mock-in .ph-fd-n { position: absolute; left: 12px; top: 43px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .3px; color: #46526a; white-space: nowrap; }
.mock-in .ph-fd--c .ph-fd-h { background: linear-gradient(180deg, #7df2ff 0, #6fe9f6 55%, #67e3ef 100%); }
.mock-in .ph-fd--c .ph-fd-b { background: linear-gradient(180deg, #62e0e4 0, #8aeef2 45%, #c9f9ff 100%); }
.mock-in .ph-fd--c .ph-fd-i { background: linear-gradient(145deg, rgba(255,255,255,.96) 0, rgba(235,255,255,.66) 100%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.85), 0 2px 6px rgba(0,150,170,.1); }


.mock-in .ph-foot { text-align: center; }
.mock-in .ph-foot-t { font-size: 14px; line-height: 20px; font-weight: 700; font-style: italic; letter-spacing: 1px; color: #bdc9de; }
.mock-in .ph-foot-s { margin-top: 1px; font-size: 10px; line-height: 14px; color: #c6cddb; }


.mock-in .ph-sel { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 8px; background: #fff; font-size: 14px; color: var(--ph-ink2); box-shadow: 0 1px 3px rgba(60,100,200,.08); }
.mock-in .ph-sel .ph-ic { font-size: 12px; color: #8d97ab; }
.mock-in .ph-sq { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--ph-blue)); box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.mock-in .ph-px { padding-left: 16px; padding-right: 16px; }
.mock-in .ph-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mock-in .ph-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mock-in .ph-row { display: flex; align-items: center; }



.mock-in {
  
  --dp-bg: #050b16;
  --dp-c1: #19c8ff;            
  --dp-c2: #78c8f6;            
  --dp-c3: #78f6e0;            
  --dp-hi: #6fe3ff;            
  --dp-lo: #0b84be;            
  --dp-mid-rgb: 24, 150, 208;  
  --dp-plate-a: #19607e;       
  --dp-plate-b: #0b3a54;       
  --dp-deep: #0a3550;          
  --dp-warn: #fab15a;          
  --dp-bad: #fa6c61;           
  --dp-ok: #4be3a8;            
  --dp-t1: #eaf3fc;            
  --dp-t2: #cfd6e8;            
  --dp-t3: #8d94a7;            
  --dp-line: rgba(120, 200, 246, .28);
  --dp-glow: rgba(25, 200, 255, .5);
  --dp-rgb: 25, 200, 255;      
  --dp-edge: linear-gradient(135deg, var(--dp-hi) 0%, rgba(var(--dp-rgb), .42) 28%, rgba(var(--dp-rgb), .14) 62%, var(--dp-c1) 100%);
  --dp-panel-top: rgba(14, 62, 94, .78);
  --dp-panel-bot: rgba(4, 18, 32, .9);
  --dp-title-bg: linear-gradient(90deg, rgba(var(--dp-rgb), .36), rgba(var(--dp-rgb), .12) 55%, rgba(var(--dp-rgb), 0));
  
  --dp-font: var(--ui-font);
  --dp-num-font: "DIN Alternate", "Bahnschrift", "DIN Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --dp-num-font-c: "DIN Condensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;  
}


.mock-in .dp-screen { position: absolute; inset: 0; overflow: hidden; background: var(--dp-bg); color: var(--dp-t1); font-family: var(--dp-font); font-weight: 500; }
.mock-in .dp-dots { background-image: radial-gradient(rgba(150, 205, 235, .3) 1.2px, transparent 1.8px); background-size: 48px 48px; background-position: 24px 24px; }
.mock-in .dp-abs { position: absolute; }


.mock-in .dp-panel {
  --cut: 14px; --bd: 1px; --k: var(--dp-c1); --l: 12px; --t: 2px;
  --pg: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --pg-in: polygon(calc(var(--cut) - .4px) 0, 100% 0, 100% calc(100% - var(--cut) + .4px), calc(100% - var(--cut) + .4px) 100%, 0 100%, 0 calc(var(--cut) - .4px));
  position: relative; isolation: isolate; background: var(--dp-edge); clip-path: var(--pg);
}
.mock-in .dp-panel::before {
  content: ""; position: absolute; inset: var(--bd); z-index: -1; clip-path: var(--pg-in);
  background: linear-gradient(180deg, var(--dp-panel-top), var(--dp-panel-bot));
  box-shadow: inset 0 0 28px rgba(var(--dp-rgb), .12);
}
.mock-in .dp-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--k) calc(50% - 1px), var(--k) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--k) calc(50% - 1px), var(--k) calc(50% + 1px), transparent calc(50% + 1px)) 100% 100% / var(--cut) var(--cut) no-repeat,
    linear-gradient(var(--k), var(--k)) var(--cut) 0 / 30px var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) right var(--cut) bottom 0 / 30px var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) 100% 0 / var(--l) var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) 100% 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--k), var(--k)) 0 100% / var(--l) var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) 0 100% / var(--t) var(--l) no-repeat;
}

.mock-in .dp-panel.is-flip {
  --pg: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --pg-in: polygon(0 0, calc(100% - var(--cut) + .4px) 0, 100% calc(var(--cut) - .4px), 100% 100%, calc(var(--cut) - .4px) 100%, 0 calc(100% - var(--cut) + .4px));
}
.mock-in .dp-panel.is-flip::after {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--k) calc(50% - 1px), var(--k) calc(50% + 1px), transparent calc(50% + 1px)) 100% 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1px), var(--k) calc(50% - 1px), var(--k) calc(50% + 1px), transparent calc(50% + 1px)) 0 100% / var(--cut) var(--cut) no-repeat,
    linear-gradient(var(--k), var(--k)) right var(--cut) 0 / 30px var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) var(--cut) 100% / 30px var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) 0 0 / var(--l) var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) 0 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--k), var(--k)) 100% 100% / var(--l) var(--t) no-repeat,
    linear-gradient(var(--k), var(--k)) 100% 100% / var(--t) var(--l) no-repeat;
}
.mock-in .dp-panel.is-soft { --dp-edge: linear-gradient(135deg, rgba(var(--dp-rgb), .55), rgba(var(--dp-rgb), .12) 50%, rgba(var(--dp-rgb), .4)); --k: rgba(var(--dp-rgb), .7); }
.mock-in .dp-panel.is-clear::before { background: linear-gradient(180deg, rgba(8, 36, 58, .35), rgba(3, 12, 22, .45)); }
.mock-in .dp-pad { padding: 14px 18px; }
.mock-in .dp-glow { filter: drop-shadow(0 0 8px var(--dp-glow)); }


.mock-in .dp-title {
  position: relative; display: flex; align-items: center; height: 34px; padding: 0 14px 0 16px;
  background: var(--dp-title-bg);
  border-top: 1px solid rgba(var(--dp-rgb), .2); border-bottom: 1px solid rgba(var(--dp-rgb), .12);
  color: var(--dp-t1); font-size: 19px; font-weight: 700; letter-spacing: 1px; white-space: nowrap;
}
.mock-in .dp-title::before {  
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 7px;
  border-left: 3px solid var(--dp-c1); border-top: 1px solid var(--dp-c1); border-bottom: 1px solid var(--dp-c1);
  border-radius: 3px 0 0 3px; box-shadow: -2px 0 10px rgba(var(--dp-rgb), .6);
}
.mock-in .dp-title.is-plain::before { display: none; }
.mock-in .dp-title.is-plain { padding-left: 4px; }
.mock-in .dp-title-t { display: inline-block; transform: skewX(-8deg); -webkit-text-stroke: .5px currentColor; text-shadow: 0 0 10px rgba(var(--dp-rgb), .55); }
.mock-in .dp-title .dp-more { margin-left: auto; font-size: 15px; font-weight: 400; color: var(--dp-t2); letter-spacing: 0; -webkit-text-stroke: 0; }

.mock-in .dp-arrows {
  display: inline-block; width: 22px; height: 13px; margin-left: 12px; flex: none;
  background: linear-gradient(90deg, var(--dp-c2), var(--dp-c1));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 13'%3E%3Cpath d='M1.5 1.5l5 5-5 5M10 1.5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 13'%3E%3Cpath d='M1.5 1.5l5 5-5 5M10 1.5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mock-in .dp-slashes { display: inline-flex; gap: 6px; }
.mock-in .dp-slashes i { display: block; width: 26px; height: 8px; background: var(--dp-c1); transform: skewX(-40deg); box-shadow: 0 0 10px rgba(var(--dp-rgb), .8); }


.mock-in .dp-sub { display: flex; align-items: center; gap: 10px; height: 24px; color: var(--dp-t1); font-size: 16px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.mock-in .dp-sub > span { position: relative; padding: 0 16px; transform: skewX(-8deg); -webkit-text-stroke: .4px currentColor; }
.mock-in .dp-sub > span::before, .mock-in .dp-sub > span::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--dp-c2), var(--dp-c2)) 0 50% / 2px 100% no-repeat, linear-gradient(var(--dp-c2), var(--dp-c2)) 5px 50% / 2px 56% no-repeat;
}
.mock-in .dp-sub > span::before { left: 0; }
.mock-in .dp-sub > span::after { right: 0; transform: scaleX(-1); }
.mock-in .dp-sub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(234, 243, 252, .9), rgba(234, 243, 252, .08)); }


.mock-in .dp-num { font-family: var(--dp-num-font); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; color: #fff; text-shadow: 0 0 10px rgba(var(--dp-rgb), .4); line-height: 1; }
.mock-in .dp-num--c { font-family: var(--dp-num-font-c); letter-spacing: .3px; }
.mock-in .dp-num--sm { font-size: 18px; }
.mock-in .dp-num--md { font-size: 24px; }
.mock-in .dp-num--lg { font-size: 32px; }
.mock-in .dp-num--xl { font-size: 46px; }
.mock-in .dp-num--c1 { color: var(--dp-c1); text-shadow: 0 0 14px rgba(var(--dp-rgb), .7); }
.mock-in .dp-num--warn { color: var(--dp-warn); text-shadow: 0 0 12px rgba(250, 177, 90, .5); }
.mock-in .dp-unit { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--dp-t3); letter-spacing: 0; }
.mock-in .dp-yoy { display: inline-flex; align-items: center; gap: 4px; margin-left: 14px; font-size: 16px; color: var(--dp-t3); white-space: nowrap; }
.mock-in .dp-yoy b { display: inline-flex; align-items: center; gap: 2px; font-weight: 400; font-family: var(--dp-num-font); }
.mock-in .dp-up { color: var(--dp-bad); }
.mock-in .dp-down { color: var(--dp-ok); }
.mock-in .dp-up::before, .mock-in .dp-down::before {
  content: ""; width: 10px; height: 13px; background: currentColor;
  clip-path: polygon(50% 0, 100% 46%, 68% 46%, 68% 100%, 32% 100%, 32% 46%, 0 46%);
}
.mock-in .dp-down::before { transform: scaleY(-1); }


.mock-in .dp-bar { --h: 11px; position: relative; height: var(--h); background: linear-gradient(90deg, rgba(var(--dp-rgb), .16), rgba(var(--dp-rgb), .1)); box-shadow: inset 0 0 0 1px rgba(var(--dp-rgb), .1); }
.mock-in .dp-bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 50%);
  background: linear-gradient(90deg, rgba(var(--dp-rgb), .35), var(--dp-c1) 85%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  box-shadow: 0 0 10px rgba(var(--dp-rgb), .5);
}
.mock-in .dp-bar > b {
  position: absolute; top: 0; bottom: 0; left: calc(var(--p, 50%) + 3px); width: 5px; background: var(--dp-hi); transform: skewX(-38deg);
  box-shadow: 0 0 8px rgba(var(--dp-rgb), .9);
}
.mock-in .dp-bar.is-warn { --dp-c1: var(--dp-warn); --dp-rgb: 250, 177, 90; }
.mock-in .dp-barrow { display: grid; grid-template-columns: var(--lw, 76px) 1fr var(--vw, 44px); align-items: center; gap: 0 4px; height: var(--rh, 31px); font-size: 16px; color: var(--dp-t2); }
.mock-in .dp-barrow > em { font-style: normal; text-align: right; font-family: var(--dp-num-font-c); font-weight: 700; font-size: 18px; color: #fff; }


.mock-in .dp-hex {
  --s: 64px; --hb: linear-gradient(180deg, var(--dp-hi), var(--dp-lo));
  position: relative; display: grid; place-items: center; width: var(--s); height: calc(var(--s) * 1.1547); isolation: isolate;
  background: var(--hb); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.mock-in .dp-hex::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 35%, rgba(var(--dp-rgb), .5), var(--dp-deep) 70%, #061c2c);
}
.mock-in .dp-hex.is-flat { height: calc(var(--s) * .866); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.mock-in .dp-hex.is-flat::before { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }


.mock-in .dp-row {
  position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; font-size: 17px; color: var(--dp-t1); white-space: nowrap;
  background: linear-gradient(90deg, rgba(var(--dp-rgb), .16), rgba(var(--dp-rgb), .04) 70%, rgba(var(--dp-rgb), 0));
  border-bottom: 1px solid rgba(var(--dp-rgb), .1);
}
.mock-in .dp-row .k { flex: 1; }
.mock-in .dp-row .v { font-family: var(--dp-num-font-c); font-weight: 700; color: #fff; }
.mock-in .dp-row .s { color: var(--dp-t3); }
.mock-in .dp-row .dp-unit { margin: 0 6px 0 0; font-size: 15px; color: var(--dp-t2); }

.mock-in .dp-legend { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 2px 0 0; font-size: 17px; color: var(--dp-t1); }
.mock-in .dp-legend::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: linear-gradient(90deg, rgba(var(--dp-rgb), .55), rgba(var(--dp-rgb), .12)); }
.mock-in .dp-legend .k { flex: 1; }
.mock-in .dp-legend .v { font-family: var(--dp-num-font-c); font-weight: 700; font-size: 20px; color: #fff; }


.mock-in .dp-dot { --c: var(--dp-c1); display: inline-block; flex: none; width: 17px; height: 17px; border-radius: 4px; background: var(--c); border: 2px solid rgba(255, 255, 255, .22); background-clip: padding-box; filter: drop-shadow(0 0 5px var(--c)); }
.mock-in .dp-dot.is-ring { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0 3.2px, transparent 3.8px); border: 2px solid var(--c); filter: drop-shadow(0 0 4px var(--c)); }
.mock-in .dp-dot.is-sm { width: 10px; height: 10px; border-radius: 50%; border: 0; }


.mock-in .dp-beam { position: relative; display: flex; align-items: flex-start; justify-content: center; }
.mock-in .dp-beam-m, .mock-in .dp-beam-s { position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; color: #fff; }
.mock-in .dp-beam-m {
  flex: none; height: 100%; padding: 0 58px; font-size: 31px; font-weight: 800; letter-spacing: 2px; white-space: nowrap;
  background: linear-gradient(90deg, #d4f6ff, var(--dp-c1) 50%, #d4f6ff);
  clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 32px 100%);
}
.mock-in .dp-beam-m::before {
  content: ""; position: absolute; inset: 2px 0 2px 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 120%, rgba(var(--dp-rgb), .55), transparent 70%), linear-gradient(180deg, var(--dp-plate-a), var(--dp-plate-b) 55%, var(--dp-plate-a));
  clip-path: polygon(1.6px 0, calc(100% - 1.6px) 0, calc(100% - 33px) 100%, 33px 100%);
}
.mock-in .dp-beam-m > span, .mock-in .dp-beam-s > span { display: inline-block; transform: skewX(-8deg); -webkit-text-stroke: .6px #fff; text-shadow: 0 0 14px rgba(var(--dp-rgb), .9), 0 2px 3px rgba(0, 20, 40, .6); }
.mock-in .dp-beam-s {
  flex: none; height: 82%; margin-top: 4px; width: 172px; font-size: 21px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(90deg, #d4f6ff, rgba(var(--dp-rgb), .8));
}
.mock-in .dp-beam-s::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: linear-gradient(180deg, var(--dp-plate-a), var(--dp-plate-b)); }
.mock-in .dp-beam-s.is-l { margin-right: -14px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%); }
.mock-in .dp-beam-s.is-l::before { clip-path: polygon(22.5px 0, 100% 0, 100% 100%, .7px 100%); }
.mock-in .dp-beam-s.is-r { margin-left: -14px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%); background: linear-gradient(270deg, #d4f6ff, rgba(var(--dp-rgb), .8)); }
.mock-in .dp-beam-s.is-r::before { clip-path: polygon(0 0, calc(100% - 22.5px) 0, calc(100% - .7px) 100%, 0 100%); }


.mock-in .dp-nav { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--g, 62px); padding-top: 4px; font-size: 21px; letter-spacing: 1px; color: #a9c4d6; }
.mock-in .dp-nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--dp-rgb), .35), var(--dp-c1) 18%, var(--dp-c1) 82%, rgba(var(--dp-rgb), .35)); clip-path: polygon(0 100%, 40px 0, calc(100% - 40px) 0, 100% 100%); }
.mock-in .dp-nav::after { content: ""; position: absolute; inset: 2px 0 0 0; background: linear-gradient(180deg, var(--dp-plate-a), rgba(3, 14, 26, .98)); clip-path: polygon(2.4px 100%, 42px 0, calc(100% - 42px) 0, calc(100% - 2.4px) 100%); }
.mock-in .dp-nav > span { position: relative; z-index: 1; padding: 6px 4px; white-space: nowrap; }
.mock-in .dp-nav > span.on { color: #fff; font-weight: 600; text-shadow: 0 0 14px rgba(var(--dp-rgb), .95); }
.mock-in .dp-nav > span.on::after { content: ""; position: absolute; left: -26px; right: -26px; bottom: -6px; height: 22px; background: radial-gradient(ellipse at 50% 100%, rgba(var(--dp-rgb), .6), transparent 70%); }


.mock-in .dp-kpi { position: relative; white-space: nowrap; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 28px 0 10px; color: var(--dp-t1); font-size: 18px;
  background: linear-gradient(100deg, rgba(var(--dp-mid-rgb), .62), rgba(var(--dp-mid-rgb), .3) 58%, rgba(var(--dp-mid-rgb), .1));
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.mock-in .dp-kpi::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 16px; background: linear-gradient(180deg, var(--dp-hi), rgba(var(--dp-rgb), .6)); clip-path: polygon(calc(100% - 4px) 0, 100% 0, 4px 100%, 0 100%); opacity: .85; }
.mock-in .dp-kpi .k { font-size: 18px; line-height: 1.2; color: var(--dp-t1); }
.mock-in .dp-kpi-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; font-size: 30px; color: var(--dp-c2); border: 1px solid rgba(var(--dp-rgb), .35); background: rgba(8, 40, 66, .55);
  background-image: linear-gradient(var(--dp-c2), var(--dp-c2)), linear-gradient(var(--dp-c2), var(--dp-c2)), linear-gradient(var(--dp-c2), var(--dp-c2)), linear-gradient(var(--dp-c2), var(--dp-c2));
  background-size: 6px 1px, 1px 6px, 6px 1px, 1px 6px; background-position: 0 0, 0 0, 100% 100%, 100% 100%; background-repeat: no-repeat; }

.mock-in .dp-stat { padding: 8px 14px 8px 12px; font-size: 17px; color: var(--dp-t2); background: linear-gradient(180deg, rgba(var(--dp-rgb), .3), rgba(var(--dp-rgb), .05) 78%, rgba(var(--dp-rgb), 0)); }
.mock-in .dp-stat > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; line-height: 1.55; white-space: nowrap; }
.mock-in .dp-stat .dp-num { font-family: var(--dp-num-font-c); font-size: 21px; }
.mock-in .dp-stat .dp-unit { width: 18px; margin: 0 0 0 4px; text-align: left; }

.mock-in .dp-vtab { width: 2.1em; text-align: center; font-size: 19px; line-height: 1.22; letter-spacing: 0; color: #8fb1c8; word-break: break-all; }
.mock-in .dp-vtab.on { color: #fff; text-shadow: 0 0 12px rgba(var(--dp-rgb), .9); }

.mock-in .dp-tri { display: block; width: 28px; height: 20px; background: linear-gradient(135deg, var(--dp-hi), var(--dp-lo)); clip-path: polygon(100% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 6px var(--dp-glow)); }
.mock-in .dp-tri.is-tl { transform: scale(-1, -1); }
.mock-in .dp-hair { height: 1px; background: linear-gradient(90deg, rgba(var(--dp-rgb), .6), rgba(var(--dp-rgb), .05)); }


.mock-in .dp-ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: middle; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mock-in .dp-ico.i-user { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-people { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3.2'/%3E%3Cpath d='M6 19c0-3.5 2.7-6 6-6s6 2.5 6 6'/%3E%3Ccircle cx='5' cy='9.5' r='2.2'/%3E%3Ccircle cx='19' cy='9.5' r='2.2'/%3E%3Cpath d='M1.5 17c0-2.2 1.4-3.8 3.5-3.8M22.5 17c0-2.2-1.4-3.8-3.5-3.8'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-car { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 15.5V11l2-5.5h11l2 5.5v4.5'/%3E%3Cpath d='M3 15.5h18v3.5H3z'/%3E%3Cpath d='M4.5 11h15'/%3E%3Cpath d='M7 18.8V21M17 18.8V21'/%3E%3Ccircle cx='7.5' cy='13.3' r='.7'/%3E%3Ccircle cx='16.5' cy='13.3' r='.7'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-car-ok { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13V9.5l2-4.5h8l2 4.5V11'/%3E%3Cpath d='M4 9.5h12'/%3E%3Cpath d='M2.5 13H11M4 13v3.2'/%3E%3Ccircle cx='6.5' cy='11.2' r='.6'/%3E%3Ccircle cx='13.5' cy='11.2' r='.6'/%3E%3Ccircle cx='17' cy='17' r='4.6'/%3E%3Cpath d='M14.8 17l1.6 1.6 3-3.2'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-car-x { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13V9.5l2-4.5h8l2 4.5V11'/%3E%3Cpath d='M4 9.5h12'/%3E%3Cpath d='M2.5 13H11M4 13v3.2'/%3E%3Ccircle cx='6.5' cy='11.2' r='.6'/%3E%3Ccircle cx='13.5' cy='11.2' r='.6'/%3E%3Ccircle cx='17' cy='17' r='4.6'/%3E%3Cpath d='M15.2 15.2l3.6 3.6M18.8 15.2l-3.6 3.6'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-road { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3L3.5 21M15.5 3l5 18M12 4.5v3.5M12 10.5v3.5M12 16.5v3.5'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-flask { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6.2L4.6 18.4A2 2 0 0 0 6.3 21h11.4a2 2 0 0 0 1.7-2.6L14 9.2V3'/%3E%3Cpath d='M7 15h10'/%3E%3Ccircle cx='11' cy='18' r='.7'/%3E%3Ccircle cx='14' cy='17' r='.6'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-ambulance { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 17.5V8a1 1 0 0 1 1-1h11v10.5M14 10.5h4.2L22 14v3.5h-1.8'/%3E%3Ccircle cx='7' cy='17.5' r='2.2'/%3E%3Ccircle cx='17' cy='17.5' r='2.2'/%3E%3Cpath d='M8 10v4M6 12h4'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-pulse { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5h5l2.4-6.5 4.2 12 2.4-5.5H22'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l8 3v6.2c0 5-3.4 8.2-8 9.2-4.6-1-8-4.2-8-9.2V5.8z'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-bell { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 17v-6a6.5 6.5 0 0 1 13 0v6l2 2h-17z'/%3E%3Cpath d='M10 21.5h4M12 2.5v2'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-alert { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2L22 20.8H2z'/%3E%3Cpath d='M12 10v5.2M12 18v.6'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-factory { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l6 4v-4l6 4V6h3l.5 15z'/%3E%3Cpath d='M7 18h2M12 18h2M17 18h1'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-building { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h9v17M14 9h5v12M3 21h18'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-cube { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l8 4.4v9.6l-8 4.4-8-4.4V7.2z'/%3E%3Cpath d='M12 12l8-4.8M12 12L4 7.2M12 12v9.2'/%3E%3C/svg%3E"); }
.mock-in .dp-ico.i-clock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E"); }



.mock-in {
  --op-b1: #0a46e0;
  --op-b2: #3a9bff;
  --op-sky: #8fd3ff;
  --op-ice: #e6f4ff;
  --op-or: #ffa31a;
  --op-or2: #ff7a00;
  --op-ink: #0b2a6b;
  --op-tx: #27407a;
  --op-line: rgba(10, 70, 224, 0.18);
  --op-en: "Arial Black", "Helvetica Neue", "SF Pro Display", Arial, sans-serif;
}


.mock-in .op-bg {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(143, 211, 255, 0.55), rgba(143, 211, 255, 0) 62%),
    linear-gradient(180deg, #3a9bff 0%, #1f6cf0 42%, #0a46e0 100%);
}
.mock-in .op-bg--sky {
  background:
    radial-gradient(90% 46% at 50% 36%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #25adff 0%, #4fc0ff 46%, #a6defe 100%);
}
.mock-in .op-bg--ice {
  background:
    radial-gradient(70% 40% at 80% 0%, rgba(173, 224, 255, 0.55), rgba(173, 224, 255, 0) 70%),
    linear-gradient(180deg, #f6fbff 0%, #e4f2ff 55%, #cfe5ff 100%);
}
.mock-in .op-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0.9px, rgba(255, 255, 255, 0) 1.6px);
  background-size: 14px 14px;
}
.mock-in .op-dots--dark { background-image: radial-gradient(circle, rgba(10, 70, 224, 0.28) 0.9px, rgba(10, 70, 224, 0) 1.6px); }
.mock-in .op-dots--fade {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 85%);
}

.mock-in .op-glow {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}


.mock-in .op-glass {
  position: relative; border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(90, 150, 255, 0.22),
    0 1px 2px rgba(10, 70, 224, 0.12),
    0 10px 28px rgba(10, 70, 224, 0.18);
  color: var(--op-tx);
}
.mock-in .op-glass--solid { background: linear-gradient(180deg, #ffffff, #f0f6ff); border-color: #fff; }
.mock-in .op-glass--tint {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.5); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(4, 30, 140, 0.28);
}
.mock-in .op-glass--orange {
  background: linear-gradient(135deg, #ffb23a 0%, #ff9a1a 46%, #ffc86a 100%);
  border-color: rgba(255, 236, 190, 0.85); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(200, 100, 0, 0.25), 0 10px 22px rgba(220, 110, 0, 0.28);
}


.mock-in .op-sec { display: flex; align-items: center; gap: 12px; color: var(--op-ink); }
.mock-in .op-sec-n {
  font: italic 900 44px/1 var(--op-en); letter-spacing: -0.02em; padding-right: 6px;
  background: linear-gradient(180deg, #6cc0ff 0%, #0a46e0 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mock-in .op-sec-t { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; }
.mock-in .op-sec-e { font: italic 600 14px/1 var(--ui-num); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(10, 70, 224, 0.34); white-space: nowrap; }
.mock-in .op-sec-l { flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, rgba(10, 70, 224, 0.5), rgba(10, 70, 224, 0)); }
.mock-in .op-sec--light { color: #fff; }
.mock-in .op-sec--light .op-sec-n { background: linear-gradient(180deg, #ffffff 0%, #9fd3ff 100%); -webkit-background-clip: text; background-clip: text; }
.mock-in .op-sec--light .op-sec-e { color: rgba(255, 255, 255, 0.5); }
.mock-in .op-sec--light .op-sec-l { background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); }


.mock-in .op-tag {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--op-b1); background: rgba(10, 70, 224, 0.09); border: 1px solid rgba(10, 70, 224, 0.22);
}
.mock-in .op-tag--blue { color: #fff; border-color: transparent; background: linear-gradient(180deg, #4aa8ff, #0a46e0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.mock-in .op-tag--orange { color: #fff; border-color: transparent; background: linear-gradient(180deg, #ffc247, #ff8f00); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.mock-in .op-tag--white { color: var(--op-b1); border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.92); }
.mock-in .op-tag--line { color: #fff; border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.12); }


.mock-in .op-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 28px; border-radius: 12px;
  font-size: 20px; font-weight: 700; letter-spacing: 0.06em; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #3f8dff 0%, #0a46e0 100%);
  border: 2px solid #0a2fb4;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55), 0 4px 10px rgba(10, 70, 224, 0.32);
}

.mock-in .op-label {
  display: inline-flex; align-items: center; height: 38px; padding: 0 26px 0 14px; font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #43b2ff, #0a6bf0);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.mock-in .op-tab {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px; font-size: 22px; font-weight: 800; color: var(--op-ink); white-space: nowrap;
  background: linear-gradient(180deg, #ffe066, #ffc012);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.mock-in .op-step {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 22px 0 14px; border-radius: 14px 0 0 14px;
  background: linear-gradient(90deg, #cfeaff 0%, rgba(207, 234, 255, 0.15) 100%);
}
.mock-in .op-step-n { font: italic 900 32px/1 var(--op-en); color: var(--op-b1); letter-spacing: -0.02em; }
.mock-in .op-step-t { font-size: 18px; font-weight: 700; color: var(--op-ink); }


.mock-in .op-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--op-tx); }
.mock-in .op-list > li { position: relative; padding-left: 26px; }
.mock-in .op-list > li::before {
  content: ""; position: absolute; left: 0; top: calc(0.775em - 9px); width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234aa8ff'/%3E%3Cstop offset='1' stop-color='%230a46e0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='9.5' fill='url(%23g)'/%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23fff' stroke-opacity='.45'/%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mock-in .op-list--pain > li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb347'/%3E%3Cstop offset='1' stop-color='%23ff7a00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='9.5' fill='url(%23g)'/%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23fff' stroke-opacity='.45'/%3E%3Cpath d='M10 5.2v5.8M10 14.2v.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mock-in .op-list--cross > li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7a6b'/%3E%3Cstop offset='1' stop-color='%23e5362f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='9.5' fill='url(%23g)'/%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23fff' stroke-opacity='.45'/%3E%3Cpath d='M6.6 6.6l6.8 6.8M13.4 6.6l-6.8 6.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mock-in .op-list--dot > li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236cc0ff'/%3E%3Cstop offset='1' stop-color='%230a46e0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 2l7 8-7 8-7-8z' fill='url(%23g)'/%3E%3Cpath d='M10 2l7 8H3z' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E"); width: 14px; height: 14px; top: calc(0.775em - 7px); left: 1px; }
.mock-in .op-list--light { color: #fff; }



.mock-in .op-bar {
  --op-slant: 20px;
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 44px; font-size: 24px; font-weight: 700; letter-spacing: 0.02em; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(150, 70, 0, 0.4);
  background: linear-gradient(180deg, #ffc84d 0%, #ffab1f 42%, #ff9208 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(200, 100, 0, 0.34);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--op-slant)) 100%, var(--op-slant) 100%);
}
.mock-in .op-bar--flat { clip-path: none; border-radius: 12px; }

.mock-in .op-rule { display: block; width: 44px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ff8f00, #ffc84d); }

.mock-in .op-accent { position: relative; padding-left: 14px; }
.mock-in .op-accent::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #ffc84d, #ff8f00); }

.mock-in .op-hl { padding: 0 3px; background: linear-gradient(180deg, transparent 46%, #e8321e 46%, #d52418 100%); border-radius: 2px; }


.mock-in .op-qr {
  display: block; width: 120px; height: 120px; flex: none; background: #0b1630;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM9 0h2v1h-2zM13 0h3v1h-3zM18 0h1v1h-1zM24 0h1v1h-1zM26 0h1v1h-1zM28 0h1v1h-1zM30 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM13 1h2v1h-2zM17 1h1v1h-1zM21 1h2v1h-2zM24 1h1v1h-1zM27 1h2v1h-2zM30 1h1v1h-1zM36 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM10 2h1v1h-1zM13 2h3v1h-3zM17 2h1v1h-1zM19 2h1v1h-1zM21 2h1v1h-1zM30 2h1v1h-1zM32 2h3v1h-3zM36 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h2v1h-2zM12 3h3v1h-3zM18 3h1v1h-1zM21 3h2v1h-2zM24 3h3v1h-3zM30 3h1v1h-1zM32 3h3v1h-3zM36 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h3v1h-3zM14 4h2v1h-2zM17 4h1v1h-1zM19 4h1v1h-1zM23 4h1v1h-1zM25 4h1v1h-1zM30 4h1v1h-1zM32 4h3v1h-3zM36 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h5v1h-5zM16 5h1v1h-1zM18 5h2v1h-2zM23 5h2v1h-2zM30 5h1v1h-1zM36 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h1v1h-1zM24 6h1v1h-1zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h7v1h-7zM8 7h1v1h-1zM11 7h1v1h-1zM13 7h2v1h-2zM16 7h1v1h-1zM18 7h1v1h-1zM23 7h3v1h-3zM28 7h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM10 8h1v1h-1zM15 8h2v1h-2zM18 8h1v1h-1zM24 8h1v1h-1zM29 8h1v1h-1zM35 8h1v1h-1zM2 9h1v1h-1zM5 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM13 9h2v1h-2zM17 9h1v1h-1zM20 9h1v1h-1zM22 9h4v1h-4zM28 9h1v1h-1zM30 9h1v1h-1zM33 9h4v1h-4zM0 10h8v1h-8zM10 10h2v1h-2zM14 10h2v1h-2zM17 10h1v1h-1zM20 10h1v1h-1zM23 10h1v1h-1zM26 10h2v1h-2zM29 10h2v1h-2zM36 10h1v1h-1zM10 11h1v1h-1zM13 11h1v1h-1zM15 11h2v1h-2zM18 11h1v1h-1zM22 11h1v1h-1zM28 11h2v1h-2zM32 11h1v1h-1zM0 12h2v1h-2zM3 12h4v1h-4zM8 12h3v1h-3zM12 12h2v1h-2zM16 12h1v1h-1zM18 12h2v1h-2zM22 12h4v1h-4zM27 12h5v1h-5zM34 12h1v1h-1zM36 12h1v1h-1zM0 13h3v1h-3zM7 13h2v1h-2zM10 13h1v1h-1zM12 13h2v1h-2zM16 13h2v1h-2zM20 13h2v1h-2zM26 13h4v1h-4zM33 13h1v1h-1zM36 13h1v1h-1zM0 14h7v1h-7zM9 14h1v1h-1zM13 14h1v1h-1zM16 14h1v1h-1zM19 14h1v1h-1zM22 14h2v1h-2zM25 14h1v1h-1zM27 14h2v1h-2zM30 14h1v1h-1zM32 14h3v1h-3zM36 14h1v1h-1zM0 15h1v1h-1zM3 15h2v1h-2zM8 15h1v1h-1zM11 15h2v1h-2zM14 15h1v1h-1zM16 15h1v1h-1zM23 15h2v1h-2zM26 15h1v1h-1zM28 15h4v1h-4zM36 15h1v1h-1zM0 16h1v1h-1zM5 16h2v1h-2zM8 16h1v1h-1zM13 16h1v1h-1zM16 16h2v1h-2zM19 16h1v1h-1zM21 16h1v1h-1zM23 16h2v1h-2zM26 16h1v1h-1zM28 16h4v1h-4zM34 16h3v1h-3zM1 17h1v1h-1zM5 17h1v1h-1zM10 17h1v1h-1zM14 17h3v1h-3zM19 17h1v1h-1zM21 17h1v1h-1zM23 17h6v1h-6zM32 17h4v1h-4zM1 18h1v1h-1zM5 18h3v1h-3zM9 18h1v1h-1zM11 18h2v1h-2zM16 18h2v1h-2zM20 18h1v1h-1zM31 18h2v1h-2zM34 18h2v1h-2zM1 19h3v1h-3zM5 19h1v1h-1zM8 19h4v1h-4zM14 19h1v1h-1zM18 19h6v1h-6zM27 19h2v1h-2zM31 19h1v1h-1zM33 19h1v1h-1zM35 19h2v1h-2zM0 20h1v1h-1zM2 20h1v1h-1zM6 20h2v1h-2zM11 20h1v1h-1zM15 20h1v1h-1zM18 20h2v1h-2zM21 20h2v1h-2zM25 20h3v1h-3zM29 20h2v1h-2zM32 20h2v1h-2zM35 20h2v1h-2zM0 21h2v1h-2zM5 21h1v1h-1zM9 21h2v1h-2zM13 21h2v1h-2zM16 21h1v1h-1zM21 21h1v1h-1zM26 21h5v1h-5zM32 21h1v1h-1zM35 21h2v1h-2zM1 22h3v1h-3zM6 22h1v1h-1zM8 22h1v1h-1zM10 22h1v1h-1zM12 22h2v1h-2zM16 22h4v1h-4zM21 22h3v1h-3zM29 22h2v1h-2zM32 22h2v1h-2zM35 22h2v1h-2zM4 23h1v1h-1zM7 23h1v1h-1zM10 23h2v1h-2zM13 23h4v1h-4zM22 23h1v1h-1zM28 23h3v1h-3zM32 23h1v1h-1zM34 23h1v1h-1zM36 23h1v1h-1zM0 24h1v1h-1zM2 24h5v1h-5zM8 24h1v1h-1zM10 24h5v1h-5zM16 24h3v1h-3zM21 24h4v1h-4zM26 24h1v1h-1zM29 24h1v1h-1zM33 24h1v1h-1zM0 25h5v1h-5zM7 25h2v1h-2zM10 25h2v1h-2zM15 25h1v1h-1zM17 25h1v1h-1zM22 25h2v1h-2zM26 25h3v1h-3zM34 25h1v1h-1zM36 25h1v1h-1zM0 26h7v1h-7zM8 26h1v1h-1zM10 26h1v1h-1zM13 26h1v1h-1zM15 26h2v1h-2zM19 26h3v1h-3zM26 26h1v1h-1zM28 26h3v1h-3zM32 26h1v1h-1zM35 26h1v1h-1zM1 27h3v1h-3zM7 27h6v1h-6zM14 27h1v1h-1zM16 27h1v1h-1zM23 27h2v1h-2zM31 27h2v1h-2zM1 28h3v1h-3zM5 28h2v1h-2zM9 28h1v1h-1zM11 28h3v1h-3zM15 28h1v1h-1zM19 28h1v1h-1zM21 28h1v1h-1zM24 28h1v1h-1zM26 28h1v1h-1zM28 28h6v1h-6zM35 28h1v1h-1zM8 29h1v1h-1zM10 29h1v1h-1zM12 29h1v1h-1zM16 29h3v1h-3zM21 29h3v1h-3zM28 29h1v1h-1zM32 29h3v1h-3zM36 29h1v1h-1zM0 30h7v1h-7zM8 30h5v1h-5zM14 30h1v1h-1zM18 30h2v1h-2zM22 30h1v1h-1zM24 30h1v1h-1zM26 30h1v1h-1zM28 30h1v1h-1zM30 30h1v1h-1zM32 30h2v1h-2zM35 30h1v1h-1zM0 31h1v1h-1zM6 31h1v1h-1zM9 31h1v1h-1zM12 31h7v1h-7zM22 31h2v1h-2zM26 31h1v1h-1zM28 31h1v1h-1zM32 31h1v1h-1zM34 31h2v1h-2zM0 32h1v1h-1zM2 32h3v1h-3zM6 32h1v1h-1zM8 32h1v1h-1zM11 32h2v1h-2zM15 32h6v1h-6zM23 32h1v1h-1zM25 32h8v1h-8zM34 32h1v1h-1zM36 32h1v1h-1zM0 33h1v1h-1zM2 33h3v1h-3zM6 33h1v1h-1zM9 33h1v1h-1zM11 33h1v1h-1zM17 33h1v1h-1zM20 33h1v1h-1zM22 33h3v1h-3zM28 33h1v1h-1zM31 33h2v1h-2zM36 33h1v1h-1zM0 34h1v1h-1zM2 34h3v1h-3zM6 34h1v1h-1zM10 34h1v1h-1zM12 34h2v1h-2zM19 34h1v1h-1zM24 34h1v1h-1zM26 34h1v1h-1zM29 34h1v1h-1zM31 34h2v1h-2zM34 34h2v1h-2zM0 35h1v1h-1zM6 35h1v1h-1zM13 35h2v1h-2zM16 35h1v1h-1zM20 35h1v1h-1zM23 35h1v1h-1zM26 35h4v1h-4zM34 35h2v1h-2zM0 36h7v1h-7zM8 36h4v1h-4zM14 36h2v1h-2zM21 36h1v1h-1zM23 36h1v1h-1zM29 36h3v1h-3zM33 36h1v1h-1zM36 36h1v1h-1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM9 0h2v1h-2zM13 0h3v1h-3zM18 0h1v1h-1zM24 0h1v1h-1zM26 0h1v1h-1zM28 0h1v1h-1zM30 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM13 1h2v1h-2zM17 1h1v1h-1zM21 1h2v1h-2zM24 1h1v1h-1zM27 1h2v1h-2zM30 1h1v1h-1zM36 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM10 2h1v1h-1zM13 2h3v1h-3zM17 2h1v1h-1zM19 2h1v1h-1zM21 2h1v1h-1zM30 2h1v1h-1zM32 2h3v1h-3zM36 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h2v1h-2zM12 3h3v1h-3zM18 3h1v1h-1zM21 3h2v1h-2zM24 3h3v1h-3zM30 3h1v1h-1zM32 3h3v1h-3zM36 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h3v1h-3zM14 4h2v1h-2zM17 4h1v1h-1zM19 4h1v1h-1zM23 4h1v1h-1zM25 4h1v1h-1zM30 4h1v1h-1zM32 4h3v1h-3zM36 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h5v1h-5zM16 5h1v1h-1zM18 5h2v1h-2zM23 5h2v1h-2zM30 5h1v1h-1zM36 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h1v1h-1zM24 6h1v1h-1zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h7v1h-7zM8 7h1v1h-1zM11 7h1v1h-1zM13 7h2v1h-2zM16 7h1v1h-1zM18 7h1v1h-1zM23 7h3v1h-3zM28 7h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM5 8h2v1h-2zM8 8h1v1h-1zM10 8h1v1h-1zM15 8h2v1h-2zM18 8h1v1h-1zM24 8h1v1h-1zM29 8h1v1h-1zM35 8h1v1h-1zM2 9h1v1h-1zM5 9h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM13 9h2v1h-2zM17 9h1v1h-1zM20 9h1v1h-1zM22 9h4v1h-4zM28 9h1v1h-1zM30 9h1v1h-1zM33 9h4v1h-4zM0 10h8v1h-8zM10 10h2v1h-2zM14 10h2v1h-2zM17 10h1v1h-1zM20 10h1v1h-1zM23 10h1v1h-1zM26 10h2v1h-2zM29 10h2v1h-2zM36 10h1v1h-1zM10 11h1v1h-1zM13 11h1v1h-1zM15 11h2v1h-2zM18 11h1v1h-1zM22 11h1v1h-1zM28 11h2v1h-2zM32 11h1v1h-1zM0 12h2v1h-2zM3 12h4v1h-4zM8 12h3v1h-3zM12 12h2v1h-2zM16 12h1v1h-1zM18 12h2v1h-2zM22 12h4v1h-4zM27 12h5v1h-5zM34 12h1v1h-1zM36 12h1v1h-1zM0 13h3v1h-3zM7 13h2v1h-2zM10 13h1v1h-1zM12 13h2v1h-2zM16 13h2v1h-2zM20 13h2v1h-2zM26 13h4v1h-4zM33 13h1v1h-1zM36 13h1v1h-1zM0 14h7v1h-7zM9 14h1v1h-1zM13 14h1v1h-1zM16 14h1v1h-1zM19 14h1v1h-1zM22 14h2v1h-2zM25 14h1v1h-1zM27 14h2v1h-2zM30 14h1v1h-1zM32 14h3v1h-3zM36 14h1v1h-1zM0 15h1v1h-1zM3 15h2v1h-2zM8 15h1v1h-1zM11 15h2v1h-2zM14 15h1v1h-1zM16 15h1v1h-1zM23 15h2v1h-2zM26 15h1v1h-1zM28 15h4v1h-4zM36 15h1v1h-1zM0 16h1v1h-1zM5 16h2v1h-2zM8 16h1v1h-1zM13 16h1v1h-1zM16 16h2v1h-2zM19 16h1v1h-1zM21 16h1v1h-1zM23 16h2v1h-2zM26 16h1v1h-1zM28 16h4v1h-4zM34 16h3v1h-3zM1 17h1v1h-1zM5 17h1v1h-1zM10 17h1v1h-1zM14 17h3v1h-3zM19 17h1v1h-1zM21 17h1v1h-1zM23 17h6v1h-6zM32 17h4v1h-4zM1 18h1v1h-1zM5 18h3v1h-3zM9 18h1v1h-1zM11 18h2v1h-2zM16 18h2v1h-2zM20 18h1v1h-1zM31 18h2v1h-2zM34 18h2v1h-2zM1 19h3v1h-3zM5 19h1v1h-1zM8 19h4v1h-4zM14 19h1v1h-1zM18 19h6v1h-6zM27 19h2v1h-2zM31 19h1v1h-1zM33 19h1v1h-1zM35 19h2v1h-2zM0 20h1v1h-1zM2 20h1v1h-1zM6 20h2v1h-2zM11 20h1v1h-1zM15 20h1v1h-1zM18 20h2v1h-2zM21 20h2v1h-2zM25 20h3v1h-3zM29 20h2v1h-2zM32 20h2v1h-2zM35 20h2v1h-2zM0 21h2v1h-2zM5 21h1v1h-1zM9 21h2v1h-2zM13 21h2v1h-2zM16 21h1v1h-1zM21 21h1v1h-1zM26 21h5v1h-5zM32 21h1v1h-1zM35 21h2v1h-2zM1 22h3v1h-3zM6 22h1v1h-1zM8 22h1v1h-1zM10 22h1v1h-1zM12 22h2v1h-2zM16 22h4v1h-4zM21 22h3v1h-3zM29 22h2v1h-2zM32 22h2v1h-2zM35 22h2v1h-2zM4 23h1v1h-1zM7 23h1v1h-1zM10 23h2v1h-2zM13 23h4v1h-4zM22 23h1v1h-1zM28 23h3v1h-3zM32 23h1v1h-1zM34 23h1v1h-1zM36 23h1v1h-1zM0 24h1v1h-1zM2 24h5v1h-5zM8 24h1v1h-1zM10 24h5v1h-5zM16 24h3v1h-3zM21 24h4v1h-4zM26 24h1v1h-1zM29 24h1v1h-1zM33 24h1v1h-1zM0 25h5v1h-5zM7 25h2v1h-2zM10 25h2v1h-2zM15 25h1v1h-1zM17 25h1v1h-1zM22 25h2v1h-2zM26 25h3v1h-3zM34 25h1v1h-1zM36 25h1v1h-1zM0 26h7v1h-7zM8 26h1v1h-1zM10 26h1v1h-1zM13 26h1v1h-1zM15 26h2v1h-2zM19 26h3v1h-3zM26 26h1v1h-1zM28 26h3v1h-3zM32 26h1v1h-1zM35 26h1v1h-1zM1 27h3v1h-3zM7 27h6v1h-6zM14 27h1v1h-1zM16 27h1v1h-1zM23 27h2v1h-2zM31 27h2v1h-2zM1 28h3v1h-3zM5 28h2v1h-2zM9 28h1v1h-1zM11 28h3v1h-3zM15 28h1v1h-1zM19 28h1v1h-1zM21 28h1v1h-1zM24 28h1v1h-1zM26 28h1v1h-1zM28 28h6v1h-6zM35 28h1v1h-1zM8 29h1v1h-1zM10 29h1v1h-1zM12 29h1v1h-1zM16 29h3v1h-3zM21 29h3v1h-3zM28 29h1v1h-1zM32 29h3v1h-3zM36 29h1v1h-1zM0 30h7v1h-7zM8 30h5v1h-5zM14 30h1v1h-1zM18 30h2v1h-2zM22 30h1v1h-1zM24 30h1v1h-1zM26 30h1v1h-1zM28 30h1v1h-1zM30 30h1v1h-1zM32 30h2v1h-2zM35 30h1v1h-1zM0 31h1v1h-1zM6 31h1v1h-1zM9 31h1v1h-1zM12 31h7v1h-7zM22 31h2v1h-2zM26 31h1v1h-1zM28 31h1v1h-1zM32 31h1v1h-1zM34 31h2v1h-2zM0 32h1v1h-1zM2 32h3v1h-3zM6 32h1v1h-1zM8 32h1v1h-1zM11 32h2v1h-2zM15 32h6v1h-6zM23 32h1v1h-1zM25 32h8v1h-8zM34 32h1v1h-1zM36 32h1v1h-1zM0 33h1v1h-1zM2 33h3v1h-3zM6 33h1v1h-1zM9 33h1v1h-1zM11 33h1v1h-1zM17 33h1v1h-1zM20 33h1v1h-1zM22 33h3v1h-3zM28 33h1v1h-1zM31 33h2v1h-2zM36 33h1v1h-1zM0 34h1v1h-1zM2 34h3v1h-3zM6 34h1v1h-1zM10 34h1v1h-1zM12 34h2v1h-2zM19 34h1v1h-1zM24 34h1v1h-1zM26 34h1v1h-1zM29 34h1v1h-1zM31 34h2v1h-2zM34 34h2v1h-2zM0 35h1v1h-1zM6 35h1v1h-1zM13 35h2v1h-2zM16 35h1v1h-1zM20 35h1v1h-1zM23 35h1v1h-1zM26 35h4v1h-4zM34 35h2v1h-2zM0 36h7v1h-7zM8 36h4v1h-4zM14 36h2v1h-2zM21 36h1v1h-1zM23 36h1v1h-1zM29 36h3v1h-3zM33 36h1v1h-1zM36 36h1v1h-1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mock-in .op-qr--b { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM11 0h1v1h-1zM13 0h5v1h-5zM19 0h2v1h-2zM22 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM9 1h1v1h-1zM11 1h3v1h-3zM15 1h1v1h-1zM17 1h1v1h-1zM19 1h1v1h-1zM22 1h1v1h-1zM28 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM12 2h3v1h-3zM16 2h1v1h-1zM18 2h1v1h-1zM22 2h1v1h-1zM24 2h3v1h-3zM28 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM8 3h2v1h-2zM12 3h1v1h-1zM14 3h2v1h-2zM17 3h1v1h-1zM20 3h1v1h-1zM22 3h1v1h-1zM24 3h3v1h-3zM28 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM10 4h2v1h-2zM13 4h1v1h-1zM17 4h2v1h-2zM20 4h1v1h-1zM22 4h1v1h-1zM24 4h3v1h-3zM28 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h3v1h-3zM12 5h2v1h-2zM15 5h2v1h-2zM18 5h3v1h-3zM22 5h1v1h-1zM28 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h7v1h-7zM8 7h3v1h-3zM15 7h1v1h-1zM18 7h3v1h-3zM2 8h5v1h-5zM8 8h3v1h-3zM15 8h4v1h-4zM20 8h1v1h-1zM24 8h1v1h-1zM26 8h1v1h-1zM28 8h1v1h-1zM1 9h1v1h-1zM3 9h1v1h-1zM9 9h11v1h-11zM23 9h1v1h-1zM28 9h1v1h-1zM0 10h1v1h-1zM4 10h3v1h-3zM9 10h6v1h-6zM16 10h4v1h-4zM21 10h2v1h-2zM24 10h1v1h-1zM28 10h1v1h-1zM0 11h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM7 11h1v1h-1zM9 11h3v1h-3zM14 11h2v1h-2zM19 11h3v1h-3zM24 11h3v1h-3zM28 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h4v1h-4zM10 12h8v1h-8zM19 12h3v1h-3zM23 12h4v1h-4zM1 13h5v1h-5zM9 13h4v1h-4zM14 13h8v1h-8zM24 13h1v1h-1zM26 13h1v1h-1zM1 14h4v1h-4zM6 14h1v1h-1zM8 14h1v1h-1zM11 14h2v1h-2zM19 14h1v1h-1zM21 14h3v1h-3zM25 14h3v1h-3zM0 15h1v1h-1zM3 15h2v1h-2zM8 15h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1zM15 15h1v1h-1zM18 15h1v1h-1zM24 15h1v1h-1zM27 15h1v1h-1zM0 16h3v1h-3zM6 16h1v1h-1zM8 16h1v1h-1zM11 16h1v1h-1zM13 16h4v1h-4zM20 16h1v1h-1zM22 16h6v1h-6zM0 17h1v1h-1zM3 17h1v1h-1zM5 17h1v1h-1zM7 17h1v1h-1zM9 17h1v1h-1zM14 17h1v1h-1zM17 17h4v1h-4zM22 17h1v1h-1zM24 17h1v1h-1zM26 17h1v1h-1zM0 18h2v1h-2zM3 18h2v1h-2zM6 18h2v1h-2zM9 18h2v1h-2zM12 18h3v1h-3zM16 18h1v1h-1zM22 18h3v1h-3zM27 18h1v1h-1zM2 19h1v1h-1zM5 19h1v1h-1zM9 19h1v1h-1zM11 19h2v1h-2zM15 19h6v1h-6zM22 19h1v1h-1zM24 19h2v1h-2zM6 20h2v1h-2zM9 20h1v1h-1zM12 20h1v1h-1zM15 20h2v1h-2zM19 20h8v1h-8zM8 21h1v1h-1zM13 21h1v1h-1zM15 21h2v1h-2zM20 21h1v1h-1zM24 21h3v1h-3zM0 22h7v1h-7zM9 22h1v1h-1zM11 22h2v1h-2zM14 22h1v1h-1zM16 22h2v1h-2zM19 22h2v1h-2zM22 22h1v1h-1zM24 22h3v1h-3zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h4v1h-4zM15 23h1v1h-1zM17 23h4v1h-4zM24 23h3v1h-3zM28 23h1v1h-1zM0 24h1v1h-1zM2 24h3v1h-3zM6 24h1v1h-1zM8 24h1v1h-1zM10 24h3v1h-3zM14 24h1v1h-1zM16 24h1v1h-1zM18 24h7v1h-7zM28 24h1v1h-1zM0 25h1v1h-1zM2 25h3v1h-3zM6 25h1v1h-1zM10 25h1v1h-1zM12 25h2v1h-2zM16 25h1v1h-1zM19 25h1v1h-1zM23 25h3v1h-3zM27 25h1v1h-1zM0 26h1v1h-1zM2 26h3v1h-3zM6 26h1v1h-1zM8 26h1v1h-1zM13 26h7v1h-7zM21 26h2v1h-2zM24 26h1v1h-1zM27 26h1v1h-1zM0 27h1v1h-1zM6 27h1v1h-1zM8 27h5v1h-5zM14 27h2v1h-2zM18 27h1v1h-1zM22 27h2v1h-2zM25 27h1v1h-1zM27 27h1v1h-1zM0 28h7v1h-7zM12 28h1v1h-1zM15 28h1v1h-1zM17 28h3v1h-3zM21 28h2v1h-2zM24 28h2v1h-2zM27 28h2v1h-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM11 0h1v1h-1zM13 0h5v1h-5zM19 0h2v1h-2zM22 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM9 1h1v1h-1zM11 1h3v1h-3zM15 1h1v1h-1zM17 1h1v1h-1zM19 1h1v1h-1zM22 1h1v1h-1zM28 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM12 2h3v1h-3zM16 2h1v1h-1zM18 2h1v1h-1zM22 2h1v1h-1zM24 2h3v1h-3zM28 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM8 3h2v1h-2zM12 3h1v1h-1zM14 3h2v1h-2zM17 3h1v1h-1zM20 3h1v1h-1zM22 3h1v1h-1zM24 3h3v1h-3zM28 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM10 4h2v1h-2zM13 4h1v1h-1zM17 4h2v1h-2zM20 4h1v1h-1zM22 4h1v1h-1zM24 4h3v1h-3zM28 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h3v1h-3zM12 5h2v1h-2zM15 5h2v1h-2zM18 5h3v1h-3zM22 5h1v1h-1zM28 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h7v1h-7zM8 7h3v1h-3zM15 7h1v1h-1zM18 7h3v1h-3zM2 8h5v1h-5zM8 8h3v1h-3zM15 8h4v1h-4zM20 8h1v1h-1zM24 8h1v1h-1zM26 8h1v1h-1zM28 8h1v1h-1zM1 9h1v1h-1zM3 9h1v1h-1zM9 9h11v1h-11zM23 9h1v1h-1zM28 9h1v1h-1zM0 10h1v1h-1zM4 10h3v1h-3zM9 10h6v1h-6zM16 10h4v1h-4zM21 10h2v1h-2zM24 10h1v1h-1zM28 10h1v1h-1zM0 11h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM7 11h1v1h-1zM9 11h3v1h-3zM14 11h2v1h-2zM19 11h3v1h-3zM24 11h3v1h-3zM28 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h4v1h-4zM10 12h8v1h-8zM19 12h3v1h-3zM23 12h4v1h-4zM1 13h5v1h-5zM9 13h4v1h-4zM14 13h8v1h-8zM24 13h1v1h-1zM26 13h1v1h-1zM1 14h4v1h-4zM6 14h1v1h-1zM8 14h1v1h-1zM11 14h2v1h-2zM19 14h1v1h-1zM21 14h3v1h-3zM25 14h3v1h-3zM0 15h1v1h-1zM3 15h2v1h-2zM8 15h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1zM15 15h1v1h-1zM18 15h1v1h-1zM24 15h1v1h-1zM27 15h1v1h-1zM0 16h3v1h-3zM6 16h1v1h-1zM8 16h1v1h-1zM11 16h1v1h-1zM13 16h4v1h-4zM20 16h1v1h-1zM22 16h6v1h-6zM0 17h1v1h-1zM3 17h1v1h-1zM5 17h1v1h-1zM7 17h1v1h-1zM9 17h1v1h-1zM14 17h1v1h-1zM17 17h4v1h-4zM22 17h1v1h-1zM24 17h1v1h-1zM26 17h1v1h-1zM0 18h2v1h-2zM3 18h2v1h-2zM6 18h2v1h-2zM9 18h2v1h-2zM12 18h3v1h-3zM16 18h1v1h-1zM22 18h3v1h-3zM27 18h1v1h-1zM2 19h1v1h-1zM5 19h1v1h-1zM9 19h1v1h-1zM11 19h2v1h-2zM15 19h6v1h-6zM22 19h1v1h-1zM24 19h2v1h-2zM6 20h2v1h-2zM9 20h1v1h-1zM12 20h1v1h-1zM15 20h2v1h-2zM19 20h8v1h-8zM8 21h1v1h-1zM13 21h1v1h-1zM15 21h2v1h-2zM20 21h1v1h-1zM24 21h3v1h-3zM0 22h7v1h-7zM9 22h1v1h-1zM11 22h2v1h-2zM14 22h1v1h-1zM16 22h2v1h-2zM19 22h2v1h-2zM22 22h1v1h-1zM24 22h3v1h-3zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM10 23h4v1h-4zM15 23h1v1h-1zM17 23h4v1h-4zM24 23h3v1h-3zM28 23h1v1h-1zM0 24h1v1h-1zM2 24h3v1h-3zM6 24h1v1h-1zM8 24h1v1h-1zM10 24h3v1h-3zM14 24h1v1h-1zM16 24h1v1h-1zM18 24h7v1h-7zM28 24h1v1h-1zM0 25h1v1h-1zM2 25h3v1h-3zM6 25h1v1h-1zM10 25h1v1h-1zM12 25h2v1h-2zM16 25h1v1h-1zM19 25h1v1h-1zM23 25h3v1h-3zM27 25h1v1h-1zM0 26h1v1h-1zM2 26h3v1h-3zM6 26h1v1h-1zM8 26h1v1h-1zM13 26h7v1h-7zM21 26h2v1h-2zM24 26h1v1h-1zM27 26h1v1h-1zM0 27h1v1h-1zM6 27h1v1h-1zM8 27h5v1h-5zM14 27h2v1h-2zM18 27h1v1h-1zM22 27h2v1h-2zM25 27h1v1h-1zM27 27h1v1h-1zM0 28h7v1h-7zM12 28h1v1h-1zM15 28h1v1h-1zM17 28h3v1h-3zM21 28h2v1h-2zM24 28h2v1h-2zM27 28h2v1h-2z'/%3E%3C/svg%3E"); }
.mock-in .op-qr--c { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM9 0h2v1h-2zM12 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM11 1h1v1h-1zM13 1h1v1h-1zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM8 2h3v1h-3zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM8 4h3v1h-3zM13 4h2v1h-2zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM16 5h1v1h-1zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM11 7h1v1h-1zM13 7h4v1h-4zM1 8h1v1h-1zM5 8h3v1h-3zM9 8h3v1h-3zM17 8h2v1h-2zM21 8h3v1h-3zM0 9h3v1h-3zM4 9h2v1h-2zM8 9h3v1h-3zM12 9h1v1h-1zM14 9h1v1h-1zM18 9h2v1h-2zM21 9h1v1h-1zM23 9h2v1h-2zM0 10h2v1h-2zM3 10h5v1h-5zM12 10h1v1h-1zM14 10h3v1h-3zM19 10h1v1h-1zM21 10h2v1h-2zM1 11h1v1h-1zM8 11h1v1h-1zM13 11h1v1h-1zM15 11h1v1h-1zM19 11h2v1h-2zM22 11h2v1h-2zM0 12h1v1h-1zM5 12h3v1h-3zM12 12h2v1h-2zM15 12h1v1h-1zM19 12h1v1h-1zM21 12h2v1h-2zM0 13h1v1h-1zM2 13h2v1h-2zM7 13h3v1h-3zM11 13h1v1h-1zM20 13h1v1h-1zM23 13h1v1h-1zM0 14h2v1h-2zM4 14h4v1h-4zM10 14h1v1h-1zM13 14h1v1h-1zM15 14h1v1h-1zM18 14h1v1h-1zM20 14h1v1h-1zM22 14h1v1h-1zM0 15h4v1h-4zM8 15h3v1h-3zM12 15h1v1h-1zM14 15h5v1h-5zM2 16h1v1h-1zM5 16h2v1h-2zM8 16h1v1h-1zM10 16h1v1h-1zM13 16h1v1h-1zM16 16h8v1h-8zM8 17h1v1h-1zM12 17h3v1h-3zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM10 18h1v1h-1zM12 18h3v1h-3zM16 18h1v1h-1zM18 18h1v1h-1zM20 18h1v1h-1zM22 18h2v1h-2zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h1v1h-1zM12 19h3v1h-3zM16 19h1v1h-1zM20 19h3v1h-3zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM12 20h1v1h-1zM16 20h6v1h-6zM24 20h1v1h-1zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM9 21h1v1h-1zM11 21h2v1h-2zM15 21h2v1h-2zM18 21h7v1h-7zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h1v1h-1zM12 22h2v1h-2zM15 22h1v1h-1zM17 22h1v1h-1zM23 22h2v1h-2zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM11 23h2v1h-2zM14 23h2v1h-2zM17 23h2v1h-2zM20 23h1v1h-1zM22 23h3v1h-3zM0 24h7v1h-7zM9 24h3v1h-3zM13 24h4v1h-4zM19 24h1v1h-1zM21 24h3v1h-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM9 0h2v1h-2zM12 0h2v1h-2zM16 0h1v1h-1zM18 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM11 1h1v1h-1zM13 1h1v1h-1zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM8 2h3v1h-3zM13 2h4v1h-4zM18 2h1v1h-1zM20 2h3v1h-3zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM18 3h1v1h-1zM20 3h3v1h-3zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM8 4h3v1h-3zM13 4h2v1h-2zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM16 5h1v1h-1zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h7v1h-7zM8 7h1v1h-1zM11 7h1v1h-1zM13 7h4v1h-4zM1 8h1v1h-1zM5 8h3v1h-3zM9 8h3v1h-3zM17 8h2v1h-2zM21 8h3v1h-3zM0 9h3v1h-3zM4 9h2v1h-2zM8 9h3v1h-3zM12 9h1v1h-1zM14 9h1v1h-1zM18 9h2v1h-2zM21 9h1v1h-1zM23 9h2v1h-2zM0 10h2v1h-2zM3 10h5v1h-5zM12 10h1v1h-1zM14 10h3v1h-3zM19 10h1v1h-1zM21 10h2v1h-2zM1 11h1v1h-1zM8 11h1v1h-1zM13 11h1v1h-1zM15 11h1v1h-1zM19 11h2v1h-2zM22 11h2v1h-2zM0 12h1v1h-1zM5 12h3v1h-3zM12 12h2v1h-2zM15 12h1v1h-1zM19 12h1v1h-1zM21 12h2v1h-2zM0 13h1v1h-1zM2 13h2v1h-2zM7 13h3v1h-3zM11 13h1v1h-1zM20 13h1v1h-1zM23 13h1v1h-1zM0 14h2v1h-2zM4 14h4v1h-4zM10 14h1v1h-1zM13 14h1v1h-1zM15 14h1v1h-1zM18 14h1v1h-1zM20 14h1v1h-1zM22 14h1v1h-1zM0 15h4v1h-4zM8 15h3v1h-3zM12 15h1v1h-1zM14 15h5v1h-5zM2 16h1v1h-1zM5 16h2v1h-2zM8 16h1v1h-1zM10 16h1v1h-1zM13 16h1v1h-1zM16 16h8v1h-8zM8 17h1v1h-1zM12 17h3v1h-3zM16 17h1v1h-1zM20 17h5v1h-5zM0 18h7v1h-7zM8 18h1v1h-1zM10 18h1v1h-1zM12 18h3v1h-3zM16 18h1v1h-1zM18 18h1v1h-1zM20 18h1v1h-1zM22 18h2v1h-2zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM10 19h1v1h-1zM12 19h3v1h-3zM16 19h1v1h-1zM20 19h3v1h-3zM0 20h1v1h-1zM2 20h3v1h-3zM6 20h1v1h-1zM12 20h1v1h-1zM16 20h6v1h-6zM24 20h1v1h-1zM0 21h1v1h-1zM2 21h3v1h-3zM6 21h1v1h-1zM9 21h1v1h-1zM11 21h2v1h-2zM15 21h2v1h-2zM18 21h7v1h-7zM0 22h1v1h-1zM2 22h3v1h-3zM6 22h1v1h-1zM8 22h1v1h-1zM12 22h2v1h-2zM15 22h1v1h-1zM17 22h1v1h-1zM23 22h2v1h-2zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM11 23h2v1h-2zM14 23h2v1h-2zM17 23h2v1h-2zM20 23h1v1h-1zM22 23h3v1h-3zM0 24h7v1h-7zM9 24h3v1h-3zM13 24h4v1h-4zM19 24h1v1h-1zM21 24h3v1h-3z'/%3E%3C/svg%3E"); }
.mock-in .op-qr--d { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 57' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h1v1h-1zM21 0h1v1h-1zM23 0h3v1h-3zM31 0h1v1h-1zM33 0h2v1h-2zM37 0h1v1h-1zM39 0h2v1h-2zM44 0h2v1h-2zM47 0h2v1h-2zM50 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h3v1h-3zM12 1h2v1h-2zM17 1h1v1h-1zM19 1h2v1h-2zM22 1h2v1h-2zM26 1h4v1h-4zM33 1h1v1h-1zM35 1h6v1h-6zM42 1h3v1h-3zM47 1h1v1h-1zM50 1h1v1h-1zM56 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM8 2h2v1h-2zM13 2h2v1h-2zM16 2h1v1h-1zM18 2h5v1h-5zM26 2h1v1h-1zM29 2h2v1h-2zM33 2h4v1h-4zM38 2h1v1h-1zM41 2h1v1h-1zM43 2h2v1h-2zM46 2h1v1h-1zM48 2h1v1h-1zM50 2h1v1h-1zM52 2h3v1h-3zM56 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM8 3h1v1h-1zM10 3h4v1h-4zM15 3h1v1h-1zM18 3h2v1h-2zM21 3h2v1h-2zM25 3h2v1h-2zM28 3h3v1h-3zM32 3h2v1h-2zM36 3h1v1h-1zM38 3h1v1h-1zM40 3h2v1h-2zM45 3h4v1h-4zM50 3h1v1h-1zM52 3h3v1h-3zM56 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h2v1h-2zM14 4h1v1h-1zM17 4h1v1h-1zM19 4h1v1h-1zM22 4h1v1h-1zM24 4h2v1h-2zM28 4h3v1h-3zM33 4h4v1h-4zM38 4h1v1h-1zM40 4h1v1h-1zM42 4h1v1h-1zM44 4h1v1h-1zM46 4h2v1h-2zM50 4h1v1h-1zM52 4h3v1h-3zM56 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM9 5h2v1h-2zM13 5h2v1h-2zM18 5h2v1h-2zM22 5h1v1h-1zM26 5h4v1h-4zM31 5h1v1h-1zM34 5h1v1h-1zM36 5h3v1h-3zM40 5h2v1h-2zM44 5h1v1h-1zM48 5h1v1h-1zM50 5h1v1h-1zM56 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h1v1h-1zM24 6h1v1h-1zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h1v1h-1zM32 6h1v1h-1zM34 6h1v1h-1zM36 6h1v1h-1zM38 6h1v1h-1zM40 6h1v1h-1zM42 6h1v1h-1zM44 6h1v1h-1zM46 6h1v1h-1zM48 6h1v1h-1zM50 6h7v1h-7zM8 7h1v1h-1zM12 7h2v1h-2zM16 7h1v1h-1zM20 7h1v1h-1zM22 7h3v1h-3zM26 7h2v1h-2zM29 7h2v1h-2zM32 7h4v1h-4zM37 7h2v1h-2zM42 7h1v1h-1zM44 7h1v1h-1zM46 7h1v1h-1zM48 7h1v1h-1zM2 8h2v1h-2zM6 8h2v1h-2zM9 8h1v1h-1zM13 8h1v1h-1zM15 8h4v1h-4zM21 8h3v1h-3zM25 8h6v1h-6zM32 8h1v1h-1zM34 8h1v1h-1zM40 8h2v1h-2zM43 8h1v1h-1zM46 8h1v1h-1zM48 8h1v1h-1zM50 8h5v1h-5zM0 9h1v1h-1zM2 9h4v1h-4zM7 9h1v1h-1zM10 9h1v1h-1zM13 9h2v1h-2zM16 9h1v1h-1zM18 9h1v1h-1zM20 9h1v1h-1zM22 9h2v1h-2zM26 9h1v1h-1zM28 9h5v1h-5zM36 9h2v1h-2zM44 9h2v1h-2zM50 9h1v1h-1zM56 9h1v1h-1zM0 10h3v1h-3zM4 10h6v1h-6zM12 10h1v1h-1zM14 10h1v1h-1zM16 10h2v1h-2zM20 10h1v1h-1zM22 10h4v1h-4zM28 10h19v1h-19zM53 10h4v1h-4zM0 11h2v1h-2zM4 11h1v1h-1zM10 11h2v1h-2zM13 11h2v1h-2zM16 11h2v1h-2zM19 11h4v1h-4zM24 11h3v1h-3zM29 11h1v1h-1zM36 11h2v1h-2zM39 11h1v1h-1zM44 11h3v1h-3zM50 11h2v1h-2zM53 11h4v1h-4zM1 12h2v1h-2zM5 12h3v1h-3zM9 12h1v1h-1zM12 12h1v1h-1zM15 12h5v1h-5zM22 12h1v1h-1zM25 12h4v1h-4zM30 12h2v1h-2zM35 12h2v1h-2zM41 12h2v1h-2zM44 12h1v1h-1zM48 12h1v1h-1zM51 12h1v1h-1zM55 12h2v1h-2zM0 13h1v1h-1zM7 13h1v1h-1zM9 13h2v1h-2zM14 13h1v1h-1zM17 13h1v1h-1zM19 13h1v1h-1zM24 13h5v1h-5zM30 13h1v1h-1zM33 13h3v1h-3zM40 13h3v1h-3zM44 13h2v1h-2zM47 13h1v1h-1zM49 13h1v1h-1zM52 13h2v1h-2zM1 14h1v1h-1zM3 14h5v1h-5zM10 14h2v1h-2zM13 14h1v1h-1zM16 14h3v1h-3zM24 14h2v1h-2zM28 14h1v1h-1zM31 14h1v1h-1zM34 14h1v1h-1zM36 14h3v1h-3zM41 14h2v1h-2zM44 14h1v1h-1zM46 14h2v1h-2zM49 14h1v1h-1zM51 14h1v1h-1zM53 14h4v1h-4zM1 15h2v1h-2zM7 15h1v1h-1zM9 15h2v1h-2zM12 15h1v1h-1zM15 15h2v1h-2zM19 15h1v1h-1zM23 15h1v1h-1zM32 15h1v1h-1zM34 15h2v1h-2zM37 15h1v1h-1zM39 15h1v1h-1zM42 15h6v1h-6zM49 15h1v1h-1zM56 15h1v1h-1zM2 16h1v1h-1zM5 16h5v1h-5zM11 16h1v1h-1zM14 16h2v1h-2zM18 16h2v1h-2zM22 16h2v1h-2zM26 16h1v1h-1zM31 16h1v1h-1zM34 16h1v1h-1zM38 16h3v1h-3zM42 16h2v1h-2zM46 16h1v1h-1zM48 16h2v1h-2zM52 16h1v1h-1zM0 17h3v1h-3zM4 17h1v1h-1zM7 17h4v1h-4zM15 17h2v1h-2zM18 17h1v1h-1zM22 17h1v1h-1zM24 17h3v1h-3zM31 17h2v1h-2zM34 17h1v1h-1zM37 17h2v1h-2zM44 17h2v1h-2zM47 17h6v1h-6zM54 17h2v1h-2zM1 18h4v1h-4zM6 18h2v1h-2zM9 18h1v1h-1zM13 18h4v1h-4zM18 18h1v1h-1zM20 18h1v1h-1zM22 18h1v1h-1zM27 18h8v1h-8zM39 18h2v1h-2zM44 18h1v1h-1zM46 18h1v1h-1zM51 18h2v1h-2zM54 18h1v1h-1zM56 18h1v1h-1zM1 19h2v1h-2zM7 19h4v1h-4zM13 19h3v1h-3zM19 19h1v1h-1zM26 19h4v1h-4zM33 19h3v1h-3zM39 19h1v1h-1zM41 19h3v1h-3zM48 19h1v1h-1zM51 19h5v1h-5zM1 20h1v1h-1zM4 20h1v1h-1zM6 20h3v1h-3zM12 20h1v1h-1zM18 20h1v1h-1zM25 20h1v1h-1zM27 20h8v1h-8zM36 20h4v1h-4zM42 20h1v1h-1zM46 20h1v1h-1zM48 20h2v1h-2zM52 20h1v1h-1zM54 20h2v1h-2zM2 21h4v1h-4zM8 21h1v1h-1zM10 21h4v1h-4zM16 21h1v1h-1zM21 21h2v1h-2zM26 21h1v1h-1zM28 21h1v1h-1zM33 21h1v1h-1zM39 21h2v1h-2zM43 21h1v1h-1zM47 21h1v1h-1zM49 21h1v1h-1zM52 21h1v1h-1zM54 21h1v1h-1zM0 22h3v1h-3zM4 22h6v1h-6zM11 22h1v1h-1zM13 22h1v1h-1zM17 22h1v1h-1zM19 22h5v1h-5zM26 22h1v1h-1zM28 22h2v1h-2zM36 22h1v1h-1zM38 22h1v1h-1zM41 22h2v1h-2zM45 22h2v1h-2zM49 22h1v1h-1zM51 22h1v1h-1zM53 22h1v1h-1zM0 23h1v1h-1zM2 23h4v1h-4zM10 23h2v1h-2zM16 23h2v1h-2zM19 23h1v1h-1zM21 23h3v1h-3zM25 23h1v1h-1zM27 23h2v1h-2zM31 23h1v1h-1zM34 23h3v1h-3zM38 23h1v1h-1zM40 23h3v1h-3zM44 23h2v1h-2zM48 23h1v1h-1zM50 23h1v1h-1zM52 23h1v1h-1zM54 23h2v1h-2zM0 24h8v1h-8zM9 24h1v1h-1zM12 24h5v1h-5zM18 24h2v1h-2zM22 24h1v1h-1zM25 24h2v1h-2zM28 24h1v1h-1zM30 24h1v1h-1zM32 24h3v1h-3zM36 24h3v1h-3zM40 24h1v1h-1zM43 24h2v1h-2zM47 24h1v1h-1zM49 24h1v1h-1zM52 24h1v1h-1zM54 24h3v1h-3zM3 25h3v1h-3zM11 25h2v1h-2zM14 25h2v1h-2zM19 25h2v1h-2zM22 25h4v1h-4zM27 25h1v1h-1zM29 25h2v1h-2zM32 25h1v1h-1zM35 25h4v1h-4zM40 25h2v1h-2zM44 25h2v1h-2zM47 25h1v1h-1zM53 25h1v1h-1zM55 25h2v1h-2zM0 26h1v1h-1zM2 26h3v1h-3zM6 26h3v1h-3zM10 26h3v1h-3zM16 26h1v1h-1zM18 26h1v1h-1zM20 26h2v1h-2zM25 26h1v1h-1zM27 26h5v1h-5zM33 26h1v1h-1zM35 26h2v1h-2zM39 26h2v1h-2zM42 26h1v1h-1zM45 26h5v1h-5zM52 26h2v1h-2zM55 26h1v1h-1zM0 27h1v1h-1zM3 27h1v1h-1zM7 27h1v1h-1zM11 27h1v1h-1zM13 27h1v1h-1zM19 27h2v1h-2zM22 27h1v1h-1zM24 27h3v1h-3zM31 27h2v1h-2zM36 27h3v1h-3zM43 27h1v1h-1zM47 27h2v1h-2zM51 27h3v1h-3zM55 27h1v1h-1zM0 28h1v1h-1zM2 28h3v1h-3zM6 28h1v1h-1zM8 28h1v1h-1zM12 28h1v1h-1zM14 28h3v1h-3zM19 28h2v1h-2zM24 28h4v1h-4zM29 28h5v1h-5zM35 28h1v1h-1zM39 28h2v1h-2zM42 28h2v1h-2zM45 28h1v1h-1zM48 28h2v1h-2zM54 28h3v1h-3zM1 29h2v1h-2zM5 29h1v1h-1zM8 29h1v1h-1zM10 29h3v1h-3zM14 29h1v1h-1zM16 29h6v1h-6zM25 29h2v1h-2zM29 29h1v1h-1zM32 29h2v1h-2zM35 29h1v1h-1zM37 29h1v1h-1zM39 29h1v1h-1zM41 29h1v1h-1zM43 29h1v1h-1zM46 29h2v1h-2zM49 29h3v1h-3zM53 29h2v1h-2zM3 30h1v1h-1zM6 30h2v1h-2zM11 30h1v1h-1zM14 30h1v1h-1zM16 30h1v1h-1zM20 30h1v1h-1zM23 30h1v1h-1zM26 30h1v1h-1zM28 30h5v1h-5zM36 30h1v1h-1zM38 30h2v1h-2zM42 30h1v1h-1zM50 30h1v1h-1zM54 30h2v1h-2zM0 31h1v1h-1zM2 31h2v1h-2zM8 31h1v1h-1zM10 31h2v1h-2zM14 31h1v1h-1zM16 31h1v1h-1zM19 31h2v1h-2zM24 31h3v1h-3zM29 31h3v1h-3zM35 31h1v1h-1zM38 31h1v1h-1zM40 31h2v1h-2zM43 31h2v1h-2zM47 31h3v1h-3zM51 31h2v1h-2zM54 31h2v1h-2zM3 32h1v1h-1zM6 32h2v1h-2zM10 32h1v1h-1zM13 32h2v1h-2zM17 32h1v1h-1zM21 32h2v1h-2zM26 32h1v1h-1zM28 32h1v1h-1zM33 32h2v1h-2zM37 32h1v1h-1zM41 32h1v1h-1zM43 32h2v1h-2zM46 32h2v1h-2zM50 32h1v1h-1zM52 32h1v1h-1zM55 32h1v1h-1zM0 33h2v1h-2zM3 33h1v1h-1zM8 33h2v1h-2zM14 33h2v1h-2zM18 33h6v1h-6zM26 33h2v1h-2zM29 33h1v1h-1zM31 33h6v1h-6zM38 33h1v1h-1zM40 33h1v1h-1zM42 33h2v1h-2zM46 33h1v1h-1zM49 33h1v1h-1zM52 33h3v1h-3zM56 33h1v1h-1zM0 34h1v1h-1zM4 34h3v1h-3zM8 34h1v1h-1zM10 34h1v1h-1zM12 34h1v1h-1zM14 34h2v1h-2zM18 34h1v1h-1zM24 34h1v1h-1zM27 34h1v1h-1zM30 34h2v1h-2zM33 34h3v1h-3zM37 34h2v1h-2zM43 34h2v1h-2zM46 34h1v1h-1zM49 34h2v1h-2zM53 34h4v1h-4zM2 35h4v1h-4zM8 35h3v1h-3zM12 35h1v1h-1zM14 35h1v1h-1zM17 35h4v1h-4zM22 35h2v1h-2zM28 35h6v1h-6zM35 35h1v1h-1zM38 35h3v1h-3zM42 35h3v1h-3zM47 35h2v1h-2zM51 35h1v1h-1zM53 35h1v1h-1zM56 35h1v1h-1zM2 36h6v1h-6zM9 36h2v1h-2zM12 36h1v1h-1zM15 36h3v1h-3zM19 36h1v1h-1zM21 36h4v1h-4zM26 36h2v1h-2zM31 36h1v1h-1zM33 36h1v1h-1zM36 36h1v1h-1zM41 36h2v1h-2zM44 36h2v1h-2zM48 36h1v1h-1zM51 36h1v1h-1zM53 36h2v1h-2zM56 36h1v1h-1zM0 37h6v1h-6zM7 37h1v1h-1zM9 37h1v1h-1zM12 37h1v1h-1zM14 37h1v1h-1zM16 37h3v1h-3zM21 37h1v1h-1zM25 37h1v1h-1zM28 37h3v1h-3zM32 37h1v1h-1zM34 37h1v1h-1zM37 37h1v1h-1zM39 37h1v1h-1zM42 37h2v1h-2zM45 37h3v1h-3zM50 37h3v1h-3zM54 37h1v1h-1zM0 38h2v1h-2zM4 38h3v1h-3zM10 38h2v1h-2zM13 38h5v1h-5zM21 38h1v1h-1zM23 38h2v1h-2zM26 38h1v1h-1zM28 38h2v1h-2zM31 38h1v1h-1zM33 38h1v1h-1zM35 38h1v1h-1zM39 38h5v1h-5zM46 38h6v1h-6zM2 39h3v1h-3zM8 39h1v1h-1zM12 39h3v1h-3zM18 39h1v1h-1zM21 39h1v1h-1zM23 39h1v1h-1zM25 39h1v1h-1zM27 39h1v1h-1zM29 39h2v1h-2zM32 39h1v1h-1zM34 39h2v1h-2zM38 39h5v1h-5zM45 39h1v1h-1zM47 39h3v1h-3zM51 39h2v1h-2zM54 39h2v1h-2zM1 40h1v1h-1zM4 40h6v1h-6zM11 40h1v1h-1zM13 40h3v1h-3zM18 40h2v1h-2zM25 40h1v1h-1zM27 40h4v1h-4zM32 40h1v1h-1zM38 40h3v1h-3zM42 40h2v1h-2zM45 40h1v1h-1zM47 40h1v1h-1zM54 40h2v1h-2zM0 41h3v1h-3zM7 41h3v1h-3zM11 41h2v1h-2zM16 41h2v1h-2zM19 41h3v1h-3zM23 41h1v1h-1zM28 41h2v1h-2zM31 41h3v1h-3zM35 41h3v1h-3zM39 41h3v1h-3zM44 41h1v1h-1zM47 41h1v1h-1zM50 41h1v1h-1zM54 41h3v1h-3zM3 42h1v1h-1zM5 42h3v1h-3zM10 42h1v1h-1zM13 42h1v1h-1zM15 42h1v1h-1zM19 42h1v1h-1zM22 42h1v1h-1zM24 42h7v1h-7zM33 42h1v1h-1zM37 42h1v1h-1zM40 42h1v1h-1zM42 42h1v1h-1zM44 42h1v1h-1zM47 42h1v1h-1zM49 42h1v1h-1zM51 42h1v1h-1zM54 42h3v1h-3zM1 43h2v1h-2zM5 43h1v1h-1zM7 43h1v1h-1zM13 43h1v1h-1zM15 43h8v1h-8zM24 43h2v1h-2zM27 43h1v1h-1zM29 43h1v1h-1zM31 43h3v1h-3zM36 43h1v1h-1zM39 43h7v1h-7zM47 43h1v1h-1zM49 43h1v1h-1zM51 43h2v1h-2zM54 43h1v1h-1zM56 43h1v1h-1zM0 44h1v1h-1zM2 44h3v1h-3zM6 44h1v1h-1zM8 44h2v1h-2zM11 44h2v1h-2zM19 44h1v1h-1zM21 44h1v1h-1zM23 44h2v1h-2zM27 44h3v1h-3zM32 44h1v1h-1zM34 44h1v1h-1zM37 44h4v1h-4zM42 44h6v1h-6zM49 44h3v1h-3zM54 44h2v1h-2zM0 45h1v1h-1zM5 45h1v1h-1zM7 45h2v1h-2zM11 45h1v1h-1zM13 45h1v1h-1zM15 45h1v1h-1zM18 45h1v1h-1zM21 45h1v1h-1zM23 45h1v1h-1zM26 45h1v1h-1zM28 45h1v1h-1zM30 45h1v1h-1zM32 45h1v1h-1zM37 45h3v1h-3zM41 45h1v1h-1zM43 45h4v1h-4zM48 45h1v1h-1zM51 45h1v1h-1zM53 45h1v1h-1zM55 45h2v1h-2zM1 46h2v1h-2zM4 46h3v1h-3zM8 46h1v1h-1zM14 46h2v1h-2zM17 46h1v1h-1zM19 46h2v1h-2zM22 46h3v1h-3zM26 46h3v1h-3zM30 46h3v1h-3zM34 46h1v1h-1zM36 46h1v1h-1zM39 46h3v1h-3zM45 46h3v1h-3zM50 46h2v1h-2zM53 46h2v1h-2zM56 46h1v1h-1zM0 47h2v1h-2zM9 47h1v1h-1zM12 47h2v1h-2zM15 47h2v1h-2zM19 47h1v1h-1zM21 47h1v1h-1zM23 47h1v1h-1zM25 47h1v1h-1zM27 47h1v1h-1zM29 47h1v1h-1zM31 47h1v1h-1zM33 47h3v1h-3zM37 47h2v1h-2zM40 47h6v1h-6zM47 47h1v1h-1zM49 47h1v1h-1zM52 47h2v1h-2zM56 47h1v1h-1zM1 48h1v1h-1zM4 48h3v1h-3zM8 48h1v1h-1zM10 48h2v1h-2zM13 48h3v1h-3zM19 48h2v1h-2zM23 48h1v1h-1zM26 48h1v1h-1zM28 48h5v1h-5zM34 48h7v1h-7zM47 48h6v1h-6zM54 48h2v1h-2zM8 49h3v1h-3zM12 49h2v1h-2zM15 49h1v1h-1zM19 49h2v1h-2zM24 49h1v1h-1zM28 49h1v1h-1zM30 49h1v1h-1zM35 49h1v1h-1zM37 49h3v1h-3zM41 49h1v1h-1zM44 49h3v1h-3zM48 49h1v1h-1zM52 49h2v1h-2zM55 49h1v1h-1zM0 50h7v1h-7zM9 50h1v1h-1zM11 50h1v1h-1zM13 50h2v1h-2zM16 50h1v1h-1zM22 50h3v1h-3zM27 50h2v1h-2zM30 50h1v1h-1zM36 50h9v1h-9zM48 50h1v1h-1zM50 50h1v1h-1zM52 50h1v1h-1zM56 50h1v1h-1zM0 51h1v1h-1zM6 51h1v1h-1zM10 51h7v1h-7zM19 51h3v1h-3zM23 51h1v1h-1zM25 51h1v1h-1zM28 51h6v1h-6zM36 51h1v1h-1zM40 51h2v1h-2zM44 51h2v1h-2zM48 51h1v1h-1zM52 51h1v1h-1zM55 51h1v1h-1zM0 52h1v1h-1zM2 52h3v1h-3zM6 52h1v1h-1zM9 52h1v1h-1zM12 52h2v1h-2zM15 52h3v1h-3zM21 52h1v1h-1zM23 52h2v1h-2zM26 52h1v1h-1zM29 52h1v1h-1zM31 52h3v1h-3zM35 52h3v1h-3zM42 52h1v1h-1zM44 52h1v1h-1zM46 52h7v1h-7zM55 52h2v1h-2zM0 53h1v1h-1zM2 53h3v1h-3zM6 53h1v1h-1zM9 53h1v1h-1zM14 53h3v1h-3zM18 53h2v1h-2zM22 53h2v1h-2zM26 53h1v1h-1zM28 53h2v1h-2zM32 53h2v1h-2zM36 53h2v1h-2zM39 53h1v1h-1zM42 53h1v1h-1zM49 53h3v1h-3zM53 53h1v1h-1zM56 53h1v1h-1zM0 54h1v1h-1zM2 54h3v1h-3zM6 54h1v1h-1zM9 54h2v1h-2zM13 54h2v1h-2zM17 54h2v1h-2zM21 54h2v1h-2zM25 54h1v1h-1zM29 54h2v1h-2zM38 54h1v1h-1zM41 54h2v1h-2zM44 54h1v1h-1zM46 54h1v1h-1zM48 54h3v1h-3zM52 54h1v1h-1zM55 54h1v1h-1zM0 55h1v1h-1zM6 55h1v1h-1zM10 55h1v1h-1zM13 55h1v1h-1zM15 55h1v1h-1zM20 55h2v1h-2zM23 55h6v1h-6zM30 55h1v1h-1zM34 55h1v1h-1zM37 55h2v1h-2zM44 55h1v1h-1zM46 55h6v1h-6zM55 55h2v1h-2zM0 56h7v1h-7zM8 56h1v1h-1zM10 56h1v1h-1zM12 56h1v1h-1zM15 56h2v1h-2zM19 56h1v1h-1zM21 56h7v1h-7zM29 56h2v1h-2zM32 56h1v1h-1zM41 56h2v1h-2zM44 56h3v1h-3zM48 56h1v1h-1zM54 56h1v1h-1zM56 56h1v1h-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 57' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1h-7zM13 0h2v1h-2zM16 0h1v1h-1zM18 0h1v1h-1zM21 0h1v1h-1zM23 0h3v1h-3zM31 0h1v1h-1zM33 0h2v1h-2zM37 0h1v1h-1zM39 0h2v1h-2zM44 0h2v1h-2zM47 0h2v1h-2zM50 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h3v1h-3zM12 1h2v1h-2zM17 1h1v1h-1zM19 1h2v1h-2zM22 1h2v1h-2zM26 1h4v1h-4zM33 1h1v1h-1zM35 1h6v1h-6zM42 1h3v1h-3zM47 1h1v1h-1zM50 1h1v1h-1zM56 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM8 2h2v1h-2zM13 2h2v1h-2zM16 2h1v1h-1zM18 2h5v1h-5zM26 2h1v1h-1zM29 2h2v1h-2zM33 2h4v1h-4zM38 2h1v1h-1zM41 2h1v1h-1zM43 2h2v1h-2zM46 2h1v1h-1zM48 2h1v1h-1zM50 2h1v1h-1zM52 2h3v1h-3zM56 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM8 3h1v1h-1zM10 3h4v1h-4zM15 3h1v1h-1zM18 3h2v1h-2zM21 3h2v1h-2zM25 3h2v1h-2zM28 3h3v1h-3zM32 3h2v1h-2zM36 3h1v1h-1zM38 3h1v1h-1zM40 3h2v1h-2zM45 3h4v1h-4zM50 3h1v1h-1zM52 3h3v1h-3zM56 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h2v1h-2zM14 4h1v1h-1zM17 4h1v1h-1zM19 4h1v1h-1zM22 4h1v1h-1zM24 4h2v1h-2zM28 4h3v1h-3zM33 4h4v1h-4zM38 4h1v1h-1zM40 4h1v1h-1zM42 4h1v1h-1zM44 4h1v1h-1zM46 4h2v1h-2zM50 4h1v1h-1zM52 4h3v1h-3zM56 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM9 5h2v1h-2zM13 5h2v1h-2zM18 5h2v1h-2zM22 5h1v1h-1zM26 5h4v1h-4zM31 5h1v1h-1zM34 5h1v1h-1zM36 5h3v1h-3zM40 5h2v1h-2zM44 5h1v1h-1zM48 5h1v1h-1zM50 5h1v1h-1zM56 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h1v1h-1zM24 6h1v1h-1zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h1v1h-1zM32 6h1v1h-1zM34 6h1v1h-1zM36 6h1v1h-1zM38 6h1v1h-1zM40 6h1v1h-1zM42 6h1v1h-1zM44 6h1v1h-1zM46 6h1v1h-1zM48 6h1v1h-1zM50 6h7v1h-7zM8 7h1v1h-1zM12 7h2v1h-2zM16 7h1v1h-1zM20 7h1v1h-1zM22 7h3v1h-3zM26 7h2v1h-2zM29 7h2v1h-2zM32 7h4v1h-4zM37 7h2v1h-2zM42 7h1v1h-1zM44 7h1v1h-1zM46 7h1v1h-1zM48 7h1v1h-1zM2 8h2v1h-2zM6 8h2v1h-2zM9 8h1v1h-1zM13 8h1v1h-1zM15 8h4v1h-4zM21 8h3v1h-3zM25 8h6v1h-6zM32 8h1v1h-1zM34 8h1v1h-1zM40 8h2v1h-2zM43 8h1v1h-1zM46 8h1v1h-1zM48 8h1v1h-1zM50 8h5v1h-5zM0 9h1v1h-1zM2 9h4v1h-4zM7 9h1v1h-1zM10 9h1v1h-1zM13 9h2v1h-2zM16 9h1v1h-1zM18 9h1v1h-1zM20 9h1v1h-1zM22 9h2v1h-2zM26 9h1v1h-1zM28 9h5v1h-5zM36 9h2v1h-2zM44 9h2v1h-2zM50 9h1v1h-1zM56 9h1v1h-1zM0 10h3v1h-3zM4 10h6v1h-6zM12 10h1v1h-1zM14 10h1v1h-1zM16 10h2v1h-2zM20 10h1v1h-1zM22 10h4v1h-4zM28 10h19v1h-19zM53 10h4v1h-4zM0 11h2v1h-2zM4 11h1v1h-1zM10 11h2v1h-2zM13 11h2v1h-2zM16 11h2v1h-2zM19 11h4v1h-4zM24 11h3v1h-3zM29 11h1v1h-1zM36 11h2v1h-2zM39 11h1v1h-1zM44 11h3v1h-3zM50 11h2v1h-2zM53 11h4v1h-4zM1 12h2v1h-2zM5 12h3v1h-3zM9 12h1v1h-1zM12 12h1v1h-1zM15 12h5v1h-5zM22 12h1v1h-1zM25 12h4v1h-4zM30 12h2v1h-2zM35 12h2v1h-2zM41 12h2v1h-2zM44 12h1v1h-1zM48 12h1v1h-1zM51 12h1v1h-1zM55 12h2v1h-2zM0 13h1v1h-1zM7 13h1v1h-1zM9 13h2v1h-2zM14 13h1v1h-1zM17 13h1v1h-1zM19 13h1v1h-1zM24 13h5v1h-5zM30 13h1v1h-1zM33 13h3v1h-3zM40 13h3v1h-3zM44 13h2v1h-2zM47 13h1v1h-1zM49 13h1v1h-1zM52 13h2v1h-2zM1 14h1v1h-1zM3 14h5v1h-5zM10 14h2v1h-2zM13 14h1v1h-1zM16 14h3v1h-3zM24 14h2v1h-2zM28 14h1v1h-1zM31 14h1v1h-1zM34 14h1v1h-1zM36 14h3v1h-3zM41 14h2v1h-2zM44 14h1v1h-1zM46 14h2v1h-2zM49 14h1v1h-1zM51 14h1v1h-1zM53 14h4v1h-4zM1 15h2v1h-2zM7 15h1v1h-1zM9 15h2v1h-2zM12 15h1v1h-1zM15 15h2v1h-2zM19 15h1v1h-1zM23 15h1v1h-1zM32 15h1v1h-1zM34 15h2v1h-2zM37 15h1v1h-1zM39 15h1v1h-1zM42 15h6v1h-6zM49 15h1v1h-1zM56 15h1v1h-1zM2 16h1v1h-1zM5 16h5v1h-5zM11 16h1v1h-1zM14 16h2v1h-2zM18 16h2v1h-2zM22 16h2v1h-2zM26 16h1v1h-1zM31 16h1v1h-1zM34 16h1v1h-1zM38 16h3v1h-3zM42 16h2v1h-2zM46 16h1v1h-1zM48 16h2v1h-2zM52 16h1v1h-1zM0 17h3v1h-3zM4 17h1v1h-1zM7 17h4v1h-4zM15 17h2v1h-2zM18 17h1v1h-1zM22 17h1v1h-1zM24 17h3v1h-3zM31 17h2v1h-2zM34 17h1v1h-1zM37 17h2v1h-2zM44 17h2v1h-2zM47 17h6v1h-6zM54 17h2v1h-2zM1 18h4v1h-4zM6 18h2v1h-2zM9 18h1v1h-1zM13 18h4v1h-4zM18 18h1v1h-1zM20 18h1v1h-1zM22 18h1v1h-1zM27 18h8v1h-8zM39 18h2v1h-2zM44 18h1v1h-1zM46 18h1v1h-1zM51 18h2v1h-2zM54 18h1v1h-1zM56 18h1v1h-1zM1 19h2v1h-2zM7 19h4v1h-4zM13 19h3v1h-3zM19 19h1v1h-1zM26 19h4v1h-4zM33 19h3v1h-3zM39 19h1v1h-1zM41 19h3v1h-3zM48 19h1v1h-1zM51 19h5v1h-5zM1 20h1v1h-1zM4 20h1v1h-1zM6 20h3v1h-3zM12 20h1v1h-1zM18 20h1v1h-1zM25 20h1v1h-1zM27 20h8v1h-8zM36 20h4v1h-4zM42 20h1v1h-1zM46 20h1v1h-1zM48 20h2v1h-2zM52 20h1v1h-1zM54 20h2v1h-2zM2 21h4v1h-4zM8 21h1v1h-1zM10 21h4v1h-4zM16 21h1v1h-1zM21 21h2v1h-2zM26 21h1v1h-1zM28 21h1v1h-1zM33 21h1v1h-1zM39 21h2v1h-2zM43 21h1v1h-1zM47 21h1v1h-1zM49 21h1v1h-1zM52 21h1v1h-1zM54 21h1v1h-1zM0 22h3v1h-3zM4 22h6v1h-6zM11 22h1v1h-1zM13 22h1v1h-1zM17 22h1v1h-1zM19 22h5v1h-5zM26 22h1v1h-1zM28 22h2v1h-2zM36 22h1v1h-1zM38 22h1v1h-1zM41 22h2v1h-2zM45 22h2v1h-2zM49 22h1v1h-1zM51 22h1v1h-1zM53 22h1v1h-1zM0 23h1v1h-1zM2 23h4v1h-4zM10 23h2v1h-2zM16 23h2v1h-2zM19 23h1v1h-1zM21 23h3v1h-3zM25 23h1v1h-1zM27 23h2v1h-2zM31 23h1v1h-1zM34 23h3v1h-3zM38 23h1v1h-1zM40 23h3v1h-3zM44 23h2v1h-2zM48 23h1v1h-1zM50 23h1v1h-1zM52 23h1v1h-1zM54 23h2v1h-2zM0 24h8v1h-8zM9 24h1v1h-1zM12 24h5v1h-5zM18 24h2v1h-2zM22 24h1v1h-1zM25 24h2v1h-2zM28 24h1v1h-1zM30 24h1v1h-1zM32 24h3v1h-3zM36 24h3v1h-3zM40 24h1v1h-1zM43 24h2v1h-2zM47 24h1v1h-1zM49 24h1v1h-1zM52 24h1v1h-1zM54 24h3v1h-3zM3 25h3v1h-3zM11 25h2v1h-2zM14 25h2v1h-2zM19 25h2v1h-2zM22 25h4v1h-4zM27 25h1v1h-1zM29 25h2v1h-2zM32 25h1v1h-1zM35 25h4v1h-4zM40 25h2v1h-2zM44 25h2v1h-2zM47 25h1v1h-1zM53 25h1v1h-1zM55 25h2v1h-2zM0 26h1v1h-1zM2 26h3v1h-3zM6 26h3v1h-3zM10 26h3v1h-3zM16 26h1v1h-1zM18 26h1v1h-1zM20 26h2v1h-2zM25 26h1v1h-1zM27 26h5v1h-5zM33 26h1v1h-1zM35 26h2v1h-2zM39 26h2v1h-2zM42 26h1v1h-1zM45 26h5v1h-5zM52 26h2v1h-2zM55 26h1v1h-1zM0 27h1v1h-1zM3 27h1v1h-1zM7 27h1v1h-1zM11 27h1v1h-1zM13 27h1v1h-1zM19 27h2v1h-2zM22 27h1v1h-1zM24 27h3v1h-3zM31 27h2v1h-2zM36 27h3v1h-3zM43 27h1v1h-1zM47 27h2v1h-2zM51 27h3v1h-3zM55 27h1v1h-1zM0 28h1v1h-1zM2 28h3v1h-3zM6 28h1v1h-1zM8 28h1v1h-1zM12 28h1v1h-1zM14 28h3v1h-3zM19 28h2v1h-2zM24 28h4v1h-4zM29 28h5v1h-5zM35 28h1v1h-1zM39 28h2v1h-2zM42 28h2v1h-2zM45 28h1v1h-1zM48 28h2v1h-2zM54 28h3v1h-3zM1 29h2v1h-2zM5 29h1v1h-1zM8 29h1v1h-1zM10 29h3v1h-3zM14 29h1v1h-1zM16 29h6v1h-6zM25 29h2v1h-2zM29 29h1v1h-1zM32 29h2v1h-2zM35 29h1v1h-1zM37 29h1v1h-1zM39 29h1v1h-1zM41 29h1v1h-1zM43 29h1v1h-1zM46 29h2v1h-2zM49 29h3v1h-3zM53 29h2v1h-2zM3 30h1v1h-1zM6 30h2v1h-2zM11 30h1v1h-1zM14 30h1v1h-1zM16 30h1v1h-1zM20 30h1v1h-1zM23 30h1v1h-1zM26 30h1v1h-1zM28 30h5v1h-5zM36 30h1v1h-1zM38 30h2v1h-2zM42 30h1v1h-1zM50 30h1v1h-1zM54 30h2v1h-2zM0 31h1v1h-1zM2 31h2v1h-2zM8 31h1v1h-1zM10 31h2v1h-2zM14 31h1v1h-1zM16 31h1v1h-1zM19 31h2v1h-2zM24 31h3v1h-3zM29 31h3v1h-3zM35 31h1v1h-1zM38 31h1v1h-1zM40 31h2v1h-2zM43 31h2v1h-2zM47 31h3v1h-3zM51 31h2v1h-2zM54 31h2v1h-2zM3 32h1v1h-1zM6 32h2v1h-2zM10 32h1v1h-1zM13 32h2v1h-2zM17 32h1v1h-1zM21 32h2v1h-2zM26 32h1v1h-1zM28 32h1v1h-1zM33 32h2v1h-2zM37 32h1v1h-1zM41 32h1v1h-1zM43 32h2v1h-2zM46 32h2v1h-2zM50 32h1v1h-1zM52 32h1v1h-1zM55 32h1v1h-1zM0 33h2v1h-2zM3 33h1v1h-1zM8 33h2v1h-2zM14 33h2v1h-2zM18 33h6v1h-6zM26 33h2v1h-2zM29 33h1v1h-1zM31 33h6v1h-6zM38 33h1v1h-1zM40 33h1v1h-1zM42 33h2v1h-2zM46 33h1v1h-1zM49 33h1v1h-1zM52 33h3v1h-3zM56 33h1v1h-1zM0 34h1v1h-1zM4 34h3v1h-3zM8 34h1v1h-1zM10 34h1v1h-1zM12 34h1v1h-1zM14 34h2v1h-2zM18 34h1v1h-1zM24 34h1v1h-1zM27 34h1v1h-1zM30 34h2v1h-2zM33 34h3v1h-3zM37 34h2v1h-2zM43 34h2v1h-2zM46 34h1v1h-1zM49 34h2v1h-2zM53 34h4v1h-4zM2 35h4v1h-4zM8 35h3v1h-3zM12 35h1v1h-1zM14 35h1v1h-1zM17 35h4v1h-4zM22 35h2v1h-2zM28 35h6v1h-6zM35 35h1v1h-1zM38 35h3v1h-3zM42 35h3v1h-3zM47 35h2v1h-2zM51 35h1v1h-1zM53 35h1v1h-1zM56 35h1v1h-1zM2 36h6v1h-6zM9 36h2v1h-2zM12 36h1v1h-1zM15 36h3v1h-3zM19 36h1v1h-1zM21 36h4v1h-4zM26 36h2v1h-2zM31 36h1v1h-1zM33 36h1v1h-1zM36 36h1v1h-1zM41 36h2v1h-2zM44 36h2v1h-2zM48 36h1v1h-1zM51 36h1v1h-1zM53 36h2v1h-2zM56 36h1v1h-1zM0 37h6v1h-6zM7 37h1v1h-1zM9 37h1v1h-1zM12 37h1v1h-1zM14 37h1v1h-1zM16 37h3v1h-3zM21 37h1v1h-1zM25 37h1v1h-1zM28 37h3v1h-3zM32 37h1v1h-1zM34 37h1v1h-1zM37 37h1v1h-1zM39 37h1v1h-1zM42 37h2v1h-2zM45 37h3v1h-3zM50 37h3v1h-3zM54 37h1v1h-1zM0 38h2v1h-2zM4 38h3v1h-3zM10 38h2v1h-2zM13 38h5v1h-5zM21 38h1v1h-1zM23 38h2v1h-2zM26 38h1v1h-1zM28 38h2v1h-2zM31 38h1v1h-1zM33 38h1v1h-1zM35 38h1v1h-1zM39 38h5v1h-5zM46 38h6v1h-6zM2 39h3v1h-3zM8 39h1v1h-1zM12 39h3v1h-3zM18 39h1v1h-1zM21 39h1v1h-1zM23 39h1v1h-1zM25 39h1v1h-1zM27 39h1v1h-1zM29 39h2v1h-2zM32 39h1v1h-1zM34 39h2v1h-2zM38 39h5v1h-5zM45 39h1v1h-1zM47 39h3v1h-3zM51 39h2v1h-2zM54 39h2v1h-2zM1 40h1v1h-1zM4 40h6v1h-6zM11 40h1v1h-1zM13 40h3v1h-3zM18 40h2v1h-2zM25 40h1v1h-1zM27 40h4v1h-4zM32 40h1v1h-1zM38 40h3v1h-3zM42 40h2v1h-2zM45 40h1v1h-1zM47 40h1v1h-1zM54 40h2v1h-2zM0 41h3v1h-3zM7 41h3v1h-3zM11 41h2v1h-2zM16 41h2v1h-2zM19 41h3v1h-3zM23 41h1v1h-1zM28 41h2v1h-2zM31 41h3v1h-3zM35 41h3v1h-3zM39 41h3v1h-3zM44 41h1v1h-1zM47 41h1v1h-1zM50 41h1v1h-1zM54 41h3v1h-3zM3 42h1v1h-1zM5 42h3v1h-3zM10 42h1v1h-1zM13 42h1v1h-1zM15 42h1v1h-1zM19 42h1v1h-1zM22 42h1v1h-1zM24 42h7v1h-7zM33 42h1v1h-1zM37 42h1v1h-1zM40 42h1v1h-1zM42 42h1v1h-1zM44 42h1v1h-1zM47 42h1v1h-1zM49 42h1v1h-1zM51 42h1v1h-1zM54 42h3v1h-3zM1 43h2v1h-2zM5 43h1v1h-1zM7 43h1v1h-1zM13 43h1v1h-1zM15 43h8v1h-8zM24 43h2v1h-2zM27 43h1v1h-1zM29 43h1v1h-1zM31 43h3v1h-3zM36 43h1v1h-1zM39 43h7v1h-7zM47 43h1v1h-1zM49 43h1v1h-1zM51 43h2v1h-2zM54 43h1v1h-1zM56 43h1v1h-1zM0 44h1v1h-1zM2 44h3v1h-3zM6 44h1v1h-1zM8 44h2v1h-2zM11 44h2v1h-2zM19 44h1v1h-1zM21 44h1v1h-1zM23 44h2v1h-2zM27 44h3v1h-3zM32 44h1v1h-1zM34 44h1v1h-1zM37 44h4v1h-4zM42 44h6v1h-6zM49 44h3v1h-3zM54 44h2v1h-2zM0 45h1v1h-1zM5 45h1v1h-1zM7 45h2v1h-2zM11 45h1v1h-1zM13 45h1v1h-1zM15 45h1v1h-1zM18 45h1v1h-1zM21 45h1v1h-1zM23 45h1v1h-1zM26 45h1v1h-1zM28 45h1v1h-1zM30 45h1v1h-1zM32 45h1v1h-1zM37 45h3v1h-3zM41 45h1v1h-1zM43 45h4v1h-4zM48 45h1v1h-1zM51 45h1v1h-1zM53 45h1v1h-1zM55 45h2v1h-2zM1 46h2v1h-2zM4 46h3v1h-3zM8 46h1v1h-1zM14 46h2v1h-2zM17 46h1v1h-1zM19 46h2v1h-2zM22 46h3v1h-3zM26 46h3v1h-3zM30 46h3v1h-3zM34 46h1v1h-1zM36 46h1v1h-1zM39 46h3v1h-3zM45 46h3v1h-3zM50 46h2v1h-2zM53 46h2v1h-2zM56 46h1v1h-1zM0 47h2v1h-2zM9 47h1v1h-1zM12 47h2v1h-2zM15 47h2v1h-2zM19 47h1v1h-1zM21 47h1v1h-1zM23 47h1v1h-1zM25 47h1v1h-1zM27 47h1v1h-1zM29 47h1v1h-1zM31 47h1v1h-1zM33 47h3v1h-3zM37 47h2v1h-2zM40 47h6v1h-6zM47 47h1v1h-1zM49 47h1v1h-1zM52 47h2v1h-2zM56 47h1v1h-1zM1 48h1v1h-1zM4 48h3v1h-3zM8 48h1v1h-1zM10 48h2v1h-2zM13 48h3v1h-3zM19 48h2v1h-2zM23 48h1v1h-1zM26 48h1v1h-1zM28 48h5v1h-5zM34 48h7v1h-7zM47 48h6v1h-6zM54 48h2v1h-2zM8 49h3v1h-3zM12 49h2v1h-2zM15 49h1v1h-1zM19 49h2v1h-2zM24 49h1v1h-1zM28 49h1v1h-1zM30 49h1v1h-1zM35 49h1v1h-1zM37 49h3v1h-3zM41 49h1v1h-1zM44 49h3v1h-3zM48 49h1v1h-1zM52 49h2v1h-2zM55 49h1v1h-1zM0 50h7v1h-7zM9 50h1v1h-1zM11 50h1v1h-1zM13 50h2v1h-2zM16 50h1v1h-1zM22 50h3v1h-3zM27 50h2v1h-2zM30 50h1v1h-1zM36 50h9v1h-9zM48 50h1v1h-1zM50 50h1v1h-1zM52 50h1v1h-1zM56 50h1v1h-1zM0 51h1v1h-1zM6 51h1v1h-1zM10 51h7v1h-7zM19 51h3v1h-3zM23 51h1v1h-1zM25 51h1v1h-1zM28 51h6v1h-6zM36 51h1v1h-1zM40 51h2v1h-2zM44 51h2v1h-2zM48 51h1v1h-1zM52 51h1v1h-1zM55 51h1v1h-1zM0 52h1v1h-1zM2 52h3v1h-3zM6 52h1v1h-1zM9 52h1v1h-1zM12 52h2v1h-2zM15 52h3v1h-3zM21 52h1v1h-1zM23 52h2v1h-2zM26 52h1v1h-1zM29 52h1v1h-1zM31 52h3v1h-3zM35 52h3v1h-3zM42 52h1v1h-1zM44 52h1v1h-1zM46 52h7v1h-7zM55 52h2v1h-2zM0 53h1v1h-1zM2 53h3v1h-3zM6 53h1v1h-1zM9 53h1v1h-1zM14 53h3v1h-3zM18 53h2v1h-2zM22 53h2v1h-2zM26 53h1v1h-1zM28 53h2v1h-2zM32 53h2v1h-2zM36 53h2v1h-2zM39 53h1v1h-1zM42 53h1v1h-1zM49 53h3v1h-3zM53 53h1v1h-1zM56 53h1v1h-1zM0 54h1v1h-1zM2 54h3v1h-3zM6 54h1v1h-1zM9 54h2v1h-2zM13 54h2v1h-2zM17 54h2v1h-2zM21 54h2v1h-2zM25 54h1v1h-1zM29 54h2v1h-2zM38 54h1v1h-1zM41 54h2v1h-2zM44 54h1v1h-1zM46 54h1v1h-1zM48 54h3v1h-3zM52 54h1v1h-1zM55 54h1v1h-1zM0 55h1v1h-1zM6 55h1v1h-1zM10 55h1v1h-1zM13 55h1v1h-1zM15 55h1v1h-1zM20 55h2v1h-2zM23 55h6v1h-6zM30 55h1v1h-1zM34 55h1v1h-1zM37 55h2v1h-2zM44 55h1v1h-1zM46 55h6v1h-6zM55 55h2v1h-2zM0 56h7v1h-7zM8 56h1v1h-1zM10 56h1v1h-1zM12 56h1v1h-1zM15 56h2v1h-2zM19 56h1v1h-1zM21 56h7v1h-7zM29 56h2v1h-2zM32 56h1v1h-1zM41 56h2v1h-2zM44 56h3v1h-3zM48 56h1v1h-1zM54 56h1v1h-1zM56 56h1v1h-1z'/%3E%3C/svg%3E"); }
.mock-in .op-qr-card {
  display: inline-block; padding: 14px; border-radius: 18px; line-height: 0;
  background: linear-gradient(180deg, #ffffff, #f5f1e8); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(10, 50, 160, 0.2);
}
.mock-in .op-qr-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: #b8691a; white-space: nowrap; }



.mock-in .op-logo { display: inline-flex; align-items: center; gap: 0.6em; font-size: 16px; line-height: 1; color: #0a58dc; white-space: nowrap; }
.mock-in .op-logo-mark { display: flex; flex-direction: column; align-items: center; gap: 0.16em; }
.mock-in .op-logo-mark b {
  font: italic 900 1.95em/1 var(--op-en); letter-spacing: -0.045em; color: #0a58dc; padding-right: 0.06em;
  -webkit-text-stroke: 0.025em #0a58dc;
}
.mock-in .op-logo-mark span { font-size: 0.86em; font-weight: 700; letter-spacing: 0.08em; color: #0a58dc; }
.mock-in .op-logo-sep { width: 0.09em; height: 2.7em; border-radius: 1px; background: linear-gradient(180deg, #c8505c, #9f3844); opacity: 0.85; }
.mock-in .op-logo-mark { width: 3.3em; height: 2.3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Cpath d='M0 11.5L12 6.5 32 33V46z' fill='%232f86f0'/%3E%3Cpath d='M64 11.5L52 6.5 32 33V46z' fill='%230d4fbd'/%3E%3Cpath d='M19.5 12L29 5.5h19.5L38.5 12z' fill='%235aa7ff'/%3E%3Cpath d='M29 5.5h19.5l-3 2.4H26.5z' fill='%23fff' fill-opacity='.0'/%3E%3C/svg%3E") center / contain no-repeat; }
.mock-in .op-logo-b { display: flex; flex-direction: column; gap: 0.2em; margin-left: -0.2em; color: #1c4f9e; }
.mock-in .op-logo-b b { font-size: 1.34em; font-weight: 500; letter-spacing: 0.06em; line-height: 1; }
.mock-in .op-logo-b span { font: 600 0.64em/1 var(--ui-num); letter-spacing: 0.01em; }
.mock-in .op-logo--light, .mock-in .op-logo--light .op-logo-mark b, .mock-in .op-logo--light .op-logo-mark span, .mock-in .op-logo--light .op-logo-b { color: #fff; }
.mock-in .op-logo--light .op-logo-mark b { -webkit-text-stroke-color: #fff; }
.mock-in .op-logo--light .op-logo-sep { background: rgba(255, 255, 255, 0.7); }
.mock-in .op-logo--light .op-logo-mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Cpath d='M0 11.5L12 6.5 32 33V46z' fill='%23ffffff'/%3E%3Cpath d='M64 11.5L52 6.5 32 33V46z' fill='%23bcd8ff'/%3E%3Cpath d='M19.5 12L29 5.5h19.5L38.5 12z' fill='%23e6f1ff'/%3E%3Cpath d='M29 5.5h19.5l-3 2.4H26.5z' fill='%23fff' fill-opacity='.0'/%3E%3C/svg%3E"); }


.mock-in .op-iso { display: inline-block; width: 64px; height: 64px; flex: none; background: center / contain no-repeat; }
.mock-in .op-iso--server { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e4f2ff'/%3E%3Cstop offset='1' stop-color='%238fc8ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2358a2ff'/%3E%3Cstop offset='1' stop-color='%231f66f0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d58ec'/%3E%3Cstop offset='1' stop-color='%230a2fb4'/%3E%3C/linearGradient%3E%3ClinearGradient id='pt' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23cfe6ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bcdcff'/%3E%3Cstop offset='1' stop-color='%238dc0f6'/%3E%3C/linearGradient%3E%3ClinearGradient id='pr' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238cbef5'/%3E%3Cstop offset='1' stop-color='%235c97e6'/%3E%3C/linearGradient%3E%3CradialGradient id='gl' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%232f86ff' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%232f86ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='48' cy='62.0' rx='46' ry='19' fill='url(%23gl)'/%3E%3Cpolygon points='8.16,59.0 48.0,82.0 48.0,79.0 8.16,56.0' fill='url(%23pl)' /%3E%3Cpolygon points='87.84,59.0 48.0,82.0 48.0,79.0 87.84,56.0' fill='url(%23pr)' /%3E%3Cpolygon points='48.0,33.0 87.84,56.0 48.0,79.0 8.16,56.0' fill='url(%23pt)' /%3E%3Cpolyline points='8.16,56.0 48.0,79.0 87.84,56.0' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpolygon points='22.02,56.0 48.0,71.0 48.0,60.0 22.02,45.0' fill='url(%23l)' /%3E%3Cpolygon points='73.98,56.0 48.0,71.0 48.0,60.0 73.98,45.0' fill='url(%23r)' /%3E%3Cpolygon points='48.0,30.0 73.98,45.0 48.0,60.0 22.02,45.0' fill='url(%23t)' /%3E%3Cpolyline points='22.02,45.0 48.0,60.0 73.98,45.0' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cg transform='matrix(0.866 0.5 0 -1.0 22.02 56.0)'%3E%3Ccircle cx='5' cy='5.5' r='1.5' fill='%236cffb8'/%3E%3Ccircle cx='10' cy='5.5' r='1.5' fill='%23bfe2ff' fill-opacity='.9'/%3E%3Crect x='15' y='4.5' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg transform='matrix(-0.866 0.5 0 -1.0 73.98 56.0)' stroke='%23fff' stroke-opacity='.28' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 2.9h18M6 5.5h18M6 8.1h18'/%3E%3C/g%3E%3Cpolygon points='22.02,43.6 48.0,58.6 48.0,47.6 22.02,32.6' fill='url(%23l)' /%3E%3Cpolygon points='73.98,43.6 48.0,58.6 48.0,47.6 73.98,32.6' fill='url(%23r)' /%3E%3Cpolygon points='48.0,17.6 73.98,32.6 48.0,47.6 22.02,32.6' fill='url(%23t)' /%3E%3Cpolyline points='22.02,32.6 48.0,47.6 73.98,32.6' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cg transform='matrix(0.866 0.5 0 -1.0 22.02 43.6)'%3E%3Ccircle cx='5' cy='5.5' r='1.5' fill='%236cffb8'/%3E%3Ccircle cx='10' cy='5.5' r='1.5' fill='%23bfe2ff' fill-opacity='.9'/%3E%3Crect x='15' y='4.5' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg transform='matrix(-0.866 0.5 0 -1.0 73.98 43.6)' stroke='%23fff' stroke-opacity='.28' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 2.9h18M6 5.5h18M6 8.1h18'/%3E%3C/g%3E%3Cpolygon points='22.02,31.2 48.0,46.2 48.0,35.2 22.02,20.2' fill='url(%23l)' /%3E%3Cpolygon points='73.98,31.2 48.0,46.2 48.0,35.2 73.98,20.2' fill='url(%23r)' /%3E%3Cpolygon points='48.0,5.2 73.98,20.2 48.0,35.2 22.02,20.2' fill='url(%23t)' /%3E%3Cpolyline points='22.02,20.2 48.0,35.2 73.98,20.2' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cg transform='matrix(0.866 0.5 0 -1.0 22.02 31.2)'%3E%3Ccircle cx='5' cy='5.5' r='1.5' fill='%236cffb8'/%3E%3Ccircle cx='10' cy='5.5' r='1.5' fill='%23bfe2ff' fill-opacity='.9'/%3E%3Crect x='15' y='4.5' width='12' height='2' rx='1' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg transform='matrix(-0.866 0.5 0 -1.0 73.98 31.2)' stroke='%23fff' stroke-opacity='.28' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 2.9h18M6 5.5h18M6 8.1h18'/%3E%3C/g%3E%3C/svg%3E"); }
.mock-in .op-iso--doc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e4f2ff'/%3E%3Cstop offset='1' stop-color='%238fc8ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2358a2ff'/%3E%3Cstop offset='1' stop-color='%231f66f0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d58ec'/%3E%3Cstop offset='1' stop-color='%230a2fb4'/%3E%3C/linearGradient%3E%3ClinearGradient id='pt' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23cfe6ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bcdcff'/%3E%3Cstop offset='1' stop-color='%238dc0f6'/%3E%3C/linearGradient%3E%3ClinearGradient id='pr' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238cbef5'/%3E%3Cstop offset='1' stop-color='%235c97e6'/%3E%3C/linearGradient%3E%3CradialGradient id='gl' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%232f86ff' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%232f86ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='48' cy='62.0' rx='46' ry='19' fill='url(%23gl)'/%3E%3Cpolygon points='8.16,59.0 48.0,82.0 48.0,79.0 8.16,56.0' fill='url(%23pl)' /%3E%3Cpolygon points='87.84,59.0 48.0,82.0 48.0,79.0 87.84,56.0' fill='url(%23pr)' /%3E%3Cpolygon points='48.0,33.0 87.84,56.0 48.0,79.0 8.16,56.0' fill='url(%23pt)' /%3E%3Cpolyline points='8.16,56.0 48.0,79.0 87.84,56.0' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpolygon points='38.47,48.5 62.72,62.5 62.72,22.5 38.47,8.5' fill='url(%23pt)' /%3E%3Cpolygon points='67.05,60.0 62.72,62.5 62.72,22.5 67.05,20.0' fill='url(%23pr)' /%3E%3Cpolygon points='42.8,6.0 67.05,20.0 62.72,22.5 38.47,8.5' fill='url(%23t)' /%3E%3Cg transform='matrix(0.866 0.5 0 -1.0 38.47 48.5)'%3E%3Crect x='4' y='28' width='12' height='4' rx='1.5' fill='%230a46e0'/%3E%3Crect x='4' y='21.0' width='20' height='2.2' rx='1.1' fill='%237fb6ff'/%3E%3Crect x='4' y='15.8' width='16' height='2.2' rx='1.1' fill='%237fb6ff'/%3E%3Crect x='4' y='10.6' width='20' height='2.2' rx='1.1' fill='%237fb6ff'/%3E%3Crect x='4' y='5.399999999999999' width='11' height='2.2' rx='1.1' fill='%237fb6ff'/%3E%3Ccircle cx='20.5' cy='7' r='4' fill='%23ffa31a'/%3E%3Cpath d='M18.6 7l1.4 1.4 2.6-2.8' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 40L28 33 21 40z' fill='%23b9d9ff'/%3E%3Cpath d='M28 33l-7 7' stroke='%23fff' stroke-opacity='.8' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E"); }
.mock-in .op-iso--lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e4f2ff'/%3E%3Cstop offset='1' stop-color='%238fc8ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2358a2ff'/%3E%3Cstop offset='1' stop-color='%231f66f0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d58ec'/%3E%3Cstop offset='1' stop-color='%230a2fb4'/%3E%3C/linearGradient%3E%3ClinearGradient id='pt' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23cfe6ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bcdcff'/%3E%3Cstop offset='1' stop-color='%238dc0f6'/%3E%3C/linearGradient%3E%3ClinearGradient id='pr' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238cbef5'/%3E%3Cstop offset='1' stop-color='%235c97e6'/%3E%3C/linearGradient%3E%3CradialGradient id='gl' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%232f86ff' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%232f86ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sh' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%237dbaff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='48' cy='62.0' rx='46' ry='19' fill='url(%23gl)'/%3E%3Cpolygon points='8.16,59.0 48.0,82.0 48.0,79.0 8.16,56.0' fill='url(%23pl)' /%3E%3Cpolygon points='87.84,59.0 48.0,82.0 48.0,79.0 87.84,56.0' fill='url(%23pr)' /%3E%3Cpolygon points='48.0,33.0 87.84,56.0 48.0,79.0 8.16,56.0' fill='url(%23pt)' /%3E%3Cpolyline points='8.16,56.0 48.0,79.0 87.84,56.0' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpolygon points='27.22,54.0 51.46,68.0 51.46,44.0 27.22,30.0' fill='url(%23l)' /%3E%3Cpolygon points='70.52,57.0 51.46,68.0 51.46,44.0 70.52,33.0' fill='url(%23r)' /%3E%3Cpolygon points='46.27,19.0 70.52,33.0 51.46,44.0 27.22,30.0' fill='url(%23t)' /%3E%3Cpolyline points='27.22,30.0 51.46,44.0 70.52,33.0' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cg transform='matrix(0.866 0.5 0 -1.0 27.22 54.0)'%3E%3Ccircle cx='14' cy='14.5' r='3.2' fill='%2308246f' fill-opacity='.85'/%3E%3Cpath d='M12.5 14L15.5 14L16.7 7L11.3 7Z' fill='%2308246f' fill-opacity='.85'/%3E%3C/g%3E%3Cpath d='M38.87 33.5V23.5a10 10 0 0 1 20 0V33.5' fill='none' stroke='%230a2fb4' stroke-opacity='.35' stroke-width='7' stroke-linecap='round' transform='translate(1.2 1.6)'/%3E%3Cpath d='M38.87 33.5V23.5a10 10 0 0 1 20 0V33.5' fill='none' stroke='url(%23sh)' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mock-in .op-iso--cloud { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e4f2ff'/%3E%3Cstop offset='1' stop-color='%238fc8ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2358a2ff'/%3E%3Cstop offset='1' stop-color='%231f66f0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d58ec'/%3E%3Cstop offset='1' stop-color='%230a2fb4'/%3E%3C/linearGradient%3E%3ClinearGradient id='pt' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23cfe6ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bcdcff'/%3E%3Cstop offset='1' stop-color='%238dc0f6'/%3E%3C/linearGradient%3E%3ClinearGradient id='pr' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238cbef5'/%3E%3Cstop offset='1' stop-color='%235c97e6'/%3E%3C/linearGradient%3E%3CradialGradient id='gl' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%232f86ff' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%232f86ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='cf' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23d7ebff'/%3E%3Cstop offset='1' stop-color='%239fcdff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='48' cy='62.0' rx='46' ry='19' fill='url(%23gl)'/%3E%3Cpolygon points='8.16,59.0 48.0,82.0 48.0,79.0 8.16,56.0' fill='url(%23pl)' /%3E%3Cpolygon points='87.84,59.0 48.0,82.0 48.0,79.0 87.84,56.0' fill='url(%23pr)' /%3E%3Cpolygon points='48.0,33.0 87.84,56.0 48.0,79.0 8.16,56.0' fill='url(%23pt)' /%3E%3Cpolyline points='8.16,56.0 48.0,79.0 87.84,56.0' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cg fill='%231a5ff0' transform='translate(3.5 5)'%3E%3Ccircle cx='34' cy='56' r='13'/%3E%3Ccircle cx='50' cy='46' r='17'/%3E%3Ccircle cx='67' cy='57' r='12'/%3E%3Crect x='30' y='55' width='40' height='14' rx='7'/%3E%3C/g%3E%3Cg fill='url(%23cf)'%3E%3Ccircle cx='34' cy='56' r='13'/%3E%3Ccircle cx='50' cy='46' r='17'/%3E%3Ccircle cx='67' cy='57' r='12'/%3E%3Crect x='30' y='55' width='40' height='14' rx='7'/%3E%3C/g%3E%3Cpath d='M24 54a10 10 0 0 1 10-9M40 38a13 13 0 0 1 13-8' fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%232a7cff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 62V50M44.5 55.5L50 50l5.5 5.5'/%3E%3C/g%3E%3C/svg%3E"); }
.mock-in .op-iso--shield { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e4f2ff'/%3E%3Cstop offset='1' stop-color='%238fc8ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2358a2ff'/%3E%3Cstop offset='1' stop-color='%231f66f0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d58ec'/%3E%3Cstop offset='1' stop-color='%230a2fb4'/%3E%3C/linearGradient%3E%3ClinearGradient id='pt' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23cfe6ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bcdcff'/%3E%3Cstop offset='1' stop-color='%238dc0f6'/%3E%3C/linearGradient%3E%3ClinearGradient id='pr' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238cbef5'/%3E%3Cstop offset='1' stop-color='%235c97e6'/%3E%3C/linearGradient%3E%3CradialGradient id='gl' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%232f86ff' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%232f86ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='sl' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%239fd0ff'/%3E%3Cstop offset='1' stop-color='%233b8bff'/%3E%3C/linearGradient%3E%3ClinearGradient id='sr' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f7bff'/%3E%3Cstop offset='1' stop-color='%230a3cd0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='48' cy='62.0' rx='46' ry='19' fill='url(%23gl)'/%3E%3Cpolygon points='8.16,59.0 48.0,82.0 48.0,79.0 8.16,56.0' fill='url(%23pl)' /%3E%3Cpolygon points='87.84,59.0 48.0,82.0 48.0,79.0 87.84,56.0' fill='url(%23pr)' /%3E%3Cpolygon points='48.0,33.0 87.84,56.0 48.0,79.0 8.16,56.0' fill='url(%23pt)' /%3E%3Cpolyline points='8.16,56.0 48.0,79.0 87.84,56.0' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M48 12.5L72 21v22c0 17-11.5 27-24 33C35.5 70 24 60 24 43V21z' fill='%230a2fb4' transform='translate(3.5 5)'/%3E%3Cpath d='M48 12.5L24 21v22c0 17 11.5 27 24 33z' fill='url(%23sl)'/%3E%3Cpath d='M48 12.5L72 21v22c0 17-11.5 27-24 33z' fill='url(%23sr)'/%3E%3Cpath d='M48 12.5L72 21v22c0 17-11.5 27-24 33C35.5 70 24 60 24 43V21z' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M36.5 44l8 8 15-17' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mock-in .op-iso--warm { filter: hue-rotate(168deg) saturate(1.25); }


.mock-in .op-ic {
  display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; background: currentColor;
  -webkit-mask: var(--op-ic) center / contain no-repeat; mask: var(--op-ic) center / contain no-repeat;
}
.mock-in .op-ic--check { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mock-in .op-ic--cross { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.mock-in .op-ic--alert { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.4'/%3E%3C/svg%3E"); }
.mock-in .op-ic--arrow { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.mock-in .op-ic--chevron { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.mock-in .op-ic--scan { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 015.5 4H8M16 4h2.5A1.5 1.5 0 0120 5.5V8M20 16v2.5a1.5 1.5 0 01-1.5 1.5H16M8 20H5.5A1.5 1.5 0 014 18.5V16M4 12h16'/%3E%3C/svg%3E"); }
.mock-in .op-ic--clock { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); }
.mock-in .op-ic--bolt { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.2h6L10 21l8-10.2h-6z'/%3E%3C/svg%3E"); }
.mock-in .op-ic--star { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); }
.mock-in .op-ic--doc { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7zM14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E"); }
.mock-in .op-ic--mouse { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='5'/%3E%3Cpath d='M12 7.5v3'/%3E%3C/svg%3E"); }
.mock-in .op-ic--megaphone { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l7 4V6L7 10zM17.5 9.5a3.2 3.2 0 010 5'/%3E%3C/svg%3E"); }
.mock-in .op-ic--link { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1'/%3E%3C/svg%3E"); }
.mock-in .op-ic--user { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0115 0'/%3E%3C/svg%3E"); }
.mock-in .op-ic--gift { --op-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M3 9h18v-3H3zM12 6v14M12 6c-1-3-5-3.5-5-1.5S10 6 12 6zM12 6c1-3 5-3.5 5-1.5S14 6 12 6z'/%3E%3C/svg%3E"); }



.mock-in .op-fold { position: absolute; pointer-events: none; z-index: 30; }
.mock-in .op-fold--v {
  top: 0; bottom: 0; left: 50%; width: 46px; margin-left: -23px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.12) 44%, rgba(0, 35, 110, 0.2) 48%, rgba(0, 35, 110, 0.08) 53%, rgba(255, 255, 255, 0.08) 66%, rgba(255, 255, 255, 0) 100%);
}

.mock-in .op-fold--h {
  left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 38%, rgba(255, 255, 255, 0.46) 52%, rgba(0, 35, 110, 0.07) 70%, rgba(255, 255, 255, 0) 100%);
}


.mock-in .op-t3d { position: relative; display: inline-block; isolation: isolate; font-size: 64px; font-weight: 800; line-height: 1.2; letter-spacing: 0.04em; white-space: nowrap; color: transparent; }
.mock-in .op-t3d::before, .mock-in .op-t3d::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap; letter-spacing: inherit; }
.mock-in .op-t3d::before { z-index: 0; color: #ffc83d; -webkit-text-stroke: 0.27em #ffc83d; filter: drop-shadow(0.01em 0.02em 0 #f2a52a) drop-shadow(0.02em 0.04em 0 #f2a52a) drop-shadow(0.03em 0.06em 0 #f2a52a) drop-shadow(0.04em 0.08em 0 #f2a52a); }
.mock-in .op-t3d::after { z-index: 1; color: #4fb8f1; -webkit-text-stroke: 0.17em #4fb8f1; filter: drop-shadow(0.01em 0.02em 0 #2f8bd8) drop-shadow(0.02em 0.04em 0 #2f8bd8) drop-shadow(0.03em 0.06em 0 #2f8bd8) drop-shadow(0.04em 0.08em 0 #2f8bd8); }
.mock-in .op-t3d > i {
  position: relative; z-index: 2; font-style: normal; color: #fffdf8; -webkit-text-stroke: 0.045em #fffdf8;
  text-shadow: 0.015em 0.02em 0 #1f67bd, 0.03em 0.04em 0 #1f67bd, 0.045em 0.06em 0 #1f67bd, 0.06em 0.08em 0 #1f67bd, 0.075em 0.1em 0 #1f67bd;
}




:where(.mock-in[class*="u-web-"], .inc[class*="u-web-"]) {
  --pf-blue: #0060f0; --pf-blue-h: #0050cf; --pf-blue-bg: #eaf2ff; --pf-blue-l: #cfe0fd;
  --pf-green: #18b274; --pf-orange: #ed7b2f; --pf-red: #e34d59; --pf-cyan: #00d0d3; --pf-amber: #ff9503;
  --pf-text: #161a1d; --pf-text2: #6a6d6f; --pf-text3: #a2a3a4;
  --pf-line: #e6e8eb; --pf-border: #c6c8c9; --pf-bg: #f5f7fa; --pf-fill: #f0f1f3; --pf-shell: #eaedf8;
  --pf-nav-w: 56px; --pf-sub-w: 134px; --pf-top-h: 54px;
  --pf-fnum: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --pf-ic-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>");
  --pf-ic-user: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8.2' r='4' fill='black'/><path d='M4 21c.6-4.2 3.8-6.4 8-6.4s7.4 2.2 8 6.4z' fill='black'/></svg>");
  --pf-logo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%230a54e0'/><stop offset='1' stop-color='%2336a0ff'/></linearGradient></defs><rect x='6.5' y='6.5' width='35' height='35' rx='11' fill='none' stroke='url(%23g)' stroke-width='4.6'/><path d='M16.5 30.5 24 16.5l7.5 14' fill='none' stroke='%230a54e0' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/><circle cx='35' cy='13' r='4.6' fill='%23f7821f'/></svg>");
}


.mock-in .pf-i { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: middle; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; }
.mock-in .pf-i12 { width: 12px; height: 12px; }
.mock-in .pf-i14 { width: 14px; height: 14px; }
.mock-in .pf-i20 { width: 20px; height: 20px; }
.mock-in .pf-i24 { width: 24px; height: 24px; }
.mock-in .pf-i-workbench{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='2'/><path d='M8 20h8M12 16v4M7.5 8.5h5M7.5 11.5h8'/></svg>")}
.mock-in .pf-i-project{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l8.5 4.6-8.5 4.6-8.5-4.6L12 3.5z'/><path d='M3.5 12.2l8.5 4.6 8.5-4.6'/><path d='M3.5 16.3l8.5 4.6 8.5-4.6'/></svg>")}
.mock-in .pf-i-projects{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 6.5A1.5 1.5 0 0 1 5 5h4.2l2 2.4H19A1.5 1.5 0 0 1 20.5 9v9.5A1.5 1.5 0 0 1 19 20H5a1.5 1.5 0 0 1-1.5-1.5v-12z'/><path d='M13.5 11.5v5l2-1.3 2 1.3v-5'/></svg>")}
.mock-in .pf-i-code{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 7.5l-5 4.5 5 4.5M15.5 7.5l5 4.5-5 4.5M13.2 5.5l-2.4 13'/></svg>")}
.mock-in .pf-i-perf{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 3.5H6A2.5 2.5 0 0 0 3.5 6v12A2.5 2.5 0 0 0 6 20.5h12a2.5 2.5 0 0 0 2.5-2.5v-5'/><path d='M8 16.5v-3.5M12 16.5v-6M16 16.5v-4M18 3v5M15.5 5.5h5'/></svg>")}
.mock-in .pf-i-system{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><path d='M3.2 12h17.6'/><path d='M12 3.2c2.6 2.4 3.8 5.4 3.8 8.8s-1.2 6.4-3.8 8.8c-2.6-2.4-3.8-5.4-3.8-8.8S9.4 5.6 12 3.2z'/></svg>")}
.mock-in .pf-i-artifact{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.4v9.2L12 21l-8-4.4V7.4L12 3z'/><path d='M4.2 7.6L12 12l7.8-4.4M12 12v8.8'/></svg>")}
.mock-in .pf-i-wiki{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5a2 2 0 0 1 2-2h12v15H7a2 2 0 0 0-2 2V5z'/><path d='M5 20a2 2 0 0 0 2 1h12v-3'/><path d='M9 7.5h6M9 11h4'/></svg>")}
.mock-in .pf-i-test{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><path d='M6.2 12.2h3l2-4.2 2.8 8 1.8-3.8h2'/></svg>")}
.mock-in .pf-i-collab{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><circle cx='12' cy='12' r='3.8'/></svg>")}
.mock-in .pf-i-overview{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M8 16v-3.5M12 16V8.5M16 16v-5.5'/></svg>")}
.mock-in .pf-i-board{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M3.5 9h17M9.5 9v11'/></svg>")}
.mock-in .pf-i-grid{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='6.5' height='6.5' rx='1.6'/><rect x='13.5' y='4' width='6.5' height='6.5' rx='1.6'/><rect x='4' y='13.5' width='6.5' height='6.5' rx='1.6'/><rect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.6'/></svg>")}
.mock-in .pf-i-repo{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.8 11.2L12 4l8.2 7.2V19a1.5 1.5 0 0 1-1.5 1.5H5.3A1.5 1.5 0 0 1 3.8 19v-7.8z'/><path d='M10.2 13.2L8.8 15l1.4 1.8M13.8 13.2l1.4 1.8-1.4 1.8'/></svg>")}
.mock-in .pf-i-pipeline{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.8' y='9' width='5' height='6' rx='1.2'/><rect x='16.2' y='3.8' width='5' height='5' rx='1.2'/><rect x='16.2' y='15.2' width='5' height='5' rx='1.2'/><path d='M7.8 12h4.2M12 6.3v11.4M12 6.3h4.2M12 17.7h4.2'/></svg>")}
.mock-in .pf-i-deploy{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M9 9.5l3 2.5-3 2.5M13.5 15h3'/></svg>")}
.mock-in .pf-i-container{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12.5h18v1.8c0 3.2-3.6 5.7-9 5.7s-9-2.5-9-5.7v-1.8z'/><rect x='5' y='8.5' width='3' height='3'/><rect x='9' y='8.5' width='3' height='3'/><rect x='13' y='8.5' width='3' height='3'/><rect x='9' y='4.5' width='3' height='3'/></svg>")}
.mock-in .pf-i-resource{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='11' height='16' rx='2'/><path d='M7 8.5h4M7 12h4M17.5 8l3 3-3 3M14.5 11h6'/></svg>")}
.mock-in .pf-i-plan{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='4' width='15' height='17' rx='2'/><path d='M9 4V2.8M15 4V2.8M8.5 10h7M8.5 13.5h7M8.5 17h4'/></svg>")}
.mock-in .pf-i-case{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='4' width='15' height='17' rx='2'/><path d='M8.5 9l1.3 1.3L12 8M8.5 15l1.3 1.3L12 14M14 9.2h2.5M14 15.2h2.5'/></svg>")}
.mock-in .pf-i-report{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='4' width='15' height='17' rx='2'/><path d='M8.5 17v-3M12 17v-6M15.5 17v-4.5'/></svg>")}
.mock-in .pf-i-doc{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h7.5l4.5 4.5v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-15.5a1 1 0 0 1 1-1z'/><path d='M14 3.5V8h4.5M9 13h6M9 16.5h6'/></svg>")}
.mock-in .pf-i-org{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='3.5' width='6' height='5' rx='1.2'/><rect x='3' y='15.5' width='6' height='5' rx='1.2'/><rect x='15' y='15.5' width='6' height='5' rx='1.2'/><path d='M12 8.5v3.5M6 15.5V12h12v3.5'/></svg>")}
.mock-in .pf-i-building{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 20.5V8.5l6-3v15M10.5 20.5h9V11l-5-2.5M3 20.5h18M7.5 11h.01M7.5 14.5h.01M14.5 13.5h2M14.5 17h2'/></svg>")}
.mock-in .pf-i-settings{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.2 3.5h3.6l.6 2.4 1.9 1.1 2.4-.7 1.8 3.1-1.8 1.7v2.2l1.8 1.7-1.8 3.1-2.4-.7-1.9 1.1-.6 2.4h-3.6l-.6-2.4-1.9-1.1-2.4.7-1.8-3.1 1.8-1.7V10.7L3.5 9l1.8-3.1 2.4.7 1.9-1.1z'/><circle cx='12' cy='12' r='3'/></svg>")}
.mock-in .pf-i-search{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5'/></svg>")}
.mock-in .pf-i-bell{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.6 2H4.4L6 16.5z'/><path d='M10 21.2h4'/></svg>")}
.mock-in .pf-i-help{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><path d='M9.4 9.6a2.7 2.7 0 1 1 3.8 2.4c-.8.4-1.2 1-1.2 1.8M12 17h.01'/></svg>")}
.mock-in .pf-i-user{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.2' r='3.8'/><path d='M4.5 20c.9-3.6 3.9-5.6 7.5-5.6s6.6 2 7.5 5.6'/></svg>")}
.mock-in .pf-i-sliders{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8h9M18.5 8h2M3.5 16h2M11.5 16h9'/><circle cx='15.5' cy='8' r='2.4'/><circle cx='8.5' cy='16' r='2.4'/></svg>")}
.mock-in .pf-i-palette{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5a8.5 8.5 0 1 0 0 17c1.3 0 1.9-.9 1.9-1.8 0-1.5-1.3-1.7-1.3-3 0-1 .8-1.7 1.9-1.7h2.2a3.5 3.5 0 0 0 3.5-3.5C20.2 6.8 16.6 3.5 12 3.5z'/><path d='M7.8 11h.01M10.5 7.6h.01M14.5 7.8h.01'/></svg>")}
.mock-in .pf-i-plus{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>")}
.mock-in .pf-i-edit{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l.9-3.9L16.2 4.8a2 2 0 0 1 2.9 0l.1.1a2 2 0 0 1 0 2.9L7.9 19.1 4 20z'/><path d='M14.3 6.7l3 3'/></svg>")}
.mock-in .pf-i-delete{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 7h15M9.5 7V4.5h5V7M6.5 7l.9 12.5h9.2L17.5 7M10.2 11v5M13.8 11v5'/></svg>")}
.mock-in .pf-i-more{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><g fill='black'><circle cx='5.5' cy='12' r='1.5'/><circle cx='12' cy='12' r='1.5'/><circle cx='18.5' cy='12' r='1.5'/></g></svg>")}
.mock-in .pf-i-more-v{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><g fill='black'><circle cx='12' cy='5.5' r='1.5'/><circle cx='12' cy='12' r='1.5'/><circle cx='12' cy='18.5' r='1.5'/></g></svg>")}
.mock-in .pf-i-down{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>")}
.mock-in .pf-i-up{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 14.5l6-6 6 6'/></svg>")}
.mock-in .pf-i-right{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 6l6 6-6 6'/></svg>")}
.mock-in .pf-i-left{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 6l-6 6 6 6'/></svg>")}
.mock-in .pf-i-updown{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9.5l4-4 4 4M8 14.5l4 4 4-4'/></svg>")}
.mock-in .pf-i-caret{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6.5l6.5 5.5L9 17.5z' fill='black'/></svg>")}
.mock-in .pf-i-fullscreen{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/></svg>")}
.mock-in .pf-i-menu-fold{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5h16M12 12h8M4 18.5h16M8.5 9L5.5 12l3 3'/></svg>")}
.mock-in .pf-i-menu-unfold{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5h16M12 12h8M4 18.5h16M5.5 9l3 3-3 3'/></svg>")}
.mock-in .pf-i-close{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
.mock-in .pf-i-check{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>")}
.mock-in .pf-i-warning{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.8l9.2 16H2.8L12 3.8z'/><path d='M12 10v4.5M12 17.4h.01'/></svg>")}
.mock-in .pf-i-info{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><path d='M12 11v5.5M12 7.8h.01'/></svg>")}
.mock-in .pf-i-drag{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><g fill='black' stroke='none'><circle cx='9' cy='6' r='1.6'/><circle cx='15' cy='6' r='1.6'/><circle cx='9' cy='12' r='1.6'/><circle cx='15' cy='12' r='1.6'/><circle cx='9' cy='18' r='1.6'/><circle cx='15' cy='18' r='1.6'/></g></svg>")}
.mock-in .pf-i-filter{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.8 5h16.4l-6.4 7.8V19l-3.6 1.6v-7.8L3.8 5z'/></svg>")}
.mock-in .pf-i-refresh{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M19.8 11.5a8 8 0 1 0-1.6 5.6'/><path d='M20 4.5v7h-7'/></svg>")}
.mock-in .pf-i-columns{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M9.2 4v16M14.8 4v16'/></svg>")}
.mock-in .pf-i-list{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/></svg>")}
.mock-in .pf-i-eye{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.8 12S6.3 5.8 12 5.8 21.2 12 21.2 12 17.7 18.2 12 18.2 2.8 12 2.8 12z'/><circle cx='12' cy='12' r='2.8'/></svg>")}
.mock-in .pf-i-copy{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='8.5' y='8.5' width='11.5' height='11.5' rx='2'/><path d='M15.5 8.5V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7.5a2 2 0 0 0 2 2h2.5'/></svg>")}
.mock-in .pf-i-link{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.7l1-1'/></svg>")}
.mock-in .pf-i-download{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7.5 10.8l4.5 4.5 4.5-4.5M4.5 19.5h15'/></svg>")}
.mock-in .pf-i-upload{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 15.5V4.5M7.5 9l4.5-4.5L16.5 9M4.5 19.5h15'/></svg>")}
.mock-in .pf-i-folder{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 6.5A1.5 1.5 0 0 1 5 5h4.2l2 2.4H19A1.5 1.5 0 0 1 20.5 9v9.5A1.5 1.5 0 0 1 19 20H5a1.5 1.5 0 0 1-1.5-1.5v-12z'/></svg>")}
.mock-in .pf-i-folder-f{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6.5A1.5 1.5 0 0 1 4.5 5h4.7l2 2.4H19.5A1.5 1.5 0 0 1 21 8.9v9.6a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5v-12z' fill='black' stroke='none'/></svg>")}
.mock-in .pf-i-branch{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6.5' cy='5.5' r='2.3'/><circle cx='6.5' cy='18.5' r='2.3'/><circle cx='17.5' cy='8.5' r='2.3'/><path d='M6.5 7.8v8.4M17.5 10.8c0 3.8-4 4.2-9.2 6.3'/></svg>")}
.mock-in .pf-i-merge{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6.5' cy='5.5' r='2.3'/><circle cx='6.5' cy='18.5' r='2.3'/><circle cx='17.5' cy='14.5' r='2.3'/><path d='M6.5 7.8v8.4M6.5 7.8c0 4.2 3.5 6.7 8.7 6.7'/></svg>")}
.mock-in .pf-i-star{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.6l2.6 5.4 5.9.8-4.3 4.1 1.1 5.9L12 17l-5.3 2.8 1.1-5.9L3.5 9.8l5.9-.8L12 3.6z'/></svg>")}
.mock-in .pf-i-star-f{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2l2.7 5.5 6 .9-4.4 4.2 1 6L12 17 6.7 19.8l1-6L3.3 9.6l6-.9L12 3.2z' fill='black' stroke='none'/></svg>")}
.mock-in .pf-i-calendar{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>")}
.mock-in .pf-i-clock{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><path d='M12 7v5.2l3.5 2'/></svg>")}
.mock-in .pf-i-flag{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 21V4M5.5 4.5h12l-2.2 4 2.2 4h-12'/></svg>")}
.mock-in .pf-i-diamond{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l8.5 8.5-8.5 8.5L3.5 12 12 3.5z'/></svg>")}
.mock-in .pf-i-shield{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.5 3v5.5c0 4.5-3.2 8-7.5 9.5-4.3-1.5-7.5-5-7.5-9.5V6L12 3z'/><path d='M8.8 12l2.2 2.2 4.2-4.4'/></svg>")}
.mock-in .pf-i-iteration{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.6-5.9'/><path d='M20.5 4v4.5H16'/><path d='M12 8v4l2.6 1.6'/></svg>")}


.mock-in .pf-shell { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(90deg, #e4ebfc, var(--pf-shell) 45%); color: var(--pf-text); font-size: 14px; line-height: 1.4; }
.mock-in .pf-base { color: var(--pf-text); font-size: 14px; line-height: 1.4; }
.mock-in .pf-top { flex: none; display: flex; align-items: center; gap: 16px; height: var(--pf-top-h); padding: 0 20px 0 12px; }
.mock-in .pf-logo { display: flex; align-items: center; gap: 8px; }
.mock-in .pf-logo-mark { width: 30px; height: 30px; border-radius: 8px; background: #fff var(--pf-logo) center/24px no-repeat; box-shadow: 0 1px 3px rgba(40, 70, 140, .1); }
.mock-in .pf-logo-name { font-size: 17px; font-weight: 700; color: #12326f; white-space: nowrap; }
.mock-in .pf-proj { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .78); font-weight: 500; white-space: nowrap; }
.mock-in .pf-proj .pf-i-folder-f { color: #f6a31a; }
.mock-in .pf-top-search { display: flex; align-items: center; gap: 6px; width: 200px; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255, 255, 255, .7); color: var(--pf-text3); }
.mock-in .pf-top-r { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mock-in .pf-ico-btn { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #5a5e62; }
.mock-in .pf-ico-btn.dot::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--pf-red); }
.mock-in .pf-user { display: flex; align-items: center; gap: 8px; }
.mock-in .pf-body { flex: 1; min-height: 0; display: flex; }
.mock-in .pf-nav { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: var(--pf-nav-w); padding: 0 0 16px; }
.mock-in .pf-nav-i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: calc(var(--pf-nav-w) - 4px); height: 60px; border-radius: 8px; font-size: 12px; line-height: 16px; color: #2b3036; }
.mock-in .pf-nav-i .pf-i { width: 22px; height: 22px; }
.mock-in .pf-nav-i.on { background: #fff; color: var(--pf-blue); font-weight: 500; box-shadow: 0 1px 4px rgba(40, 70, 140, .06); }
.mock-in .pf-nav-b { display: flex; flex-direction: column; align-items: center; gap: 21px; margin-top: auto; color: #2b3036; }
.mock-in .pf-sub { flex: none; width: var(--pf-sub-w); padding: 8px 8px 0; background: #fff; border-right: 1px solid #f0f1f3; }
.mock-in .pf-sub-t { display: flex; align-items: center; height: 39px; padding: 0 10px; font-size: 12px; color: var(--pf-text3); }
.mock-in .pf-sub-t:not(:first-child) { margin-top: 12px; }
.mock-in .pf-sub-i { display: flex; align-items: center; gap: 8px; height: 34px; margin-bottom: 2px; padding: 0 12px; border-radius: 6px; white-space: nowrap; }
.mock-in .pf-sub-i .pf-i { color: var(--pf-text2); }
.mock-in .pf-sub-i.on { background: var(--pf-blue-bg); color: var(--pf-blue); }
.mock-in .pf-sub-i.on .pf-i { color: var(--pf-blue); }
.mock-in .pf-sub-sep { height: 1px; margin: 7px 4px 9px; background: var(--pf-line); }
.mock-in .pf-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.mock-in .pf-main-g { background: var(--pf-bg); }
.mock-in .pf-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px 0 24px; background: #fff; font-size: 16px; font-weight: 600; }
.mock-in .pf-crumb { display: flex; align-items: center; font-size: 12px; color: var(--pf-text2); }
.mock-in .pf-crumb > * + *::before { content: "/"; margin: 0 8px; color: var(--pf-border); }
.mock-in .pf-crumb > :last-child { color: var(--pf-text); }


.mock-in .pf-tabs { flex: none; display: flex; gap: 32px; height: 48px; padding: 0 24px; }
.mock-in .pf-tab { position: relative; height: 48px; padding-top: 18px; font-size: 16px; color: #555a5f; white-space: nowrap; }
.mock-in .pf-tab.on { color: var(--pf-blue); }
.mock-in .pf-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--pf-blue); }
.mock-in .pf-tab .pf-cnt { margin-left: 4px; }
.mock-in .pf-tabs-s { display: flex; gap: 8px; }
.mock-in .pf-tab-s { height: 32px; padding: 0 14px; border-radius: 6px; display: flex; align-items: center; color: var(--pf-text2); white-space: nowrap; }
.mock-in .pf-tab-s.on { background: var(--pf-blue-bg); color: var(--pf-blue); }
.mock-in .pf-bar { display: flex; align-items: center; gap: 8px; padding: 0 24px; }
.mock-in .pf-seg { display: inline-flex; padding: 2px; border-radius: 4px; background: var(--pf-fill); }
.mock-in .pf-seg > * { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 3px; color: var(--pf-text2); white-space: nowrap; }
.mock-in .pf-seg > .on { background: #fff; color: var(--pf-blue); }


.mock-in .pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--pf-border); border-radius: 4px; background: #fff; color: var(--pf-text); font-size: 14px; line-height: 1; white-space: nowrap; }
.mock-in .pf-btn-p { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
.mock-in .pf-btn-t { padding: 0 6px; border-color: transparent; background: transparent; color: var(--pf-blue); }
.mock-in .pf-btn-g { border-color: transparent; background: var(--pf-fill); }
.mock-in .pf-btn-d { border-color: var(--pf-red); color: var(--pf-red); }
.mock-in .pf-btn-s { height: 26px; padding: 0 10px; font-size: 12px; }
.mock-in .pf-btn-i { width: 32px; padding: 0; }
.mock-in .pf-btn.dis { border-color: var(--pf-line); background: #f5f6f7; color: var(--pf-text3); }
.mock-in .pf-btn-p.dis { border-color: #99bff9; background: #99bff9; color: #fff; }
.mock-in .pf-btn-grp { display: inline-flex; }
.mock-in .pf-btn-grp > .pf-btn:not(:last-child) { border-radius: 4px 0 0 4px; }
.mock-in .pf-btn-grp > .pf-btn:not(:first-child) { margin-left: -1px; padding: 0 8px; border-radius: 0 4px 4px 0; border-left-color: rgba(255, 255, 255, .4); }
.mock-in .pf-lnk { color: var(--pf-blue); }
.mock-in .pf-ops { display: flex; gap: 12px; color: var(--pf-blue); }


.mock-in .pf-tag { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 6px; border-radius: 4px; background: var(--pf-fill); color: var(--pf-text2); font-size: 12px; font-style: normal; line-height: 1; white-space: nowrap; }
.mock-in .pf-tag-g { background: #e3f6ee; color: var(--pf-green); }
.mock-in .pf-tag-o { background: #fdeee2; color: var(--pf-orange); }
.mock-in .pf-tag-r { background: #fde8ea; color: var(--pf-red); }
.mock-in .pf-tag-b { background: #e6f0ff; color: var(--pf-blue); }
.mock-in .pf-tag-n { background: var(--pf-fill); color: var(--pf-text2); }
.mock-in .pf-tag-line { height: 20px; border: 1px solid currentColor; border-radius: 3px; background: #fff; }
.mock-in .pf-tag-line.pf-tag-n { color: #8d9094; border-color: var(--pf-border); }
.mock-in .pf-st { display: inline-flex; align-items: center; gap: 6px; }
.mock-in .pf-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mock-in .pf-st-g { color: var(--pf-green); }
.mock-in .pf-st-o { color: var(--pf-orange); }
.mock-in .pf-st-r { color: var(--pf-red); }
.mock-in .pf-st-b { color: var(--pf-blue); }
.mock-in .pf-st-n { color: var(--pf-text3); }
.mock-in .pf-cnt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d9e8fd; color: var(--pf-blue); font-size: 12px; font-style: normal; line-height: 1; }
.mock-in .pf-cnt-r { background: #fbdde0; color: var(--pf-red); }
.mock-in .pf-cnt-n { background: var(--pf-fill); color: var(--pf-text2); }


.mock-in .pf-input, .mock-in .pf-sel { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--pf-border); border-radius: 4px; background: #fff; white-space: nowrap; }
.mock-in .pf-sel { display: inline-flex; }
.mock-in .pf-ph { color: var(--pf-text3); }
.mock-in .pf-sel > .pf-i:last-child, .mock-in .pf-input > .pf-i:last-child { margin-left: auto; color: var(--pf-text2); }
.mock-in .pf-sel-g { border-color: transparent; background: #f1f4f8; }
.mock-in .pf-input.on { border-color: var(--pf-blue); box-shadow: 0 0 0 2px rgba(0, 96, 240, .14); }
.mock-in .pf-input.err { border-color: var(--pf-red); }
.mock-in .pf-input.dis { background: #f5f6f7; color: var(--pf-text3); }
.mock-in .pf-area { height: auto; min-height: 72px; align-items: flex-start; padding-top: 6px; white-space: normal; }
.mock-in .pf-field { display: flex; flex-direction: column; gap: 6px; }
.mock-in .pf-field > label { color: var(--pf-text2); font-size: 12px; }
.mock-in .pf-field > label.req::before { content: "*"; margin-right: 2px; color: var(--pf-red); }
.mock-in .pf-err-t { color: var(--pf-red); font-size: 12px; }
.mock-in .pf-sw { position: relative; display: inline-block; width: 36px; height: 20px; border-radius: 10px; background: var(--pf-border); vertical-align: middle; }
.mock-in .pf-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.mock-in .pf-sw.on { background: var(--pf-blue); }
.mock-in .pf-sw.on::after { left: 18px; }
.mock-in .pf-ck, .mock-in .pf-radio { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; border: 1px solid var(--pf-border); border-radius: 3px; background: #fff; vertical-align: middle; }
.mock-in .pf-radio { border-radius: 50%; }
.mock-in .pf-ck.on, .mock-in .pf-ck.half { border-color: var(--pf-blue); background: var(--pf-blue); }
.mock-in .pf-ck.on::after { content: ""; position: absolute; inset: 2px; background: #fff; -webkit-mask: var(--pf-ic-check) center/contain no-repeat; mask: var(--pf-ic-check) center/contain no-repeat; }
.mock-in .pf-ck.half::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: #fff; }
.mock-in .pf-radio.on { border: 5px solid var(--pf-blue); }
.mock-in .pf-ava { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e3ecfb; color: #a6c4f2; font-size: 12px; font-weight: 500; overflow: hidden; vertical-align: middle; }
.mock-in .pf-ava::before { content: ""; width: 60%; height: 60%; background: currentColor; -webkit-mask: var(--pf-ic-user) center/contain no-repeat; mask: var(--pf-ic-user) center/contain no-repeat; }
.mock-in .pf-ava.txt::before { display: none; }
.mock-in .pf-ava-s { width: 20px; height: 20px; }
.mock-in .pf-ava-l { width: 32px; height: 32px; font-size: 14px; }
.mock-in .pf-ava-n { background: #f0f1f3; color: #d3d6d9; }
.mock-in .pf-ava-c { background: var(--pf-blue); color: #fff; }


.mock-in .pf-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mock-in .pf-tbl th { height: 40px; padding: 0 10px; border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); color: #909396; font-weight: 400; text-align: left; white-space: nowrap; }
.mock-in .pf-tbl td { height: 46px; padding: 0 10px; border-bottom: 1px solid var(--pf-line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock-in .pf-tbl tbody tr:hover, .mock-in .pf-tbl tr.hov td { background: #f7f9fc; }
.mock-in .pf-tbl-gray th { border-top: 0; background: var(--pf-bg); }
.mock-in .pf-tbl-s td { height: 38px; }
.mock-in .pf-tbl td.ov { overflow: visible; }
.mock-in .pf-tbl .r { text-align: right; }
.mock-in .pf-tbl .c { text-align: center; }
.mock-in .pf-no { color: var(--pf-text2); font-family: var(--ui-num); font-variant-numeric: tabular-nums; }


.mock-in .pf-pg { display: flex; align-items: center; gap: 8px; }
.mock-in .pf-pg-i { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 4px; border: 1px solid var(--pf-border); border-radius: 4px; background: #fff; font-family: var(--ui-num); }
.mock-in .pf-pg-i.on { border-color: var(--pf-blue); background: var(--pf-blue); color: #fff; }
.mock-in .pf-pg-n { border-color: transparent; background: transparent; }
.mock-in .pf-pg-i.dis { color: var(--pf-text3); }


.mock-in .pf-card { background: #fff; border-radius: 8px; padding: 16px; }
.mock-in .pf-card-bd { border: 1px solid var(--pf-line); }
.mock-in .pf-card-sh { box-shadow: 0 2px 12px rgba(31, 56, 110, .08); }
.mock-in .pf-card-h { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.mock-in .pf-card-t { font-size: 16px; font-weight: 600; }
.mock-in .pf-mc { display: flex; flex-direction: column; gap: 6px; }
.mock-in .pf-stat { display: inline-block; text-align: left; }
.mock-in .pf-stat-l { display: block; color: var(--pf-text2); line-height: 20px; }
.mock-in .pf-stat-v { display: block; font: 800 30px/38px var(--pf-fnum); letter-spacing: .5px; -webkit-text-stroke: .5px currentColor; }
.mock-in .pf-stat-u { margin-left: 4px; color: #5d6064; font: 400 14px var(--ui-font); letter-spacing: 0; -webkit-text-stroke: 0; }
.mock-in .pf-delta { font-size: 12px; }
.mock-in .pf-up { color: var(--pf-red); }
.mock-in .pf-down { color: var(--pf-green); }
.mock-in .pf-prog { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--pf-line); overflow: hidden; }
.mock-in .pf-prog > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--pf-blue); }
.mock-in .pf-prog-g > i { background: var(--pf-green); }
.mock-in .pf-prog-o > i { background: var(--pf-orange); }
.mock-in .pf-prog-r > i { background: var(--pf-red); }
.mock-in .pf-prog-c > i { background: var(--pf-cyan); }
.mock-in .pf-prog-s { height: 4px; }
.mock-in .pf-prog-l { height: 8px; }
.mock-in .pf-lg { display: inline-flex; align-items: center; gap: 6px; color: var(--pf-text2); font-size: 12px; white-space: nowrap; }
.mock-in .pf-lg::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--pf-blue)); }
.mock-in .pf-date { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 4px; background: #f4f6f8; white-space: nowrap; }
.mock-in .pf-date .pf-i { color: var(--pf-text3); }
.mock-in .pf-tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px; background: #f3f4f6; color: #9ca1a6; }
.mock-in .pf-tile-b { background: var(--pf-blue-bg); color: var(--pf-blue); font-weight: 500; }


.mock-in .pf-steps { display: flex; align-items: center; }
.mock-in .pf-step { display: flex; align-items: center; gap: 8px; color: var(--pf-text3); white-space: nowrap; }
.mock-in .pf-step + .pf-step::before { content: ""; width: 56px; height: 1px; margin-right: 8px; background: var(--pf-border); }
.mock-in .pf-step-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-family: var(--ui-num); }
.mock-in .pf-step.on { color: var(--pf-text); font-weight: 600; }
.mock-in .pf-step.on .pf-step-n { border-color: var(--pf-blue); background: var(--pf-blue); color: #fff; }
.mock-in .pf-step.done { color: var(--pf-text); }
.mock-in .pf-step.done .pf-step-n { border-color: var(--pf-blue); color: var(--pf-blue); }
.mock-in .pf-alert { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 4px; background: var(--pf-blue-bg); }
.mock-in .pf-alert > .pf-i { color: var(--pf-blue); }
.mock-in .pf-alert-g { background: #e8f7f0; }
.mock-in .pf-alert-g > .pf-i { color: var(--pf-green); }
.mock-in .pf-alert-o { background: #fdf0e6; }
.mock-in .pf-alert-o > .pf-i { color: var(--pf-orange); }
.mock-in .pf-alert-r { background: #fdecee; }
.mock-in .pf-alert-r > .pf-i { color: var(--pf-red); }
.mock-in .pf-kv { display: grid; grid-template-columns: 88px 1fr; gap: 12px 8px; }
.mock-in .pf-kv > :nth-child(odd) { color: var(--pf-text2); }


.mock-in .pf-mask { position: absolute; inset: 0; background: rgba(10, 20, 40, .45); }
.mock-in .pf-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; display: flex; flex-direction: column; background: #fff; box-shadow: -8px 0 24px rgba(20, 40, 80, .14); }
.mock-in .pf-drawer-b { top: auto; left: 0; width: auto; height: 320px; box-shadow: 0 -8px 24px rgba(20, 40, 80, .14); }
.mock-in .pf-modal { position: absolute; display: flex; flex-direction: column; width: 480px; border-radius: 8px; background: #fff; box-shadow: 0 12px 40px rgba(20, 40, 80, .2); }
.mock-in .pf-pn-h { flex: none; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--pf-line); font-size: 16px; font-weight: 600; }
.mock-in .pf-pn-b { flex: 1; min-height: 0; padding: 20px; }
.mock-in .pf-pn-f { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--pf-line); }
.mock-in .pf-menu { padding: 4px; border: 1px solid var(--pf-line); border-radius: 6px; background: #fff; box-shadow: 0 4px 16px rgba(20, 40, 80, .14); }
.mock-in .pf-menu-i { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 4px; white-space: nowrap; }
.mock-in .pf-menu-i.on { background: var(--pf-blue-bg); color: var(--pf-blue); }
.mock-in .pf-pop { padding: 10px 12px; border-radius: 6px; background: #fff; box-shadow: 0 4px 20px rgba(20, 40, 80, .16); }
.mock-in .pf-pop-dk { background: rgba(22, 26, 29, .92); color: #fff; }
.mock-in .pf-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: #c9ccd1 transparent; }
.mock-in .pf-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.mock-in .pf-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: #c9ccd1; }
.mock-in .pf-sb { position: absolute; top: 0; right: 2px; bottom: 0; width: 6px; }
.mock-in .pf-sb > i { position: absolute; left: 0; right: 0; border-radius: 3px; background: rgba(22, 26, 29, .22); }


.mock-in .pf-gt { position: relative; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--gw, 82px) - 1px), var(--pf-line) calc(var(--gw, 82px) - 1px), var(--pf-line) var(--gw, 82px)); }
.mock-in .pf-gt-row { position: relative; height: 42px; border-bottom: 1px solid var(--pf-line); }
.mock-in .pf-gt-bar { position: absolute; top: 15px; height: 12px; border-radius: 3px; background: var(--pf-blue-l); overflow: hidden; }
.mock-in .pf-gt-bar > i { display: block; height: 100%; background: var(--pf-blue); }
.mock-in .pf-gt-o { background: #fbd9c3; }
.mock-in .pf-gt-o > i { background: var(--pf-orange); }
.mock-in .pf-gt-r { background: #f7ced2; }
.mock-in .pf-gt-r > i { background: var(--pf-red); }
.mock-in .pf-gt-g { background: #c4eadb; }
.mock-in .pf-gt-g > i { background: var(--pf-green); }
.mock-in .pf-gt-ms { position: absolute; top: 12px; width: 16px; height: 16px; border-radius: 3px; background: var(--pf-green); transform: rotate(45deg); }
.mock-in .pf-gt-now { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pf-green); }


.mock-in .pf-row { display: flex; align-items: center; }
.mock-in .pf-col { display: flex; flex-direction: column; }
.mock-in .pf-fill { flex: 1; min-width: 0; }
.mock-in .pf-g4 { gap: 4px; }
.mock-in .pf-g8 { gap: 8px; }
.mock-in .pf-g12 { gap: 12px; }
.mock-in .pf-g16 { gap: 16px; }
.mock-in .pf-g24 { gap: 24px; }
.mock-in .pf-ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock-in .pf-t1 { color: var(--pf-text); }
.mock-in .pf-t2 { color: var(--pf-text2); }
.mock-in .pf-t3 { color: var(--pf-text3); }
.mock-in .pf-bl { color: var(--pf-blue); }
.mock-in .pf-b { font-weight: 600; }
.mock-in .pf-f12 { font-size: 12px; }
.mock-in .pf-f16 { font-size: 16px; }
.mock-in .pf-num { font-family: var(--ui-num); font-variant-numeric: tabular-nums; }
.mock-in .pf-vl { width: 1px; height: 16px; background: var(--pf-line); }
.mock-in .pf-hr { height: 1px; background: var(--pf-line); }



@font-face { font-family: "Inter Tight"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }

:root {
  --bg: #f3f1ec;
  --bg-2: #eae7e0;
  --card: #fbfaf7;
  --white: #fff;
  --ink: #0d0e12;
  --ink-2: #2b2e37;
  --ink-3: #62666f;
  --ink-4: #9a9ea7;
  --hair: rgba(13, 14, 18, 0.12);
  --hair-2: rgba(13, 14, 18, 0.22);
  --accent: #0a4fff;
  --accent-soft: rgba(10, 79, 255, 0.08);
  --night: #0a0b0f;
  --night-2: #12141a;
  --night-3: #1a1d25;
  --night-ink: #e9eaee;
  --night-ink-2: #a3a7b2;
  --night-hair: rgba(255, 255, 255, 0.14);
  --green: #18b274;
  --orange: #ed7b2f;
  --red: #e34d59;

  --f-sans: "Inter Tight", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --font-body: var(--f-sans);
  --font-display: var(--f-sans);

  --wrap: 1280px;
  --gut: clamp(20px, 4.2vw, 64px);
  --nav-h: 64px;
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-xl: 32px;
  --ease: cubic-bezier(0.22, 0.7, 0.18, 1);
  --shadow-1: 0 1px 2px rgba(13, 14, 18, 0.05), 0 8px 24px rgba(13, 14, 18, 0.06);
  --shadow-2: 0 2px 4px rgba(13, 14, 18, 0.05), 0 24px 60px rgba(13, 14, 18, 0.12);
  --ink-2-old: var(--ink-2);
  --line: var(--hair);

  
  color-scheme: light;
  --mock-bg: #fff;
  --mock-ink: #0d0e12;
  --on-ink: #fff;
  --on-ink-2: #a3a7b2;
  --on-ink-hair: rgba(255, 255, 255, 0.3);
  --on-accent: #fff;
  --nav-solid: rgba(243, 241, 236, 0.94);
  --nav-solid-night: rgba(10, 11, 15, 0.94);
  --glass: rgba(243, 241, 236, 0.86);
  --glass-pop: rgba(243, 241, 236, 0.94);
  --pill: rgba(251, 250, 247, 0.92);
  --mark: rgba(10, 79, 255, 0.18);
  --accent-mid: rgba(10, 79, 255, 0.35);
  --col: rgba(255, 255, 255, 0.8);
  --app-end: #eceff5;
  --night-edge: transparent;
  --browser-bar: #f1efe9;
  --browser-dot: #d6d3cb;
  --shadow-shot: 0 1px 2px rgba(13, 14, 18, 0.04), 0 20px 48px rgba(13, 14, 18, 0.07);
  --shadow-ba: 0 20px 48px rgba(13, 14, 18, 0.08);
  --shadow-hover: 0 30px 60px rgba(13, 14, 18, 0.12);
  --shadow-over: 0 30px 70px rgba(13, 14, 18, 0.28);
  --plate-blend: multiply;
  --plate-filter: grayscale(1) contrast(0.94) brightness(1.02);
  --plate-opacity: 1;
  --dim: 0.5;
  --phone-ring: transparent;
  --ico-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  --ico-theme: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.2 14.6A8.2 8.2 0 0 1 9.4 3.8a8.2 8.2 0 1 0 10.8 10.8z'/></svg>");
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0c10;
    --bg-2: #11131a;
    --card: #14161d;
    --white: #181b23;
    --ink: #ecebe6;
    --ink-2: #cfcec9;
    --ink-3: #9a9ea7;
    --ink-4: #838791;
    --hair: rgba(255, 255, 255, 0.12);
    --hair-2: rgba(255, 255, 255, 0.22);
    --accent: #6b97ff;
    --accent-soft: rgba(107, 151, 255, 0.14);
    --night: #06070a;
    --night-2: #0d0f14;
    --on-ink: #0b0c10;
    --on-ink-2: #5b5f68;
    --on-ink-hair: rgba(13, 14, 18, 0.22);
    --on-accent: #06070a;
    --nav-solid: rgba(11, 12, 16, 0.98);
    --nav-solid-night: rgba(11, 12, 16, 0.98);
    --glass: rgba(11, 12, 16, 0.92);
    --glass-pop: rgba(24, 27, 35, 0.94);
    --pill: rgba(24, 27, 35, 0.92);
    --mark: rgba(107, 151, 255, 0.3);
    --accent-mid: rgba(107, 151, 255, 0.4);
    --col: rgba(255, 255, 255, 0.07);
    --app-end: #0e121b;
    --night-edge: rgba(255, 255, 255, 0.07);
    --browser-bar: #1c1f28;
    --browser-dot: #3b404c;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
    --shadow-shot: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.45);
    --shadow-ba: 0 24px 56px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.55);
    --shadow-over: 0 30px 70px rgba(0, 0, 0, 0.6);
    --plate-blend: normal;
    --plate-filter: grayscale(1) brightness(0.82) contrast(0.96);
    --plate-opacity: 0.9;
    --dim: 0.8;
    --phone-ring: rgba(255, 255, 255, 0.14);
    --ico-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0c10' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
    --ico-theme: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4.2'/><path d='M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.35 5.35l1.55 1.55M17.1 17.1l1.55 1.55M18.65 5.35L17.1 6.9M6.9 17.1l-1.55 1.55'/></svg>");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c10;
  --bg-2: #11131a;
  --card: #14161d;
  --white: #181b23;
  --ink: #ecebe6;
  --ink-2: #cfcec9;
  --ink-3: #9a9ea7;
  --ink-4: #838791;
  --hair: rgba(255, 255, 255, 0.12);
  --hair-2: rgba(255, 255, 255, 0.22);
  --accent: #6b97ff;
  --accent-soft: rgba(107, 151, 255, 0.14);
  --night: #06070a;
  --night-2: #0d0f14;
  --on-ink: #0b0c10;
  --on-ink-2: #5b5f68;
  --on-ink-hair: rgba(13, 14, 18, 0.22);
  --on-accent: #06070a;
  --nav-solid: rgba(11, 12, 16, 0.98);
  --nav-solid-night: rgba(11, 12, 16, 0.98);
  --glass: rgba(11, 12, 16, 0.92);
  --glass-pop: rgba(24, 27, 35, 0.94);
  --pill: rgba(24, 27, 35, 0.92);
  --mark: rgba(107, 151, 255, 0.3);
  --accent-mid: rgba(107, 151, 255, 0.4);
  --col: rgba(255, 255, 255, 0.07);
  --app-end: #0e121b;
  --night-edge: rgba(255, 255, 255, 0.07);
  --browser-bar: #1c1f28;
  --browser-dot: #3b404c;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-shot: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.45);
  --shadow-ba: 0 24px 56px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.55);
  --shadow-over: 0 30px 70px rgba(0, 0, 0, 0.6);
  --plate-blend: normal;
  --plate-filter: grayscale(1) brightness(0.82) contrast(0.96);
  --plate-opacity: 0.9;
  --dim: 0.8;
  --phone-ring: rgba(255, 255, 255, 0.14);
  --ico-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0c10' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  --ico-theme: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4.2'/><path d='M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.35 5.35l1.55 1.55M17.1 17.1l1.55 1.55M18.65 5.35L17.1 6.9M6.9 17.1l-1.55 1.55'/></svg>");
}

.mock { color-scheme: light; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink-2); font-family: var(--f-sans); font-size: 16px; line-height: 1.75; overflow-x: hidden; transition: background-color 0.3s, color 0.3s; }

:where(body *:not(.mock):not(.mock *)) { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 10px 18px; border-radius: 99px; font-weight: 600; transition: top 0.2s; }
.skip:focus { top: 14px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }


.t-display { font-weight: 600; font-size: clamp(42px, 6.6vw, 108px); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
.t-h2 { font-weight: 600; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); }
.t-h3 { font-weight: 600; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.t-h4 { font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.p-lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; color: var(--ink-3); }
.p-cap { font-family: var(--f-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.p-cap.accent { color: var(--accent); }
.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: 0; }
.serif.p-i { font-style: italic; }
.p-num { font-family: var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mute { color: var(--ink-3); }
.accent { color: var(--accent); }
.hair { border: 0; border-top: 1px solid var(--hair); margin: 0; }

.idx-n { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: var(--ink-3); letter-spacing: 0.02em; }


.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; color: var(--ink); transition: background 0.4s, color 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
.nav[data-tone="dark"] { color: var(--night-ink); }
.nav.is-solid { background: var(--nav-solid); border-color: var(--hair); }
.nav[data-tone="dark"].is-solid { background: var(--nav-solid-night); border-color: var(--night-hair); }
.nav-in { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 24px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 7px; font-size: 14px; letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; }
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 400; opacity: 0.58; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); font-size: 14px; font-weight: 500; }
.nav-links a { position: relative; padding: 6px 0; opacity: 0.62; transition: opacity 0.25s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.nav-links a:hover, .nav-links a.is-active { opacity: 1; }
.nav-links a.is-active::after, .nav-links a:hover::after { transform: scaleX(1); }
.nav-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lang-switch, .theme-toggle { flex: none; color: inherit; border: 1px solid var(--hair-2); transition: opacity 0.25s, background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
.nav[data-tone="dark"] .lang-switch, .nav[data-tone="dark"] .theme-toggle { border-color: var(--night-hair); }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 44px; padding: 0 13px; border-radius: 99px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; line-height: 1; white-space: nowrap; opacity: 0.78; }
.lang-switch[lang^="zh"] { font-size: 13px; letter-spacing: 0.04em; }
.lang-switch[lang^="en"] { padding-top: 2px; }
.lang-switch:hover { opacity: 1; border-color: currentColor; }
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; opacity: 0.78; }
.theme-toggle:hover { opacity: 1; border-color: currentColor; }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle i { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico-theme) center / contain no-repeat; mask: var(--ico-theme) center / contain no-repeat; }
.nav-cta { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 18px; border-radius: 99px; border: 1px solid currentColor; font-size: 14px; font-weight: 500; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.nav-cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav[data-tone="dark"] .nav-cta:hover { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; margin-right: -10px; color: inherit; }
.nav-toggle span, .nav-toggle span::before { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.3s var(--ease); }
.nav-toggle span::before { content: ""; position: absolute; top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] span { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(-6px) rotate(-90deg); top: 6px; }
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 70; transform-origin: left; transform: scaleX(0); background: var(--accent); }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 99px; font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s; }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--accent); transform: translateY(-1px); }
.btn-line { border: 1px solid var(--hair-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-light { background: var(--night-ink); color: var(--night); }
.btn-light:hover { background: #fff; }
.btn-ghost-dark { border: 1px solid var(--night-hair); color: var(--night-ink); }
.btn-ghost-dark:hover { border-color: var(--night-ink); }
.ar { display: inline-block; width: 14px; height: 14px; background: currentColor; transition: transform 0.4s var(--ease);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M8 7h9v9'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M8 7h9v9'/></svg>") center / contain no-repeat; }
a:hover > .ar, .btn:hover .ar { transform: translate(2px, -2px); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--hair-2); padding-bottom: 3px; transition: border-color 0.3s, color 0.3s; }
.link:hover { border-color: var(--accent); color: var(--accent); }


.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.p-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}


.p-sec { position: relative; padding-block: clamp(52px, 6.2vw, 92px); }
.sec-dark { background: var(--night); color: var(--night-ink-2); box-shadow: inset 0 1px 0 var(--night-edge), inset 0 -1px 0 var(--night-edge); transition: background-color 0.3s; }
.sec-dark .t-h2, .sec-dark .t-h3, .sec-dark .t-h4, .sec-dark .t-display { color: var(--night-ink); }
.sec-dark .p-lead, .sec-dark .p-cap, .sec-dark .mute { color: var(--night-ink-2); }
.sec-dark .hair { border-color: var(--night-hair); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 18px clamp(32px, 6vw, 120px); align-items: end; margin-bottom: clamp(24px, 3vw, 48px); padding-bottom: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--hair); }
.sec-dark .sec-head { border-color: var(--night-hair); }
.sec-head .p-cap { margin-bottom: 18px; display: flex; gap: 14px; align-items: baseline; }
.sec-head .p-cap .idx-n { font-size: 18px; text-transform: none; letter-spacing: 0; }
.sec-head .p-lead { max-width: 34em; }




.p-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(28px, 3.8vw, 60px)); padding-bottom: clamp(32px, 4vw, 64px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 112px); align-items: start; }
.hero-kicker { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(18px, 2.2vw, 32px); color: var(--ink-3); font-size: 13px; letter-spacing: 0.04em; }
.hero-kicker .idx-n { font-size: 18px; color: var(--ink); }
.hero-title { max-width: 12.5em; font-size: clamp(40px, 5.8vw, 104px); }
.hero-en { margin-top: clamp(22px, 2.6vw, 40px); font-size: clamp(22px, 2.3vw, 36px); line-height: 1.15; color: var(--ink); }
.hero-side { padding-top: clamp(44px, 4.6vw, 70px); }
.hero-side .p-lead { max-width: 26em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-meta { margin: clamp(26px, 3vw, 44px) 0 0; border-top: 1px solid var(--hair-2); }
.hero-meta > div { display: grid; grid-template-columns: 5.2em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.hero-meta dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); padding-top: 3px; }
.hero-meta dd { margin: 0; font-weight: 500; color: var(--ink); font-size: 15px; }


.specimen-wrap { margin-top: clamp(28px, 3.4vw, 52px); overflow: hidden; padding-block: 8px 4px; }
.specimen { --sh: clamp(250px, 27.5vw, 400px); --sx: 0px; display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 20px); width: max-content; padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2)); transform: translate3d(calc(var(--sx) * -1), 0, 0); will-change: transform; }
.sp { flex: none; }
.sp a { display: block; }
.sp-win { position: relative; height: var(--sh); width: calc(var(--sh) * var(--r)); border-radius: 14px; overflow: hidden; background: var(--bg); border: 1px solid var(--hair-2); transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), border-color 0.4s, background-color 0.3s; isolation: isolate; }
.sp-win .mock { border-radius: 0; box-shadow: none; mix-blend-mode: var(--plate-blend); filter: var(--plate-filter); opacity: var(--plate-opacity); transition: filter 0.9s var(--ease), opacity 0.9s var(--ease); }
.sp:hover .sp-win .mock, .sp a:focus-visible .sp-win .mock { filter: none; opacity: 1; }
.sp:hover .sp-win { transform: translateY(-6px); border-color: var(--ink); box-shadow: var(--shadow-hover); }
.sp-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.sp-cap .idx-n { font-size: 17px; color: var(--ink); }
.sp-cap b { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.sp-cap i { font-style: normal; color: var(--ink-4); }
.sp-cap i::before { content: "·"; margin-right: 12px; }


.film .sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; background: #000; border: 1px solid var(--night-hair); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); }
.player video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.player-hit { position: absolute; inset: 0; cursor: pointer; }
.player-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; pointer-events: none; color: #fff; background: linear-gradient(180deg, rgba(10, 11, 15, 0.12), rgba(10, 11, 15, 0.5)); transition: opacity 0.5s var(--ease); }
.player-big { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.5s var(--ease), background 0.3s; }
.player:hover .player-big { transform: scale(1.06); background: rgba(255, 255, 255, 0.24); }
.player-big i, .player-btn i { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.player[data-state="playing"] .player-cover { opacity: 0; }
.player-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 28px 22px 16px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s var(--ease); }
.player:hover .player-ui, .player:focus-within .player-ui, .player[data-state="paused"].started .player-ui { opacity: 1; transform: none; }
.player-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; }
.player-btn i { border-width: 7px 0 7px 12px; margin-left: 3px; }
.player[data-state="playing"] .player-btn i { width: 12px; height: 14px; margin: 0; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.player-btn.p-sm b { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 2px; }
.player-track { position: relative; flex: 1; height: 18px; cursor: pointer; display: flex; align-items: center; }
.player-track::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, 0.3); }
.player-track span { position: relative; display: block; height: 2px; width: 0; background: #fff; }
.player-track span::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.player-time { font-size: 13px; color: rgba(255, 255, 255, 0.8); min-width: 5.5em; text-align: right; }
.chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: clamp(24px, 3vw, 40px); }
.chapters li { border-top: 1px solid var(--night-hair); position: relative; }
.chapters li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: var(--p, 0%); background: var(--night-ink); }
.chapters button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 18px 16px 4px 0; color: var(--night-ink-2); transition: color 0.3s; }
.chapters button:hover, .chapters li.p-on button { color: var(--night-ink); }
.chapters .p-num { font-size: 12px; letter-spacing: 0.08em; color: var(--night-ink-2); }
.chapters b { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.chapters i { font-style: normal; font-size: 13px; opacity: 0.7; }


.idx { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.idx-list { border-bottom: 1px solid var(--hair); }
.idx-list a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 52px 22px; align-items: center; gap: 16px; padding: clamp(16px, 1.8vw, 24px) 0; border-top: 1px solid var(--hair); color: var(--ink-3); transition: color 0.3s, padding 0.5s var(--ease); }
.idx-list .p-n { font-size: 14px; color: var(--ink-4); }
.idx-list .p-t b { display: block; font-weight: 600; font-size: clamp(21px, 2.3vw, 34px); line-height: 1.25; letter-spacing: -0.025em; color: var(--ink-3); transition: color 0.3s, transform 0.5s var(--ease); }
.idx-list .p-t i { display: block; margin-top: 4px; font-style: normal; font-size: 14px; color: var(--ink-4); }
.idx-list .p-k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.idx-list .p-y { font-size: 14px; text-align: right; }
.idx-list .ar { width: 18px; height: 18px; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.5s var(--ease); }
.idx-list a:hover .p-t b, .idx-list a.p-on .p-t b { color: var(--ink); transform: translateX(8px); }
.idx-list a:hover .p-n, .idx-list a.p-on .p-n { color: var(--accent); }
.idx-list a:hover .ar, .idx-list a.p-on .ar { opacity: 1; transform: none; color: var(--ink); }
.idx-view { position: sticky; top: calc(var(--nav-h) + 28px); aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; background: var(--bg); border: 1px solid var(--hair-2); }
.pv { position: absolute; inset: 0; display: grid; align-items: center; opacity: 0; transform: scale(1.04); transition: opacity 0.6s var(--ease), transform 1s var(--ease); background: var(--bg); }
.pv.p-on { opacity: 1; transform: none; }
.pv .mock { border-radius: 0; mix-blend-mode: var(--plate-blend); filter: var(--plate-filter); opacity: var(--plate-opacity); transition: filter 0.9s var(--ease), opacity 0.9s var(--ease); }
.idx:hover .pv.p-on .mock { filter: none; opacity: 1; }


.skill-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair-2); }
.skill { display: grid; align-content: start; gap: 14px; padding: 28px 28px 8px 0; position: relative; }
.skill { padding-bottom: 36px; }
.skill:nth-child(3n + 2), .skill:nth-child(3n) { padding-left: 28px; border-left: 1px solid var(--hair); }
.skill:nth-child(n + 4) { border-top: 1px solid var(--hair); }
.skill .p-n { font-family: var(--f-serif); font-style: italic; font-size: 22px; color: var(--ink-4); }
.skill p { font-size: 15px; line-height: 1.8; color: var(--ink-3); }
.skill .link { margin-top: 10px; justify-self: start; font-size: 14px; }
.principles { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 20px clamp(24px, 4vw, 56px); margin-top: clamp(56px, 7vw, 104px); padding-top: 28px; border-top: 1px solid var(--hair); }
.principles ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.principles li { position: relative; font-weight: 500; color: var(--ink); }
.principles li + li::before { content: ""; position: absolute; left: -13px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.principles blockquote { justify-self: end; max-width: 30em; text-align: right; font-size: 15px; color: var(--ink-3); }




.p-intro { display: none; }
.intro-on .p-intro { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 28px; background: var(--bg); animation: introOut 1s cubic-bezier(0.76, 0, 0.18, 1) 2.05s forwards; pointer-events: none; }
.intro-mark { display: grid; justify-items: center; font-weight: 600; font-size: clamp(44px, 9vw, 132px); line-height: 0.98; letter-spacing: -0.045em; color: var(--ink); }
.intro-mark span { display: flex; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.intro-mark i { display: block; font-style: normal; transform: translateY(112%); animation: introLetter 1s var(--ease) forwards; animation-delay: calc(var(--k, 0) * 55ms + 150ms); }
.intro-mark .p-d i { color: var(--ink-4); animation-delay: calc(var(--k, 0) * 55ms + 520ms); }
.intro-mark i:nth-child(1) { --k: 0; } .intro-mark i:nth-child(2) { --k: 1; } .intro-mark i:nth-child(3) { --k: 2; }
.intro-mark i:nth-child(4) { --k: 3; } .intro-mark i:nth-child(5) { --k: 4; } .intro-mark i:nth-child(6) { --k: 5; }
.intro-line { width: min(260px, 40vw); height: 1px; background: var(--hair-2); overflow: hidden; }
.intro-line span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; animation: introBar 1.8s var(--ease) 0.2s forwards; }
@keyframes introLetter { to { transform: none; } }
@keyframes introBar { to { transform: scaleX(1); } }
@keyframes introOut { to { transform: translateY(-101%); visibility: hidden; } }
.intro-on .p-hero .rv { transition-delay: calc(var(--d, 0s) + 2.15s); }
.intro-on .hero-title .p-ln > span { --base: 2.2s; }


.hero-title .p-ln { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero-title .p-ln > span { display: block; transform: translateY(118%); transition: transform 1.3s var(--ease); transition-delay: calc(var(--base, 0.08s) + var(--i) * 0.12s); }
.hero-title.p-in .p-ln > span { transform: none; }
html:not(.js) .hero-title .p-ln > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-title .p-ln > span { transform: none; transition: none; } }


.chapter-tag { position: fixed; left: var(--gut); bottom: 22px; z-index: 55; display: flex; align-items: baseline; gap: 12px; padding: 8px 16px 8px 14px; border-radius: 99px; background: var(--glass-pop); border: 1px solid var(--hair); color: var(--ink); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.6s var(--ease); pointer-events: none; }
.chapter-tag .idx-n { font-size: 17px; letter-spacing: 0; color: inherit; text-transform: none; }
.chapter-tag.dark { background: rgba(18, 20, 26, 0.94); border-color: var(--night-hair); color: var(--night-ink); }
.chapter-tag.show { opacity: 1; transform: none; }


.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { position: fixed; left: 0; top: 0; z-index: 150; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(13, 14, 18, 0.88); color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; opacity: 0; scale: 0.4; transition: opacity 0.3s, scale 0.5s var(--ease); will-change: transform; }
  .cursor.p-on { opacity: 1; scale: 1; }
  .cursor.dark { background: rgba(243, 241, 236, 0.92); color: var(--mock-ink); }
}


.end-mark { display: grid; }
.end-mark span { display: flex; }
.end-mark i { display: block; font-style: normal; transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); opacity: var(--o, 1); transform: translateY(var(--y, 0)); will-change: opacity, transform; }
.end-mark span:last-child { color: var(--night-ink-2); -webkit-text-stroke: 0; opacity: 0.5; }



.case + .case { border-top: 1px solid var(--hair); }
.chap { position: relative; padding-block: clamp(44px, 5.4vw, 88px); }
.chap + .chap { border-top: 1px solid var(--hair); }
.chap-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 64px); }
.chap-head .p-cap { color: var(--accent); margin-bottom: 14px; }
.chap-head .p-lead { margin-top: 20px; }
.p-lead b { color: var(--ink); font-weight: 600; }


.case-nav { position: sticky; top: var(--nav-h); z-index: 40; margin-bottom: clamp(24px, 3vw, 48px); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--hair); transition: background-color 0.3s, border-color 0.3s; }
.case-nav-in { display: flex; gap: clamp(14px, 2vw, 30px); overflow-x: auto; scrollbar-width: none; }
.case-nav-in::-webkit-scrollbar { display: none; }
.case-nav a { position: relative; flex: none; padding: 15px 0; font-size: 13.5px; font-weight: 500; color: var(--ink-4); transition: color 0.3s; }
.case-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.case-nav a:hover { color: var(--ink); }
.case-nav a.is-active { color: var(--ink); }
.case-nav a.is-active::after { transform: scaleX(1); }


.shot { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--mock-bg); border: 1px solid var(--hair); box-shadow: var(--shadow-shot); }
.shot.p-flat { box-shadow: none; }
.shot.round-l { border-radius: var(--r-l); }
.shot.tint { background: #eef0f6; }
.shot.pad { padding: clamp(10px, 1.6vw, 22px); }
.shot.dark { background: var(--night-2); border-color: var(--night-hair); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.shot.dark-frame { background: #101520; padding: 6px; border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(13, 14, 18, 0.22); }
.shot.dark-frame .mock { border-radius: 12px; }
.shot.dotted { background: #f4f6fb radial-gradient(circle, #cfd5e4 1px, transparent 1.4px) 0 0 / 18px 18px; }
.shot.p-banner { width: 100%; }
.shot[data-zoom] { cursor: zoom-in; }
.shot[data-zoom]::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(13, 14, 18, 0.78) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5M10.5 8v5M8 10.5h5'/></svg>") center / 18px no-repeat; opacity: 0; transform: scale(0.85); transition: 0.3s var(--ease); pointer-events: none; }
.shot[data-zoom]:hover::after { opacity: 1; transform: none; }
.shot figcaption { margin: 0; padding: 12px 18px; font-size: 13.5px; background: var(--white); border-top: 1px solid var(--hair); color: var(--ink-3); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.shot.dark figcaption { background: var(--night-2); border-color: var(--night-hair); color: var(--night-ink-2); }
figcaption, .cap-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); line-height: 1.6; }
.cap-note { display: block; }


.p-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; }
.tag-before { border: 1px solid var(--hair-2); color: var(--ink-3); }
.tag-after { background: var(--ink); color: var(--bg); }
.p-ok, .no { position: relative; padding-left: 28px; }
.p-ok::before, .no::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 16px; height: 16px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 10px; }
.p-ok::before { background-color: var(--ink); background-image: var(--ico-check); }
.no::before { background-color: transparent; border: 1px solid var(--ink-4); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ea7' stroke-width='3' stroke-linecap='round'><path d='M7 7l10 10M17 7L7 17'/></svg>"); }
.p-ok b, .no b { color: var(--ink); font-weight: 600; }
mark { background: linear-gradient(transparent 62%, var(--mark) 62%); color: var(--ink); font-weight: 600; padding: 0 2px; }
.callout { padding: 16px 22px; border-left: 2px solid var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 500; border-radius: 0 var(--r-s) var(--r-s) 0; }


.block { margin-top: clamp(32px, 4.2vw, 68px); }
.block:first-child { margin-top: 0; }
.block p { margin-top: 12px; }
.blk-title { font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 18px; }
.blk-title.p-sq::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; background: var(--accent); vertical-align: 0.1em; }
.blk-title.ok-title { position: relative; padding-left: 36px; }
.blk-title.ok-title::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 22px; height: 22px; border-radius: 50%; background: var(--ink) var(--ico-check) center / 13px no-repeat; }
.blk-title .emoji-no, .blk-title .emoji-ok { position: relative; display: inline-block; padding-left: 36px; }
.blk-title .emoji-no::before, .blk-title .emoji-ok::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.blk-title .emoji-no::before { border: 1px solid var(--ink-4); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ea7' stroke-width='3' stroke-linecap='round'><path d='M7 7l10 10M17 7L7 17'/></svg>"); }
.blk-title .emoji-ok::before { background-color: var(--ink); background-image: var(--ico-check); }
.block-note { max-width: 52em; margin-bottom: 26px; }
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; }
.split.reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.split.reverse .split-copy { order: 2; }
.split.inner { margin-top: 24px; }
.split-copy { display: grid; gap: 10px; align-content: start; }
.split-copy > .p-tag { justify-self: start; }
.split-copy .shot { margin-top: 14px; }
.note-card { display: grid; gap: 12px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-m); background: var(--card); border: 1px solid var(--hair); transition: background-color 0.3s, border-color 0.3s; }
.note-card p { margin: 0; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 28px; align-items: start; }
.duo.tight { margin-top: 0; }
.duo-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-bottom: 26px; }
.duo-text p { margin: 0; }
.issue-list, .point-list { display: grid; gap: 14px; margin-top: 14px; }
.point-list.inline { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }
.issue-line { margin: 14px 0 26px; max-width: 56em; }
.compare { margin-top: 10px; }
.compare.after-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.p-tag + .issue-list, .p-tag + .point-list { margin-top: 18px; }


.intro-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-bottom: clamp(32px, 4vw, 56px); }
.proj-title { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.appicon { flex: none; width: 64px; height: 70px; }
.appicon .mock { border-radius: 0; }
.ver { align-self: flex-start; padding: 3px 10px; border: 1px solid var(--ink); border-radius: 99px; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; color: var(--ink); }
.tagline { font-weight: 600; font-size: clamp(18px, 1.8vw, 24px); color: var(--accent); margin-bottom: 14px; letter-spacing: -0.01em; }
.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--hair); }
.meta dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.meta dd { margin: 2px 0 0; font-weight: 500; color: var(--ink); }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: center; max-width: 760px; }
.why-list { display: grid; }
.why-list li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: clamp(20px, 2.4vw, 32px) 0; border-top: 1px solid var(--hair); }
.why-list li:last-child { border-bottom: 1px solid var(--hair); }
.why-list .p-num { font-family: var(--f-serif); font-style: italic; font-size: 40px; line-height: 1; color: var(--ink-4); }
.why-list h4 { font-weight: 600; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.4; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; }
.why-list p { color: var(--ink-3); font-size: 15px; }



.goal-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr); gap: clamp(24px, 5vw, 88px); align-items: end; margin-bottom: clamp(28px, 3.6vw, 52px); }
.goal-copy { display: grid; justify-items: start; gap: 22px; }
.goal-title { font-weight: 600; font-size: clamp(38px, 5.6vw, 88px); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
.goal-art { border-radius: var(--r-l); overflow: hidden; background: var(--bg-2); border: 1px solid var(--hair); aspect-ratio: 1 / 1; }
.goal-art .mock { height: 100%; }


.ktabs-nav { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 44px); margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--hair); }
.kr-tab { position: relative; text-align: left; padding: 14px 0 16px; color: var(--ink-4); transition: color 0.3s; }
.kr-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.kr-tab:hover { color: var(--ink-2); }
.kr-tab[aria-selected="true"] { color: var(--ink); }
.kr-tab[aria-selected="true"]::after { transform: scaleX(1); }
.p-kr { display: inline-flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 500; }
.p-kr b { font-weight: 600; font-size: 12px; letter-spacing: 0.12em; color: var(--accent); }
.kr-tab:not([aria-selected="true"]) .p-kr b { color: inherit; }
.ktabs-panel { animation: panelIn 0.6s var(--ease); }
.ktabs-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }


.token-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }
.palette { display: grid; align-content: start; }
.pal-row { display: flex; }
.pal-row.p-r1 { width: 72%; }
.pal-row.p-r2 { width: 88%; margin-top: -1px; }
.pal-row.p-r3 { width: 100%; margin-top: -1px; }
.p-sw { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; padding: 16px 18px; background: var(--c); color: #fff; text-align: left; min-height: 110px; transition: filter 0.3s, transform 0.4s var(--ease); }
.p-sw.big { min-height: 220px; padding: 24px 26px; border-radius: 22px 22px 0 22px; }
.p-sw.big small { font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); }
.p-sw b { font-family: var(--f-sans); font-weight: 500; font-size: 13px; opacity: 0.85; letter-spacing: 0.02em; }
.p-sw:hover { filter: brightness(1.08); z-index: 2; }
.pal-row.p-r2 .p-sw:last-child, .pal-row.p-r3 .p-sw:last-child { border-top-right-radius: 22px; }
.p-sw.copied::after { content: "已复制"; position: absolute; right: 10px; top: 10px; padding: 3px 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.55); font-size: 12px; font-weight: 600; }
.p-sw.copied:lang(en)::after { content: "Copied"; }
.typecard { position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 28px; padding: clamp(22px, 2.8vw, 38px); border-radius: var(--r-l); color: #fff; background: radial-gradient(70% 90% at 70% 0%, rgba(255, 214, 120, 0.8), rgba(255, 140, 50, 0.35) 42%, transparent 72%), radial-gradient(60% 80% at 15% 20%, rgba(40, 150, 190, 0.75), transparent 70%), #07090d; }
.typecard > * { position: relative; }
.typecard small { display: block; color: rgba(255, 255, 255, 0.66); font-size: 13px; margin-bottom: 4px; }
.tc-big { font-weight: 600; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.15; letter-spacing: -0.02em; }
.tc-big.latin { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.02em; }
.tc-top { display: grid; gap: 20px; }
.tc-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.tc-sizes { display: flex; align-items: baseline; gap: 14px; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; }
.tc-weights { display: flex; flex-direction: column; gap: 4px; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; }
.tc-ghost { position: absolute !important; left: 24px; bottom: -0.2em; margin: 0 !important; font-weight: 700; font-size: clamp(44px, 6.4vw, 92px); white-space: nowrap; color: rgba(255, 255, 255, 0.06); pointer-events: none; }
.icon-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.icon-copy p { margin-bottom: 18px; max-width: 30em; color: var(--ink-3); }
.shot.icon-grid { background: var(--mock-bg); padding: clamp(10px, 1.6vw, 20px); border-radius: var(--r-l); }
.grid24 { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: clamp(3px, 0.8vw, 14px); height: clamp(110px, 16vw, 200px); padding: 0 clamp(8px, 1.4vw, 22px); border-inline: 1px dashed var(--accent); background: var(--bg-2); border-radius: 8px; }
.grid24 i { background: var(--col); border-radius: 4px; margin-block: 12px; transition: background 0.3s; }
.grid24 i.p-on { background: var(--accent); }
.grid24 i:hover { background: var(--accent-mid); }
.grid-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 18px; color: var(--ink-3); font-size: 14px; }
.grid-meta ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.grid-meta b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.grid-meta p { margin: 0 !important; }
.spec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-bottom: 26px; }
.spec-head p { margin: 0; max-width: 40em; color: var(--ink-3); }
.spec-flow { display: flex; align-items: center; }
.spec-flow li { position: relative; padding: 7px 16px; border-radius: 99px; border: 1px solid var(--hair-2); color: var(--ink); font-weight: 500; font-size: 13px; }
.spec-flow li + li { margin-left: 22px; }
.spec-flow li + li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 1px; background: var(--ink-4); }


.ba-wrap .cap-note { text-align: center; }
.ba { position: relative; aspect-ratio: var(--ar, 1.55); border-radius: var(--r-m); overflow: hidden; background: var(--mock-bg); border: 1px solid var(--hair); box-shadow: var(--shadow-ba); user-select: none; -webkit-user-select: none; touch-action: pan-y; --pos: 50%; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer .mock { width: 100%; height: 100%; border-radius: 0; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-lab { position: absolute; top: 14px; z-index: 3; background: var(--pill); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ba-lab.tag-after { background: var(--ink); }
.ba-lab.p-l { left: 14px; } .ba-lab.p-r { right: 14px; }
.ba-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; cursor: ew-resize; display: grid; place-items: center; }
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -0.75px; background: var(--mock-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
.ba-handle::after { content: "‹ ›"; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mock-ink); color: #fff; font-size: 15px; letter-spacing: 2px; box-shadow: 0 6px 20px rgba(13, 14, 18, 0.35), 0 0 0 4px rgba(251, 250, 247, 0.9); }
.ba-handle:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }


.nav-feature { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); border-radius: var(--r-l); overflow: hidden; background: var(--card); border: 1px solid var(--hair); transition: background-color 0.3s, border-color 0.3s; }
.nav-panel { position: relative; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); background: var(--night-2); overflow: hidden; }
.nav-ghost { position: absolute; left: 14px; bottom: 6px; font-family: var(--f-serif); font-style: italic; font-size: clamp(48px, 7vw, 100px); line-height: 1; color: rgba(255, 255, 255, 0.07); white-space: nowrap; pointer-events: none; }
.nav-pair { position: relative; width: min(100%, 300px); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.nav-text { padding: clamp(24px, 3.2vw, 48px); display: grid; gap: 8px; align-content: center; }
.nav-text .blk-title { font-size: clamp(18px, 1.8vw, 24px); margin: 14px 0 0; }
.nav-text .blk-title:first-child { margin-top: 0; }
.nav-text p { margin: 0; color: var(--ink-3); }
.swap { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.swap .shot { width: 54%; }
.swap i { font-style: normal; font-size: 24px; color: var(--accent); }
.signal-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.signal-copy { display: grid; gap: 20px; }
.signal-copy p { margin: 0; font-size: 17px; }
.big-n { color: var(--accent); font-size: 1.7em; line-height: 1; margin-inline: 3px; font-weight: 600; }
.legend { display: grid; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); font-size: 15px; }
.legend i { width: 28px; height: 4px; border-radius: 4px; background: var(--c); }
.steps-cmp { display: grid; gap: 10px; margin: 6px 0 26px; }
.p-sc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 22px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--hair); transition: background-color 0.3s, border-color 0.3s; }
.p-sc small { flex: none; padding: 3px 12px; border-radius: 99px; border: 1px solid var(--hair-2); color: var(--ink-3); font-size: 12px; font-weight: 500; }
.p-sc.new { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.p-sc.new small { border-color: var(--on-ink-hair); color: var(--on-ink-2); }
.p-sc.new i { color: var(--on-ink-2); }
.p-sc p { margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: inherit; font-weight: 500; }
.p-sc i { font-style: normal; color: var(--ink-4); }
.count { margin-left: 6px; padding: 2px 10px; border-radius: 99px; background: var(--bg-2); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.count.p-g { background: var(--accent); color: var(--on-accent); }
.flow-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.flow-chips li { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--hair-2); font-weight: 500; font-size: 14px; color: var(--ink); }
.flow-chips li + li::before { content: "→"; margin-right: 12px; color: var(--ink-4); font-weight: 400; }
.p-chk { max-width: 320px; }
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.stepper li { position: relative; display: grid; gap: 12px; }
.stepper b { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: clamp(16px, 1.6vw, 21px); color: var(--ink); }
.p-st-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink); color: var(--ink); font-weight: 600; font-size: 14px; }
.stack-fig { position: relative; padding-bottom: 14%; }
.stack-fig .over { position: absolute; right: -2%; bottom: 0; width: 56%; box-shadow: var(--shadow-over); }


.ov-panel { position: relative; overflow: hidden; padding: clamp(28px, 4.4vw, 72px); border-radius: var(--r-xl); background: var(--night); color: var(--night-ink-2); box-shadow: inset 0 0 0 1px var(--night-edge); transition: background-color 0.3s; }
.ov-ghost { position: absolute; left: 50%; top: 10px; translate: -50% 0; width: 100%; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: clamp(56px, 12vw, 180px); line-height: 1; color: rgba(255, 255, 255, 0.04); white-space: nowrap; pointer-events: none; }
.ov-head { position: relative; max-width: 700px; margin-bottom: clamp(28px, 4vw, 56px); }
.ov-head .p-cap { color: var(--night-ink-2); }
.ov-head h3 { color: var(--night-ink); margin-top: 10px; }
.ov-head .p-lead { margin-top: 14px; color: var(--night-ink-2); }
.ov-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.p-ov { margin: 0; border-radius: 12px; overflow: hidden; background: var(--mock-bg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); transition: transform 0.5s var(--ease); cursor: zoom-in; }
.p-ov:hover { transform: translateY(-4px); }
.p-ov figcaption { margin: 0; padding: 9px 14px; background: #0f1218; color: var(--night-ink-2); font-size: 12.5px; border: 0; }
.p-ov.p-a { grid-column: 1 / 8; } .p-ov.p-b { grid-column: 8 / 13; } .p-ov.p-c { grid-column: 1 / 5; } .p-ov.p-d { grid-column: 5 / 8; }
.p-ov.p-e { grid-column: 8 / 13; } .p-ov.p-f { grid-column: 1 / 8; } .p-ov.p-g { grid-column: 8 / 13; }


.site-hero { margin-bottom: clamp(32px, 4vw, 64px); border-radius: var(--r-xl); }
.site-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.browser { position: sticky; top: calc(var(--nav-h) + 70px); border-radius: var(--r-m); overflow: hidden; background: var(--mock-bg); box-shadow: var(--shadow-2); border: 1px solid var(--hair); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: var(--browser-bar); border-bottom: 1px solid var(--hair); transition: background-color 0.3s, border-color 0.3s; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--browser-dot); }
.browser-bar span { margin-left: 12px; flex: 1; text-align: center; font-size: 12px; color: var(--ink-4); padding-right: 46px; }
.browser-body { height: min(66vh, 620px); overflow-y: auto; scrollbar-width: thin; background: var(--mock-bg); overscroll-behavior: contain; color-scheme: light; }
.site-notes { display: grid; }
.site-notes li button { width: 100%; text-align: left; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 22px 0; border-top: 1px solid var(--hair); transition: opacity 0.3s; opacity: var(--dim); }
.site-notes li:last-child button { border-bottom: 1px solid var(--hair); }
.site-notes li button .p-num { grid-row: 1 / span 2; font-family: var(--f-serif); font-style: italic; font-size: 22px; color: var(--ink-4); }
.site-notes li b { font-weight: 600; font-size: 19px; color: var(--ink); line-height: 1.4; letter-spacing: -0.01em; }
.site-notes li p { margin: 4px 0 0; color: var(--ink-3); font-size: 14.5px; }
.site-notes li.is-active button, .site-notes li button:hover { opacity: 1; }
.site-notes li.is-active .p-num { color: var(--accent); }
.site-feat { margin-top: clamp(56px, 7vw, 104px); }
.feat-head { max-width: 760px; margin-bottom: 24px; }
.feat-head p { margin-top: 10px; color: var(--ink-3); }
.feat-strip { margin-bottom: 28px; }
.ktabs.pills .ktabs-nav { gap: 8px; margin-bottom: 24px; border: 0; }
.ktabs.pills .kr-tab { padding: 9px 20px; border-radius: 99px; border: 1px solid var(--hair-2); font-weight: 500; font-size: 14px; color: var(--ink-3); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.ktabs.pills .kr-tab::after { display: none; }
.ktabs.pills .kr-tab:hover { border-color: var(--ink); color: var(--ink); }
.ktabs.pills .kr-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.feat-panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(18px, 2.4vw, 36px); border-radius: var(--r-l); background: var(--card); border: 1px solid var(--hair); transition: background-color 0.3s, border-color 0.3s; }
.feat-panel[hidden] { display: none; }
.feat-text h5 { margin: 0 0 12px; font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); color: var(--ink); letter-spacing: -0.02em; }
.feat-text p { color: var(--ink-3); }




.app { background: linear-gradient(180deg, var(--bg) 0%, var(--app-end) 100%); }
.app-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 6vw, 112px); align-items: end; margin-bottom: clamp(56px, 7vw, 112px); }
.app-big { margin: 0 0 18px; font-weight: 600; font-size: clamp(56px, 9vw, 140px); line-height: 0.95; letter-spacing: -0.045em; color: var(--ink); }
.app-name { font-weight: 600; font-size: clamp(22px, 2.6vw, 38px); color: var(--ink-3); letter-spacing: -0.02em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li { padding: 6px 16px; border-radius: 99px; border: 1px solid var(--hair-2); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.app-bg p { margin-top: 12px; color: var(--ink-3); }
.app-bg small { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 0.8em; color: var(--ink-4); margin-left: 10px; }

.app-viewer { display: grid; grid-template-columns: 240px minmax(300px, 380px) minmax(0, 1fr); gap: clamp(24px, 4.4vw, 80px); align-items: start; padding: clamp(24px, 3.2vw, 56px) 0 0; border-top: 1px solid var(--hair-2); }
.app-modules { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; }
.am { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 6px; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--ink-4); transition: color 0.3s, padding 0.5s var(--ease); }
.am .p-num { grid-row: 1 / span 2; align-self: center; font-family: var(--f-serif); font-style: italic; font-size: 17px; }
.am b { font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: -0.01em; }
.am small { font-size: 11.5px; letter-spacing: 0.04em; opacity: 0.8; }
.am:hover { color: var(--ink-2); }
.am.is-on { color: var(--ink); padding-left: 10px; }
.am.is-on .p-num { color: var(--accent); }
.app-stage { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; justify-items: center; gap: 14px; }
.phone-lg { height: min(76vh, 700px); aspect-ratio: 9 / 18.6; max-width: 100%; padding: 9px; border-radius: 46px; background: #0d0e12; box-shadow: var(--shadow-2), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 0 1px var(--phone-ring); position: relative; }
.phone-lg::before { content: ""; position: absolute; z-index: 4; top: 17px; left: 50%; width: 88px; height: 22px; margin-left: -44px; border-radius: 99px; background: #05070b; }
.phone-lg .phone-screen { height: 100%; border-radius: 38px; }
.phone-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-behavior: smooth; background: #eaf1ff; }
.phone-scroll::-webkit-scrollbar { display: none; }
.phone-scroll .p-scr[hidden] { display: none; }
.phone-scroll .mock { border-radius: 0; box-shadow: none; }
.phone-dots { display: flex; gap: 8px; min-height: 6px; }
.phone-dots button { width: 28px; height: 3px; border-radius: 3px; background: var(--hair-2); transition: background 0.3s, width 0.3s; }
.phone-dots button.is-on { background: var(--ink); width: 44px; }
.scroll-tip { font-size: 12.5px; color: var(--ink-4); }
.app-notes .p-note { display: grid; gap: 16px; align-content: start; animation: panelIn 0.5s var(--ease); }
.app-notes .p-note[hidden] { display: none; }
.app-notes .p-cap { color: var(--accent); }
.app-notes .t-h4 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.03em; }
.app-notes p { color: var(--ink-3); }
.note-points { display: grid; gap: 10px; }
.note-points li { position: relative; padding-left: 22px; color: var(--ink-2); }
.note-points li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 10px; height: 1px; background: var(--ink); }
.app-notes .shot { max-width: 520px; }


.dash { background: var(--night); }
.dash-tabs .ktabs-nav { border-color: var(--night-hair); }
.dash-tabs .kr-tab { display: inline-flex; align-items: baseline; gap: 12px; color: var(--night-ink-2); opacity: 0.7; }
.dash-tabs .kr-tab::after { background: var(--night-ink); }
.dash-tabs .kr-tab b { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.dash-tabs .kr-tab small { font-size: 13px; opacity: 0.7; }
.dash-tabs .kr-tab:hover { opacity: 1; color: var(--night-ink); }
.dash-tabs .kr-tab[aria-selected="true"] { opacity: 1; color: var(--night-ink); }
.d-hero { position: relative; margin-bottom: clamp(56px, 7vw, 104px); }
.d-hero-img { border-radius: var(--r-xl); }
.d-hero-info { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 56px); align-items: center; margin: clamp(-120px, -9vw, -40px) clamp(12px, 3.4vw, 52px) 0; padding: clamp(22px, 3vw, 44px); border-radius: var(--r-l); background: rgba(10, 11, 15, 0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--night-hair); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.d-hero-info > .t-h3 { grid-column: 1; grid-row: 1; }
.d-hero-info .p-cap { grid-column: 1; margin-top: 4px; font-size: 11px; line-height: 1.7; letter-spacing: 0.1em; }
.d-meta { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 18px; margin: 0; }
.d-meta dt { font-size: 12px; color: var(--night-ink-2); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.d-meta dd { margin: 0; color: var(--night-ink); }
.d-meta ol { list-style: decimal; padding-left: 1.3em; display: grid; gap: 4px; }
.d-meta ol li::marker { color: var(--night-ink-2); }
.d-meta .p-num { font-size: 22px; font-weight: 600; }
.dblock { margin-top: clamp(48px, 6vw, 96px); }
.dblock:first-of-type { margin-top: 0; }
.dh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--night-hair); }
.dh span { font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); color: var(--night-ink); letter-spacing: -0.02em; }
.dh small { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-ink-2); }
.dh .p-ico { display: none; }
.shot.dark.p-mt { margin-top: clamp(14px, 2vw, 28px); }
.d-text { max-width: 44em; margin-bottom: 20px; color: var(--night-ink-2); }
.d-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.d-two .d-text { margin-bottom: 0; }
.dark-duo { margin-top: 0; }
.dash .cap-note { color: var(--night-ink-2); }
.dash .shot.dark figcaption { text-align: center; }
.scroller, .tall-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: #3a4256 #0f1218; }
.scroller::after, .tall-scroll::after { display: none; }
.scroller .scroll-in .mock { width: 1500px; max-width: none; }
.tall-scroll { max-height: 660px; }
.scroller { cursor: grab; }
.scroller.dragging { cursor: grabbing; }
.wire { border: 1px solid var(--night-hair); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.03); color: var(--night-ink); font-weight: 500; }
.w-title { text-align: center; padding: 12px; background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid var(--night-hair); }
.w-body { display: grid; grid-template-columns: 0.72fr 1.3fr 0.72fr; gap: 12px; padding: 12px; height: clamp(180px, 22vw, 280px); }
.w-body > div { display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--night-hair); border-radius: 4px; }
.w-body > .w-main { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.3); }
.std { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(24px, 3vw, 48px); border-radius: var(--r-l); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--night-hair); }
.std-fonts { display: grid; gap: 22px; margin: 0; }
.std-fonts dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-ink-2); }
.std-fonts dd { margin: 4px 0 0; color: var(--night-ink); font-size: clamp(24px, 2.8vw, 38px); line-height: 1.2; }
.f-title { font-weight: 700; }
.f-body { font-weight: 400; }
.f-num { font-family: "DIN Condensed", "Bahnschrift", var(--f-sans); font-weight: 700; letter-spacing: 0.02em; }
.std-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
.std-colors button { display: grid; justify-items: center; gap: 10px; width: 100%; color: #fff; }
.std-colors i { width: 56px; height: 56px; border-radius: 14px; background: var(--c); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.4s var(--ease); }
.std-colors button:hover i { transform: translateY(-4px); }
.std-colors span { font-size: 12.5px; font-weight: 500; color: var(--night-ink-2); }
.std-colors button.copied span::after { content: " 已复制"; color: var(--night-ink); }
.std-colors button.copied:lang(en) span::after { content: " Copied"; }


.ops-hero { margin-bottom: clamp(24px, 3vw, 40px); }
.ops-hero .mock { max-height: 520px; }
.ops-block { margin-top: clamp(56px, 7vw, 112px); }
.ops-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.ops-head .mute { font-size: 14px; color: var(--ink-3); }
.poster-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.poster-frame { position: relative; }
.poster-frame::after { content: "悬停滚动"; position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 5px 14px; border-radius: 99px; background: rgba(13, 14, 18, 0.74); color: #fff; font-size: 12px; font-weight: 500; pointer-events: none; transition: opacity 0.4s; }
.poster-frame:lang(en)::after { content: "Hover to scroll"; }
.poster-frame.is-played::after { opacity: 0; }
@media (hover: none) { .poster-frame::after { display: none; } }
.poster-win { height: min(66vh, 580px); overflow-y: auto; border-radius: var(--r-m); background: #0a46e0; box-shadow: var(--shadow-2); scrollbar-width: none; overscroll-behavior: contain; cursor: zoom-in; }
.poster-win::-webkit-scrollbar { display: none; }
.poster-win .mock { border-radius: 0; }
.poster h4 { margin-top: 18px; font-weight: 600; font-size: 19px; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; }
.poster p { margin-top: 6px; font-size: 14px; color: var(--ink-3); line-height: 1.7; }
.print-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); align-items: start; }
.print { margin: 0; cursor: zoom-in; }
.print-img { overflow: hidden; border-radius: var(--r-l); background: #dbe3ef; box-shadow: var(--shadow-2); aspect-ratio: 4 / 5; transition: transform 0.7s var(--ease); }
.print:hover .print-img { transform: translateY(-6px); }
.print-img .mock { height: 100%; }
.print figcaption { margin-top: 14px; }


.end { background: var(--night); color: var(--night-ink-2); padding-bottom: 36px; }
.end .p-cap { color: var(--night-ink-2); }
.end-mark { margin: clamp(32px, 5vw, 72px) 0 0; font-weight: 600; font-size: clamp(56px, 13.4vw, 240px); line-height: 0.96; letter-spacing: -0.045em; color: var(--night-ink); }
.end-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(36px, 5vw, 72px); }
.end-en { font-size: clamp(24px, 2.8vw, 42px); line-height: 1.15; color: var(--night-ink-2); }
.end .link { color: var(--night-ink); border-color: var(--night-hair); }
.end .link:hover { border-color: var(--night-ink); color: #fff; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: clamp(64px, 8vw, 128px); padding-top: 22px; border-top: 1px solid var(--night-hair); font-size: 13px; color: var(--night-ink-2); }
.foot .wordmark { color: var(--night-ink); }


.p-lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 11, 15, 0.94); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.p-lb:not([open]) { display: none; }
.p-lb::backdrop { background: transparent; }
.lb-body { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: 64px 24px 72px; }
.lb-frame { width: min(94vw, 1500px); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7); background: #fff; }
.p-lb.tall .lb-body { place-items: start center; }
.p-lb.tall .lb-frame { width: min(92vw, 640px); }
.lb-close { position: fixed; right: 20px; top: 16px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); font-size: 28px; line-height: 1; transition: background 0.25s, transform 0.3s; }
.lb-close:hover { background: rgba(255, 255, 255, 0.26); transform: rotate(90deg); }
.lb-cap { position: fixed; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; padding-inline: 24px; font-size: 13.5px; color: rgba(255, 255, 255, 0.7); pointer-events: none; }
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 120; translate: -50% 30px; padding: 11px 22px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.3s, translate 0.4s var(--ease); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }
.toast.show { opacity: 1; translate: -50% 0; }



@media (max-width: 1180px) {
  .app-viewer { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
  .app-modules { grid-column: 1 / -1; position: static; display: flex; overflow-x: auto; gap: 18px; scrollbar-width: none; border-bottom: 1px solid var(--hair); }
  .app-modules::-webkit-scrollbar { display: none; }
  .am { flex: none; min-width: 120px; border-bottom: 0; padding: 12px 0 14px; }
  .am.is-on { padding-left: 0; box-shadow: inset 0 -2px 0 var(--ink); }
  .poster-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .site-grid { grid-template-columns: minmax(0, 1fr); }
  .browser { position: relative; top: 0; }
  .browser-body { height: min(60vh, 560px); }
  .d-hero-info { grid-template-columns: minmax(0, 1fr); }
  .d-meta { grid-column: 1; grid-row: auto; }
  .skill-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill:nth-child(n) { padding-left: 0; border-left: 0; border-top: 0; }
  .skill:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--hair); }
  .skill:nth-child(n + 3) { border-top: 1px solid var(--hair); }
}

@media (max-width: 900px) {
  .specimen-wrap { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .specimen-wrap::-webkit-scrollbar { display: none; }
  .specimen { --sh: 260px; transform: none !important; padding-inline: var(--gut); }
  .sp { scroll-snap-align: start; }
  :root { --nav-h: 58px; }
  .nav-in { display: flex; gap: 12px; }
  .nav-tools { margin-left: auto; gap: 8px; }
  .nav-toggle { display: grid; }
  .nav-cta { display: none; }
  .nav-links { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 90px var(--gut) 40px; background: var(--bg); color: var(--ink); font-size: 34px; font-weight: 600; letter-spacing: -0.03em; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; }
  .nav-links a { opacity: 1; padding: 10px 0; }
  .nav.menu-open { color: var(--ink); }
  .nav.menu-open .lang-switch, .nav.menu-open .theme-toggle { border-color: var(--hair-2); }
  .nav.menu-open .nav-links { opacity: 1; visibility: visible; }

  .hero-grid, .sec-head, .film .sec-head, .idx, .intro-grid, .why-grid, .goal-head, .split, .split.reverse, .token-grid, .icon-block, .nav-feature, .signal-grid, .compare.after-row, .feat-panel, .d-two, .std, .app-intro { grid-template-columns: minmax(0, 1fr); }
  .sec-head { align-items: start; }
  .split.reverse .split-copy { order: 0; }
  .hero-side { padding-top: 0; }
  .idx-view { display: none; }
  .idx-list a { grid-template-columns: 34px minmax(0, 1fr) 44px 18px; }
  .idx-list .p-k { display: none; }
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapters li:last-child { grid-column: 1 / -1; }
  .goal-art { max-height: 320px; aspect-ratio: 16 / 10; }
  .duo, .duo-text, .point-list.inline { grid-template-columns: minmax(0, 1fr); }
  .stepper { grid-template-columns: minmax(0, 1fr); }
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-grid > .p-ov { grid-column: 1 / -1 !important; }
  .app-viewer { grid-template-columns: minmax(0, 1fr); }
  .app-stage { position: relative; top: 0; }
  .phone-lg { height: min(70vh, 620px); }
  .app-notes .shot { max-width: none; }
  .print-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .print-row .print:first-child { grid-column: 1 / -1; }
  .print-row .print:first-child .print-img { aspect-ratio: 16 / 10; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principles blockquote { justify-self: start; text-align: left; }
  .nav-pair { width: min(100%, 250px); }
  .tc-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .meta { grid-template-columns: 1fr 1fr; }
  .why-list li { grid-template-columns: 48px 1fr; gap: 12px; }
  .ktabs-nav { gap: 0 18px; }
  .pal-row.p-r1 { width: 80%; } .pal-row.p-r2 { width: 92%; }
  .p-sw { padding: 12px; min-height: 88px; }
  .p-sw b { font-size: 11.5px; }
  .p-sw.big { min-height: 160px; }
  .poster-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; }
  .poster-row::-webkit-scrollbar { display: none; }
  .poster { flex: 0 0 76%; scroll-snap-align: start; }
  .poster-win { height: min(62vh, 480px); }
  .print-row { grid-template-columns: minmax(0, 1fr); }
  .print-row .print:first-child .print-img { aspect-ratio: 4 / 5; }
  .skill-row { grid-template-columns: minmax(0, 1fr); }
  .skill:nth-child(n) { padding: 24px 0 20px; border-left: 0; border-top: 0; }
  .skill + .skill { border-top: 1px solid var(--hair); }
  .foot { justify-content: flex-start; }
  .site-notes li button { grid-template-columns: 34px 1fr; padding: 16px 0; }
  .chap { padding-block: 48px; }
  .d-hero-info { margin-inline: 8px; }
  .std-colors i { width: 48px; height: 48px; }
  .idx-list .p-y { display: none; }
  .idx-list a { grid-template-columns: 30px minmax(0, 1fr) 18px; }
  .player-time { display: none; }
  .player-big { width: 68px; height: 68px; }
  .chapters b { font-size: 16px; }
  .lb-body { padding: 56px 8px 64px; }
}

@media (hover: none) {
  .shot[data-zoom]::after { display: none; }
}


:lang(en) .hero-title { font-size: clamp(38px, 5.2vw, 92px); }
:lang(en) .idx-list .p-t b { font-size: clamp(20px, 2.1vw, 30px); }
:lang(en) .idx-list .p-k { letter-spacing: 0.08em; }
:lang(en) .sp-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; width: 0; min-width: 100%; white-space: normal; line-height: 1.45; }
:lang(en) .sp-cap .idx-n { grid-row: 1 / span 2; }
:lang(en) .sp-cap i::before { display: none; }


.u-web-ui-dashboard {
  --pf-bg: #eeeef2; --pf-top-h: 54px; --pf-sub-w: 134px;
  background: linear-gradient(90deg, #0747ec, #779df7 20%, #8b8ff8 52%, #b277f6) top / 100% 10px no-repeat, linear-gradient(180deg, #0747ec, #7ca1f2 110px) left / 8px 100% no-repeat, #7ca1f2;
}
.u-web-ui-dashboard .pf-shell { inset: 10px 0 0 8px; border-top-left-radius: 14px; }
.u-web-ui-dashboard .pf-nav { gap: 2px; margin-top: -2px; }
.u-web-ui-dashboard .pf-sub { padding-top: 5px; }
.u-web-ui-dashboard .pf-sub-i { margin-bottom: 1px; }
.u-web-ui-dashboard .pf-main { margin-top: 2px; }
.u-web-ui-dashboard .pf-sub-sep { margin: 5px 4px 8px; }
.u-web-ui-dashboard .d-fs { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d9dbde; border-radius: 4px; background: #fff; color: #2b3036; }
.u-web-ui-dashboard .d-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 8px; overflow: hidden; }
.u-web-ui-dashboard .pf-card { position: relative; flex: none; }
.u-web-ui-dashboard .d-c1 { height: 237px; }
.u-web-ui-dashboard .d-row { display: flex; flex: none; gap: 8px; }
.u-web-ui-dashboard .d-c2 { flex: 1; height: 353px; }
.u-web-ui-dashboard .d-stats { position: absolute; left: 0; right: 0; top: 64px; display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 24px; }
.u-web-ui-dashboard .d-st { position: relative; display: flex; justify-content: center; }
.u-web-ui-dashboard .d-st:not(:nth-child(5n))::after { content: ""; position: absolute; right: 0; top: 17px; height: 30px; width: 1px; background: var(--pf-line); }
.u-web-ui-dashboard .d-st .pf-stat-l { color: #54585c; }
.u-web-ui-dashboard .d-st .pf-stat-v { margin-top: 6px; }
.u-web-ui-dashboard .d-date { position: absolute; right: 15px; top: 12px; }
.u-web-ui-dashboard .d-date .to { margin: 0 2px; }
.u-web-ui-dashboard .d-unit { position: absolute; left: 22px; top: 161px; color: #6a6d6f; font-size: 12px; line-height: 17px; }
.u-web-ui-dashboard .d-lgr { position: absolute; right: 15px; top: 161px; display: flex; gap: 10px; line-height: 17px; }
.u-web-ui-dashboard .d-ch { position: absolute; }
.u-web-ui-dashboard .d-panel { position: absolute; left: 21px; top: 65px; width: 564px; height: 88px; border-radius: 6px; background: #fafbfc; }
.u-web-ui-dashboard .d-seg { position: absolute; left: 31px; top: 74px; width: 534px; height: 18px; display: flex; gap: 1.6px; }
.u-web-ui-dashboard .d-seg i:nth-child(1) { background: #0063ff; border-radius: 3px 0 0 3px; }
.u-web-ui-dashboard .d-seg i:nth-child(2) { background: #ff9503; }
.u-web-ui-dashboard .d-seg i:nth-child(3) { background: #01d0d3; border-radius: 0 3px 3px 0; }
.u-web-ui-dashboard .d-lg2 { position: absolute; width: 150px; display: flex; flex-wrap: wrap; align-items: center; }
.u-web-ui-dashboard .d-lg2 .pf-lg { flex: 0 0 100%; gap: 4px; height: 20px; color: #4d5155; font-size: 14px; }
.u-web-ui-dashboard .d-lg2 b { margin: 3px 0 0 12px; font-size: 16px; font-weight: 400; line-height: 22px; }
.u-web-ui-dashboard .d-bar2 { width: 1px; height: 12px; margin: 3px 0 0 14px; background: #d8dade; }
.u-web-ui-dashboard .d-chip { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 0 10px; color: #6a6d6f; font-size: 12px; }
.u-web-ui-dashboard .d-list { position: absolute; left: 0; right: 0; top: 52px; }
.u-web-ui-dashboard .d-it { display: flex; align-items: center; gap: 8px; height: 66.4px; padding: 0 16px; }
.u-web-ui-dashboard .d-it-m { flex: 1; min-width: 0; }
.u-web-ui-dashboard .d-it-t { display: flex; align-items: center; gap: 6px; line-height: 20px; white-space: nowrap; }
.u-web-ui-dashboard .d-it-s { display: flex; align-items: center; line-height: 18px; color: var(--pf-text3); font-size: 12px; white-space: nowrap; }
.u-web-ui-dashboard .d-it-s { margin-top: 5px; }
.u-web-ui-dashboard .d-bar { width: 1px; height: 10px; margin: 0 8px; background: #d8dade; }
.u-web-ui-dashboard .d-mp { flex: none; width: 40px; height: 5px; background: #e7e6e9; }
.u-web-ui-dashboard .d-mp > i { background: #0a5ff1; }
.u-web-ui-dashboard .d-pct { width: 25px; flex: none; color: var(--pf-text3); font-size: 12px; text-align: right; }
.u-web-ui-dashboard .d-tot { position: absolute; transform: translate(-50%, -100%); font-size: 14px; line-height: 16px; }
.u-web-ui-dashboard .d-halo { position: absolute; left: 37.6px; top: 77.6px; width: 184px; height: 184px; border-radius: 50%; background: #f3f6fc; }
.u-web-ui-dashboard .d-halo i { position: absolute; inset: 36px; border-radius: 50%; background: radial-gradient(circle, #fff 30%, #e9f0fb 100%); }
.u-web-ui-dashboard .d-donut { position: absolute; left: 49.6px; top: 89.6px; }
.u-web-ui-dashboard .d-dc { position: absolute; left: 49.6px; top: 146px; width: 160px; text-align: center; }
.u-web-ui-dashboard .d-dc .pf-stat-v { font-size: 20px; line-height: 28px; }
.u-web-ui-dashboard .d-dc span { display: block; color: #6a6d6f; font-size: 12px; line-height: 17px; }
.u-web-ui-dashboard .d-dl { position: absolute; left: 51px; width: 157px; display: flex; justify-content: space-between; line-height: 20px; }
.u-web-ui-dashboard .d-dl .pf-lg { gap: 6px; color: #54585c; font-size: 14px; }
.u-web-ui-dashboard .d-vl { position: absolute; left: 261px; top: 84px; width: 1px; height: 236px; background: var(--pf-line); }
.u-web-ui-dashboard .d-fxs { position: absolute; left: 300px; top: 73px; width: 259px; }
.u-web-ui-dashboard .d-fx { height: 52.8px; }
.u-web-ui-dashboard .d-fx-h { display: flex; justify-content: space-between; line-height: 20px; color: #54585c; }
.u-web-ui-dashboard .d-fx-h .pf-num { color: var(--pf-text); }
.u-web-ui-dashboard .d-fx .pf-prog { margin-top: 6px; background: #e7e6e9; }
.u-web-ui-dashboard .d-svg { position: absolute; left: 0; top: 0; }
.u-web-ui-dashboard .d-xl { position: absolute; top: 328px; transform: translate(-50%, -50%); color: #6a6d6f; font-size: 12px; line-height: 16px; }


.u-app-economic .ec-s1 { position: absolute; left: 0; right: 0; top: 102px; }
.u-app-economic .ec-wrap { position: absolute; left: 16px; top: 236px; width: 344px; height: 366px; padding: 17px 12px 13px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, rgba(255,255,255,.35) 0, #fff 20px); box-shadow: 0 6px 18px rgba(60,110,230,.07); }
.u-app-economic .ec-grid { display: grid; grid-template-columns: 156px 156px; gap: 9px 8px; }
.u-app-economic .ec-gdp { position: absolute; left: 28px; top: 142px; width: 320px; height: 94px; z-index: 2; border-radius: 3px;
  background: radial-gradient(90% 120% at 82% 20%, rgba(130,195,255,.5), rgba(130,195,255,0) 70%), linear-gradient(100deg, #10b2fd 0%, #3b86fe 30%, #3f7efd 62%, #5c9cfc 100%); box-shadow: 0 6px 14px rgba(40,120,250,.18); }
.u-app-economic .ec-orb { position: absolute; left: 0; top: 0; overflow: visible; }
.u-app-economic .ec-gdp-t { position: absolute; left: 12px; top: 14px; font-size: 17px; line-height: 20px; letter-spacing: .3px; white-space: nowrap; }
.u-app-economic .ec-gdp-v { position: absolute; left: 12px; top: 45px; gap: 8px; align-items: center; }
.u-app-economic .ec-gdp-v b { letter-spacing: -1px; }
.u-app-economic .ec-gdp-v .ph-bn-u { color: #cfe0fb; opacity: 1; margin-top: 8px; }
.u-app-economic .ec-gdp-v .ph-tag { margin-top: 1px; margin-left: 0; height: 18px; padding-left: 14px; position: relative; }
.u-app-economic .ec-gdp-v .ph-tag .ph-ic { position: absolute; left: -3px; top: -3px; width: 12px; height: 18px; color: #ffcf6b; filter: drop-shadow(0 1px 1px rgba(200,60,20,.4)); }
.u-app-economic .ec-notch { position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(45deg); border-radius: 0 0 2px 0; background: #e6f1ff; border-right: 1px solid #c4dcfb; border-bottom: 1px solid #c4dcfb; z-index: -1; }
.u-app-economic .ec-s2 { position: absolute; left: 0; right: 0; top: 625px; }
.u-app-economic .ec-proj { position: absolute; left: 16px; top: 664px; width: 344px; height: 234px; }
.u-app-economic .ec-pgrid { position: absolute; left: 12px; top: 65px; width: 320px; display: grid; grid-template-columns: 160px 160px; grid-auto-rows: 79.3px; }
.u-app-economic .ec-pc { position: relative; padding: 13px 12px 0; overflow: hidden; }
.u-app-economic .ec-pc1 { background: linear-gradient(90deg, #fff 0, #f0f5ff 100%); }
.u-app-economic .ec-pc2 { background: linear-gradient(90deg, #fffdf6 0, #fff3d4 100%); }
.u-app-economic .ec-pc3 { background: linear-gradient(90deg, #fffaf9 0, #ffebe7 100%); }
.u-app-economic .ec-pc4 { background: linear-gradient(90deg, #f6fffc 0, #d9f8f1 100%); }
.u-app-economic .ec-pc svg { position: absolute; right: -6px; top: 8px; opacity: .8; }
.u-app-economic .ec-pc4 svg { opacity: 1; }
.u-app-economic .ec-pl { position: relative; font-size: 14px; line-height: 20px; color: var(--ph-ink2); white-space: nowrap; }
.u-app-economic .ec-pv { position: relative; display: block; margin-top: 7px; font: 700 22px/28px var(--ui-num); letter-spacing: -.2px; }
.u-app-economic .ec-s3 { position: absolute; left: 0; right: 0; top: 920px; }
.u-app-economic .ec-fun { position: absolute; left: 16px; top: 961px; width: 344px; height: 259px; }
.u-app-economic .ec-funsvg { position: absolute; left: 0; top: 0; }
.u-app-economic .ec-fun .ph-lg-d { position: absolute; }
.u-app-economic .ec-foot { position: absolute; left: 0; right: 0; top: 1230px; }


.u-dash-city-c-flat { background: #02080b; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: var(--dp-t1);
  --dp-bg:#031014; --dp-c1:#1fd6b8; --dp-c2:#78f6e0; --dp-rgb:31,214,184; --dp-hi:#8ff5e2; --dp-lo:#0b8a78;
  --dp-mid-rgb:20,150,140; --dp-plate-a:#12645e; --dp-plate-b:#0a3a38; --dp-deep:#0a3a38; --dp-panel-top:rgba(10,70,72,.8); --dp-panel-bot:rgba(3,22,28,.9); }
.u-dash-city-c-flat .cz-a { position: absolute; }
.u-dash-city-c-flat .cz-bgsvg, .u-dash-city-c-flat .cz-mapsvg, .u-dash-city-c-flat .cz-frame { left: 0; top: 0; width: 2200px; height: 1236px; }
.u-dash-city-c-flat .cz-frame { pointer-events: none; }
.u-dash-city-c-flat .cz-hdr { left: 0; top: 0; width: 2200px; height: 200px; pointer-events: none; }
.u-dash-city-c-flat .cz-tags { left: 0; top: 0; width: 2200px; height: 1236px; pointer-events: none; }
.u-dash-city-c-flat .cz-shade-l { left: 0; top: 130px; width: 660px; height: 1010px; background: linear-gradient(90deg, rgba(2,8,10,.5), rgba(2,8,10,.3) 82%, rgba(2,8,10,0)); }
.u-dash-city-c-flat .cz-shade-r { left: 1560px; top: 130px; width: 640px; height: 1010px; background: linear-gradient(270deg, rgba(2,8,10,.5), rgba(2,8,10,.3) 82%, rgba(2,8,10,0)); }


.u-dash-city-c-flat .cz-tag { position: absolute; width: 90px; height: 29px; transform: translate(-50%, -50%) skewX(-8deg); border-radius: 2px;
  background: linear-gradient(180deg, rgba(238,200,92,.98), rgba(196,150,46,.97) 55%, rgba(158,114,26,.97));
  box-shadow: inset 0 0 0 1px rgba(255,238,178,.55), inset 0 -9px 10px rgba(104,66,8,.35), 0 3px 8px rgba(0,0,0,.55), 0 0 12px rgba(250,210,110,.3); }
.u-dash-city-c-flat .cz-tag span { display: block; text-align: center; font-size: 23px; line-height: 29px; font-weight: 800; letter-spacing: 1px; color: #fff; -webkit-text-stroke: .5px rgba(255,255,255,.7); text-shadow: 0 1px 2px rgba(84,52,0,.75); }


.u-dash-city-c-flat .cz-title { left: 797px; top: 10px; width: 600px; text-align: center; font-size: 50px; line-height: 68px; font-weight: 900; letter-spacing: 6px; padding-left: 6px; white-space: nowrap;
  color: transparent; background: linear-gradient(180deg, #f8fffe 15%, #9fe9de 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2.4px #d4f8f3;
  filter: drop-shadow(0 2px 2px rgba(0,30,34,.85)) drop-shadow(0 0 10px rgba(120,230,220,.4)); }
.u-dash-city-c-flat .cz-tag1, .u-dash-city-c-flat .cz-tag2 { top: 84px; font-size: 27px; line-height: 34px; font-weight: 800; letter-spacing: 4px; white-space: nowrap; color: #fff; transform: skewX(-8deg); -webkit-text-stroke: .6px #fff; text-shadow: 0 0 12px rgba(80,230,220,.55), 0 2px 3px rgba(0,24,28,.6); }
.u-dash-city-c-flat .cz-tag1 { left: 422px; }
.u-dash-city-c-flat .cz-tag2 { left: 1646px; }
.u-dash-city-c-flat .cz-wx { left: 1905px; top: 77px; width: 260px; font-size: 19px; line-height: 27px; color: #eaf6f6; white-space: nowrap; letter-spacing: -.5px; }
.u-dash-city-c-flat .cz-wx .d { font-family: var(--ui-num); font-weight: 400; font-size: 21px; letter-spacing: .3px; }


.u-dash-city-c-flat .cz-bar { height: 38px; }
.u-dash-city-c-flat .cz-bar::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 160px 0, 172px 10px, 100% 10px, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(46,152,150,.95), rgba(26,108,112,.78) 32%, rgba(10,62,68,.55) 100%); }
.u-dash-city-c-flat .cz-bar::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(176,252,244,.9), rgba(176,252,244,.9)) 0 0 / 160px 1.5px no-repeat,
    linear-gradient(90deg, rgba(150,240,232,.85), rgba(150,240,232,.12)) 172px 10px / calc(100% - 172px) 1px no-repeat,
    linear-gradient(90deg, rgba(120,230,222,.6), rgba(120,230,222,.1)) 0 100% / 100% 1px no-repeat,
    linear-gradient(115deg, transparent 44%, rgba(150,240,232,.8) 44%, rgba(150,240,232,.8) 56%, transparent 56%) 160px 0 / 14px 11px no-repeat; }
.u-dash-city-c-flat .cz-bar .p { position: absolute; left: 10px; top: 13px; width: 5px; height: 15px; border-radius: 2px; background: #33f5ee; box-shadow: 0 0 8px #33f5ee, 0 0 3px #fff; }
.u-dash-city-c-flat .cz-bar .t { position: absolute; left: 24px; top: 0; line-height: 44px; font-size: 24px; font-weight: 900; letter-spacing: 1px; color: #f6fffd; white-space: nowrap; transform: skewX(-8deg); -webkit-text-stroke: .5px #f6fffd; text-shadow: 0 0 10px rgba(80,230,220,.45); }
.u-dash-city-c-flat .cz-bar .sl { position: absolute; left: 144px; top: 3px; display: flex; gap: 4px; }
.u-dash-city-c-flat .cz-bar .sl s { display: block; width: 7px; height: 11px; background: linear-gradient(180deg, #f2fffd, #8fe0d8); transform: skewX(-32deg); }


.u-dash-city-c-flat .cz-eco { width: 212px; height: 70px; background: linear-gradient(90deg, rgba(14,64,68,.5), rgba(10,44,48,.38)); }
.u-dash-city-c-flat .cz-eco .d { position: absolute; left: 8px; top: 13px; width: 4px; height: 4px; background: #fff; border-radius: 1px; }
.u-dash-city-c-flat .cz-eco .v { position: absolute; left: 9.5px; top: 23px; width: 1px; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.08)); }
.u-dash-city-c-flat .cz-eco .n { position: absolute; left: 24px; top: 8px; line-height: 27px; font-size: 16px; color: #e8f1f3; white-space: nowrap; }
.u-dash-city-c-flat .cz-eco .n em { font-style: normal; font-size: 12px; color: #b4c4ca; margin-left: 1px; letter-spacing: -1px; }
.u-dash-city-c-flat .cz-eco .m { position: absolute; left: 24px; top: 36px; height: 36px; width: 230px; }
.u-dash-city-c-flat .cz-eco .m b { position: absolute; left: 0; top: 0; line-height: 36px; font-size: 25px; font-weight: 500; color: #3de8e6; text-shadow: none; letter-spacing: .3px; }
.u-dash-city-c-flat .cz-eco .m .y { position: absolute; left: 114px; top: 0; line-height: 38px; font-family: var(--dp-num-font); font-weight: 400; font-size: 13.5px; color: #a4b3bb; white-space: nowrap; }
.u-dash-city-c-flat .cz-eco .m .a { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; font-family: var(--dp-num-font); font-size: 13.5px; }


.u-dash-city-c-flat .cz-hex { position: absolute; --hb: linear-gradient(180deg, #39c9bc, #0d6d68); }
.u-dash-city-c-flat .cz-hex::before { background: radial-gradient(circle at 50% 30%, rgba(24,120,112,.7), #052a2c 70%, #031c1e); }
.u-dash-city-c-flat .cz-hex::after { content: ""; position: absolute; inset: 6px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 0; background: linear-gradient(180deg, rgba(120,235,222,.5), rgba(120,235,222,.0) 60%), transparent; -webkit-mask: linear-gradient(#000,#000); opacity: .0; }
.u-dash-city-c-flat .cz-hex span { font-size: 14px; font-weight: 800; font-style: italic; color: #e8fffb; letter-spacing: 0; transform: translateY(-1px); }
.u-dash-city-c-flat .cz-en { line-height: 24px; font-size: 17px; color: #e8f1f3; white-space: nowrap; }
.u-dash-city-c-flat .cz-ev { line-height: 28px; text-align: right; }
.u-dash-city-c-flat .cz-ev b { font-size: 25px; font-weight: 500; color: #3de8e6; text-shadow: none; }
.u-dash-city-c-flat .cz-ep { line-height: 24px; font-family: var(--dp-num-font); font-weight: 400; font-size: 15px; color: #aebbc2; }
.u-dash-city-c-flat .cz-ebar { width: 462px; height: 10px; background: linear-gradient(90deg, rgba(40,130,130,.22), rgba(26,92,96,.34)); }
.u-dash-city-c-flat .cz-ebar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(90deg, rgba(110,170,170,.4), rgba(150,225,218,.85) 30%, #22f0ee 62%, #12e8f2); box-shadow: 0 0 12px rgba(30,240,240,.55); }
.u-dash-city-c-flat .cz-ebar b { position: absolute; top: 0; bottom: 0; left: calc(var(--p) + 3px); width: 4px; background: #8ff8f2; transform: skewX(-35deg); box-shadow: 0 0 6px rgba(120,250,240,.9); }


.u-dash-city-c-flat .cz-345 { text-align: center; line-height: 32px; }
.u-dash-city-c-flat .cz-345 b { font-size: 24px; font-weight: 500; color: #5ff0ee; text-shadow: 0 0 10px rgba(60,230,230,.5); }
.u-dash-city-c-flat .cz-345t { text-align: center; line-height: 26px; font-size: 17px; color: #eaf3f5; }
.u-dash-city-c-flat .cz-pj { height: 28px; display: block; }
.u-dash-city-c-flat .cz-pj .cz-sq { position: absolute; left: 0; top: 8px; width: 11px; height: 11px; border-radius: 3px; border-width: 1.5px; }
.u-dash-city-c-flat .cz-pj .k { position: absolute; left: 18px; top: 0; line-height: 28px; font-size: 17px; color: #eaf1f3; white-space: nowrap; }
.u-dash-city-c-flat .cz-pj b { position: absolute; right: 74px; top: 0; line-height: 28px; font-size: 23px; font-weight: 500; color: #fff; text-shadow: none; }
.u-dash-city-c-flat .cz-pj em { position: absolute; left: 174px; top: 0; line-height: 28px; font-style: normal; font-family: var(--dp-num-font); font-weight: 400; font-size: 15px; color: #aebbc2; }
.u-dash-city-c-flat .cz-pjl { height: 1px; background: linear-gradient(90deg, rgba(160,205,210,.4), rgba(160,205,210,.12)); }
.u-dash-city-c-flat .cz-pjl::before { content: ""; position: absolute; left: 1px; top: -9px; width: 1px; height: 9px; background: rgba(190,225,230,.55); }


.u-dash-city-c-flat .cz-lg { left: 1540px; top: 212px; width: 600px; height: 22px; }
.u-dash-city-c-flat .cz-lg span { position: absolute; top: 0; display: flex; align-items: center; gap: 7px; line-height: 22px; font-size: 16px; color: #e9f1f3; white-space: nowrap; }
.u-dash-city-c-flat .cz-lg i { display: block; width: 13px; height: 3px; border-radius: 2px; }


.u-dash-city-c-flat .cz-cn { line-height: 24px; font-size: 16px; color: #e4eef2; white-space: nowrap; }
.u-dash-city-c-flat .cz-cv { line-height: 28px; white-space: nowrap; }
.u-dash-city-c-flat .cz-cv b { font-size: 24px; font-weight: 500; color: #3de8e6; text-shadow: none; letter-spacing: .3px; }
.u-dash-city-c-flat .cz-cv i { font-style: normal; font-size: 14px; color: #b4c4ca; margin-left: 5px; }


.u-dash-city-c-flat .cz-wt { left: 1921px; top: 858px; width: 220px; height: 24px; line-height: 24px; font-size: 16px; white-space: nowrap; }
.u-dash-city-c-flat .cz-wt span { display: inline-block; width: 50px; color: #7d8e94; }
.u-dash-city-c-flat .cz-wt span.on { color: #dfeaee; }
.u-dash-city-c-flat .cz-th { left: 1591px; top: 911px; width: 525px; height: 24px; line-height: 24px; font-size: 17px; color: #e4edf1; }
.u-dash-city-c-flat .cz-th span, .u-dash-city-c-flat .cz-tr span { position: absolute; top: 0; white-space: nowrap; }
.u-dash-city-c-flat .cz-tr { left: 1591px; width: 525px; height: 38px; line-height: 38px; font-size: 16.5px; color: #e4edf1; }
.u-dash-city-c-flat .cz-tr.z { background: linear-gradient(90deg, rgba(22,72,70,.5), rgba(18,60,60,.4)); }
.u-dash-city-c-flat .cz-tr span { font-family: var(--ui-num); font-weight: 400; }
.u-dash-city-c-flat .cz-tr span:first-child { font-family: var(--ui-font); font-weight: 500; }


.u-dash-city-c-flat .cz-nav span { position: absolute; top: 1196px; width: 120px; text-align: center; line-height: 24px; font-size: 18px; letter-spacing: 1px; color: #bcd8d8; white-space: nowrap; }
.u-dash-city-c-flat .cz-nav span.on { color: #fff; font-weight: 600; text-shadow: 0 0 12px rgba(90,240,225,.9); }


.u-ops-print-wall { overflow: hidden; background: #02a9ee; font-family: var(--ui-font); }
.u-ops-print-wall > * { position: absolute; }


.u-ops-print-wall .head {
  left: 0; top: 0; width: 890px; height: 705px;
  background:
    radial-gradient(400px 320px at 450px 340px, rgba(235, 250, 255, 0.62), rgba(235, 250, 255, 0) 100%),
    radial-gradient(520px 260px at 445px 330px, rgba(190, 236, 255, 0.5), rgba(190, 236, 255, 0) 100%),
    linear-gradient(90deg, rgba(0, 140, 232, 0.4) 0, rgba(0, 140, 232, 0) 20%, rgba(0, 140, 232, 0) 80%, rgba(0, 140, 232, 0.36) 100%),
    radial-gradient(160px 160px at 24px 38px, rgba(150, 120, 235, 0.55), rgba(150, 120, 235, 0) 100%),
    radial-gradient(420px 120px at 445px 690px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #e6f4fd 0, #e6f4fd 9px, #22b5fb 9px, #05bcfc 18%, #00bafb 55%, #03a9f0 100%);
}
.u-ops-print-wall .beams { left: 0; top: 0; }
.u-ops-print-wall .brk {
  width: 114px; height: 96px; border: 15px solid rgba(255, 255, 255, 0.72); border-radius: 22px;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.55), 0 0 14px rgba(180, 230, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}
.u-ops-print-wall .brk.tl { left: 17px; top: 77px; border-right-color: transparent; border-bottom-color: transparent; border-radius: 22px 0 0 0; height: 96px; }
.u-ops-print-wall .brk.tr { left: 757px; top: 73px; width: 116px; height: 80px; border-left-color: transparent; border-bottom-color: transparent; border-radius: 0 22px 0 0; }
.u-ops-print-wall .brk.bl { left: 17px; top: 373px; width: 116px; height: 94px; border-right-color: transparent; border-top-color: transparent; border-radius: 0 0 0 22px; }
.u-ops-print-wall .brk.br { left: 767px; top: 370px; width: 106px; height: 97px; border-left-color: transparent; border-top-color: transparent; border-radius: 0 0 22px 0; }


.u-ops-print-wall .badge { left: 755px; top: 9px; width: 108px; height: 94px; border-radius: 0 0 16px 16px; overflow: hidden; text-align: center; background: linear-gradient(180deg, #d6eefb, #bfe3f8); box-shadow: 0 2px 6px rgba(0, 70, 160, 0.2); }
.u-ops-print-wall .badge b { display: block; height: 47px; line-height: 47px; font-size: 33px; font-weight: 700; color: #fff; letter-spacing: 1px; background: linear-gradient(180deg, #2a86e8, #1568cf); }
.u-ops-print-wall .badge span { display: block; margin-top: 6px; font-size: 15px; line-height: 22px; font-weight: 600; color: #1d5aa8; letter-spacing: 1px; }


.u-ops-print-wall .logo { left: 284px; top: 32px; font-size: 19px; }


.u-ops-print-wall .slogan {
  left: 228px; top: 118px; width: 432px; height: 96px; padding-top: 14px; display: flex; justify-content: center; gap: 34px;
  font-size: 33px; font-weight: 600; letter-spacing: 7px; color: #fff; text-shadow: 0 1px 2px rgba(0, 90, 170, 0.35);
  background: linear-gradient(180deg, rgba(150, 226, 255, 0.95), rgba(92, 201, 252, 0.9));
  border: 3px solid rgba(236, 251, 255, 0.98); border-bottom: 0; box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.5);
  clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%, 0 34px);
}


.u-ops-print-wall .ttl { left: 0; top: 0; }


.u-ops-print-wall .prize {
  left: 218px; top: 506px; width: 454px; height: 68px; display: flex; align-items: center; justify-content: center; padding-left: 36px;
  font-size: 25px; font-weight: 500; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 2px rgba(200, 120, 0, 0.45);
  background: linear-gradient(180deg, #ffdb12 0%, #fbc900 55%, #f7b800 100%);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.u-ops-print-wall .prize .horn { position: absolute; left: 52px; top: 12px; }
.u-ops-print-wall .prize .wings { position: absolute; left: 0; top: 0; }


.u-ops-print-wall .date {
  left: 42px; top: 578px; width: 802px; height: 80px; display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 500; color: #fff; letter-spacing: 1.5px; white-space: nowrap;
  background: linear-gradient(180deg, #f08a0a 0, #f08a0a 3px, #fcb21e 3px, #fba416 50%, #f89a05 100%);
  box-shadow: inset 0 -3px 0 rgba(255, 224, 120, 0.9);
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%);
  text-shadow: 0 1px 2px rgba(190, 100, 0, 0.4);
}
.u-ops-print-wall .date b { font-weight: 500; }


.u-ops-print-wall .panel {
  left: 17px; top: 703px; width: 873px; height: 542px; border-radius: 58px 0 16px 16px;
  border: 4px solid rgba(255, 255, 255, 0.9); border-right: 0; border-bottom: 0;
  background: linear-gradient(180deg, #eaf6fd 0, #d9eefb 52px, #bfe4f9 118px, #55bbf0 190px, #2fafe9 330px, #31b3f2 100%);
  box-shadow: 0 -2px 12px rgba(0, 120, 220, 0.18), inset 0 0 14px rgba(255, 255, 255, 0.4);
}
.u-ops-print-wall .wm { left: 56px; top: 730px; font-size: 56px; font-weight: 900; letter-spacing: 3px; white-space: nowrap; color: rgba(150, 205, 245, 0.4); font-family: var(--op-en); }
.u-ops-print-wall .how { left: 94px; top: 757px; margin: 0; font-size: 44px; font-weight: 800;  line-height: 1.2; letter-spacing: 1px; background: linear-gradient(90deg, #8c3048 0%, #5a2f66 40%, #1f4592 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-text-stroke: 1.4px #4b2f6e; }
.u-ops-print-wall .hand { left: 262px; top: 776px; filter: drop-shadow(0 3px 3px rgba(60, 110, 190, 0.3)); }
.u-ops-print-wall .orange { left: 53px; top: 830px; width: 797px; height: 410px; border-radius: 34px 22px 22px 22px; border: 0;
  background: linear-gradient(104deg, #ea8412 0%, #f79a14 28%, #fcb23c 50%, #fde2a4 72%, #fdf4dc 88%, #fbfdfb 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 8px 18px rgba(0, 90, 170, 0.22);
}
.u-ops-print-wall .desc { left: 99px; top: 862px; width: 440px; margin: 0; font-size: 26px; line-height: 53.5px; font-weight: 500; color: #fff; letter-spacing: 0.4px; white-space: nowrap; text-shadow: 0 1px 2px rgba(170, 80, 0, 0.35); }
.u-ops-print-wall .desc .op-hl { background: linear-gradient(180deg, transparent 40%, #e5321b 40%, #d6241a 100%); padding: 0 4px; margin: 0 -4px; }
.u-ops-print-wall .qr { left: 568px; top: 746px; padding: 15px; border-radius: 26px; background: linear-gradient(180deg, #ffffff 0, #fbf8f1 100%); box-shadow: inset 0 1px 0 #fff, 0 10px 22px rgba(160, 100, 20, 0.25); }
.u-ops-print-wall .qr .op-qr { width: 212px; height: 212px; background: #0c1328; }
.u-ops-print-wall .cap { left: 612px; top: 1014px; font-size: 15px; color: #c9803a; letter-spacing: 0.5px; }
.u-ops-print-wall .cap .op-ic { font-size: 17px; }

.u-ops-print-wall .dev { left: 76px; top: 1066px; }
.u-ops-print-wall .prod-band {
  left: 150px; top: 1138px; width: 252px; height: 70px; padding: 0 0 0 102px; display: flex; align-items: center;
  font-size: 25px; font-weight: 500; color: #fff; letter-spacing: 1px; background: linear-gradient(180deg, #db5a1b, #c8480f); border-radius: 8px 0 0 8px; text-shadow: 0 1px 1px rgba(120, 30, 0, 0.35);
}
.u-ops-print-wall .prod-name {
  left: 388px; top: 1138px; width: 430px; height: 70px; display: flex; align-items: center; justify-content: center;
  font-size: 29px; font-weight: 800; color: #e2201f; letter-spacing: 1px; background: linear-gradient(180deg, #ffffff, #eef3fa);
  border: 3px solid #ea4326; border-radius: 12px; box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(160, 50, 10, 0.25);
}


.u-ops-print-wall .fold { pointer-events: none; z-index: 30; }
.u-ops-print-wall .fv { left: 422px; top: 0; width: 46px; height: 1270px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.12) 44%, rgba(0,35,110,0.2) 48%, rgba(0,35,110,0.08) 53%, rgba(255,255,255,0.08) 66%, rgba(255,255,255,0) 100%); }
.u-ops-print-wall .fh { left: 0; top: 618px; width: 890px; height: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.3) 38%, rgba(255,255,255,0.46) 52%, rgba(0,35,110,0.07) 70%, rgba(255,255,255,0) 100%); }


.u-web-cover-slide { background: #0a46f4; overflow: hidden; }
.u-web-cover-slide .cs-st { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform: scale(.8); transform-origin: 0 0;
  background:
    radial-gradient(ellipse 980px 340px at 106% -4%, #8700ff 0%, rgba(135, 0, 255, .75) 38%, rgba(100, 20, 255, 0) 100%),
    radial-gradient(ellipse 620px 480px at -4% -4%, rgba(0, 8, 250, .9), rgba(0, 8, 250, 0) 100%),
    linear-gradient(180deg, #0a3df6 0, #0b4cf5 300px, #0d4ff3 560px, #0750f8 820px, #0c52f4 100%); }
.u-web-cover-slide .cs-st > * { position: absolute; }
.u-web-cover-slide .cs-bg { left: 0; top: 0; }
.u-web-cover-slide .cs-dots { background: radial-gradient(circle, rgba(255, 255, 255, .32) 1.1px, rgba(255, 255, 255, 0) 1.7px) 0 0 / 12.5px 12.5px; }
.u-web-cover-slide .d1 { left: 98px; top: 486px; width: 650px; height: 400px; -webkit-mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .75) 45%, transparent 100%); mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .75) 45%, transparent 100%); }
.u-web-cover-slide .d2 { left: 1216px; top: 0; width: 704px; height: 130px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 60%); mask: linear-gradient(90deg, transparent 0, #000 60%); }
.u-web-cover-slide .cs-ic { left: 99px; top: 186px; filter: drop-shadow(0 10px 16px rgba(0, 20, 170, .22)); }
.u-web-cover-slide h1 { left: 99px; top: 391px; margin: 0; font-size: 71px; line-height: 78px; font-weight: 900; letter-spacing: -.8px; color: #fff; -webkit-text-stroke: 4.2px #fff; white-space: nowrap; }
.u-web-cover-slide .cs-v { left: 612px; top: 397px; width: 70px; height: 38px; border-radius: 19px 19px 19px 4px; background: linear-gradient(135deg, #e3e9f9, #f7f8fd); box-shadow: 0 2px 8px rgba(0, 20, 150, .18); color: #0a54da; font: 700 21px/38px var(--ui-num); letter-spacing: .5px; text-align: center; }
.u-web-cover-slide .cs-sl { left: 97px; top: 556px; font-size: 36px; line-height: 48px; font-weight: 600; letter-spacing: .6px; color: #fff; white-space: nowrap; }
.u-web-cover-slide .cs-ar { left: 372px; top: 560px; }
.u-web-cover-slide p { left: 97px; top: 637px; margin: 0; font-size: 21px; line-height: 40px; font-weight: 400; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.u-web-cover-slide .cs-ft { left: 107px; top: 988px; font: 300 19px/30px var(--ui-num); letter-spacing: 2.4px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.u-web-cover-slide .cs-dash { left: 738px; top: 102px; width: 1414px; height: 1171px; transform: scale(.836); transform-origin: 0 0; overflow: hidden; border-top-left-radius: 36px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }


.u-app-cover { overflow: hidden; background: #f4f7ff; }
.u-app-cover .cv-bgsvg { position: absolute; left: 0; top: 0; }
.u-app-cover .cv-chip { position: absolute; top: 538px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 18px; letter-spacing: .5px; color: #2a3452; background: linear-gradient(180deg, #fff 0, #eaf2ff 100%); box-shadow: 0 6px 14px rgba(70,120,230,.14), inset 0 0 0 1px rgba(255,255,255,.9); }
.u-app-cover .cv-chip1 { left: 62px; width: 100px; }
.u-app-cover .cv-chip2 { left: 172px; width: 100px; }
.u-app-cover .cv-chip3 { left: 282px; width: 100px; }
.u-app-cover .cv-frame { position: absolute; left: 670px; top: 40px; width: 368px; height: 640px; border-radius: 38px; background: linear-gradient(180deg, rgba(246,250,255,.55) 0, rgba(232,241,255,.4) 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 24px 60px rgba(60,110,230,.12), inset 0 0 0 1px rgba(255,255,255,.7); }
.u-app-cover .cv-scr { position: absolute; left: 696px; top: 72px; width: 316px; height: 558px; overflow: hidden; border-radius: 21px 21px 0 0; background: #eaf1ff; }
.u-app-cover .cv-in { position: absolute; left: 0; top: 0; width: 375px; height: 1270px; transform: scale(.8427); transform-origin: 0 0; }


.u-dash-city-a-hero { background: #050b11; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: var(--dp-t1); }
.u-dash-city-a-hero .hr-a { position: absolute; left: 0; top: 0; }
.u-dash-city-a-hero .hr-stage { z-index: 1; }
.u-dash-city-a-hero .hr-seg { position: absolute; left: 0; top: 0; height: 751px; overflow: hidden; transform-origin: 0 0; z-index: 2; background: #06141e; }
.u-dash-city-a-hero .hr-cv { position: absolute; top: 0; width: 2655px; height: 751px; background: #06141e; }
.u-dash-city-a-hero .hr-fl { position: absolute; left: 455px; top: 0; width: 2200px; height: 751px; }
.u-dash-city-a-hero .hr-fl .fl-map { display: none; }
.u-dash-city-a-hero .hr-map { width: 830px; height: 751px; overflow: hidden; transform-origin: 0 0; transform: matrix3d(0.425630061,-0.116398075,0,-0.000194248045,0,0.777642717,0,0,0,0,1,0,724.551797,320,0,1); z-index: 5; }
.u-dash-city-a-hero .hr-map-in { position: absolute; left: 0; top: 0; width: 830px; height: 751px; filter: drop-shadow(0 0 5px rgba(205,246,255,.6)) drop-shadow(0 0 20px rgba(120,222,255,.4)); }
.u-dash-city-a-hero .hr-mapglow { width: 2200px; height: 1069px; z-index: 4; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 440px 340px at 1010px 600px, rgba(150,226,255,.30), rgba(70,160,205,.13) 48%, rgba(40,110,160,0) 74%); }
.u-dash-city-a-hero .hr-pl { width: 2200px; height: 1069px; z-index: 4; pointer-events: none; mix-blend-mode: screen; }
.u-dash-city-a-hero .hr-pl i { position: absolute; border: 1px solid rgba(25,200,255,.6); background: linear-gradient(180deg, rgba(25,200,255,.02), rgba(25,200,255,.2)); box-shadow: inset 0 0 18px rgba(25,200,255,.4), 0 0 16px rgba(25,200,255,.4); }
.u-dash-city-a-hero .hr-pl b { position: absolute; width: 16px; background: linear-gradient(180deg, #fff, #e4f8ff 70%, rgba(255,255,255,.35)); box-shadow: 0 0 14px 4px rgba(190,240,255,.7); }
.u-dash-city-a-hero .hr-pl .pl-l { left: 810px; top: 510px; width: 76px; height: 132px; }
.u-dash-city-a-hero .hr-pl .pl-l b { left: 56px; top: 10px; height: 62px; }
.u-dash-city-a-hero .hr-pl .pl-r { left: 1084px; top: 512px; width: 64px; height: 152px; }
.u-dash-city-a-hero .hr-pl .pl-r b { left: 36px; top: 8px; width: 20px; height: 102px; }
.u-dash-city-a-hero .hr-map-s { position: absolute; left: -185px; top: 8px; width: 2200px; height: 1321px; transform: scale(.55); transform-origin: 0 0; }
.u-dash-city-a-hero .hr-map-s .mm-bg { display: none; }
.u-dash-city-a-hero .inc.u-dash-city-a-map { background: transparent; }
.u-dash-city-a-hero .hr-shade { width: 2200px; height: 1069px; z-index: 8; pointer-events: none; clip-path: polygon(203px 327px,481px 326px,781px 320px,1003px 292px,1228px 273px,1285px 266px,1674px 202px,2138px 118px,2138px 1100px,1674px 1019px,1285px 963px,1228px 960px,1003px 933px,781px 905px,481px 903px,203px 901px);
  background: linear-gradient(90deg, rgba(2,8,14,.42) 0%, rgba(2,8,14,.08) 24%, rgba(2,8,14,0) 55%, rgba(2,8,14,.0) 80%, rgba(2,8,14,.18) 100%), linear-gradient(180deg, rgba(2,8,14,.16), rgba(2,8,14,.0) 30%, rgba(2,8,14,0) 70%, rgba(2,8,14,.2)); }
.u-dash-city-a-hero .hr-glass { width: 2200px; height: 1069px; z-index: 9; pointer-events: none; clip-path: polygon(203px 327px,481px 326px,781px 320px,1003px 292px,1228px 273px,1285px 266px,1674px 202px,2138px 118px,2138px 1100px,1674px 1019px,1285px 963px,1228px 960px,1003px 933px,781px 905px,481px 903px,203px 901px);
  background: linear-gradient(105deg, transparent 38%, rgba(190,235,255,.07) 44%, rgba(190,235,255,.0) 52%), linear-gradient(80deg, transparent 62%, rgba(160,220,255,.10) 70%, transparent 78%), linear-gradient(72deg, transparent 84%, rgba(200,240,255,.12) 88%, transparent 94%); mix-blend-mode: screen; }
.u-dash-city-a-hero .hr-seg[data-k="0"] { width: 301px; transform: matrix3d(0.585899274,-0.00590184278,0,-1.13861919e-05,0,0.764314248,0,0,0,0,1,0,203,327,0,1); } .u-dash-city-a-hero .hr-seg[data-k="0"] .hr-cv { left: 0px; }
.u-dash-city-a-hero .hr-seg[data-k="1"] { width: 301px; transform: matrix3d(0.596878033,-0.0175305935,0,-2.19463307e-05,0,0.766934015,0,0,0,0,1,0,380.070064,326.344185,0,1); } .u-dash-city-a-hero .hr-seg[data-k="1"] .hr-cv { left: -300px; }
.u-dash-city-a-hero .hr-seg[data-k="2"] { width: 301px; transform: matrix3d(0.613927783,-0.0193324211,0,-2.69615934e-05,0,0.772007832,0,0,0,0,1,0,562.818182,323.222118,0,1); } .u-dash-city-a-hero .hr-seg[data-k="2"] .hr-cv { left: -600px; }
.u-dash-city-a-hero .hr-seg[data-k="3"] { width: 301px; transform: matrix3d(0.437911854,-0.139217964,0,-0.000228622444,0,0.778309459,0,0,0,0,1,0,753.093023,320,0,1); } .u-dash-city-a-hero .hr-seg[data-k="3"] .hr-cv { left: -900px; }
.u-dash-city-a-hero .hr-seg[data-k="4"] { width: 301px; transform: matrix3d(0.419580136,-0.122189626,0,-0.000212481089,0,0.835605938,0,0,0,0,1,0,949.64095,298.72997,0,1); } .u-dash-city-a-hero .hr-seg[data-k="4"] .hr-cv { left: -1200px; }
.u-dash-city-a-hero .hr-seg[data-k="5"] { width: 301px; transform: matrix3d(0.494194754,-0.14206419,0,-0.000210421239,0,0.89252214,0,0,0,0,1,0,1148.78402,279.904382,0,1); } .u-dash-city-a-hero .hr-seg[data-k="5"] .hr-cv { left: -1500px; }
.u-dash-city-a-hero .hr-seg[data-k="6"] { width: 301px; transform: matrix3d(0.245549068,-0.231205989,0,-0.000376317665,0,0.952469914,0,0,0,0,1,0,1384.41111,253.33181,0,1); } .u-dash-city-a-hero .hr-seg[data-k="6"] .hr-cv { left: -1800px; }
.u-dash-city-a-hero .hr-seg[data-k="7"] { width: 301px; transform: matrix3d(0.192819176,-0.227854023,0,-0.000364005956,0,1.07373521,0,0,0,0,1,0,1643.74444,207.363025,0,1); } .u-dash-city-a-hero .hr-seg[data-k="7"] .hr-cv { left: -2100px; }
.u-dash-city-a-hero .hr-seg[data-k="8"] { width: 256px; transform: matrix3d(0.237766794,-0.185230723,0,-0.000306341815,0,1.20541224,0,0,0,0,1,0,1910.29167,156.028859,0,1); } .u-dash-city-a-hero .hr-seg[data-k="8"] .hr-cv { left: -2400px; }

.u-dash-city-a-hero .cv-a { position: absolute; }
.u-dash-city-a-hero .cv-bk { position: absolute; background: linear-gradient(90deg, rgba(3,10,18,.4), rgba(3,10,18,.3) 80%, rgba(3,10,18,0)); }
.u-dash-city-a-hero .cv-fr { position: absolute; left: 0; top: 0; }
.u-dash-city-a-hero .cv-t { font-size: 20px; }
.u-dash-city-a-hero .cv-t .dp-title-t { font-size: 20px; }
.u-dash-city-a-hero .cv-b { position: absolute; transform-origin: 0 0; width: 580px; height: 260px; }
.u-dash-city-a-hero .cv-b > div { position: absolute; }
.u-dash-city-a-hero .cv-b .cb-card, .u-dash-city-a-hero .cv-b .cb-tl-t, .u-dash-city-a-hero .cv-b .cb-tl-ln, .u-dash-city-a-hero .cv-b .cb-dot, .u-dash-city-a-hero .cv-b .cb-nm, .u-dash-city-a-hero .cv-b .cb-tm, .u-dash-city-a-hero .cv-b .cb-ex, .u-dash-city-a-hero .cv-b .cb-bm, .u-dash-city-a-hero .cv-b .cb-pil, .u-dash-city-a-hero .cv-b .cb-flr, .u-dash-city-a-hero .cv-b .cb-pp, .u-dash-city-a-hero .cv-b .cb-city, .u-dash-city-a-hero .cv-b .cb-pl-svg, .u-dash-city-a-hero .cv-b .cb-pn, .u-dash-city-a-hero .cv-b .cb-pa, .u-dash-city-a-hero .cv-b .cb-bl, .u-dash-city-a-hero .cv-b .cb-lg { position: absolute; }


.u-dash-city-a-hero .cb { position: absolute; transform-origin: 0 0; }
.u-dash-city-a-hero .cb > .in { position: absolute; }

.u-dash-city-a-hero .cb-card { position: absolute; width: 216px; height: 78px; background: linear-gradient(180deg, rgba(14,66,92,.62), rgba(8,36,54,.5)); border-top: 1px solid rgba(80,170,210,.28); border-bottom: 1px solid rgba(80,170,210,.18); }
.u-dash-city-a-hero .cb-bar { position: absolute; top: -3px; bottom: -3px; width: 4px; background: #1fb4e6; box-shadow: 0 0 8px rgba(31,180,230,.8); }
.u-dash-city-a-hero .cb-bar.l { left: 0; } .u-dash-city-a-hero .cb-bar.r { right: 0; }
.u-dash-city-a-hero .cb-tk { position: absolute; top: 20px; height: 38px; width: 2px; background: rgba(60,170,210,.75); }
.u-dash-city-a-hero .cb-tk.l { left: 12px; } .u-dash-city-a-hero .cb-tk.r { right: 12px; }
.u-dash-city-a-hero .cb-av { position: absolute; left: 28px; top: 14px; }
.u-dash-city-a-hero .cb-ct { position: absolute; left: 90px; top: 10px; font-size: 22px; line-height: 32px; color: #e4f1fb; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-hero .cb-tl-t { position: absolute; font-size: 22px; line-height: 30px; color: #eaf3fc; font-weight: 500; white-space: nowrap; }
.u-dash-city-a-hero .cb-tl-t i { position: absolute; left: 0; right: -10px; bottom: -3px; height: 5px; background: linear-gradient(90deg, rgba(25,200,255,.55), rgba(25,200,255,0)); }
.u-dash-city-a-hero .cb-tl-ln { position: absolute; width: 1px; background: rgba(120,180,210,.45); }
.u-dash-city-a-hero .cb-dot { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #1f9ccb; background: radial-gradient(circle, #5cecff 0 4px, rgba(25,200,255,.25) 5px 7px, transparent 8px); box-shadow: 0 0 8px rgba(25,200,255,.45); }
.u-dash-city-a-hero .cb-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgba(100,200,230,.55); }
.u-dash-city-a-hero .cb-nm { position: absolute; font-size: 22px; line-height: 32px; color: #dcecf8; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-hero .cb-tm { position: absolute; font-size: 24px; line-height: 28px; white-space: nowrap; letter-spacing: .5px; }

.u-dash-city-a-hero .cb-ex { position: absolute; display: flex; align-items: baseline; gap: 6px; font-size: 22px; line-height: 32px; color: #e4f1fb; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-hero .cb-ex b { font-size: 28px; line-height: 32px; }
.u-dash-city-a-hero .cb-ex i { font-style: normal; font-size: 16px; color: #b8c8d6; font-weight: 400; margin-left: -2px; }
.u-dash-city-a-hero .cb-bm { position: absolute; height: 12px; background: linear-gradient(180deg, rgba(60,170,210,.5), rgba(18,100,138,.55)); border-top: 1px solid rgba(150,220,245,.55); }
.u-dash-city-a-hero .cb-bm.l { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); -webkit-mask-image: linear-gradient(90deg, #000 60%, rgba(0,0,0,.9)); }
.u-dash-city-a-hero .cb-bm.r { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.u-dash-city-a-hero .cb-bm::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 3px; border-top: 1px solid rgba(110,200,230,.35); border-bottom: 1px solid rgba(110,200,230,.2); }
.u-dash-city-a-hero .cb-pil { position: absolute; width: 46px; height: 196px; background: linear-gradient(180deg, rgba(40,110,140,0), rgba(60,120,140,.35) 25%, rgba(120,110,70,.28) 60%, rgba(30,90,120,.1)), repeating-linear-gradient(90deg, rgba(120,200,230,.18) 0 1px, transparent 1px 4px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
.u-dash-city-a-hero .cb-flr { position: absolute; width: 240px; height: 50px; background: radial-gradient(ellipse at 50% 30%, rgba(25,200,255,.35), rgba(25,200,255,0) 70%); }
.u-dash-city-a-hero .cb-pp { position: absolute; filter: drop-shadow(0 0 10px rgba(25,200,255,.55)); }

.u-dash-city-a-hero .cb-city { position: absolute; width: 210px; height: 90px; opacity: .55; }
.u-dash-city-a-hero .cb-city i { position: absolute; background: linear-gradient(180deg, rgba(40,120,150,.7), rgba(10,40,60,.2)); border-top: 1px solid rgba(120,200,230,.35); }
.u-dash-city-a-hero .cb-pl-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.u-dash-city-a-hero .cb-pn { position: absolute; text-align: center; color: #e8f4fd; font-size: 22px; line-height: 28px; font-weight: 500; }
.u-dash-city-a-hero .cb-pn b { display: block; font-size: 34px; line-height: 36px; margin-bottom: -2px; }
.u-dash-city-a-hero .cb-pa { position: absolute; text-align: center; color: #e8f4fd; font-size: 22px; line-height: 30px; font-weight: 500; }
.u-dash-city-a-hero .cb-pa b { display: block; font-size: 40px; line-height: 40px; }
.u-dash-city-a-hero .cb-bl { position: absolute; filter: drop-shadow(0 0 8px rgba(25,200,255,.5)); }
.u-dash-city-a-hero .cb-lg { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 19px; line-height: 24px; color: #dcecf8; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-hero .cb-lg i { width: 15px; height: 15px; border-radius: 3px; flex: none; }

.u-dash-city-a-hero .fl-a { position: absolute; }


.u-dash-city-a-map { background: #02060b; overflow: hidden; }
.u-dash-city-a-map .mm-bg, .u-dash-city-a-map .mm-stage, .u-dash-city-a-map .mm-tags { position: absolute; left: 0; top: 0; width: 2200px; height: 1321px; }
.u-dash-city-a-map .mm-tags { pointer-events: none; }
.u-dash-city-a-map .mm-tag {
  position: absolute; transform: translate(-50%, -50%) skewX(-8deg);
  font-size: 35px; line-height: 1; font-weight: 800; letter-spacing: 1px; white-space: nowrap;
  color: transparent; background: linear-gradient(180deg, #ffffff 25%, #c4ecff 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .8px rgba(255, 255, 255, .55);
  filter: drop-shadow(0 2px 2px rgba(0, 28, 48, .75)) drop-shadow(0 0 9px rgba(130, 225, 255, .55));
}
@media (prefers-reduced-motion: no-preference) {
  .u-dash-city-a-map .mm-dash { animation: mm-dash-flow 30s linear infinite; }
  @keyframes mm-dash-flow { to { stroke-dashoffset: -360; } }
}


.u-dash-city-a-flat { background: #040c14; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: var(--dp-t1); }
.u-dash-city-a-flat .fl-a { position: absolute; }
.u-dash-city-a-flat .fl-bgsvg, .u-dash-city-a-flat .fl-frame, .u-dash-city-a-flat .fl-map { left: 0; top: 0; width: 2200px; height: 751px; }
.u-dash-city-a-flat .fl-frame { pointer-events: none; }
.u-dash-city-a-flat .fl-map { overflow: hidden; }
.u-dash-city-a-flat .fl-map-s { position: absolute; left: 215px; top: 8px; width: 2200px; height: 1321px; transform: scale(.55); transform-origin: 0 0; }
.u-dash-city-a-flat .fl-map-s .mm-bg { display: none; }
.u-dash-city-a-flat .inc.u-dash-city-a-map { background: transparent; }
.u-dash-city-a-flat .fl-bk { background: rgba(3, 10, 18, .34); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 94%, transparent); }
.u-dash-city-a-flat .fl-bk-l { background: linear-gradient(90deg, rgba(3, 10, 18, .4), rgba(3, 10, 18, .3) 80%, rgba(3, 10, 18, 0)); -webkit-mask-image: none; mask-image: none; }
.u-dash-city-a-flat .fl-t { font-size: 20px; }
.u-dash-city-a-flat .fl-t .dp-title-t { font-size: 20px; }
.u-dash-city-a-flat .fl-t2 { background: linear-gradient(90deg, rgba(var(--dp-rgb), .3), rgba(var(--dp-rgb), .1) 60%, rgba(var(--dp-rgb), 0)); }
.u-dash-city-a-flat .fl-beam { top: 12px; }
.u-dash-city-a-flat .fl-beam .dp-beam-m { width: 535px; padding: 0; font-size: 29px; letter-spacing: 1.5px; }
.u-dash-city-a-flat .fl-beam .dp-beam-s { width: 168px; font-size: 20px; }
.u-dash-city-a-flat .fl-br { font-size: 14.5px; --rh: 31px; }
.u-dash-city-a-flat .fl-br .dp-bar { --h: 10px; }
.u-dash-city-a-flat .fl-br > em { font-size: 21px; }
.u-dash-city-a-flat .fl-ctr { display: flex; justify-content: center; align-items: center; }
.u-dash-city-a-flat .fl-678 { font-size: 33px; color: #4fe3ff; text-shadow: 0 0 12px rgba(79, 227, 255, .7); }
.u-dash-city-a-flat .fl-ctr2 { font-size: 17px; color: var(--dp-t1); }
.u-dash-city-a-flat .fl-lg { font-size: 16px; }
.u-dash-city-a-flat .fl-lg .dp-dot { width: 16px; height: 16px; }
.u-dash-city-a-flat .fl-lg .v { font-size: 21px; margin-right: 14px; }
.u-dash-city-a-flat .fl-amb { filter: drop-shadow(0 0 8px rgba(25, 200, 255, .6)); }
.u-dash-city-a-flat .fl-slab { clip-path: polygon(0 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(34, 140, 176, .55), rgba(14, 72, 104, .32)); }
.u-dash-city-a-flat .fl-t17 { font-size: 17px; color: var(--dp-t2); }
.u-dash-city-a-flat .fl-t32 { display: flex; align-items: baseline; }
.u-dash-city-a-flat .fl-rw { font-size: 15.5px; background: linear-gradient(90deg, rgba(20, 82, 112, .55), rgba(14, 60, 88, .22) 75%, rgba(14, 60, 88, .06)); border-bottom: 0; }
.u-dash-city-a-flat .fl-rw .dp-unit { font-size: 14px; }
.u-dash-city-a-flat .fl-rw .s { font-size: 17px; color: #aebfcc; margin-left: 4px; }
.u-dash-city-a-flat .fl-vton { background: linear-gradient(90deg, rgba(var(--dp-rgb), .42), rgba(var(--dp-rgb), .12)); border-radius: 0 6px 6px 0; }
.u-dash-city-a-flat .dp-vtab { font-size: 17px; line-height: 22px; }
.u-dash-city-a-flat .fl-st { font-size: 14.5px; }
.u-dash-city-a-flat .fl-st .dp-num { font-size: 19px; }
.u-dash-city-a-flat .fl-st > div { line-height: 26px; padding-top: 0; }
.u-dash-city-a-flat .fl-shield { background: linear-gradient(180deg, #2bb6e6, #138fc4 40%, #29c2ee); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.u-dash-city-a-flat .fl-shield::before { content: ""; position: absolute; inset: 2px; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); background: linear-gradient(180deg, rgba(20, 98, 138, .92), rgba(8, 46, 72, .96)); }
.u-dash-city-a-flat .fl-flask { font-size: 34px; color: #36bff0; display: flex; }
.u-dash-city-a-flat .fl-flask s { position: absolute; right: 0; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; background: #1c8fc4; color: #dff6ff; font-size: 11px; line-height: 17px; text-align: center; text-decoration: none; }
.u-dash-city-a-flat .fl-sh-t { text-align: center; font-size: 17px; font-weight: 600; color: #fff; }
.u-dash-city-a-flat .fl-sh-s { text-align: center; font-size: 12.5px; line-height: 19px; color: #c4d8e6; }
.u-dash-city-a-flat .fl-hex { --hb: linear-gradient(180deg, #5fe0ff, #0b84be); height: 64px; }
.u-dash-city-a-flat .fl-rt { font-size: 17px; color: var(--dp-t1); text-align: center; background: linear-gradient(180deg, rgba(var(--dp-rgb), .0), rgba(var(--dp-rgb), .22)); border-bottom: 1px solid rgba(var(--dp-rgb), .2); }
.u-dash-city-a-flat .fl-rl { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--dp-t1); }
.u-dash-city-a-flat .fl-rl .dp-dot { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, .55); background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.u-dash-city-a-flat .fl-rl .dp-num { font-family: var(--dp-num-font-c); font-size: 21px; margin-left: 2px; }
.u-dash-city-a-flat .fl-kp { font-size: 17px; height: 60px; }
.u-dash-city-a-flat .fl-kp .dp-kpi-ic { width: 38px; height: 38px; font-size: 26px; }
.u-dash-city-a-flat .fl-kp .k { font-size: 16.5px; }
.u-dash-city-a-flat .fl-kp .dp-num { font-family: var(--dp-num-font-c); font-size: 26px; }
.u-dash-city-a-flat .fl-kp .dp-unit { font-size: 14px; }
.u-dash-city-a-flat .fl-mon { background: linear-gradient(135deg, rgba(34, 150, 196, .6), rgba(14, 82, 120, .38) 60%, rgba(10, 50, 82, .3)); clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); border-top: 1px solid rgba(var(--dp-rgb), .3); }
.u-dash-city-a-flat .fl-mon-k { font-size: 17px; color: var(--dp-t2); }
.u-dash-city-a-flat .fl-mon-v .dp-num { font-size: 30px; }
.u-dash-city-a-flat .fl-slab2 { background: linear-gradient(90deg, rgba(12, 62, 92, .55), rgba(8, 36, 56, .2) 70%, rgba(8, 30, 50, .04)); }
.u-dash-city-a-flat .fl-sl { display: flex; gap: 2px; }
.u-dash-city-a-flat .fl-sl i { width: 6px; height: 8px; background: #8da3b4; transform: skewX(-30deg); }
.u-dash-city-a-flat .fl-mk { font-size: 17px; color: var(--dp-t1); }
.u-dash-city-a-flat .fl-mv { display: flex; align-items: baseline; }
.u-dash-city-a-flat .fl-mv .dp-num { font-size: 24px; }
.u-dash-city-a-flat .fl-mv .dp-unit { font-size: 14px; margin-left: 6px; }
.u-dash-city-a-flat .fl-mv .dp-yoy { margin-left: 26px; font-size: 16px; }
.u-dash-city-a-flat .fl-mv .dp-yoy b { color: var(--dp-bad); font-size: 17px; }
.u-dash-city-a-flat .fl-nav { font-size: 21px; gap: 0; }
.u-dash-city-a-flat .fl-nav > span { width: 117px; text-align: center; padding: 6px 0; }
.u-dash-city-a-flat .fl-nav > span.on::after { left: 0; right: 0; }

.u-dash-city-a-flat .fl-st .dp-unit { color: #b4c4d2; }
.u-dash-city-a-flat .fl-rw .v + .dp-unit { margin-left: -5px; }
.u-dash-city-a-flat .fl-rw .s { margin-left: 8px; }


.u-ops-hero { overflow: hidden; background: #f3f9fe; }
.u-ops-hero > * { position: absolute; left: 0; top: 0; }


.u-ops-hero .bgglow {
  width: 2000px; height: 1243px;
  background:
    radial-gradient(760px 600px at 120px 1060px, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 100%),
    radial-gradient(900px 640px at 1990px 1270px, rgba(200, 220, 246, 0.4), rgba(200, 220, 246, 0) 100%),
    linear-gradient(90deg, #f3f9fe 0%, #eef7fe 28%, #e4f4ff 58%, #e2f2ff 100%);
}


.u-ops-hero .shade {
  width: 2000px; height: 1243px;
  background:
    radial-gradient(ellipse 540px 520px at 1230px 830px, rgba(30, 100, 180, 0.5) 0%, rgba(30, 100, 180, 0.3) 34%, rgba(30, 100, 180, 0.1) 68%, rgba(30, 100, 180, 0) 100%),
    radial-gradient(ellipse 330px 260px at 760px 760px, rgba(30, 100, 180, 0.2) 0%, rgba(30, 100, 180, 0) 100%);
}


.u-ops-hero .flapwrap { width: 2000px; height: 1243px; }
.u-ops-hero .flapwrap .flap { position: absolute; left: 0; top: 0; width: 2000px; height: 1243px; }
.u-ops-hero .fl .flap {
  clip-path: path("M441 904 L828 642 L890 700 L700 1260 L360 1260 L364 1244 C 420 1240 470 1226 492 1203 C 510 1184 518 1155 514 1125 C 510 1090 504 1050 497 1010 C 488 970 470 935 441 904 Z");
  background: linear-gradient(300.5deg, #9fc3e4 55.2%, #adcfeb 56.5%, #c8dff7 58.7%, #d6e8f8 63.7%, #d6e8f8 70%);
}
.u-ops-hero .fr .flap {
  clip-path: path("M1113 670 L1497 901 C 1450 962 1415 1030 1398 1090 C 1390 1140 1408 1185 1450 1210 C 1490 1228 1530 1238 1590 1244 L 1590 1262 L 1200 1262 L 1090 700 Z");
  background:
    linear-gradient(180deg, rgba(214, 234, 250, 0.9) 690px, rgba(214, 234, 250, 0) 900px),
    radial-gradient(ellipse 100px 200px at 1415px 1130px, rgba(70, 130, 200, 0.3), rgba(70, 130, 200, 0) 100%),
    linear-gradient(60deg, #86b6e6 52.9%, #b0d3f4 54.6%, #c8e2f9 57.6%, #c6e2fa 65.6%);
}


.u-ops-hero .ttl text {
  font-family: var(--ui-font); font-weight: 800; font-size: 188px;
  stroke-width: 12.5px; stroke-linejoin: miter; stroke-miterlimit: 1.6;
}


.u-ops-hero .trishadow { width: 2000px; height: 1243px; filter: drop-shadow(0 8px 22px rgba(0, 50, 230, 0.2)); }
.u-ops-hero .tri {
  position: absolute; left: 0; top: 0; width: 2000px; height: 1243px;
  clip-path: path("M967.5 172 L965 200 L963 230 L958 260 L954.5 290 L950 320 L946 350 L938 380 L928 410 L917.5 440 L907 470 L898 500 L870 570 L840 640 L810 700 L545 1150 L520 1180 L479 1206 L430 1225 L393 1236 L350 1244 L340 1262 L1600 1262 L1580 1245 L1516 1235 L1446 1210 L1406 1180 L1390 1150 L1125 700 L1095 640 L1065 570 L1037 500 L1028 470 L1017.5 440 L1007 410 L997 380 L989 350 L985 320 L980.5 290 L977 260 L972 230 L970 200 L967.5 172 Z");
  background:
    linear-gradient(230deg, #0338ee 0%, #0347ed 44%, #0344fd 54%, #0953fe 57%, #1d6ffc 62%, #3186fd 67%, #4c96ff 70%, #6cabff 74.5%, #93c0ff 83%, #b2d3ff 100%);
}


.u-ops-hero .tri::after {
  content: ""; position: absolute; left: 0; top: 0; width: 2000px; height: 1243px;
  background: linear-gradient(300.5deg, rgba(20, 50, 130, 0) 50%, rgba(20, 50, 130, 0.32) 55.2%, rgba(20, 50, 130, 0) 55.3%);
  -webkit-mask-image: linear-gradient(180deg, transparent 650px, #000 780px); mask-image: linear-gradient(180deg, transparent 650px, #000 780px);
}


.u-ops-hero .en text {
  font-family: "Arial Black", "Helvetica Neue", "SF Pro Display", Arial, sans-serif; font-weight: 900; font-size: 237px;
}


.u-ops-hero .sline {
  left: 964px; top: 760px; width: 6px; height: 230px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 38%, rgba(255, 255, 255, 0.85) 62%, rgba(255, 255, 255, 0) 100%);
}
.u-ops-hero .mouse {
  left: 918px; top: 1025px; width: 100px; height: 140px; border-radius: 50px;
  border: 7px solid rgba(255, 255, 255, 0.68); background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.28), inset 0 0 14px rgba(255, 255, 255, 0.12);
}
.u-ops-hero .wheel { position: absolute; left: 36px; top: 24px; width: 14px; height: 30px; border-radius: 7px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }

@media (prefers-reduced-motion: no-preference) {
  .u-ops-hero .sline { animation: uhero-flow 2.8s ease-in-out infinite; }
  .u-ops-hero .wheel { animation: uhero-wheel 2.8s ease-in-out infinite; }
  @keyframes uhero-flow { 0%, 100% { opacity: 0.55; transform: translateY(-6px); } 50% { opacity: 1; transform: translateY(8px); } }
  @keyframes uhero-wheel { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(9px); opacity: 0.4; } }
}


.u-web-app-icon { background: #0536f4; }
.u-web-app-icon .ai-svg { display: block; }


.u-web-visual-upgrade { background: #0f6cfe; overflow: hidden; }
.u-web-visual-upgrade .vu-st { position: absolute; left: 0; top: 0; width: 2000px; height: 1447px; overflow: hidden; transform: scale(.8); transform-origin: 0 0; }
.u-web-visual-upgrade .vu-st > *, .u-web-visual-upgrade .vu-L > *, .u-web-visual-upgrade .vu-R > * { position: absolute; }
.u-web-visual-upgrade .vu-L { left: 0; top: 0; width: 2000px; height: 1447px; clip-path: inset(0 1000px 0 0); background: #060606; }
.u-web-visual-upgrade .vu-R { left: 0; top: 0; width: 2000px; height: 1447px; clip-path: inset(0 0 0 1000px); background: #0f6cfe; }

.u-web-visual-upgrade .vu-ray { left: 0; top: 0; width: 1000px; height: 900px; background: radial-gradient(ellipse 520px 760px at 30px 400px, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 100%); }
.u-web-visual-upgrade .vu-ray svg { position: absolute; left: 0; top: 0; filter: blur(12px); -webkit-mask: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); }

.u-web-visual-upgrade .vu-sc { left: 0; top: 0; transform-origin: 0 0; }
.u-web-visual-upgrade .vu-scl { width: 1440px; height: 900px; transform: matrix3d(0.6749826,-0.12581186,0,-5.1499676e-05,-0.021948482,0.80267707,0,-4.849656e-05,0,0,1,0,102,408,0,1); }
.u-web-visual-upgrade .vu-scr { width: 1296px; height: 920px; transform: matrix3d(0.71781462,0.12302631,0,3.3052961e-05,-0.026517457,0.66654493,0,-4.2436291e-06,0,0,1,0,1146,606,0,1); }
.u-web-visual-upgrade .vu-bz { position: absolute; left: -36px; top: -34px; right: -36px; bottom: -44px; border-radius: 58px; background: #040405; box-shadow: 0 0 0 2px rgba(168, 172, 180, .5), inset 0 0 0 3px #1b1c1f; }
.u-web-visual-upgrade .vu-scr .vu-bz { left: -28px; top: -30px; right: -28px; bottom: -40px; border-radius: 50px; }
.u-web-visual-upgrade .vu-pg { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #fff; color: #161a1d; font-family: var(--ui-font); font-size: 14px; }
.u-web-visual-upgrade .vu-pgl { --pf-nav-w: 72px; --pf-sub-w: 134px; }
.u-web-visual-upgrade .vu-pgl .pf-nav-i { font-size: 13px; }
.u-web-visual-upgrade .vu-pgl .pf-sub-i { font-size: 15px; }
.u-web-visual-upgrade .vu-pgl .pf-sub-t { font-size: 13px; }
.u-web-visual-upgrade .vu-pgl .pf-logo-name { font-size: 18px; }
.u-web-visual-upgrade .vu-pgr { --pf-nav-w: 56px; }
.u-web-visual-upgrade .vu-pgr .pf-top-r { gap: 8px; }
.u-web-visual-upgrade .vu-pgr .pf-ico-btn { width: 24px; height: 24px; }
.u-web-visual-upgrade .vu-pg .pf-shell { background: linear-gradient(90deg, #e9eefc, #f0f3fd 50%, #f3f5fd); }
.u-web-visual-upgrade .vu-pg .pf-main { background: #fff; }
.u-web-visual-upgrade .vu-pg > :not(.pf-shell) { position: absolute; }
.u-web-visual-upgrade .vt { position: absolute; white-space: nowrap; color: #2b3036; }
.u-web-visual-upgrade .vt.g { color: #9aa0a7; }
.u-web-visual-upgrade .vt.g2 { color: #9aa0a7; }
.u-web-visual-upgrade .vt.bd { font-weight: 600; color: #161a1d; }
.u-web-visual-upgrade .vt.md { font-weight: 500; }
.u-web-visual-upgrade .vsp { display: inline-block; width: 1px; height: 12px; margin: 0 10px; vertical-align: -2px; background: #ccd0d6; }
.u-web-visual-upgrade .vb { position: absolute; }
.u-web-visual-upgrade .vbx { position: absolute; border-radius: 6px; background: #f3f4f7; }
.u-web-visual-upgrade .vbx { width: 1100px; }
.u-web-visual-upgrade .vbx.lv { background: linear-gradient(90deg, #ecebfb, #f2f1fc); }
.u-web-visual-upgrade .vbx.pn { background: #f1f3f6; }
.u-web-visual-upgrade .vbx.wc { background: #fff; border: 1px solid #e6e9ee; }
.u-web-visual-upgrade .vbx.th { background: #f6f7f9; }
.u-web-visual-upgrade .vfx { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 4px; background: #ebe8fb; color: #6a3de8; font-size: 14px; font-weight: 600; }
.u-web-visual-upgrade .vgg { position: absolute; width: 124px; height: 124px; }
.u-web-visual-upgrade .vgg svg { position: absolute; left: 0; top: 0; }
.u-web-visual-upgrade .vgg b { position: absolute; left: 0; right: 0; top: 49px; text-align: center; font: 500 17px/26px var(--ui-num); color: #2a2f36; }
.u-web-visual-upgrade .vcap { position: absolute; width: 120px; text-align: center; font: 400 12.5px/18px var(--ui-num); letter-spacing: .4px; color: #9ba0a8; }
.u-web-visual-upgrade .vlic { display: inline-block; height: 22px; padding: 0 8px; border: 1px solid #dfe2e7; border-radius: 4px; background: #f5f6f8; color: #6a6e74; font: 400 13px/20px var(--ui-num); white-space: nowrap; }
.u-web-visual-upgrade .vnt { position: absolute; border-radius: 0 0 14px 14px; background: #040405; }
.u-web-visual-upgrade .vnt u { position: absolute; left: 50%; top: 11px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle, #232733 0 35%, #0b0c10 70%); box-shadow: 0 0 0 1px #15171c; }

.u-web-visual-upgrade .vtl { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #edf2ff; color: #2a6df0; font-size: 12px; font-weight: 500; }
.u-web-visual-upgrade .vsep { position: absolute; width: 1px; height: 18px; background: #dfe2e6; }
.u-web-visual-upgrade .vtabs { display: flex; gap: 44px; }
.u-web-visual-upgrade .vtabs b { position: relative; display: flex; align-items: center; gap: 4px; height: 24px; font-size: 14px; font-weight: 400; color: #8c9197; }
.u-web-visual-upgrade .vtabs b.on { color: #0a5fe8; }
.u-web-visual-upgrade .vtabs b.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 1px; background: #0a5fe8; }
.u-web-visual-upgrade .vtabs em { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e3edff; color: #0a5fe8; font: normal 11px/1 var(--ui-num); }
.u-web-visual-upgrade .vtabs em.n { background: #eef0f3; color: #8c9197; }
.u-web-visual-upgrade .vsr { display: inline-flex; align-items: center; gap: 4px; color: #8c9197; font-size: 12px; }
.u-web-visual-upgrade .vbl { color: #2a6df0; vertical-align: -3px; }
.u-web-visual-upgrade .vab { position: absolute; }
.u-web-visual-upgrade .vbn { position: absolute; }
.u-web-visual-upgrade .vshield { position: absolute; }
.u-web-visual-upgrade .vql { position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 4px; background: #eaf2ff; color: #2563d8; font-size: 13px; }
.u-web-visual-upgrade .vtile { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #f3f4f6; color: #aeb3b9; }
.u-web-visual-upgrade .vabs { margin-left: 6px; }
.u-web-visual-upgrade .vprog { position: absolute; width: 36px; height: 5px; border-radius: 3px; background: #e7e9ee; overflow: hidden; }
.u-web-visual-upgrade .vprog i { display: block; height: 100%; border-radius: 3px; background: #0a5fe8; }

.u-web-visual-upgrade .vu-bs { left: 0; top: 0; }
.u-web-visual-upgrade .vu-bar { left: 100px; top: 1235px; width: 85px; height: 6px; background: #fff; }
.u-web-visual-upgrade .vu-sq { left: 118px; top: 1268px; width: 50px; height: 50px; background: #fff; }
.u-web-visual-upgrade .vu-en { left: 100px; top: 1352px; font: 400 20px/32px var(--ui-num); letter-spacing: .35px; color: #ececec; white-space: nowrap; }

.u-web-visual-upgrade .vu-arc { left: 0; top: 0; }
.u-web-visual-upgrade .vu-h { left: 1600px; top: 196px; width: 280px; margin: 0; text-align: right; font-size: 52px; line-height: 64px; font-weight: 900; letter-spacing: 1px; color: #fff; -webkit-text-stroke: 1.8px #fff; white-space: nowrap; }
.u-web-visual-upgrade .vu-hs { left: 1887px; top: 230px; width: 13px; height: 13px; background: #8fb4ff; }
.u-web-visual-upgrade .vu-sub { left: 1400px; top: 325px; width: 500px; margin: 0; text-align: right; font-size: 27px; line-height: 47px; letter-spacing: 1.2px; color: rgba(255, 255, 255, .62); white-space: nowrap; }


.u-web-goal1-art {
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 9%, #fcfcfc 17%, #f8f8f8 29%, #f3f3f3 49%, #efefef 70%, #e7e7e7 100%);
}
.u-web-goal1-art .g1-svg { position: absolute; left: 0; top: 0; }


.u-web-icon-variants { background: #eceff7; border-radius: 0 100px 100px 0; overflow: hidden; }
.u-web-icon-variants .iv-svg { position: absolute; left: 0; top: 0; }


.u-web-icons-grid { background: #fff; border-radius: 32px; overflow: hidden; color: #111; box-shadow: inset 0 0 0 1px #f2f2f3; }
.u-web-icons-grid .ig-g { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); }
.u-web-icons-grid .ig-c { position: relative; display: flex; align-items: center; justify-content: center; border-right: 1px solid #f7f7f8; border-bottom: 1px solid #f7f7f8; }
.u-web-icons-grid .ig-c:nth-child(7n) { border-right: 0; }
.u-web-icons-grid .ig-c:nth-child(n+43) { border-bottom: 0; }
.u-web-icons-grid .ig-c.on { z-index: 2; background: #fff; border-radius: 26px; border-color: transparent; box-shadow: 0 22px 38px -6px rgba(20, 24, 40, .17), 0 0 28px rgba(20, 24, 40, .07); }
.u-web-icons-grid .ig-i { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }


.u-web-components-collage { background: linear-gradient(105deg, #f0f2f9 0%, #e6eaf6 35%, #e3e8f5 62%, #d9dff2 100%); color: #222; overflow: hidden; font-size: 14px; }
.u-web-components-collage .t { position: absolute; transform: translateY(-50%); white-space: nowrap; line-height: 1.3; }
.u-web-components-collage .b { position: absolute; display: grid; place-items: center; box-sizing: border-box; }
.u-web-components-collage .ab { position: absolute; display: block; }
.u-web-components-collage .card { background: #fff; border-radius: 32px; place-items: unset; }
.u-web-components-collage .s12 { font-size: 12px; } .u-web-components-collage .s13 { font-size: 13px; } .u-web-components-collage .s14 { font-size: 14px; }
.u-web-components-collage .s16 { font-size: 16px; } .u-web-components-collage .s175 { font-size: 17.5px; } .u-web-components-collage .s20 { font-size: 18.6px; } .u-web-components-collage .s128 { font-size: 12.8px; } .u-web-components-collage .s123 { font-size: 12.3px; }
.u-web-components-collage .num { font-family: var(--ui-num); font-variant-numeric: tabular-nums; }
.u-web-components-collage .dk { color: #222; } .u-web-components-collage .g { color: #a4a8ad; } .u-web-components-collage .g6 { color: #5f6368; } .u-web-components-collage .g3 { color: #b5b8bd; }
.u-web-components-collage .act { color: #0a5cf0; font-weight: 500; }
.u-web-components-collage .lk { color: #2a6fd0; }
.u-web-components-collage .cap { font-size: 11.5px; color: #a3a6ac; }
.u-web-components-collage .al { border-radius: 8px; place-items: unset; }
.u-web-components-collage .al-info { background: #ebf0fc; } .u-web-components-collage .al-ok { background: #e7f5ee; } .u-web-components-collage .al-warn { background: #fdf0e5; } .u-web-components-collage .al-err { background: #fde8ea; }
.u-web-components-collage .ck { border: 1px solid #d5d8dd; border-radius: 3px; background: #fff; }
.u-web-components-collage .prog { background: #e8eaee; border-radius: 4px; place-items: unset; overflow: hidden; }
.u-web-components-collage .prog i { display: block; height: 100%; background: #0a5cf0; border-radius: 4px; position: relative; }
.u-web-components-collage .prog em { position: absolute; right: 5px; top: 0; font: 400 6px/8px var(--ui-num); font-style: normal; color: #fff; }
.u-web-components-collage .att { background: #f3f5f9; border-radius: 4px; }
.u-web-components-collage .score { position: absolute; transform: translateY(-50%); font: 500 40px/1 var(--ui-num); color: #111; letter-spacing: -.5px; }
.u-web-components-collage .tileg { background: #f3f4f6; border-radius: 8px; }
.u-web-components-collage .bdg { background: #e34d59; color: #fff; border-radius: 50%; font: 400 11px/1 var(--ui-num); }
.u-web-components-collage .bdg.pill { border-radius: 10px; }
.u-web-components-collage .vline { background: #dfe2e8; }
.u-web-components-collage .vact { background: #0a5cf0; }
.u-web-components-collage .dinp { border: 2px solid #4a8be8; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px rgba(10, 92, 240, .12); }
.u-web-components-collage .panel { background: #fff; border: 1px solid #ebedf1; border-radius: 4px; box-shadow: 0 4px 16px rgba(30, 50, 100, .08); place-items: unset; }
.u-web-components-collage .sel { border: 1px solid #dfe2e7; border-radius: 4px; background: #fff; justify-items: start; padding-left: 9px; font-size: 17.5px; color: #222; }
.u-web-components-collage .wk { color: #a8abb0; font-size: 17px; }
.u-web-components-collage .dy { font-size: 17.5px; color: #222; z-index: 1; }
.u-web-components-collage .dy.mut { color: #c5c8cd; }
.u-web-components-collage .dy.blu { color: #1a6bd8; }
.u-web-components-collage .dy.wh { color: #fff; z-index: 2; }
.u-web-components-collage .band { background: #eaf1fc; }
.u-web-components-collage .sel0 { background: #0a5cf0; border-radius: 4px; z-index: 1; }
.u-web-components-collage .hl { background: #eceef2; }
.u-web-components-collage .ln { background: #0a5cf0; border-radius: 1px; }
.u-web-components-collage .stn { border: 1.5px solid #b6b9be; border-radius: 50%; color: #a0a3a8; font: 400 17px/1 var(--ui-num); }
.u-web-components-collage .stn.on { background: #0a5cf0; border-color: #0a5cf0; color: #fff; }
.u-web-components-collage .clip5 { position: absolute; left: 0; top: 0; width: 860px; height: 771px; overflow: hidden; }


.u-web-empty-states { background: #fff; border-radius: 36px; overflow: hidden; }
.u-web-empty-states .es-svg { position: absolute; left: 0; top: 0; }


.u-web-component-library { --k: 1.5; --u: calc(var(--k) * 1px); background: #fff; color: #2a2d31; overflow: hidden; line-height: 1.2; }
.u-web-component-library .t { position: absolute; white-space: nowrap; line-height: 1.25; }
.u-web-component-library .r { position: absolute; box-sizing: border-box; display: grid; place-items: center; }
.u-web-component-library .ab { position: absolute; display: block; }
.u-web-component-library .pg { position: absolute; top: 0; height: 1590px; overflow: hidden; }
.u-web-component-library .pgi { position: absolute; top: 0; width: 3000px; height: 1590px; }
.u-web-component-library .bgp { background: #fff; }
.u-web-component-library .pgbg { background: #fff; }
.u-web-component-library .pgfade { background: linear-gradient(90deg, rgba(240, 242, 246, 0), #f1f3f7 55%, #e7eaf0 100%); }
.u-web-component-library .hdr { background: linear-gradient(180deg, #eaf0fd 0%, #f3f6fd 55%, #fbfcff 100%); }
.u-web-component-library .orb1 { border-radius: 50%; background: radial-gradient(circle at 62% 52%, #cfe0fb 0%, #b6cff7 58%, #c9dcfa 100%); opacity: .9; }
.u-web-component-library .orb2 { border-radius: 50%; background: #f1f6ff; opacity: .85; }
.u-web-component-library .ttl { position: absolute; font-family: var(--ui-num), var(--ui-font); font-weight: 900; color: #0d1117; letter-spacing: .2px; transform: translateY(-50%); -webkit-text-stroke: calc(var(--u) * .55) #0d1117; }
.u-web-component-library .sub { color: #727780; }
.u-web-component-library .h1 { font-weight: 500; color: #121518; }
.u-web-component-library .h2 { font-weight: 600; color: #1b1e22; }
.u-web-component-library .hl { height: var(--u) !important; background: #eceef2; }
.u-web-component-library .lab, .u-web-component-library .cap { color: #b9bdc3; }
.u-web-component-library .fl { color: #34383d; }
.u-web-component-library .rad { border: var(--u) solid #d5d8dd; border-radius: 50%; background: #fff; }
.u-web-component-library .rad.h { border-color: #2a6fe8; }
.u-web-component-library .rad.c { border: calc(var(--u) * 1.3) solid #0a5cf0; background: radial-gradient(circle, #0a5cf0 0 34%, #fff 38%); }
.u-web-component-library .rad.d { border-color: #e7e9ec; background: #f8f9fa; }
.u-web-component-library .rad.cd { border-color: #dcdfe3; background: radial-gradient(circle, #c3c7cd 0 30%, #f6f7f8 34%); }
.u-web-component-library .chk { border: var(--u) solid #d5d8dd; border-radius: calc(var(--u) * 1.6); background: #fff; }
.u-web-component-library .chk.h { border-color: #2a6fe8; }
.u-web-component-library .chk.c { border-color: #0a5cf0; background: #0a5cf0; }
.u-web-component-library .chk.c::after, .u-web-component-library .chk.cd::after { content: ""; position: absolute; inset: 22%; background: #fff; -webkit-mask: var(--pf-ic-check) center/contain no-repeat; mask: var(--pf-ic-check) center/contain no-repeat; }
.u-web-component-library .chk.d { border-color: #e7e9ec; background: #f8f9fa; }
.u-web-component-library .chk.cd { border-color: #dcdfe3; background: #eef0f2; }
.u-web-component-library .chk.cd::after { background: #b9bdc3; }
.u-web-component-library .sg { border: var(--u) solid transparent; color: #44484d; }
.u-web-component-library .sg-o { border-color: #e1e4e8; border-right-width: 0; background: #fff; }
.u-web-component-library .sg-o.cd { border-right-width: var(--u); }
.u-web-component-library .sg-o.h { color: #1f64d8; }
.u-web-component-library .sg-o.c { z-index: 1; border-width: var(--u); border-color: #0a5cf0; color: #0a5cf0; }
.u-web-component-library .sg-o.d { color: #c7cacf; background: #fbfbfc; }
.u-web-component-library .sg-o.cd { color: #8bb0f2; background: #f9fbfe; }
.u-web-component-library .sg-b, .u-web-component-library .sg-g { border: 0; background: #ebecef; }
.u-web-component-library .sg-b.h, .u-web-component-library .sg-g.h { color: #1d2024; }
.u-web-component-library .sg-b.c { background: #0a5cf0; color: #fff; }
.u-web-component-library .sg-b.d, .u-web-component-library .sg-g.d { background: #e6e8eb; color: #c4c7cc; }
.u-web-component-library .sg-b.cd { background: #9dbcf5; color: #e8f0fe; }
.u-web-component-library .sg-g.c { background: #fff; color: #1d2024; }
.u-web-component-library .sg-g.cd { background: #fafafb; color: #c7cacf; box-shadow: inset 0 0 0 var(--u) #eceef1; }
.u-web-component-library .inp { border: var(--u) solid #e1e4e9; border-radius: calc(var(--u) * 2); background: #fff; }
.u-web-component-library .inp.foc { border-color: #7fa9ee; box-shadow: 0 0 0 var(--u) rgba(80, 130, 230, .12); }
.u-web-component-library .inp.dis { background: #f1f2f4; border-color: #e6e8eb; }
.u-web-component-library .inp.flat { background: #f7f8fa; border-color: #eceef1; }
.u-web-component-library .inp.ta { background: #f8f9fb; border-color: #eceef1; }
.u-web-component-library .menu { background: #fff; border-radius: calc(var(--u) * 3); box-shadow: 0 var(--u) calc(var(--u) * 4) rgba(30, 40, 70, .13), 0 0 0 var(--u) rgba(30, 40, 70, .03); }
.u-web-component-library .menu.gy { background: #f4f5f8; }
.u-web-component-library .mh { background: #e9ebef; border-radius: calc(var(--u) * 2); }
.u-web-component-library .menu.dk .mh { background: #d3d6db; }
.u-web-component-library .tag { background: #ececef; border-radius: calc(var(--u) * 1.6); color: #6a6e74; }
.u-web-component-library .sw { background: #0a5cf0; border-radius: 999px; place-items: center end; padding-right: calc(var(--u) * 1.5); }
.u-web-component-library .sw i { width: calc(var(--u) * 8.2); height: calc(var(--u) * 8.2); border-radius: 50%; background: #fff; }
.u-web-component-library .trk { background: #e5e7eb; }
.u-web-component-library .trkb { background: #0a5cf0; }
.u-web-component-library .knob { border: calc(var(--u) * 1.3) solid #0a5cf0; border-radius: 50%; background: #fff; }
.u-web-component-library .bt { border-radius: calc(var(--u) * 1.8); font-weight: 400; white-space: nowrap; }
.u-web-component-library .bt.pill { border-radius: 999px; }
.u-web-component-library .bt-f { background: #0a5cf0; color: #fff; }
.u-web-component-library .bt-fh { background: #3d80f2; color: #fff; }
.u-web-component-library .bt-fa { background: #0044c8; color: #fff; }
.u-web-component-library .bt-fd { background: #9dbdf8; color: #e9f1fe; }
.u-web-component-library .bt-o { background: #fff; border: var(--u) solid #1f64d8; color: #1f64d8; }
.u-web-component-library .bt-oh { background: #f4f5f7; border: var(--u) solid #9bb8ea; color: #5b86d8; }
.u-web-component-library .bt-oa { background: #e5e7eb; border: var(--u) solid #6d89c8; color: #264f9e; }
.u-web-component-library .bt-od { background: #fafbfc; border: var(--u) solid #e8eaed; color: #c1c9d8; }
.u-web-component-library .bt-d { background: #fff; border: var(--u) dashed #1f64d8; color: #1f64d8; }
.u-web-component-library .bt-dh { background: #f4f5f7; border: var(--u) dashed #9bb8ea; color: #5b86d8; }
.u-web-component-library .bt-da { background: #e5e7eb; border: var(--u) dashed #4b6fb8; color: #264f9e; }
.u-web-component-library .bt-dd { background: #fafbfc; border: var(--u) dashed #e8eaed; color: #c1c9d8; }
.u-web-component-library .bt-t { color: #1f64d8; }
.u-web-component-library .bt-th { background: #ececef; color: #3c68c0; }
.u-web-component-library .bt-ta { background: #dfe2e6; color: #264f9e; }
.u-web-component-library .bt-td { color: #b9c6e0; }
.u-web-component-library .bt-g { background: #ebecef; color: #3a3d42; }
.u-web-component-library .tbox { background: linear-gradient(90deg, #d9dce2, #dfe2e8 70%, #d3d7e0); }
.u-web-component-library .tin { background: linear-gradient(90deg, #fff, #fff 60%, #f4f6f9); }
.u-web-component-library .tb { color: #7a7f86; }
.u-web-component-library .tb.on { color: #1e5fd0; }
.u-web-component-library .tl { background: #e9ebef; }
.u-web-component-library .tu { background: #1e5fd0; height: calc(var(--u) * 1.6) !important; border-radius: 1px; }
.u-web-component-library .tstrip { background: #eceef2; }
.u-web-component-library .tact { background: #fff; }
.u-web-component-library .cbx { border: var(--u) solid #e6e8ec; border-radius: calc(var(--u) * 3); background: #fff; }
.u-web-component-library .cr { color: #1f2226; }
.u-web-component-library .cc { color: #8a8f96; }


.u-web-kr2-problem { background: linear-gradient(135deg, #f7f8fc 0%, #ebeff9 38%, #e4edfa 70%, #eaf2fc 100%); font-size: 14px; color: #222; overflow: hidden; }
.u-web-kr2-problem .t { position: absolute; transform: translateY(-50%); white-space: nowrap; line-height: 1.3; }
.u-web-kr2-problem .b { position: absolute; display: grid; place-items: center; box-sizing: border-box; }
.u-web-kr2-problem .i { position: absolute; display: block; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; }
.u-web-kr2-problem .c3 { color: #333; } .u-web-kr2-problem .c4 { color: #444; } .u-web-kr2-problem .c5 { color: #555; } .u-web-kr2-problem .c6 { color: #666; }
.u-web-kr2-problem .c9 { color: #999; } .u-web-kr2-problem .cc { color: #c4c4c4; } .u-web-kr2-problem .cw { color: #fff; }
.u-web-kr2-problem .a13 { font-size: 13px; } .u-web-kr2-problem .a14 { font-size: 14px; } .u-web-kr2-problem .a15 { font-size: 15px; }
.u-web-kr2-problem .b10 { font-size: 9.4px; } .u-web-kr2-problem .b11 { font-size: 11px; } .u-web-kr2-problem .b12 { font-size: 12px; } .u-web-kr2-problem .b13 { font-size: 13.5px; }
.u-web-kr2-problem .b { }
.u-web-kr2-problem .t.b { font-weight: 600; }
.u-web-kr2-problem .g { color: #8c8c8c; } .u-web-kr2-problem .g2 { color: #6b6b6b; } .u-web-kr2-problem .w { color: #fff; } .u-web-kr2-problem .b2 { color: #2a2a2a; }
.u-web-kr2-problem .fr { position: absolute; background: #0b1327; box-sizing: border-box; }
.u-web-kr2-problem .fa { left: 283px; top: -4px; width: 1300px; height: 861px; border-radius: 38px; }
.u-web-kr2-problem .fb { left: -4px; top: 353px; width: 967px; height: 615px; border-radius: 36px; }
.u-web-kr2-problem .wa { background: #fff; border-radius: 32px 0 0 0; place-items: unset; }
.u-web-kr2-problem .abar { background: #fff; border-radius: 32px 0 0 0; border-bottom: 1px solid #dcdcdc; }
.u-web-kr2-problem .aside { background: #fff; place-items: unset; }
.u-web-kr2-problem .amain { background: #ebebeb; }
.u-web-kr2-problem .aact { background: #efefef; border-radius: 3px; }
.u-web-kr2-problem .acard { background: #fff; border-radius: 3px; }
.u-web-kr2-problem .hl { background: #e7e7e7; } .u-web-kr2-problem .hl2 { background: #ececec; } .u-web-kr2-problem .vl { background: #e7e7e7; }
.u-web-kr2-problem .alist { border: 1px solid #e6e6e6; border-radius: 2px; }
.u-web-kr2-problem .arow.hov { background: #ebebeb; }
.u-web-kr2-problem .vsep { background: #e6e6e6; }
.u-web-kr2-problem .badge { background: #6b6b6b; border-radius: 6px; color: #fff; font: 600 9px/1 var(--ui-num); }
.u-web-kr2-problem .stile { background: #e6e6e6; color: #666; border-radius: 3px; font-size: 14px; font-weight: 500; }
.u-web-kr2-problem .stile.av { background: #c4c4c4; border-radius: 3px; }
.u-web-kr2-problem .stile.ra { background: #f2f2f2; color: #aaa; }
.u-web-kr2-problem .stile.ra.ah { background: #e0e0e0; color: #666; }
.u-web-kr2-problem .inp { border: 1px solid #dedede; border-radius: 3px; justify-items: start; padding-left: 8px; color: #aaa; font-size: 14px; }
.u-web-kr2-problem .abtn { border: 1px solid #e3e3e3; border-radius: 3px; background: #fff; }
.u-web-kr2-problem .abtn.dk { background: #474747; border-color: #474747; }
.u-web-kr2-problem .chip { background: #ececec; border-radius: 3px; }
.u-web-kr2-problem .pgb { border: 1px solid #e0e0e0; border-radius: 3px; background: #fff; font-size: 14px; font-family: var(--ui-num); }
.u-web-kr2-problem .pgb.on { background: #555; border-color: #555; color: #fff; }
.u-web-kr2-problem .pgi { border: 1px solid #e0e0e0; border-radius: 3px 0 0 3px; background: #fff; font-size: 14px; font-family: var(--ui-num); }
.u-web-kr2-problem .pgi.pt { background: #f0f0f0; border-radius: 0 3px 3px 0; border-left: 0; justify-items: start; padding-left: 14px; }
.u-web-kr2-problem .pg { border: 1px solid #e0e0e0; border-radius: 3px; background: #fff; }
.u-web-kr2-problem .abot { background: #0b1327; }
.u-web-kr2-problem .bw { background: #f4f4f4; border-radius: 30px 30px 0 0; place-items: unset; }
.u-web-kr2-problem .bbar { background: #fcfcfc; border-radius: 30px 30px 0 0; border-bottom: 1px solid #e8e8e8; }
.u-web-kr2-problem .bnav { background: #f6f6f6; }
.u-web-kr2-problem .bact { background: #ececec; border-radius: 3px; }
.u-web-kr2-problem .bhead { background: #fcfcfc; box-shadow: 0 2px 4px rgba(0,0,0,.04); }
.u-web-kr2-problem .hl3 { background: #e9e9e9; }
.u-web-kr2-problem .stile.bs { background: #e4e4e4; border-radius: 2px; }
.u-web-kr2-problem .stile.bs2 { background: #ececec; color: #777; font-size: 14px; border-radius: 3px; }
.u-web-kr2-problem .ul { background: #444; border-radius: 1px; }
.u-web-kr2-problem .bbtn { border: 1px solid #e2e2e2; border-radius: 2px; background: #fff; }
.u-web-kr2-problem .bbtn.dk { background: #555; border-color: #555; }
.u-web-kr2-problem .bcard { background: #fafafa; border-radius: 6px; }
.u-web-kr2-problem .bfilter { background: #f1f1f1; border-radius: 4px; }
.u-web-kr2-problem .binp { background: #fcfcfc; border: 1px solid #e6e6e6; border-radius: 2px; justify-items: start; padding-left: 6px; font-size: 9.4px; color: #b0b0b0; }
.u-web-kr2-problem .pbox { border: 1px solid #d6d6d6; border-radius: 2px; background: linear-gradient(#bdbdbd,#bdbdbd) center/5px 1px no-repeat, linear-gradient(#bdbdbd,#bdbdbd) center/1px 5px no-repeat, #fafafa; }
.u-web-kr2-problem .bdiv { background: #dcdcdc; }
.u-web-kr2-problem .btag { background: #505050; color: #d9d9d9; border-radius: 2px; font-size: 8.5px; }
.u-web-kr2-problem .pri { color: #eee; font-size: 8.5px; border-radius: 2px; }
.u-web-kr2-problem .pri.d { background: #666; } .u-web-kr2-problem .pri.m { background: #9a9a9a; } .u-web-kr2-problem .pri.l { background: #d0d0d0; }
.u-web-kr2-problem .stt { border: 1px solid #a8a8a8; border-radius: 2px; background: #f8f8f8; color: #8a8a8a; font-size: 8.5px; }
.u-web-kr2-problem .stt.d2 { border-color: #777; color: #666; }
.u-web-kr2-problem .stt.d3 { border-color: #d4d4d4; color: #c0c0c0; }
.u-web-kr2-problem .alogo { position: absolute; }
.u-web-kr2-problem .i-home{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 11L12 4.2l7.5 6.8v8a1.2 1.2 0 0 1-1.2 1.2H5.7A1.2 1.2 0 0 1 4.5 19z'/><path d='M9.5 20.2v-5h5v5'/></svg>")}
.u-web-kr2-problem .i-dots{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><g fill='black' stroke='none'><circle cx='5' cy='5' r='1.4'/><circle cx='12' cy='5' r='1.4'/><circle cx='19' cy='5' r='1.4'/><circle cx='5' cy='12' r='1.4'/><circle cx='12' cy='12' r='1.4'/><circle cx='19' cy='12' r='1.4'/><circle cx='5' cy='19' r='1.4'/><circle cx='12' cy='19' r='1.4'/><circle cx='19' cy='19' r='1.4'/></g></svg>")}
.u-web-kr2-problem .i-bell{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.6 2H4.4L6 16.5z'/><path d='M10 21.2h4'/></svg>")}
.u-web-kr2-problem .i-server{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='6.5' rx='1.6'/><rect x='3.5' y='13.5' width='17' height='6.5' rx='1.6'/><path d='M7 7.2h4M7 16.8h4'/></svg>")}
.u-web-kr2-problem .i-cube{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.4v9.2L12 21l-8-4.4V7.4L12 3z'/><path d='M4.2 7.6L12 12l7.8-4.4M12 12v8.8'/></svg>")}
.u-web-kr2-problem .i-scan{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 9h8M8 13h5'/></svg>")}
.u-web-kr2-problem .i-lock{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10.5' width='14' height='9.5' rx='2'/><path d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/></svg>")}
.u-web-kr2-problem .i-plusbox{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M12 8.5v7M8.5 12h7'/></svg>")}
.u-web-kr2-problem .i-hex{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5l7.5 4.3v8.4L12 20.5l-7.5-4.3V7.8z'/><circle cx='12' cy='12' r='2.8'/></svg>")}
.u-web-kr2-problem .i-search{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5'/></svg>")}
.u-web-kr2-problem .i-down{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>")}
.u-web-kr2-problem .i-left{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 6l-6 6 6 6'/></svg>")}
.u-web-kr2-problem .i-right{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 6l6 6-6 6'/></svg>")}
.u-web-kr2-problem .i-plus{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>")}
.u-web-kr2-problem .i-monitor{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4.5' width='17' height='11.5' rx='2'/><path d='M8.5 20h7M12 16v4'/></svg>")}
.u-web-kr2-problem .i-panels{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='7' height='16' rx='1.6'/><rect x='14' y='4' width='6' height='6.5' rx='1.4'/><rect x='14' y='13.5' width='6' height='6.5' rx='1.4'/></svg>")}
.u-web-kr2-problem .i-layers{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4l8.5 4.6L12 13.2 3.5 8.6z'/><path d='M3.5 12.4L12 17l8.5-4.6M3.5 16L12 20.6 20.5 16'/></svg>")}
.u-web-kr2-problem .i-apps{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='6.5' height='6.5' rx='1.4'/><rect x='13.5' y='4' width='6.5' height='6.5' rx='1.4'/><rect x='4' y='13.5' width='6.5' height='6.5' rx='1.4'/><rect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.4'/></svg>")}
.u-web-kr2-problem .i-gear{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M10.2 3.5h3.6l.6 2.4 1.9 1.1 2.4-.7 1.8 3.1-1.8 1.7v2.2l1.8 1.7-1.8 3.1-2.4-.7-1.9 1.1-.6 2.4h-3.6l-.6-2.4-1.9-1.1-2.4.7-1.8-3.1 1.8-1.7V10.7L3.5 9l1.8-3.1 2.4.7 1.9-1.1z'/><circle cx='12' cy='12' r='3'/></svg>")}
.u-web-kr2-problem .i-fold{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5h16M12 12h8M4 18.5h16M8.5 9L5.5 12l3 3'/></svg>")}


.u-web-kr2-solution { background: #fff; --pf-nav-w: 61px; --pf-sub-w: 134px; --pf-top-h: 56px; }
.u-web-kr2-solution .ks-frame { position: absolute; inset: 0; border-radius: 38px; background: #0b1327; }
.u-web-kr2-solution .pf-shell { inset: 8px 9px 13px 10px; border-radius: 30px; }
.u-web-kr2-solution .pf-nav { gap: 4px; }
.u-web-kr2-solution .pf-sub { padding-top: 8px; }
.u-web-kr2-solution .pf-sub-t:not(:first-child) { margin-top: 16px; }
.u-web-kr2-solution .pf-main { overflow: hidden; }
.u-web-kr2-solution .ks-title { position: absolute; left: 27px; top: 20px; font-size: 16px; font-weight: 600; line-height: 22px; }
.u-web-kr2-solution .ks-add { position: absolute; right: 23px; top: 13px; width: 117px; height: 31px; font-size: 14px; }
.u-web-kr2-solution .ks-stats { position: absolute; left: 0; right: 0; top: 71px; height: 92px; border-bottom: 1px solid var(--pf-line); }
.u-web-kr2-solution .ks-globe { position: absolute; left: 27px; top: 0; width: 76px; height: 84px; border-radius: 10px; background: linear-gradient(135deg, #eaf1fe, #f7f9fe 70%, #fff); display: grid; place-items: center; color: var(--pf-blue); }
.u-web-kr2-solution .ks-globe .pf-i { width: 34px; height: 34px; }
.u-web-kr2-solution .ks-st { position: absolute; top: 14px; transform: translateX(-50%); text-align: center; }
.u-web-kr2-solution .ks-st0 { left: 96px; transform: none; text-align: left; }
.u-web-kr2-solution .ks-st0 .pf-stat-l { margin-top: -3px; }
.u-web-kr2-solution .ks-st .pf-stat-l { display: flex; align-items: center; justify-content: center; gap: 6px; color: #3a3d40; line-height: 22px; white-space: nowrap; }
.u-web-kr2-solution .ks-st0 .pf-stat-l { justify-content: flex-start; }
.u-web-kr2-solution .ks-st .pf-stat-l i { width: 7px; height: 7px; border-radius: 50%; }
.u-web-kr2-solution .ks-st .pf-stat-v { margin-top: 0; font-size: 29px; line-height: 36px; letter-spacing: .8px; color: #0b0e11; }
.u-web-kr2-solution .ks-st0 .pf-stat-v { margin-top: 3px; }
.u-web-kr2-solution .ks-st1 { left: 292px; }
.u-web-kr2-solution .ks-st2 { left: 433px; }
.u-web-kr2-solution .ks-st3 { left: 574px; }
.u-web-kr2-solution .ks-st4 { left: 716px; }
.u-web-kr2-solution .ks-st5 { left: 858px; }
.u-web-kr2-solution .ks-st6 { left: 999px; }
.u-web-kr2-solution .ks-sep { position: absolute; left: 204px; top: 14px; width: 1px; height: 36px; background: #eceef1; }
.u-web-kr2-solution .ks-sep2 { left: 1068px; }
.u-web-kr2-solution .ks-vd { position: absolute; left: 1094px; top: 14px; }
.u-web-kr2-solution .ks-vd .pf-stat-l { color: #3a3d40; line-height: 22px; }
.u-web-kr2-solution .ks-sqs { display: inline-flex; gap: 4px; }
.u-web-kr2-solution .ks-vd .ks-sqs { margin-top: 3px; }
.u-web-kr2-solution .ks-sq { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: #d9dce3; color: #f3f4f7; font: 400 12px/1 var(--ui-num); font-style: normal; }
.u-web-kr2-solution .ks-sq.s1 { background: #b5001c; color: #fff; }
.u-web-kr2-solution .ks-sq.s2 { background: #ef4a5a; color: #fff; }
.u-web-kr2-solution .ks-sq.s3 { background: #f5821f; color: #fff; }
.u-web-kr2-solution .ks-sq.s4 { background: #0d62e8; color: #fff; }
.u-web-kr2-solution .ks-sq.s5 { background: #7c8aa6; color: #fff; }
.u-web-kr2-solution .ks-filter { position: absolute; left: 27px; top: 182px; display: flex; align-items: center; gap: 9px; }
.u-web-kr2-solution .ks-filter .pf-input, .u-web-kr2-solution .ks-filter .pf-sel { height: 31px; gap: 6px; border-color: #dcdfe5; color: #4a4e52; }
.u-web-kr2-solution .ks-reset { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; color: #4a4e52; }
.u-web-kr2-solution .ks-tbl { position: absolute; left: 27px; top: 229px; width: 1208px; }
.u-web-kr2-solution .ks-tbl th { height: 40px; padding: 0 10px; font-size: 14px; color: #8d9094; }
.u-web-kr2-solution .ks-tbl th:first-child { padding-left: 12px; }
.u-web-kr2-solution .ks-tbl td { height: 40.4px; padding: 0 10px; font-size: 14px; }
.u-web-kr2-solution .ks-tbl td:first-child { padding-left: 12px; }
.u-web-kr2-solution .ks-tbl tbody tr:hover { background: none; }
.u-web-kr2-solution .ks-tbl td.c, .u-web-kr2-solution .ks-tbl th.c { text-align: center; }
.u-web-kr2-solution .ks-nm { gap: 8px; }
.u-web-kr2-solution .ks-tile { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 4px; background: #e9f1fe; color: var(--pf-blue); font-size: 11px; font-style: normal; font-weight: 500; }
.u-web-kr2-solution .pf-tag { height: 19px; padding: 0 4px; font-size: 12px; }
.u-web-kr2-solution .ks-sev { background: #b5001c; color: #fff; }
.u-web-kr2-solution .ks-ops { gap: 11px; color: #1a5fc8; }
.u-web-kr2-solution .ks-ops .d { color: #9cbcf0; }
.u-web-kr2-solution .ks-ing { display: inline-flex; align-items: center; gap: 6px; color: #8d9094; }
.u-web-kr2-solution .ks-spin { width: 13px; height: 13px; border: 1.6px solid #c9ccd1; border-top-color: transparent; border-radius: 50%; }
.u-web-kr2-solution .ks-fail { display: inline-flex; align-items: center; gap: 6px; color: var(--pf-red); }
.u-web-kr2-solution .ks-bang { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--pf-red); color: #fff; font: 700 10px/1 var(--ui-num); font-style: normal; }
.u-web-kr2-solution .ks-pager { position: absolute; left: 27px; right: 23px; top: 690px; display: flex; align-items: center; justify-content: space-between; height: 32px; }
.u-web-kr2-solution .ks-pager .pf-sel { border-color: #dcdfe5; }
.u-web-kr2-solution .ks-pager .pf-pg-i { border-color: #dcdfe5; }
.u-web-kr2-solution .ks-pager .pf-pg-i.on { border-color: var(--pf-blue); }
.u-web-kr2-solution .ks-pager .pf-pg-n { border-color: transparent; }
.u-web-kr2-solution .ks-jump { margin: 0 -2px 0 4px; }
.u-web-kr2-solution .ks-jin { width: 63px; border-radius: 4px 0 0 4px; border-color: #dcdfe5; }
.u-web-kr2-solution .ks-jtot { width: 70px; margin-left: -9px; border-radius: 0 4px 4px 0; border-color: #dcdfe5; background: var(--pf-bg); }
.u-web-kr2-solution .ks-path { position: absolute; left: 0; top: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .u-web-kr2-solution .ks-spin { animation: ks-rot 1.2s linear infinite; }
  @keyframes ks-rot { to { transform: rotate(360deg); } }
}


.u-web-consistency-collage { background: #050506; overflow: hidden; }
.u-web-consistency-collage .bgL { position: absolute; left: 0; top: 0; width: 1000px; height: 1629px; background: linear-gradient(112deg, transparent 12%, rgba(255,255,255,.075) 20%, transparent 27%, rgba(255,255,255,.04) 34%, transparent 42%), radial-gradient(120% 55% at 18% 0%, #1d1d20 0%, #08080a 55%, #030303 100%); }
.u-web-consistency-collage .bgB { position: absolute; left: 1000px; top: 0; width: 1000px; height: 1000px; background: #0b52ee; }
.u-web-consistency-collage .bgW { position: absolute; left: 1000px; top: 1000px; width: 1000px; height: 629px; background: #fff; }
.u-web-consistency-collage .cp { position: absolute; width: 1440px; overflow: hidden; transform-origin: 0 0; --pf-nav-w: 64px; --pf-sub-w: 130px; --pf-top-h: 54px; }
.u-web-consistency-collage .cp1 { left: -12px; top: 193px; height: 906px; transform: scale(.658); border-radius: 46px; background: #2a2b2f; box-shadow: inset 0 0 0 11px #5d6067, inset 0 0 0 13px #7e828a; }
.u-web-consistency-collage .cp2 { left: -12px; top: 846px; height: 901px; transform: scale(.658); border-radius: 46px; background: #2a2b2f; box-shadow: inset 0 0 0 11px #5d6067, inset 0 0 0 13px #7e828a; }
.u-web-consistency-collage .cp1 .pf-shell, .u-web-consistency-collage .cp2 .pf-shell { inset: 13px; border-radius: 34px; }
.u-web-consistency-collage .cp1::after, .u-web-consistency-collage .cp2::after { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(196, 200, 210, .5); border-radius: 38px; pointer-events: none; z-index: 5; }
.u-web-consistency-collage .cp3 { left: 1047px; top: 50px; height: 921px; transform: scale(.977); border-radius: 36px; background: #93b3fa; --pf-sub-w: 134px; }
.u-web-consistency-collage .cp3 .pf-shell { inset: 9px 0 9px 9px; border-radius: 28px 0 0 28px; }
.u-web-consistency-collage .cp4 { left: 1047px; top: 1046px; height: 1010px; transform: scale(.683); border-radius: 56px; background: #0a0a10; }
.u-web-consistency-collage .cp4 .pf-shell { inset: 10px; border-radius: 46px; }
.u-web-consistency-collage .pf-nav { gap: 4px; }
.u-web-consistency-collage .a { position: absolute; }
.u-web-consistency-collage .at { transform: translateY(-50%); white-space: nowrap; line-height: 1.3; }
.u-web-consistency-collage .at.r { transform: translate(-100%, -50%); }
.u-web-consistency-collage .t12 { font-size: 12px; } .u-web-consistency-collage .t13 { font-size: 13px; } .u-web-consistency-collage .t14 { font-size: 14px; } .u-web-consistency-collage .t16 { font-size: 16px; } .u-web-consistency-collage .t18 { font-size: 18px; }
.u-web-consistency-collage .b { font-weight: 600; }
.u-web-consistency-collage .g { color: #b4b8bd; }
.u-web-consistency-collage .hl { background: #eceef1; }
.u-web-consistency-collage .sch { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #dde0e4; border-radius: 4px; background: #fff; color: #a2a3a4; }
.u-web-consistency-collage .avt { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.u-web-consistency-collage .pf-sub-i.s2 { padding-left: 36px; }
.u-web-consistency-collage .p1l { border-right: 1px solid #eceef1; }
.u-web-consistency-collage .p1act { background: #e8f0ff; border-radius: 4px; }
.u-web-consistency-collage .car { color: #6a6d6f; }
.u-web-consistency-collage .car .pf-i { transform-origin: 50% 50%; }
.u-web-consistency-collage .cns { display: flex; gap: 8px; font-size: 12px; color: #6a6d6f; font-family: var(--ui-num); }
.u-web-consistency-collage .cn { display: inline-flex; align-items: center; gap: 3px; }
.u-web-consistency-collage .rtag { height: 18px; padding: 0 6px; border-radius: 3px; font-size: 11px; line-height: 18px; white-space: nowrap; }
.u-web-consistency-collage .rt-Maintainer { background: #eef0f6; color: #6a7a99; }
.u-web-consistency-collage .rt-Developer { background: #fdeee2; color: #ed7b2f; }
.u-web-consistency-collage .rt-Owner { background: #e6f0ff; color: #0a5cf0; }
.u-web-consistency-collage .rt-Guest, .u-web-consistency-collage .rt-Reporter { background: #f0f1f3; color: #6a6d6f; }
.u-web-consistency-collage .p1act + .at.bl { color: #0a5cf0; }
.u-web-consistency-collage .tr { display: flex; gap: 8px; margin: 13px 0 0 auto; }
.u-web-consistency-collage .p2l { border-right: 1px solid #eceef1; }
.u-web-consistency-collage .p2sel { background: #eaf2ff; border-radius: 6px; }
.u-web-consistency-collage .sw2 { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 4px; background: #e6f0ff; color: #0a5cf0; white-space: nowrap; }
.u-web-consistency-collage .p2t { table-layout: fixed; width: 100%; }
.u-web-consistency-collage .p2t td { height: 45px; }
.u-web-consistency-collage .p2t .ttl { display: flex; align-items: center; gap: 7px; }
.u-web-consistency-collage .p2t .pf-no { color: var(--pf-text); }
.u-web-consistency-collage .mcard { width: 287px; height: 189px; border: 1px solid #e6e9ed; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(20, 40, 80, .05); }
.u-web-consistency-collage .mcard.hov { box-shadow: 0 6px 18px rgba(20, 40, 80, .14); }
.u-web-consistency-collage .mth { position: absolute; left: 0; top: 0; right: 0; height: 149px; background: #f1f2f5; }
.u-web-consistency-collage .min { position: absolute; left: 10px; top: 9px; right: 10px; bottom: 9px; background: #fff; border-radius: 1px; }
.u-web-consistency-collage .mtt { position: absolute; left: 16px; right: 0; bottom: 0; height: 40px; line-height: 40px; font-size: 16px; font-weight: 600; }
.u-web-consistency-collage .mb { position: absolute; }
.u-web-consistency-collage .ms { position: absolute; height: 12px; }
.u-web-consistency-collage .mx { position: absolute; height: 1px; background: #e8eaee; }
.u-web-consistency-collage .ml { position: absolute; font-size: 6.8px; color: #a8abb0; white-space: nowrap; line-height: 1; }
.u-web-consistency-collage .mtile { position: absolute; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #eceef1; color: #b7bbc1; }
.u-web-consistency-collage .mgl { position: absolute; height: 10px; border-radius: 5px; background: #eceef1; }
.u-web-consistency-collage .mst { white-space: nowrap; }
.u-web-consistency-collage .mst .ml2 { display: block; font-size: 6.8px; color: #8d9094; line-height: 10px; }
.u-web-consistency-collage .mst b { display: block; font: 700 14px/18px var(--pf-fnum); color: #111; }
.u-web-consistency-collage .mst i { display: block; width: 26px; height: 4px; margin-top: 5px; border-radius: 2px; }
.u-web-consistency-collage .mbtn { position: absolute; left: 14px; right: -60px; top: 130px; height: 32px; background: #0b5cf0; border-radius: 3px; color: #fff; font-style: normal; display: grid; place-items: center; }
.u-web-consistency-collage .p4h { background: #f6f7fa; }
.u-web-consistency-collage .p4w { background: #fff; }
.u-web-consistency-collage .prp { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.u-web-consistency-collage .prp .g1 { margin-left: 14px; color: #8d9094; }
.u-web-consistency-collage .prp .pf-tag { height: 20px; }
.u-web-consistency-collage .pf-pg { white-space: nowrap; }
.u-web-consistency-collage .cp4 .pf-tab { font-size: 14px; }


.u-web-goal2-art { overflow: hidden; background: #edf1f4; }
.u-web-goal2-art .g2-svg { position: absolute; left: 0; top: 0; }


.u-web-nav-before { background: transparent; color: #2a2f36; }
.u-web-nav-before .nb-st { position: absolute; left: 0; top: 0; width: 1500px; height: 1010px; transform: scale(.9); transform-origin: 0 0; }
.u-web-nav-before .nb-st > *, .u-web-nav-before .nb-win > * { position: absolute; }
.u-web-nav-before .nb-frame { left: 0; top: 0; width: 1500px; height: 1010px; border-radius: 34px; background: #060d22; }
.u-web-nav-before .nb-win { left: 0; top: 0; width: 1500px; height: 1010px; overflow: hidden; background: #fff; clip-path: inset(9px 10px 11px 11px round 28px); }
.u-web-nav-before .nb-under { left: 0; top: 0; width: 1500px; height: 1010px; filter: blur(.3px); }
.u-web-nav-before .nb-under > * { position: absolute; }
.u-web-nav-before .nb-fade { left: 0; top: 381px; width: 1500px; height: 629px; background: linear-gradient(180deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.2) 100px, rgba(255,255,255,.3) 182px, rgba(255,255,255,.5) 300px, rgba(255,255,255,.72) 420px, rgba(255,255,255,.86) 500px, rgba(255,255,255,.94) 580px, rgba(255,255,255,.97) 629px); }
.u-web-nav-before .nb-card { border: 1px solid #eceef1; border-radius: 6px; background: #fff; }
.u-web-nav-before .nb-tx { font-size: 15px; line-height: 24px; color: #4b5058; white-space: nowrap; }
.u-web-nav-before .nb-tx.g { color: #b8bcc2; }
.u-web-nav-before .nb-tx.sv { display: flex; align-items: center; }
.u-web-nav-before .nb-tx .dt { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; }
.u-web-nav-before .nb-h { font-size: 16px; line-height: 24px; font-weight: 600; color: #2b3037; }
.u-web-nav-before .nb-lk { font-size: 14px; line-height: 24px; color: #5b9bff; }
.u-web-nav-before .nb-ln { height: 1px; background: #eceef1; }
.u-web-nav-before .nb-tg { width: 29px; height: 25px; border-radius: 4px; color: rgba(255,255,255,.85); font-size: 13px; line-height: 25px; text-align: center; }
.u-web-nav-before .nb-st5 { display: flex; align-items: center; height: 16px; }
.u-web-nav-before .nb-st5 em { margin-left: 5px; font-style: normal; font-size: 13px; color: #c3c6cc; }
.u-web-nav-before .nb-pi { display: block; }
.u-web-nav-before .nb-pn { left: 0; top: 0; width: 1500px; height: 381px; background: #fff; box-shadow: 0 8px 24px rgba(40, 52, 84, .14); }
.u-web-nav-before .nb-pn::after { content: ""; position: absolute; left: 0; right: 0; top: 72px; height: 1px; background: #f0f1f3; }
.u-web-nav-before .nb-lg { left: 34px; top: 28px; }
.u-web-nav-before .nb-t1 { top: 28px; font-size: 17.5px; line-height: 24px; font-weight: 500; color: #2a2f36; white-space: nowrap; }
.u-web-nav-before .nb-t1.dot { color: #8d9198; }
.u-web-nav-before .nb-t1.n { font-size: 16px; font-weight: 400; color: #3a3f46; }
.u-web-nav-before .nb-vs { top: 31px; width: 1px; height: 20px; background: #e6e7ea; }
.u-web-nav-before .nb-ho { left: 236px; top: 30px; }
.u-web-nav-before .nb-pd { left: 309px; top: 19px; width: 92px; height: 41px; display: flex; align-items: center; gap: 8px; padding-left: 8px; border-radius: 8px; background: #f1f2f4; }
.u-web-nav-before .nb-pd b { font-size: 21px; line-height: 28px; font-weight: 600; color: #1c2026; }
.u-web-nav-before .nb-bx { top: 28px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; background: #e8f0fd; }
.u-web-nav-before .nb-cv { top: 36px; }
.u-web-nav-before .nb-av { top: 28px; width: 25px; height: 24px; display: grid; place-items: center; border-radius: 4px; background: #e6e7eb; overflow: hidden; }
.u-web-nav-before .nb-cd { width: 231px; padding-top: 14px; border-radius: 6px; background: #f3f6f9; text-align: center; }
.u-web-nav-before .nb-cd .g { display: flex; justify-content: center; align-items: center; height: 30px; }
.u-web-nav-before .nb-cd .g svg { overflow: visible; }
.u-web-nav-before .nb-cd .g path, .u-web-nav-before .nb-cd .g rect, .u-web-nav-before .nb-cd .g circle { fill: none; }
.u-web-nav-before .nb-cd .g .s { stroke: #1f66e5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u-web-nav-before .nb-cd .g .f { fill: #d3e3fc; stroke-width: 0; }
.u-web-nav-before .nb-cd .g .sf { fill: #d3e3fc; stroke: #1f66e5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u-web-nav-before .nb-cd b { display: block; margin-top: 3px; font-size: 14px; line-height: 22px; font-weight: 600; color: #20242a; }
.u-web-nav-before .nb-cd em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 18px; color: #a9aeb5; }
.u-web-nav-before .nb-cd.sel { background: #0d62ee; box-shadow: 0 8px 18px rgba(13, 98, 238, .32); }
.u-web-nav-before .nb-cd.sel b { color: #fff; }
.u-web-nav-before .nb-cd.sel em { color: rgba(255, 255, 255, .5); }
.u-web-nav-before .nb-cd.sel .g .s { stroke: #fff; }
.u-web-nav-before .nb-cu { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.u-web-nav-before .nb-an { left: 290px; top: 0; }
.u-web-nav-before .nb-bub { left: 620px; top: 470px; width: 900px; height: 67px; display: flex; align-items: center; gap: 12px; padding-left: 36px; border-radius: 34px 0 0 34px; background: linear-gradient(90deg, #7385b9 0%, #5967a0 45%, #3b4776 100%); box-shadow: 0 4px 14px rgba(40, 52, 100, .18); opacity: .96; }
.u-web-nav-before .nb-bub > * { position: static; }
.u-web-nav-before .nb-bub span { font-size: 30px; line-height: 40px; font-weight: 600; letter-spacing: 1.6px; color: #fff; white-space: nowrap; }

.u-web-nav-before .nb-an, .u-web-nav-before .nb-cu, .u-web-nav-before .nb-bub, .u-web-nav-before .nb-frame { display: none; }


.u-web-nav-after { background: #fff; --pf-sub-w: 138px; }
.u-web-nav-after .tabs-r { display: flex; gap: 8px; margin: 13px 0 0 auto; }
.u-web-nav-after .pf-tabs { padding-right: 20px; }
.u-web-nav-after .filters { margin-top: 26px; padding-right: 20px; }
.u-web-nav-after .pf-tbl { width: 1202px; margin: 14px 0 0 24px; }
.u-web-nav-after .pf-tbl .c0 { padding-left: 12px; padding-right: 0; }
.u-web-nav-after .pf-tbl th.c9 { padding-right: 0; text-align: right; }
.u-web-nav-after .quick td { color: var(--pf-text2); }
.u-web-nav-after .ttl { display: flex; align-items: center; gap: 7px; }
.u-web-nav-after .ttl .pf-i12 { margin-left: -2px; margin-right: 4px; }
.u-web-nav-after .pf-tag-line { height: 20px; }
.u-web-nav-after .pager { margin-top: 20px; padding-right: 20px; }
.u-web-nav-after .pager .pf-pg { margin-left: auto; }
.u-web-nav-after .jump { margin: 0 -2px 0 4px; }
.u-web-nav-after .jump-in { width: 63px; border-radius: 4px 0 0 4px; }
.u-web-nav-after .jump-tot { width: 70px; margin-left: -9px; border-radius: 0 4px 4px 0; background: var(--pf-bg); }
.u-web-nav-after .pf-no { color: var(--pf-text); }


.u-web-nav-diagram { background: #fff; color: #2b3350; }
.u-web-nav-diagram .nd-st { position: absolute; left: 0; top: 0; width: 1084px; height: 1020px; transform: scale(.64); transform-origin: 0 0; }
.u-web-nav-diagram .nd-st > * { position: absolute; }
.u-web-nav-diagram .nd-st i { position: absolute; display: block; }

.u-web-nav-diagram .nd-old { left: 5px; top: 15px; width: 426px; height: 259px; }
.u-web-nav-diagram .nd-ot, .u-web-nav-diagram .nd-os, .u-web-nav-diagram .nd-om { position: absolute; background: #e8ebf3; }
.u-web-nav-diagram .nd-ot { left: 0; top: 0; width: 426px; height: 24px; border-radius: 6px 6px 2px 2px; }
.u-web-nav-diagram .nd-ot i { top: 6px; height: 11px; border-radius: 3px; background: #f4f7fd; }
.u-web-nav-diagram .nd-os { left: 0; top: 29px; width: 57px; height: 230px; border-radius: 2px 2px 2px 6px; }
.u-web-nav-diagram .nd-os i { left: 6px; width: 45px; height: 11px; border-radius: 3px; background: #f4f7fd; margin-top: -44px; }
.u-web-nav-diagram .nd-om { left: 64px; top: 29px; width: 362px; height: 230px; border-radius: 2px 2px 6px 2px; background: #e7ebf4; }

.u-web-nav-diagram .nd-new { left: 641px; top: 15px; width: 427px; height: 259px; overflow: hidden; border-radius: 6px; background: #dfeafd; }
.u-web-nav-diagram .nd-nt { position: absolute; left: 0; top: 0; right: 0; height: 24px; background: #b8d0fc; }
.u-web-nav-diagram .nd-ns { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: #b9d0fb; }
.u-web-nav-diagram .nd-nt { z-index: 1; }
.u-web-nav-diagram .nd-nsq i { left: 7px; width: 10px; height: 10px; border-radius: 2px; background: #e3ecfb; margin-top: -15px; }
.u-web-nav-diagram .nd-npl i { left: 30px; width: 38px; height: 10px; border-radius: 2px; background: #eef4ff; margin-top: -15px; }
.u-web-nav-diagram .nd-lines { left: 0; top: 0; }
.u-web-nav-diagram .nd-lb { top: 296px; width: 100px; margin-left: -50px; text-align: center; font: 900 24px/30px var(--ui-num); letter-spacing: 1.5px; -webkit-text-stroke: .6px #1b2347; color: #1b2347; }

.u-web-nav-diagram .nd-logo { left: 80px; top: 406px; width: 154px; height: 60px; border-radius: 12px 0 0 0; background: #e6eaf2; display: grid; place-items: center; }
.u-web-nav-diagram .nd-logo b { font: 900 30px/36px var(--ui-num); letter-spacing: 1.5px; -webkit-text-stroke: 1.4px #384167; color: #384167; }
.u-web-nav-diagram .nd-top { left: 234px; top: 406px; width: 840px; height: 60px; border-radius: 0 12px 0 0; background: #d5e4f8; display: grid; place-items: center; font-size: 22px; letter-spacing: .5px; }
.u-web-nav-diagram .nd-menu { left: 80px; top: 466px; width: 154px; height: 544px; border-radius: 0 0 0 12px; background: #d7d9ef; overflow: hidden; }
.u-web-nav-diagram .nd-m1 { position: absolute; left: 0; top: 0; bottom: 0; width: 58px; background: #dcddf2; }
.u-web-nav-diagram .nd-m1 i { left: 9px; width: 41px; height: 41px; border-radius: 7px; background: #e6e8fc; margin-top: -466px; }
.u-web-nav-diagram .nd-m2 { position: absolute; left: 58px; top: 0; right: 0; bottom: 0; background: #d6d9ef; }
.u-web-nav-diagram .nd-m2 i { left: 9px; width: 82px; height: 19px; border-radius: 5px; background: #e4e6fa; margin-top: -466px; }
.u-web-nav-diagram .nd-menu > span { position: absolute; left: 0; right: 0; top: 196px; text-align: center; font-size: 22px; line-height: 30px; }
.u-web-nav-diagram .nd-cont { left: 234px; top: 466px; width: 840px; height: 544px; border-radius: 0 0 12px 0; background: #f4e1d2; }
.u-web-nav-diagram .nd-cont > span { position: absolute; left: 301px; top: 256px; width: 128px; height: 34px; text-align: center; font-size: 22px; line-height: 34px; background: #f4e1d2; }
.u-web-nav-diagram .nd-bd { left: 0; top: 0; pointer-events: none; }
.u-web-nav-diagram .nd-vt { left: 8px; top: 440px; width: 24px; height: 560px; }
.u-web-nav-diagram .nd-vt i { left: 0; width: 24px; height: 34px; text-align: center; font-style: normal; font-size: 22px; line-height: 34px; color: #3a4158; margin-top: -440px; }
.u-web-nav-diagram .nd-ar { left: 36px; top: 402px; }


.u-web-nav-collapse { background: #0058ff; --pf-nav-w: 64px; --pf-sub-w: 132px; }
.u-web-nav-collapse .nc-p { position: absolute; top: 4px; height: 845px; display: flex; overflow: hidden; border-radius: 8px; background: #fdfdfd; }
.u-web-nav-collapse .nc-a { left: 4px; width: 196px; }
.u-web-nav-collapse .nc-b { left: 252px; width: 128px; }
.u-web-nav-collapse .pf-nav { gap: 4px; height: calc(100% + 2px); margin-top: -2px; padding: 0 0 19px; background: linear-gradient(180deg, #f8f8fd, #fcfcfe 60%); }
.u-web-nav-collapse .pf-nav-i { gap: 5px; color: #20242a; }
.u-web-nav-collapse .pf-nav-i.on { background: transparent; box-shadow: none; }
.u-web-nav-collapse .pf-nav-i svg { display: block; width: 23px; height: 23px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.u-web-nav-collapse .pf-nav-i svg .k { stroke: #1b1f26; stroke-width: 1.95; fill: none; }
.u-web-nav-collapse .pf-nav-i svg .a { stroke: #1a5fe6; stroke-width: 2; fill: none; }
.u-web-nav-collapse .pf-nav-i svg .af { stroke: none; fill: #1a5fe6; }
.u-web-nav-collapse .pf-nav-i svg .af2 { stroke: none; fill: #dbe7ff; }
.u-web-nav-collapse .pf-nav-i.on svg .k { stroke: #1a5fe6; }
.u-web-nav-collapse .pf-nav-b { gap: 21px; }
.u-web-nav-collapse .pf-sub { padding: 6px 8px 0; background: #fdfdfd; border-left: 1px solid #e8e9ed; border-right: 0; }
.u-web-nav-collapse .pf-sub-t:not(:first-child) { margin-top: 16px; }
.u-web-nav-collapse .pf-sub-sep { margin: 8px 8px 10px; background: #e6e7ea; }
.u-web-nav-collapse .pf-sub-i { gap: 6px; padding: 0 9px; color: #26292e; }
.u-web-nav-collapse .pf-sub-i .pf-i { width: 18px; height: 18px; color: #75787c; }
.u-web-nav-collapse .pf-sub-i.on .pf-i { color: var(--pf-blue); }
.u-web-nav-collapse .nc-c { --pf-sub-w: 64px; width: 64px; padding: 13px 0 0; align-items: center; }
.u-web-nav-collapse .nc-c .pf-sub-i { justify-content: center; width: 48px; height: 34px; margin-bottom: 6px; padding: 0; }
.u-web-nav-collapse .nc-c .pf-sub-sep { width: 32px; margin: 7px 0 13px; }

.u-web-nav-collapse .ncs-collab { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4.2'/><circle cx='12' cy='12' r='8.4' stroke-dasharray='11.8 5.8' transform='rotate(-50 12 12)'/><circle cx='10.4' cy='20.2' r='.7'/><circle cx='5.6' cy='6.6' r='.7'/><circle cx='19.8' cy='9' r='.7'/></svg>"); }
.u-web-nav-collapse .ncs-overview { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7.5V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v1.5M20 16.5V18a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-1.5'/><path d='M9 16v-3.4M12 16V8.6M15 16v-5.4'/></svg>"); }
.u-web-nav-collapse .ncs-board { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><rect x='3.8' y='4' width='16.4' height='16' rx='1.6'/><path d='M3.8 8.4h16.4M9.4 8.4V20M12.8 12.4h4M12.8 15.6h4'/></svg>"); }
.u-web-nav-collapse .ncs-grid { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='6.4' height='6.4' rx='1.4'/><circle cx='17' cy='7.2' r='3.3'/><rect x='4' y='13.6' width='6.4' height='6.4' rx='1.4'/><rect x='13.6' y='13.6' width='6.4' height='6.4' rx='1.4'/></svg>"); }
.u-web-nav-collapse .ncs-repo { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10.6L12 4l8 6.6V20z'/><path d='M10 12.4l-1.8 1.7 1.8 1.7M14 12.4l1.8 1.7-1.8 1.7M12.8 12l-1.6 4.2'/></svg>"); }
.u-web-nav-collapse .ncs-pipeline { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.8' cy='5.8' r='1.9'/><path d='M7.7 5.8h9a3 3 0 0 1 0 6H8a3 3 0 0 0 0 6h8.4'/><circle cx='18.2' cy='17.8' r='1.9'/></svg>"); }
.u-web-nav-collapse .ncs-deploy { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5V15'/><path d='M9.8 9.4l3 2.6-3 2.6'/></svg>"); }
.u-web-nav-collapse .ncs-artifact { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4l7.8 4v9.2l-7.8 4-7.8-4V7.4z'/><path d='M4.4 7.6L12 11.6l7.6-4M12 11.6v8.8M8 5.5l7.8 4.1v2.4'/></svg>"); }
.u-web-nav-collapse .ncs-resource { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h5M4 5v14M4 12h5M4 19h5'/><circle cx='15.8' cy='12.5' r='2.2'/><path d='M15.8 6.6v1.8M15.8 16.6v1.8M10.9 12.5h1.8M18.9 12.5h1.8M12.3 9l1.2 1.2M18.1 14.8l1.2 1.2M12.3 16l1.2-1.2M18.1 10.2l1.2-1.2'/></svg>"); }
.u-web-nav-collapse .ncs-plan { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M5.4 15.6V5.6a1.6 1.6 0 0 1 1.6-1.6h10a1.6 1.6 0 0 1 1.6 1.6v10M3.4 15.6h17.2v3H3.4z'/><path d='M8.2 8l1 1 2-2M13.2 8h2.6M8.4 11.4l2.2 2.2M10.6 11.4l-2.2 2.2M13.2 12.6h2.6'/></svg>"); }
.u-web-nav-collapse .ncs-case { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='5.6' width='14' height='14.4' rx='1.8'/><path d='M9.2 5.6V4.2h5.6v1.4'/><path d='M8.2 10l1 1 2-2M13 10h3M8.4 14.6a1.2 1.2 0 1 0 2.4 0 1.2 1.2 0 0 0-2.4 0M13 14.6h3'/></svg>"); }
.u-web-nav-collapse .ncs-doc { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M5 20V4h9l4.2 4.2V11'/><path d='M14 4v4.2h4.2'/><path d='M7 11.4h4M9 11.4v3.4M15.6 11.6a2.1 2.1 0 1 0 0 3'/><path d='M16.6 16v2.4l-2.2 2.6h5l-2.2-2.6V16'/></svg>"); }
.u-web-nav-collapse .ncs-upload { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V4.6h16V9M4 12v3M20 12v3M4 19.4V20h2.6M17.4 20H20v-.6'/><path d='M12 19.6v-5.2M9.6 16.8l2.4-2.4 2.4 2.4'/><path d='M7.4 8.2h9.2'/></svg>"); }
.u-web-nav-collapse .ncs-report { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4h9.6a1.4 1.4 0 0 1 1.4 1.4V19H6z'/><path d='M17 8.4h2.4V20H8'/><path d='M8.6 8.4l1 1 2-2M8.6 13.4l1 1 2-2M13.2 9h1.8M13.2 14h1.8'/></svg>"); }
.u-web-nav-collapse .ncs-wiki { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14V4h16v8'/><path d='M7 8h5.4M7 11.4h3'/><path d='M9.6 20h7.8a3 3 0 0 0 .4-6 4.2 4.2 0 0 0-8 1.3A2.4 2.4 0 0 0 9.6 20z'/></svg>"); }
.u-web-nav-collapse .ncs-docs { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.2h6.2A1.8 1.8 0 0 1 12 7v12.8M20 5.2h-6.2A1.8 1.8 0 0 0 12 7'/><path d='M4 5.2V19.8h16V5.2'/><path d='M6.6 9.2h3M6.6 12.4h3M6.6 15.6h3M14.4 9.2h3M14.4 12.4h3M14.4 15.6h3'/></svg>"); }
.u-web-nav-collapse .ncs-settings { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.8 4.5v9L12 21l-7.8-4.5v-9z'/><circle cx='12' cy='12' r='3'/></svg>"); }


.u-web-nav-groups { background: #fff; }
.u-web-nav-groups .ng-st { position: absolute; left: 0; top: 0; width: 924px; height: 724px; transform: scale(.8); transform-origin: 0 0; }
.u-web-nav-groups .ng-p { position: absolute; top: 8px; height: 702px; overflow: hidden; border-radius: 8px; background: #e3e6ee; }
.u-web-nav-groups .ng-nv { position: absolute; left: 0; top: 0; bottom: 0; width: 52px; background: #eceff5; }
.u-web-nav-groups .ng-nv i { position: absolute; left: 11px; width: 30px; height: 32px; border-radius: 6px; background: #f5f8fc; }
.u-web-nav-groups .ng-sb { position: absolute; left: 52px; right: 0; top: 0; bottom: 0; background: #e2e5ee; }
.u-web-nav-groups .ng-sb i { position: absolute; left: 19px; width: 119px; height: 29px; border-radius: 7px; background: #f1f5f9; }
.u-web-nav-groups .ng-ar { position: absolute; left: 247px; top: 326px; }
.u-web-nav-groups .ng-b { position: absolute; left: 571px; width: 330px; }
.u-web-nav-groups .ng-b::before { content: ""; position: absolute; left: 8px; right: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--bg1), var(--bg0) 92%); }
.u-web-nav-groups .ng-br { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border: 1.7px solid var(--c); border-right: 0; border-radius: 5px 0 0 5px; }
.u-web-nav-groups .ng-b b { position: absolute; left: 54px; font-size: 30px; line-height: 44px; font-weight: 600; color: var(--c); letter-spacing: 1px; white-space: nowrap; }
.u-web-nav-groups .b1 { --c: #0b57e0; --bg1: rgba(40, 110, 250, .13); --bg0: rgba(40, 110, 250, 0); }
.u-web-nav-groups .b2 { --c: #5a32d8; --bg1: rgba(120, 70, 250, .12); --bg0: rgba(120, 70, 250, 0); }
.u-web-nav-groups .b3 { --c: #ee8226; --bg1: rgba(250, 140, 50, .13); --bg0: rgba(250, 140, 50, 0); }
.u-web-nav-groups .b4 { --c: #14794f; --bg1: rgba(20, 140, 100, .12); --bg0: rgba(20, 140, 100, 0); }


.u-web-workbench-before { background: #f4f8fc; overflow: hidden; }
.u-web-workbench-before .wb { position: absolute; left: 0; top: 0; width: 1800px; height: 1357px; transform: scale(.8); transform-origin: 0 0; color: #2c3036; line-height: 1.2; }
.u-web-workbench-before .gbg { position: absolute; inset: 0; background: radial-gradient(900px 600px at 1500px 1300px, #e3eefc, rgba(227,238,252,0)), radial-gradient(700px 400px at 1200px 80px, #f8fbfd, rgba(248,251,253,0)), linear-gradient(180deg, #f5f9fc, #eff5fc 55%, #ecf3fc); }
.u-web-workbench-before .t { position: absolute; white-space: nowrap; transform: translateY(-50%); }
.u-web-workbench-before .b { position: absolute; display: block; box-sizing: border-box; font-style: normal; }
.u-web-workbench-before .ic { position: absolute; display: block; }
.u-web-workbench-before .m5 { font-size: 6px; }
.u-web-workbench-before .m6 { font-size: 7px; }
.u-web-workbench-before .m7 { font-size: 7.4px; }
.u-web-workbench-before .m8 { font-size: 8.4px; }
.u-web-workbench-before .m9 { font-size: 9.3px; }
.u-web-workbench-before .m10 { font-size: 10px; }
.u-web-workbench-before .m11 { font-size: 11px; }
.u-web-workbench-before .m13 { font-size: 13px; }
.u-web-workbench-before .m15 { font-size: 15px; }
.u-web-workbench-before .bd { font-weight: 600; }
.u-web-workbench-before .nm { font-family: var(--ui-num); }
.u-web-workbench-before .k { color: #2c3036; }
.u-web-workbench-before .g { color: #a4a8ad; }
.u-web-workbench-before .g2 { color: #b9bcc1; }
.u-web-workbench-before .g3 { color: #c6c9ce; }
.u-web-workbench-before .bl { color: #1d6fe0; }
.u-web-workbench-before .rr { color: #e0505a; }
.u-web-workbench-before .mono { font-family: Menlo, monospace; font-size: 8px; }
.u-web-workbench-before .d1 { position: absolute; left: 0; top: 0; width: 961px; height: 1357px; background: #fff; overflow: hidden; border-radius: 0 43px 43px 0; }
.u-web-workbench-before .d1f { position: absolute; left: -30px; top: 2px; width: 991px; height: 1355px; border: 7px solid #070d22; border-radius: 0 43px 43px 0; }
.u-web-workbench-before .d2 { position: absolute; left: 826px; top: 248px; width: 969px; height: 862px; background: #fff; overflow: hidden; border-radius: 30px; box-shadow: 0 10px 40px rgba(20, 40, 90, .2); }
.u-web-workbench-before .d2f { position: absolute; left: 826px; top: 248px; width: 969px; height: 862px; border: 7px solid #040f20; border-radius: 30px; }
.u-web-workbench-before .bar { background: #fff; border-bottom: 1px solid #eceef1; }
.u-web-workbench-before .bar2 { background: #fff; }
.u-web-workbench-before .vline { background: #f0f1f3; }
.u-web-workbench-before .sep { background: #e8eaed; }
.u-web-workbench-before .cd, .u-web-workbench-before .cd2 { background: #fff; border: 1px solid #eef0f3; border-radius: 4px; box-shadow: 0 1px 5px rgba(30, 60, 110, .045); }
.u-web-workbench-before .seg { background: #f1f3f6; border-radius: 3px; }
.u-web-workbench-before .seg-on { background: #fff; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, .08); }
.u-web-workbench-before .stt { border-radius: 3px; font-size: 8.5px; line-height: 18px; text-align: center; }
.u-web-workbench-before .tb { background: #e9f1fc; color: #3d7ee6; }
.u-web-workbench-before .tg, .u-web-workbench-before .tg2 { background: #e6f6ee; color: #3bb483; }
.u-web-workbench-before .tr { background: #fdecee; color: #e0505a; }
.u-web-workbench-before .pr { border-radius: 3px; color: #fff; font-size: 8.5px; line-height: 19px; text-align: center; }
.u-web-workbench-before .pr.r { background: #e0505a; }
.u-web-workbench-before .pr.o { background: #ea7d2b; }
.u-web-workbench-before .pr.g { background: #1fb27c; }
.u-web-workbench-before .pg { border: 1px solid #e3e5e8; border-radius: 3px; background: #fff; font-size: 8.5px; line-height: 15px; text-align: center; color: #555a5f; font-family: var(--ui-num); }
.u-web-workbench-before .pg.on { background: #1066e4; border-color: #1066e4; color: #fff; }
.u-web-workbench-before .pj { background: #e8f0fc; color: #2f74e6; border-radius: 3px; font-size: 11px; line-height: 22px; text-align: center; }
.u-web-workbench-before .pj2 { background: #e8f0fc; color: #2f74e6; border-radius: 2px; font-size: 8px; line-height: 16px; text-align: center; }
.u-web-workbench-before .av2 { background: #e6e9ee; border-radius: 3px; overflow: hidden; }
.u-web-workbench-before .av2::before { content: ""; position: absolute; left: 50%; top: 22%; width: 38%; height: 38%; margin-left: -19%; border-radius: 50%; background: #bfc5cd; }
.u-web-workbench-before .av2::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 28%; border-radius: 50% 50% 0 0; background: #bfc5cd; }
.u-web-workbench-before .stat { background: #f4f7fa; border-radius: 3px; }
.u-web-workbench-before .ban { background: linear-gradient(135deg, #c3d1ec, #e5ecf8 70%); border-radius: 3px; overflow: hidden; }
.u-web-workbench-before .sh { background: linear-gradient(#3b86f0, #1f62d8); clip-path: polygon(50% 0, 100% 16%, 100% 58%, 50% 100%, 0 58%, 0 16%); }
.u-web-workbench-before .co { background: #e7eefb; border-radius: 3px; }
.u-web-workbench-before .co::before { content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 8px; background: #8fb0ea; }
.u-web-workbench-before .co::after { content: ""; position: absolute; left: 8px; top: 6px; width: 4px; height: 5px; background: #a9c3ee; }
.u-web-workbench-before .av { background: #dfe6f2; border-radius: 3px; overflow: hidden; }
.u-web-workbench-before .av::before { content: ""; position: absolute; left: 5px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: #9aaed0; }
.u-web-workbench-before .av::after { content: ""; position: absolute; left: 3px; bottom: 0; width: 10px; height: 5px; border-radius: 5px 5px 0 0; background: #9aaed0; }
.u-web-workbench-before .cv { position: absolute; width: 5px; height: 5px; border-right: 1px solid #9a9ea3; border-bottom: 1px solid #9a9ea3; transform: rotate(45deg); }
.u-web-workbench-before .ft { background: #f8fafd; }
.u-web-workbench-before .bub { position: absolute; left: 1043px; top: 147px; width: 640px; height: 52px; border-radius: 26px; background: linear-gradient(90deg, #8293c6 0%, #55608a 52%, #3b4670 100%); box-shadow: 0 6px 18px rgba(50, 65, 120, .12); }
.u-web-workbench-before .bub-f { position: absolute; left: 27px; top: 11px; }
.u-web-workbench-before .bub-f svg { display: block; }
.u-web-workbench-before .bub-t { position: absolute; left: 65px; top: 0; line-height: 50px; font-size: 23.2px; font-weight: 500; color: #fff; white-space: nowrap; letter-spacing: 0; }
.u-web-workbench-before .bub-tail { position: absolute; left: 77px; top: 50px; width: 26px; height: 16px; background: #7e8dc0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.u-web-workbench-before .k.m11:not(.bd) { font-weight: 500; }


.u-web-workbench-after { background: #292929; --pf-nav-w: 64px; --pf-top-h: 56px; }
.u-web-workbench-after .pf-shell { inset: 16px 18px 20px 16px; border-radius: 2px 0 10px 10px; }
.u-web-workbench-after .pf-nav { gap: 5px; padding-top: 0; }
.u-web-workbench-after .pf-nav-i { width: 56px; }
.u-web-workbench-after .pf-main { background: #fff; overflow: hidden; }
.u-web-workbench-after .h-t { position: absolute; left: 39px; font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; }
.u-web-workbench-after .h-all { position: absolute; right: 482px; display: flex; align-items: center; gap: 2px; line-height: 24px; color: var(--pf-text2); }
.u-web-workbench-after .pj-i { position: absolute; display: flex; align-items: center; gap: 8px; height: 24px; white-space: nowrap; }
.u-web-workbench-after .pj-t { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: #eaf2fd; color: #3578e0; font-size: 14px; }
.u-web-workbench-after .h-vl { position: absolute; left: 132px; top: 270px; width: 1px; height: 12px; background: #dcdfe3; }
.u-web-workbench-after .wi-tabs { position: absolute; left: 148px; top: 263px; width: 240px; height: 29px; }
.u-web-workbench-after .wi-tab { position: absolute; left: 0; top: 0; height: 29px; display: flex; align-items: flex-start; gap: 6px; padding-top: 2px; line-height: 24px; color: #7a7e82; white-space: nowrap; }
.u-web-workbench-after .wi-tab .pf-cnt { margin-top: 3px; margin-left: 0; height: 18px; min-width: 18px; font-size: 12px; font-family: var(--ui-num); }
.u-web-workbench-after .wi-tab.on { color: #2f6fe0; width: 54px; }
.u-web-workbench-after .wi-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: #1f66e8; }
.u-web-workbench-after .wi-tab .pf-cnt-n { background: #eef0f2; color: #a2a3a4; }
.u-web-workbench-after .wi-s { position: absolute; right: 482px; top: 264px; display: flex; align-items: center; gap: 6px; line-height: 24px; color: var(--pf-text2); }
.u-web-workbench-after .wi-s .pf-i { color: #a2a3a4; }
.u-web-workbench-after .wi-tbl { position: absolute; left: 39px; top: 303px; width: 845px; }
.u-web-workbench-after .wi-tbl th { border-top: 0; border-bottom-color: #ebedf0; color: #a2a3a4; padding-left: 10px; }
.u-web-workbench-after .wi-tbl td { border-bottom: 0; height: 38.5px; color: #34383c; padding-left: 10px; }
.u-web-workbench-after .wi-tbl tbody tr:hover { background: none; }
.u-web-workbench-after .wi-tbl th:first-child, .u-web-workbench-after .wi-tbl td:first-child { padding-left: 0; }
.u-web-workbench-after .wi-tbl th:last-child, .u-web-workbench-after .wi-tbl td:last-child { padding-right: 0; }
.u-web-workbench-after .ttl { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.u-web-workbench-after .wi-tbl td:first-child .ttl { gap: 7px; }
.u-web-workbench-after .wi-tbl .pf-tag { background-color: #eef4fe; }
.u-web-workbench-after .wi-tbl .pf-tag-r { background-color: #fdeef0; }
.u-web-workbench-after .wi-tbl .pf-tag-g { background-color: #e9f7f1; }
.u-web-workbench-after .wi-tbl .pf-tag-line { padding: 0 3px; height: 21px; background: #fff; }
.u-web-workbench-after .wi-tbl .pf-tag-line.pf-tag-n { color: #9a9da0; border-color: #d3d5d8; }
.u-web-workbench-after .gr { position: absolute; left: 918px; top: 24px; width: 436px; height: 204px; border-radius: 10px; background: linear-gradient(100deg, #fcfdff 0%, #f3f7fe 62%, #f7f9ff 100%); }
.u-web-workbench-after .gr-t { position: absolute; left: 14px; top: 18px; font-size: 16px; line-height: 24px; font-weight: 500; }
.u-web-workbench-after .gr-d { z-index: 2; position: absolute; left: 14px; top: 46px; font-size: 13px; line-height: 21.6px; color: #a2a3a4; white-space: nowrap; }
.u-web-workbench-after .gr-art { position: absolute; left: 198px; top: 4px; }
.u-web-workbench-after .gr-ls { position: absolute; left: 6px; top: 108px; width: 424px; height: 88px; padding: 10px 8px; border-radius: 8px; background: #fff; display: grid; grid-template-columns: 194px 195px; gap: 8px 9px; align-content: start; }
.u-web-workbench-after .gr-ls > span { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 3px; background: #eaf2fd; color: #2f6fd0; white-space: nowrap; }
.u-web-workbench-after .it-f { position: absolute; left: 1034px; top: 264px; display: flex; align-items: center; gap: 6px; line-height: 24px; color: var(--pf-text2); }
.u-web-workbench-after .it-f .vl { width: 1px; height: 12px; margin-right: 4px; background: #dcdfe3; }
.u-web-workbench-after .its { position: absolute; left: 932px; top: 302px; width: 398px; }
.u-web-workbench-after .it { position: absolute; left: 0; width: 398px; height: 69px; }
.u-web-workbench-after .it .pf-tile { position: absolute; left: 0; top: 18px; background: #f4f5f7; color: #a4a8ad; }
.u-web-workbench-after .it-m { position: absolute; left: 40px; top: 11px; width: 280px; }
.u-web-workbench-after .it-t { display: flex; align-items: center; height: 22px; line-height: 22px; white-space: nowrap; color: #34383c; }
.u-web-workbench-after .it-t .cur { margin-left: 6px; padding: 0 6px; height: 20px; line-height: 20px; border-radius: 4px; background: #eaf2ff; color: var(--pf-blue); font-size: 12px; }
.u-web-workbench-after .it-s { display: flex; align-items: center; margin-top: 6px; height: 18px; line-height: 18px; font-size: 12px; color: #a2a3a4; white-space: nowrap; }
.u-web-workbench-after .it-s .sp { width: 1px; height: 10px; margin: 0 7px; background: #dcdfe3; }
.u-web-workbench-after .it-p { position: absolute; left: 323px; top: 32px; width: 40px; height: 5px; background: #e9ebee; }
.u-web-workbench-after .it-p > i { background: #1f66e8; }
.u-web-workbench-after .it-c { position: absolute; left: 368px; top: 24px; width: 30px; font-size: 13px; line-height: 20px; color: #a2a3a4; text-align: right; }
.u-web-workbench-after .arrows { position: absolute; left: 0; top: 0; pointer-events: none; }
.u-web-workbench-after .ttl, .u-web-workbench-after .wi-tbl .pf-tag { vertical-align: middle; }
.u-web-workbench-after .wi-tbl td { vertical-align: middle; }
.u-web-workbench-after .pf-user { font-size: 16px; gap: 6px; }
.u-web-workbench-after .pf-ava { width: 28px; height: 28px; }
.u-web-workbench-after .pf-ico-btn { width: 30px; height: 30px; background: #fff; }
.u-web-workbench-after .pf-top-r { gap: 14px; }
.u-web-workbench-after .pf-logo { gap: 10px; }
.u-web-workbench-after .pf-logo-mark { width: 34px; height: 34px; background-size: 30px; }
.u-web-workbench-after .pf-logo-name { font-size: 18px; letter-spacing: .3px; }
.u-web-workbench-after .pf-top { padding-left: 14px; background: linear-gradient(90deg, #eef4ff, #e6ecfa 55%, #e8ecf8); }
.u-web-workbench-after .ic-sol { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.500' y='5' width='17' height='14' rx='2'/><path d='M7.500 9.500h5M7.500 12.500h9M7.500 15.500h3'/></svg>"); }
.u-web-workbench-after .ic-fb { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.500A2 2 0 0 1 6 4.500h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7l-4 3.500v-3.500H6a2 2 0 0 1-2-2z'/><path d='M8.500 10.500h.01M12 10.500h.01M15.500 10.500h.01'/></svg>"); }
.u-web-workbench-after .ic-log { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4.500' width='14' height='16.500' rx='2'/><path d='M9 4.500V3h6v1.500M9 10.500h.01M9 14h.01M9 17.500h.01M12.500 10.500h3M12.500 14h3'/></svg>"); }


.u-web-workbench-diagram { background: #fff; }
.u-web-workbench-diagram .dg { position: absolute; left: 0; top: 0; }


.u-web-denoise-before { background: #060f20; border-radius: 20px 0 0 0; overflow: hidden; }
.u-web-denoise-before .w { position: absolute; left: 0; top: 0; width: 1304px; height: 808px; transform: scale(.9); transform-origin: 0 0; font-size: 14px; line-height: 1.4; color: #2b2f33; }
.u-web-denoise-before .w > * { position: absolute; }
.u-web-denoise-before .w .r > *, .u-web-denoise-before .w .th > *, .u-web-denoise-before .w .qk > *, .u-web-denoise-before .w .op-r > *, .u-web-denoise-before .w .pgr > * { position: absolute; }
.u-web-denoise-before .scr { left: 8px; top: 7px; right: 0; bottom: 0; background: #fdfdfd; border-radius: 20px 0 0 0; }
.u-web-denoise-before .top { left: 8px; top: 7px; right: 0; height: 61px; border-bottom: 1px solid #e5e5e5; background: #fff; border-radius: 20px 0 0 0; }
.u-web-denoise-before .top > * { position: absolute; }
.u-web-denoise-before .top .lg { left: 22px; top: 18px; }
.u-web-denoise-before .top .t1 { top: 15px; font-size: 16px; line-height: 28px; font-weight: 500; color: #23272b; white-space: nowrap; margin-left: -8px; }
.u-web-denoise-before .top .dot { left: 104px; top: 29px; width: 3px; height: 3px; border-radius: 50%; background: #9a9ea3; }
.u-web-denoise-before .top .sep { top: 22px; width: 1px; height: 22px; background: #e6e8eb; margin-left: -8px; }
.u-web-denoise-before .top .hm { left: 248px; top: 19px; }
.u-web-denoise-before .top .gd { left: 337px; top: 21px; }
.u-web-denoise-before .top .co { left: 968px; top: 20px; width: 24px; height: 24px; border-radius: 5px; background: #e7eefb; }
.u-web-denoise-before .top .co::before { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 12px; border-radius: 1px; background: #8fb0ea; }
.u-web-denoise-before .top .co::after { content: ""; position: absolute; left: 14px; top: 10px; width: 5px; height: 8px; border-radius: 1px; background: #a9c3ee; }
.u-web-denoise-before .top .t2 { top: 17px; font-size: 15px; line-height: 26px; color: #2b2f33; white-space: nowrap; margin-left: -8px; }
.u-web-denoise-before .top .cv { left: 1195px; top: 24px; width: 12px; height: 12px; color: #9a9ea3; margin-left: -8px; }
.u-web-denoise-before .top .av { left: 1250px; top: 20px; width: 24px; height: 24px; border-radius: 5px; background: #dfe8f8; }
.u-web-denoise-before .top .av::before { content: ""; position: absolute; left: 8px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #8fb0ea; }
.u-web-denoise-before .top .av::after { content: ""; position: absolute; left: 5px; top: 15px; width: 14px; height: 6px; border-radius: 6px 6px 0 0; background: #8fb0ea; }
.u-web-denoise-before .nv { left: 8px; top: 68px; width: 62px; bottom: 0; background: #ecf0f3; }
.u-web-denoise-before .nv > * { position: absolute; }
.u-web-denoise-before .nv-i { left: 18px; width: 26px; height: 26px; color: #6a6e73; }
.u-web-denoise-before .nv-i.on { color: #1066e4; }
.u-web-denoise-before .nv-s { left: 8px; top: 14px; width: 46px; height: 42px; border-radius: 6px; background: #d7e5f9; }
.u-web-denoise-before .tb { left: 70px; top: 120px; right: 0; height: 57px; background: #f3f6fa; }
.u-web-denoise-before .pj-t { left: 92px; top: 85px; width: 23px; height: 23px; border-radius: 4px; background: #1e69e4; color: #fff; font-size: 14px; line-height: 23px; text-align: center; }
.u-web-denoise-before .pj-n { left: 123px; top: 83px; font-size: 15.5px; line-height: 27px; font-weight: 500; color: #23272b; white-space: nowrap; }
.u-web-denoise-before .tab { top: 84px; font-size: 15px; line-height: 26px; color: #62676c; white-space: nowrap; }
.u-web-denoise-before .tab.on { color: #1066e4; }
.u-web-denoise-before .tab-l { left: 243px; top: 113px; width: 60px; height: 2px; background: #1066e4; }
.u-web-denoise-before .bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 30px; border: 1px solid #d5d7db; border-radius: 3px; background: #fff; font-size: 14px; color: #2b2f33; white-space: nowrap; }
.u-web-denoise-before .bt-p { border-color: #1066e4; background: #1066e4; color: #fff; }
.u-web-denoise-before .bt-d { color: #a9acb0; background: #f6f7f8; }
.u-web-denoise-before .bt .pf-i { color: inherit; }
.u-web-denoise-before .lb { top: 192px; font-size: 14px; line-height: 30px; color: #2b2f33; white-space: nowrap; }
.u-web-denoise-before .ip { display: flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid #d9dbdf; border-radius: 3px; background: #fdfdfd; font-size: 14px; color: #b1b4b8; }
.u-web-denoise-before .ip.sl { color: #2b2f33; justify-content: space-between; }
.u-web-denoise-before .ip .pf-i { color: #8d9196; }
.u-web-denoise-before .th { left: 70px; top: 238px; right: 0; height: 59px; border-bottom: 1px solid #e9e9e9; }
.u-web-denoise-before .h { top: 26px; font-size: 14px; line-height: 24px; color: #a2a5a9; white-space: nowrap; }
.u-web-denoise-before .th .ck { top: 27px; }
.u-web-denoise-before .th .ex { top: 27px; }
.u-web-denoise-before .ck { width: 15px; height: 15px; border: 1px solid #d6d8dc; border-radius: 3px; background: #fff; }
.u-web-denoise-before .ex { width: 15px; height: 15px; border: 1px solid #c3c6ca; border-radius: 2px; background: #fff; }
.u-web-denoise-before .ex::before, .u-web-denoise-before .ex::after { content: ""; position: absolute; left: 3px; top: 6.500px; width: 7px; height: 1px; background: #8d9196; }
.u-web-denoise-before .ex::after { left: 6.500px; top: 3px; width: 1px; height: 7px; }
.u-web-denoise-before .qk { left: 70px; top: 297px; right: 0; height: 44px; border-bottom: 1px solid #ececec; }
.u-web-denoise-before .qk span { top: 10px; font-size: 14px; line-height: 26px; color: #4c5055; }
.u-web-denoise-before .r { left: 70px; top: 341px; right: 0; height: 44px; border-bottom: 1px solid #ececec; }
.u-web-denoise-before .r .c { top: 11px; font-size: 13.7px; line-height: 26px; color: #2b2f33; white-space: nowrap; margin-left: -70px; }
.u-web-denoise-before .r > * { margin-left: -70px; }
.u-web-denoise-before .th > * { margin-left: -70px; }
.u-web-denoise-before .qk > * { margin-left: -70px; }
.u-web-denoise-before .r .ck { top: 16px; }
.u-web-denoise-before .r .ex { top: 16px; }
.u-web-denoise-before .ty { top: 13px; height: 23px; width: 38px; border-radius: 3px; background: #0066ea; color: #fff; font-size: 13px; line-height: 23px; text-align: center; }
.u-web-denoise-before .pr { top: 13px; width: 28px; height: 23px; border-radius: 3px; color: #fff; font-size: 13px; line-height: 23px; text-align: center; }
.u-web-denoise-before .pr-r { background: #e84a54; }
.u-web-denoise-before .pr-o { background: #ec7b24; }
.u-web-denoise-before .pr-n { background: #c7c7c7; }
.u-web-denoise-before .st { top: 13px; width: 50px; height: 23px; border: 1px solid; border-radius: 3px; background: #fff; font-size: 13px; line-height: 21px; text-align: center; }
.u-web-denoise-before .st-g { color: #2fb987; border-color: #5cc7a0; }
.u-web-denoise-before .st-b { color: #1b64d6; border-color: #3c7edb; }
.u-web-denoise-before .st-n { color: #a9acb0; border-color: #dcdee1; }
.u-web-denoise-before .op { left: 1183px; top: 238px; right: 0; bottom: 0; background: #fff; border-left: 4px solid #eeeeee; box-shadow: -3px 0 5px rgba(0,0,0,.04); }
.u-web-denoise-before .op > * { position: absolute; left: 0; right: 0; }
.u-web-denoise-before .op-h { top: 0; height: 59px; border-bottom: 1px solid #e9e9e9; padding-left: 18px; font-size: 14px; line-height: 74px; color: #a2a5a9; }
.u-web-denoise-before .op-r { height: 44px; border-bottom: 1px solid #ececec; margin-top: -238px; }
.u-web-denoise-before .op-r > span { position: absolute; top: 11px; font-size: 14px; line-height: 26px; color: #2f78e6; }
.u-web-denoise-before .op-r > span:nth-child(1) { left: 17px; }
.u-web-denoise-before .op-r > span:nth-child(2) { left: 74px; }
.u-web-denoise-before .pgr { left: 70px; top: 799px; right: 0; height: 40px; }
.u-web-denoise-before .pn { top: 0; width: 28px; height: 32px; border: 1px solid #dcdee2; border-radius: 3px; background: #fff; margin-left: -70px; }
.u-web-denoise-before .pn.on { border-color: #1066e4; background: #1066e4; }
.u-web-denoise-before .fl-l { left: 70px; top: 237px; right: 0; height: 1px; background: #ebebeb; }
.u-web-denoise-before .ic-lay { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.500' y='4' width='17' height='16' rx='2'/><path d='M10 4v16M10 11.500h10.500'/></svg>"); }


.u-web-denoise-after { background: #060f20; border-radius: 20px 0 0 0; --pf-nav-w: 64px; --pf-sub-w: 134px; --pf-top-h: 54px; }
.u-web-denoise-after .pf-shell { inset: 9px 0 0 7px; border-radius: 14px 0 0 0; }
.u-web-denoise-after .pf-top { padding-left: 14px; background: linear-gradient(90deg, #d8ecfd, #e9edf8 30%, #eaedf8); }
.u-web-denoise-after .pf-logo-mark { width: 34px; height: 34px; background-size: 30px; }
.u-web-denoise-after .pf-logo-name { font-size: 18px; }
.u-web-denoise-after .pf-proj { height: 34px; padding: 0 12px; }
.u-web-denoise-after .pf-nav { gap: 4px; }
.u-web-denoise-after .pf-main { border-top-left-radius: 8px; }
.u-web-denoise-after .pf-tabs { padding-right: 20px; }
.u-web-denoise-after .filters { margin-top: 26px; padding-right: 20px; }
.u-web-denoise-after .pf-tbl { width: 1202px; margin: 14px 0 0 24px; }
.u-web-denoise-after .pf-tbl .c0 { padding-left: 12px; padding-right: 0; }
.u-web-denoise-after .quick td { color: var(--pf-text2); }
.u-web-denoise-after .ttl { display: flex; align-items: center; gap: 7px; }
.u-web-denoise-after .ttl .pf-i12 { margin-left: -2px; margin-right: 4px; }
.u-web-denoise-after .ttl.chd { padding-left: 34px; }
.u-web-denoise-after .ttl .ty { color: #f19a3e; }
.u-web-denoise-after .pf-tag-line { height: 20px; }
.u-web-denoise-after .pf-no { color: var(--pf-text); }
.u-web-denoise-after .pf-sub-i { padding-left: 9px; }
.u-web-denoise-after .pf-sub-t { padding-left: 7px; }


.u-web-cards-before { background: #fafdff; border-radius: 10px; overflow: hidden; }
.u-web-cards-before .cb { position: absolute; inset: 0; }
.u-web-cards-before .up { position: absolute; left: 0; top: 0; right: 0; height: 308px; background: #eceef9; }
.u-web-cards-before .c1 { position: absolute; left: 125.600px; top: 39.200px; width: 356.800px; height: 220.800px; border: 1px solid #e3e7ec; border-radius: 6px; background: #fff; overflow: hidden; }
.u-web-cards-before .c1-img { position: absolute; left: 0; top: 0; right: 0; height: 155px; background: #f2f7fa; display: grid; place-items: center; padding-bottom: 2px; }
.u-web-cards-before .c1-t { position: absolute; left: 20px; top: 178px; font-size: 18px; line-height: 26px; color: #23272b; white-space: nowrap; }
.u-web-cards-before .c1-x { position: absolute; right: 16px; top: 180px; }
.u-web-cards-before .dv { position: absolute; left: 277px; top: 286px; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 4px #fff; }
.u-web-cards-before .dv svg { display: block; }
.u-web-cards-before .c2 { position: absolute; left: 48.800px; top: 394.400px; width: 509.600px; height: 147.200px; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; overflow: hidden; box-shadow: 0 1px 4px rgba(31, 56, 110, .04); }
.u-web-cards-before .c2-h { display: flex; align-items: center; gap: 14px; height: 76.800px; padding: 0 0 0 19px; background: #f1f4f8; }
.u-web-cards-before .c2-i { display: grid; place-items: center; width: 38.400px; height: 38.400px; border-radius: 5px; background: #cde2f9; color: #0b63e5; font-size: 21px; font-weight: 500; }
.u-web-cards-before .c2-t { font-size: 22px; line-height: 30px; font-weight: 700; color: #14181c; white-space: nowrap; }
.u-web-cards-before .c2-f { display: flex; align-items: center; height: 69px; padding: 0 20px 0 19px; color: #5d6165; }
.u-web-cards-before .c2-d { margin-right: auto; font-size: 20px; color: #a9acb0; }
.u-web-cards-before .c2-f .pf-i { width: 26px; height: 26px; margin-right: 18px; }
.u-web-cards-before .c2-f .pf-i-star-f { width: 28px; height: 28px; }
.u-web-cards-before .c2-f .c2-s { color: #fbb00a; }
.u-web-cards-before .c2-f svg { display: block; }


.u-web-cards-after { background: #09101f; border-radius: 16px 0 0 16px; --pf-top-h: 57px; --pf-nav-w: 64px; }
.u-web-cards-after .pf-shell { inset: 9px 0 9px 10px; border-radius: 10px 0 0 10px; }
.u-web-cards-after .pf-top { padding-left: 14px; background: linear-gradient(90deg, #d4eafc, #e9edf8 38%, #eaedf8); }
.u-web-cards-after .pf-nav { gap: 4px; }
.u-web-cards-after .pf-nav-b { gap: 24px; margin-bottom: 4px; }
.u-web-cards-after .pf-logo { gap: 10px; }
.u-web-cards-after .pf-logo-mark { width: 34px; height: 34px; background-size: 30px; }
.u-web-cards-after .pf-logo-name { font-size: 18px; letter-spacing: .3px; }
.u-web-cards-after .pf-user { font-size: 16px; gap: 6px; }
.u-web-cards-after .pf-ava { width: 26px; height: 26px; }
.u-web-cards-after .pf-ico-btn { width: 30px; height: 30px; background: #fff; }
.u-web-cards-after .pf-top-r { gap: 14px; }
.u-web-cards-after .pf-tabs { padding-left: 26px; gap: 32px; }
.u-web-cards-after .pf-tab.t0 { color: var(--pf-text); }
.u-web-cards-after .pf-tabs .vl { align-self: flex-start; width: 1px; height: 14px; margin: 18px -16px 0 -16px; background: #dfe2e6; }
.u-web-cards-after .tabs-r { display: flex; gap: 8px; margin: 13px 0 0 auto; margin-right: -3px; }
.u-web-cards-after .tabs-r .pf-input { width: 275px; height: 33px; border-color: transparent; background: #edf1f4; }
.u-web-cards-after .tabs-r .pf-seg { padding: 2px; background: #edf1f4; border-radius: 4px; height: 33px; }
.u-web-cards-after .tabs-r .pf-seg > * { height: 29px; padding: 0 15px; gap: 6px; }
.u-web-cards-after .tabs-r .pf-btn { height: 33px; border-radius: 4px; }
.u-web-cards-after .cd { position: absolute; width: 320px; height: 92px; border: 1px solid #e8ebee; border-radius: 4px; background: #fff; overflow: hidden; box-shadow: 0 1px 4px rgba(31, 56, 110, .07); }
.u-web-cards-after .cd-h { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 13px; background: #f3f5f9; }
.u-web-cards-after .cd-i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 4px; background: #cfe2fb; color: #1f66e0; font-size: 14px; font-weight: 500; }
.u-web-cards-after .cd-t { font-weight: 600; white-space: nowrap; }
.u-web-cards-after .cd-e { flex: none; width: 15px; height: 15px; margin-left: 2px; border-radius: 50%; background: #e84a58 radial-gradient(circle at 50% 30%, #fff 0 1px, transparent 1.5px) ; position: relative; }
.u-web-cards-after .cd-e::before { content: ""; position: absolute; left: 7px; top: 3.500px; width: 1.500px; height: 5.500px; border-radius: 1px; background: #fff; }
.u-web-cards-after .cd-e::after { content: ""; position: absolute; left: 7px; top: 10px; width: 1.500px; height: 1.500px; border-radius: 50%; background: #fff; }
.u-web-cards-after .cd-b { display: flex; align-items: center; justify-content: center; gap: 6px; height: 27px; margin: 8px 7px 0; border-radius: 3px; background: #e9f1fe; color: #2a6ad8; }
.u-web-cards-after .cd-b.dis { background: #f3f4f6; color: #a9acb0; }
.u-web-cards-after .cd-f { display: flex; align-items: center; height: 42px; padding: 0 11px 0 12px; color: #6a6d6f; }
.u-web-cards-after .cd-d { margin-right: auto; color: #b3b6b9; font-size: 12px; }
.u-web-cards-after .cd-f .pf-i { margin-left: 16px; color: #5d6165; }
.u-web-cards-after .cd-f .pf-i-star-f { color: #ffa400; }
.u-web-cards-after .cd.hov { box-shadow: 0 4px 16px rgba(31, 56, 110, .12); }
.u-web-cards-after .cd.hov .cd-t { color: #1f66e8; }
.u-web-cards-after .cd.hov .cd-h { background: #f1f6fa; }
.u-web-cards-after .pf-main { border-top-left-radius: 8px; }


.u-web-filters { background: linear-gradient(100deg, #fbfdff 0%, #f1f7ff 28%, #dde8fb 52%, #d3dffa 70%, #d9ebfc 88%, #e6f5fe 100%); overflow: hidden; --pf-nav-w: 64px; --pf-sub-w: 134px; --pf-top-h: 54px; }
.u-web-filters::before { content: ""; position: absolute; left: 700px; top: -80px; width: 420px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(202, 213, 250, .65), rgba(202, 213, 250, 0)); }
.u-web-filters .bg2 { position: absolute; left: 0; top: 0; width: 520px; height: 100px; background: linear-gradient(180deg, #fff, rgba(255,255,255,0)); }
.u-web-filters .bg3 { position: absolute; left: 988px; top: 306px; width: 380px; height: 92px; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.22)); }
.u-web-filters .sc { position: absolute; left: 0; top: 32px; width: 941px; height: 354px; overflow: hidden; border-radius: 0 17px 17px 0; background: #fff; }
.u-web-filters .fi { position: absolute; left: 0; top: 0; width: 1426px; height: 536px; transform: scale(.66); transform-origin: 0 0; -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.25) 84%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.25) 84%, transparent 98%); }
.u-web-filters .fr { position: absolute; left: -24px; top: 25px; width: 972px; height: 368px; border: 7px solid #0a1122; border-radius: 26px; }
.u-web-filters .pf-nav { gap: 4px; }
.u-web-filters .pf-top { padding-left: 14px; background: linear-gradient(90deg, #d8ecfd, #e9edf8 30%, #eaedf8); }
.u-web-filters .pf-logo-mark { width: 34px; height: 34px; background-size: 30px; }
.u-web-filters .pf-logo-name { font-size: 18px; }
.u-web-filters .pf-ico-btn { background: #fff; }
.u-web-filters .tabs-r { display: flex; gap: 8px; margin: 13px 0 0 auto; }
.u-web-filters .pf-tabs { padding-right: 20px; }
.u-web-filters .flt { margin-top: 26px; padding-right: 20px; }
.u-web-filters .pf-tbl { width: 1202px; margin: 14px 0 0 24px; }
.u-web-filters .pf-tbl .c0 { padding-left: 12px; padding-right: 0; }
.u-web-filters .quick td { color: var(--pf-text2); }
.u-web-filters .ttl { display: flex; align-items: center; gap: 7px; }
.u-web-filters .ttl .pf-i12 { margin-left: -2px; margin-right: 4px; }
.u-web-filters .ttl.chd { padding-left: 26px; }
.u-web-filters .pf-no { color: var(--pf-text); }
.u-web-filters .zm { position: absolute; left: 84px; top: 105px; width: 1024px; height: 65px; border-radius: 8px; background: rgba(255, 255, 255, .985); box-shadow: 0 6px 24px rgba(60, 90, 160, .13); font-size: 14px; line-height: 1.4; color: var(--pf-text); }
.u-web-filters .zm-in { position: absolute; left: 24px; top: 16.500px; display: flex; gap: 9.500px; }
.u-web-filters .zm .pf-sel { width: 149.700px !important; }
.u-web-filters .zm .pf-sel-g { width: 145px !important; margin-right: .5px; }
.u-web-filters .zm-add { width: 33px; margin-left: .3px; }
.u-web-filters .dd { position: absolute; left: 1159px; top: 0; width: 198px; height: 276px; border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, .86); box-shadow: 0 4px 24px rgba(60, 90, 160, .08); font-size: 14px; line-height: 1.4; color: var(--pf-text); }
.u-web-filters .dd-s { position: absolute; left: 17px; top: 16px; width: 165px; height: 31px; flex-direction: row; background: rgba(255,255,255,.7); border-color: #dfe3e9; }
.u-web-filters .dd-s .pf-i { color: #b7bbc0; }
.u-web-filters .dd-i { position: absolute; left: 0; width: 198px; height: 30px; padding-left: 17px; line-height: 30px; transform: translateY(-4px); }
.u-web-filters .dd-i.on { left: 7px; width: 186px; padding-left: 10px; border-radius: 4px; background: #eef2fb; color: var(--pf-blue); }
.u-web-filters .arw { position: absolute; left: 0; top: 0; pointer-events: none; }
.u-web-filters .emo { position: absolute; left: 975px; top: 312px; }


.u-web-repo-cards { background: #080d1f; border-radius: 20px; --pf-top-h: 54px; --pf-nav-w: 64px; --pf-sub-w: 134px; }
.u-web-repo-cards .pf-shell { inset: 7px 7px 7px 7px; border-radius: 14px; }
.u-web-repo-cards .pf-top { padding-left: 14px; background: linear-gradient(90deg, #d4eafc, #e9edf8 34%, #eaedf8); }
.u-web-repo-cards .pf-nav { gap: 4px; }
.u-web-repo-cards .pf-nav-b { gap: 24px; margin-bottom: 4px; }
.u-web-repo-cards .pf-logo { gap: 10px; }
.u-web-repo-cards .pf-logo-mark { width: 34px; height: 34px; background-size: 30px; }
.u-web-repo-cards .pf-logo-name { font-size: 18px; letter-spacing: .3px; }
.u-web-repo-cards .pf-proj { height: 34px; margin-left: 2px; padding: 0 14px 0 12px; background: rgba(255, 255, 255, .8); font-size: 14px; }
.u-web-repo-cards .pf-user { font-size: 16px; gap: 6px; }
.u-web-repo-cards .pf-ava { width: 26px; height: 26px; }
.u-web-repo-cards .pf-ico-btn { width: 30px; height: 30px; background: #fff; }
.u-web-repo-cards .pf-top-r { gap: 14px; }
.u-web-repo-cards .pf-sub { padding-top: 14px; }
.u-web-repo-cards .pf-sub-t { height: 40px; padding-left: 8px; }
.u-web-repo-cards .pf-sub-i { padding-left: 8px; }
.u-web-repo-cards .pf-main { background: #fff; overflow: hidden; }
.u-web-repo-cards .bn { position: absolute; left: 0; top: 0; right: 0; height: 193px; background: linear-gradient(100deg, #eef5ff 0%, #e5eefc 40%, #dce8fb 100%); overflow: hidden; }
.u-web-repo-cards .bn::before { content: ""; position: absolute; left: -80px; top: -60px; width: 520px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.u-web-repo-cards .bn-grid { position: absolute; right: 0; top: 0; width: 640px; height: 193px; opacity: .38; background-image: linear-gradient(90deg, rgba(255,255,255,.9) 1.5px, transparent 1.5px), linear-gradient(0deg, rgba(255,255,255,.9) 1.5px, transparent 1.5px); background-size: 26px 26px; -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); }
.u-web-repo-cards .bn-t { position: absolute; left: 23px; top: 43px; font-size: 20px; line-height: 28px; font-weight: 600; color: #12161a; }
.u-web-repo-cards .bn-d { position: absolute; left: 24px; top: 79px; font-size: 14px; line-height: 24.5px; color: #5d6165; white-space: nowrap; }
.u-web-repo-cards .bn-art { position: absolute; top: 0; }
.u-web-repo-cards .bn-art { left: 491px; }
.u-web-repo-cards .rc { position: absolute; width: 287px; height: 113px; border: 1px solid #e9ebee; border-radius: 4px; background: linear-gradient(180deg, #fff 0%, #fbfbfd 55%, #f7f8fa 100%); box-shadow: 0 1px 6px rgba(31, 56, 110, .06); }
.u-web-repo-cards .rc-a { position: absolute; left: 12px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; font-size: 16px; font-weight: 500; }
.u-web-repo-cards .rc-a.c1 { background: #e6f0fe; color: #2f74e6; }
.u-web-repo-cards .rc-a.c2 { background: #e4f6ee; color: #22b27b; }
.u-web-repo-cards .rc-a.c3 { background: #fdeee3; color: #f08a3c; }
.u-web-repo-cards .rc-a.c4 { background: #f5e7fb; color: #b24fe0; }
.u-web-repo-cards .rc-t { position: absolute; left: 56px; top: 10px; right: 8px; font-size: 14px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-web-repo-cards .rc-s { position: absolute; left: 56px; top: 35px; font-size: 13px; line-height: 20px; color: #a8abae; white-space: nowrap; }
.u-web-repo-cards .rc-m { position: absolute; left: 12px; right: 12px; top: 70px; display: flex; align-items: center; gap: 14px; height: 24px; font-size: 14px; color: #5b5f63; }
.u-web-repo-cards .rc-m > span { display: inline-flex; align-items: center; gap: 5px; }
.u-web-repo-cards .rc-m .pf-i { color: #7d8186; }
.u-web-repo-cards .rc-v { margin-left: auto; font-family: var(--ui-font); }
.u-web-repo-cards .rc-new { border: 1px dashed #4f86d8; background: #e7f0fc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #2a6ad8; box-shadow: none; padding-top: 4px; }
.u-web-repo-cards .rc-plus { position: relative; width: 32px; height: 32px; border-radius: 50%; background: #0b5ef0; }
.u-web-repo-cards .rc-plus::before, .u-web-repo-cards .rc-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: #fff; }
.u-web-repo-cards .rc-plus::after { transform: rotate(90deg); }
.u-web-repo-cards .rc-hov { z-index: 3; background: #fff; transform: scale(1.28); transform-origin: 50% 50%; box-shadow: 0 6px 28px rgba(31, 56, 110, .16); border-color: transparent; }
.u-web-repo-cards .hand { position: absolute; left: 476px; top: 410px; z-index: 4; filter: drop-shadow(0 4px 6px rgba(40, 60, 100, .18)); }
.u-web-repo-cards .ic-cm { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.200'/><path d='M2.500 12h6.300M15.200 12h6.300'/></svg>"); }
.u-web-repo-cards .ic-pp { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.500'/><path d='M3 20c.5-3.500 3-5.500 6-5.500s5.500 2 6 5.500zM16 5a3.200 3.200 0 0 1 0 6M18 14.800c1.800.8 3 2.600 3.300 5.200h-3'/></svg>"); }
.u-web-repo-cards .ic-vw { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v5'/><path d='M8 9h6M8 13h3'/><circle cx='16.500' cy='16.500' r='3'/><path d='M18.800 18.800L21 21'/></svg>"); }


.u-web-signal-stats { background: #eceff3; overflow: hidden; }
.u-web-signal-stats .ss { position: absolute; inset: 0; }
.u-web-signal-stats .ss-card { position: absolute; left: 1px; top: 1px; right: 0; bottom: 3px; border-radius: 7px 0 0 7px; background: #fff; box-shadow: 0 1px 0 rgba(30, 50, 90, .06); }
.u-web-signal-stats .ss-glow { position: absolute; left: 32px; top: 18px; width: 256px; height: 82px; border-radius: 14px; background: radial-gradient(ellipse at 20% 50%, #eef3fd 0, #f5f8fe 55%, rgba(255, 255, 255, 0) 100%); }
.u-web-signal-stats .ss-tile { position: absolute; left: 50px; top: 35px; display: grid; place-items: center; width: 41px; height: 41px; border-radius: 6px; background: #edf2fb; }
.u-web-signal-stats .ss-main { position: absolute; left: 102px; top: 0; width: 160px; height: 100%; }
.u-web-signal-stats .ss-l { position: absolute; top: 29px; left: 0; color: #6a6d6f; font-size: 14px; line-height: 20px; white-space: nowrap; }
.u-web-signal-stats .ss-v { position: absolute; top: 52px; left: 0; font-size: 28px; line-height: 38px; white-space: nowrap; color: #14171a; -webkit-text-stroke: .9px currentColor; }
.u-web-signal-stats .ss-bar { position: absolute; left: 56px; top: 62px; width: 96px; height: 16px; border-radius: 2px; background: #e1e4ea; overflow: hidden; }
.u-web-signal-stats .ss-bar > i { display: block; width: 50%; height: 100%; background: var(--pf-blue); }
.u-web-signal-stats .ss-div { position: absolute; top: 34px; width: 1px; height: 42px; background: #e6e8ec; }
.u-web-signal-stats .ss-it { position: absolute; top: 0; width: 182px; height: 100%; margin-left: -91px; text-align: center; }
.u-web-signal-stats .ss-it .ss-l { left: 0; right: 0; }
.u-web-signal-stats .ss-it .ss-v { left: 0; right: 0; }
.u-web-signal-stats .ss-o { color: var(--pf-orange); }
.u-web-signal-stats .ss-r { color: var(--pf-red); }


.u-web-signal-gantt { background: #080e20; overflow: hidden; --pf-nav-w: 61px; --pf-sub-w: 131px; --pf-top-h: 57px; }
.u-web-signal-gantt .pf-shell { inset: 4px 10px 5px 0; border-radius: 0 20px 20px 0; }
.u-web-signal-gantt .pf-top { padding-right: 28px; }
.u-web-signal-gantt .pf-ico-btn { width: 25px; height: 25px; background: rgba(255, 255, 255, .8); }
.u-web-signal-gantt .pf-user { gap: 8px; font-size: 16px; }
.u-web-signal-gantt .pf-nav { gap: 3px; padding-bottom: 20px; }
.u-web-signal-gantt .pf-sub-sep { margin: 8px 4px 11px; }
.u-web-signal-gantt .pf-nav-i { height: 60px; }
.u-web-signal-gantt .pf-sub { padding-top: 6px; }
.u-web-signal-gantt .pf-main { background: #eef0f3; overflow: hidden; }
.u-web-signal-gantt .sg-hd { position: absolute; left: 0; top: 0; right: 0; height: 110px; background: linear-gradient(180deg, #fafafa 0, #f9f9fa 55%, #eceef2 100%); border-bottom: 1px solid #e3e6ea; }
.u-web-signal-gantt .pf-tabs { position: relative; padding-right: 20px; }
.u-web-signal-gantt .sg-plus { position: absolute; right: 24px; top: 11px; border-color: #dfe2e6; background: #fff; }
.u-web-signal-gantt .sg-sub { position: absolute; left: 0; right: 0; top: 66px; height: 34px; padding-right: 24px; gap: 8px; }
.u-web-signal-gantt .sg-sub .pf-tabs-s { margin-right: auto; }
.u-web-signal-gantt .sg-sub .pf-tab-s { height: 32px; padding: 0 14px; }
.u-web-signal-gantt .sg-more { background: #f2f3f5; border-color: #dfe2e6; }
.u-web-signal-gantt .sg-add { margin-left: 0; }


.u-web-signal-gantt .sg-card { position: absolute; left: 192px; top: 175px; right: 0; height: 139px; border-radius: 8px 0 0 8px; background: #fff; box-shadow: 0 8px 26px rgba(40, 62, 110, .13); }
.u-web-signal-gantt .sg-glow { position: absolute; left: 36px; top: 24px; width: 316px; height: 92px; border-radius: 14px; background: radial-gradient(ellipse at 22% 50%, #eaf0fc 0, #f4f7fe 55%, rgba(255, 255, 255, 0) 100%); }
.u-web-signal-gantt .sg-tile { position: absolute; left: 56px; top: 46px; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 7px; background: #edf2fb; }
.u-web-signal-gantt .sg-tile svg { width: 31px; height: 31px; }
.u-web-signal-gantt .sg-l { position: absolute; top: 38px; color: #666a6e; font-size: 17px; line-height: 24px; white-space: nowrap; }
.u-web-signal-gantt .sg-v { position: absolute; top: 67px; font-size: 33px; line-height: 44px; color: #14171a; white-space: nowrap; -webkit-text-stroke: .9px currentColor; }
.u-web-signal-gantt .sg-bar { position: absolute; left: 187px; top: 80px; width: 116px; height: 17px; border-radius: 2px; background: #e1e4ea; overflow: hidden; }
.u-web-signal-gantt .sg-bar > i { display: block; width: 50%; height: 100%; background: var(--pf-blue); }
.u-web-signal-gantt .sg-div { position: absolute; top: 44px; width: 1px; height: 56px; background: #e6e8ec; }
.u-web-signal-gantt .sg-it { position: absolute; top: 0; width: 220px; height: 100%; margin-left: -110px; text-align: center; }
.u-web-signal-gantt .sg-it .sg-l, .u-web-signal-gantt .sg-it .sg-v { left: 0; right: 0; }
.u-web-signal-gantt .sg-o { color: var(--pf-orange); }


.u-web-signal-gantt .sg-fl { position: absolute; left: 0; right: 0; top: 262px; height: 32px; }
.u-web-signal-gantt .sg-f { position: absolute; top: 0; height: 32px; border-color: #d3d7de; background: #e8eaee; color: #3c4044; gap: 6px; }
.u-web-signal-gantt .sg-f .pf-i { color: #7b8087; }


.u-web-signal-gantt .sg-t { position: absolute; left: 0; top: 310px; width: 411px; bottom: 0; background: #fff; border-top: 1px solid #e8eaee; }
.u-web-signal-gantt .sg-th { position: relative; height: 49px; background: #fafafb; border-bottom: 1px solid #e8eaee; color: #9a9da1; }
.u-web-signal-gantt .sg-th > * { position: absolute; top: 14px; line-height: 20px; }
.u-web-signal-gantt .sg-th > .pf-i { top: 18px; margin-left: 0; }
.u-web-signal-gantt .sg-tb { margin-left: 25px; width: 386px; }
.u-web-signal-gantt .sg-r { position: relative; height: 37.8px; border-bottom: 1px solid #eceef1; }
.u-web-signal-gantt .sg-r > * { position: absolute; top: 0; line-height: 37px; white-space: nowrap; }
.u-web-signal-gantt .sg-ic { display: flex; align-items: center; height: 37px; }
.u-web-signal-gantt .sg-tt { color: #1f2327; }
.u-web-signal-gantt .sg-ow { left: 238px; display: flex; align-items: center; gap: 9px; color: #1f2327; }
.u-web-signal-gantt .sg-ow .pf-ava { width: 22px; height: 22px; background: #eaf0fa; color: #bcd0f0; }
.u-web-signal-gantt .sg-pc { left: 334px; color: #1f2327; }
.u-web-signal-gantt .sg-warn { left: 2px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--pf-orange); }
.u-web-signal-gantt .sg-warn::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 2px; height: 4.5px; border-radius: 1px; background: #fff; box-shadow: 0 5.5px 0 #fff; }
.u-web-signal-gantt .sg-car { left: 6px; top: 15px; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid #5d6165; }
.u-web-signal-gantt .sg-car.r { left: 7px; top: 14px; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 5px solid #5d6165; border-right: 0; }
.u-web-signal-gantt .sg-new { border-bottom: 0; }
.u-web-signal-gantt .sg-nw { left: 0; display: flex; align-items: center; gap: 6px; color: #7b7f84; }


.u-web-signal-gantt .sg-g { position: absolute; left: 411px; right: 0; top: 309px; bottom: 0; background: #f1f4f8; border-top: 1px solid #e4e8ed; }
.u-web-signal-gantt .sg-gh { position: relative; height: 49px; background: #eff2f6; border-bottom: 1px solid #e4e8ed; }
.u-web-signal-gantt .sg-gh::after { content: ""; position: absolute; left: 0; right: 0; top: 25px; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 146px, #dfe3e8 146px, #dfe3e8 147px); pointer-events: none; }
.u-web-signal-gantt .sg-gh::before { content: ""; position: absolute; left: 0; right: 0; top: 25px; height: 1px; background: #e4e8ed; }
.u-web-signal-gantt .sg-m { position: absolute; top: 4px; font-size: 12px; line-height: 17px; color: #2a2e32; }
.u-web-signal-gantt .sg-wk { position: absolute; top: 28px; width: 147px; text-align: center; font-size: 12px; line-height: 18px; color: #9a9ea4; white-space: nowrap; font-family: var(--ui-num), var(--ui-font); }
.u-web-signal-gantt .sg-gb { height: calc(100% - 49px); background-color: #f1f4f8; }
.u-web-signal-gantt .sg-gb .pf-gt-row { height: 37.8px; border-bottom-color: transparent; }
.u-web-signal-gantt .sg-gb { --pf-line: #e1e5ea; }
.u-web-signal-gantt .pf-gt-now { top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #86d3b1; }
.u-web-signal-gantt .sg-b { top: 12px; height: 13px; border: 1px solid #77a5ef; border-radius: 2px; background: #c6dcfa; overflow: visible; }
.u-web-signal-gantt .sg-b > i { border-radius: 1px 0 0 1px; background: #0062f2; margin: -1px 0 0 -1px; height: calc(100% + 2px); }
.u-web-signal-gantt .sg-sum { top: 8px; height: 14px; border-radius: 2px; }
.u-web-signal-gantt .sg-sum::before, .u-web-signal-gantt .sg-sum::after { content: ""; position: absolute; top: 100%; width: 6px; height: 8px; margin-top: 0; }
.u-web-signal-gantt .sg-sum::before { left: -1px; margin-top: 1px; background: #0062f2; clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 0 0 0 2px; }
.u-web-signal-gantt .sg-sum::after { right: -1px; margin-top: 1px; background: #8fb7f4; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.u-web-signal-gantt .sg-hl { position: absolute; top: 8px; height: 23px; border-radius: 4px; background: #fff; box-shadow: 0 4px 12px rgba(30, 50, 90, .2); }
.u-web-signal-gantt .sg-hl .pf-gt-bar { top: 4px; }
.u-web-signal-gantt .sg-hl u { position: absolute; left: 2px; top: 7px; width: 3px; height: 9px; border-left: 1px solid #c9ccd1; border-right: 1px solid #c9ccd1; }
.u-web-signal-gantt .sg-hl u.r { left: auto; right: 2px; }
.u-web-signal-gantt .sg-ms { position: absolute; top: 9px; width: 20px; height: 20px; }
.u-web-signal-gantt .sg-ms::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--pf-green); transform: rotate(45deg); box-shadow: 0 2px 6px rgba(24, 178, 116, .3); }
.u-web-signal-gantt .sg-ms svg { position: absolute; left: 3px; top: 3px; }


.u-web-goal3-art { overflow: hidden; background: #02070a; }
.u-web-goal3-art .g3-svg { position: absolute; left: 0; top: 0; }


.u-web-pipeline-hero { background: #000; overflow: hidden; --pf-nav-w: 56px; --pf-sub-w: 70px; --pf-top-h: 54px; }
.u-web-pipeline-hero .hx-world { position: absolute; left: 0; top: 0; width: 2000px; height: 1518px; transform: scale(.8); transform-origin: 0 0; }
.u-web-pipeline-hero .hx-scene, .u-web-pipeline-hero .hx-basesv { position: absolute; left: 0; top: 0; overflow: visible; }


.u-web-pipeline-hero .hx-kb { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 7px; background: linear-gradient(180deg, #232846 0%, #1a1e38 52%, #20254a 100%); box-shadow: 0 0 0 4px #07080f, 0 0 0 5.5px rgba(40, 43, 46, .85), inset 0 0 26px rgba(0, 0, 0, .55); }
.u-web-pipeline-hero .hx-k { position: absolute; display: grid; place-items: center; border-radius: 4px; background: linear-gradient(180deg, #12152a 0%, #080a14 55%, #05060b 100%); box-shadow: inset 0 1px 0 rgba(165, 180, 240, .3), inset 0 0 0 .6px rgba(120, 140, 230, .1), 0 1.4px 0 rgba(0, 0, 0, .75); color: rgba(240, 244, 255, .94); font: 600 14px/1 var(--ui-num); font-style: normal; text-transform: uppercase; overflow: hidden; }
.u-web-pipeline-hero .hx-k.hx-kw { font-size: 8.5px; font-weight: 500; letter-spacing: .3px; text-transform: lowercase; color: rgba(236, 241, 255, .7); }
.u-web-pipeline-hero .hx-k.hx-kf { font-size: 7px; font-weight: 500; color: rgba(236, 241, 255, .55); }
.u-web-pipeline-hero .hx-k.hx-ks { font-size: 11px; font-weight: 500; color: rgba(236, 241, 255, .8); }
.u-web-pipeline-hero .hx-tp { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .03)); box-shadow: inset 0 0 0 1.5px rgba(78, 82, 82, .36), inset 0 2px 1px rgba(255, 255, 255, .38); }


.u-web-pipeline-hero .hx-lid { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
.u-web-pipeline-hero .hx-bezel { position: absolute; left: -14px; top: -20px; right: -14px; bottom: -46px; border-radius: 26px 26px 10px 10px; background: #040405; box-shadow: 0 0 0 2px #4d4f52, 0 0 0 3.2px #1b1c1e; }
.u-web-pipeline-hero .hx-ui { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #fff; font-size: 14px; }
.u-web-pipeline-hero .hx-gloss { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.u-web-pipeline-hero .hx-notch { position: absolute; left: 50%; top: -2px; width: 142px; height: 28px; margin-left: -71px; border-radius: 0 0 11px 11px; background: #000; }
.u-web-pipeline-hero .hx-notch u { position: absolute; left: 50%; top: 11px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2a1830; box-shadow: 0 0 0 1.5px #111; }


.u-web-pipeline-hero .pf-top { padding-left: 14px; }
.u-web-pipeline-hero .pf-nav { padding-bottom: 20px; }
.u-web-pipeline-hero .hx-sub { padding: 8px 0 0; text-align: center; }
.u-web-pipeline-hero .hx-sub .pf-sub-i { justify-content: center; width: 38px; height: 34px; margin: 0 auto 2px; padding: 0; }
.u-web-pipeline-hero .hx-sub .pf-sub-i .pf-i { width: 16px; height: 16px; color: #7a7f85; }
.u-web-pipeline-hero .hx-sub .pf-sub-i.on { background: var(--pf-blue-bg); }
.u-web-pipeline-hero .hx-sub .pf-sub-i.on .pf-i { color: var(--pf-blue); }
.u-web-pipeline-hero .pf-main { background: #f5f8fc; overflow: hidden; }
.u-web-pipeline-hero .hx-head { flex: none; position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 24px; background: #fff; border-bottom: 1px solid #edeff2; font-size: 16px; }
.u-web-pipeline-hero .hx-head b { font-weight: 600; }
.u-web-pipeline-hero .hx-tabs { position: absolute; left: 50%; top: 10px; display: flex; gap: 8px; margin-left: -110px; }
.u-web-pipeline-hero .hx-tab { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 6px; color: var(--pf-text3); font-size: 14px; white-space: nowrap; }
.u-web-pipeline-hero .hx-tab.on { background: var(--pf-blue-bg); color: var(--pf-blue); }
.u-web-pipeline-hero .hx-btns { display: flex; gap: 8px; margin-left: auto; }
.u-web-pipeline-hero .hx-cv { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; background: radial-gradient(circle, #cdd2da 0, #cdd2da .9px, transparent 1.3px) 6px 4px / 24px 24px, #f5f8fc; }
.u-web-pipeline-hero .hx-ln { position: absolute; left: 0; top: 0; overflow: visible; }
.u-web-pipeline-hero .hx-node { position: absolute; display: flex; border: 1px solid #d9dde4; border-radius: 6px; background: #fff; overflow: hidden; box-shadow: 0 1px 4px rgba(30, 50, 100, .06); }
.u-web-pipeline-hero .hx-nb { display: grid; place-items: center; width: 40px; background: var(--pf-blue); }
.u-web-pipeline-hero .hx-nb-g { background: #6b7a94; }
.u-web-pipeline-hero .hx-nt { flex: 1; display: grid; place-items: center; font-size: 15px; font-weight: 500; }
.u-web-pipeline-hero .hx-plus { position: absolute; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: #0a5fe6; }
.u-web-pipeline-hero .hx-card { position: absolute; border: 1px solid #e4e8ee; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(30, 50, 100, .05); }
.u-web-pipeline-hero .hx-hd { height: 40px; padding: 0 12px 0 18px; border-radius: 5px 5px 0 0; background: #eef2fd; font-size: 14px; font-weight: 600; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-web-pipeline-hero .hx-st { position: absolute; left: 18px; right: 18px; display: flex; align-items: center; gap: 10px; height: 40px; padding-left: 13px; border-radius: 4px; background: #f4f6f8; font-size: 14px; white-space: nowrap; }
.u-web-pipeline-hero .hx-ic { flex: none; color: #6b7076; }
.u-web-pipeline-hero .hx-add { position: absolute; left: 50%; bottom: -10px; display: grid; place-items: center; width: 19px; height: 19px; margin-left: -9.5px; border: 1px solid #d5d9df; border-radius: 4px; background: #fff; }


.u-web-pipeline-dnd { background: #f5f8fc; overflow: hidden; font-size: 15px; color: #161a1d; }
.u-web-pipeline-dnd .pd-bg { position: absolute; inset: 0; background: radial-gradient(circle, #c6ccd6 0, #c6ccd6 1px, transparent 1.4px) 16px 5px / 26.8px 26.8px; opacity: .8; }
.u-web-pipeline-dnd .pd-col { position: absolute; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #e6e9f0, #e9ecf2); }
.u-web-pipeline-dnd .pd-ln, .u-web-pipeline-dnd .pd-ar { position: absolute; left: 0; top: 0; overflow: visible; }
.u-web-pipeline-dnd .pd-node { position: absolute; display: flex; border: 1px solid #d9dde4; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(30, 50, 100, .05); overflow: hidden; }
.u-web-pipeline-dnd .pd-nb { display: grid; place-items: center; width: 45px; background: var(--pf-blue, #0060f0); }
.u-web-pipeline-dnd .pd-nb-g { background: #6b7a94; }
.u-web-pipeline-dnd .pd-nt { flex: 1; display: grid; place-items: center; font-size: 16px; font-weight: 500; }
.u-web-pipeline-dnd .pd-plus { position: absolute; display: grid; place-items: center; width: 17.6px; height: 17.6px; border-radius: 3px; background: #0a5fe6; box-shadow: 0 1px 3px rgba(10, 80, 220, .25); }
.u-web-pipeline-dnd .pd-card { position: absolute; border: 1px solid #e4e8ee; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(30, 50, 100, .05); }
.u-web-pipeline-dnd .pd-hd { height: 43px; margin: 0; padding: 0 0 0 18px; border-radius: 5px 5px 0 0; background: #eef2fd; font-size: 15.5px; font-weight: 600; line-height: 44px; white-space: nowrap; }
.u-web-pipeline-dnd .pd-st { position: absolute; display: flex; align-items: center; gap: 11px; height: 44px; padding-left: 14px; border-radius: 4px; background: #f4f6f8; font-size: 15.5px; white-space: nowrap; }
.u-web-pipeline-dnd .pd-ic { flex: none; color: #6b7076; }
.u-web-pipeline-dnd .pd-add { position: absolute; display: grid; place-items: center; width: 21px; height: 21px; margin-left: -10.5px; border: 1px solid #d5d9df; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(30, 50, 100, .08); }
.u-web-pipeline-dnd .pd-drag { z-index: 3; border: 1.6px solid #2468d8; border-radius: 6px; background: #fff; box-shadow: 0 10px 26px rgba(25, 50, 110, .2); }
.u-web-pipeline-dnd .pd-drag .pd-hd { margin: 0; border-radius: 4px 4px 0 0; }
.u-web-pipeline-dnd .pd-drag .pd-st { background: #f4f6f8; }
.u-web-pipeline-dnd .pd-c4 { box-shadow: 0 2px 10px rgba(30, 50, 100, .06); }
.u-web-pipeline-dnd .pd-ghost { background: #f8f9fb; box-shadow: inset 0 0 0 1px #f1f3f6; opacity: .55; }
.u-web-pipeline-dnd .pd-ghost span, .u-web-pipeline-dnd .pd-ghost .pd-ic { opacity: 0; }
.u-web-pipeline-dnd .pd-fl { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding-left: 14px; border: 1.5px solid #1d63d6; border-radius: 5px; background: #fff; box-shadow: 0 8px 20px rgba(25, 50, 110, .18); font-size: 15.5px; }
.u-web-pipeline-dnd .pd-ar { z-index: 6; }
.u-web-pipeline-dnd .pd-tip { position: absolute; z-index: 6; color: #0b5ee6; font-size: 22px; font-weight: 800; line-height: 31px; letter-spacing: .3px; white-space: nowrap; transform: skewX(-4deg); }
.u-web-pipeline-dnd .pd-hand { position: absolute; z-index: 5; overflow: visible; }


.u-web-tree-dnd { background: #fff; overflow: hidden; --pf-nav-w: 62px; --pf-sub-w: 127px; --pf-top-h: 54px; }
.u-web-tree-dnd .pf-i-key { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><circle cx='12' cy='10' r='2.4'/><path d='M12 12.4v4.6M12 14.6h1.8'/></svg>"); }
.u-web-tree-dnd .pf-i-tree { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h11M13 12h7M9 18h11M3.5 4.5l2 1.5-2 1.5M3.5 10.5l2 1.5-2 1.5M3.5 16.5l2 1.5-2 1.5'/></svg>"); }
.u-web-tree-dnd .td-win { position: absolute; left: 0; top: 0; width: 1010px; height: 638px; border-radius: 0 20px 20px 0; background: #00091c; }
.u-web-tree-dnd .pf-shell { inset: 5px auto 6px 0; width: 1004px; border-radius: 0 15px 15px 0; }
.u-web-tree-dnd .pf-top { padding-left: 12px; }
.u-web-tree-dnd .pf-nav { gap: 2px; }
.u-web-tree-dnd .pf-sub { padding-top: 8px; }
.u-web-tree-dnd .pf-sub-i { height: 33px; padding: 0 9px; gap: 9px; margin-bottom: 2px; }
.u-web-tree-dnd .pf-sub-i .pf-i { width: 14px; height: 14px; }
.u-web-tree-dnd .pf-sub-i.td-ind { padding-left: 31px; }
.u-web-tree-dnd .td-sd { margin-left: auto; color: var(--pf-text3) !important; }
.u-web-tree-dnd .pf-main { overflow: hidden; background: #fff; }


.u-web-tree-dnd .td-tp { position: absolute; left: 0; top: 0; bottom: 0; width: 377px; border-right: 1px solid #eceef1; background: #fff; }
.u-web-tree-dnd .td-ph { position: absolute; left: 17px; right: 15px; top: 13px; display: flex; align-items: center; justify-content: space-between; height: 22px; font-size: 14px; }
.u-web-tree-dnd .td-cg { display: flex; align-items: center; gap: 4px; color: var(--pf-blue); }
.u-web-tree-dnd .td-si { position: absolute; left: 16px; top: 47px; width: 345px; height: 30px; border-color: #dcdfe3; }
.u-web-tree-dnd .td-sic { color: #9aa0a6; margin-right: 4px; }
.u-web-tree-dnd .td-all { position: absolute; left: 16px; right: 14px; top: 91px; display: flex; align-items: center; gap: 6px; height: 20px; font-size: 14px; }
.u-web-tree-dnd .td-all .pf-i-tree { margin-left: auto; color: #6a6d6f; width: 14px; height: 14px; }
.u-web-tree-dnd .td-all .pf-i-folder { width: 14px; height: 14px; color: #3a3e42; }
.u-web-tree-dnd .td-gl { position: absolute; width: 1px; background: #e0e3e7; }
.u-web-tree-dnd .td-tr { position: absolute; left: 0; right: 0; height: 30.4px; font-size: 14px; line-height: 30px; }
.u-web-tree-dnd .td-tr::before { content: ""; position: absolute; left: 8px; right: 14px; top: 0; bottom: 0; border-radius: 4px; }
.u-web-tree-dnd .td-tr.sel::before { background: #eaf1ff; }
.u-web-tree-dnd .td-tr.sel .td-tx { color: var(--pf-blue); }
.u-web-tree-dnd .td-tr > * { position: absolute; }
.u-web-tree-dnd .td-tx { top: 0; white-space: nowrap; color: #1f2327; }
.u-web-tree-dnd .td-tag { display: inline-flex; align-items: center; height: 19px; margin: 0 0 0 6px; padding: 0 5px; border: 1px solid; border-radius: 3px; font-size: 12px; line-height: 1; vertical-align: 1px; }
.u-web-tree-dnd .td-tag-b { background: #eaf2ff; border-color: #c4d9fb; color: var(--pf-blue); }
.u-web-tree-dnd .td-tag-o { background: #fdf0e4; border-color: #f8d6b8; color: #e8802d; }
.u-web-tree-dnd .td-tag-n { background: #f5f6f7; border-color: #dfe2e6; color: #6a6d6f; }
.u-web-tree-dnd .td-car { top: 11px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #6a6d6f; }
.u-web-tree-dnd .td-car.d { top: 12px; border: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #6a6d6f; }
.u-web-tree-dnd .td-bu { top: 12.5px; width: 6px; height: 6px; border-radius: 50%; background: #e0e3e7; }
.u-web-tree-dnd .td-sts { top: 0; right: 46px; display: flex; gap: 6px; color: #6a6d6f; }
.u-web-tree-dnd .td-sts.td-pl { right: 69px; }
.u-web-tree-dnd .td-sts > span { display: flex; align-items: center; gap: 3px; }
.u-web-tree-dnd .td-sts svg { width: 12px; height: 12px; }
.u-web-tree-dnd .td-sts b { font-weight: 400; color: #4d5156; font-family: var(--ui-num); font-variant-numeric: tabular-nums; }
.u-web-tree-dnd .td-sts svg { color: #7a7f85; }
.u-web-tree-dnd .td-plus { top: 8px; right: 45px; color: #2a2e32; }
.u-web-tree-dnd .td-kb { top: 8px; right: 22px; color: #2a2e32; }
.u-web-tree-dnd .td-flt { position: absolute; z-index: 3; border: 1.4px solid #2468d8; border-radius: 5px; background: #fff; box-shadow: 0 10px 24px rgba(30, 80, 170, .2); }
.u-web-tree-dnd .td-flt .td-tr { left: -8.6px; width: 377px; right: auto; }
.u-web-tree-dnd .td-flt .td-tr::before { display: none; }


.u-web-tree-dnd .td-rp { position: absolute; top: 0; bottom: 0; right: 0; overflow: hidden; background: #fff; }
.u-web-tree-dnd .td-rh { display: flex; align-items: center; gap: 6px; height: 45px; padding-left: 23px; border-bottom: 1px solid #e9ebee; font-size: 14px; }
.u-web-tree-dnd .td-rs { position: absolute; height: 30px; border-color: #dcdfe3; }
.u-web-tree-dnd .td-th { position: absolute; color: #a0a3a6; line-height: 20px; }
.u-web-tree-dnd .td-sp { position: absolute; left: 29px; right: 0; height: 1px; background: #eceef1; }
.u-web-tree-dnd .td-rr { position: absolute; left: 0; right: 0; }
.u-web-tree-dnd .td-rt { position: absolute; left: 30px; top: 50%; display: grid; place-items: center; width: 25px; height: 25px; margin-top: -12.5px; border-radius: 4px; font-size: 13px; }
.u-web-tree-dnd .td-rt-b { background: #e6f0ff; color: #0060f0; }
.u-web-tree-dnd .td-rt-g { background: #e3f6ee; color: #18b274; }
.u-web-tree-dnd .td-rt-o { background: #fdeee2; color: #ed7b2f; }
.u-web-tree-dnd .td-rt-p { background: #f4e8fb; color: #a24ad8; }
.u-web-tree-dnd .td-rn { position: absolute; left: 62px; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.u-web-tree-dnd .td-rn b { display: block; font-weight: 400; font-size: 14px; line-height: 21px; color: #161a1d; }
.u-web-tree-dnd .td-rn i { display: block; font-style: normal; font-size: 12px; line-height: 18px; color: #a2a3a4; }


.u-web-tree-dnd .td-card { position: absolute; z-index: 5; border-radius: 8px; background: #fff; box-shadow: 0 10px 34px rgba(20, 40, 100, .14), 0 0 0 1px rgba(20, 40, 100, .03); }
.u-web-tree-dnd .td-ch { position: absolute; color: #868b91; font-size: 15px; line-height: 20px; white-space: nowrap; }
.u-web-tree-dnd .td-fn { position: absolute; color: #161a1d; font-size: 15px; line-height: 22px; white-space: nowrap; }
.u-web-tree-dnd .td-fl { position: absolute; left: 0; right: 0; height: 1px; background: #e8eaed; }
.u-web-tree-dnd .td-sel { position: absolute; border: 1.4px solid #2468d8; border-radius: 3px; background: #fff; box-shadow: 0 6px 16px rgba(30, 70, 160, .15); }
.u-web-tree-dnd .td-gr { position: absolute; width: 9px; height: 14px; background: radial-gradient(circle, #a9adb2 1.1px, transparent 1.6px) 0 0 / 4.5px 4.7px; }
.u-web-tree-dnd .td-ck { position: absolute; z-index: 1; width: 18px; height: 18px; border: 1.2px solid #d3d6da; border-radius: 3px; background: #fff; }
.u-web-tree-dnd .td-ck.on { border-color: #0060f0; background: #0060f0; }
.u-web-tree-dnd .td-ck.gd { border-color: #dcdee1; background: #f4f5f6; }
.u-web-tree-dnd .td-ck.on::after, .u-web-tree-dnd .td-ck.gd::after { content: ""; position: absolute; inset: 2.5px; background: #fff; -webkit-mask: var(--pf-ic-check) center/contain no-repeat; mask: var(--pf-ic-check) center/contain no-repeat; }
.u-web-tree-dnd .td-ck.gd::after { background: #c3c7cc; }
.u-web-tree-dnd .td-cv { position: absolute; z-index: 8; left: 0; top: 0; overflow: visible; }


.u-web-log-drawer { background: #060f20; border-radius: 26px; overflow: hidden; --pf-nav-w: 54px; --pf-sub-w: 56px; --pf-top-h: 50px; }
.u-web-log-drawer .pf-shell { inset: 10px 0 7px 10px; border-radius: 18px 0 0 18px; }


.u-web-log-drawer .pf-i-arrow-l { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4.5M10.5 5.5L4 12l6.5 6.5'/></svg>"); }
.u-web-log-drawer .pf-i-play { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M10.2 8.8l5 3.2-5 3.2z' fill='black'/></svg>"); }
.u-web-log-drawer .pf-i-stop { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><rect x='9' y='9' width='6' height='6' rx='1' fill='black'/></svg>"); }
.u-web-log-drawer .pf-i-layout { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M3.5 9.5h17M9.5 9.5V20'/></svg>"); }
.u-web-log-drawer .pf-i-x-circle { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><path d='M8.8 8.8l6.4 6.4M15.2 8.8l-6.4 6.4'/></svg>"); }


.u-web-log-drawer .pf-logo-name { font-size: 15.5px; }
.u-web-log-drawer .pf-proj { height: 28px; padding: 0 9px; font-size: 12.5px; }
.u-web-log-drawer .pf-top-r { gap: 15px; }
.u-web-log-drawer .pf-ico-btn { width: 22px; height: 22px; }
.u-web-log-drawer .pf-ico-btn .pf-i { width: 12px; height: 12px; }
.u-web-log-drawer .pf-ico-btn.dot::after { top: 1px; right: 1px; width: 5px; height: 5px; }
.u-web-log-drawer .pf-user .pf-ava { width: 19px; height: 19px; }


.u-web-log-drawer .pf-nav { gap: 2px; padding-top: 0; }
.u-web-log-drawer .pf-nav-i { height: 54px; width: 50px; gap: 3px; }
.u-web-log-drawer .pf-sub { padding: 10px 7px 0; border-right: 0; }
.u-web-log-drawer .ld-si { display: grid; place-items: center; width: 42px; height: 31px; margin-bottom: 4.4px; border-radius: 5px; color: #6a6d6f; }
.u-web-log-drawer .ld-si .pf-i { width: 16px; height: 16px; }
.u-web-log-drawer .ld-si.on { background: var(--pf-blue-bg); color: var(--pf-blue); }
.u-web-log-drawer .pf-main { overflow: hidden; }


.u-web-log-drawer .ld-title { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding-left: 24px; border-bottom: 1px solid #eceef1; font-size: 14px; }
.u-web-log-drawer .ld-title b { font-weight: 600; }
.u-web-log-drawer .ld-title .pf-i { width: 16px; height: 16px; }


.u-web-log-drawer .ld-list { position: absolute; left: 0; top: 48px; bottom: 0; width: 190px; border-right: 1px solid #eceef1; background: #fff; overflow: hidden; }
.u-web-log-drawer .ld-lh { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px 0 14px; border-bottom: 1px solid #eceef1; font-size: 12px; }
.u-web-log-drawer .ld-it { position: relative; height: 76px; margin: 0 8px; border-radius: 5px; }
.u-web-log-drawer .ld-it:not(.on)::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 1px; background: #eceef1; }
.u-web-log-drawer .ld-it.on { background: #ecf3ff; }
.u-web-log-drawer .ld-it > div { position: absolute; left: 7px; right: 4px; display: flex; align-items: center; white-space: nowrap; }
.u-web-log-drawer .ld-n { top: 4px; height: 22px; gap: 5px; font-size: 13px; font-family: var(--ui-num); }
.u-web-log-drawer .ld-it.on .ld-n { color: var(--pf-blue); }
.u-web-log-drawer .ld-u { top: 27px; height: 20px; gap: 4px; font-size: 10.5px; color: #8f9296; }
.u-web-log-drawer .ld-t { top: 48px; height: 20px; font-size: 11px; color: #b0b3b6; font-family: var(--ui-num); }
.u-web-log-drawer .ld-ok, .u-web-log-drawer .ld-bad { position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--pf-green); }
.u-web-log-drawer .ld-bad { background: var(--pf-red); }
.u-web-log-drawer .ld-ok::after { content: ""; position: absolute; left: 2.6px; top: 2.8px; width: 5.4px; height: 3px; border-left: 1.3px solid #fff; border-bottom: 1.3px solid #fff; transform: rotate(-45deg); transform-origin: 50% 50%; }
.u-web-log-drawer .ld-bad::before, .u-web-log-drawer .ld-bad::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5.4px; height: 1.3px; margin: -.65px 0 0 -2.7px; background: #fff; transform: rotate(45deg); }
.u-web-log-drawer .ld-bad::after { transform: rotate(-45deg); }
.u-web-log-drawer .ld-bad.s { width: 11px; height: 11px; }


.u-web-log-drawer .ld-run { position: absolute; left: 190px; right: 0; top: 48px; bottom: 0; }
.u-web-log-drawer .ld-meta { display: flex; align-items: center; height: 44px; padding-left: 21px; background: #fff; font-size: 12.5px; white-space: nowrap; }
.u-web-log-drawer .ld-no { margin-right: 10px; font-size: 14px; font-family: var(--ui-num); }
.u-web-log-drawer .ld-fail { gap: 4px; height: 20px; padding: 0 6px; margin-right: 11px; font-size: 12px; }
.u-web-log-drawer .ld-mi { display: inline-flex; align-items: center; gap: 4px; }
.u-web-log-drawer .ld-sp { width: 1px; height: 12px; margin: 0 7px 0 5px; background: #e0e3e6; }
.u-web-log-drawer .ld-rerun { position: absolute; right: 22px; top: 8px; width: 78px; height: 28px; padding: 0; border-radius: 3px; font-size: 13px; }
.u-web-log-drawer .ld-canvas { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; overflow: hidden; background-color: #f2f7fa; background-image: radial-gradient(circle, #c9d0d9 .8px, transparent 1.3px); background-size: 21.2px 21.2px; background-position: 4px 6px; }
.u-web-log-drawer .ld-ln { position: absolute; background: #dfe4e9; }
.u-web-log-drawer .ld-ln-h1 { left: 154px; width: 64px; top: 63px; height: 1px; }
.u-web-log-drawer .ld-ln-h2 { left: 454px; width: 63px; top: 63px; height: 1px; }
.u-web-log-drawer .ld-ln-h3 { left: 749px; width: 65px; top: 63px; height: 1px; }
.u-web-log-drawer .ld-ln-v1 { left: 192px; width: 1px; top: 63px; bottom: 0; }
.u-web-log-drawer .ld-ln-v2 { left: 480px; width: 1px; top: 63px; bottom: 0; }
.u-web-log-drawer .ld-dot { position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; border: 1px solid #d3d9df; background: #fff; box-sizing: border-box; z-index: 2; }
.u-web-log-drawer .ld-dot.l { left: -3px; }
.u-web-log-drawer .ld-dot.r { right: -3px; }
.u-web-log-drawer .ld-edge { position: absolute; top: 46px; width: 74px; height: 35px; display: flex; border-radius: 3px; background: #fff; box-shadow: 0 1px 4px rgba(40, 70, 120, .08); font-size: 13px; font-weight: 600; }
.u-web-log-drawer .ld-start { left: 80px; }
.u-web-log-drawer .ld-end { left: 814px; }
.u-web-log-drawer .ld-eb { display: grid; place-items: center; flex: none; width: 35px; height: 35px; border-radius: 3px 0 0 3px; background: #0a5ff8; color: #fff; }
.u-web-log-drawer .ld-end .ld-eb { background: #62789c; }
.u-web-log-drawer .ld-eb .pf-i { width: 17px; height: 17px; }
.u-web-log-drawer .ld-el { flex: 1; display: grid; place-items: center; }
.u-web-log-drawer .ld-stage { position: absolute; top: 46px; width: 232px; height: 260px; border-radius: 4px; background: #fff; box-shadow: 0 1px 6px rgba(40, 70, 120, .08); }
.u-web-log-drawer .ld-stage.bad { left: 218px; top: 44px; width: 236px; border: 2px solid #f0788a; border-radius: 5px; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(240, 120, 138, .25), 0 2px 8px rgba(227, 77, 89, .12); }
.u-web-log-drawer .ld-stage.ok { left: 517px; }
.u-web-log-drawer .ld-dot.l, .u-web-log-drawer .ld-stage .ld-dot { top: 18px; margin-top: -3px; }
.u-web-log-drawer .ld-stage.bad .ld-dot.l { left: -5px; }
.u-web-log-drawer .ld-stage.bad .ld-dot.r { right: -5px; }
.u-web-log-drawer .ld-sh { position: relative; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 11px; background: #e5f7ef; font-size: 12px; white-space: nowrap; border-radius: 4px 4px 0 0; }
.u-web-log-drawer .ld-stage.bad .ld-sh { background: #fde8ea; padding-left: 10px; height: 34px; }
.u-web-log-drawer .ld-sh b { font-weight: 600; }
.u-web-log-drawer .ld-sh .ld-ok, .u-web-log-drawer .ld-sh .ld-bad { width: 12px; height: 12px; }
.u-web-log-drawer .ld-sbtn { position: absolute; right: 12px; top: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: #868b90; }
.u-web-log-drawer .ld-stage.bad .ld-sbtn { top: 6px; right: 11px; }
.u-web-log-drawer .ld-sb { padding: 14px 13px 0 14px; }
.u-web-log-drawer .ld-stage.bad .ld-sb { padding: 14px 11px 0 12px; }
.u-web-log-drawer .ld-job { display: flex; align-items: center; height: 35px; margin-bottom: 7.6px; padding: 0 10px; border-radius: 3px; background: #f4f5f7; font-size: 12px; }


.u-web-log-drawer .ld-drawer { top: 360px; left: 0; right: 0; bottom: 0; width: auto; height: auto; background: #273c57; box-shadow: 0 -6px 20px rgba(20, 40, 80, .14); }
.u-web-log-drawer .ld-dh { flex: none; display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 22px 0 12px; background: #fff; }
.u-web-log-drawer .ld-dh b { font-size: 14px; font-weight: 600; }
.u-web-log-drawer .ld-dfail { gap: 4px; height: 20px; padding: 0 6px; font-size: 12px; }
.u-web-log-drawer .ld-auto { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; }
.u-web-log-drawer .ld-auto .pf-vl { height: 14px; margin: 0 4px; }
.u-web-log-drawer .ld-sw { width: 28px; height: 16px; border-radius: 8px; }
.u-web-log-drawer .ld-sw::after { width: 12px; height: 12px; }
.u-web-log-drawer .ld-sw.on::after { left: 14px; }
.u-web-log-drawer .ld-log { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; }
.u-web-log-drawer .ld-g { flex: none; width: 19px; padding-top: 4.5px; background: #1f2f40; text-align: center; }
.u-web-log-drawer .ld-g i { display: block; height: 23px; font: 400 12px/23px var(--ui-num); color: #8b9bb0; }
.u-web-log-drawer .ld-tx { flex: 1; min-width: 0; padding: 4.5px 0 0 6.5px; overflow: hidden; }
.u-web-log-drawer .ld-tx p { height: 23px; margin: 0; font-size: 12.5px; line-height: 23px; color: #f3f6fb; white-space: nowrap; overflow: hidden; }


.u-web-k8s-list { background: #f2f4ff; overflow: hidden; --pf-nav-w: 57px; --pf-sub-w: 134px; --pf-top-h: 56px; }
.u-web-k8s-list .kl-blue { position: absolute; left: 1155px; right: 0; top: 545px; bottom: 0; background: linear-gradient(180deg, #0a67ee, #1673f8 40%, #1a78fb); }
.u-web-k8s-list .kl-frame { position: absolute; left: 0; top: 0; width: 1155px; height: 734px; border-radius: 28px; background: #060f20; }
.u-web-k8s-list .pf-shell { inset: 9px 52px 9px 9px; border-radius: 20px 24px 24px 20px; }


.u-web-k8s-list .pf-i-arrow-l { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4.5M10.5 5.5L4 12l6.5 6.5'/></svg>"); }
.u-web-k8s-list .pf-i-thumb { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10.5h4v10H3zM8.5 10.5l3.6-7c1.6 0 2.6 1.2 2.2 2.8l-.7 2.8h5.2c1.2 0 2 1.1 1.7 2.2l-1.6 6.4a2 2 0 0 1-1.9 1.5H8.5z' fill='black'/></svg>"); }
.u-web-k8s-list .pf-i-hexs { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 3L15.1 4.8V8.4L12 10.2 8.9 8.4V4.8zM7.2 11.6L10.3 13.4V17L7.2 18.8 4.1 17V13.4zM16.8 11.6L19.9 13.4V17L16.8 18.8 13.7 17V13.4z'/></svg>"); }
.u-web-k8s-list .pf-i-stack { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='6.5' rx='1.4'/><rect x='3.5' y='13.5' width='17' height='6.5' rx='1.4'/><path d='M7 7.2h4M7 16.8h4'/></svg>"); }
.u-web-k8s-list .pf-i-logwin { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M3.5 9.5h17M9.5 9.5V20M13.5 13.5h4M13.5 16.5h3'/></svg>"); }
.u-web-k8s-list .pf-i-docs { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 20.5H6.5a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7.5'/><path d='M8.5 8h7M8.5 12h3.5'/><circle cx='16' cy='17' r='2.7'/><path d='M18 19l2.5 2.5'/></svg>"); }


.u-web-k8s-list .pf-top { padding-left: 11px; }
.u-web-k8s-list .pf-logo-name { font-size: 18px; }
.u-web-k8s-list .pf-proj { height: 31px; padding: 0 11px; font-size: 14.5px; }
.u-web-k8s-list .pf-nav-i { font-size: 12.5px; }
.u-web-k8s-list .pf-nav { padding: 3px 0 0; gap: 4px; }
.u-web-k8s-list .pf-main { overflow: hidden; background: #fff; }
.u-web-k8s-list .kl-tabs { align-items: flex-start; gap: 32px; padding-left: 25px; }
.u-web-k8s-list .kl-head { display: flex; align-items: center; gap: 12px; height: 48px; padding-top: 4px; font-size: 16px; white-space: nowrap; }
.u-web-k8s-list .kl-head .pf-i { width: 20px; height: 20px; stroke-width: 3; }
.u-web-k8s-list .kl-head b { font-weight: 600; }
.u-web-k8s-list .kl-vd { width: 1px; height: 18px; margin: 15px -17px 0 -19px; background: #e6e8eb; }
.u-web-k8s-list .pf-tab.on { padding-top: 18px; }
.u-web-k8s-list .kl-rec { position: absolute; left: 56px; top: 4px; display: inline-flex; align-items: center; gap: 2px; height: 17px; padding: 0 6px 0 5px; border-radius: 7px 7px 7px 2px; background: linear-gradient(90deg, #ffa520, #ff6a1a); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; }
.u-web-k8s-list .kl-rec .pf-i { width: 10px; height: 10px; }


.u-web-k8s-list .kl-filter { position: absolute; left: 24px; top: 74px; display: flex; gap: 10px; }
.u-web-k8s-list .kl-search { width: 289px; border-color: #dcdfe4; }
.u-web-k8s-list .kl-app { width: 148px; border-color: #dcdfe4; gap: 6px; padding-left: 8px; }
.u-web-k8s-list .kl-lb { color: #555a5f; margin-right: 2px; }
.u-web-k8s-list .kl-line { position: absolute; left: 0; right: 0; top: 121px; height: 1px; background: #eceef1; }


.u-web-k8s-list .kl-add { position: absolute; left: 24px; top: 147px; width: 290px; height: 131px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #3f7fe0; border-radius: 4px; background: #ebf2fe; color: var(--pf-blue); font-size: 14px; font-weight: 500; }
.u-web-k8s-list .kl-plus { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: var(--pf-blue); color: #fff; }
.u-web-k8s-list .kl-plus .pf-i { width: 21px; height: 21px; }
.u-web-k8s-list .kl-card { position: absolute; width: 290px; height: 131px; box-sizing: border-box; overflow: hidden; border: 1px solid #e7eaee; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(30, 50, 90, .05); }
.u-web-k8s-list .kl-card.c1 { left: 24px; } .u-web-k8s-list .kl-card.c2 { left: 331px; } .u-web-k8s-list .kl-card.c3 { left: 638px; }
.u-web-k8s-list .kl-card.r1 { top: 147px; } .u-web-k8s-list .kl-card.r2 { top: 295px; } .u-web-k8s-list .kl-card.r3 { top: 443px; }
.u-web-k8s-list .kl-top { position: absolute; left: 0; right: 0; top: 0; height: 92px; background: linear-gradient(180deg, #f5f8fb, #eef2f6); }
.u-web-k8s-list .kl-ic { position: absolute; left: 12px; top: 18px; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 4px; background: #d6e6fc; }
.u-web-k8s-list .kl-ic .pf-i { width: 30px; height: 30px; color: #0a62f5; }
.u-web-k8s-list .kl-top > b { position: absolute; left: 56px; top: 12px; font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; color: #1b1f23; }
.u-web-k8s-list .kl-s { position: absolute; right: 11px; top: 12px; display: flex; align-items: center; gap: 5px; height: 22px; font-size: 14px; white-space: nowrap; color: #1b1f23; }
.u-web-k8s-list .kl-s > i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; }
.u-web-k8s-list .kl-s.ok > i { background: var(--pf-green); }
.u-web-k8s-list .kl-s.ok > i::after { content: ""; position: absolute; left: 3.4px; top: 3.6px; width: 6px; height: 3.2px; border-left: 1.4px solid #fff; border-bottom: 1.4px solid #fff; transform: rotate(-45deg); }
.u-web-k8s-list .kl-s.off > i { background: #a9acaf; }
.u-web-k8s-list .kl-s.off > i::after { content: ""; position: absolute; left: 3.5px; top: 6.2px; width: 7px; height: 1.6px; background: #fff; }
.u-web-k8s-list .kl-s.run > i { background: conic-gradient(#0a62f5 0 22%, #c9dcfb 22% 100%); -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.4px); mask: radial-gradient(circle, transparent 4px, #000 4.4px); }
.u-web-k8s-list .kl-sub { position: absolute; left: 56px; top: 36px; font-size: 12px; line-height: 20px; color: #85898d; white-space: nowrap; }
.u-web-k8s-list .kl-tm { position: absolute; left: 56px; top: 58px; font-size: 12px; line-height: 20px; color: #b3b6b9; white-space: nowrap; font-family: var(--ui-num); }
.u-web-k8s-list .kl-ft { position: absolute; left: 0; right: 0; bottom: 0; height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 12px; background: #fff; color: #55595d; font-size: 14px; }
.u-web-k8s-list .kl-l, .u-web-k8s-list .kl-r, .u-web-k8s-list .kl-r > span { display: flex; align-items: center; gap: 5px; }
.u-web-k8s-list .kl-l { gap: 6px; font-size: 13px; }
.u-web-k8s-list .kl-r { gap: 14px; }
.u-web-k8s-list .kl-r .pf-i { color: #7a7e82; }


.u-web-k8s-list .kl-hover { left: 801px; top: 344px; height: 134px; transform: scale(1.37); transform-origin: 0 0; border-color: #eef1f5; border-radius: 6px; box-shadow: 0 2px 10px rgba(30, 50, 90, .10), 0 8px 28px rgba(30, 50, 90, .10); z-index: 5; }
.u-web-k8s-list .kl-hover .kl-top { background: #f2f7fb; }
.u-web-k8s-list .kl-hover .kl-ft { height: 42px; }


.u-web-k8s-list .kl-fade { position: absolute; left: 0; right: 0; bottom: 0; top: 390px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .96) 90%); z-index: 3; }
.u-web-k8s-list .pf-body { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .u-web-k8s-list .kl-s.run > i { animation: kl-spin 1.1s linear infinite; }
  @keyframes kl-spin { to { transform: rotate(360deg); } }
}


.u-web-k8s-drawer { background: #060f20; border-radius: 24px; overflow: hidden; --pf-nav-w: 62px; --pf-sub-w: 130px; --pf-top-h: 56px; }
.u-web-k8s-drawer .pf-shell { inset: 8px 0 8px 8px; border-radius: 19px 0 0 19px; }


.u-web-k8s-drawer .pf-i-arrow-l { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4.5M10.5 5.5L4 12l6.5 6.5'/></svg>"); }
.u-web-k8s-drawer .pf-i-thumb { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10.5h4v10H3zM8.5 10.5l3.6-7c1.6 0 2.6 1.2 2.2 2.8l-.7 2.8h5.2c1.2 0 2 1.1 1.7 2.2l-1.6 6.4a2 2 0 0 1-1.9 1.5H8.5z' fill='black'/></svg>"); }
.u-web-k8s-drawer .pf-i-hexs { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 3L15.1 4.8V8.4L12 10.2 8.9 8.4V4.8zM7.2 11.6L10.3 13.4V17L7.2 18.8 4.1 17V13.4zM16.8 11.6L19.9 13.4V17L16.8 18.8 13.7 17V13.4z'/></svg>"); }
.u-web-k8s-drawer .pf-i-stack { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='6.5' rx='1.4'/><rect x='3.5' y='13.5' width='17' height='6.5' rx='1.4'/><path d='M7 7.2h4M7 16.8h4'/></svg>"); }
.u-web-k8s-drawer .pf-i-logwin { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M3.5 9.5h17M9.5 9.5V20M13.5 13.5h4M13.5 16.5h3'/></svg>"); }
.u-web-k8s-drawer .pf-i-docs { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 20.5H6.5a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7.5'/><path d='M8.5 8h7M8.5 12h3.5'/><circle cx='16' cy='17' r='2.7'/><path d='M18 19l2.5 2.5'/></svg>"); }


.u-web-k8s-drawer .pf-logo-name { font-size: 17px; }
.u-web-k8s-drawer .pf-proj { height: 31px; padding: 0 11px; font-size: 14px; }
.u-web-k8s-drawer .pf-nav { padding-top: 3px; gap: 4px; }
.u-web-k8s-drawer .pf-nav-i { width: 56px; }
.u-web-k8s-drawer .pf-sub { padding-top: 5px; }
.u-web-k8s-drawer .pf-sub-t:not(:first-child) { margin-top: 16px; }
.u-web-k8s-drawer .pf-main { overflow: hidden; background: #fff; }


.u-web-k8s-drawer .kd-tabs { align-items: flex-start; gap: 32px; padding-left: 30px; }
.u-web-k8s-drawer .kd-head { display: flex; align-items: center; gap: 12px; height: 48px; padding-top: 4px; font-size: 16px; white-space: nowrap; }
.u-web-k8s-drawer .kd-head .pf-i { width: 20px; height: 20px; }
.u-web-k8s-drawer .kd-head b { font-weight: 600; }
.u-web-k8s-drawer .kd-vd { width: 1px; height: 18px; margin: 15px -17px 0 -19px; background: #e6e8eb; }
.u-web-k8s-drawer .kd-rec { position: absolute; left: 56px; top: 4px; display: inline-flex; align-items: center; gap: 2px; height: 17px; padding: 0 6px 0 5px; border-radius: 7px 7px 7px 2px; background: linear-gradient(90deg, #ffa520, #ff6a1a); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; }
.u-web-k8s-drawer .kd-rec .pf-i { width: 10px; height: 10px; }
.u-web-k8s-drawer .kd-filter { position: absolute; left: 26px; top: 72px; display: flex; gap: 10px; }
.u-web-k8s-drawer .kd-search { width: 284px; border-color: #dcdfe4; }
.u-web-k8s-drawer .kd-app { width: 146px; border-color: #dcdfe4; gap: 6px; padding-left: 8px; }
.u-web-k8s-drawer .kd-lb { color: #555a5f; margin-right: 2px; }
.u-web-k8s-drawer .kd-line { position: absolute; left: 0; right: 0; top: 119px; height: 1px; background: #eceef1; }


.u-web-k8s-drawer .kd-add { position: absolute; left: 26px; top: 144px; width: 286px; height: 128px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #3f7fe0; border-radius: 4px; background: #ebf2fe; color: var(--pf-blue); font-size: 14px; font-weight: 500; }
.u-web-k8s-drawer .kd-plus { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: var(--pf-blue); color: #fff; }
.u-web-k8s-drawer .kd-plus .pf-i { width: 21px; height: 21px; }
.u-web-k8s-drawer .kd-card { position: absolute; width: 286px; height: 128px; box-sizing: border-box; overflow: hidden; border: 1px solid #e7eaee; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(30, 50, 90, .05); }
.u-web-k8s-drawer .kd-card.c1 { left: 26px; } .u-web-k8s-drawer .kd-card.c2 { left: 328px; }
.u-web-k8s-drawer .kd-card.r1 { top: 144px; } .u-web-k8s-drawer .kd-card.r2 { top: 289px; } .u-web-k8s-drawer .kd-card.r3 { top: 434px; }
.u-web-k8s-drawer .kd-top { position: absolute; left: 0; right: 0; top: 0; height: 86px; background: linear-gradient(180deg, #f5f8fb, #eef2f6); }
.u-web-k8s-drawer .kd-ic { position: absolute; left: 11px; top: 17px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: #d6e6fc; }
.u-web-k8s-drawer .kd-ic .pf-i { width: 30px; height: 30px; color: #0a62f5; }
.u-web-k8s-drawer .kd-top > b { position: absolute; left: 55px; top: 11px; font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; color: #1b1f23; }
.u-web-k8s-drawer .kd-s { position: absolute; right: 11px; top: 11px; display: flex; align-items: center; gap: 5px; height: 22px; font-size: 14px; white-space: nowrap; color: #1b1f23; }
.u-web-k8s-drawer .kd-s > i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; }
.u-web-k8s-drawer .kd-s.ok > i { background: var(--pf-green); }
.u-web-k8s-drawer .kd-s.ok > i::after { content: ""; position: absolute; left: 3.4px; top: 3.6px; width: 6px; height: 3.2px; border-left: 1.4px solid #fff; border-bottom: 1.4px solid #fff; transform: rotate(-45deg); }
.u-web-k8s-drawer .kd-s.off > i { background: #a9acaf; }
.u-web-k8s-drawer .kd-s.off > i::after { content: ""; position: absolute; left: 3.5px; top: 6.2px; width: 7px; height: 1.6px; background: #fff; }
.u-web-k8s-drawer .kd-s.run > i { background: conic-gradient(#0a62f5 0 22%, #c9dcfb 22% 100%); -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.4px); mask: radial-gradient(circle, transparent 4px, #000 4.4px); }
.u-web-k8s-drawer .kd-sub { position: absolute; left: 55px; top: 35px; font-size: 12px; line-height: 20px; color: #85898d; white-space: nowrap; }
.u-web-k8s-drawer .kd-tm { position: absolute; left: 55px; top: 57px; font-size: 12px; line-height: 20px; color: #b3b6b9; white-space: nowrap; font-family: var(--ui-num); }
.u-web-k8s-drawer .kd-ft { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 12px; background: #fff; color: #55595d; font-size: 14px; }
.u-web-k8s-drawer .kd-l, .u-web-k8s-drawer .kd-r, .u-web-k8s-drawer .kd-r > span { display: flex; align-items: center; gap: 5px; }
.u-web-k8s-drawer .kd-l { gap: 6px; font-size: 13px; }
.u-web-k8s-drawer .kd-r { gap: 14px; }
.u-web-k8s-drawer .kd-r .pf-i { color: #7a7e82; }


.u-web-k8s-drawer .kd-dr { width: 717px; }
.u-web-k8s-drawer .kd-dh { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px 0 16px; font-size: 16px; }
.u-web-k8s-drawer .kd-dh b { font-weight: 600; }
.u-web-k8s-drawer .kd-dh .pf-i { color: #4a4e52; }
.u-web-k8s-drawer .kd-band { position: absolute; left: 0; right: 0; top: 56px; height: 82px; background: #f2f8fd; }
.u-web-k8s-drawer .kd-cube { position: absolute; left: 11px; top: 11px; width: 60px; height: 60px; }
.u-web-k8s-drawer .kd-l1 { position: absolute; left: 94px; top: 16px; font-size: 14px; line-height: 20px; color: #858a8f; }
.u-web-k8s-drawer .kd-l2 { position: absolute; left: 94px; top: 41px; font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.u-web-k8s-drawer .kd-l2 span { font-weight: 400; color: #6a6d6f; }
.u-web-k8s-drawer .kd-chip { position: absolute; right: 0; top: 2px; display: flex; align-items: center; gap: 5px; width: 94px; height: 24px; padding-left: 11px; box-sizing: border-box; border-radius: 4px 0 0 4px; background: #c8eedc; font-size: 14px; }
.u-web-k8s-drawer .kd-okc { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pf-green); }
.u-web-k8s-drawer .kd-okc::after { content: ""; position: absolute; left: 3.4px; top: 3.6px; width: 6px; height: 3.2px; border-left: 1.4px solid #fff; border-bottom: 1.4px solid #fff; transform: rotate(-45deg); }
.u-web-k8s-drawer .kd-it { position: absolute; left: 16px; top: 154px; font-size: 16px; line-height: 24px; font-weight: 600; }
.u-web-k8s-drawer .kd-url { position: absolute; left: 16px; top: 193px; display: flex; gap: 6px; font-size: 14px; line-height: 22px; white-space: nowrap; }
.u-web-k8s-drawer .kd-k { color: #6a6d6f; }
.u-web-k8s-drawer .kd-hosts { position: absolute; left: 0; top: 227px; right: 0; height: 22px; font-size: 14px; line-height: 22px; }
.u-web-k8s-drawer .kd-hg { position: absolute; top: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.u-web-k8s-drawer .kd-hg.g1 { left: 16px; } .u-web-k8s-drawer .kd-hg.g2 { left: 255px; } .u-web-k8s-drawer .kd-hg.g3 { left: 457px; }
.u-web-k8s-drawer .kd-q { color: #a9acb0; margin-right: 2px; width: 14px; height: 14px; }
.u-web-k8s-drawer .kd-cp { color: #7a7e82; margin-left: 4px; }
.u-web-k8s-drawer .kd-pt { height: 20px; padding: 0 5px; border-radius: 3px; background: #eef0f3; color: #6a6d6f; font-size: 12.5px; line-height: 20px; margin-left: 2px; }
.u-web-k8s-drawer .kd-hr { position: absolute; left: 0; right: 0; top: 265px; height: 1px; background: #e9ebee; }
.u-web-k8s-drawer .kd-cols { position: absolute; left: 0; right: 0; top: 266px; bottom: 55px; overflow: hidden; }
.u-web-k8s-drawer .kd-cd { position: absolute; left: 309px; top: 0; bottom: 0; width: 1px; background: #eff1f3; }
.u-web-k8s-drawer .kd-h2 { position: absolute; top: 15px; font-size: 16px; line-height: 24px; font-weight: 600; }
.u-web-k8s-drawer .kd-h2.hl { left: 16px; }
.u-web-k8s-drawer .kd-h2.hr2 { left: 326px; }
.u-web-k8s-drawer .kd-n { margin-left: 6px; color: #a2a5a8; font-size: 12px; font-weight: 400; }
.u-web-k8s-drawer .kd-tl { position: absolute; left: 16.5px; top: 64px; bottom: 0; width: 1px; background: #e1e4e8; }
.u-web-k8s-drawer .kd-ti { position: absolute; left: 0; width: 300px; height: 93.6px; }
.u-web-k8s-drawer .kd-ti.t0 { top: 54.4px; } .u-web-k8s-drawer .kd-ti.t1 { top: 148px; } .u-web-k8s-drawer .kd-ti.t2 { top: 241.6px; } .u-web-k8s-drawer .kd-ti.t3 { top: 335.2px; } .u-web-k8s-drawer .kd-ti.t4 { top: 428.8px; } .u-web-k8s-drawer .kd-ti.t5 { top: 522.4px; }
.u-web-k8s-drawer .kd-dot { position: absolute; left: 13px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #b5b8bc; }
.u-web-k8s-drawer .kd-dot.ok { background: var(--pf-green); }
.u-web-k8s-drawer .kd-lab { position: absolute; left: 34px; top: 0; font-size: 12.5px; line-height: 20px; color: #8c8f93; white-space: nowrap; font-family: var(--ui-font); }
.u-web-k8s-drawer .kd-hc { position: absolute; left: 34px; top: 24px; width: 260px; height: 58px; box-sizing: border-box; border-radius: 3px; background: #e5e6e9; overflow: hidden; }
.u-web-k8s-drawer .kd-hc.cur { background: #14ae6a; }
.u-web-k8s-drawer .kd-hc b { position: absolute; left: 8px; top: 8px; font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; color: #2b2f33; }
.u-web-k8s-drawer .kd-hc span { position: absolute; left: 8px; top: 30px; font-size: 12px; line-height: 20px; white-space: nowrap; color: #9fa2a6; }
.u-web-k8s-drawer .kd-hc.cur b { color: #fff; font-weight: 400; }
.u-web-k8s-drawer .kd-hc.cur span { color: rgba(255, 255, 255, .55); }
.u-web-k8s-drawer .kd-lgd { position: absolute; left: 326px; top: 48px; height: 20px; font-size: 14px; line-height: 20px; }
.u-web-k8s-drawer .kd-lgd span { position: absolute; top: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.u-web-k8s-drawer .kd-lgd span:nth-child(1) { left: 0; } .u-web-k8s-drawer .kd-lgd span:nth-child(2) { left: 82px; } .u-web-k8s-drawer .kd-lgd span:nth-child(3) { left: 168px; }
.u-web-k8s-drawer .kd-lgd i { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-blue); }
.u-web-k8s-drawer .kd-lgd .g i { background: var(--pf-green); } .u-web-k8s-drawer .kd-lgd .r i { background: #f0535f; }
.u-web-k8s-drawer .kd-in { position: absolute; left: 326px; width: 375px; height: 58px; box-sizing: border-box; border: 1px solid #dfe2e6; border-radius: 3px; background: #f0f1f3; box-shadow: 0 1px 3px rgba(30, 50, 90, .05); }
.u-web-k8s-drawer .kd-in.ok { background: #e3f7ee; border-color: #c2e8d5; }
.u-web-k8s-drawer .kd-in.er { background: #ffecee; border-color: #f8c6cc; }
.u-web-k8s-drawer .kd-in.a1 { top: 78.8px; } .u-web-k8s-drawer .kd-in.a2 { top: 148.4px; } .u-web-k8s-drawer .kd-in.a3 { top: 218px; } .u-web-k8s-drawer .kd-in.a4 { top: 288.6px; height: 196px; } .u-web-k8s-drawer .kd-in.a5 { top: 497.2px; }
.u-web-k8s-drawer .kd-in > i { position: absolute; left: 9px; top: 15.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-blue); }
.u-web-k8s-drawer .kd-in.ok > i { background: var(--pf-green); } .u-web-k8s-drawer .kd-in.er > i { background: #f0535f; }
.u-web-k8s-drawer .kd-in > b { position: absolute; left: 21px; top: 7px; font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; color: #24282c; }
.u-web-k8s-drawer .kd-in > span { position: absolute; left: 21px; top: 28px; font-size: 13px; line-height: 20px; color: #a0a3a7; white-space: nowrap; }
.u-web-k8s-drawer .kd-tb { position: absolute; left: 2px; right: 2px; top: 56px; height: 136px; border-radius: 2px; background: #fff; font-size: 14px; line-height: 22px; }
.u-web-k8s-drawer .kd-tb > span { position: absolute; white-space: nowrap; }
.u-web-k8s-drawer .kd-tv { position: absolute; left: 94px; top: 0; bottom: 0; width: 1px; background: #eceef0; }
.u-web-k8s-drawer .kd-tb .h1 { left: 18px; top: 7px; color: #9da0a4; } .u-web-k8s-drawer .kd-tb .h2c { left: 104px; top: 7px; color: #9da0a4; }
.u-web-k8s-drawer .kd-tb .w1 { left: 18px; top: 57px; color: #e5526a; } .u-web-k8s-drawer .kd-tb .w2 { left: 104px; top: 45px; color: #e5526a; line-height: 22.4px; }
.u-web-k8s-drawer .kd-tb .i1 { left: 18px; top: 105px; } .u-web-k8s-drawer .kd-tb .i2 { left: 104px; top: 105px; }
.u-web-k8s-drawer .kd-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 55px; border-top: 1px solid #eceef1; background: #fff; }
.u-web-k8s-drawer .kd-b { position: absolute; top: 11px; display: grid; place-items: center; height: 31px; border-radius: 3px; font-size: 14px; }
.u-web-k8s-drawer .kd-b.bs { left: 16px; width: 59px; background: #0163fd; color: #fff; }
.u-web-k8s-drawer .kd-b.bt { left: 84px; width: 59px; background: #f54857; color: #fff; }
.u-web-k8s-drawer .kd-b.be { left: 152px; width: 58px; background: #e9eaec; color: #2b2f33; }
.u-web-k8s-drawer .kd-del { position: absolute; right: 24px; top: 16px; font-size: 14px; line-height: 22px; color: #8f9296; }

@media (prefers-reduced-motion: no-preference) {
  .u-web-k8s-drawer .kd-s.run > i { animation: kd-spin 1.1s linear infinite; }
  @keyframes kd-spin { to { transform: rotate(360deg); } }
}


.u-web-gantt-hover { background: #000; overflow: hidden; color: #161a1d; }
.u-web-gantt-hover .gh-p { position: absolute; overflow: hidden; }
.u-web-gantt-hover .gh-L { background: radial-gradient(ellipse 260px 300px at 136px 215px, rgba(40, 130, 255, .38), rgba(40, 130, 255, 0)), linear-gradient(180deg, #0658f9 0, #0453f2 100%); }
.u-web-gantt-hover .gh-R { background:
  linear-gradient(112deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 46%, #000 86%),
  repeating-linear-gradient(63deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .0) 26px, rgba(255, 255, 255, .13) 58px, rgba(255, 255, 255, .02) 96px, rgba(255, 255, 255, .0) 118px, rgba(255, 255, 255, .06) 150px, rgba(255, 255, 255, 0) 190px),
  radial-gradient(ellipse 520px 400px at 120px 120px, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)),
  #0b0b0c; }
.u-web-gantt-hover .gh-row { position: absolute; border-radius: 6px; }
.u-web-gantt-hover .gh-L .gh-row { background: rgba(255, 255, 255, .27); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.u-web-gantt-hover .gh-R .gh-row { background: rgba(255, 255, 255, .24); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset; }
.u-web-gantt-hover .gh-bar { position: absolute; border: 1px solid #8fb4f4; border-radius: 2px; background: #c9dcfa; overflow: hidden; }
.u-web-gantt-hover .gh-bar > i { display: block; height: 100%; margin: -1px 0 0 -1px; height: calc(100% + 2px); background: #0a62ee; }
.u-web-gantt-hover .gh-bar-h { border-color: #4b86df; border-radius: 3px; }
.u-web-gantt-hover .gh-bar-h > i { background: #0560ea; }
.u-web-gantt-hover .gh-bar-d { border-color: rgba(255, 255, 255, .16); background: rgba(205, 222, 252, .62); }
.u-web-gantt-hover .gh-bar-d > i { background: #2e6be6; }
.u-web-gantt-hover .gh-bar-k { border-color: rgba(255, 255, 255, .12); background: #5d6165; }
.u-web-gantt-hover .gh-bar-k > i { background: #2d4f86; }
.u-web-gantt-hover .gh-ln { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(180deg, rgba(150, 215, 190, 0) 0, rgba(130, 200, 215, .7) 26%, rgba(165, 228, 200, .95) 50%, rgba(120, 190, 225, .6) 78%, rgba(120, 190, 225, 0) 100%); box-shadow: 0 0 10px rgba(130, 220, 200, .55); }
.u-web-gantt-hover .gh-hl { position: absolute; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 20, 100, .22); }
.u-web-gantt-hover .gh-L .gh-hl { background: linear-gradient(90deg, #cddcfb 0, #cddcfb 28%, #e6eefd 48%, #fbfcff 68%, #fff 100%); }
.u-web-gantt-hover .gh-R .gh-hl { background: linear-gradient(90deg, #cfcfcf 0, #d3d3d3 26%, #ebebeb 48%, #fcfcfc 68%, #fff 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.u-web-gantt-hover .gh-wr { position: absolute; border-radius: 5px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); }
.u-web-gantt-hover .gh-wr u { position: absolute; left: 3px; top: 11px; width: 4px; height: 10px; border-left: 1px solid #c3c6cb; border-right: 1px solid #c3c6cb; }
.u-web-gantt-hover .gh-wr u.r { left: auto; right: 3px; }
.u-web-gantt-hover .gh-ms { position: absolute; width: 26px; height: 26px; }
.u-web-gantt-hover .gh-ms::before { content: ""; position: absolute; inset: 0; border-radius: 5px; background: #15b375; transform: rotate(45deg) scale(1.04); box-shadow: 0 0 14px rgba(21, 179, 117, .6); }
.u-web-gantt-hover .gh-ms svg { position: absolute; left: 0; top: 0; }
.u-web-gantt-hover .gh-hand { position: absolute; z-index: 3; overflow: visible; transform: rotate(26deg); transform-origin: 40% 40%; }
.u-web-gantt-hover .gh-pop { position: absolute; z-index: 2; border: 1px solid rgba(255, 255, 255, .95); border-radius: 12px; overflow: hidden; }
.u-web-gantt-hover .gh-pl { background: linear-gradient(180deg, #fff 0, #fbfcff 30%, #eaf0fd 56%, #d3e0fe 100%); box-shadow: 0 16px 40px rgba(0, 30, 130, .3); }
.u-web-gantt-hover .gh-pr { background: linear-gradient(180deg, #fff 0, #f6f6f7 30%, #e3e3e4 70%, #d4d4d4 100%); box-shadow: 0 14px 36px rgba(0, 0, 0, .55); }
.u-web-gantt-hover .gh-tile { position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; }
.u-web-gantt-hover .gh-pl .gh-tile { background: #e3f5ec; }
.u-web-gantt-hover .gh-pr .gh-tile { background: #e8f0fd; }
.u-web-gantt-hover .gh-tile svg { width: 17px; height: 17px; }
.u-web-gantt-hover .gh-ttl { position: absolute; left: 61px; top: 24px; right: 20px; font-size: 18.4px; font-weight: 500; line-height: 29px; color: #14181c; white-space: nowrap; }
.u-web-gantt-hover .gh-dv { position: absolute; left: 24px; right: 24px; height: 1px; background: #dde2ea; }
.u-web-gantt-hover .gh-pr .gh-dv { background: #dcdcde; }
.u-web-gantt-hover .gh-pop .gh-r { position: absolute; left: 0; right: 0; height: 24px; margin-top: -12px; display: block; }
.u-web-gantt-hover .gh-i { position: absolute; left: 26px; top: 2px; color: #7d828a; }
.u-web-gantt-hover .gh-lb { position: absolute; left: 49px; top: 0; font-size: 15.8px; line-height: 24px; color: #6d7075; white-space: nowrap; }
.u-web-gantt-hover .gh-vl { position: absolute; left: 144px; top: 0; font-size: 16px; line-height: 24px; color: #1a1d20; white-space: nowrap; font-family: var(--ui-num), var(--ui-font); display: flex; align-items: center; gap: 8px; }
.u-web-gantt-hover .gh-pb { display: block; width: 53px; height: 8px; border-radius: 4px; background: transparent; overflow: hidden; }
.u-web-gantt-hover .gh-pb u { display: block; height: 100%; border-radius: 4px; background: #0a62ee; }
.u-web-gantt-hover .gh-pb2 { background: #e3e5e9; width: 52px; }


.u-web-feedback-form { background: #060f20; border-radius: 28px 28px 0 0; overflow: hidden; --pf-nav-w: 64px; --pf-sub-w: 62px; --pf-top-h: 54px; }
.u-web-feedback-form .pf-shell { inset: 10px 9px 0 8px; border-radius: 28px 24px 0 0; }


.u-web-feedback-form .pf-i-arrow-l { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4.5M10.5 5.5L4 12l6.5 6.5'/></svg>"); }
.u-web-feedback-form .pf-i-play { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M10.2 8.8l5 3.2-5 3.2z' fill='black'/></svg>"); }
.u-web-feedback-form .pf-i-stop { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><rect x='9' y='9' width='6' height='6' rx='1' fill='black'/></svg>"); }
.u-web-feedback-form .pf-i-job-a { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7.5' y='3.5' width='13' height='13' rx='1.8'/><path d='M16.5 20.5h-10a2 2 0 0 1-2-2v-10M10.5 8.8l2.4 2-2.4 2M14.2 12.8h2'/></svg>"); }
.u-web-feedback-form .pf-i-job-b { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M8 9.5l3 2.5-3 2.5M13 15h3.5'/></svg>"); }
.u-web-feedback-form .pf-i-job-c { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7.5h16v3.5H4zM5.5 11v7.5a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V11M10 14.8h4'/></svg>"); }
.u-web-feedback-form .pf-i-chat { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20.2 11.2a7.7 6.8 0 0 1-11.5 5.8L4 18.8l1.3-3.9A7.4 6.8 0 1 1 20.2 11.2z'/></svg>"); }
.u-web-feedback-form .pf-i-mail { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='6' width='17' height='12.5' rx='2'/><path d='M4 8.2l8 5.6 8-5.6'/></svg>"); }


.u-web-feedback-form .pf-top { padding-left: 17px; }
.u-web-feedback-form .pf-logo-mark { width: 32px; height: 32px; }
.u-web-feedback-form .pf-logo-name { font-size: 17.5px; }
.u-web-feedback-form .pf-proj .pf-i12 { width: 14px; height: 14px; }
.u-web-feedback-form .pf-nav { padding-top: 0; gap: 3.5px; }
.u-web-feedback-form .pf-nav-i { width: 55px; }
.u-web-feedback-form .pf-sub { padding: 12px 7px 0; border-right: 0; }
.u-web-feedback-form .ff-si { display: grid; place-items: center; width: 48px; height: 36px; margin-bottom: 3.6px; border-radius: 5px; color: #6a6d6f; }
.u-web-feedback-form .ff-si.on { background: var(--pf-blue-bg); color: var(--pf-blue); }
.u-web-feedback-form .ff-sep { display: block; height: 1px; margin: 9px 6px 9.6px; background: #e3e6ea; }
.u-web-feedback-form .pf-main { overflow: hidden; background: #f2f7fa; }


.u-web-feedback-form .ff-head { position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 3; display: flex; align-items: center; gap: 10px; padding-left: 29px; background: #fff; border-bottom: 1px solid #eceef1; font-size: 16px; }
.u-web-feedback-form .ff-head > .pf-i { width: 19px; height: 19px; }
.u-web-feedback-form .ff-head > b { font-weight: 600; }
.u-web-feedback-form .ff-seg span { position: absolute; top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; height: 31px; border-radius: 3px; color: #8d9094; font-size: 14px; }
.u-web-feedback-form .ff-seg span:nth-child(1) { left: 555px; width: 93px; }
.u-web-feedback-form .ff-seg span:nth-child(2) { left: 651px; width: 105px; }
.u-web-feedback-form .ff-seg span.on { background: #e8f0fd; color: var(--pf-blue); }
.u-web-feedback-form .ff-warn { position: absolute; left: 887px; top: 17px; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 22px; color: #e0414e; white-space: nowrap; }
.u-web-feedback-form .ff-b1, .u-web-feedback-form .ff-b2, .u-web-feedback-form .ff-b3 { position: absolute; top: 12px; height: 31px; border-radius: 3px; padding: 0; }
.u-web-feedback-form .ff-b1 { left: 1041px; width: 58px; border-color: #d3d6db; }
.u-web-feedback-form .ff-b2 { left: 1108px; width: 72px; border-color: #d3d6db; }
.u-web-feedback-form .ff-b3 { left: 1189px; width: 86px; }
.u-web-feedback-form .ff-bang { position: relative; flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #e24453; }
.u-web-feedback-form .ff-bang::before { content: ""; position: absolute; left: 6.2px; top: 3px; width: 1.7px; height: 5.4px; border-radius: 1px; background: #fff; }
.u-web-feedback-form .ff-bang::after { content: ""; position: absolute; left: 6.2px; top: 9.2px; width: 1.7px; height: 1.8px; border-radius: 1px; background: #fff; }
.u-web-feedback-form .ff-bang.s { width: 15px; height: 15px; }
.u-web-feedback-form .ff-bang.s::before { left: 6.6px; top: 3.2px; height: 5.8px; }
.u-web-feedback-form .ff-bang.s::after { left: 6.6px; top: 9.9px; }
.u-web-feedback-form .ff-bang.l { width: 16px; height: 16px; }
.u-web-feedback-form .ff-bang.l::before { left: 7.2px; top: 3.4px; height: 6.4px; width: 1.8px; }
.u-web-feedback-form .ff-bang.l::after { left: 7.2px; top: 10.6px; width: 1.8px; }


.u-web-feedback-form .ff-bg { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; background-color: #f2f7fa; background-image: radial-gradient(circle, #ccd2d9 .9px, transparent 1.4px); background-size: 23.8px 23.8px; background-position: 9px 7px; }
.u-web-feedback-form .ff-canvas { position: absolute; inset: 0; z-index: 1; }
.u-web-feedback-form .ff-lines, .u-web-feedback-form .ff-curve { position: absolute; left: 0; top: 0; }
.u-web-feedback-form .ff-curve { z-index: 5; }
.u-web-feedback-form .ff-edge { position: absolute; top: 128px; display: flex; width: 83px; height: 38px; border-radius: 3px; background: #fff; box-shadow: 0 1px 4px rgba(30, 50, 90, .08); font-size: 14px; font-weight: 600; }
.u-web-feedback-form .ff-start { left: 32px; }
.u-web-feedback-form .ff-end { left: 1185.6px; width: 84px; }
.u-web-feedback-form .ff-eb { display: grid; place-items: center; flex: none; width: 40px; height: 38px; border-radius: 3px 0 0 3px; background: #0463fe; color: #fff; }
.u-web-feedback-form .ff-end .ff-eb { background: #5f6b88; }
.u-web-feedback-form .ff-eb .pf-i { width: 18px; height: 18px; }
.u-web-feedback-form .ff-el { flex: 1; display: grid; place-items: center; }
.u-web-feedback-form .ff-dot { position: absolute; top: 16px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #cdd2d8; background: #fff; box-sizing: border-box; z-index: 2; }
.u-web-feedback-form .ff-edge .ff-dot { top: 15.5px; }
.u-web-feedback-form .ff-dot.l { left: -3px; } .u-web-feedback-form .ff-dot.r { right: -3px; }
.u-web-feedback-form .ff-add { position: absolute; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 2px; background: #0a63f0; color: #fff; z-index: 2; }
.u-web-feedback-form .ff-add .pf-i { width: 12px; height: 12px; stroke-width: 3; }
.u-web-feedback-form .ff-card { position: absolute; width: 260px; box-sizing: border-box; border: 1px solid #e8ecf1; border-radius: 3px; background: #fff; box-shadow: 0 1px 4px rgba(20, 40, 90, .05); }
.u-web-feedback-form .ff-ch { height: 38px; padding: 0 16px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #e8effc, #f1f5fb); font-size: 14px; font-weight: 600; line-height: 38px; white-space: nowrap; }
.u-web-feedback-form .ff-row { position: absolute; left: 14px; right: 14px; display: flex; align-items: center; gap: 7px; height: 38.4px; padding-left: 13px; border-radius: 3px; background: #f2f3f5; font-size: 14px; white-space: nowrap; box-sizing: border-box; color: #2b2f33; }
.u-web-feedback-form .ff-row .pf-i { color: #8c9096; }
.u-web-feedback-form .ff-row.bad { border: 1.3px solid #e2505e; background: #fff; padding-left: 11.5px; }
.u-web-feedback-form .ff-row .ff-bang { position: absolute; right: 11px; top: 11px; }
.u-web-feedback-form .ff-pl { position: absolute; left: 50%; bottom: -10px; display: grid; place-items: center; width: 19px; height: 19px; margin-left: -9.5px; border: 1px solid #cfd3d9; border-radius: 3px; background: #fff; color: #7d8187; z-index: 2; }


.u-web-feedback-form .ff-tip { position: absolute; left: 986px; top: 82px; width: 258px; height: 54px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2.4px solid #1262e3; border-radius: 4px; background: #fff; box-shadow: 0 2px 12px rgba(18, 98, 227, .12); color: #e24453; font-size: 16px; z-index: 6; }
.u-web-feedback-form .ff-modal { position: absolute; left: 572px; top: 230px; width: 558px; height: 640px; box-sizing: border-box; border: 2px solid #1262e3; border-radius: 3px; background: #fdfdfe; box-shadow: 0 8px 40px rgba(10, 30, 80, .16), 0 0 0 1px rgba(18, 98, 227, .15); z-index: 4; }
.u-web-feedback-form .ff-mh { position: absolute; left: 0; right: 0; top: 0; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px 0 16px; border-bottom: 1px solid #e6e8eb; }
.u-web-feedback-form .ff-mh b { font-size: 18.5px; font-weight: 700; }
.u-web-feedback-form .ff-mh .pf-i { width: 17px; height: 17px; color: #1b1f23; stroke-width: 3; }
.u-web-feedback-form .ff-lab { position: absolute; font-size: 16px; line-height: 24px; color: #2b2f33; white-space: nowrap; }
.u-web-feedback-form .ff-lab i { margin-right: 1px; color: #e24453; font-style: normal; font-size: 18px; vertical-align: -2px; }
.u-web-feedback-form .ff-lab.l1 { left: 16px; top: 81px; } .u-web-feedback-form .ff-lab.l2 { left: 287px; top: 81px; } .u-web-feedback-form .ff-lab.l3 { left: 16px; top: 178px; }
.u-web-feedback-form .ff-s1 .pf-i, .u-web-feedback-form .ff-s2 .pf-i { width: 15px; height: 15px; color: #8c9096; }
.u-web-feedback-form .ff-s1, .u-web-feedback-form .ff-s2 { position: absolute; top: 111px; width: 251px; height: 36px; box-sizing: border-box; font-size: 16px; border-color: #d3d6db; border-radius: 3px; background: #fff; }
.u-web-feedback-form .ff-s1 { left: 16px; } .u-web-feedback-form .ff-s2 { left: 287px; }
.u-web-feedback-form .ff-s1.err { border: 1.6px solid #dd5d6b; }
.u-web-feedback-form .ff-em { position: absolute; left: 16px; top: 149px; display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 22px; color: #e24453; }
.u-web-feedback-form .ff-code { position: absolute; left: 16px; top: 207px; width: 522px; height: 640px; background: #f4f6f8; overflow: hidden; }
.u-web-feedback-form .ff-gt { position: absolute; left: 0; top: 0; bottom: 0; width: 27px; padding-top: 9.6px; background: #e7eaee; text-align: center; }
.u-web-feedback-form .ff-gt i { display: block; height: 25.6px; font: 400 16px/25.6px var(--ui-num); color: #6f747a; }
.u-web-feedback-form .ff-tx { position: absolute; left: 37px; top: 0; right: 0; padding-top: 9.6px; }
.u-web-feedback-form .ff-tx p { height: 25.6px; margin: 0; font-size: 16.6px; line-height: 25.6px; color: #22262a; white-space: nowrap; overflow: hidden; }
.u-web-feedback-form .ff-tx p.d1 { padding-left: 22px; } .u-web-feedback-form .ff-tx p.d2 { padding-left: 44px; }


.u-web-inline-edit-popover { overflow: hidden; background: radial-gradient(ellipse 60% 70% at 18% 70%, #f7f9fe, #f1f5fd 75%); }
.u-web-inline-edit-popover .ie-wrap { position: absolute; inset: 0; }
.u-web-inline-edit-popover .ie-arc { position: absolute; left: 0; top: 0; }


.u-web-inline-edit-popover .pf-i-hourglass { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h11M6.5 20.5h11M8 3.5c0 4 2 5.5 4 8.5-2 3-4 4.5-4 8.5M16 3.5c0 4-2 5.5-4 8.5 2 3 4 4.5 4 8.5'/><path d='M9.8 17.8h4.4' stroke-width='1.4'/></svg>"); }
.u-web-inline-edit-popover .pf-i-calchk { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4M9 15l2.3 2.3L15.5 13'/></svg>"); }


.u-web-inline-edit-popover .ie-bar { position: absolute; left: 0; top: 0; width: 640px; height: 80px; border-radius: 0 0 5px 5px; background: #fdfcff; box-shadow: 0 3px 14px rgba(40, 60, 110, .08); }
.u-web-inline-edit-popover .ie-it { position: absolute; top: 0; height: 64px; }
.u-web-inline-edit-popover .ie-it.i1 { left: 25px; } .u-web-inline-edit-popover .ie-it.i2 { left: 147px; } .u-web-inline-edit-popover .ie-it.i3 { left: 312px; }
.u-web-inline-edit-popover .ie-it.i4 { left: 467px; width: 149px; border-radius: 0 0 4px 4px; background: #e8ebee; }
.u-web-inline-edit-popover .ie-av { position: absolute; left: 0; top: 14.5px; width: 33px; height: 33px; background: #e6f1fd; color: #a9c8f3; }
.u-web-inline-edit-popover .ie-ci { position: absolute; left: 0; top: 14.5px; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #f0f3f6; color: #a2a6ab; }
.u-web-inline-edit-popover .ie-ci .pf-i { width: 17px; height: 17px; }
.u-web-inline-edit-popover .ie-it.i4 .ie-ci { left: 8px; background: #f1f3f5; font-size: 18px; font-weight: 300; line-height: 1; }
.u-web-inline-edit-popover .ie-t { position: absolute; left: 46px; top: 0; white-space: nowrap; }
.u-web-inline-edit-popover .ie-it.i4 .ie-t { left: 54px; }
.u-web-inline-edit-popover .ie-t span { display: flex; align-items: center; }
.u-web-inline-edit-popover .ie-l { position: absolute; left: 0; top: 7px; height: 22px; color: #7c8084; font-size: 14px; }
.u-web-inline-edit-popover .ie-v { position: absolute; left: 0; top: 34px; height: 22px; color: #161a1d; font-size: 15.8px; white-space: nowrap; }
.u-web-inline-edit-popover .ie-pg { width: 50px; height: 5px; margin-left: 6px; border-radius: 3px; background: #e1e6ea; }
.u-web-inline-edit-popover .ie-pg > i { background: #0060ea; border-radius: 3px; }
.u-web-inline-edit-popover .ie-hand { position: absolute; left: 86px; top: 29px; width: 23px; height: 28px; }
.u-web-inline-edit-popover .ie-pk1 { position: absolute; left: 453px; top: 78px; width: 6px; height: 10px; background: #060e19; }
.u-web-inline-edit-popover .ie-pk2 { position: absolute; left: 471px; top: 78px; display: grid; place-items: center; width: 29px; height: 11px; background: #cfd3e8; color: #0b5de6; overflow: hidden; }
.u-web-inline-edit-popover .ie-pk2 .pf-i { margin-top: 6px; }
.u-web-inline-edit-popover .ie-pk3 { position: absolute; left: 500px; top: 78px; width: 87px; height: 11px; background: #e8e9f1; border-right: 1px solid #d9dbe5; }


.u-web-inline-edit-popover .ie-pop { position: absolute; left: 402px; top: 89px; width: 238px; height: 240px; border-radius: 6px 0 0 0; background: #fdfdfe; box-shadow: -2px 4px 20px rgba(30, 50, 100, .10); }
.u-web-inline-edit-popover .ie-ph { position: absolute; left: 16.6px; right: 0; top: 12px; height: 32px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.u-web-inline-edit-popover .ie-rg { display: flex; align-items: center; gap: 7px; margin-right: 17px; }
.u-web-inline-edit-popover .ie-rg .pf-radio { width: 16px; height: 16px; border-color: #d4d8dd; }
.u-web-inline-edit-popover .ie-rg .pf-radio + span + .pf-radio { margin-left: 8px; }
.u-web-inline-edit-popover .ie-rg .pf-radio.on { border: 1.6px solid #0a5ceb; background: radial-gradient(circle, #0a5ceb 3.6px, #fff 4.2px); }
.u-web-inline-edit-popover .ie-pn { position: absolute; left: 16.6px; top: 47.6px; width: 205px; height: 157px; border-radius: 3px; background: #f2f6f9; font-size: 14px; }
.u-web-inline-edit-popover .ie-f1, .u-web-inline-edit-popover .ie-f2 { position: absolute; left: 12.4px; height: 22px; line-height: 22px; white-space: nowrap; }
.u-web-inline-edit-popover .ie-f1 { top: 13px; } .u-web-inline-edit-popover .ie-f2 { top: 85px; }
.u-web-inline-edit-popover .ie-f1 i, .u-web-inline-edit-popover .ie-f2 i { margin-right: 1px; color: #e34d59; font-style: normal; }
.u-web-inline-edit-popover .ie-ig { position: absolute; left: 12.4px; top: 40px; width: 180px; height: 32px; display: flex; box-sizing: border-box; border: 1px solid #d9dce0; border-radius: 3px; background: #fff; overflow: hidden; }
.u-web-inline-edit-popover .ie-pre { display: grid; place-items: center; width: 33px; border-right: 1px solid #d9dce0; background: #f7f8f9; }
.u-web-inline-edit-popover .ie-iv { display: flex; align-items: center; padding-left: 7px; font-size: 15.5px; }
.u-web-inline-edit-popover .ie-sg { position: absolute; left: 12.4px; top: 112.4px; width: 180px; height: 32px; display: flex; }
.u-web-inline-edit-popover .ie-sg span { display: grid; place-items: center; box-sizing: border-box; border: 1px solid #d9dce0; background: #fff; }
.u-web-inline-edit-popover .ie-sg span:first-child { width: 90px; border-radius: 3px 0 0 3px; }
.u-web-inline-edit-popover .ie-sg span.on { width: 90px; margin-left: -1px; border-color: #0a5ceb; border-radius: 0 3px 3px 0; background: #e8f1fe; color: #0a5ceb; }


.u-web-table-dropdowns { overflow: hidden; background: #f3f5fc; }
.u-web-table-dropdowns .td-wrap { position: absolute; inset: 0; }
.u-web-table-dropdowns .td-frame { position: absolute; left: 0; top: 0; width: 908px; height: 307px; border-radius: 18px; background: #060f20; }
.u-web-table-dropdowns .td-card { position: absolute; left: 7px; top: 6px; width: 895px; height: 296px; border-radius: 14px; background: #fff; overflow: hidden; }
.u-web-table-dropdowns .td-card > * { position: absolute; }


.u-web-table-dropdowns .td-ttl { left: 15.6px; top: 11px; font-size: 16px; line-height: 24px; font-weight: 700; white-space: nowrap; }
.u-web-table-dropdowns .td-vd { left: 110px; top: 15px; width: 1px; height: 16px; background: #e3e5e8; }
.u-web-table-dropdowns .td-tab { top: 6px; display: flex; align-items: center; gap: 5px; height: 26px; font-size: 14px; color: #6a6d6f; white-space: nowrap; }
.u-web-table-dropdowns .td-tab.on { color: var(--pf-blue); height: 32px; }
.u-web-table-dropdowns .td-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4px; border-radius: 1px; background: var(--pf-blue); }
.u-web-table-dropdowns .td-tab.t1 { left: 126.4px; } .u-web-table-dropdowns .td-tab.t2 { left: 215px; } .u-web-table-dropdowns .td-tab.t3 { left: 296px; }
.u-web-table-dropdowns .td-tab .pf-cnt { min-width: 22px; height: 16px; padding: 0 5px; border-radius: 8px; font-family: var(--ui-num); }
.u-web-table-dropdowns .td-tab:not(.on) .pf-cnt { background: #e8eaee; color: #8a8e93; }
.u-web-table-dropdowns .td-search { right: 17px; top: 11px; display: flex; align-items: center; gap: 8px; height: 24px; color: #7f8387; font-size: 14px; }
.u-web-table-dropdowns .td-search .pf-i { color: #9a9ea2; }


.u-web-table-dropdowns .td-th { left: 0; right: 0; top: 59.6px; height: 24px; font-size: 14px; color: #9a9da1; }
.u-web-table-dropdowns .td-th span { position: absolute; top: 0; line-height: 24px; white-space: nowrap; }
.u-web-table-dropdowns .a { left: 15.6px; } .u-web-table-dropdowns .b { left: 370px; } .u-web-table-dropdowns .c { left: 451px; } .u-web-table-dropdowns .d { left: 658.8px; } .u-web-table-dropdowns .e { right: 17px; }
.u-web-table-dropdowns .td-th::after { content: ""; position: absolute; left: 15.6px; right: 17px; top: 30px; height: 1px; background: #e6e8eb; }
.u-web-table-dropdowns .td-tr { left: 0; right: 0; height: 38px; font-size: 14px; }
.u-web-table-dropdowns .td-tr.r1 { top: 92px; } .u-web-table-dropdowns .td-tr.r2 { top: 130.8px; } .u-web-table-dropdowns .td-tr.r3 { top: 169.4px; } .u-web-table-dropdowns .td-tr.r4 { top: 208.2px; } .u-web-table-dropdowns .td-tr.r5 { top: 247px; }
.u-web-table-dropdowns .td-tr > span { position: absolute; top: 0; height: 38px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.u-web-table-dropdowns .td-tr .a { left: 16px; gap: 7px; }
.u-web-table-dropdowns .td-tr .a .pf-i { width: 16px; height: 16px; margin-right: 2px; }
.u-web-table-dropdowns .td-tr .c .pf-i, .u-web-table-dropdowns .td-tr .d .pf-i { width: 14px; height: 14px; color: #9a9ea2; }
.u-web-table-dropdowns .td-tr .b { left: 369.4px; }
.u-web-table-dropdowns .td-tr .e { right: 17px; left: auto; }
.u-web-table-dropdowns .td-hl { left: 6.9px; top: 129.2px; width: 879px; height: 38.8px; border-radius: 3px; background: #eef0f2; }
.u-web-table-dropdowns .td-hc { top: 129.2px; height: 38.8px; background: #e3e6e9; }
.u-web-table-dropdowns .td-hc.hp { left: 357.2px; width: 81px; }
.u-web-table-dropdowns .td-hc.hs { left: 797.5px; width: 88.4px; border-radius: 0 3px 3px 0; }
.u-web-table-dropdowns .td-tr .pf-tag { font-size: 12px; }
.u-web-table-dropdowns .td-tr.r2 .e .pf-tag { background: #eceef0; }


.u-web-table-dropdowns .td-hand { position: absolute; z-index: 3; }
.u-web-table-dropdowns .td-hand.h1 { left: 402px; top: 148px; }
.u-web-table-dropdowns .td-hand.h2 { left: 847px; top: 149px; }
.u-web-table-dropdowns .td-dp { position: absolute; left: 365px; top: 180px; width: 118px; height: 105px; box-sizing: border-box; padding: 5.4px 7px 0; border: 0; border-radius: 6px; box-shadow: 0 4px 18px rgba(20, 40, 90, .16); z-index: 4; }
.u-web-table-dropdowns .td-ds { position: absolute; left: 808px; top: 181.5px; width: 119px; height: 140px; box-sizing: border-box; padding: 7.5px 7px 0 8px; border: 0; border-radius: 6px; box-shadow: 0 4px 18px rgba(20, 40, 90, .16); z-index: 4; }
.u-web-table-dropdowns .td-mi { display: flex; align-items: center; height: 29.4px; margin-bottom: 1.9px; padding-left: 8px; border-radius: 3px; }
.u-web-table-dropdowns .td-ds .td-mi { height: 28.5px; margin-bottom: 1.9px; padding-left: 8px; }
.u-web-table-dropdowns .td-mi.on { background: #e8effc; }
.u-web-table-dropdowns .td-mi .pf-tag { font-size: 12px; }


.u-web-milestone-detail { background: #060f20; border-radius: 24px; overflow: hidden; --pf-nav-w: 54px; --pf-sub-w: 115px; --pf-top-h: 48px; }
.u-web-milestone-detail .pf-shell { inset: 8px 0 8px 10px; border-radius: 20px 0 0 20px; }


.u-web-milestone-detail .pf-i-arrow-l { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4.5M10.5 5.5L4 12l6.5 6.5'/></svg>"); }
.u-web-milestone-detail .pf-i-ext { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M17.5 13.5v5a1.5 1.5 0 0 1-1.5 1.5H5.5A1.5 1.5 0 0 1 4 18.5V8a1.5 1.5 0 0 1 1.5-1.5h5M14 4h6v6M20 4l-8.5 8.5'/></svg>"); }
.u-web-milestone-detail .pf-i-hourglass { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h11M6.5 20.5h11M8 3.5c0 4 2 5.5 4 8.5-2 3-4 4.5-4 8.5M16 3.5c0 4-2 5.5-4 8.5 2 3 4 4.5 4 8.5'/><path d='M9.8 17.8h4.4' stroke-width='1.4'/></svg>"); }
.u-web-milestone-detail .pf-i-calchk { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4M9 15l2.3 2.3L15.5 13'/></svg>"); }
.u-web-milestone-detail .pf-i-cloudup { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 9.5 4.3 4.3 0 0 1 17.5 18'/><path d='M12 20v-7M9.2 15.4L12 12.6l2.8 2.8'/></svg>"); }
.u-web-milestone-detail .pf-i-filed { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h7.5l4.5 4.5v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-15.5a1 1 0 0 1 1-1z'/><path d='M14 3.5V8h4.5M9.5 14.5l1.8 1.8 3.2-3.4'/></svg>"); }


.u-web-milestone-detail .pf-logo-name { font-size: 15.5px; }
.u-web-milestone-detail .pf-proj { height: 28px; padding: 0 9px; font-size: 12.5px; }
.u-web-milestone-detail .pf-top-r { gap: 15px; }
.u-web-milestone-detail .pf-ico-btn { width: 22px; height: 22px; }
.u-web-milestone-detail .pf-ico-btn .pf-i { width: 12px; height: 12px; }
.u-web-milestone-detail .pf-ico-btn.dot::after { top: 1px; right: 1px; width: 5px; height: 5px; }
.u-web-milestone-detail .pf-user .pf-ava { width: 19px; height: 19px; }
.u-web-milestone-detail .pf-nav { gap: 2px; }
.u-web-milestone-detail .pf-nav-i { width: 50px; height: 54px; gap: 3px; }
.u-web-milestone-detail .pf-sub { padding: 5px 7px 0; border-right: 0; background: #fbfcfd; }
.u-web-milestone-detail .pf-sub-t { height: 36px; padding: 0 9px; font-size: 11px; }
.u-web-milestone-detail .pf-sub-t:not(:first-child) { margin-top: 11.6px; }
.u-web-milestone-detail .pf-sub-i { height: 30px; margin-bottom: 1.6px; gap: 7px; padding: 0 9px; font-size: 12px; }
.u-web-milestone-detail .pf-sub-i .pf-i { width: 14px; height: 14px; }
.u-web-milestone-detail .pf-sub-sep { margin: 6px 4px 7.8px; }
.u-web-milestone-detail .pf-main { overflow: hidden; background: #fff; }


.u-web-milestone-detail .md-tabs { position: absolute; left: 0; right: 0; top: 0; height: 43px; display: flex; gap: 28.8px; padding-left: 22.4px; font-size: 14px; color: #5b5f63; }
.u-web-milestone-detail .md-tabs .t { position: relative; height: 43px; padding-top: 15.6px; white-space: nowrap; }
.u-web-milestone-detail .md-tabs .t.on { color: var(--pf-blue); }
.u-web-milestone-detail .md-tabs .t.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--pf-blue); }
.u-web-milestone-detail .md-plus { position: absolute; left: 1050px; top: 10.4px; display: grid; place-items: center; width: 29px; height: 29px; box-sizing: border-box; border: 1px solid #dcdfe4; border-radius: 3px; background: #fff; color: #1b1f23; }
.u-web-milestone-detail .md-crumb { position: absolute; left: 0; right: 0; top: 58px; height: 25px; }
.u-web-milestone-detail .md-crumb > .pf-i { position: absolute; left: 24.6px; top: 3.5px; width: 18px; height: 18px; stroke-width: 3; color: #1b1f23; }
.u-web-milestone-detail .md-chip { position: absolute; left: 55px; top: 4.4px; display: flex; align-items: center; gap: 5px; height: 17px; padding: 0 7px 0 4px; border-radius: 3px; background: #e9f5ef; color: #1fa66f; font-size: 11.5px; }
.u-web-milestone-detail .md-chip .pf-i { width: 11px; height: 11px; }
.u-web-milestone-detail .md-ops { position: absolute; left: 980px; top: 0; height: 25px; display: flex; align-items: center; gap: 13px; color: #5d6165; }
.u-web-milestone-detail .md-ops .pf-i { stroke-width: 2.4; }
.u-web-milestone-detail .md-hr1 { position: absolute; left: 0; right: 0; top: 92.8px; height: 1px; background: #eceef1; }
.u-web-milestone-detail .md-title { position: absolute; left: 22.4px; top: 105px; width: 880px; font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.u-web-milestone-detail .md-meta { position: absolute; left: 22.4px; top: 134px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 20px; color: #a4a7aa; white-space: nowrap; font-family: var(--ui-font); }
.u-web-milestone-detail .md-meta i { width: 1px; height: 10px; background: #dfe2e5; }


.u-web-milestone-detail .md-fields { position: absolute; left: 0; width: 676px; top: 168px; height: 84px; border-bottom: 1px solid #eceef1; background: #fff; box-shadow: 0 -2px 10px rgba(30, 50, 90, .03); }
.u-web-milestone-detail .md-f { position: absolute; top: 0; height: 84px; }
.u-web-milestone-detail .md-ci { position: absolute; top: 29.4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f1f3f5; color: #a3a7ab; }
.u-web-milestone-detail .md-ci .pf-i { width: 14px; height: 14px; }
.u-web-milestone-detail .md-ci.ava { background: #e6f0fd; color: #a9c8f3; }
.u-web-milestone-detail .md-yen { font-size: 14px; font-weight: 300; }
.u-web-milestone-detail .md-l { position: absolute; top: 20px; line-height: 22px; font-size: 12px; color: #7d8185; white-space: nowrap; }
.u-web-milestone-detail .md-v { position: absolute; top: 43.4px; display: flex; align-items: center; line-height: 22px; font-size: 13px; color: #161a1d; white-space: nowrap; }
.u-web-milestone-detail .md-f.f1 .md-ci { left: 22.4px; } .u-web-milestone-detail .md-f.f1 .md-l, .u-web-milestone-detail .md-f.f1 .md-v { left: 60.8px; }
.u-web-milestone-detail .md-f.f2 .md-ci { left: 126.4px; } .u-web-milestone-detail .md-f.f2 .md-l, .u-web-milestone-detail .md-f.f2 .md-v { left: 165.6px; }
.u-web-milestone-detail .md-f.f3 .md-ci { left: 273.6px; } .u-web-milestone-detail .md-f.f3 .md-l, .u-web-milestone-detail .md-f.f3 .md-v { left: 305.6px; }
.u-web-milestone-detail .md-f.f4 .md-ci { left: 407.2px; } .u-web-milestone-detail .md-f.f4 .md-l, .u-web-milestone-detail .md-f.f4 .md-v { left: 445.6px; }
.u-web-milestone-detail .md-pg { width: 42px; height: 5px; margin-left: 6px; border-radius: 3px; background: #e1e6ea; }
.u-web-milestone-detail .md-pg > i { background: #0060ea; border-radius: 3px; }
.u-web-milestone-detail .md-row2 { position: absolute; left: 0; width: 676px; top: 256px; height: 38px; background: #fafbfc; font-size: 12px; }
.u-web-milestone-detail .md-row2 > span { position: absolute; top: 8px; height: 22px; line-height: 22px; white-space: nowrap; }
.u-web-milestone-detail .md-l2 { left: 22.4px; color: #7d8185; } .u-web-milestone-detail .md-l2.x { left: 188.8px; }
.u-web-milestone-detail .md-amt { left: 86.4px; top: 9px !important; height: 20px !important; line-height: 18px !important; box-sizing: border-box; padding: 0 5px; border: 1px solid #c3d8fb; border-radius: 3px; background: #e8f1fe; color: #1a62e0; font-size: 11px; }
.u-web-milestone-detail .md-unpaid { left: 253.6px; display: flex; align-items: center; gap: 4px; color: #161a1d; }
.u-web-milestone-detail .md-unpaid i { width: 5px; height: 5px; border-radius: 50%; background: #e34d59; }
.u-web-milestone-detail .md-desc { position: absolute; left: 22.4px; top: 331.6px; width: 640px; font-size: 12px; line-height: 20px; color: #3b3f43; }
.u-web-milestone-detail .md-desc p { margin: 0; white-space: nowrap; }


.u-web-milestone-detail .md-dh { position: absolute; left: 22.4px; right: 21.6px; width: 633px; top: 398.6px; height: 22px; font-size: 12px; line-height: 22px; }
.u-web-milestone-detail .md-dh b { font-size: 14px; font-weight: 600; }
.u-web-milestone-detail .md-dh .cnt { position: absolute; left: 54.4px; top: 0; color: #a4a7aa; white-space: nowrap; }
.u-web-milestone-detail .md-dh .add { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 4px; color: var(--pf-blue); white-space: nowrap; }
.u-web-milestone-detail .md-th { position: absolute; left: 22.4px; width: 633px; top: 429.8px; height: 24px; border-bottom: 1px solid #e6e8eb; font-size: 12px; color: #9a9da1; }
.u-web-milestone-detail .md-th span, .u-web-milestone-detail .md-tr span { position: absolute; top: 0; line-height: 22px; white-space: nowrap; }
.u-web-milestone-detail .c1 { left: 0; } .u-web-milestone-detail .c2 { left: 164.8px; } .u-web-milestone-detail .c3 { left: 295.2px; display: flex; align-items: center; gap: 7px; }
.u-web-milestone-detail .c4 { right: 0; color: #a4a7aa; font-size: 11px; }
.u-web-milestone-detail .md-tr { position: absolute; left: 22.4px; width: 633px; height: 22px; font-size: 12px; color: #2b2f33; }
.u-web-milestone-detail .md-tr.r1 { top: 461px; } .u-web-milestone-detail .md-tr.r2 { top: 494.6px; } .u-web-milestone-detail .md-tr.r3 { top: 528.2px; } .u-web-milestone-detail .md-tr.r4 { top: 561.8px; }
.u-web-milestone-detail .md-doc { position: relative; flex: none; width: 11px; height: 13px; border-radius: 2px; background: #3f74d8; }
.u-web-milestone-detail .md-doc::after { content: ""; position: absolute; left: 2.5px; top: 3.5px; width: 6px; height: 4px; border-top: 1.2px solid #fff; border-bottom: 1.2px solid #fff; }


.u-web-milestone-detail .md-side { position: absolute; left: 676.8px; right: 0; top: 92.8px; bottom: 0; pointer-events: none; }
.u-web-milestone-detail .md-side::before { content: ""; position: absolute; left: 0; top: 75.2px; bottom: 0; width: 1px; background: #f0f1f3; }
.u-web-milestone-detail .md-sh { position: absolute; left: 20.8px; right: 24px; top: 90.6px; height: 22px; display: flex; align-items: center; justify-content: space-between; line-height: 22px; }
.u-web-milestone-detail .md-sh b { font-size: 13px; font-weight: 600; }
.u-web-milestone-detail .md-sh .all { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #86898d; }
.u-web-milestone-detail .md-vl { position: absolute; left: 28.3px; top: 140px; height: 330px; width: 1px; background: #e8eaed; }
.u-web-milestone-detail .md-ev { position: absolute; left: 0; right: 0; height: 44px; }
.u-web-milestone-detail .md-ev.e1 { top: 126.6px; } .u-web-milestone-detail .md-ev.e2 { top: 183.2px; } .u-web-milestone-detail .md-ev.e3 { top: 239.8px; } .u-web-milestone-detail .md-ev.e4 { top: 296.4px; } .u-web-milestone-detail .md-ev.e5 { top: 353px; } .u-web-milestone-detail .md-ev.e6 { top: 409.6px; } .u-web-milestone-detail .md-ev.e7 { top: 466.2px; }
.u-web-milestone-detail .md-ev .ic { position: absolute; left: 18px; top: 0; display: grid; place-items: center; width: 21px; height: 22px; border-radius: 50%; background: #f1f3f5; color: #8f9296; }
.u-web-milestone-detail .md-ev .ic .pf-i { width: 11px; height: 11px; }
.u-web-milestone-detail .md-ev b { position: absolute; left: 45.6px; top: 0; font-size: 12px; line-height: 22px; font-weight: 500; color: #161a1d; white-space: nowrap; }
.u-web-milestone-detail .md-ev em { position: absolute; left: 89.6px; top: 0; font-size: 11px; line-height: 22px; font-style: normal; color: #b4b7ba; font-family: var(--ui-num); }
.u-web-milestone-detail .md-ev p { position: absolute; left: 45.6px; top: 23.2px; margin: 0; font-size: 12px; line-height: 22px; color: #707377; white-space: nowrap; }


.u-web-milestone-detail .md-z1 { position: absolute; left: 0; top: 157.6px; width: 252px; height: 126.4px; border-radius: 0 8px 8px 0; background: #fdfdff; box-shadow: 2px 3px 16px rgba(30, 50, 100, .12); z-index: 5; }
.u-web-milestone-detail .md-z1 .hl { position: absolute; left: 20px; top: 22.4px; width: 197.6px; height: 88px; border-radius: 3px; background: #e9ecef; }
.u-web-milestone-detail .md-z1 .ci { position: absolute; left: 6px; top: 20.6px; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: #f1f3f5; color: #a2a6ab; font-size: 22px; font-weight: 300; }
.u-web-milestone-detail .md-z1 .l { position: absolute; left: 72.8px; top: 14.4px; line-height: 24px; font-size: 19px; color: #8d9094; white-space: nowrap; }
.u-web-milestone-detail .md-z1 .v { position: absolute; left: 72.8px; top: 50.4px; line-height: 24px; font-size: 19px; color: #161a1d; }
.u-web-milestone-detail .md-z1 .hand { position: absolute; left: 117px; top: 47px; }
.u-web-milestone-detail .md-z2 { position: absolute; left: 0; top: 301.6px; width: 252px; height: 295px; overflow: hidden; border-radius: 0 10px 10px 0; background: #fff; box-shadow: 2px 3px 16px rgba(30, 50, 100, .12); z-index: 5; }
.u-web-milestone-detail .md-z2 .th { position: absolute; left: 0; right: 0; top: 20.8px; height: 32px; font-size: 18px; }
.u-web-milestone-detail .md-z2 .tt { position: absolute; left: -35px; top: 0; line-height: 32px; white-space: nowrap; }
.u-web-milestone-detail .md-z2 .rg i { position: absolute; top: 5px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #d5d9de; background: #fff; }
.u-web-milestone-detail .md-z2 .rg i.r0 { left: 103px; } .u-web-milestone-detail .md-z2 .rg i.r1 { left: 177.6px; border: 2px solid #0a5ceb; background: radial-gradient(circle, #0a5ceb 5px, #fff 5.8px); }
.u-web-milestone-detail .md-z2 .rg span { position: absolute; top: 0; line-height: 32px; }
.u-web-milestone-detail .md-z2 .rg i.r0 + span { left: 137.6px; } .u-web-milestone-detail .md-z2 .rg i.r1 + span { left: 210.4px; }
.u-web-milestone-detail .md-z2 .pn { position: absolute; left: -30px; top: 64px; width: 259.6px; height: 222.4px; border-radius: 0 4px 4px 0; background: #f2f6f9; font-size: 18px; }
.u-web-milestone-detail .md-z2 .f1, .u-web-milestone-detail .md-z2 .f2 { position: absolute; line-height: 24px; white-space: nowrap; }
.u-web-milestone-detail .md-z2 .f1 { left: 7px; top: 18.4px; } .u-web-milestone-detail .md-z2 .f2 { left: -5px; top: 114.4px; }
.u-web-milestone-detail .md-z2 .f1 i, .u-web-milestone-detail .md-z2 .f2 i { margin-right: 1px; color: #e34d59; font-style: normal; }
.u-web-milestone-detail .md-z2 .ig { position: absolute; left: -10px; top: 52px; width: 242.8px; height: 43.2px; box-sizing: border-box; display: flex; border: 1px solid #d9dce0; border-radius: 3px; background: #fff; overflow: hidden; }
.u-web-milestone-detail .md-z2 .pre { display: grid; place-items: center; width: 46px; border-right: 1px solid #d9dce0; background: #f7f8f9; font-size: 18px; }
.u-web-milestone-detail .md-z2 .iv { display: flex; align-items: center; padding-left: 10.4px; font-size: 20px; }
.u-web-milestone-detail .md-z2 .sg { position: absolute; left: 2px; top: 148.8px; width: 240.8px; height: 42.4px; }
.u-web-milestone-detail .md-z2 .sg span { position: absolute; top: 0; display: grid; place-items: center; height: 42.4px; box-sizing: border-box; border: 1px solid #d9dce0; background: #fff; font-size: 20px; }
.u-web-milestone-detail .md-z2 .sg .a { left: 0; width: 120px; border-radius: 3px 0 0 3px; }
.u-web-milestone-detail .md-z2 .sg .b { left: 119px; width: 121.8px; border-color: #0a5ceb; border-radius: 0 3px 3px 0; background: #e8f1fe; color: #0a5ceb; }


.u-web-loop-entry-form { overflow: hidden; background: #fff; border-radius: 11px; }
.u-web-loop-entry-form .ef-stage { position: absolute; left: 0; top: 0; width: 1500px; height: 1162px; transform: scale(.73333); transform-origin: 0 0; color: #1d2129; font-size: 20.7px; line-height: 1.4; overflow: hidden; }
.u-web-loop-entry-form .ef-stage svg { display: block; }
.u-web-loop-entry-form .ef-glow { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, rgba(190, 236, 240, 0) 8%, rgba(190, 236, 240, .55) 30%, rgba(201, 228, 245, .5) 62%, rgba(210, 225, 246, 0) 92%); }


.u-web-loop-entry-form .ef-hd { position: absolute; left: 0; right: 0; top: 0; height: 86px; border-bottom: 1px solid #ebedf0; background: #fff; }
.u-web-loop-entry-form .ef-ttl { position: absolute; left: 24px; top: 26px; font-size: 23.5px; line-height: 36px; font-weight: 600; color: #14171a; white-space: nowrap; }
.u-web-loop-entry-form .ef-tpl { position: absolute; left: 131px; top: 22px; width: 251px; height: 42px; display: flex; align-items: center; padding-left: 12px; border-radius: 8px; background: #f3f5f8; font-size: 20.5px; color: #2b2f33; white-space: nowrap; }
.u-web-loop-entry-form .ef-tpl-k { color: #8a9097; }
.u-web-loop-entry-form .ef-tpl-sp { width: 1px; height: 14px; margin: 0 11px 0 11px; background: #d3d7dc; }
.u-web-loop-entry-form .ef-chev { position: absolute; right: 13px; top: 11px; color: #8a9097; }
.u-web-loop-entry-form .ef-ai { position: absolute; left: 1110px; top: 14px; overflow: visible; }
.u-web-loop-entry-form .ef-hi { position: absolute; top: 33px; color: #2b2f33; }
.u-web-loop-entry-form .ef-hsep { position: absolute; left: 1428px; top: 31px; width: 1px; height: 26px; background: #e7e9ec; }


.u-web-loop-entry-form .ef-title { position: absolute; left: 24px; top: 109px; width: 1023px; height: 59px; display: flex; align-items: center; gap: 13px; padding-left: 14px; border: 1px solid #d9dde3; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 50, .03); }
.u-web-loop-entry-form .ef-title span { font-size: 23.8px; font-weight: 500; letter-spacing: 0; color: #14171a; white-space: nowrap; }


.u-web-loop-entry-form .ef-tb { position: absolute; left: 0; top: 190px; width: 1075px; height: 54px; color: #5d636a; }
.u-web-loop-entry-form .ef-tb::after { content: ""; position: absolute; left: 24px; width: 1023px; bottom: 0; height: 1px; background: #e9ebee; }
.u-web-loop-entry-form .ef-tb > * { position: absolute; }
.u-web-loop-entry-form .ef-t { top: 28px; margin: 0; transform: translate(-50%, -50%); }
.u-web-loop-entry-form .ef-tx { font-size: 20.5px; line-height: 1; color: #3a3f45; white-space: nowrap; }
.u-web-loop-entry-form .ef-nm { font-family: var(--ui-num); font-size: 21px; }
.u-web-loop-entry-form .ef-cv { color: #8a9097; }
.u-web-loop-entry-form .ef-sep { top: 15px; width: 1px; height: 26px; background: #e5e7ea; }
.u-web-loop-entry-form .ef-g { font-size: 26px; line-height: 1; color: #5d636a; font-family: "Helvetica Neue", Arial, sans-serif; }
.u-web-loop-entry-form .ef-i { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 27px; }
.u-web-loop-entry-form .ef-u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.u-web-loop-entry-form .ef-s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.u-web-loop-entry-form .ef-ca { display: flex; flex-direction: column; align-items: center; width: 24px; }
.u-web-loop-entry-form .ef-ca b { font-size: 25px; line-height: 22px; font-weight: 400; color: #4a5056; font-family: "Helvetica Neue", Arial, sans-serif; }
.u-web-loop-entry-form .ef-ca i { width: 22px; height: 3px; margin-top: 1px; border-radius: 1px; background: #e8383d; }


.u-web-loop-entry-form .ef-body { position: absolute; left: 24px; top: 0; width: 1030px; height: 100%; }
.u-web-loop-entry-form .ef-body h3 { position: absolute; left: 0; margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: #14171a; white-space: nowrap; }
.u-web-loop-entry-form .ef-body p { position: absolute; left: 0; margin: 0; font-size: 20.7px; line-height: 38.9px; color: #1d2129; white-space: nowrap; }


.u-web-loop-entry-form .ef-side { position: absolute; left: 1075px; top: 86px; right: 0; bottom: 0; background: #fdfdfd; border-left: 1px solid #f1f2f4; box-shadow: inset 8px 0 14px -12px rgba(30, 40, 60, .08); }
.u-web-loop-entry-form .ef-side > * { position: absolute; }
.u-web-loop-entry-form .ef-sh { left: 20px; top: 26px; font-size: 21px; line-height: 28px; font-weight: 600; color: #14171a; }
.u-web-loop-entry-form .ef-r { left: 0; width: 100%; height: 30px; margin-top: -101px; }
.u-web-loop-entry-form .ef-k { position: absolute; left: 20px; top: 0; font-size: 20.7px; line-height: 30px; color: #868b92; white-space: nowrap; }
.u-web-loop-entry-form .ef-v { position: absolute; left: 187px; top: 0; font-size: 20.7px; line-height: 30px; color: #14171a; white-space: nowrap; }
.u-web-loop-entry-form .ef-ph { color: #c5c8cd; }
.u-web-loop-entry-form .ef-pri { position: absolute; left: 187px; top: 0; width: 29px; height: 27px; margin-top: 1px; display: grid; place-items: center; border-radius: 4px; background: #e6eff9; color: #0a62d0; font-size: 18px; line-height: 1; }
.u-web-loop-entry-form .ef-hr { left: 20px; right: 23px; top: 795px; height: 1px; background: #e6e8eb; }
.u-web-loop-entry-form .ef-up { left: 20px; right: 23px; top: 822px; height: 30px; display: flex; align-items: center; font-size: 20.7px; color: #2b2f33; }
.u-web-loop-entry-form .ef-up > svg { margin-left: 10px; }
.u-web-loop-entry-form .ef-up em { display: flex; align-items: center; gap: 6px; margin-left: auto; font-style: normal; color: #7d838a; }
.u-web-loop-entry-form .ef-f { left: 20px; right: 23px; height: 48px; margin-top: -86px; display: flex; align-items: center; gap: 13px; padding-left: 13px; border-radius: 6px; background: #f1f4f8; font-size: 20.7px; color: #2b2f33; white-space: nowrap; }


.u-web-loop-checkbox { overflow: hidden; background: linear-gradient(90deg, #f1f5fb 0, #f9fcfe 12%, #fdfeff 40%, #fff 100%); }
.u-web-loop-checkbox::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 100% at 0 100%, rgba(228, 238, 248, .4), transparent 70%), radial-gradient(ellipse 40% 80% at 0 0, rgba(230, 238, 250, .35), transparent 70%); }
.u-web-loop-checkbox .lc-stage { position: absolute; left: 0; top: 0; width: 534px; height: 180px; transform: scale(.6742); transform-origin: 0 0; }
.u-web-loop-checkbox .lc-box { position: absolute; left: 67px; top: 67px; width: 46px; height: 46px; border-radius: 9px; background: #0060f1; }
.u-web-loop-checkbox .lc-box svg { position: absolute; inset: 0; }
.u-web-loop-checkbox .lc-txt { position: absolute; left: 141px; top: 62px; font-size: 47px; line-height: 56px; font-weight: 400; color: #16191d; letter-spacing: .4px; white-space: nowrap; }


.u-web-create-step-1 { background: #090d1e; border-radius: 21px; overflow: hidden; --pf-top-h: 58px; --pf-nav-w: 65px; }
.u-web-create-step-1 .cs-stage { position: absolute; left: 0; top: 0; width: 1494px; height: 944px; transform: scale(.96386); transform-origin: 0 0; }
.u-web-create-step-1 .pf-shell { inset: 10px 8px 10px 10px; border-radius: 22px; background: #e9edf8; }


.u-web-create-step-1 .pf-top { padding: 0 25px 0 17px; gap: 12px; }
.u-web-create-step-1 .pf-logo { gap: 13px; }
.u-web-create-step-1 .pf-logo-mark { width: 33px; height: 33px; border-radius: 8px; background-size: 27px; }
.u-web-create-step-1 .pf-logo-name { font-size: 18.5px; font-weight: 800; letter-spacing: .1px; }
.u-web-create-step-1 .pf-top-r { gap: 17px; }
.u-web-create-step-1 .pf-ico-btn { width: 24px; height: 24px; background: rgba(255, 255, 255, .9); color: #7a7f86; }
.u-web-create-step-1 .pf-ico-btn.dot::after { top: -1px; right: -1px; width: 6px; height: 6px; }
.u-web-create-step-1 .pf-user { gap: 9px; font-size: 16px; margin-left: -2px; }
.u-web-create-step-1 .pf-user .pf-i { margin-left: 3px; }


.u-web-create-step-1 .pf-nav { gap: 5.8px; padding: 0 0 19px; }
.u-web-create-step-1 .pf-nav-i { width: 57px; height: 60px; justify-content: flex-start; gap: 5px; padding-top: 7px; font-size: 12px; }
.u-web-create-step-1 .pf-nav-i .pf-i { width: 22px; height: 22px; }
.u-web-create-step-1 .pf-nav-b { gap: 21px; margin-top: auto; }
.u-web-create-step-1 .pf-main { background: #fff; border-top-left-radius: 7px; overflow: hidden; }

.u-web-create-step-1 .cs-ni { --d: #2b3036; --a: #1a63e0; display: block; }
.u-web-create-step-1 .cs-ni .d { fill: none; stroke: var(--d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.u-web-create-step-1 .cs-ni .b { fill: none; stroke: var(--a); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.u-web-create-step-1 .cs-ni .a { fill: var(--a); stroke: none; }
.u-web-create-step-1 .pf-nav-i.on .cs-ni { --d: #0b63f2; --a: #0848b8; }
.u-web-create-step-1 .cs-q { font-size: 14px; font-family: var(--ui-num); color: #80858c; line-height: 1; }
.u-web-create-step-1 .pf-ava { background: #dbe7fb; color: #6e9fe8; }
.u-web-create-step-1 .pf-ava::before { width: 68%; height: 68%; }


.u-web-create-step-1 .cs-back { position: absolute; left: 29px; top: 17px; height: 22px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #14171a; }
.u-web-create-step-1 .cs-back svg { display: block; }
.u-web-create-step-1 .cs-hero { position: absolute; left: 0; right: 0; top: 57px; height: 131px; overflow: hidden; background: linear-gradient(180deg, #fcfdff 0, #fff 100%); }
.u-web-create-step-1 .cs-hero::before { content: ""; position: absolute; left: 330px; top: 0; width: 760px; height: 100%; background: linear-gradient(90deg, rgba(232, 240, 254, .85), rgba(239, 244, 254, .7) 55%, rgba(246, 249, 255, 0)); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 60%, transparent); opacity: .55; }
.u-web-create-step-1 .cs-mos { position: absolute; left: 0; bottom: 0; width: 560px; height: 64px; background: linear-gradient(0deg, rgba(150, 188, 250, .55), rgba(184, 209, 250, .3) 60%, rgba(215, 229, 252, 0)); -webkit-mask: linear-gradient(90deg, transparent 6%, #000 28%, #000 54%, transparent 98%); mask: linear-gradient(90deg, transparent 6%, #000 28%, #000 54%, transparent 98%); }
.u-web-create-step-1 .cs-mos::after { content: ""; position: absolute; inset: 0; filter: blur(.7px); background-image: linear-gradient(90deg, rgba(255, 255, 255, .34) 3px, transparent 3px), linear-gradient(0deg, rgba(255, 255, 255, .34) 3px, transparent 3px), linear-gradient(90deg, rgba(255, 255, 255, .2) 13px, transparent 13px), linear-gradient(0deg, rgba(255, 255, 255, .16) 10px, transparent 10px); background-size: 22px 22px, 22px 22px, 66px 44px, 44px 66px; background-position: 6px 4px, 6px 4px, 11px 0, 0 14px; }
.u-web-create-step-1 .cs-fd { position: absolute; left: 29px; top: 21px; overflow: visible; }
.u-web-create-step-1 .cs-ht { position: absolute; left: 161px; top: 25px; font-size: 16px; line-height: 24px; font-weight: 600; color: #101a33; white-space: nowrap; }
.u-web-create-step-1 .cs-ht b { font-weight: 600; color: #0b4bc2; }
.u-web-create-step-1 .cs-hb { position: absolute; left: 161px; padding-left: 10px; font-size: 12px; line-height: 18px; color: #8b9096; white-space: nowrap; }
.u-web-create-step-1 .cs-hb::before { content: ""; position: absolute; left: 1px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #aab0b8; }


.u-web-create-step-1 .cs-c { position: absolute; left: 315px; top: 0; width: 784px; height: 100%; }
.u-web-create-step-1 .cs-steps { position: absolute; left: 0; top: 246px; width: 784px; height: 24px; display: flex; align-items: center; justify-content: space-between; }
.u-web-create-step-1 .cs-st { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.u-web-create-step-1 .cs-st i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8eaee; color: #9fa3a9; font-size: 13px; font-weight: 500; font-style: normal; font-family: var(--ui-num); }
.u-web-create-step-1 .cs-st b { font-size: 16px; font-weight: 600; color: #b1b4ba; }
.u-web-create-step-1 .cs-st.on i { background: #0a62f0; color: #fff; }
.u-web-create-step-1 .cs-st.on b { color: #14171a; }
.u-web-create-step-1 .cs-ln { flex: 1; height: 1px; margin: 0 26px 0 26px; background: #e3e5e8; }
.u-web-create-step-1 .cs-ln.on { height: 2px; background: #0a62f0; }
.u-web-create-step-1 .cs-st + .cs-ln { margin-right: 24px; }


.u-web-create-step-1 .cs-form { position: absolute; left: 0; top: 321px; width: 784px; display: grid; grid-template-columns: 384px 384px; column-gap: 16px; row-gap: 18px; }
.u-web-create-step-1 .cs-f { display: flex; flex-direction: column; gap: 6px; }
.u-web-create-step-1 .cs-f2 { grid-column: 1 / 3; }
.u-web-create-step-1 .cs-f > label { height: 20px; font-size: 14px; line-height: 20px; color: #161a1d; }
.u-web-create-step-1 .cs-f > label.req::before { content: "*"; margin-right: 1px; color: #e34d59; }
.u-web-create-step-1 .cs-in { width: 100%; height: 32px; padding: 0 8px 0 8px; border-color: #d8dadf; font-size: 14px; }
.u-web-create-step-1 .cs-in .pf-ph { color: #c4c7cc; }
.u-web-create-step-1 .cs-in > .pf-i:last-child { width: 13px; height: 13px; color: #7d8288; margin-right: 1px; }
.u-web-create-step-1 .cs-cnt { margin-left: auto; font-style: normal; font-size: 12px; color: #8b9096; font-family: var(--ui-num); }
.u-web-create-step-1 .cs-ta { position: relative; }
.u-web-create-step-1 .cs-rs { position: absolute; right: 3px; bottom: 3px; }
.u-web-create-step-1 .cs-act { position: absolute; right: 0; display: flex; gap: 8px; }
.u-web-create-step-1 .cs-act .pf-btn { height: 33px; font-size: 14px; border-color: #dcdee2; }
.u-web-create-step-1 .cs-act .pf-btn-p { border-color: #0560fa; background: #0560fa; }
.u-web-create-step-1 .cs-skip { position: absolute; left: 0; height: 20px; display: flex; align-items: center; gap: 3px; font-size: 14px; color: #1668e3; line-height: 20px; }
.u-web-create-step-1 .cs-skip .pf-i { width: 14px; height: 14px; margin: 1px 0 0 -2px; }


.u-web-create-step-1 .cs-tb { position: absolute; left: 0; width: 784px; height: 284px; border: 1px solid #ebedf0; border-radius: 4px; background: #fff; box-shadow: 0 0 6px rgba(30, 50, 100, .04); overflow: hidden; }
.u-web-create-step-1 .cs-th { position: relative; height: 47px; background: #fafafb; color: #8b9096; font-size: 14px; line-height: 47px; }
.u-web-create-step-1 .cs-th span { position: absolute; top: 0; }
.u-web-create-step-1 .cs-tr { position: relative; height: 47px; border-top: 1px solid #ecedf0; font-size: 14px; color: #0f1215; }
.u-web-create-step-1 .cs-tr:first-of-type { border-top: 0; }
.u-web-create-step-1 .cs-tr > * { position: absolute; top: 0; line-height: 46px; white-space: nowrap; }
.u-web-create-step-1 .cs-c1 { left: 13px; }
.u-web-create-step-1 .cs-c2 .pf-ph, .u-web-create-step-1 .cs-c2.pf-ph { color: #c4c7cc; }
.u-web-create-step-1 .cs-mi { left: 750px; top: 15px !important; }
.u-web-create-step-1 .cs-ad { height: 47px; display: flex; align-items: center; gap: 6px; padding-left: 15px; border-top: 1px solid #ecedf0; font-size: 14px; color: #1668e3; }
.u-web-create-step-1 .cs-ad .pf-i { width: 14px; height: 14px; }
.u-web-create-step-1 .cs-ty { left: 13px; display: flex; align-items: center; gap: 7px; }
.u-web-create-step-1 .cs-ty .pf-i { margin-left: 8px; color: #8b9096; }
.u-web-create-step-1 .cs-ti { display: block; }
.u-web-create-step-1 .cs-ell { width: 266px; overflow: hidden; text-overflow: clip; }
.u-web-create-step-1 .cs-se { top: 17px !important; }


.u-web-create-step-2 { background: #090d1e; border-radius: 21px; overflow: hidden; --pf-top-h: 58px; --pf-nav-w: 65px; }
.u-web-create-step-2 .cs-stage { position: absolute; left: 0; top: 0; width: 1494px; height: 944px; transform: scale(.96386); transform-origin: 0 0; }
.u-web-create-step-2 .pf-shell { inset: 10px 8px 10px 10px; border-radius: 22px; background: #e9edf8; }


.u-web-create-step-2 .pf-top { padding: 0 25px 0 17px; gap: 12px; }
.u-web-create-step-2 .pf-logo { gap: 13px; }
.u-web-create-step-2 .pf-logo-mark { width: 33px; height: 33px; border-radius: 8px; background-size: 27px; }
.u-web-create-step-2 .pf-logo-name { font-size: 18.5px; font-weight: 800; letter-spacing: .1px; }
.u-web-create-step-2 .pf-top-r { gap: 17px; }
.u-web-create-step-2 .pf-ico-btn { width: 24px; height: 24px; background: rgba(255, 255, 255, .9); color: #7a7f86; }
.u-web-create-step-2 .pf-ico-btn.dot::after { top: -1px; right: -1px; width: 6px; height: 6px; }
.u-web-create-step-2 .pf-user { gap: 9px; font-size: 16px; margin-left: -2px; }
.u-web-create-step-2 .pf-user .pf-i { margin-left: 3px; }


.u-web-create-step-2 .pf-nav { gap: 5.8px; padding: 0 0 19px; }
.u-web-create-step-2 .pf-nav-i { width: 57px; height: 60px; justify-content: flex-start; gap: 5px; padding-top: 7px; font-size: 12px; }
.u-web-create-step-2 .pf-nav-i .pf-i { width: 22px; height: 22px; }
.u-web-create-step-2 .pf-nav-b { gap: 21px; margin-top: auto; }
.u-web-create-step-2 .pf-main { background: #fff; border-top-left-radius: 7px; overflow: hidden; }

.u-web-create-step-2 .cs-ni { --d: #2b3036; --a: #1a63e0; display: block; }
.u-web-create-step-2 .cs-ni .d { fill: none; stroke: var(--d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.u-web-create-step-2 .cs-ni .b { fill: none; stroke: var(--a); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.u-web-create-step-2 .cs-ni .a { fill: var(--a); stroke: none; }
.u-web-create-step-2 .pf-nav-i.on .cs-ni { --d: #0b63f2; --a: #0848b8; }
.u-web-create-step-2 .cs-q { font-size: 14px; font-family: var(--ui-num); color: #80858c; line-height: 1; }
.u-web-create-step-2 .pf-ava { background: #dbe7fb; color: #6e9fe8; }
.u-web-create-step-2 .pf-ava::before { width: 68%; height: 68%; }


.u-web-create-step-2 .cs-back { position: absolute; left: 29px; top: 17px; height: 22px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #14171a; }
.u-web-create-step-2 .cs-back svg { display: block; }
.u-web-create-step-2 .cs-hero { position: absolute; left: 0; right: 0; top: 57px; height: 131px; overflow: hidden; background: linear-gradient(180deg, #fcfdff 0, #fff 100%); }
.u-web-create-step-2 .cs-hero::before { content: ""; position: absolute; left: 330px; top: 0; width: 760px; height: 100%; background: linear-gradient(90deg, rgba(232, 240, 254, .85), rgba(239, 244, 254, .7) 55%, rgba(246, 249, 255, 0)); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 60%, transparent); opacity: .55; }
.u-web-create-step-2 .cs-mos { position: absolute; left: 0; bottom: 0; width: 560px; height: 64px; background: linear-gradient(0deg, rgba(150, 188, 250, .55), rgba(184, 209, 250, .3) 60%, rgba(215, 229, 252, 0)); -webkit-mask: linear-gradient(90deg, transparent 6%, #000 28%, #000 54%, transparent 98%); mask: linear-gradient(90deg, transparent 6%, #000 28%, #000 54%, transparent 98%); }
.u-web-create-step-2 .cs-mos::after { content: ""; position: absolute; inset: 0; filter: blur(.7px); background-image: linear-gradient(90deg, rgba(255, 255, 255, .34) 3px, transparent 3px), linear-gradient(0deg, rgba(255, 255, 255, .34) 3px, transparent 3px), linear-gradient(90deg, rgba(255, 255, 255, .2) 13px, transparent 13px), linear-gradient(0deg, rgba(255, 255, 255, .16) 10px, transparent 10px); background-size: 22px 22px, 22px 22px, 66px 44px, 44px 66px; background-position: 6px 4px, 6px 4px, 11px 0, 0 14px; }
.u-web-create-step-2 .cs-fd { position: absolute; left: 29px; top: 21px; overflow: visible; }
.u-web-create-step-2 .cs-ht { position: absolute; left: 161px; top: 25px; font-size: 16px; line-height: 24px; font-weight: 600; color: #101a33; white-space: nowrap; }
.u-web-create-step-2 .cs-ht b { font-weight: 600; color: #0b4bc2; }
.u-web-create-step-2 .cs-hb { position: absolute; left: 161px; padding-left: 10px; font-size: 12px; line-height: 18px; color: #8b9096; white-space: nowrap; }
.u-web-create-step-2 .cs-hb::before { content: ""; position: absolute; left: 1px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #aab0b8; }


.u-web-create-step-2 .cs-c { position: absolute; left: 315px; top: 0; width: 784px; height: 100%; }
.u-web-create-step-2 .cs-steps { position: absolute; left: 0; top: 246px; width: 784px; height: 24px; display: flex; align-items: center; justify-content: space-between; }
.u-web-create-step-2 .cs-st { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.u-web-create-step-2 .cs-st i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8eaee; color: #9fa3a9; font-size: 13px; font-weight: 500; font-style: normal; font-family: var(--ui-num); }
.u-web-create-step-2 .cs-st b { font-size: 16px; font-weight: 600; color: #b1b4ba; }
.u-web-create-step-2 .cs-st.on i { background: #0a62f0; color: #fff; }
.u-web-create-step-2 .cs-st.on b { color: #14171a; }
.u-web-create-step-2 .cs-ln { flex: 1; height: 1px; margin: 0 26px 0 26px; background: #e3e5e8; }
.u-web-create-step-2 .cs-ln.on { height: 2px; background: #0a62f0; }
.u-web-create-step-2 .cs-st + .cs-ln { margin-right: 24px; }


.u-web-create-step-2 .cs-form { position: absolute; left: 0; top: 321px; width: 784px; display: grid; grid-template-columns: 384px 384px; column-gap: 16px; row-gap: 18px; }
.u-web-create-step-2 .cs-f { display: flex; flex-direction: column; gap: 6px; }
.u-web-create-step-2 .cs-f2 { grid-column: 1 / 3; }
.u-web-create-step-2 .cs-f > label { height: 20px; font-size: 14px; line-height: 20px; color: #161a1d; }
.u-web-create-step-2 .cs-f > label.req::before { content: "*"; margin-right: 1px; color: #e34d59; }
.u-web-create-step-2 .cs-in { width: 100%; height: 32px; padding: 0 8px 0 8px; border-color: #d8dadf; font-size: 14px; }
.u-web-create-step-2 .cs-in .pf-ph { color: #c4c7cc; }
.u-web-create-step-2 .cs-in > .pf-i:last-child { width: 13px; height: 13px; color: #7d8288; margin-right: 1px; }
.u-web-create-step-2 .cs-cnt { margin-left: auto; font-style: normal; font-size: 12px; color: #8b9096; font-family: var(--ui-num); }
.u-web-create-step-2 .cs-ta { position: relative; }
.u-web-create-step-2 .cs-rs { position: absolute; right: 3px; bottom: 3px; }
.u-web-create-step-2 .cs-act { position: absolute; right: 0; display: flex; gap: 8px; }
.u-web-create-step-2 .cs-act .pf-btn { height: 33px; font-size: 14px; border-color: #dcdee2; }
.u-web-create-step-2 .cs-act .pf-btn-p { border-color: #0560fa; background: #0560fa; }
.u-web-create-step-2 .cs-skip { position: absolute; left: 0; height: 20px; display: flex; align-items: center; gap: 3px; font-size: 14px; color: #1668e3; line-height: 20px; }
.u-web-create-step-2 .cs-skip .pf-i { width: 14px; height: 14px; margin: 1px 0 0 -2px; }


.u-web-create-step-2 .cs-tb { position: absolute; left: 0; width: 784px; height: 284px; border: 1px solid #ebedf0; border-radius: 4px; background: #fff; box-shadow: 0 0 6px rgba(30, 50, 100, .04); overflow: hidden; }
.u-web-create-step-2 .cs-th { position: relative; height: 47px; background: #fafafb; color: #8b9096; font-size: 14px; line-height: 47px; }
.u-web-create-step-2 .cs-th span { position: absolute; top: 0; }
.u-web-create-step-2 .cs-tr { position: relative; height: 47px; border-top: 1px solid #ecedf0; font-size: 14px; color: #0f1215; }
.u-web-create-step-2 .cs-tr:first-of-type { border-top: 0; }
.u-web-create-step-2 .cs-tr > * { position: absolute; top: 0; line-height: 46px; white-space: nowrap; }
.u-web-create-step-2 .cs-c1 { left: 13px; }
.u-web-create-step-2 .cs-c2 .pf-ph, .u-web-create-step-2 .cs-c2.pf-ph { color: #c4c7cc; }
.u-web-create-step-2 .cs-mi { left: 750px; top: 15px !important; }
.u-web-create-step-2 .cs-ad { height: 47px; display: flex; align-items: center; gap: 6px; padding-left: 15px; border-top: 1px solid #ecedf0; font-size: 14px; color: #1668e3; }
.u-web-create-step-2 .cs-ad .pf-i { width: 14px; height: 14px; }
.u-web-create-step-2 .cs-ty { left: 13px; display: flex; align-items: center; gap: 7px; }
.u-web-create-step-2 .cs-ty .pf-i { margin-left: 8px; color: #8b9096; }
.u-web-create-step-2 .cs-ti { display: block; }
.u-web-create-step-2 .cs-ell { width: 266px; overflow: hidden; text-overflow: clip; }
.u-web-create-step-2 .cs-se { top: 17px !important; }


.u-web-create-step-3 { background: #090d1e; border-radius: 21px; overflow: hidden; --pf-top-h: 58px; --pf-nav-w: 65px; }
.u-web-create-step-3 .cs-stage { position: absolute; left: 0; top: 0; width: 1494px; height: 944px; transform: scale(.96386); transform-origin: 0 0; }
.u-web-create-step-3 .pf-shell { inset: 10px 8px 10px 10px; border-radius: 22px; background: #e9edf8; }


.u-web-create-step-3 .pf-top { padding: 0 25px 0 17px; gap: 12px; }
.u-web-create-step-3 .pf-logo { gap: 13px; }
.u-web-create-step-3 .pf-logo-mark { width: 33px; height: 33px; border-radius: 8px; background-size: 27px; }
.u-web-create-step-3 .pf-logo-name { font-size: 18.5px; font-weight: 800; letter-spacing: .1px; }
.u-web-create-step-3 .pf-top-r { gap: 17px; }
.u-web-create-step-3 .pf-ico-btn { width: 24px; height: 24px; background: rgba(255, 255, 255, .9); color: #7a7f86; }
.u-web-create-step-3 .pf-ico-btn.dot::after { top: -1px; right: -1px; width: 6px; height: 6px; }
.u-web-create-step-3 .pf-user { gap: 9px; font-size: 16px; margin-left: -2px; }
.u-web-create-step-3 .pf-user .pf-i { margin-left: 3px; }


.u-web-create-step-3 .pf-nav { gap: 5.8px; padding: 0 0 19px; }
.u-web-create-step-3 .pf-nav-i { width: 57px; height: 60px; justify-content: flex-start; gap: 5px; padding-top: 7px; font-size: 12px; }
.u-web-create-step-3 .pf-nav-i .pf-i { width: 22px; height: 22px; }
.u-web-create-step-3 .pf-nav-b { gap: 21px; margin-top: auto; }
.u-web-create-step-3 .pf-main { background: #fff; border-top-left-radius: 7px; overflow: hidden; }

.u-web-create-step-3 .cs-ni { --d: #2b3036; --a: #1a63e0; display: block; }
.u-web-create-step-3 .cs-ni .d { fill: none; stroke: var(--d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.u-web-create-step-3 .cs-ni .b { fill: none; stroke: var(--a); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.u-web-create-step-3 .cs-ni .a { fill: var(--a); stroke: none; }
.u-web-create-step-3 .pf-nav-i.on .cs-ni { --d: #0b63f2; --a: #0848b8; }
.u-web-create-step-3 .cs-q { font-size: 14px; font-family: var(--ui-num); color: #80858c; line-height: 1; }
.u-web-create-step-3 .pf-ava { background: #dbe7fb; color: #6e9fe8; }
.u-web-create-step-3 .pf-ava::before { width: 68%; height: 68%; }


.u-web-create-step-3 .cs-back { position: absolute; left: 29px; top: 17px; height: 22px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #14171a; }
.u-web-create-step-3 .cs-back svg { display: block; }
.u-web-create-step-3 .cs-hero { position: absolute; left: 0; right: 0; top: 57px; height: 131px; overflow: hidden; background: linear-gradient(180deg, #fcfdff 0, #fff 100%); }
.u-web-create-step-3 .cs-hero::before { content: ""; position: absolute; left: 330px; top: 0; width: 760px; height: 100%; background: linear-gradient(90deg, rgba(232, 240, 254, .85), rgba(239, 244, 254, .7) 55%, rgba(246, 249, 255, 0)); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 60%, transparent); opacity: .55; }
.u-web-create-step-3 .cs-mos { position: absolute; left: 0; bottom: 0; width: 560px; height: 64px; background: linear-gradient(0deg, rgba(150, 188, 250, .55), rgba(184, 209, 250, .3) 60%, rgba(215, 229, 252, 0)); -webkit-mask: linear-gradient(90deg, transparent 6%, #000 28%, #000 54%, transparent 98%); mask: linear-gradient(90deg, transparent 6%, #000 28%, #000 54%, transparent 98%); }
.u-web-create-step-3 .cs-mos::after { content: ""; position: absolute; inset: 0; filter: blur(.7px); background-image: linear-gradient(90deg, rgba(255, 255, 255, .34) 3px, transparent 3px), linear-gradient(0deg, rgba(255, 255, 255, .34) 3px, transparent 3px), linear-gradient(90deg, rgba(255, 255, 255, .2) 13px, transparent 13px), linear-gradient(0deg, rgba(255, 255, 255, .16) 10px, transparent 10px); background-size: 22px 22px, 22px 22px, 66px 44px, 44px 66px; background-position: 6px 4px, 6px 4px, 11px 0, 0 14px; }
.u-web-create-step-3 .cs-fd { position: absolute; left: 29px; top: 21px; overflow: visible; }
.u-web-create-step-3 .cs-ht { position: absolute; left: 161px; top: 25px; font-size: 16px; line-height: 24px; font-weight: 600; color: #101a33; white-space: nowrap; }
.u-web-create-step-3 .cs-ht b { font-weight: 600; color: #0b4bc2; }
.u-web-create-step-3 .cs-hb { position: absolute; left: 161px; padding-left: 10px; font-size: 12px; line-height: 18px; color: #8b9096; white-space: nowrap; }
.u-web-create-step-3 .cs-hb::before { content: ""; position: absolute; left: 1px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #aab0b8; }


.u-web-create-step-3 .cs-c { position: absolute; left: 315px; top: 0; width: 784px; height: 100%; }
.u-web-create-step-3 .cs-steps { position: absolute; left: 0; top: 246px; width: 784px; height: 24px; display: flex; align-items: center; justify-content: space-between; }
.u-web-create-step-3 .cs-st { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.u-web-create-step-3 .cs-st i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8eaee; color: #9fa3a9; font-size: 13px; font-weight: 500; font-style: normal; font-family: var(--ui-num); }
.u-web-create-step-3 .cs-st b { font-size: 16px; font-weight: 600; color: #b1b4ba; }
.u-web-create-step-3 .cs-st.on i { background: #0a62f0; color: #fff; }
.u-web-create-step-3 .cs-st.on b { color: #14171a; }
.u-web-create-step-3 .cs-ln { flex: 1; height: 1px; margin: 0 26px 0 26px; background: #e3e5e8; }
.u-web-create-step-3 .cs-ln.on { height: 2px; background: #0a62f0; }
.u-web-create-step-3 .cs-st + .cs-ln { margin-right: 24px; }


.u-web-create-step-3 .cs-form { position: absolute; left: 0; top: 321px; width: 784px; display: grid; grid-template-columns: 384px 384px; column-gap: 16px; row-gap: 18px; }
.u-web-create-step-3 .cs-f { display: flex; flex-direction: column; gap: 6px; }
.u-web-create-step-3 .cs-f2 { grid-column: 1 / 3; }
.u-web-create-step-3 .cs-f > label { height: 20px; font-size: 14px; line-height: 20px; color: #161a1d; }
.u-web-create-step-3 .cs-f > label.req::before { content: "*"; margin-right: 1px; color: #e34d59; }
.u-web-create-step-3 .cs-in { width: 100%; height: 32px; padding: 0 8px 0 8px; border-color: #d8dadf; font-size: 14px; }
.u-web-create-step-3 .cs-in .pf-ph { color: #c4c7cc; }
.u-web-create-step-3 .cs-in > .pf-i:last-child { width: 13px; height: 13px; color: #7d8288; margin-right: 1px; }
.u-web-create-step-3 .cs-cnt { margin-left: auto; font-style: normal; font-size: 12px; color: #8b9096; font-family: var(--ui-num); }
.u-web-create-step-3 .cs-ta { position: relative; }
.u-web-create-step-3 .cs-rs { position: absolute; right: 3px; bottom: 3px; }
.u-web-create-step-3 .cs-act { position: absolute; right: 0; display: flex; gap: 8px; }
.u-web-create-step-3 .cs-act .pf-btn { height: 33px; font-size: 14px; border-color: #dcdee2; }
.u-web-create-step-3 .cs-act .pf-btn-p { border-color: #0560fa; background: #0560fa; }
.u-web-create-step-3 .cs-skip { position: absolute; left: 0; height: 20px; display: flex; align-items: center; gap: 3px; font-size: 14px; color: #1668e3; line-height: 20px; }
.u-web-create-step-3 .cs-skip .pf-i { width: 14px; height: 14px; margin: 1px 0 0 -2px; }


.u-web-create-step-3 .cs-tb { position: absolute; left: 0; width: 784px; height: 284px; border: 1px solid #ebedf0; border-radius: 4px; background: #fff; box-shadow: 0 0 6px rgba(30, 50, 100, .04); overflow: hidden; }
.u-web-create-step-3 .cs-th { position: relative; height: 47px; background: #fafafb; color: #8b9096; font-size: 14px; line-height: 47px; }
.u-web-create-step-3 .cs-th span { position: absolute; top: 0; }
.u-web-create-step-3 .cs-tr { position: relative; height: 47px; border-top: 1px solid #ecedf0; font-size: 14px; color: #0f1215; }
.u-web-create-step-3 .cs-tr:first-of-type { border-top: 0; }
.u-web-create-step-3 .cs-tr > * { position: absolute; top: 0; line-height: 46px; white-space: nowrap; }
.u-web-create-step-3 .cs-c1 { left: 13px; }
.u-web-create-step-3 .cs-c2 .pf-ph, .u-web-create-step-3 .cs-c2.pf-ph { color: #c4c7cc; }
.u-web-create-step-3 .cs-mi { left: 750px; top: 15px !important; }
.u-web-create-step-3 .cs-ad { height: 47px; display: flex; align-items: center; gap: 6px; padding-left: 15px; border-top: 1px solid #ecedf0; font-size: 14px; color: #1668e3; }
.u-web-create-step-3 .cs-ad .pf-i { width: 14px; height: 14px; }
.u-web-create-step-3 .cs-ty { left: 13px; display: flex; align-items: center; gap: 7px; }
.u-web-create-step-3 .cs-ty .pf-i { margin-left: 8px; color: #8b9096; }
.u-web-create-step-3 .cs-ti { display: block; }
.u-web-create-step-3 .cs-ell { width: 266px; overflow: hidden; text-overflow: clip; }
.u-web-create-step-3 .cs-se { top: 17px !important; }



.u-web-low-freq-settings { --k: .8px; --pf-top-h: 50px; --pf-nav-w: 56px; --pf-sub-w: 116px; background: #050b1a; overflow: hidden; }
.u-web-low-freq-settings .pf-shell { inset: 0 10px 3px 0; border-radius: 0 22px 0 0; background: radial-gradient(ellipse 260px 120px at 0 0, #d4f1fc, transparent), linear-gradient(90deg, #e4ebfc, var(--pf-shell) 45%); }


.u-web-low-freq-settings .pf-i-arrow-l { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4.5M10.5 5.5L4 12l6.5 6.5'/></svg>"); }
.u-web-low-freq-settings .pf-i-swap { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9h15.5M15.5 5l4 4-4 4M20 15H4.5M8.5 11l-4 4 4 4'/></svg>"); }
.u-web-low-freq-settings .pf-i-tag { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.8 12.4V5.2a1.4 1.4 0 0 1 1.4-1.4h7.2l8 8a1.6 1.6 0 0 1 0 2.2l-6 6a1.6 1.6 0 0 1-2.2 0l-8.4-7.6z'/><circle cx='8.4' cy='8.4' r='1.3'/></svg>"); }
.u-web-low-freq-settings .pf-i-commit { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.4'/><path d='M2.5 12h6.1M15.4 12h6.1'/></svg>"); }
.u-web-low-freq-settings .pf-i-filecode { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h7.5l4.5 4.5v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-15.5a1 1 0 0 1 1-1z'/><path d='M14 3.5V8h4.5M10.5 12.5l-2 2 2 2M13.5 12.5l2 2-2 2'/></svg>"); }
.u-web-low-freq-settings .pf-i-key { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><circle cx='12' cy='10.2' r='2.6'/><path d='M12 12.8v3.6M12 14.6h1.8'/></svg>"); }


.u-web-low-freq-settings .pf-top { gap: 13px; padding: 0 16px 0 14px; }
.u-web-low-freq-settings .pf-logo { gap: 12px; }
.u-web-low-freq-settings .pf-logo-mark { width: 28px; height: 28px; background-size: 22px; border-radius: 7px; }
.u-web-low-freq-settings .pf-logo-name { font-size: 15.5px; }
.u-web-low-freq-settings .pf-proj { height: 27px; padding: 0 9px; gap: 7px; font-size: 12.3px; border-radius: 7px; }
.u-web-low-freq-settings .pf-proj .pf-i { width: 14px; height: 14px; }
.u-web-low-freq-settings .pf-top-r { gap: 8px; }
.u-web-low-freq-settings .pf-ico-btn { width: 19px; height: 19px; background: rgba(255, 255, 255, .8); }
.u-web-low-freq-settings .pf-ico-btn .pf-i { width: 11px; height: 11px; }
.u-web-low-freq-settings .pf-ico-btn.dot::after { top: 1px; right: 1px; width: 5px; height: 5px; }
.u-web-low-freq-settings .pf-user { gap: 6px; font-size: 12.3px; }
.u-web-low-freq-settings .pf-user .pf-ava { width: 17px; height: 17px; }
.u-web-low-freq-settings .pf-nav { gap: 8.5px; align-items: center; padding: 0 0 15px; }
.u-web-low-freq-settings .pf-nav-i { width: 46px; height: 48px; gap: 3px; justify-content: flex-start; padding-top: 6px; font-size: 11.5px; color: #2f343a; }
.u-web-low-freq-settings .pf-nav-i .pf-i { width: 20px; height: 20px; }
.u-web-low-freq-settings .pf-nav-i.on { box-shadow: none; }
.u-web-low-freq-settings .pf-nav-b { gap: 15px; }
.u-web-low-freq-settings .pf-nav-b .pf-i { width: 17px; height: 17px; }
.u-web-low-freq-settings .pf-sub { padding: 6px 7px 0 8px; background: #fcfdff; border-right: 1px solid #eef0f4; border-radius: 7px 0 0 0; }
.u-web-low-freq-settings .pf-sub-i { height: 32px; margin: 0; gap: 9px; padding: 0 8px; font-size: 12.3px; color: #2a2f35; border-radius: 3px; }
.u-web-low-freq-settings .pf-sub-i .pf-i { width: 13px; height: 13px; }
.u-web-low-freq-settings .pf-sub-i.on { background: #e9f1fe; }
.u-web-low-freq-settings .pf-sub-i.lf-c { padding-left: 30px; }
.u-web-low-freq-settings .lf-chev { margin-left: auto; width: 10px; height: 10px; color: #a9adb2; }
.u-web-low-freq-settings .pf-main { background: #fff; }


.u-web-low-freq-settings .lf-ov { position: absolute; left: 0; top: 0; width: 1280px; height: 797px; overflow: hidden; pointer-events: none; }
.u-web-low-freq-settings .lf-ov > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); white-space: nowrap; }
.u-web-low-freq-settings .lf-t { transform: translateY(-50%); font-size: calc(15.3 * var(--k)); line-height: 1.3; color: #26292d; }
.u-web-low-freq-settings .lf-ic { transform: translateY(-50%); width: calc(var(--sz) * var(--k)); height: calc(var(--sz) * var(--k)); color: #1d2125; }
.u-web-low-freq-settings .lf-repo { font-size: calc(22.2 * var(--k)); font-weight: 600; letter-spacing: 0; color: #1b1f23; }
.u-web-low-freq-settings .lf-sw { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--k)); width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 3px; background: #e6efff; color: #1a62e8; font-size: calc(15.3 * var(--k)); }
.u-web-low-freq-settings .lf-vl { width: 1px; height: calc(var(--h) * var(--k)); background: #dde0e5; }
.u-web-low-freq-settings .lf-tab { display: flex; align-items: center; gap: calc(6 * var(--k)); transform: translateY(-50%); font-size: calc(17.5 * var(--k)); color: #5d6166; }
.u-web-low-freq-settings .lf-tab .pf-i { width: calc(17 * var(--k)); height: calc(17 * var(--k)); color: #7b7f84; }
.u-web-low-freq-settings .lf-tab.on, .u-web-low-freq-settings .lf-tab.on .pf-i { color: #0a5fe8; }
.u-web-low-freq-settings .lf-ul { height: calc(3.4 * var(--k)); width: calc(var(--w) * var(--k)); border-radius: 2px; background: #0a5fe8; }
.u-web-low-freq-settings .lf-line-v { width: 1px; height: calc(900 * var(--k)); background: #eff1f4; }
.u-web-low-freq-settings .lf-mi { display: flex; align-items: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); padding-left: calc(8 * var(--k)); border-radius: 3px; font-size: calc(15.5 * var(--k)); color: #8b8f94; }
.u-web-low-freq-settings .lf-mi.on { background: #e9f1fe; color: #1d63e8; }
.u-web-low-freq-settings .lf-card { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #f0f1f4; border-radius: 4px; background: #fcfcfd; box-sizing: border-box; box-shadow: 0 1px 6px rgba(30, 50, 100, .025); }
.u-web-low-freq-settings .lf-h { font-size: calc(16.3 * var(--k)); font-weight: 600; color: #15191c; }
.u-web-low-freq-settings .lf-k { color: #8a8e93; display: flex; align-items: center; gap: calc(7 * var(--k)); }
.u-web-low-freq-settings .lf-v { color: #25292d; }
.u-web-low-freq-settings .lf-pen { color: #8a8e93; }
.u-web-low-freq-settings .lf-hr { width: calc(var(--w) * var(--k)); height: 1px; background: #ebedf0; }
.u-web-low-freq-settings .lf-b { font-size: calc(15.8 * var(--k)); font-weight: 600; color: #15191c; }
.u-web-low-freq-settings .lf-d { color: #858a8f; }
.u-web-low-freq-settings .lf-d em { font-style: normal; color: #ee4a5c; }
.u-web-low-freq-settings .lf-rb { display: flex; align-items: center; justify-content: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 3px; background: #f4505f; color: #fff; font-size: calc(15 * var(--k)); }


.u-web-low-freq-settings .lf-call { position: absolute; left: 0; top: 0; overflow: visible; }
.u-web-low-freq-settings .lf-zm { position: absolute; left: calc(1373 * var(--k)); top: calc(757 * var(--k)); width: 460px; height: 320px; border-radius: 19px; background: #fff; box-shadow: 0 0 64px 18px rgba(156, 162, 222, .22); }
.u-web-low-freq-settings .lf-zm-t { position: absolute; left: calc(55 * var(--k)); top: calc(52 * var(--k)); font-size: 22px; line-height: 30px; font-weight: 500; color: #15191c; }
.u-web-low-freq-settings .lf-zm-p { position: absolute; left: calc(55 * var(--k)); top: calc(135 * var(--k)); font-size: 20px; line-height: 28px; color: #26292d; white-space: nowrap; }
.u-web-low-freq-settings .lf-zm-p b { font-weight: 500; }
.u-web-low-freq-settings .lf-zm-a { position: absolute; left: calc(55 * var(--k)); top: calc(196 * var(--k)); width: 420px; height: 90px; display: flex; align-items: center; gap: 10px; padding-left: 18px; border-radius: 4px; background: #fdf1e7; font-size: 19px; color: #26292d; white-space: nowrap; align-items: flex-start; padding-top: 14px; box-sizing: border-box; }
.u-web-low-freq-settings .lf-zm-i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #ee7b2d; color: #fff; font-size: 13px; font-weight: 700; font-style: normal; margin-top: 2px; }



.u-web-low-freq-modal { --k: .5px; background: #e4e7ee; overflow: hidden; }
.u-web-low-freq-modal .lm-card { position: absolute; left: 0; top: 0; right: 0; bottom: 2px; border-radius: 12px; background: radial-gradient(ellipse 260px 120px at 70% 0, #f1f3f8, transparent), linear-gradient(90deg, #f4f5f9 0, #fff 18%); }
.u-web-low-freq-modal .lm-ov { position: absolute; inset: 0; color: #25292d; }
.u-web-low-freq-modal .lm-ov > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); white-space: nowrap; }
.u-web-low-freq-modal .lm-t { transform: translateY(-50%); font-size: calc(28.4 * var(--k)); line-height: 1.3; }
.u-web-low-freq-modal .lm-title { font-size: calc(32 * var(--k)); font-weight: 600; color: #14181b; }
.u-web-low-freq-modal .lm-x { width: calc(30 * var(--k)); height: calc(30 * var(--k)); color: #8c9096; }
.u-web-low-freq-modal .lm-p b { font-weight: 500; color: #15191c; }
.u-web-low-freq-modal .lm-warn { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: linear-gradient(90deg, #fdeee4, #fdefe5 60%, #fdf0e6); }
.u-web-low-freq-modal .lm-wi { display: grid; place-items: center; width: calc(28 * var(--k)); height: calc(28 * var(--k)); border-radius: 50%; background: #ee7b2d; color: #fff; font-size: calc(21 * var(--k)); font-weight: 700; font-style: normal; line-height: 1; }
.u-web-low-freq-modal .lm-wt { font-size: calc(24.3 * var(--k)); color: #2c3034; }
.u-web-low-freq-modal .lm-w1 { font-size: calc(24.3 * var(--k)); color: #7c8085; }
.u-web-low-freq-modal .lm-w2 { font-size: calc(24.3 * var(--k)); font-weight: 600; color: #e5454f; }
.u-web-low-freq-modal .lm-lb { display: flex; align-items: center; color: #1d2125; }
.u-web-low-freq-modal .lm-lb em { margin-right: calc(2 * var(--k)); color: #e5454f; font-style: normal; font-weight: 700; }
.u-web-low-freq-modal .lm-inf { width: calc(31 * var(--k)); height: calc(31 * var(--k)); margin-left: calc(10 * var(--k)); color: #a3a7ad; }
.u-web-low-freq-modal .lm-in { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #c9ccd1; border-radius: 4px; background: #fff; }
.u-web-low-freq-modal .lm-iv { color: #1d2125; }
.u-web-low-freq-modal .lm-ph { color: #b5b8bd; }
.u-web-low-freq-modal .lm-path { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #f2f4f7; }
.u-web-low-freq-modal .lm-pk { color: #8b8f94; }
.u-web-low-freq-modal .lm-pv { color: #1d2125; }
.u-web-low-freq-modal .lm-hr { width: calc(var(--w) * var(--k)); height: 1px; background: #e4e6e9; }
.u-web-low-freq-modal .lm-btn { display: flex; align-items: center; justify-content: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; font-size: calc(28 * var(--k)); }
.u-web-low-freq-modal .lm-cancel { background: #e9eaec; color: #1d2125; }
.u-web-low-freq-modal .lm-ok { background: #e8505f; color: #fff; }



.u-web-artifact-modal { --ks: .6388; --k: calc(var(--ks) * 1px); background: #fff; overflow: hidden; border-radius: 10px 0 0 0; color: #1d2125; }
.u-web-artifact-modal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #f6f8fd, #fff 22%); }
.u-web-artifact-modal .am-edge { position: absolute; left: 0; top: 0; width: 7px; height: 80px; background: linear-gradient(180deg, #8a8e96 0, #a9adb5 55%, rgba(200, 204, 212, 0)); }
.u-web-artifact-modal .am-ov { position: absolute; inset: 0; }
.u-web-artifact-modal .am-ov > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); white-space: nowrap; }
.u-web-artifact-modal .am-t { transform: translateY(-50%); font-size: calc(22.4 * var(--k)); line-height: 1.3; }
.u-web-artifact-modal .am-title { font-size: calc(25.2 * var(--k)); font-weight: 600; color: #14181b; }
.u-web-artifact-modal .am-x { width: calc(23 * var(--k)); height: calc(23 * var(--k)); color: #1d2125; }
.u-web-artifact-modal .am-band { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); background: linear-gradient(90deg, #e8f0fc, #eef3fb); }
.u-web-artifact-modal .am-k { font-size: calc(22.4 * var(--k)); color: #6f7377; }
.u-web-artifact-modal .am-proj { font-size: calc(26 * var(--k)); color: #1d2125; }
.u-web-artifact-modal .am-lb { display: flex; align-items: center; color: #1d2125; }
.u-web-artifact-modal .am-lb em { margin-right: calc(1.5 * var(--k)); color: #e5454f; font-style: normal; font-weight: 700; }
.u-web-artifact-modal .am-inf { width: calc(27 * var(--k)); height: calc(27 * var(--k)); margin-left: calc(9 * var(--k)); color: #9a9ea4; }
.u-web-artifact-modal .am-opt { width: calc(194 * var(--k)); height: calc(128 * var(--k)); border: 1px solid #dfe2e6; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(30, 50, 100, .04); }
.u-web-artifact-modal .am-opt.on { border: 1.5px solid #3b7fd6; background: #eef3fd; }
.u-web-artifact-modal .am-ol { color: #1d2125; }
.u-web-artifact-modal .am-ol.on { color: #2b6fd6; }
.u-web-artifact-modal .am-fold, .u-web-artifact-modal .am-pk, .u-web-artifact-modal .am-wh, .u-web-artifact-modal .am-tri, .u-web-artifact-modal .am-rs, .u-web-artifact-modal .am-call { width: auto; height: auto; transform-origin: 0 0; scale: var(--ks); overflow: visible; }
.u-web-artifact-modal .am-in { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #d9dce0; border-radius: 3px; background: #fff; }
.u-web-artifact-modal .am-ph { color: #bfc2c6; }
.u-web-artifact-modal .am-sec { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); background: #f3f5f8; }
.u-web-artifact-modal .am-chev { width: calc(24 * var(--k)); height: calc(24 * var(--k)); color: #1d2125; --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 5.5l6.5 6.5-6.5 6.5'/></svg>"); }
.u-web-artifact-modal .am-sech { font-size: calc(23.2 * var(--k)); font-weight: 600; color: #14181b; }
.u-web-artifact-modal .am-inf2 { width: calc(27 * var(--k)); height: calc(27 * var(--k)); color: #9a9ea4; }
.u-web-artifact-modal .am-add { display: flex; align-items: center; gap: calc(11 * var(--k)); color: #0a5fe8; font-size: calc(22.6 * var(--k)); }
.u-web-artifact-modal .am-add .pf-i { width: calc(21 * var(--k)); height: calc(21 * var(--k)); }
.u-web-artifact-modal .am-fline { width: calc(var(--w) * var(--k)); height: 1px; background: #eceef1; }
.u-web-artifact-modal .am-btn { display: flex; align-items: center; justify-content: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 3px; font-size: calc(23 * var(--k)); }
.u-web-artifact-modal .am-ok { background: #0a5fe8; color: #fff; }
.u-web-artifact-modal .am-cc { background: #e8e9eb; color: #1d2125; }



.u-web-sync-panel { --ks: .639; --k: calc(var(--ks) * 1px); background: #fff; overflow: hidden; color: #1d2125; }
.u-web-sync-panel::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: calc(34 * var(--k)); background: linear-gradient(180deg, #f6f7fa, #fff); }
.u-web-sync-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(12 * var(--k)); background: #f3f4f7; }
.u-web-sync-panel .sp-ov { position: absolute; inset: 0; z-index: 1; }
.u-web-sync-panel .sp-ov > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); white-space: nowrap; }

.u-web-sync-panel .pf-i-circle-ok { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M7.8 12.4l2.8 2.8 5.6-5.8'/></svg>"); }
.u-web-sync-panel .pf-i-circle-no { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M7.8 12h8.4'/></svg>"); }

.u-web-sync-panel .sp-t { transform: translateY(-50%); font-size: calc(22.4 * var(--k)); line-height: 1.3; }
.u-web-sync-panel .sp-sec { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); background: #f1f4f7; }
.u-web-sync-panel .sp-chev { width: calc(24 * var(--k)); height: calc(24 * var(--k)); color: #1d2125; --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>"); }
.u-web-sync-panel .sp-sech { font-size: calc(23.2 * var(--k)); font-weight: 600; color: #14181b; }
.u-web-sync-panel .sp-inf2 { width: calc(24 * var(--k)); height: calc(24 * var(--k)); color: #a3a7ad; }
.u-web-sync-panel .sp-add { display: flex; align-items: center; gap: calc(11 * var(--k)); color: #0a5fe8; font-size: calc(22.6 * var(--k)); }
.u-web-sync-panel .sp-add .pf-i { width: calc(21 * var(--k)); height: calc(21 * var(--k)); }
.u-web-sync-panel .sp-card { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #d9dce1; border-radius: 3px; background: #fff; }
.u-web-sync-panel .sp-hd { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 2px 2px 0 0; background: #f3f5f8; }
.u-web-sync-panel .sp-lb, .u-web-sync-panel .sp-fl { display: flex; align-items: center; color: #1d2125; }
.u-web-sync-panel .sp-lb em, .u-web-sync-panel .sp-fl em { margin-right: calc(1.5 * var(--k)); color: #e5454f; font-style: normal; font-weight: 700; }
.u-web-sync-panel .sp-inf { width: calc(26 * var(--k)); height: calc(26 * var(--k)); margin-left: calc(9 * var(--k)); color: #9a9ea4; }
.u-web-sync-panel .sp-sel { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 3px; background: #fff; }
.u-web-sync-panel .sp-sv { color: #1d2125; font-size: calc(23 * var(--k)); }
.u-web-sync-panel .sp-ph { color: #bfc2c6; }
.u-web-sync-panel .sp-car { width: calc(20 * var(--k)); height: calc(20 * var(--k)); color: #8c9096; }
.u-web-sync-panel .sp-del { width: calc(28 * var(--k)); height: calc(28 * var(--k)); color: #6a6e72; }
.u-web-sync-panel .sp-fv { color: #1d2125; }
.u-web-sync-panel .sp-rd { width: calc(25 * var(--k)); height: calc(25 * var(--k)); border: 1px solid #d6d9de; border-radius: 50%; background: #fff; }
.u-web-sync-panel .sp-rd.on { border: 1.6px solid #0a5fe8; }
.u-web-sync-panel .sp-rd.on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; margin: -25% 0 0 -25%; border-radius: 50%; background: #0a5fe8; }
.u-web-sync-panel .sp-sw { width: calc(46 * var(--k)); height: calc(26 * var(--k)); border-radius: 99px; background: #c9ccd0; }
.u-web-sync-panel .sp-sw::after { content: ""; position: absolute; left: calc(3 * var(--k)); top: calc(3 * var(--k)); width: calc(20 * var(--k)); height: calc(20 * var(--k)); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.u-web-sync-panel .sp-sw.on { background: #0a5fe8; }
.u-web-sync-panel .sp-sw.on::after { left: calc(23 * var(--k)); }
.u-web-sync-panel .sp-st { display: flex; align-items: center; gap: calc(8 * var(--k)); color: #8c9096; font-size: calc(20.4 * var(--k)); }
.u-web-sync-panel .sp-st.on { color: #18b274; }
.u-web-sync-panel .sp-st .pf-i { width: calc(25 * var(--k)); height: calc(25 * var(--k)); }
.u-web-sync-panel .sp-chip { display: flex; align-items: center; justify-content: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 3px; background: #eceef1; color: #4b5056; font-size: calc(20.4 * var(--k)); }
.u-web-sync-panel .sp-fs { font-size: calc(20.4 * var(--k)); color: #55595e; }
.u-web-sync-panel .sp-pi { font-size: calc(19.6 * var(--k)); color: #c0c3c7; }
.u-web-sync-panel .sp-in { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #d5d8dd; border-radius: 3px; background: #fff; }



.u-web-req-category { --k: .8px; --pf-top-h: 50px; --pf-nav-w: 56px; --pf-sub-w: 122px; background: linear-gradient(180deg, #e7ebf5, #eef0f8 60%, #f1f2f9); overflow: hidden; }
.u-web-req-category .rc-frame { position: absolute; left: 0; top: 0; width: 1280px; height: 808px; border-radius: 0 0 20px 0; background: #050b1a; }
.u-web-req-category .rc-frame::after { content: ""; position: absolute; left: 992px; top: 811px; height: 100px; border-left: 2px dotted #c3c8dc; }
.u-web-req-category .pf-shell { inset: 6px 10px 81px 0; border-radius: 0 20px 12px 0; background: radial-gradient(ellipse 260px 120px at 0 0, #d4f1fc, transparent), linear-gradient(90deg, #e4ebfc, var(--pf-shell) 45%); }


.u-web-req-category .pf-top { gap: 13px; padding: 0 16px 0 14px; }
.u-web-req-category .pf-logo { gap: 12px; }
.u-web-req-category .pf-logo-mark { width: 28px; height: 28px; background-size: 22px; border-radius: 7px; }
.u-web-req-category .pf-logo-name { font-size: 15.5px; }
.u-web-req-category .pf-proj { height: 27px; padding: 0 9px; gap: 7px; font-size: 12.3px; border-radius: 7px; }
.u-web-req-category .pf-proj .pf-i { width: 14px; height: 14px; }
.u-web-req-category .pf-top-r { gap: 8px; }
.u-web-req-category .pf-ico-btn { width: 19px; height: 19px; background: rgba(255, 255, 255, .8); }
.u-web-req-category .pf-ico-btn .pf-i { width: 11px; height: 11px; }
.u-web-req-category .pf-ico-btn.dot::after { top: 1px; right: 1px; width: 5px; height: 5px; }
.u-web-req-category .pf-user { gap: 6px; font-size: 12.3px; }
.u-web-req-category .pf-user .pf-ava { width: 17px; height: 17px; }
.u-web-req-category .pf-nav { gap: 8.5px; align-items: center; padding: 0 0 15px; }
.u-web-req-category .pf-nav-i { width: 46px; height: 48px; gap: 3px; justify-content: flex-start; padding-top: 6px; font-size: 11.5px; color: #2f343a; }
.u-web-req-category .pf-nav-i .pf-i { width: 20px; height: 20px; }
.u-web-req-category .pf-nav-i.on { box-shadow: none; }
.u-web-req-category .pf-nav-b { gap: 15px; }
.u-web-req-category .pf-nav-b .pf-i { width: 17px; height: 17px; }
.u-web-req-category .pf-sub { padding: 10px 7px 0 8px; background: #fcfdff; border-right: 1px solid #eef0f4; border-radius: 7px 0 0 0; }
.u-web-req-category .pf-sub-t { height: 25px; margin: 0 0 4px; padding: 0 6px; font-size: 11.2px; color: #9aa0a8; }
.u-web-req-category .pf-sub-t:not(:first-child) { margin-top: 16.5px; }
.u-web-req-category .pf-sub-i { height: 31.8px; margin: 0; gap: 8px; padding: 0 8px; font-size: 12.3px; color: #2a2f35; border-radius: 3px; }
.u-web-req-category .pf-sub-i .pf-i { width: 12px; height: 12px; }
.u-web-req-category .pf-sub-i.on { background: #e9f1fe; }
.u-web-req-category .pf-sub-sep { margin: 6.5px 4px 8px; }
.u-web-req-category .pf-main { background: #fff; }


.u-web-req-category .rc-pg, .u-web-req-category .rc-fbar, .u-web-req-category .rc-pn { position: absolute; left: 0; top: 0; width: 1280px; height: 881px; }
.u-web-req-category .rc-pg { clip-path: inset(6px 10px 81px 0 round 0 20px 12px 0); }
.u-web-req-category .rc-pg > *, .u-web-req-category .rc-fbar > *, .u-web-req-category .rc-pn > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); white-space: nowrap; }
.u-web-req-category .rc-t { transform: translateY(-50%); font-size: calc(var(--f, 15.3) * var(--k)); line-height: 1.3; color: #26292d; }
.u-web-req-category .rc-t3 { color: #a2a3a4; }


.u-web-req-category .rc-tab { --f: 17.7; color: #555a5f; }
.u-web-req-category .rc-tab.on { color: #0a5fe8; }
.u-web-req-category .rc-ul { width: calc(var(--w) * var(--k)); height: calc(3.4 * var(--k)); border-radius: 2px; background: #0a5fe8; }
.u-web-req-category .rc-bx { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--k)); width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #c6c8c9; border-radius: 4px; background: #fff; font-size: calc(15.6 * var(--k)); color: #26292d; }
.u-web-req-category .rc-bx .pf-i { width: calc(16 * var(--k)); height: calc(16 * var(--k)); }
.u-web-req-category .rc-bp { border-color: #0a5fe8; background: #0a5fe8; color: #fff; }
.u-web-req-category .rc-tree { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #dcdfe4; border-radius: 4px; background: #fff; }
.u-web-req-category .rc-ts { width: calc(18 * var(--k)); height: calc(18 * var(--k)); color: #6a6d6f; }
.u-web-req-category .rc-hl { width: calc(var(--w) * var(--k)); height: 1px; background: #e6e8eb; }
.u-web-req-category .rc-ttl { left: auto !important; right: calc((1600 - var(--e)) * var(--k)); --f: 15.3; }
.u-web-req-category .rc-pri { display: flex; align-items: center; justify-content: center; width: calc(25 * var(--k)); height: calc(23 * var(--k)); transform: translateY(-50%); border-radius: 3px; font-size: calc(14.5 * var(--k)); }
.u-web-req-category .rc-pri-r { background: #fde8ea; color: #e34d59; }
.u-web-req-category .rc-pri-b { background: #e6f0ff; color: #0060f0; }
.u-web-req-category .rc-pri-g { background: #e3f6ee; color: #18b274; }
.u-web-req-category .rc-st { display: flex; align-items: center; justify-content: center; width: calc(48 * var(--k)); height: calc(25 * var(--k)); transform: translateY(-50%); border: 1px solid currentColor; border-radius: 3px; background: #fff; font-size: calc(14.5 * var(--k)); }
.u-web-req-category .rc-st-g { color: #18b274; }
.u-web-req-category .rc-st-b { color: #0060f0; }
.u-web-req-category .rc-st-n { color: #8d9094; border-color: #c6c8c9; }
.u-web-req-category .rc-av { display: grid; place-items: center; width: calc(23 * var(--k)); height: calc(23 * var(--k)); transform: translateY(-50%); border-radius: 50%; background: #dfe9fa; color: #a6c4f2; }
.u-web-req-category .rc-av::before { content: ""; width: 62%; height: 62%; background: currentColor; -webkit-mask: var(--pf-ic-user) center/contain no-repeat; mask: var(--pf-ic-user) center/contain no-repeat; }
.u-web-req-category .rc-av-n { background: #f0f1f3; color: #d3d6d9; }
.u-web-req-category .rc-op { display: flex; gap: calc(14 * var(--k)); color: #0a5fe8; }
.u-web-req-category .rc-op b { font-weight: 400; color: #0a5fe8; }
.u-web-req-category .rc-sel { gap: calc(26 * var(--k)); justify-content: flex-start; padding-left: calc(12 * var(--k)); }
.u-web-req-category .rc-sel .pf-i { margin-left: auto; margin-right: calc(11 * var(--k)); color: #8c9096; }
.u-web-req-category .rc-pb { display: grid; place-items: center; width: calc(var(--w) * var(--k)); height: calc(36 * var(--k)); border: 1px solid #c6c8c9; border-radius: 4px; background: #fff; font: 400 calc(15.5 * var(--k)) var(--ui-num); }
.u-web-req-category .rc-pb.on { border-color: #0a5fe8; background: #0a5fe8; color: #fff; }
.u-web-req-category .rc-pgi { width: calc(15 * var(--k)); height: calc(15 * var(--k)); transform: translateY(-50%); color: #1d2125; }
.u-web-req-category .rc-pgi.dis { color: #b9bcc0; }
.u-web-req-category .rc-pn.x, .u-web-req-category .rc-pj { display: flex; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #c6c8c9; border-radius: 4px; background: #fff; overflow: hidden; font-size: calc(15.5 * var(--k)); }
.u-web-req-category .rc-pj b { flex: none; width: 58%; display: grid; place-items: center; font: 400 calc(15.5 * var(--k)) var(--ui-num); }
.u-web-req-category .rc-pj i { flex: 1; white-space: nowrap; display: grid; place-items: center; background: #f2f4f6; font-style: normal; font-family: var(--ui-num); }
.u-web-req-category .rc-pn.x { }


.u-web-req-category .rc-dim { position: absolute; left: 0; top: 6px; right: 10px; bottom: 81px; border-radius: 0 20px 12px 0; background: rgba(0, 0, 0, .41); }


.u-web-req-category .rc-fbar::before { content: ""; position: absolute; left: calc(210 * var(--k)); top: calc(137 * var(--k)); right: 0; height: calc(88 * var(--k)); border-radius: calc(20 * var(--k)) 0 0 calc(20 * var(--k)); background: linear-gradient(180deg, #fff, #f7f8fb); box-shadow: 0 4px 24px rgba(0, 0, 0, .22); }
.u-web-req-category .rc-fs { display: flex; align-items: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); padding: 0 calc(12 * var(--k)); border: 1px solid #d5d8dc; border-radius: 4px; background: #fff; font-size: calc(19.2 * var(--k)); color: #26292d; }
.u-web-req-category .rc-fs b { font-weight: 400; margin-right: calc(16 * var(--k)); }
.u-web-req-category .rc-fs em { font-style: normal; color: #b8bbbf; }
.u-web-req-category .rc-fs .pf-i { width: calc(21 * var(--k)); height: calc(21 * var(--k)); }
.u-web-req-category .rc-fs > .pf-i:last-child { margin-left: auto; color: #8c9096; }
.u-web-req-category .rc-fg { border-color: transparent; background: #f1f4f8; gap: calc(10 * var(--k)); }
.u-web-req-category .rc-fg > .pf-i:first-child { width: calc(22 * var(--k)); height: calc(22 * var(--k)); color: #26292d; }
.u-web-req-category .rc-hand { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); scale: .85; transform-origin: 0 0; }


.u-web-req-category .rc-pn::before { content: ""; position: absolute; left: calc(210 * var(--k)); top: calc(248 * var(--k)); width: calc(460 * var(--k)); height: calc(870 * var(--k)); border-radius: calc(20 * var(--k)); background: linear-gradient(180deg, #ececed 0, #f1f1f2 60%, #fcfcfd 88%, #fff); box-shadow: 0 2px 22px rgba(0, 0, 0, .22); }
.u-web-req-category .rc-psearch { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #dcdfe3; border-radius: 4px; background: #fff; }
.u-web-req-category .rc-pph { --f: 24; color: #b9bcc0; }
.u-web-req-category .rc-psi { width: calc(26 * var(--k)); height: calc(26 * var(--k)); color: #55595f; }
.u-web-req-category .rc-sel.x { }
.u-web-req-category .rc-pn .rc-sel { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #e4eefc; display: block; padding: 0; }
.u-web-req-category .rc-gi { width: calc(25 * var(--k)); height: calc(25 * var(--k)); color: #0a5fe8; margin: calc(-1 * var(--k)) 0 0 calc(-1 * var(--k)); }
.u-web-req-category .rc-r { --f: 24; display: flex; align-items: baseline; gap: calc(14 * var(--k)); }
.u-web-req-category .rc-r b { font-weight: 400; color: #1d2125; }
.u-web-req-category .rc-r i { font-style: normal; font-size: calc(22 * var(--k)); color: #9a9ea4; font-family: var(--ui-num); }
.u-web-req-category .rc-r.on b { color: #0a5fe8; }
.u-web-req-category .rc-cr { width: calc(22 * var(--k)); height: calc(22 * var(--k)); color: #6f7378; }
.u-web-req-category .rc-cr.dn { rotate: 90deg; }
.u-web-req-category .rc-vl { width: 1px; height: calc(var(--h) * var(--k)); background: #d3d6db; }
.u-web-req-category .rc-hk { display: none; }
.u-web-req-category .rc-dot { width: calc(11 * var(--k)); height: calc(11 * var(--k)); transform: translateY(-50%); border-radius: 50%; background: #d9dce1; }
.u-web-req-category .rc-hov { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #e8eaee; }
.u-web-req-category .rc-hp { width: calc(24 * var(--k)); height: calc(24 * var(--k)); color: #1d2125; }
.u-web-req-category .rc-hm { display: grid; place-items: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #dcdfe4; color: #1d2125; }
.u-web-req-category .rc-hm .pf-i { width: calc(22 * var(--k)); height: calc(22 * var(--k)); }
.u-web-req-category .rc-pl { width: calc(var(--w) * var(--k)); height: 1px; background: #dddfe3; }
.u-web-req-category .rc-fi { width: calc(26 * var(--k)); height: calc(26 * var(--k)); color: #6a6e73; }
.u-web-req-category .rc-fl { --f: 25; color: #5f6469; }
.u-web-req-category .pf-i-fold { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='4' width='17' height='16' rx='2'/><path d='M9.5 4v16M15.5 9l-3 3 3 3'/></svg>"); }


.u-web-req-category .rc-ctx { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 6px; background: #fff; box-shadow: 0 3px 18px rgba(0, 0, 0, .22); }
.u-web-req-category .rc-ctx > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); white-space: nowrap; --f: 24; }
.u-web-req-category .rc-del { color: #e0505c; }



.u-web-pipeline-template { --ks: .8; --k: .8px; --pf-top-h: 50px; --pf-nav-w: 56px; --pf-sub-w: 114px; background: #e8eaf7; overflow: hidden; }
.u-web-pipeline-template .pt-frame { position: absolute; inset: 0; border-radius: 24px; background: #060d20; }
.u-web-pipeline-template .pf-shell { inset: 6.4px 9px 9.6px 6.4px; border-radius: 19px; background: radial-gradient(ellipse 260px 120px at 0 0, #d4f1fc, transparent), linear-gradient(90deg, #e4ebfc, var(--pf-shell) 45%); }


.u-web-pipeline-template .pf-i-play { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.8'/><path d='M10.2 8.6l5 3.4-5 3.4z'/></svg>"); }
.u-web-pipeline-template .pf-i-note { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2.2'/><path d='M8 9h8M8 12.5h8M8 16h5'/></svg>"); }
.u-web-pipeline-template .pf-i-folder-mv { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 11V8.5A1.5 1.5 0 0 0 19 7h-7l-2-2.5H5A1.5 1.5 0 0 0 3.5 6v12A1.5 1.5 0 0 0 5 19.5h6M14.5 15.5h6M18 13l2.5 2.5L18 18'/></svg>"); }
.u-web-pipeline-template .pf-i-java { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12.6 2.8c-1.8 1.8 1.4 2.8 0 4.8M8.8 5.8c-1.1 1.3 1 1.9 0 3.4'/><path d='M5.6 12h11v2.8a4.3 4.3 0 0 1-4.3 4.3h-2.4a4.3 4.3 0 0 1-4.3-4.3zM16.6 13h1.5a1.9 1.9 0 0 1 0 3.8h-1.8'/><path d='M4.4 21h13.4'/></svg>"); }
.u-web-pipeline-template .pf-i-go { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M11.4 5.4A4.4 4.4 0 1 0 11.4 12.6V9.4H7.4'/><ellipse cx='21.4' cy='9' rx='4.4' ry='4.4'/></svg>"); }
.u-web-pipeline-template .pf-i-node { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.4 20.5V10.2L12 3.2l8.6 7v10.3h-5.3v-6.6a3.3 3.3 0 0 0-6.6 0v6.6z' fill='black'/></svg>"); }
.u-web-pipeline-template .pf-i-py { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.8 3C8.2 3 8.4 4.6 8.4 4.6V7h3.5v.8H6.8S4 7.6 4 11.6c0 3.9 2.4 3.8 2.4 3.8H8v-2.4S7.9 10.3 10.6 10.3h3.6s2.3 0 2.3-2.2V5.2S16.9 3 11.8 3zM9.8 4.5a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zM12.2 21c3.6 0 3.4-1.6 3.4-1.6V17h-3.5v-.8h5.1s2.8.2 2.8-3.8c0-3.9-2.4-3.8-2.4-3.8H16v2.4s.1 2.7-2.6 2.7H9.8s-2.3 0-2.3 2.2v2.9S7.1 21 12.2 21zm2-1.5a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8z' fill='black'/></svg>"); }
.u-web-pipeline-template .pf-i-blank { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='17' height='17' rx='2.4' stroke-dasharray='3 2.2'/><path d='M12 8v8M8 12h8'/></svg>"); }


.u-web-pipeline-template .pf-top { gap: 13px; padding: 0 16px 0 14px; }
.u-web-pipeline-template .pf-logo { gap: 12px; }
.u-web-pipeline-template .pf-logo-mark { width: 28px; height: 28px; background-size: 22px; border-radius: 7px; }
.u-web-pipeline-template .pf-logo-name { font-size: 15.5px; }
.u-web-pipeline-template .pf-proj { height: 27px; padding: 0 9px; gap: 7px; font-size: 12.3px; border-radius: 7px; }
.u-web-pipeline-template .pf-proj .pf-i { width: 14px; height: 14px; }
.u-web-pipeline-template .pf-top-r { gap: 8px; }
.u-web-pipeline-template .pf-ico-btn { width: 19px; height: 19px; background: rgba(255, 255, 255, .8); }
.u-web-pipeline-template .pf-ico-btn .pf-i { width: 11px; height: 11px; }
.u-web-pipeline-template .pf-ico-btn.dot::after { top: 1px; right: 1px; width: 5px; height: 5px; }
.u-web-pipeline-template .pf-user { gap: 6px; font-size: 12.3px; }
.u-web-pipeline-template .pf-user .pf-ava { width: 17px; height: 17px; }
.u-web-pipeline-template .pf-nav { gap: 8.5px; align-items: center; padding: 0 0 15px; }
.u-web-pipeline-template .pf-nav-i { width: 46px; height: 48px; gap: 3px; justify-content: flex-start; padding-top: 6px; font-size: 11.5px; color: #2f343a; }
.u-web-pipeline-template .pf-nav-i .pf-i { width: 20px; height: 20px; }
.u-web-pipeline-template .pf-nav-i.on { box-shadow: none; }
.u-web-pipeline-template .pf-nav-b { gap: 15px; }
.u-web-pipeline-template .pf-nav-b .pf-i { width: 17px; height: 17px; }
.u-web-pipeline-template .pf-sub { padding: 10px 7px 0 8px; background: #fcfdff; border-right: 1px solid #eef0f4; border-radius: 7px 0 0 0; }
.u-web-pipeline-template .pf-sub-t { height: 25px; margin: 0 0 4px; padding: 0 6px; font-size: 11.2px; color: #9aa0a8; }
.u-web-pipeline-template .pf-sub-t:not(:first-child) { margin-top: 16.5px; }
.u-web-pipeline-template .pf-sub-i { height: 31.8px; margin: 0; gap: 8px; padding: 0 8px; font-size: 12.3px; color: #2a2f35; border-radius: 3px; }
.u-web-pipeline-template .pf-sub-i .pf-i { width: 12px; height: 12px; }
.u-web-pipeline-template .pf-sub-i.on { background: #e9f1fe; }
.u-web-pipeline-template .pf-sub-sep { margin: 6.5px 4px 8px; }
.u-web-pipeline-template .pf-main { background: #fff; }


.u-web-pipeline-template .pt-pg, .u-web-pipeline-template .pt-hi, .u-web-pipeline-template .pt-md { position: absolute; left: 0; top: 0; width: 1280px; height: 803px; }
.u-web-pipeline-template .pt-pg { clip-path: inset(6.4px 9px 9.6px 6.4px round 19px); }
.u-web-pipeline-template .pt-pg > *, .u-web-pipeline-template .pt-hi > *, .u-web-pipeline-template .pt-md > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); white-space: nowrap; }
.u-web-pipeline-template .pt-t { transform: translateY(-50%); font-size: calc(var(--f, 15.3) * var(--k)); line-height: 1.3; color: #26292d; font-weight: 400; }
.u-web-pipeline-template .pt-hl, .u-web-pipeline-template .pt-hl2 { width: calc(var(--w) * var(--k)); height: 1px; background: #e2e4e8; }
.u-web-pipeline-template .pt-hl2 { background: #eceef1; }


.u-web-pipeline-template .pt-h { --f: 17.7; font-weight: 600; color: #14181b; }
.u-web-pipeline-template .pt-tb { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); background: #f5f7fa; }
.u-web-pipeline-template .pt-tab { --f: 15.4; color: #4f5459; }
.u-web-pipeline-template .pt-tab.on { color: #0a5fe8; }
.u-web-pipeline-template .pt-vs { width: 1px; height: calc(14 * var(--k)); background: #d2d5da; }
.u-web-pipeline-template .pt-pl { width: calc(18 * var(--k)); height: calc(18 * var(--k)); color: #3a3e42; }
.u-web-pipeline-template .pt-mg { display: flex; align-items: center; gap: calc(8 * var(--k)); color: #55595e; }
.u-web-pipeline-template .pt-mg .pf-i { width: calc(18 * var(--k)); height: calc(18 * var(--k)); }
.u-web-pipeline-template .pt-in { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #dcdfe4; border-radius: 4px; background: #fff; }
.u-web-pipeline-template .pt-th { color: #8d9094; }
.u-web-pipeline-template .pt-run { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--k)); width: calc(70 * var(--k)); height: calc(26 * var(--k)); transform: translateY(-50%); border-radius: 4px; background: #e8f0fd; color: #0a5fe8; font-size: calc(15.6 * var(--k)); font-weight: 500; }
.u-web-pipeline-template .pt-run .pf-i { width: calc(18 * var(--k)); height: calc(18 * var(--k)); }
.u-web-pipeline-template .pt-run.dis { opacity: .42; }
.u-web-pipeline-template .pt-oi { width: calc(18 * var(--k)); height: calc(18 * var(--k)); transform: translateY(-50%); color: #4a4e53; }
.u-web-pipeline-template .pt-oi.hov { box-sizing: content-box; padding: calc(5 * var(--k)); margin: 0 0 0 calc(-5 * var(--k)); border-radius: 3px; background: #dfe8f6; color: #0a5fe8; }
.u-web-pipeline-template .pt-tot { color: #6a6d6f; }
.u-web-pipeline-template .pt-sel { display: flex; align-items: center; justify-content: space-between; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); padding: 0 calc(10 * var(--k)) 0 calc(14 * var(--k)); border: 1px solid #c6c8c9; border-radius: 4px; background: #fff; font-size: calc(15.3 * var(--k)); color: #26292d; }
.u-web-pipeline-template .pt-sel .pf-i { color: #8c9096; width: calc(15 * var(--k)); height: calc(15 * var(--k)); }
.u-web-pipeline-template .pt-pb { display: grid; place-items: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #0a5fe8; color: #fff; font: 400 calc(15.5 * var(--k)) var(--ui-num); }
.u-web-pipeline-template .pt-pgi { width: calc(15 * var(--k)); height: calc(15 * var(--k)); transform: translateY(-50%); color: #b9bcc0; }
.u-web-pipeline-template .pt-pj { display: flex; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #c6c8c9; border-radius: 4px; background: #fff; overflow: hidden; }
.u-web-pipeline-template .pt-pj b { flex: none; width: calc(68 * var(--k)); display: grid; place-items: center; font: 400 calc(15.5 * var(--k)) var(--ui-num); }
.u-web-pipeline-template .pt-pj i { flex: 1; display: grid; place-items: center; background: #f2f4f6; font-style: normal; font-size: calc(15.5 * var(--k)); font-family: var(--ui-num); }
.u-web-pipeline-template .pt-menu { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .2); }
.u-web-pipeline-template .pt-menu > * { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); --f: 15.6; color: #2c3034; }
.u-web-pipeline-template .pt-hand { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); scale: .85; transform-origin: 0 0; }
.u-web-pipeline-template .pt-dim { position: absolute; inset: 6.4px 9px 9.6px 6.4px; border-radius: 19px; background: rgba(0, 0, 0, .41); }


.u-web-pipeline-template .pt-hibox { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: calc(9 * var(--k)); background: #fff; }
.u-web-pipeline-template .pt-newbtn { display: grid; place-items: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #0a62f0; color: #fff; font-size: calc(15.8 * var(--k)); }
.u-web-pipeline-template .pt-arrow { position: absolute; left: 0; top: 0; overflow: visible; }


.u-web-pipeline-template .pt-md::before { content: ""; position: absolute; left: calc(252 * var(--k)); top: calc(204 * var(--k)); width: calc(1094 * var(--k)); height: calc(674 * var(--k)); border-radius: calc(16 * var(--k)); background: #fff; }
.u-web-pipeline-template .pt-mt { --f: 17.8; font-weight: 600; color: #14181b; }
.u-web-pipeline-template .pt-mx { width: calc(18 * var(--k)); height: calc(18 * var(--k)); color: #8d9197; }
.u-web-pipeline-template .pt-vl2 { width: 1px; height: calc(var(--h) * var(--k)); background: #eceef1; }
.u-web-pipeline-template .pt-li { width: calc(18 * var(--k)); height: calc(18 * var(--k)); transform: translateY(-50%); color: #80848a; }
.u-web-pipeline-template .pt-lt { --f: 15.9; color: #34383c; }
.u-web-pipeline-template .pt-lt em { font-style: normal; letter-spacing: 1px; color: #6a6e73; }
.u-web-pipeline-template .pt-cd { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border: 1px solid #e6e8ec; border-radius: 3px; background: #fff; }
.u-web-pipeline-template .pt-cd.on { border: 1.5px solid #3b80d8; background: #edf3fd; }
.u-web-pipeline-template .pt-ci { width: calc(18 * var(--k)); height: calc(18 * var(--k)); transform: translateY(-50%); }
.u-web-pipeline-template .pt-ct { --f: 16.1; color: #26292d; }
.u-web-pipeline-template .pt-ct.on { color: #1a62e8; }
.u-web-pipeline-template .pt-bg { transform: translateY(-50%); padding: calc(3 * var(--k)) calc(7 * var(--k)); border-radius: 3px; background: #e9f1fc; color: #1a62e8; font-size: calc(13.6 * var(--k)); }
.u-web-pipeline-template .pt-cd.on + .pt-bg, .u-web-pipeline-template .pt-ct.on + .pt-bg { background: transparent; }
.u-web-pipeline-template .pt-tri { position: absolute; transform-origin: 0 0; scale: var(--ks); }
.u-web-pipeline-template .pt-chip { display: grid; place-items: center; width: calc(var(--w) * var(--k)); height: calc(34 * var(--k)); border-radius: 5px; background: #f4f6f8; color: #62676c; font-size: calc(13.4 * var(--k)); }
.u-web-pipeline-template .pt-chip.w { background: #fff; }
.u-web-pipeline-template .pt-cn { width: calc(var(--w) * var(--k)); height: 1px; background: #c3c7cc; }
.u-web-pipeline-template .pt-cn::before, .u-web-pipeline-template .pt-cn::after { content: ""; position: absolute; top: calc(-1.5 * var(--k)); width: calc(3.2 * var(--k)); height: calc(3.2 * var(--k)); border-radius: 50%; background: #9da2a8; }
.u-web-pipeline-template .pt-cn::before { left: 0; }
.u-web-pipeline-template .pt-cn::after { right: 0; }
.u-web-pipeline-template .pt-sbt { width: calc(6 * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 3px; background: #d6d8dc; }
.u-web-pipeline-template .pt-ft { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-top: 1px solid #eceef1; border-radius: 0 0 calc(16 * var(--k)) calc(16 * var(--k)); background: #fff; }
.u-web-pipeline-template .pt-fb { display: grid; place-items: center; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 4px; background: #f0f1f3; color: #26292d; font-size: calc(16.6 * var(--k)); }
.u-web-pipeline-template .pt-fb.p { background: #0a62f0; color: #fff; }


.u-web-ov-metrics { --pf-nav-w: 65px; --pf-sub-w: 131px; --pf-top-h: 56px; border-radius: 14px; overflow: hidden; background: #e8ecf8; }
.u-web-ov-metrics .pf-top { padding-left: 16px; }
.u-web-ov-metrics .pf-logo-mark { width: 33px; height: 33px; background-size: 28px; }
.u-web-ov-metrics .pf-logo-name { font-size: 17.500px; letter-spacing: .3px; }
.u-web-ov-metrics .pf-ico-btn { width: 24px; height: 24px; }
.u-web-ov-metrics .pf-user { gap: 6px; font-size: 16px; }
.u-web-ov-metrics .pf-ava { width: 26px; height: 26px; }
.u-web-ov-metrics .pf-sub-i { padding-left: 7px; }
.u-web-ov-metrics .pf-sub-t { padding-left: 7px; }
.u-web-ov-metrics .pf-nav { gap: 4px; }
.u-web-ov-metrics .pf-nav-i { width: 56px; flex: none; }
.u-web-ov-metrics .pf-sub { padding-top: 6px; }
.u-web-ov-metrics .pf-head { height: 58px; padding: 0 23px 0 24px; }
.u-web-ov-metrics .mt-search { width: 277px; height: 31px; background: #f0f1f4; font-weight: 400; font-size: 13.500px; }
.u-web-ov-metrics .mt-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 16.800px; row-gap: 16.500px; align-content: start; margin: 22px 23px 0 24px; }
.u-web-ov-metrics .mt-card { position: relative; height: 189.600px; border: 1px solid #e8eaed; border-radius: 4px; background: #fff; }
.u-web-ov-metrics .mt-th { height: 149.400px; border-radius: 3px 3px 0 0; background: #f5f5f7; }
.u-web-ov-metrics .mt-pn { position: absolute; left: 9.400px; top: 7.700px; width: 267px; height: 134px; border-radius: 3px; background: #fff; overflow: hidden; }
.u-web-ov-metrics .mt-pn svg { display: block; }
.u-web-ov-metrics .mt-tt { position: absolute; left: 0; right: 0; bottom: 0; height: 39px; padding-left: 14px; font-size: 14px; font-weight: 600; line-height: 39px; color: #1a1d20; }
.u-web-ov-metrics svg text { font-family: var(--ui-font); }
.u-web-ov-metrics svg .nn, .u-web-ov-metrics svg .nn text { font-family: var(--pf-fnum); font-weight: 800; stroke: #15181b; stroke-width: .5px; }
.u-web-ov-metrics .mt-card.hov { z-index: 2; border-color: transparent; transform: translateY(-7.800px); box-shadow: 0 8px 24px rgba(31, 56, 110, .10), 0 1px 4px rgba(31, 56, 110, .05); }
.u-web-ov-metrics .mt-hsv { position: absolute; left: 0; top: 0; }
.u-web-ov-metrics .mt-btn { position: absolute; left: 15.500px; top: 142px; width: 255.500px; height: 31.300px; border-radius: 3px; background: #0a5cf5; color: #fff; font-size: 15px; line-height: 31px; text-align: center; letter-spacing: 1px; }
.u-web-ov-metrics .mt-hand { position: absolute; left: 160px; top: 153px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }


.u-web-ov-vuln { --pf-nav-w: 64px; --pf-sub-w: 131px; --pf-top-h: 53px; border-radius: 14px; overflow: hidden; background: #e8ecf8; }
.u-web-ov-vuln .pf-top { padding-left: 15px; }
.u-web-ov-vuln .pf-logo-mark { width: 33px; height: 33px; background-size: 28px; }
.u-web-ov-vuln .pf-logo-name { font-size: 17.500px; letter-spacing: .3px; }
.u-web-ov-vuln .pf-ico-btn { width: 25px; height: 25px; }
.u-web-ov-vuln .pf-user { gap: 6px; font-size: 16px; }
.u-web-ov-vuln .pf-ava { width: 26px; height: 26px; }
.u-web-ov-vuln .pf-nav { gap: 4px; }
.u-web-ov-vuln .pf-nav-i { width: 56px; flex: none; }
.u-web-ov-vuln .pf-sub { padding-top: 7px; }
.u-web-ov-vuln .pf-sub-t:not(:first-child) { margin-top: 15px; }
.u-web-ov-vuln .pf-sub-i { padding-left: 7px; }
.u-web-ov-vuln .pf-sub-t { padding-left: 7px; }
.u-web-ov-vuln .pf-main { overflow: hidden; }
.u-web-ov-vuln .vl-back { position: absolute; left: 22px; top: 16px; }
.u-web-ov-vuln .vl-ttl { position: absolute; left: 61px; top: 17px; font-size: 16px; font-weight: 600; line-height: 22px; }
.u-web-ov-vuln .vl-tag { position: absolute; left: 215px; top: 16px; display: inline-grid; place-items: center; height: 24px; padding: 0 7px; border-radius: 4px; background: #fdebed; color: #e5535e; font-size: 12px; }
.u-web-ov-vuln .vl-meta { position: absolute; right: 23px; top: 17px; display: flex; align-items: center; height: 22px; color: #6a6d6f; font-size: 14.500px; }
.u-web-ov-vuln .vl-meta i { width: 1px; height: 12px; margin: 0 9px; background: #dcdee1; }
.u-web-ov-vuln .vl-h2 { position: absolute; left: 24px; font-size: 14px; font-weight: 600; line-height: 20px; }
.u-web-ov-vuln .vl-seg { position: absolute; right: 23px; top: 73px; display: flex; height: 23px; padding: 1px; border-radius: 3px; background: #eceef1; font-size: 12px; }
.u-web-ov-vuln .vl-seg span { display: grid; place-items: center; width: 64px; border-radius: 3px; color: #6a6d6f; }
.u-web-ov-vuln .vl-seg .on { background: #fff; color: #0060f0; }
.u-web-ov-vuln .vl-desc { position: absolute; left: 24px; right: 23px; top: 108px; height: 155px; border-radius: 3px; background: linear-gradient(90deg, #f3f6fa 0%, #f4f6fb 70%, #f7f4fa 100%); }
.u-web-ov-vuln .vl-k { position: absolute; left: 12.700px; line-height: 22px; color: #7d8184; }
.u-web-ov-vuln .vl-p { position: absolute; left: 12.700px; right: 12px; line-height: 22px; font-size: 14.100px; color: #1a1d20; }
.u-web-ov-vuln .vl-ln { position: absolute; left: 12.700px; right: 11px; top: 89px; height: 1px; background: #dfe3e8; }
.u-web-ov-vuln .vl-fix { position: absolute; left: 24px; right: 23px; top: 276px; height: 65px; border-radius: 3px; background: linear-gradient(90deg, #eef2fd 0%, #f1f1fc 55%, #fcf0f7 100%); }
.u-web-ov-vuln .vl-chip { position: absolute; left: 0; top: 3px; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 12px 0 12px; border-radius: 3px 12px 12px 3px; background: rgba(255, 255, 255, .6); font-size: 14px; font-weight: 600; background-clip: padding-box; color: #7a3cf0; }
.u-web-ov-vuln .vl-cvss { position: absolute; left: 24px; right: 23px; top: 400px; height: 170px; border-radius: 3px; background: #f5f6f8; }
.u-web-ov-vuln .vl-cv { position: absolute; top: 8.500px; width: 586.500px; height: 152.500px; border-radius: 2px; background: #fff; }
.u-web-ov-vuln .vl-cvt { position: absolute; left: 0; right: 0; top: 8px; line-height: 20px; text-align: center; color: #1a1d20; }
.u-web-ov-vuln .vl-g { position: absolute; top: 47px; }
.u-web-ov-vuln .vl-cv .vl-g:nth-of-type(1) { left: 42.500px; }
.u-web-ov-vuln .vl-cv .vl-g:nth-of-type(2) { left: 237.800px; }
.u-web-ov-vuln .vl-cv .vl-g:nth-of-type(3) { left: 433px; }
.u-web-ov-vuln .vl-g text { font-family: var(--ui-font); }
.u-web-ov-vuln .vl-g text.num { font-family: var(--ui-num); }
.u-web-ov-vuln .vl-tbl { position: absolute; left: 24px; top: 629px; width: 1197.500px; border: 1px solid #e8eaed; border-radius: 4px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.u-web-ov-vuln .vl-tbl th { height: 37px; padding: 0 12px; border: 0; border-bottom: 0; background: #fafafb; color: #7d8184; font-size: 14px; }
.u-web-ov-vuln .vl-tbl td { text-overflow: clip; height: 38px; padding: 0 12px; border-bottom: 0; border-top: 1px solid #eceef0; color: #1a1d20; }
.u-web-ov-vuln .vl-tbl .num { font-family: var(--ui-num); }
.u-web-ov-vuln .vl-lic { display: inline-grid; place-items: center; height: 20px; padding: 0 5px; border: 1px solid #e0e2e5; border-radius: 3px; background: #f8f8f9; color: #8b8e90; font-size: 12px; }
.u-web-ov-vuln .vl-total { position: absolute; left: 24px; top: 795px; font-size: 12px; line-height: 20px; color: #7d8184; }
.u-web-ov-vuln .vl-pg { position: absolute; left: 0; top: 793px; width: 100%; height: 24px; font-size: 12px; }
.u-web-ov-vuln .vl-pgs { position: absolute; left: 942px; top: 0; display: flex; align-items: center; justify-content: space-between; width: 87px; height: 24px; padding: 0 8px; border: 1px solid #dcdee1; border-radius: 3px; background: #fff; }
.u-web-ov-vuln .vl-pgs .pf-i { color: #8d9094; }
.u-web-ov-vuln .vl-ar { position: absolute; top: 6px; color: #b8bbbe; }
.u-web-ov-vuln .vl-pgi { position: absolute; left: 1079px; top: 0; display: flex; height: 24px; border: 1px solid #dcdee1; border-radius: 3px; background: #fff; }
.u-web-ov-vuln .vl-pgi span { display: grid; place-items: center; width: 55px; font-size: 12px; font-family: var(--ui-num); }
.u-web-ov-vuln .vl-pgi .g { background: #f1f2f4; color: #6a6d6f; border-left: 1px solid #dcdee1; }


.u-web-ov-milestone { --pf-nav-w: 63px; --pf-sub-w: 131px; --pf-top-h: 54px; border-radius: 14px; overflow: hidden; background: #e8ecf8; }
.u-web-ov-milestone .pf-top { padding-left: 16px; }
.u-web-ov-milestone .pf-logo-mark { width: 33px; height: 33px; background-size: 28px; }
.u-web-ov-milestone .pf-logo-name { font-size: 17.500px; letter-spacing: .3px; }
.u-web-ov-milestone .pf-proj { height: 31px; padding: 0 12px 0 10px; font-size: 14px; }
.u-web-ov-milestone .pf-nav { gap: 4px; }
.u-web-ov-milestone .pf-nav-i { width: 55px; flex: none; }
.u-web-ov-milestone .pf-sub { padding-top: 7px; }
.u-web-ov-milestone .pf-sub-i, .u-web-ov-milestone .pf-sub-t { padding-left: 8px; }
.u-web-ov-milestone .pf-sub-t:not(:first-child) { margin-top: 15.500px; }
.u-web-ov-milestone .pf-sub-sep { margin: 8px 4px 9px; }
.u-web-ov-milestone .pf-main { overflow: hidden; background: #f5f6f8; }
.u-web-ov-milestone .pf-tabs { height: 48px; padding: 0 27px; gap: 33px; background: #fff; }
.u-web-ov-milestone .pf-tab { font-size: 15.500px; }
.u-web-ov-milestone .ms-ts { position: absolute; left: 27.500px; top: 68px; gap: 4px; }
.u-web-ov-milestone .ms-ts .pf-tab-s { height: 32px; padding: 0 14px; }
.u-web-ov-milestone .pf-main::before { content: ""; position: absolute; left: 0; right: 0; top: 48px; height: 63px; background: #fff; }
.u-web-ov-milestone .pf-tabs, .u-web-ov-milestone .ms-ts { z-index: 1; }
.u-web-ov-milestone .ms-band { position: absolute; left: 0; right: 0; top: 111px; height: 50px; border-top: 1px solid #eceef1; background: #f6f7f9; }
.u-web-ov-milestone .ms-bl { position: absolute; left: 24px; top: 14px; line-height: 22px; color: #7d8184; }
.u-web-ov-milestone .ms-bv { position: absolute; left: 134px; top: 11px; font: 800 23px/26px var(--pf-fnum); -webkit-text-stroke: .5px #15181b; }
.u-web-ov-milestone .ms-bar { position: absolute; left: 181px; top: 18px; width: 132px; height: 14px; border-radius: 2px; background: #d5d9e1; overflow: hidden; }
.u-web-ov-milestone .ms-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 61%; background: #0a5cf0; }
.u-web-ov-milestone .ms-card { position: absolute; left: 8.500px; background: #fff; border-radius: 8px 0 0 8px; }
.u-web-ov-milestone .ms-tl { top: 161px; width: 1100px; height: 118px; box-shadow: 0 1px 6px rgba(31, 56, 110, .05); }
.u-web-ov-milestone .ms-line { position: absolute; left: 14px; right: 0; top: 33px; height: 1px; background: #e2e5e9; }
.u-web-ov-milestone .ms-tn { position: absolute; top: 0; }
.u-web-ov-milestone .ms-nd { position: absolute; top: 22px; height: 22px; }
.u-web-ov-milestone .ms-n { display: block; }
.u-web-ov-milestone .ms-nt { position: absolute; left: 0; top: 57px; line-height: 22px; font-weight: 500; white-space: nowrap; }
.u-web-ov-milestone .ms-nd2 { position: absolute; left: 0; top: 80px; line-height: 20px; font-size: 13px; color: #b3b6bb; white-space: nowrap; }
.u-web-ov-milestone .ms-tb { top: 288px; bottom: 0; width: 1100px; border-radius: 8px 0 0 0; }
.u-web-ov-milestone .ms-tbl { width: 1007px; }
.u-web-ov-milestone .ms-tbl th { height: 44px; border-top: 0; border-bottom: 1px solid #eceef1; color: #a3a6aa; font-size: 13px; padding: 0 12px; }
.u-web-ov-milestone .ms-tbl td { height: 46px; padding: 0 12px; border-bottom: 1px solid #eceef1; }
.u-web-ov-milestone .ms-tbl th:first-child, .u-web-ov-milestone .ms-tbl td:first-child { padding-left: 28px; }
.u-web-ov-milestone .ms-tbl th:last-child { padding-left: 33px; }
.u-web-ov-milestone .ms-tbl td.r { padding-right: 12px; }
.u-web-ov-milestone .ms-tbl td, .u-web-ov-milestone .ms-tbl th { overflow: visible; }
.u-web-ov-milestone .ms-di { flex: none; }
.u-web-ov-milestone .ms-w { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; margin-left: -2px; color: #fff; font: 700 10px/1 var(--ui-font); font-style: normal; }
.u-web-ov-milestone .ms-w.o { background: #ee7d2f; }
.u-web-ov-milestone .ms-w.r { background: #e34d59; }


.u-web-ov-stats { --pf-nav-w: 61px; --pf-top-h: 57px; border-radius: 14px; overflow: hidden; background: #e8ecf8; }
.u-web-ov-stats .pf-top { padding-left: 13px; }
.u-web-ov-stats .pf-logo-mark { width: 32px; height: 32px; background-size: 27px; }
.u-web-ov-stats .pf-logo-name { font-size: 17.500px; letter-spacing: .3px; }
.u-web-ov-stats .pf-top-r { position: absolute; left: 1182px; top: 0; height: 57px; gap: 14px; margin: 0; }
.u-web-ov-stats .pf-ico-btn { width: 26px; height: 26px; }
.u-web-ov-stats .pf-user { gap: 6px; font-size: 16px; white-space: nowrap; }
.u-web-ov-stats .pf-ava { width: 26px; height: 26px; }
.u-web-ov-stats .pf-nav { gap: 4px; }
.u-web-ov-stats .pf-nav-i { width: 53px; flex: none; }
.u-web-ov-stats .pf-main { overflow: hidden; background: #f1f3f6; }
.u-web-ov-stats .os-hd { position: absolute; left: 0; right: 0; top: 0; height: 55.400px; background: #fff; }
.u-web-ov-stats .os-hd > * { position: absolute; white-space: nowrap; }
.u-web-ov-stats .os-hd .bk { left: 25px; top: 16px; }
.u-web-ov-stats .os-hd .tt { left: 55.600px; top: 16px; font-size: 16px; line-height: 22px; font-weight: 600; }
.u-web-ov-stats .os-hd .g1 { left: 793.600px; top: 17px; line-height: 22px; color: #8d9094; }
.u-web-ov-stats .os-hd .chip { left: 866.600px; top: 17px; height: 22px; padding: 0 5px; border-radius: 3px; background: #e6f0ff; color: #0060f0; font-size: 13px; line-height: 22px; }
.u-web-ov-stats .os-hd .cv1 { left: 922px; top: 22px; color: #8d9094; }
.u-web-ov-stats .os-hd .sp { left: 947.500px; top: 21px; width: 1px; height: 14px; background: #dcdee1; }
.u-web-ov-stats .os-hd .g2 { left: 963px; top: 17px; line-height: 22px; color: #8d9094; }
.u-web-ov-stats .os-hd .v2 { left: 1033px; top: 17px; line-height: 22px; font-weight: 500; }
.u-web-ov-stats .os-hd .cv2 { left: 1160.600px; top: 22px; color: #8d9094; }
.u-web-ov-stats .os-hd .bt1 { left: 1192px; top: 11.500px; width: 60px; }
.u-web-ov-stats .os-hd .bt2 { left: 1260px; top: 11.500px; width: 88px; }
.u-web-ov-stats .os-lp { position: absolute; left: 0; top: 55.400px; bottom: 0; width: 210.700px; padding: 39.800px 0 0 12.800px; display: flex; flex-direction: column; gap: 10.400px; box-sizing: border-box; background: #fff; }
.u-web-ov-stats .os-lp .pt { position: absolute; left: 17px; top: 10px; line-height: 20px; color: #8d9094; }
.u-web-ov-stats .os-th { position: relative; flex: none; width: 187.400px; height: 125px; border-radius: 3px; background: #f4f5f8; overflow: hidden; }
.u-web-ov-stats .os-th .im { height: 91px; background: #fff; border: 1px solid #f1f2f4; border-bottom: 0; border-radius: 3px 3px 0 0; box-sizing: border-box; padding: 0 2px; }
.u-web-ov-stats .os-th .im svg { display: block; margin: 0 auto; }
.u-web-ov-stats .os-th .lb { height: 34px; padding-left: 8px; line-height: 34px; color: #1a1d20; }
.u-web-ov-stats .os-c { position: absolute; background: #fff; border-radius: 4px; overflow: hidden; }
.u-web-ov-stats .os-c .ct { position: absolute; left: 17px; top: 17px; font-size: 16px; line-height: 22px; font-weight: 600; }
.u-web-ov-stats .os-sv { position: absolute; left: 0; top: 0; }
.u-web-ov-stats .os-sv text { font-family: var(--ui-font); }
.u-web-ov-stats .os-sv text.num { font-family: var(--ui-num); font-variant-numeric: tabular-nums; }
.u-web-ov-stats .os-s { position: absolute; }
.u-web-ov-stats .os-s .l { height: 20px; line-height: 20px; color: #6a6d6f; white-space: nowrap; }
.u-web-ov-stats .os-s .v { margin-top: 6.600px; }
.u-web-ov-stats .os-d { display: flex; align-items: center; gap: 3px; margin-top: 6px; height: 17px; font-size: 12px; line-height: 17px; }
.u-web-ov-stats .os-d .t { margin-right: 2px; color: #6a6d6f; }
.u-web-ov-stats .os-it { position: absolute; left: 0; right: 0; height: 46px; }
.u-web-ov-stats .os-it .pf-tile { position: absolute; left: 16px; top: 6.600px; }
.u-web-ov-stats .os-it .m { position: absolute; left: 56.500px; top: 0; white-space: nowrap; }
.u-web-ov-stats .os-it .tt { display: flex; align-items: center; gap: 8px; line-height: 20px; }
.u-web-ov-stats .os-it .ss { margin-top: 6px; display: flex; align-items: center; height: 18px; font-size: 12px; line-height: 18px; color: #a2a3a4; }
.u-web-ov-stats .os-it .ss i { width: 1px; height: 10px; margin: 0 8px; background: #d8dade; }
.u-web-ov-stats .os-it .pf-prog { position: absolute; left: 477.500px; top: 19.500px; width: 39px; height: 5px; background: #e7e6e9; }
.u-web-ov-stats .os-it .pf-prog > i { background: #0a5ff1; }
.u-web-ov-stats .os-it .pc { position: absolute; left: 523px; top: 14px; color: #a2a3a4; font-size: 12px; }


.u-web-ov-license { --pf-nav-w: 62px; --pf-sub-w: 130px; --pf-top-h: 56px; border-radius: 14px; overflow: hidden; background: #e8ecf8; }
.u-web-ov-license .pf-top { padding-left: 15px; }
.u-web-ov-license .pf-logo-mark { width: 33px; height: 33px; background-size: 28px; }
.u-web-ov-license .pf-logo-name { font-size: 17.500px; letter-spacing: .3px; }
.u-web-ov-license .pf-ico-btn { width: 25px; height: 25px; }
.u-web-ov-license .pf-user { gap: 6px; font-size: 16px; }
.u-web-ov-license .pf-ava { width: 26px; height: 26px; }
.u-web-ov-license .pf-nav { gap: 4px; }
.u-web-ov-license .pf-nav-i { width: 54px; flex: none; }
.u-web-ov-license .pf-sub { padding-top: 7px; }
.u-web-ov-license .pf-sub-i, .u-web-ov-license .pf-sub-t { padding-left: 8px; }
.u-web-ov-license .pf-sub-t:not(:first-child) { margin-top: 14px; }
.u-web-ov-license .pf-main { overflow: hidden; background: #fff; }
.u-web-ov-license .lc-back { position: absolute; left: 24px; top: 15px; }
.u-web-ov-license .lc-ttl { position: absolute; left: 62px; top: 16px; font-size: 16px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.u-web-ov-license .lc-risk { position: absolute; left: 227px; top: 18px; display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: #fdebed; color: #e5535e; font-size: 12px; }
.u-web-ov-license .lc-cert { position: absolute; top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; border: 1px solid #e3e5e8; border-radius: 3px; background: #f7f8f9; color: #6a6d6f; font-size: 13px; box-sizing: border-box; }
.u-web-ov-license .lc-cert svg { flex: none; }
.u-web-ov-license .lc-edit { position: absolute; right: 23px; top: 12px; display: inline-grid; place-items: center; width: 59px; height: 31px; border-radius: 4px; background: #0a5cf0; color: #fff; }
.u-web-ov-license .lc-h2 { position: absolute; left: 26px; font-size: 14px; font-weight: 600; line-height: 20px; }
.u-web-ov-license .lc-sub { position: absolute; top: 383px; line-height: 20px; color: #7d8184; white-space: nowrap; }
.u-web-ov-license .lc-info { position: absolute; left: 26px; top: 106px; width: 1191.300px; display: grid; grid-template-columns: 107.800px 385.400px 107.800px 384.500px 107.800px 98px; grid-template-rows: 38px 59px 38px 83.500px; border: 1px solid #e6e8eb; border-radius: 4px; overflow: hidden; }
.u-web-ov-license .lc-info > div { display: flex; align-items: center; border-bottom: 1px solid #e9ebee; }
.u-web-ov-license .lc-info > div:nth-last-child(-n+2) { border-bottom: 0; }
.u-web-ov-license .lc-info .k { padding-left: 12px; background: #f5f6f9; color: #7d8184; }
.u-web-ov-license .lc-info .v { padding-left: 12px; white-space: nowrap; color: #1a1d20; }
.u-web-ov-license .lc-info .v.w { grid-column: span 5; display: block; padding-top: 7px; line-height: 21.800px; white-space: nowrap; overflow: hidden; }
.u-web-ov-license .lc-info > div:nth-child(7), .u-web-ov-license .lc-info > div:nth-child(9) { }
.u-web-ov-license .lc-info .v:nth-child(10) { padding-top: 7px; }
.u-web-ov-license .lc-info .v svg { margin-right: 6px; }
.u-web-ov-license .lc-more { color: #0a5cf0; font-weight: 400; margin-left: 4px; }
.u-web-ov-license .lc-info .v:nth-child(8) { padding-top: 0; display: flex; align-items: center; }
.u-web-ov-license .lc-grp { position: absolute; top: 411px; width: 587.400px; display: flex; }
.u-web-ov-license .lc-col { position: relative; width: 293.700px; height: 340px; border-top: 4px solid; border-radius: 3px 3px 0 0; box-sizing: border-box; }
.u-web-ov-license .lc-col.r { border-color: #e34d59; background: #fde8ea; }
.u-web-ov-license .lc-col.g { border-color: #18b274; background: #e3f6ee; }
.u-web-ov-license .lc-ch { height: 37px; line-height: 38px; text-align: center; }
.u-web-ov-license .lc-col.r .lc-ch { color: #e34d59; }
.u-web-ov-license .lc-col.g .lc-ch { color: #18b274; }
.u-web-ov-license .lc-pn { position: absolute; left: 8px; right: 8px; top: 37px; bottom: 0; padding: 11px 12px 0; background: #fff; border-radius: 3px 3px 0 0; }
.u-web-ov-license .lc-pn h4 { margin: 12px 0 0; font-size: 14px; font-weight: 400; line-height: 22px; color: #1a1d20; }
.u-web-ov-license .lc-pn h4:first-child { margin-top: 0; }
.u-web-ov-license .lc-pn p { margin: 1px 0 0; font-size: 12px; line-height: 20px; color: #75787b; }


.u-web-ov-merge { --pf-nav-w: 62px; --pf-sub-w: 134px; --pf-top-h: 54px; border-radius: 14px; overflow: hidden; background: #e8ecf8; }
.u-web-ov-merge .pf-top { padding-left: 16px; }
.u-web-ov-merge .pf-logo-mark { width: 34px; height: 34px; background-size: 29px; }
.u-web-ov-merge .pf-logo-name { font-size: 17.500px; letter-spacing: .3px; }
.u-web-ov-merge .pf-proj { height: 32px; padding: 0 12px 0 11px; }
.u-web-ov-merge .pf-ico-btn { width: 25px; height: 25px; }
.u-web-ov-merge .pf-user { gap: 6px; font-size: 16px; }
.u-web-ov-merge .pf-ava { width: 26px; height: 26px; }
.u-web-ov-merge .pf-nav { gap: 4px; }
.u-web-ov-merge .pf-nav-i { width: 54px; flex: none; }
.u-web-ov-merge .pf-sub { padding-top: 7px; }
.u-web-ov-merge .pf-sub-i, .u-web-ov-merge .pf-sub-t { padding-left: 8px; }
.u-web-ov-merge .pf-sub-t:not(:first-child) { margin-top: 14px; }
.u-web-ov-merge .pf-main { overflow: hidden; background: #fff; }
.u-web-ov-merge .pf-main::before { content: ""; position: absolute; left: 0; right: 0; top: 55px; height: 143px; background: #f3f6fa; }
.u-web-ov-merge .mg-head { position: absolute; left: 0; right: 0; top: 0; height: 55px; }
.u-web-ov-merge .mg-back { position: absolute; left: 17px; top: 16px; }
.u-web-ov-merge .mg-rp { position: absolute; left: 65px; top: 17px; width: 20px; height: 20px; color: #4a4e52; }
.u-web-ov-merge .mg-nm { position: absolute; left: 93.500px; top: 14px; font-size: 19px; line-height: 28px; font-weight: 600; }
.u-web-ov-merge .mg-sw { position: absolute; left: 248px; top: 16px; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 3px; background: #eaf2ff; color: #0a5cf0; font-size: 14px; }
.u-web-ov-merge .mg-sp { position: absolute; left: 351px; top: 21px; width: 1px; height: 14px; background: #dcdee1; }
.u-web-ov-merge .mg-tb { position: absolute; top: 0; display: flex; align-items: center; gap: 6px; height: 55px; color: #6a6d6f; font-size: 15px; }
.u-web-ov-merge .mg-tb .pf-i { color: #6a6d6f; }
.u-web-ov-merge .mg-tb.on { color: #0a5cf0; }
.u-web-ov-merge .mg-tb.on .pf-i { color: #0a5cf0; }
.u-web-ov-merge .mg-tb.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 2px; background: #0a5cf0; }
.u-web-ov-merge .mg-create { position: absolute; left: 0; right: 0; top: 55px; height: 143px; }
.u-web-ov-merge .mg-tile { position: absolute; left: 26px; top: 19px; display: grid; place-items: center; width: 24px; height: 22px; border-radius: 4px; background: #eceef2; color: #5d6165; }
.u-web-ov-merge .mg-ct { position: absolute; left: 58px; top: 18px; font-size: 16px; line-height: 24px; font-weight: 600; }
.u-web-ov-merge .mg-lb { position: absolute; top: 62px; line-height: 20px; }
.u-web-ov-merge .mg-lb i { margin-right: 2px; color: #e34d59; font-style: normal; }
.u-web-ov-merge .mg-sel { position: absolute; top: 87px; width: 434.500px; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #dcdfe3; border-radius: 3px; background: #fff; box-sizing: border-box; }
.u-web-ov-merge .mg-sel > .pf-i:first-child { color: #8d9094; }
.u-web-ov-merge .mg-sel > .pf-i:last-child { margin-left: auto; color: #8d9094; }
.u-web-ov-merge .mg-sel > span { margin-left: 4px; }
.u-web-ov-merge .mg-ar { position: absolute; left: 470.500px; top: 96px; }
.u-web-ov-merge .mg-ok { position: absolute; left: 950px; top: 88px; display: flex; align-items: center; gap: 5px; height: 30px; color: #18b274; }
.u-web-ov-merge .mg-sub { position: absolute; left: 0; right: 0; top: 198px; height: 40px; border-bottom: 1px solid #eceef1; background: #fff; }
.u-web-ov-merge .mg-sub > span { position: absolute; top: 0; display: flex; align-items: center; gap: 5px; height: 39px; color: #6a6d6f; font-size: 15px; white-space: nowrap; }
.u-web-ov-merge .mg-sub > span.on { color: #0a5cf0; }
.u-web-ov-merge .mg-sub > span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: #0a5cf0; }
.u-web-ov-merge .mg-sub .pf-cnt { height: 18px; }
.u-web-ov-merge .mg-f1, .u-web-ov-merge .mg-f2 { position: absolute; left: 25px; right: 25px; border: 1px solid #e3e6e9; border-radius: 3px; background: #fff; }
.u-web-ov-merge .mg-f1 { top: 254px; height: 38px; background: #f4f7f9; display: flex; align-items: center; padding: 0 16px 0 0; }
.u-web-ov-merge .mg-tg { width: 17px; height: 15px; margin-left: 9px; border-radius: 2px; background: #e4e7ea; }
.u-web-ov-merge .mg-f1 .t { margin-left: 8px; font-size: 14px; }
.u-web-ov-merge .mg-f1 .s, .u-web-ov-merge .mg-fh .s { margin-left: auto; display: flex; gap: 8px; font-size: 13px; }
.u-web-ov-merge .a { color: #18b274; font-weight: 400; }
.u-web-ov-merge .d { color: #e34d59; font-weight: 400; }
.u-web-ov-merge .mg-f2 { top: 305px; bottom: -10px; }
.u-web-ov-merge .mg-fh { display: flex; align-items: center; height: 38px; padding: 0 16px 0 9px; border-bottom: 1px solid #e3e6e9; background: #f4f7f9; border-radius: 3px 3px 0 0; }
.u-web-ov-merge .mg-fh .pf-i { color: #5d6165; width: 10px; height: 10px; }
.u-web-ov-merge .mg-fh .t { margin-left: 14px; font-size: 14px; }
.u-web-ov-merge .mg-r { display: flex; height: 24px; align-items: stretch; line-height: 24px; background: #e5f9f2; font-size: 12.500px; color: #5d6165; white-space: nowrap; overflow: hidden; }
.u-web-ov-merge .mg-r .n { flex: none; width: 60px; text-align: center; font-style: normal; font-size: 13px; font-family: var(--ui-num); line-height: 24px; background: #c0eedc; }
.u-web-ov-merge .mg-r.d { background: #ffecee; }
.u-web-ov-merge .mg-r.d .n { background: #ffd3d9; }
.u-web-ov-merge .mg-r.c { background: #fff; }
.u-web-ov-merge .mg-r.c .n { background: #f2f7f8; }
.u-web-ov-merge .mg-r .n:nth-child(2) { width: 60px; }
.u-web-ov-merge .mg-hand { position: absolute; left: 36px; top: 274px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }


.u-web-ov-repo { --pf-nav-w: 64px; --pf-sub-w: 132px; --pf-top-h: 57px; border-radius: 14px; overflow: hidden; background: #e8ecf8; }
.u-web-ov-repo .pf-top { padding-left: 16px; }
.u-web-ov-repo .pf-logo-mark { width: 33px; height: 33px; background-size: 28px; }
.u-web-ov-repo .pf-logo-name { font-size: 17.500px; letter-spacing: .3px; }
.u-web-ov-repo .pf-proj { height: 32px; padding: 0 12px 0 11px; font-size: 14px; }
.u-web-ov-repo .pf-nav { gap: 4px; }
.u-web-ov-repo .pf-nav-i { width: 56px; flex: none; }
.u-web-ov-repo .pf-sub { padding: 8px 8px 0; }
.u-web-ov-repo .pf-sub-i { padding-left: 8px; }
.u-web-ov-repo .pf-sub-i .sd { margin-left: auto; margin-right: 4px; color: #8d9094; }
.u-web-ov-repo .pf-sub-i.c { padding-left: 36px; }
.u-web-ov-repo .pf-sub-i .ky { flex: none; color: var(--pf-text2); }
.u-web-ov-repo .pf-main { flex-direction: row; overflow: hidden; background: #fff; }
.u-web-ov-repo .rp-c2 { position: absolute; left: 0; top: 0; bottom: 0; width: 394.300px; border-right: 1px solid #eceef1; background: #fff; }
.u-web-ov-repo .rp-c2 .h { position: absolute; left: 18px; top: 13px; font-size: 14px; line-height: 22px; }
.u-web-ov-repo .rp-c2 .cg { position: absolute; right: 16px; top: 13px; display: flex; align-items: center; gap: 4px; line-height: 22px; color: #0060f0; }
.u-web-ov-repo .rp-c2 .cg .pc { position: relative; width: 17px; height: 17px; border-radius: 50%; background: #0a5cf0; }
.u-web-ov-repo .rp-c2 .cg .pc::before, .u-web-ov-repo .rp-c2 .cg .pc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.800px; margin: -.9px 0 0 -4.500px; border-radius: 1px; background: #fff; }
.u-web-ov-repo .rp-c2 .cg .pc::after { transform: rotate(90deg); }
.u-web-ov-repo .rp-c2 .se { position: absolute; left: 18px; right: 16px; top: 48px; height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 1px solid #dcdfe3; border-radius: 3px; background: #fff; color: #a2a3a4; box-sizing: border-box; }
.u-web-ov-repo .rp-c2 .se .pf-i { color: #8d9094; }
.u-web-ov-repo .rp-c2 .all { position: absolute; left: 18px; right: 16px; top: 86.200px; height: 36px; display: flex; align-items: center; gap: 6px; }
.u-web-ov-repo .rp-c2 .all .pf-i { color: #5d6165; }
.u-web-ov-repo .rp-c2 .all .fl { margin-left: auto; color: #5d6165; }
.u-web-ov-repo .rp-tr { position: absolute; left: 9.800px; width: 368.800px; height: 36px; border-radius: 4px; }
.u-web-ov-repo .rp-tr.on { background: #eaf2ff; color: #0060f0; }
.u-web-ov-repo .rp-tr.on .nm { color: #0060f0; }
.u-web-ov-repo .rp-tr .cr { position: absolute; top: 12px; color: #5d6165; transform-origin: 50% 50%; }
.u-web-ov-repo .rp-tr .dt { position: absolute; top: 15.500px; width: 5px; height: 5px; border-radius: 50%; background: #e3e5e8; }
.u-web-ov-repo .rp-tr .nm { position: absolute; top: 0; display: flex; align-items: center; gap: 6px; height: 36px; margin-left: -9.800px; white-space: nowrap; }
.u-web-ov-repo .rp-tr .tg { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border: 1px solid transparent; border-radius: 3px; font-size: 12px; line-height: 1; }
.u-web-ov-repo .rp-tr .tg.tb { background: #e6f0ff; border-color: #d3e3fc; color: #0a60d8; }
.u-web-ov-repo .rp-tr .tg.to { background: #fdeee2; border-color: #f9dcc6; color: #ed7b2f; }
.u-web-ov-repo .rp-tr .tg.tgy { background: #f4f5f6; border: 1px solid #e3e5e8; color: #8d9094; }
.u-web-ov-repo .rp-tr .mt { position: absolute; right: 30.500px; top: 0; display: flex; align-items: center; height: 36px; color: #8d9094; }
.u-web-ov-repo .rp-tr.p .mt { right: 59px; }
.u-web-ov-repo .rp-tr .mt b { margin: 0 6px 0 4px; font-weight: 400; color: #55595d; font-family: var(--ui-num); }
.u-web-ov-repo .rp-tr .mt b:last-child { margin-right: 0; }
.u-web-ov-repo .rp-tr .pl { position: absolute; right: 35px; top: 5px; width: 14px; text-align: center; font-size: 17px; line-height: 24px; color: #1a1d20; }
.u-web-ov-repo .rp-tr .mr { position: absolute; right: 11px; top: 10px; color: #3a3e42; }
.u-web-ov-repo .gl { position: absolute; width: 1px; background: #e8eaed; }
.u-web-ov-repo .gt { position: absolute; width: 8px; height: 1px; background: #e8eaed; }
.u-web-ov-repo .rp-c3 { position: absolute; left: 394.300px; right: 0; top: 0; bottom: 0; background: #fff; }
.u-web-ov-repo .rp-c3 .hd { position: absolute; left: 0; right: 0; top: 0; height: 47.200px; border-bottom: 1px solid #eceef1; display: flex; align-items: center; gap: 6px; padding-left: 23.600px; }
.u-web-ov-repo .rp-c3 .hd .pf-i { color: #ee7b2c; }
.u-web-ov-repo .rp-c3 .sb { position: absolute; left: 25px; top: 64.900px; width: 282px; height: 31px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid #dcdfe3; border-radius: 3px; color: #a2a3a4; box-sizing: border-box; white-space: nowrap; }
.u-web-ov-repo .rp-c3 .sb .pf-i { color: #8d9094; }
.u-web-ov-repo .rp-c3 .th { position: absolute; left: 0; right: 0; top: 112px; height: 40.400px; border-top: 1px solid #eceef1; padding-left: 37.400px; line-height: 40px; color: #8d9094; }
.u-web-ov-repo .rp-r { position: absolute; left: 11px; right: 0; height: 63px; border-top: 1px solid #eceef1; }
.u-web-ov-repo .rp-r .av { position: absolute; left: 26.400px; top: 19.500px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; font-size: 13px; }
.u-web-ov-repo .rp-r.one .av { top: 19.500px; }
.u-web-ov-repo .rp-r .av.tb { background: #e8f0fd; color: #2f6ed1; }
.u-web-ov-repo .rp-r .av.tg2 { background: #e0f5ec; color: #22a672; }
.u-web-ov-repo .rp-r .av.to2 { background: #fdeee3; color: #e98a45; }
.u-web-ov-repo .rp-r .av.tp2 { background: #f6e3fb; color: #a050cf; }
.u-web-ov-repo .rp-r .t { position: absolute; left: 58.700px; top: 8px; font-weight: 400; line-height: 22px; white-space: nowrap; }
.u-web-ov-repo .rp-r.one .t { top: 20px; }
.u-web-ov-repo .rp-r.sh .t { left: 55.700px; }
.u-web-ov-repo .rp-r .s { position: absolute; left: 58.700px; top: 32px; font-size: 12px; line-height: 20px; color: #b0b3b6; white-space: nowrap; }


.u-web-site-hero { background: #0d0d11; overflow: hidden; }
.u-web-site-hero .hr-st { position: absolute; left: 0; top: 0; width: 1800px; height: 1540px; transform: scale(.8); transform-origin: 0 0; }
.u-web-site-hero .hr-svg { position: absolute; left: 0; top: 0; }
.u-web-site-hero .hr-scr { position: absolute; left: 0; top: 0; width: 1436px; height: 943px; transform-origin: 0 0; overflow: hidden; border-radius: 26px 26px 6px 6px; background: #fff; }
.u-web-site-hero .hr-pg { position: absolute; left: 0; top: -6px; width: 1436px; height: 2950px; }
.u-web-site-hero .hr-nt { position: absolute; left: 626px; top: -4px; width: 122px; height: 46px; border-radius: 0 0 18px 18px; background: #000; }
.u-web-site-hero .hr-nt b { position: absolute; left: 54px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #35508a, #0b1226 60%); box-shadow: 0 0 0 2px #14161c; }
.u-web-site-hero .hr-gl { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .0) 40%, rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, 0) 80%); pointer-events: none; }
.u-web-site-hero .hr-kb { position: absolute; left: 0; top: 0; width: 1000px; height: 372px; transform-origin: 0 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; box-sizing: border-box; background: radial-gradient(ellipse 55% 50% at 55% 85%, rgba(70, 170, 150, .34), rgba(70, 170, 150, 0) 70%), rgba(3, 8, 36, .5); border-radius: 16px; }
.u-web-site-hero .hr-kb::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(180deg, rgba(2, 5, 30, .46) 0, rgba(2, 5, 30, .12) 36%, rgba(30, 140, 130, 0) 56%, rgba(40, 160, 150, .2) 100%), linear-gradient(90deg, rgba(20, 50, 160, .0) 0, rgba(2, 5, 30, 0) 80%, rgba(2, 5, 30, .3) 100%); }
.u-web-site-hero .hr-kb .kr { display: flex; gap: 6px; min-height: 0; }
.u-web-site-hero .hr-kb .k { display: flex; align-items: flex-end; justify-content: flex-start; min-width: 0; padding: 0 7px 5px; border-radius: 8px; background: linear-gradient(180deg, rgba(66, 112, 214, .42), rgba(16, 46, 140, .56)); box-shadow: inset 0 1px 0 rgba(190, 215, 255, .34), 0 2px 0 rgba(2, 5, 30, .62); color: #b4c8f4; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .3px; white-space: nowrap; overflow: hidden; }
.u-web-site-hero .hr-kb .kr:first-child .k { align-items: center; justify-content: center; padding: 0; font-size: 9px; }
.u-web-site-hero .hr-kb .k.l { justify-content: center; align-items: center; padding: 0; font-size: 20px; color: #cfdcff; font-weight: 500; }
.u-web-site-hero .hr-bub { position: absolute; left: 110px; top: 179px; width: 313px; height: 143px; border-radius: 72px; background: #fff; display: grid; place-items: center; }
.u-web-site-hero .hr-bub b { font-size: 88px; line-height: 1; font-weight: 900; letter-spacing: -2px; color: #070707; -webkit-text-stroke: 4px #070707; padding-bottom: 4px; }
.u-web-site-hero .hr-tail { position: absolute; left: 200px; top: 320px; }
.u-web-site-hero .hr-v b { position: absolute; left: 190px; width: 168px; height: 150px; text-align: center; font-size: 146px; line-height: 150px; font-weight: 900; color: #fff; -webkit-text-stroke: 9px #fff; }
.u-web-site-hero .hr-ar { position: absolute; left: 392px; top: 676px; }

.u-web-site-hero .hr-pg .wb-co, .u-web-site-hero .hr-pg .wb-bub, .u-web-site-hero .hr-pg .wb-tail { display: none; }
.u-web-site-hero .hr-pg .sl-p { visibility: hidden; }
.u-web-site-hero .hr-pg .sl-h1 { top: 160px; font-size: 39.4px; }
.u-web-site-hero .hr-pg .sl-sub { top: 247px; font-size: 14.6px; }
.u-web-site-hero .hr-p { position: absolute; left: 269px; top: 284px; margin: 0; font-size: 11.2px; line-height: 20.5px; color: #6b7380; white-space: nowrap; }


.u-web-site-long { background: #020302; color: #2b3a55; font-size: 13px; overflow: hidden; }
.u-web-site-long .sl-defs { position: absolute; width: 0; height: 0; }
.u-web-site-long .sl-clip { position: absolute; inset: 0; clip-path: inset(6px 0 6px 0 round 22px); background: #fff; overflow: hidden; }
.u-web-site-long .sl-clip > * { position: absolute; }

.u-web-site-long .sl-nav { left: 0; top: 0; width: 1436px; height: 66px; background: #fff; z-index: 5; box-shadow: 0 1px 0 rgba(120, 150, 200, .08); }
.u-web-site-long .sl-nav > .sl-logo { position: absolute; left: 268px; top: 19px; }
.u-web-site-long .sl-ni { position: absolute; top: 26px; font-size: 13px; line-height: 20px; color: #5d6470; white-space: nowrap; }
.u-web-site-long .sl-ni.on { color: #0f66d8; font-weight: 500; }
.u-web-site-long .sl-ni.on::after { content: ""; position: absolute; left: -1px; right: -2px; top: 37px; height: 3px; border-radius: 2px; background: #0f66d8; }

.u-web-site-long .sl-hero { left: 0; top: 0; width: 1436px; height: 473px; overflow: hidden; background: radial-gradient(280px 220px at 1436px 70px, rgba(248, 176, 214, .8), transparent 72%), radial-gradient(240px 280px at 1436px 250px, rgba(200, 172, 250, .6), transparent 72%), radial-gradient(460px 320px at 1230px 360px, rgba(125, 182, 255, .6), transparent 72%), radial-gradient(320px 240px at 40px 390px, rgba(146, 192, 255, .6), transparent 72%), radial-gradient(540px 420px at 560px 280px, rgba(255, 255, 255, .85), transparent 76%), linear-gradient(180deg, #e3efff, #eff7ff 50%, #d3e3fe); }
.u-web-site-long .sl-hero > * { position: absolute; }
.u-web-site-long .sl-sph { left: 425px; top: -60px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle at 42% 45%, rgba(255, 255, 255, .8), rgba(240, 248, 255, .55) 60%, rgba(218, 235, 255, .4) 100%); box-shadow: inset 0 0 40px rgba(255, 255, 255, .6); }
.u-web-site-long .sl-arc { border-radius: 50%; border: 1.500px solid rgba(255, 255, 255, .65); }
.u-web-site-long .sl-arc.a1 { left: 1175px; top: 150px; width: 520px; height: 580px; }
.u-web-site-long .sl-arc.a2 { left: 1150px; top: 330px; width: 520px; height: 640px; border-color: rgba(255, 255, 255, .5); }
.u-web-site-long .sl-arc.a3 { display: none; }
.u-web-site-long .sl-art { left: 780px; top: 70px; }
.u-web-site-long .sl-h1 { left: 269px; top: 167px; margin: 0; font-size: 41px; line-height: 56px; font-weight: 600; letter-spacing: .5px; color: #0a1633; white-space: nowrap; }
.u-web-site-long .sl-h1 span { background: linear-gradient(90deg, #1456e6, #12c4d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u-web-site-long .sl-sub { left: 269px; top: 255px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: #18233f; white-space: nowrap; }
.u-web-site-long .sl-p { left: 269px; top: 293px; margin: 0; font-size: 12.500px; line-height: 23px; color: #6b7380; white-space: nowrap; }

.u-web-site-long .sl-s2 { left: 0; top: 473px; width: 1436px; height: 749px; background: #f4f9ff; }
.u-web-site-long .sl-t { left: 0; width: 1436px; margin: 0; text-align: center; font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: 1px; color: #12234a; }
.u-web-site-long .sl-tabs { left: 265px; top: 586px; width: 1440px; height: 199px; transform: scale(.628); transform-origin: 0 0; }
.u-web-site-long .sl-tabs .u-web-site-tabs { background: none; border-radius: 0; }
.u-web-site-long .sl-tabs .u-web-site-tabs::before, .u-web-site-long .sl-tabs .u-web-site-tabs::after { display: none; }
.u-web-site-long .sl-fp { left: 268px; top: 713px; width: 900px; height: 447px; border-radius: 8px; overflow: hidden; background: radial-gradient(420px 300px at 70px 380px, rgba(190, 225, 252, .55), transparent 70%), linear-gradient(100deg, #e8f4ff 0%, #f2f9ff 45%, #f8fcff 100%); box-shadow: inset 0 0 0 1px #e9f2fb; }
.u-web-site-long .sl-fp > * { position: absolute; }
.u-web-site-long .sl-dots { background: radial-gradient(circle, #c4daf0 1.100px, transparent 1.500px) 0 0 / 6px 6px; }
.u-web-site-long .sl-dots.d1 { left: 0; top: 230px; width: 190px; height: 217px; -webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent); opacity: .8; }
.u-web-site-long .sl-dots.d2 { left: 600px; top: 0; width: 300px; height: 80px; -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); opacity: .5; }
.u-web-site-long .sl-ft { left: 32px; top: 80px; font-size: 20px; line-height: 28px; font-weight: 700; color: #1b2a4a; letter-spacing: 1px; }
.u-web-site-long .sl-fd { left: 44px; top: 129px; margin: 0; font-size: 13px; line-height: 20.500px; color: #58667b; white-space: nowrap; }
.u-web-site-long .sl-dm { position: absolute; left: -13px; top: 7px; width: 6px; height: 6px; background: #1f66e8; transform: rotate(45deg); }
.u-web-site-long .sl-shot { left: 326px; top: 31px; width: 1354px; height: 800px; transform: scale(.466); transform-origin: 0 0; }

.u-web-site-long .sl-intro { left: 0; width: 1436px; top: 1347px; margin: 0; text-align: center; font-size: 13.500px; line-height: 23px; color: #6b7380; white-space: nowrap; }
.u-web-site-long .sl-ac { border-radius: 6px; background: linear-gradient(135deg, #f5f7fd, #f9faff 60%, #f6f8fd); }
.u-web-site-long .sl-at { font-size: 15px; line-height: 22px; font-weight: 700; color: #14234a; white-space: nowrap; }
.u-web-site-long .sl-ad { margin: 0; font-size: 12.500px; line-height: 20.500px; color: #8b94a3; white-space: nowrap; }
.u-web-site-long .sl-ct { left: 638px; top: 1493px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 85% 88%, rgba(255, 224, 200, .55), transparent 40%), radial-gradient(circle at 50% 36%, #ffffff 0, #f1f7ff 45%, #d2e4ff 100%); box-shadow: 0 0 0 5px rgba(255, 255, 255, .75), 0 6px 26px rgba(116, 156, 232, .28); text-align: center; }
.u-web-site-long .sl-ct b { position: absolute; left: 0; right: 0; top: 37px; font-size: 42px; line-height: 52px; font-weight: 800; color: #1f6ff2; }
.u-web-site-long .sl-ct b em { font-style: normal; }
.u-web-site-long .sl-ct span { position: absolute; left: 0; right: 0; top: 91px; font-size: 16px; line-height: 24px; font-weight: 700; color: #14234a; }
.u-web-site-long .sl-ct i { display: none; }

.u-web-site-long .sl-s4 { left: 0; top: 1780px; width: 1436px; height: 860px; background: radial-gradient(520px 260px at 160px 860px, rgba(150, 196, 255, .85), transparent 75%), radial-gradient(520px 260px at 1300px 860px, rgba(196, 188, 255, .9), transparent 75%), linear-gradient(180deg, #f6f8ff 0, #f4f7ff 38%, #dfecff 72%, #cbe0ff 100%); }
.u-web-site-long .sl-fw { left: 269px; top: 1913px; width: 898px; height: 666px; border-radius: 8px; background: #fff; box-shadow: 0 6px 26px rgba(90, 130, 210, .1); }
.u-web-site-long .sl-lb { display: grid; place-items: center; border-radius: 3px; background: #0864f5; color: #fff; text-align: center; font-size: 13px; line-height: 17px; font-weight: 700; }
.u-web-site-long .sl-pn { border-radius: 3px; background: #eaf1fe; }
.u-web-site-long .sl-wb { position: absolute; border-radius: 3px; background: #fff; }
.u-web-site-long .sl-wb .u { position: absolute; top: 7px; left: 222px; display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: #2b3a55; white-space: nowrap; }
.u-web-site-long .sl-wb .u i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #5b78a8; box-sizing: border-box; }
.u-web-site-long .sl-wb .u i.ic2 { border-color: #3f9bd8; background: radial-gradient(circle, #fff 28%, #6cc0f0 30%); }
.u-web-site-long .sl-qk { text-align: center; font-size: 12px; line-height: 17px; font-weight: 700; color: #1c2a4a; }
.u-web-site-long .sl-bx { position: absolute; display: grid; place-items: center; border-radius: 3px; background: #fff; font-size: 12px; line-height: 15px; color: #2b3a55; text-align: center; box-shadow: 0 1px 2px rgba(60, 100, 180, .05); white-space: nowrap; }
.u-web-site-long .sl-bx small { display: block; font-size: 7px; line-height: 9px; color: #7d8ba6; }
.u-web-site-long .sl-sa.t { background: #d4f3f6; color: #2a4a6a; }
.u-web-site-long .sl-sa.p { background: #e4e6f8; color: #3a4a6a; }
.u-web-site-long .sl-sy { background: #e6e5f7; color: #3a4a6a; }
.u-web-site-long .sl-dz { border: 1px dashed #aac6ee; border-radius: 4px; background: rgba(214, 230, 252, .38); }
.u-web-site-long .sl-rg { border-radius: 3px; background: #dbe8fb; }
.u-web-site-long .sl-rl { font-size: 12px; line-height: 18px; font-weight: 700; color: #1f66e8; white-space: nowrap; }
.u-web-site-long .sl-ttl { text-align: center; font-size: 12px; line-height: 18px; font-weight: 700; color: #1f66e8; }
.u-web-site-long .sl-lg { font-size: 10.500px; line-height: 22px; text-align: center; height: 22px; border-radius: 2px; }
.u-web-site-long .sl-lg.a { width: 80px; background: #d6f6f6; color: #2b8a98; }
.u-web-site-long .sl-lg.b { width: 79px; background: #e3e3f7; color: #4a4a8a; }
.u-web-site-long .sl-sv { border-radius: 3px; background: #eef0fa; }
.u-web-site-long .sl-sv2 { display: grid; place-items: center; text-align: center; border-radius: 3px; background: #e6e8f8; font-size: 12px; line-height: 16.600px; color: #1c2a4a; }
.u-web-site-long .sl-ev { display: grid; place-items: center; text-align: center; border-radius: 3px; background: #e9eefa; font-size: 11.500px; line-height: 16.500px; font-weight: 700; color: #1c2a4a; }

.u-web-site-long .sl-ft2 { left: 0; top: 2640px; width: 1436px; height: 310px; overflow: hidden; background: linear-gradient(180deg, #0d1c35, #0b172b 70%, #0a1324); }
.u-web-site-long .sl-ft2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: rgba(2, 6, 18, .45); }
.u-web-site-long .sl-ft2 i { position: absolute; background: rgba(40, 72, 124, .12); }
.u-web-site-long .sl-ft2 .b1 { left: 560px; top: 0; width: 330px; height: 300px; clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%); }
.u-web-site-long .sl-ft2 .b2 { left: 930px; top: 20px; width: 280px; height: 300px; background: rgba(60, 96, 150, .13); clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%); }
.u-web-site-long .sl-ft2 .b3 { left: 1150px; top: 0; width: 290px; height: 300px; background: rgba(70, 104, 160, .14); clip-path: polygon(30% 0, 100% 30%, 100% 100%, 0 100%); }
.u-web-site-long .sl-ft2 .b4 { left: 120px; top: 120px; width: 400px; height: 200px; background: rgba(30, 56, 100, .2); clip-path: polygon(0 100%, 60% 0, 100% 100%); }
.u-web-site-long .sl-fl { left: 268px; top: 2686px; }
.u-web-site-long .sl-fv { left: 637px; top: 2682px; width: 1px; height: 176px; background: #2c3a56; }
.u-web-site-long .sl-fi { position: absolute; }
.u-web-site-long .sl-fx { position: absolute; font-size: 12.200px; line-height: 20px; color: #eef2fa; font-weight: 500; white-space: nowrap; letter-spacing: .2px; }
.u-web-site-long .sl-fh { font-size: 12px; line-height: 20px; color: #fff; font-weight: 500; white-space: nowrap; }
.u-web-site-long .sl-fk { font-size: 10.500px; line-height: 18px; color: #6a7894; white-space: nowrap; }
.u-web-site-long .sl-cp { left: 0; width: 1436px; top: 2911px; text-align: center; font-size: 10px; line-height: 17px; color: #566380; letter-spacing: .3px; }
.u-web-site-long .sl-clip > svg.sl-fi, .u-web-site-long .sl-clip > svg.sl-ai, .u-web-site-long .sl-clip > svg.sl-aw, .u-web-site-long .sl-clip > svg.sl-dn { position: absolute; }
.u-web-site-long .sl-fx { z-index: 1; }

.u-web-site-long .sl-shot .wb-co, .u-web-site-long .sl-shot .wb-bub, .u-web-site-long .sl-shot .wb-tail { margin-top: -19px; }


.u-web-site-tabs { background: #f3f7fa; border-radius: 32px; overflow: hidden; }
.u-web-site-tabs .stb-defs { position: absolute; width: 0; height: 0; }
.u-web-site-tabs::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 8% 10%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%), radial-gradient(90% 120% at 92% 100%, rgba(224,232,246,.55), rgba(224,232,246,0) 60%); }
.u-web-site-tabs::after { content: ""; position: absolute; inset: 0; opacity: .1; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .42  0 0 0 0 .55  0 0 0 .9 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); }
.u-web-site-tabs .stb-wrap { position: absolute; inset: 0; }
.u-web-site-tabs .stb-on { position: absolute; left: 77px; top: 32px; width: 143px; height: 134px; border-radius: 12px; background: #e9edfa; }
.u-web-site-tabs .stb-i { position: absolute; top: 32px; width: 143px; height: 134px; display: flex; flex-direction: column; align-items: center; }
.u-web-site-tabs .stb-i svg { display: block; width: 54px; height: 54px; margin-top: 25px; filter: drop-shadow(0 3px 4px rgba(34, 118, 240, .16)); }
.u-web-site-tabs .stb-i span { margin-top: 7px; font-size: 17px; line-height: 24px; letter-spacing: .5px; color: #3b4150; white-space: nowrap; }
.u-web-site-tabs .stb-i.on span { font-weight: 600; color: #16233f; }
.u-web-site-tabs .stb-i.low span { margin-top: 10px; }


.u-web-site-workbench { background: linear-gradient(120deg, #f6f9fb, #eef3f8 60%, #f1f5f9); font-size: 12px; color: #34383c; overflow: hidden; }
.u-web-site-workbench > * { position: absolute; }
.u-web-site-workbench .wb-card { left: 145px; top: 5px; width: 1202px; height: 783px; border-radius: 22px; background: #fbfdff; border: 1px solid #edf1f6; box-shadow: 0 10px 34px rgba(110, 140, 185, .12); }
.u-web-site-workbench .wb-dot { top: 25px; width: 16px; height: 16px; border-radius: 50%; }
.u-web-site-workbench .wb-win { left: 183px; top: 55px; width: 1130px; height: 702px; border-radius: 14px 14px 10px 10px; background: #e8f0fc; }
.u-web-site-workbench .wb-top { left: 183px; top: 55px; width: 1130px; height: 45px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, #d6e7fc, #dfecfb 55%, #e3eefb); }
.u-web-site-workbench .wb-logo { left: 198px; top: 64px; width: 28px; height: 28px; background-size: 22px; border-radius: 8px; }
.u-web-site-workbench .wb-title { left: 247px; top: 67px; font-size: 14px; line-height: 22px; font-weight: 700; color: #12326f; white-space: nowrap; }
.u-web-site-workbench .wb-tr { left: 1022px; top: 67px; display: flex; align-items: center; gap: 10px; height: 22px; }
.u-web-site-workbench .wb-ib { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #5a5e62; }
.u-web-site-workbench .wb-ib.dot::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #e34d59; }
.u-web-site-workbench .wb-u { display: flex; align-items: center; gap: 6px; margin-left: 2px; font-size: 12px; color: #34383c; }
.u-web-site-workbench .wb-u .pf-i { color: #a2a3a4; }
.u-web-site-workbench .wb-navbg { left: 183px; top: 100px; width: 56px; height: 657px; border-radius: 0 0 0 10px; background: linear-gradient(180deg, #dce8fb, #e3edfc); }
.u-web-site-workbench .wb-main { left: 239px; top: 100px; width: 1074px; height: 657px; border-radius: 10px 0 10px 0; background: #f1f6fe; }
.u-web-site-workbench .wb-nv { left: 189px; width: 43px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 6px; color: #2b3036; font-size: 10.500px; line-height: 14px; }
.u-web-site-workbench .wb-nv .pf-i { width: 17px; height: 17px; }
.u-web-site-workbench .wb-nv.on { background: #fff; color: #1f66e8; font-weight: 500; box-shadow: 0 1px 4px rgba(40, 70, 140, .08); }
.u-web-site-workbench .wb-c { background: #fff; border-radius: 8px; }
.u-web-site-workbench .wb-greet { background: linear-gradient(180deg, #f1f6fe 0, #f6f9fe 52%, #fff 53%); }
.u-web-site-workbench .wb-h { font-size: 12.500px; line-height: 20px; font-weight: 500; color: #1c2024; white-space: nowrap; }
.u-web-site-workbench .wb-all { display: flex; align-items: center; gap: 2px; font-size: 11px; line-height: 18px; color: #6a6d6f; }
.u-web-site-workbench .wb-pj { height: 47px; width: 160px; display: flex; align-items: center; gap: 6px; padding-left: 12px; border-radius: 6px; background: #f6f8fd; font-size: 11px; white-space: nowrap; }
.u-web-site-workbench .wb-pj i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #e6eefc; color: #4a82e3; font-size: 11px; font-style: normal; }
.u-web-site-workbench .wb-gd { margin: 0; font-size: 10px; line-height: 19px; color: #a7adb5; white-space: nowrap; }
.u-web-site-workbench .wb-lb { width: 152px; height: 26px; display: flex; align-items: center; gap: 6px; padding-left: 10px; border-radius: 4px; background: #e6eefc; color: #2d6fd8; font-size: 11px; }
.u-web-site-workbench .wb-tb { display: flex; align-items: center; gap: 5px; height: 21px; font-size: 11px; line-height: 21px; color: #7a7e82; white-space: nowrap; }
.u-web-site-workbench .wb-tb .pf-cnt { min-width: 16px; height: 15px; padding: 0 4px; font-size: 10.500px; font-family: var(--ui-num); }
.u-web-site-workbench .wb-tb.on { color: #2f6fe0; }
.u-web-site-workbench .wb-tb.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: #1f66e8; }
.u-web-site-workbench .wb-tb .pf-cnt-n { background: #eef0f2; color: #a2a3a4; }
.u-web-site-workbench .wb-vl { width: 1px; height: 12px; background: #dcdfe3; }
.u-web-site-workbench .wb-sch { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 18px; color: #6a6d6f; }
.u-web-site-workbench .wb-sch .pf-i { color: #a2a3a4; }
.u-web-site-workbench .wb-th { font-size: 10.500px; line-height: 18px; color: #a7abb0; white-space: nowrap; }
.u-web-site-workbench .wb-rw { left: 0; width: 1354px; height: 18px; font-size: 11px; line-height: 18px; }
.u-web-site-workbench .wb-rw > * { position: absolute; top: 0; }
.u-web-site-workbench .wb-rt { white-space: nowrap; color: #34383c; }
.u-web-site-workbench .wb-rp { top: 1px; height: 16px; min-width: 18px; padding: 0 3px; font-size: 10px; }
.u-web-site-workbench .wb-st { top: 0; height: 17px; padding: 0 5px; border: 1px solid; border-radius: 3px; font-size: 10px; line-height: 15px; background: #fff; }
.u-web-site-workbench .wb-st-g { color: #18b274; } .u-web-site-workbench .wb-st-b { color: #1f66e8; } .u-web-site-workbench .wb-st-n { color: #8d9094; border-color: #c6c8c9; }
.u-web-site-workbench .wb-it { overflow: hidden; }
.u-web-site-workbench .wb-it > * { position: absolute; }
.u-web-site-workbench .wb-open { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 18px; color: #6a6d6f; }
.u-web-site-workbench .wb-ii { left: 0; width: 335px; height: 40px; }
.u-web-site-workbench .wb-ii > * { position: absolute; white-space: nowrap; }
.u-web-site-workbench .wb-ic { left: 12px; top: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: #f3f5f9; color: #a2a3a4; }
.u-web-site-workbench .wb-itw { left: 42px; top: 0; display: flex; align-items: center; gap: 6px; }
.u-web-site-workbench .wb-it1 { position: static; font-size: 11px; line-height: 18px; color: #2a2e32; max-width: 195px; overflow: hidden; text-overflow: ellipsis; }
.u-web-site-workbench .wb-cur { position: static; flex: none; padding: 0 4px; height: 14px; border-radius: 3px; background: #e3edfd; color: #2f6fe0; font-size: 10px; line-height: 14px; font-style: normal; }
.u-web-site-workbench .wb-it2 { left: 42px; top: 21px; font-size: 9.500px; line-height: 16px; color: #b6bac0; font-family: var(--ui-num); }
.u-web-site-workbench .wb-it3 { left: 181px; top: 21px; font-size: 9.500px; line-height: 16px; color: #b6bac0; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
.u-web-site-workbench .wb-pb { left: 265px; top: 16px; width: 32px; height: 4px; border-radius: 2px; background: #e1e6ef; }
.u-web-site-workbench .wb-pb i { display: block; height: 100%; border-radius: 2px; background: #1f66e8; }
.u-web-site-workbench .wb-pp { left: 302px; top: 10px; font-size: 9.500px; line-height: 16px; color: #b6bac0; font-family: var(--ui-num); }

.u-web-site-workbench .wb-co { left: 5px; top: 409px; width: 990px; height: 381px; box-sizing: border-box; border: 4px solid transparent; border-radius: 22px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #7fb6ff 0, #62cdf6 45%, #6fe2f8 100%) border-box; box-shadow: 0 0 18px rgba(104, 204, 248, .6), 0 12px 32px rgba(84, 150, 230, .18); font-size: 17px; color: #1c2024; }
.u-web-site-workbench .wb-co > * { position: absolute; white-space: nowrap; }
.u-web-site-workbench .wb-cot { font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: .5px; }
.u-web-site-workbench .wb-covl { width: 1px; height: 16px; background: #dcdfe3; }
.u-web-site-workbench .wb-cotab { display: flex; align-items: center; gap: 6px; height: 26px; font-size: 16px; line-height: 26px; color: #7d8186; }
.u-web-site-workbench .wb-cotab .pf-cnt { min-width: 22px; height: 19px; padding: 0 6px; border-radius: 10px; font-size: 14px; font-family: var(--ui-num); }
.u-web-site-workbench .wb-cotab .pf-cnt-n { background: #eef0f2; color: #a2a3a4; }
.u-web-site-workbench .wb-cotab.on { color: #2f6fe0; }
.u-web-site-workbench .wb-cotab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 2px; background: #1f66e8; }
.u-web-site-workbench .wb-cosc { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 16px; line-height: 26px; color: #6a6d6f; }
.u-web-site-workbench .wb-cosc .pf-i { width: 15px; height: 15px; color: #a2a3a4; }
.u-web-site-workbench .wb-coh { top: 77px; font-size: 15.500px; line-height: 22px; color: #a2a7ad; }
.u-web-site-workbench .wb-cou { top: 106px; height: 2px; background: #e4e8ee; }
.u-web-site-workbench .wb-cor { left: 0; right: 0; height: 26px; font-size: 16px; line-height: 26px; }
.u-web-site-workbench .wb-cor > * { position: absolute; top: 0; }
.u-web-site-workbench .wb-cor .pf-i { top: 5px; width: 15px; height: 15px; }
.u-web-site-workbench .wb-cor .t { color: #1c2024; }
.u-web-site-workbench .wb-cop { top: 0; width: 24px; height: 26px; display: grid; place-items: center; border-radius: 4px; font-size: 14.500px; }
.u-web-site-workbench .wb-cop-b { background: #e3edfd; color: #3a74dc; }
.u-web-site-workbench .wb-cop-r { background: #fbe6e9; color: #e46a78; }
.u-web-site-workbench .wb-cop-g { background: #e0f4ea; color: #4bb88b; }
.u-web-site-workbench .wb-cost { top: 0; right: 0; left: auto; height: 26px; box-sizing: border-box; padding: 0 4px; margin-right: 14px; border: 1.500px solid; border-radius: 3px; font-size: 14.500px; line-height: 23px; background: #fff; }
.u-web-site-workbench .wb-cost-g { color: #18b274; } .u-web-site-workbench .wb-cost-b { color: #1f66e8; } .u-web-site-workbench .wb-cost-n { color: #8d9094; border-color: #c6c8c9; }
.u-web-site-workbench .wb-bub { left: 15px; top: 362px; width: 343px; height: 50px; border-radius: 25px; background: linear-gradient(90deg, #1272f6, #1ab5f5 70%, #18d1f1); box-shadow: 0 6px 16px rgba(30, 140, 240, .28); color: #fff; font-size: 22px; line-height: 50px; text-align: center; letter-spacing: .3px; white-space: nowrap; font-weight: 500; }
.u-web-site-workbench .wb-tail { left: 229px; top: 407px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #17aef5; transform: skewX(20deg); }


.u-web-site-req { background: linear-gradient(120deg, #fdfdff, #f7f9fd); overflow: hidden; font-size: 12px; color: #34383c; }
.u-web-site-req > * { position: absolute; }
.u-web-site-req .rq-dot { top: 0; width: 16px; height: 16px; border-radius: 50%; }
.u-web-site-req .rq-ui { left: 35px; top: 30px; width: 1320px; height: 910px; transform: scale(.88); transform-origin: 0 0; border-radius: 16px 16px 0 0; overflow: hidden; --pf-nav-w: 59px; --pf-sub-w: 130px; box-shadow: 0 6px 30px rgba(110, 140, 185, .1); background: #fff; }
.u-web-site-req .rq-ui .pf-shell { background: linear-gradient(90deg, #dfe9fb, #e6effb 45%, #e9f1fc); }
.u-web-site-req .rq-ui .pf-nav { gap: 5px; padding-top: 0; }
.u-web-site-req .rq-ui .pf-nav-i { height: 58px; }
.u-web-site-req .rq-ui .pf-sub { padding-top: 10px; }
.u-web-site-req .rq-ui .pf-sub-t { height: 33px; }
.u-web-site-req .rq-ui .pf-sub-t:not(:first-child) { margin-top: 20px; }
.u-web-site-req .rq-ui .pf-main { overflow: hidden; }
.u-web-site-req .rq-tr { display: flex; gap: 8px; margin: 8px -72px 0 auto; }
.u-web-site-req .rq-ui .pf-top-r { margin-right: -12px; }
.u-web-site-req .pf-tabs { padding-right: 0; }
.u-web-site-req .rq-fl { margin-top: 22px; padding: 0 0 0 20px; }
.u-web-site-req .rq-ui .pf-sel, .u-web-site-req .rq-ui .pf-input { height: 30px; }
.u-web-site-req .rq-ui .pf-sel-g { background: #f3f5f8; border-color: #e4e8ee; }
.u-web-site-req .rq-tb { width: 1130px; margin: 20px 0 0 20px; }
.u-web-site-req .rq-tb th { border-top: 0; height: 42px; color: #a2a3a4; }
.u-web-site-req .rq-tb td { height: 45px; border-bottom: 0; }
.u-web-site-req .rq-tb .c0 { padding-left: 12px; padding-right: 0; }
.u-web-site-req .rq-tb .pf-ck { border-color: #d5d9df; }
.u-web-site-req .rq-q td { height: 45px; color: var(--pf-text); }
.u-web-site-req .rq-bx { width: 12px; height: 12px; color: #a2a3a4; }
.u-web-site-req .pf-no { color: var(--pf-text); }
.u-web-site-req .rq-tb td.pf-no, .u-web-site-req .rq-tb td { overflow: visible; }
.u-web-site-req .rq-tb .pf-tag { height: 19px; min-width: 19px; padding: 0 4px; font-size: 11px; background-color: #f1f6fd; }
.u-web-site-req .rq-tb .pf-tag-r { background-color: #fdecee; } .u-web-site-req .rq-tb .pf-tag-g { background-color: #e8f7f0; }
.u-web-site-req .rq-gt, .u-web-site-req .rq-md { box-sizing: border-box; border: 4px solid transparent; border-radius: 22px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #5f9cf6 0, #6fb4fa 55%, #7fe3f9 100%) border-box; box-shadow: 0 0 18px rgba(100, 170, 245, .35), 0 10px 30px rgba(80, 130, 220, .14); overflow: hidden; }
.u-web-site-req .rq-gt { left: 5px; top: 411px; width: 578px; height: 357px; border-radius: 22px 22px 22px 22px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, #6aa4f6 0, #6cc0fa 60%, #7fe3f8 100%) border-box; }
.u-web-site-req .rq-gt > * { position: absolute; }
.u-web-site-req .rq-gm { left: 9px; top: 6px; font-size: 13px; line-height: 18px; color: #1c2024; }
.u-web-site-req .rq-gw { top: 26px; height: 27px; line-height: 27px; text-align: center; font-size: 13px; color: #a7acb2; border-right: 1px solid #e4e8ee; border-top: 1px solid #e4e8ee; border-bottom: 1px solid #e4e8ee; white-space: nowrap; font-family: var(--ui-num); }
.u-web-site-req .rq-gl { top: 53px; bottom: 0; width: 1.500px; }
.u-web-site-req .rq-gb { height: 14px; border: 1px solid #8fb4ee; border-radius: 2px; background: #cfe0fa; box-sizing: border-box; }
.u-web-site-req .rq-gb i { display: block; height: 100%; margin: -1px; background: #0a5ee8; border-radius: 2px 0 0 2px; }
.u-web-site-req .rq-gb.sum { height: 15px; }
.u-web-site-req .rq-gb.sum::before { content: ""; position: absolute; left: -1px; top: 14px; border-left: 8px solid #0a5ee8; border-bottom: 8px solid transparent; }
.u-web-site-req .rq-gb.sum::after { content: ""; position: absolute; right: -1px; top: 14px; border-right: 8px solid #cfe0fa; border-bottom: 8px solid transparent; }
.u-web-site-req .rq-ms { width: 21px; height: 21px; margin-left: -1px; display: grid; place-items: center; border-radius: 4px; background: #1fa971; transform: rotate(45deg); color: #fff; }
.u-web-site-req .rq-ms .pf-i { transform: rotate(-45deg); }
.u-web-site-req .rq-md { left: 871px; top: 116px; width: 358px; height: 608px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #5b9af6 0, #6aaff8 60%, #78d9f8 100%) border-box; }
.u-web-site-req .rq-md > * { position: absolute; white-space: nowrap; }
.u-web-site-req .rq-mt { left: 20px; top: 22px; font-size: 16px; line-height: 24px; font-weight: 600; color: #1c2024; }
.u-web-site-req .rq-mr { left: 0; right: 0; height: 24px; font-size: 16px; line-height: 24px; }
.u-web-site-req .rq-mr .k { position: absolute; left: 20px; color: #6e7276; }
.u-web-site-req .rq-mr .v { position: absolute; left: 156px; color: #1c2024; }
.u-web-site-req .rq-mr .v.ph { color: #c4c7cb; }
.u-web-site-req .rq-mp { top: -1px; width: 24px; height: 26px; display: grid; place-items: center; border-radius: 4px; background: #e6effc; color: #2f6fe0; font-size: 15px; }
.u-web-site-req .rq-mc { position: absolute; left: 310px; top: 4px; color: #a2a3a4; }
.u-web-site-req .rq-bub { height: 56px; border-radius: 28px; background: linear-gradient(90deg, #0b66f5, #07a8f9 55%, #03dcfe); box-shadow: 0 6px 18px rgba(20, 130, 240, .3); color: #fff; font-size: 22px; line-height: 56px; text-align: center; font-weight: 500; white-space: nowrap; letter-spacing: .3px; }
.u-web-site-req .rq-tail { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #0b86f8; transform: skewX(18deg); }
.u-web-site-req .rq-tail.l { border-top-color: #0fa4fb; transform: skewX(-18deg); }


.u-web-site-test { background: linear-gradient(120deg, #f6f9fb, #f1f5f9); overflow: hidden; font-size: 12px; color: #34383c; }
.u-web-site-test > * { position: absolute; }
.u-web-site-test .ts-card { left: -20px; top: -20px; width: 1237px; height: 782px; border-radius: 22px; background: #fbfdff; box-shadow: 0 8px 30px rgba(110, 140, 185, .08); }
.u-web-site-test .ts-dot { top: 22px; width: 16px; height: 16px; border-radius: 50%; }
.u-web-site-test .ts-ui { left: 37px; top: 53px; width: 1320px; height: 850px; transform: scale(.88); transform-origin: 0 0; border-radius: 16px 16px 0 0; overflow: hidden; --pf-nav-w: 59px; --pf-sub-w: 130px; background: #fff; }
.u-web-site-test .ts-ui .pf-shell { background: linear-gradient(90deg, #dfe9fb, #e6effb 45%, #e9f1fc); }
.u-web-site-test .ts-ui .pf-nav { gap: 5px; padding-top: 0; }
.u-web-site-test .ts-ui .pf-nav-i { height: 58px; }
.u-web-site-test .ts-ui .pf-sub { padding-top: 10px; }
.u-web-site-test .ts-ui .pf-sub-t { height: 30px; }
.u-web-site-test .ts-ui .pf-sub-i { height: 30px; margin-bottom: 2.400px; font-size: 12.500px; }
.u-web-site-test .ts-ui .pf-proj { margin-left: 22px; height: 34px; padding: 0 12px; font-size: 15px; background: rgba(255, 255, 255, .6); }
.u-web-site-test .ts-ui .pf-top-r { margin-right: -12px; }
.u-web-site-test .ts-fade { left: 37px; top: 520px; width: 1161px; height: 266px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .88) 45%, rgba(255, 255, 255, .96)); }
.u-web-site-test .ts-pt { font-size: 14px; line-height: 20px; font-weight: 600; color: #1c2024; }
.u-web-site-test .ts-ai { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: #7c8085; }
.u-web-site-test .ts-vl { width: 1px; height: 18px; background: #e3e6ea; }
.u-web-site-test .ts-aip { display: flex; align-items: center; gap: 4px; width: 86px; height: 28px; padding-left: 26px; box-sizing: border-box; border-radius: 6px; background: linear-gradient(100deg, #2a7cf6, #8a4ff0 55%, #22c4ff); color: #fff; font-size: 12px; font-weight: 600; font-style: italic; letter-spacing: .3px; white-space: nowrap; box-shadow: 0 2px 8px rgba(120, 90, 240, .3); }
.u-web-site-test .ts-bot { position: absolute; left: -2px; top: -6px; width: 20px; height: 18px; border-radius: 9px; background: #2b1d6e; border: 2px solid #b8a6ff; box-sizing: border-box; }
.u-web-site-test .ts-bot::before, .u-web-site-test .ts-bot::after { content: ""; position: absolute; top: 5px; width: 3px; height: 4px; border-radius: 2px; background: #6cf2ff; }
.u-web-site-test .ts-bot::before { left: 4px; } .u-web-site-test .ts-bot::after { right: 4px; }
.u-web-site-test .ts-b { height: 26px; font-size: 12px; box-sizing: border-box; padding: 0 8px; border-color: #d3d6da; }
.u-web-site-test .ts-b.pf-btn-p { border-color: #0060f0; }
.u-web-site-test .ts-t13 { font-size: 13px; line-height: 18px; color: #34383c; }
.u-web-site-test .ts-plus { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #1f66e8; color: #fff; }
.u-web-site-test .ts-plus .pf-i { width: 11px; height: 11px; }
.u-web-site-test .ts-in, .u-web-site-test .ts-sl { display: flex; align-items: center; gap: 6px; height: 25px; box-sizing: border-box; padding: 0 8px; border: 1px solid #dcdfe4; border-radius: 3px; background: #fff; font-size: 11px; white-space: nowrap; color: #4a4e52; }
.u-web-site-test .ts-in .pf-i:last-child, .u-web-site-test .ts-sl .pf-i:last-child { margin-left: auto; color: #a2a3a4; }
.u-web-site-test .ts-in > .pf-i:first-child { color: #a2a3a4; }
.u-web-site-test .ts-tr { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 18px; color: #34383c; }
.u-web-site-test .ts-tn { display: flex; align-items: center; font-size: 11px; line-height: 18px; color: #4a4e52; white-space: nowrap; }
.u-web-site-test .ts-cr { width: 0; height: 0; margin: 0 5px 0 -8px; border-left: 4px solid #6a6d6f; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.u-web-site-test .ts-bu { width: 4px; height: 4px; margin: 0 8px 0 -14px; border-radius: 50%; background: #c6c9cd; }
.u-web-site-test .ts-sep { width: 1px; background: #f0f2f5; }
.u-web-site-test .ts-g { font-size: 10.500px; line-height: 18px; color: #7c8085; white-space: nowrap; }
.u-web-site-test .ts-cur { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 3px; background: #f3f4f6; font-size: 10.500px; color: #6a6d6f; white-space: nowrap; }
.u-web-site-test .ts-cur .pf-i { color: #f6a31a; }
.u-web-site-test .ts-th { font-size: 12px; line-height: 18px; color: #a7abb0; }
.u-web-site-test .ts-rw { left: 0; width: 1290px; height: 18px; font-size: 11px; line-height: 18px; }
.u-web-site-test .ts-rw > * { position: absolute; top: 0; white-space: nowrap; }
.u-web-site-test .ts-rw .pf-ck { left: 395px; top: 2px; width: 14px; height: 14px; border-color: #d9dde3; }
.u-web-site-test .ts-rw .n { left: 421px; color: #34383c; }
.u-web-site-test .ts-rw .p { left: 641px; display: flex; align-items: center; gap: 3px; color: #34383c; }
.u-web-site-test .ts-rw .p i { width: 8px; height: 8px; border: 1.500px solid; border-radius: 50%; }
.u-web-site-test .ts-rw .p.r i { color: #e0566a; } .u-web-site-test .ts-rw .p.b i { color: #1f66e8; }
.u-web-site-test .ts-rw .c { color: #4a4e52; font-family: var(--ui-num); }
.u-web-site-test .ts-rw .e { left: 1161px; color: #1f66e8; }
.u-web-site-test .ts-dt { left: 530px; top: 231px; width: 758px; height: 216px; box-sizing: border-box; border: 4px solid transparent; border-radius: 20px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, #5b98f6 0, #66adf8 50%, #7fe6f8 100%) border-box; box-shadow: 0 0 18px rgba(100, 190, 245, .4), 0 10px 28px rgba(80, 130, 220, .14); overflow: hidden; }
.u-web-site-test .ts-dt > * { position: absolute; white-space: nowrap; }
.u-web-site-test .ts-dtt { top: 13px; font-size: 13px; line-height: 20px; font-weight: 600; color: #1c2024; }
.u-web-site-test .ts-lv { top: 13px; font-size: 13px; line-height: 20px; color: #7c8085; }
.u-web-site-test .ts-lv.b { color: #1c2024; }
.u-web-site-test .ts-ring { width: 9px; height: 9px; border: 2px solid #1f66e8; border-radius: 50%; box-sizing: border-box; }
.u-web-site-test .ts-dl { left: 0; right: 0; height: 1px; background: #eef1f6; }
.u-web-site-test .ts-dr { left: 0; right: 0; height: 22px; font-size: 14px; line-height: 22px; }
.u-web-site-test .ts-dr .k { position: absolute; left: 18px; color: #7c8085; }
.u-web-site-test .ts-dr .v { position: absolute; left: 89px; color: #1c2024; }
.u-web-site-test .ts-fm { left: 87px; top: 381px; width: 144px; height: 262px; box-sizing: border-box; border: 4px solid transparent; border-radius: 22px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, #5e9cf6 0, #6dc6f8 70%, #84eaf8 100%) border-box; box-shadow: 0 0 18px rgba(100, 190, 245, .45), 0 10px 28px rgba(80, 130, 220, .14); overflow: hidden; }
.u-web-site-test .ts-fi { position: absolute; left: 0; right: 0; height: 42px; display: flex; align-items: center; gap: 10px; padding-left: 16px; font-size: 16px; color: #1c2024; }
.u-web-site-test .ts-fi .pf-i { width: 16px; height: 16px; color: #6a6d6f; }
.u-web-site-test .ts-fi svg { color: #6a6d6f; flex: none; }
.u-web-site-test .ts-fi.on { background: #eaf2ff; color: #1f66e8; }
.u-web-site-test .ts-fi.on .pf-i { color: #1f66e8; }
.u-web-site-test .ts-bub { left: 56px; top: 302px; width: 382px; height: 57px; border-radius: 29px; background: linear-gradient(90deg, #0b66f5, #07a8f9 55%, #03dcfe); box-shadow: 0 6px 18px rgba(20, 130, 240, .3); color: #fff; font-size: 22px; line-height: 57px; text-align: center; font-weight: 500; white-space: nowrap; letter-spacing: .3px; }
.u-web-site-test .ts-tail { left: 138px; top: 357px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 19px solid #0a88f8; transform: skewX(-18deg); }


.u-web-site-code { background: linear-gradient(120deg, #fcfbff, #f7f9fd); overflow: hidden; font-size: 12px; color: #34383c; }
.u-web-site-code > * { position: absolute; }
.u-web-site-code .cd-dot { top: 20px; width: 16px; height: 16px; border-radius: 50%; }
.u-web-site-code .cd-ui { left: 135px; top: 52px; width: 1370px; height: 1010px; transform: scale(.82); transform-origin: 0 0; border-radius: 16px 16px 0 0; overflow: hidden; --pf-nav-w: 65px; --pf-sub-w: 128px; background: #fff; }
.u-web-site-code .cd-ui .pf-shell { background: linear-gradient(90deg, #dfe9fb, #e6effb 45%, #e9f1fc); }
.u-web-site-code .cd-ui .pf-nav { gap: 5.600px; padding-top: 5px; }
.u-web-site-code .cd-ui .pf-nav-i { height: 56px; width: 52px; }
.u-web-site-code .cd-ui .pf-sub { padding-top: 8px; }
.u-web-site-code .cd-ui .pf-sub-i { height: 33px; }
.u-web-site-code .cd-ui .cd-s2 { padding-left: 36px; }
.u-web-site-code .cd-ui .pf-sub-i.on .pf-i { color: var(--pf-blue); }
.u-web-site-code .cd-ui .pf-top-r { margin-right: -12px; }
.u-web-site-code .cd-pt { font-size: 14px; line-height: 20px; font-weight: 600; color: #1c2024; }
.u-web-site-code .cd-sw { display: flex; align-items: center; gap: 8px; font-size: 14.500px; line-height: 20px; color: #34383c; }
.u-web-site-code .cd-git { width: 18px; height: 18px; flex: none; }
.u-web-site-code .cd-tri { width: 0; height: 0; margin-left: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #555a5f; }
.u-web-site-code .cd-pop { background: #fff; border-radius: 4px; box-shadow: 0 3px 14px rgba(40, 60, 100, .18); padding: 7px 6px; box-sizing: border-box; z-index: 2; }
.u-web-site-code .cd-pi { display: flex; align-items: center; gap: 8px; height: 33px; padding-left: 14px; border-radius: 3px; font-size: 12px; color: #34383c; }
.u-web-site-code .cd-pi .cd-git { width: 16px; height: 16px; }
.u-web-site-code .cd-pi.on { background: #eaf2ff; color: #1f66e8; }
.u-web-site-code .cd-tn { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: #34383c; white-space: nowrap; }
.u-web-site-code .cd-cr { width: 0; height: 0; border-left: 3.500px solid #6a6d6f; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.u-web-site-code .cd-cr.d { border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #6a6d6f; border-bottom: 0; }
.u-web-site-code .cd-sep { width: 1px; background: #f0f2f5; }
.u-web-site-code .cd-in { height: 26px; font-size: 12px; padding: 0 8px; border-color: #d9dce0; border-radius: 3px; gap: 6px; box-sizing: border-box; }
.u-web-site-code .cd-in .pf-i { margin-left: auto; color: #a2a3a4; }
.u-web-site-code .cd-bt { height: 26px; font-size: 12px; gap: 6px; padding: 0 8px; box-sizing: border-box; border-color: #d3d6da; border-radius: 3px; }
.u-web-site-code .cd-bt.pf-btn-p { border-color: #0a56d8; background: #0a5ae8; }
.u-web-site-code .cd-bt .sq { width: 13px; height: 13px; border: 1.200px solid currentColor; border-radius: 2px; padding: 1.500px; box-sizing: border-box; background-clip: content-box; }
.u-web-site-code .cd-tb { left: 470px; top: 197px; width: 785px; height: 243px; box-sizing: border-box; border: 1px solid #eff1f4; border-radius: 3px; background: #fff; }
.u-web-site-code .cd-tb > * { position: absolute; }
.u-web-site-code .cd-th { left: 20px; top: 12px; font-size: 12px; line-height: 18px; color: #a2a7ad; }
.u-web-site-code .cd-tr { left: 0; right: 0; height: 52px; border-top: 1px solid #eef0f3; box-sizing: border-box; }
.u-web-site-code .cd-tr.hv { background: #f0f0f1; }
.u-web-site-code .cd-tr > * { position: absolute; white-space: nowrap; }
.u-web-site-code .cd-tr .n { left: 52px; top: 8px; font-size: 12px; line-height: 17px; font-weight: 400; color: #1c2024; }
.u-web-site-code .cd-tr .d { left: 52px; top: 26px; font-size: 11px; line-height: 16px; color: #7c8085; }
.u-web-site-code .cd-av { display: grid; place-items: center; font-style: normal; font-size: 12px; }
.u-web-site-code .cd-tr .cd-av { left: 19px; top: 11px; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.u-web-site-code .cd-av.b { background: #d9e6fa; color: #2f6fe0; }
.u-web-site-code .cd-av.y { background: #fdf0cf; color: #f0a020; }
.u-web-site-code .cd-av.c { background: #d8f2f6; color: #1bb3c9; }
.u-web-site-code .cd-hand { left: 710px; top: 66px; }
.u-web-site-code .cd-co { left: 5px; top: 400px; width: 783px; height: 478px; box-sizing: border-box; border: 4px solid transparent; border-radius: 22px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #5b98f6 0, #66adf8 50%, #7fe6f8 100%) border-box; box-shadow: 0 0 18px rgba(100, 180, 245, .4), 0 10px 28px rgba(80, 130, 220, .14); overflow: hidden; font-size: 13px; }
.u-web-site-code .cd-co > * { position: absolute; white-space: nowrap; }
.u-web-site-code .cd-ct { text-align: center; font-size: 14px; line-height: 22px; color: #4a4e52; }
.u-web-site-code .cd-ct.on { color: #1f66e8; }
.u-web-site-code .cd-ct.on::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -10px; height: 2px; background: #1f66e8; }
.u-web-site-code .cd-cl { left: 0; right: 0; height: 1px; background: #eef0f3; }
.u-web-site-code .cd-m { font-size: 13px; line-height: 20px; font-weight: 600; color: #1c2024; }
.u-web-site-code .cd-sg { display: flex; height: 25px; font-size: 12px; line-height: 23px; color: #7c8085; }
.u-web-site-code .cd-sg span { box-sizing: border-box; padding: 0 12px; border: 1px solid #e6e9ed; background: #f1f2f4; }
.u-web-site-code .cd-sg .on { background: #fff; color: #1f66e8; border-color: #e0e8f6; }
.u-web-site-code .cd-lst { left: 16px; top: 123px; width: 752px; height: 331px; border: 1px solid #eef0f3; border-bottom: 1px solid #e8eaee; box-sizing: border-box; }
.u-web-site-code .cd-lst > * { position: absolute; }
.u-web-site-code .cd-gh { left: -1px; right: -1px; height: 35px; padding-left: 26px; display: flex; align-items: center; background: #f4f5f7; font-size: 12px; font-weight: 600; color: #1c2024; }
.u-web-site-code .cd-up { position: absolute; left: 12px; top: 16px; width: 5px; height: 5px; border-left: 1.500px solid #8d9094; border-top: 1.500px solid #8d9094; transform: rotate(45deg); }
.u-web-site-code .cd-cm { left: 0; right: 0; height: 80px; }
.u-web-site-code .cd-cm > * { position: absolute; white-space: nowrap; }
.u-web-site-code .cd-cm .t { left: 40px; top: 2px; font-size: 13.500px; line-height: 20px; color: #6a6d6f; }
.u-web-site-code .cd-cm .cd-av { left: 41px; top: 30px; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; }
.u-web-site-code .cd-cm .m1 { left: 73px; top: 32px; font-size: 11px; line-height: 17px; color: #8d9094; }
.u-web-site-code .cd-cm .m2 { left: 120px; top: 32px; font-size: 11px; line-height: 17px; color: #8d9094; }
.u-web-site-code .cd-cm .hs { right: 18px; top: 31px; display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 17px; color: #4a4e52; font-family: var(--ui-num); }
.u-web-site-code .cd-cm .hs .pf-i { color: #a2a3a4; }
.u-web-site-code .cd-cs { left: 36px; right: 16px; height: 1px; background: #eef0f3; }
.u-web-site-code .cd-bub { left: 294px; top: 455px; width: 273px; height: 58px; border-radius: 29px; background: linear-gradient(90deg, #0b66f5, #07a8f9 55%, #03dcfe); box-shadow: 0 6px 18px rgba(20, 130, 240, .3); color: #fff; font-size: 22px; line-height: 58px; text-align: center; font-weight: 500; white-space: nowrap; letter-spacing: .5px; }
.u-web-site-code .cd-tail { left: 481px; top: 511px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #05c4fc; transform: skewX(-20deg); }


.u-app-home .hm-art { position: absolute; left: 0; top: 88px; }
.u-app-home .hm-t1 { position: absolute; left: 25px; top: 135px; z-index: 2; width: 126px; height: 45px; padding: 0 0 0 14px; border-radius: 15px; font-size: 32px; line-height: 45px; font-weight: 900; font-style: italic; letter-spacing: 0; color: #1b2c70; -webkit-text-stroke: .5px #1b2c70;
  background: linear-gradient(180deg, #f6f9ff, #dbe8fd); box-shadow: inset 3px 0 2px -1px #4a8ff7, inset -3px 0 2px -1px #4a8ff7, 0 4px 12px rgba(80,130,240,.18); white-space: nowrap; }
.u-app-home .hm-t2 { position: absolute; left: 40px; top: 187px; z-index: 2; font-size: 32px; line-height: 40px; font-weight: 900; font-style: italic; color: #1b2c70; -webkit-text-stroke: .5px #1b2c70; white-space: nowrap; }
.u-app-home .hm-sheet { position: absolute; left: 0; right: 0; top: 278px; bottom: 0; z-index: 3; padding: 26.6px 0 0 17.5px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #fff 0, #fff 70%, #f8fcff 100%); }
.u-app-home .hm-fd2 { margin-top: 20.5px; }
.u-app-home .hm-foot { position: absolute; left: 0; right: 0; top: 506px; }


.u-app-economic-2 .e2-s1 { position: absolute; left: 0; right: 0; top: 100px; }
.u-app-economic-2 .e2-grid { position: absolute; left: 15px; top: 141.5px; width: 345px; display: grid; grid-template-columns: 168px 168px; gap: 8.5px 9px; grid-auto-rows: 74.4px; }
.u-app-economic-2 .e2-c { position: relative; border-radius: 6px; background: linear-gradient(100deg, #f3f6ff 0, #fbfcff 55%, #fff 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.95), 0 3px 9px rgba(100,140,230,.1); }
.u-app-economic-2 .e2-l { position: absolute; left: 13px; top: 13px; font-size: 14px; line-height: 20px; color: var(--ph-ink2); white-space: nowrap; }
.u-app-economic-2 .e2-v { position: absolute; left: 13px; top: 35px; display: flex; align-items: baseline; gap: 5px; line-height: 28px; white-space: nowrap; }
.u-app-economic-2 .e2-v b { font: 700 22px/28px var(--ui-num); letter-spacing: -.3px; color: var(--ph-num); }
.u-app-economic-2 .e2-v span { font-size: 12px; color: var(--ph-ink2); }
.u-app-economic-2 .e2-gl { position: absolute; right: 6px; top: 10px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 46%, #fff 0, #fbfdff 40%, rgba(236,243,255,.85) 68%, rgba(222,234,254,.6) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 9px rgba(184,206,245,.35), 0 1px 6px rgba(120,160,240,.07); }
.u-app-economic-2 .e2-gl::before { content: ""; position: absolute; left: 7px; top: 7px; right: 7px; bottom: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 70%); }
.u-app-economic-2 .e2-gl::after { content: ""; position: absolute; left: -2px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dfe9fb); box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 1px 3px rgba(120,160,230,.2); }
.u-app-economic-2 .e2-gl svg { position: relative; z-index: 1; filter: drop-shadow(0 1.5px 1.5px rgba(30,90,230,.18)); }
.u-app-economic-2 .e2-s2 { position: absolute; left: 0; right: 0; top: 491px; }
.u-app-economic-2 .e2-sel { position: absolute; left: 267px; top: 493px; width: 92px; height: 27.5px; padding: 0 9px 0 8px; gap: 0; justify-content: space-between; border-radius: 5px; font-size: 14px; }
.u-app-economic-2 .e2-sel .ph-ic { font-size: 14px; color: #8d97ab; }
.u-app-economic-2 .e2-chart { position: absolute; left: 15.2px; top: 533px; width: 344px; height: 241.5px; }
.u-app-economic-2 .e2-chart svg { position: absolute; left: 0; top: 0; }
.u-app-economic-2 .e2-foot { position: absolute; left: 0; right: 0; top: 783px; }
.u-app-economic-2 .e2-tri { width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid #8d97ab; border-bottom: 0; margin-top: 1px; }


.u-app-emergency .em-bn { position: absolute; left: 16.2px; top: 103.8px; width: 342.6px; height: 96.8px; border-radius: 3px; overflow: hidden; background: none; box-shadow: 0 6px 14px rgba(30,100,240,.16); }
.u-app-emergency .em-bnsvg { position: absolute; left: 0; top: 0; }
.u-app-emergency .em-bn-t { position: absolute; left: 60.5px; top: 21px; font-size: 15px; line-height: 20px; letter-spacing: .8px; white-space: nowrap; opacity: .98; }
.u-app-emergency .em-bn-v { position: absolute; left: 59px; top: 50px; display: flex; align-items: baseline; gap: 5px; }
.u-app-emergency .em-bn-v b { font: 700 39px/40px var(--ui-num); }
.u-app-emergency .em-bn-v span { font-size: 13px; font-weight: 300; opacity: .75; }
.u-app-emergency .em-bn-c { position: absolute; left: 106px; top: 69px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: radial-gradient(circle at 35% 30%, #a8ceff, #4d8ff8); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.u-app-emergency .em-bn-c .ph-ic { color: #fff; font-size: 10px; }
.u-app-emergency .em-s1 { position: absolute; left: 0; right: 0; top: 223px; }
.u-app-emergency .em-s1 .ph-sec-t { padding-left: 1px; }
.u-app-emergency .em-card { position: absolute; left: 15.9px; top: 263.8px; width: 343.2px; height: 580px; border-radius: 5px; box-shadow: 0 1px 2px rgba(50,100,220,.04), 0 6px 18px rgba(60,110,230,.06); }
.u-app-emergency .em-k { position: absolute; top: 12.3px; width: 155.8px; height: 73.3px; border-radius: 4px; overflow: hidden; background: linear-gradient(115deg, #edf2fc 0, #f5f8ff 55%, #f1f5fd 100%); }
.u-app-emergency .em-k1 { left: 9.700px; }
.u-app-emergency .em-k2 { left: 174px; }
.u-app-emergency .em-k::before { content: ""; position: absolute; right: 0; top: 0; width: 46px; height: 47px; background: linear-gradient(180deg, #d6e5fc, #e8f1fd); }
.u-app-emergency .em-ki { position: absolute; left: 14px; top: 8px; width: 30px; height: 30px; }
.u-app-emergency .em-kl { position: absolute; left: 12.5px; top: 44px; font-size: 14px; line-height: 20px; color: #4d5668; white-space: nowrap; }
.u-app-emergency .em-kv { position: absolute; right: 12px; top: 28px; display: flex; align-items: baseline; gap: 3px; }
.u-app-emergency .em-kv b { font: 700 33px/40px var(--ui-num); color: #1f6df0; }
.u-app-emergency .em-kv i { font-style: normal; font-size: 13px; color: #98a2b3; font-weight: 300; }
.u-app-emergency .em-seg { position: absolute; left: 12.2px; top: 98.7px; width: 318.8px; height: 39.4px; padding: 2.5px 2px; border-radius: 6px; background: #eef2fb; }
.u-app-emergency .em-seg .ph-seg-i { height: 34.4px; font-size: 14px; border-radius: 5px; }
.u-app-emergency .em-seg .ph-seg-i.on { font-weight: 700; box-shadow: 0 1px 3px rgba(60,100,200,.1); }
.u-app-emergency .em-tbl { position: absolute; left: 12.2px; top: 147.7px; width: 318.8px; padding: 0; --cols: 38px 62px 91px 60px 1fr; }
.u-app-emergency .em-tbl .ph-tr { grid-template-columns: var(--cols); height: 40.2px; font-size: 12px; color: #4a5468; }
.u-app-emergency .em-tbl .ph-tr--h { height: 30.8px; margin-bottom: 1.5px; border-radius: 4px; background: #f3f6fd; color: #9aa3b5; }
.u-app-emergency .em-tbl .ph-td { padding: 0; }
.u-app-emergency .em-tbl .ph-td:nth-child(2) { padding-left: 10.2px; }
.u-app-emergency .em-tbl .ph-td:nth-child(5) { padding-left: 3.7px; }
.u-app-emergency .em-tbl .ph-st { min-width: 0; height: 23.2px; padding: 0 5px; line-height: 23.2px; border-radius: 4px; font-size: 12.5px; }
.u-app-emergency .em-foot { position: absolute; left: 0; right: 0; top: 853px; }


.u-app-emergency-2 .ph-screen.e3-s { background: #fff; }
.u-app-emergency-2 .e3-strip { position: absolute; left: 0; right: 0; top: 88px; height: 54px; background: linear-gradient(180deg, #f4f7ff, #f6f7ff); }
.u-app-emergency-2 .e3-bot { position: absolute; left: 0; right: 0; top: 844px; bottom: 0; background: linear-gradient(180deg, #f5f8fe, #f4f7ff); }
.u-app-emergency-2 .e3-t { position: absolute; left: 15.9px; top: 103px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: .3px; color: var(--ph-ink); }
.u-app-emergency-2 .e3-tbl { position: absolute; left: 15.3px; top: 154.5px; width: 343.9px; padding: 0; --cols: 39px 118.5px 64.5px 118px 1fr; }
.u-app-emergency-2 .e3-tbl .ph-tr { grid-template-columns: var(--cols); height: 40.2px; font-size: 12px; color: #4a5468; border-bottom-color: #f1f4fa; }
.u-app-emergency-2 .e3-tbl .ph-tr--h { height: 31.8px; margin-bottom: 1.5px; border-radius: 5px; background: #f1f5fd; color: #9aa3b5; }
.u-app-emergency-2 .e3-tbl .ph-tr--h + .ph-tr { margin-top: 0; }
.u-app-emergency-2 .e3-tbl .ph-td { padding: 0; overflow: visible; text-overflow: clip; }
.u-app-emergency-2 .e3-tbl .ph-td .num { letter-spacing: -.2px; font-variant-numeric: normal; }
.u-app-emergency-2 .e3-tbl .ph-td:nth-child(2) { padding-left: 9.2px; }
.u-app-emergency-2 .e3-tbl .ph-tr:not(.ph-tr--h) .ph-td:nth-child(4) { color: #4f586b; }
.u-app-emergency-2 .e3-foot { position: absolute; left: 0; right: 0; top: 853px; }


.u-app-tourism .tr-map { position: absolute; left: 0; top: 87.6px; }
.u-app-tourism .tr-map text { font-family: var(--ui-font); }
.u-app-tourism .tr-g { font-size: 25.2px; fill: #9ba5c2; stroke: #fff; stroke-width: 5px; stroke-opacity: .85; paint-order: stroke; stroke-linejoin: round; }
.u-app-tourism .tr-t { font-size: 25.2px; font-weight: 600; fill: #17b79b; stroke: #fff; stroke-width: 5px; stroke-opacity: .9; paint-order: stroke; stroke-linejoin: round; }
.u-app-tourism .tr-s1 { position: absolute; left: 0; right: 0; top: 594px; }
.u-app-tourism .tr-card { position: absolute; left: 15.8px; top: 634.6px; width: 343.5px; height: 200px; border-radius: 4.5px; box-shadow: 0 1px 2px rgba(50,100,220,.04), 0 6px 18px rgba(60,110,230,.05); }
.u-app-tourism .tr-donut { position: absolute; left: 0; top: 571.4px; }



.u-app-water .wt-s1 { position: absolute; left: 0; right: 0; top: 102.5px; }
.u-app-water .wt-s2 { position: absolute; left: 0; right: 0; top: 239.5px; }
.u-app-water .wt-s3 { position: absolute; left: 0; right: 0; top: 409px; }
.u-app-water .wt-s4 { position: absolute; left: 0; right: 0; top: 599px; }


.u-app-water .wt-sf { position: absolute; top: 143.3px; width: 168.5px; height: 74px; border-radius: 8px; overflow: hidden; background: #f0f5fe; box-shadow: 0 1px 2px rgba(50,100,220,.04), 0 6px 16px rgba(60,110,230,.08); }
.u-app-water .wt-sf1 { left: 16px; }
.u-app-water .wt-sf2 { left: 193px; }
.u-app-water .wt-sf::before { content: ""; position: absolute; left: 0; top: 0; width: 168.5px; height: 74px; background: linear-gradient(115deg, #fff 0, #fbfdff 70%, #f4f8ff 100%); clip-path: path("M0 0H123V47L98 74H0Z"); z-index: 1; }
.u-app-water .wt-sf::after { content: ""; position: absolute; left: 122px; right: 0; top: 0; height: 47px; background: linear-gradient(180deg, #eef4ff 0, #dce8fc 50%, #c3d8fa 100%); }
.u-app-water .wt-sf-ic { position: absolute; left: 11px; top: 8px; z-index: 2; }
.u-app-water .wt-sf-l { position: absolute; left: 12.6px; top: 45px; z-index: 2; font-size: 14px; line-height: 20px; color: #4d576b; white-space: nowrap; }
.u-app-water .wt-sf-v { position: absolute; left: 124px; top: 29px; z-index: 2; font: 700 32px/40px var(--ui-num); color: #1f6ff2; letter-spacing: -.5px; }
.u-app-water .wt-sf-u { position: absolute; left: 145px; top: 45px; z-index: 2; font-size: 14px; line-height: 20px; color: #9aa3b4; }


.u-app-water .wt-pc { position: absolute; top: 280.4px; width: 168.5px; height: 107px; padding: 13px 0 0 12px; border-radius: 8px; background: radial-gradient(120% 90% at 100% 100%, rgba(224,236,255,.7), rgba(224,236,255,0) 60%), linear-gradient(160deg, #fff 0, #fbfdff 100%); box-shadow: 0 1px 2px rgba(50,100,220,.04), 0 6px 16px rgba(60,110,230,.07); }
.u-app-water .wt-pc1 { left: 16px; }
.u-app-water .wt-pc2 { left: 193px; }
.u-app-water .wt-pc-l { font-size: 14px; line-height: 20px; color: #4d576b; white-space: nowrap; }
.u-app-water .wt-pc-v { margin-top: 7px; display: flex; align-items: baseline; gap: 6px; height: 28px; line-height: 28px; white-space: nowrap; }
.u-app-water .wt-pc-v b { font: 700 22px/28px var(--ui-num); letter-spacing: -.2px; color: #343f58; }
.u-app-water .wt-pc-u { font-size: 12px; color: #5d6779; }
.u-app-water .wt-pc-y { margin-top: 8px; display: flex; align-items: center; gap: 4px; height: 17px; font-size: 12px; color: #98a2b3; white-space: nowrap; }


.u-app-water .wt-ec { position: absolute; top: 448.4px; width: 168.5px; height: 128px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(50,100,220,.04), 0 6px 16px rgba(60,110,230,.07); }
.u-app-water .wt-ec1 { left: 16px; }
.u-app-water .wt-ec2 { left: 193px; }
.u-app-water .wt-ec-h { position: absolute; left: 0; right: 0; top: 0; height: 47.4px; }
.u-app-water .wt-ec1 .wt-ec-h { background: linear-gradient(90deg, #e6eefd 0, #f2f6fe 55%, #fbfcff 100%); }
.u-app-water .wt-ec2 .wt-ec-h { background: linear-gradient(90deg, #dcf6ef 0, #eefaf7 55%, #fafefd 100%); }
.u-app-water .wt-pin { position: absolute; left: 10px; top: 10px; width: 25px; height: 27px; }
.u-app-water .wt-ec-t { position: absolute; left: 41px; top: 11.500px; font-size: 16px; line-height: 24px; font-weight: 600; color: #3a4358; white-space: nowrap; }
.u-app-water .wt-ec-r { position: absolute; left: 12.600px; right: 12px; height: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #8e97a8; }
.u-app-water .wt-ec-r1 { top: 60.500px; }
.u-app-water .wt-ec-r2 { top: 92.500px; }
.u-app-water .wt-q { display: block; width: 32px; height: 23px; border-radius: 5px; background: #fdf0c9; font: 400 13px/23px var(--ui-font); font-style: normal; text-align: center; letter-spacing: -.5px; color: #bf9f50; }
.u-app-water .wt-ok, .u-app-water .wt-no { position: relative; display: block; height: 24px; padding: 0 0 0 28px; border-radius: 5px; font: 400 13px/24px var(--ui-font); font-style: normal; white-space: nowrap; overflow: hidden; }
.u-app-water .wt-ok { width: 56px; background: #d7f5f1; color: #3fa394; }
.u-app-water .wt-no { width: 69px; background: #fcd3d3; color: #c46c6c; }
.u-app-water .wt-ok b, .u-app-water .wt-no b { position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px 0 0 5px; }
.u-app-water .wt-ok b { background: linear-gradient(180deg, #19c493, #07a67c); }
.u-app-water .wt-no b { background: linear-gradient(180deg, #f76363, #e83f44); }
.u-app-water .wt-ok b svg, .u-app-water .wt-no b svg { width: 16px; height: 16px; }


.u-app-water .wt-bd { position: absolute; left: 16px; width: 345.300px; height: 112.500px; }
.u-app-water .wt-bd1 { top: 639.300px; }
.u-app-water .wt-bd2 { top: 787.300px; }
.u-app-water .wt-bd-top { position: absolute; left: 0; right: 0; top: 0; height: 51px; padding: 0 0 0 16.500px; display: flex; align-items: center; border-radius: 6px 6px 0 0; color: #fff; overflow: hidden; }
.u-app-water .wt-bd1 .wt-bd-top { background: radial-gradient(70px 40px at 6px 0, rgba(255,255,255,.28), rgba(255,255,255,0)), linear-gradient(100deg, #3b7cf0 0, #4a8ffb 40%, #5fa8ff 70%, #7bbffe 100%); }
.u-app-water .wt-bd2 .wt-bd-top { background: radial-gradient(70px 40px at 6px 0, rgba(255,255,255,.26), rgba(255,255,255,0)), linear-gradient(100deg, #1cccd2 0, #3adce3 45%, #62e9ef 75%, #86f1f6 100%); }
.u-app-water .wt-bd-n { font-size: 14px; letter-spacing: .3px; opacity: .94; }
.u-app-water .wt-bd-v { margin-left: 8px; font: 700 20.500px/1 var(--ui-num); letter-spacing: -.4px; }
.u-app-water .wt-bd-u { margin-left: 4px; margin-top: 4px; font-size: 12px; opacity: .85; }
.u-app-water .wt-ring { position: absolute; left: 0; top: 0; overflow: visible; }
.u-app-water .wt-bd-fr { position: absolute; left: 0; right: 0; top: 50.300px; bottom: 0; border-radius: 6px; border: 1px solid rgba(255,255,255,.8); border-right-color: rgba(255,255,255,.3); border-bottom-color: rgba(255,255,255,.4); box-shadow: 0 4px 10px rgba(50,110,240,.1); }
.u-app-water .wt-bd1 .wt-bd-fr { background: radial-gradient(130px 50px at 0 100%, rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(100deg, #ecf3ff 0, #e0ecff 24%, #c3dcfe 48%, #9ecdfd 72%, #8cc4fd 100%); }
.u-app-water .wt-bd2 .wt-bd-fr { background: radial-gradient(130px 50px at 0 100%, rgba(255,255,255,.75), rgba(255,255,255,0)), linear-gradient(100deg, #daf6f9 0, #cbf3f7 24%, #aaeef4 52%, #90ebf3 76%, #86e8f2 100%); }
.u-app-water .wt-bd-c { position: absolute; top: 0; }
.u-app-water .wt-bd-c1 { left: 15.500px; }
.u-app-water .wt-bd-c2 { left: 96.500px; }
.u-app-water .wt-bd-cl { position: absolute; left: 0; top: 8.300px; font-size: 14px; line-height: 20px; color: #4d576b; white-space: nowrap; }
.u-app-water .wt-bd-cv { position: absolute; left: 0; top: 30.300px; display: flex; align-items: baseline; gap: 5px; line-height: 24px; white-space: nowrap; }
.u-app-water .wt-bd-cv b { font: 700 17px/24px var(--ui-num); letter-spacing: -.3px; }
.u-app-water .wt-bd-cv i { font-style: normal; font-size: 13px; color: #9aa4b5; }
.u-app-water .wt-bd1 .wt-bd-cv b { color: #2a5fe0; }
.u-app-water .wt-bd2 .wt-bd-cl { color: #4a6e75; }
.u-app-water .wt-bd2 .wt-bd-cv b { color: #12bfc8; }
.u-app-water .wt-bd2 .wt-bd-cv i { color: #7eb7bf; }
.u-app-water .wt-disc { position: absolute; left: 216.200px; top: 7.400px; width: 86.600px; height: 86.600px; border-radius: 50%; color: #fff; text-align: center; }
.u-app-water .wt-bd1 .wt-disc { background: radial-gradient(circle at 50% 14%, #8ec8ff 0, #5aa0ff 38%, #2c72f5 100%); box-shadow: 0 0 0 3px rgba(255,255,255,.28), inset 0 1px 1px rgba(255,255,255,.6), 0 9px 14px -4px rgba(38,106,240,.4); }
.u-app-water .wt-bd2 .wt-disc { background: radial-gradient(circle at 50% 14%, #9ff8f8 0, #4fe3ea 38%, #0ec2d2 100%); box-shadow: 0 0 0 3px rgba(255,255,255,.28), inset 0 1px 1px rgba(255,255,255,.6), 0 9px 14px -4px rgba(8,170,190,.4); }
.u-app-water .wt-disc b { position: absolute; left: 0; right: 0; top: 17.500px; font: 700 21px/26px var(--ui-num); letter-spacing: -.3px; }
.u-app-water .wt-disc span { position: absolute; left: -8px; right: -8px; top: 46px; font-size: 13.500px; line-height: 20px; letter-spacing: .2px; white-space: nowrap; }


.u-app-water .wt-fb { position: absolute; left: 0; right: 0; top: 1162px; bottom: 0; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #e9effc, #e4ebfa); }
.u-app-water .wt-board { position: absolute; left: 0; top: 917px; width: 375px; height: 248px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -4px 14px rgba(60,110,230,.05); }
.u-app-water .wt-tab { position: absolute; top: 0; height: 44px; line-height: 45px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.u-app-water .wt-tab1 { left: 0; width: 192px; padding-left: 28.700px; border-radius: 12px 12px 0 0; color: #2b6ff3; background: #fff; clip-path: path("M0 12Q0 0 12 0H178Q184 0 186 8L192 44H0Z"); z-index: 2; }
.u-app-water .wt-tab2 { left: 180px; right: 0; top: 5px; padding-left: 28px; height: 48px; line-height: 36px; border-radius: 0 12px 0 0; color: #6c7689; background: linear-gradient(180deg, #e6eefc 0, #f1f5fd 55%, #fff 100%); }
.u-app-water .wt-rows { position: absolute; left: 0; right: 0; top: 53.500px; }
.u-app-water .wt-rows .ph-rk-n { font-style: normal; font-weight: 800; letter-spacing: .7px; font-size: 14px; }
.u-app-water .wt-rows .ph-rk { padding: 0 14px 0 20px; }
.u-app-water .wt-rows .ph-rk-n { position: relative; width: 55px; }
.u-app-water .wt-rows .ph-rk-n::before { content: ""; position: absolute; left: -2px; top: 50%; width: 42px; height: 18px; margin-top: -9px; transform: skewX(-18deg); background: linear-gradient(90deg, rgba(110,125,160,0), rgba(110,125,160,.14)); z-index: -1; }
.u-app-water .wt-rows .ph-rk--1 .ph-rk-n::before { background: linear-gradient(90deg, rgba(255,92,80,0), rgba(255,92,80,.22)); }
.u-app-water .wt-rows .ph-rk--2 .ph-rk-n::before { background: linear-gradient(90deg, rgba(255,150,60,0), rgba(255,150,60,.24)); }
.u-app-water .wt-rows .ph-rk--3 .ph-rk-n::before { background: linear-gradient(90deg, rgba(255,205,40,0), rgba(255,205,40,.3)); }
.u-app-water .wt-rows .ph-rk--4, .u-app-water .wt-rows .ph-rk--5 { background: linear-gradient(90deg, rgba(160,180,225,.16), rgba(160,180,225,0) 85%); }
.u-app-water .wt-rows .ph-rk-v { font: 700 16px/1 var(--ui-num); }
.u-app-water .wt-rows .ph-rk-u { margin-left: 5px; }
.u-app-water .wt-foot { position: absolute; left: 0; right: 0; top: 1175px; }


.u-app-transport .tp-ic--gps{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='11.500' r='9'/%3E%3Cpath d='M7.800 16a6 6 0 1 1 8.400 0'/%3E%3C/g%3E%3Cpath d='M12 9.500l3.400 10.500H8.600z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--pie{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.500 4.200a8.800 8.800 0 1 0 9.300 9.300h-9.300z'/%3E%3Cpath d='M13.200 2.800a8 8 0 0 1 8 8h-8z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--taxi{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9 2.500h6V5H9zM6.800 6.500h10.400l2.300 5.200c.3.500.5 1.100.5 1.700V19a1.500 1.500 0 0 1-1.500 1.500h-1.800a1.500 1.500 0 0 1-1.500-1.500v-1H8.800v1a1.500 1.500 0 0 1-1.500 1.500H5.500A1.500 1.500 0 0 1 4 19v-5.600c0-.6.200-1.200.5-1.700zM8.300 8.600L6.900 11.800h10.200L15.700 8.600zM7.600 14a1.300 1.300 0 1 0 0 2.600 1.300 1.300 0 0 0 0-2.600zM16.400 14a1.300 1.300 0 1 0 0 2.600 1.300 1.300 0 0 0 0-2.600z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--driver{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='3.800'/%3E%3Cpath fill-rule='evenodd' d='M3.200 21.500a8.800 8.800 0 0 1 17.600 0zM8 21.500a4 4 0 0 1 8 0z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--bus{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.500 3h11A2.500 2.500 0 0 1 20 5.500V17a1.500 1.500 0 0 1-1.500 1.500V20a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1.500h-7V20a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1.500A1.500 1.500 0 0 1 4 17V5.500A2.500 2.500 0 0 1 6.500 3zM6.500 5.500v6h11v-6zM7.800 13.500a1.400 1.400 0 1 0 0 2.800 1.400 1.400 0 0 0 0-2.800zM16.200 13.500a1.400 1.400 0 1 0 0 2.800 1.400 1.400 0 0 0 0-2.800z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--route{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.300' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15.500V12a5 5 0 0 1 5-5h4'/%3E%3Ccircle cx='18' cy='7' r='2.800'/%3E%3C/g%3E%3Ccircle cx='6' cy='18.500' r='3'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--mappin{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a5.600 5.600 0 0 1 5.600 5.600c0 3.800-5.600 9.200-5.600 9.200S6.400 11.400 6.400 7.600A5.600 5.600 0 0 1 12 2zM12 5.800a1.900 1.900 0 1 0 0 3.800 1.900 1.900 0 0 0 0-3.800z'/%3E%3Cpath d='M2.500 12.800l4.600-1.800 1 1.600 3.900 4.500 3.900-4.500 1-1.600 4.600 1.800v7.200l-5.200 2-4.300-1.800-4.300 1.800-5.200-2z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--people{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.800' r='3.500'/%3E%3Cpath d='M5.800 20.500v-2.800a5 5 0 0 1 5-5h2.400a5 5 0 0 1 5 5v2.800z'/%3E%3Ccircle cx='4.600' cy='9.800' r='2.400'/%3E%3Cpath d='M0.500 19.500v-2a3.600 3.600 0 0 1 3.600-3.600h.9v5.600z'/%3E%3Ccircle cx='19.400' cy='9.800' r='2.400'/%3E%3Cpath d='M23.500 19.500v-2a3.600 3.600 0 0 0-3.600-3.600H19v5.600z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--flask{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.200 2h5.600v1.800h-1.200v5.300l5.300 9.700a1.900 1.900 0 0 1-1.700 2.800H6.800a1.900 1.900 0 0 1-1.700-2.800l5.300-9.700V3.800H9.200z'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--train{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 2.200h8a3.200 3.200 0 0 1 3.200 3.200V14.800A3.200 3.200 0 0 1 16 18H8a3.200 3.200 0 0 1-3.200-3.200V5.400A3.200 3.200 0 0 1 8 2.200zM7.400 5.400v5.400h9.200V5.400zM8.400 12.800a1.400 1.400 0 1 0 0 2.800 1.400 1.400 0 0 0 0-2.800zM15.600 12.800a1.400 1.400 0 1 0 0 2.800 1.400 1.400 0 0 0 0-2.800z'/%3E%3Cpath d='M8.500 18.800L6.300 22M15.500 18.800L17.700 22M4.200 22h15.600' fill='none' stroke='%23000' stroke-width='1.900' stroke-linecap='round'/%3E%3C/svg%3E")}
.u-app-transport .tp-ic--truck{--ph-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1.500 6A1.500 1.500 0 0 1 3 4.500h10.500A1.500 1.500 0 0 1 15 6v2.500h3.400a1.500 1.500 0 0 1 1.200.6l2.800 3.700c.2.300.3.600.3.900V17a1.500 1.500 0 0 1-1.500 1.500H21.500a3.100 3.100 0 0 0-6.200 0H9.200a3.100 3.100 0 0 0-6.200 0H3A1.500 1.500 0 0 1 1.500 17zM16.800 10.500V13.200h3.800l-2.100-2.700z'/%3E%3Ccircle cx='6.100' cy='18.600' r='2'/%3E%3Ccircle cx='18.400' cy='18.600' r='2'/%3E%3C/svg%3E")}


.u-app-transport .tp-w { position: absolute; left: 0; right: 0; background: #fff; }
.u-app-transport .tp-w1 { top: 143.5px; height: 353px; }
.u-app-transport .tp-w2 { top: 555.5px; height: 486px; }
.u-app-transport .tp-band { position: absolute; left: 0; right: 0; background: #e9f0fe; }
.u-app-transport .tp-band1 { top: 88px; height: 55.5px; }
.u-app-transport .tp-band2 { top: 496.3px; height: 59.2px; }
.u-app-transport .tp-band3 { top: 1041.7px; height: 62.4px; }
.u-app-transport .tp-bt { position: absolute; left: 14px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: .3px; color: #364055; white-space: nowrap; }
.u-app-transport .tp-bd { position: absolute; right: 16px; font-size: 12px; line-height: 20px; color: #8f98a9; white-space: nowrap; }
.u-app-transport .tp-bd .num { letter-spacing: 0; }
.u-app-transport .tp-band1 .tp-bt { top: 16.9px; } .u-app-transport .tp-band1 .tp-bd { top: 19.9px; }
.u-app-transport .tp-band2 .tp-bt { top: 23px; } .u-app-transport .tp-band2 .tp-bd { top: 26px; }
.u-app-transport .tp-band3 .tp-bt { top: 22.5px; } .u-app-transport .tp-band3 .tp-bd { top: 25.5px; }
.u-app-transport .tp-sub { position: absolute; left: 14px; font-size: 16px; line-height: 24px; font-weight: 600; color: #364055; letter-spacing: .3px; }
.u-app-transport .tp-sub1 { top: 159.9px; }
.u-app-transport .tp-sub2 { top: 328.1px; }


.u-app-transport .tp-big { position: absolute; left: 13.1px; width: 105.7px; height: 114.9px; border-radius: 6px; overflow: hidden; color: #fff; }
.u-app-transport .tp-big1 { top: 196.1px; background: linear-gradient(150deg, #2b7dfe 0%, #4a92f6 55%, #6aa8fc 100%); box-shadow: 0 4px 10px rgba(50,120,250,.16); }
.u-app-transport .tp-big2 { top: 364.1px; background: linear-gradient(150deg, #22c9cd 0%, #3fd9da 55%, #6eebe8 100%); box-shadow: 0 4px 10px rgba(20,190,200,.16); }
.u-app-transport .tp-bigart { position: absolute; left: 0; top: 0; }
.u-app-transport .tp-bl { position: absolute; left: 9.3px; top: 9.1px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .3px; }
.u-app-transport .tp-bv { position: absolute; left: 9px; top: 34px; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.u-app-transport .tp-bv b { font: 700 21px/28px var(--ui-num); letter-spacing: -.3px; }
.u-app-transport .tp-bv i { font-style: normal; font-size: 12px; opacity: .78; }
.u-app-transport .tp-t { position: absolute; border-radius: 6px; }
.u-app-transport .tp-t--a { background: linear-gradient(90deg, #f1f6ff, #fafcff); }
.u-app-transport .tp-t--b { background: linear-gradient(90deg, #e6f9fb, #f5fdfe); }
.u-app-transport .tp-t1, .u-app-transport .tp-t3, .u-app-transport .tp-t5, .u-app-transport .tp-t7 { left: 121.6px; width: 118.7px; }
.u-app-transport .tp-t2, .u-app-transport .tp-t4, .u-app-transport .tp-t6, .u-app-transport .tp-t8 { left: 241.7px; width: 117.4px; }
.u-app-transport .tp-t1, .u-app-transport .tp-t2 { top: 196.1px; height: 56.8px; }
.u-app-transport .tp-t3, .u-app-transport .tp-t4 { top: 254.9px; height: 56.1px; }
.u-app-transport .tp-t5, .u-app-transport .tp-t6 { top: 364.1px; height: 56px; }
.u-app-transport .tp-t7, .u-app-transport .tp-t8 { top: 423.4px; height: 55.7px; }
.u-app-transport .tp-gh { position: absolute; left: 6.5px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; }
.u-app-transport .tp-t--a .tp-gh { background: radial-gradient(circle at 40% 28%, #fff 0, #e8effd 62%, #dbe5fb 100%); box-shadow: 0 3px 7px rgba(90,130,230,.16), inset 0 0 0 1px rgba(255,255,255,.9); }
.u-app-transport .tp-t--b .tp-gh { background: radial-gradient(circle at 40% 28%, #fff 0, #dcf6f7 62%, #c9eff2 100%); box-shadow: 0 3px 7px rgba(40,170,190,.16), inset 0 0 0 1px rgba(255,255,255,.9); }
.u-app-transport .tp-gh .ph-ic { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.u-app-transport .tp-t--a .tp-gh .ph-ic { background: linear-gradient(180deg, #80baff, #2d6bef); }
.u-app-transport .tp-t--b .tp-gh .ph-ic { background: linear-gradient(180deg, #72f0e1, #0aa6b6); }
.u-app-transport .tp-tl { position: absolute; left: 48px; top: 7.7px; font-size: 12px; line-height: 20px; color: #98a1b3; white-space: nowrap; }
.u-app-transport .tp-tv { position: absolute; left: 48px; top: 26px; display: flex; align-items: baseline; gap: 3px; line-height: 24px; white-space: nowrap; }
.u-app-transport .tp-tv b { font: 700 16px/24px var(--ui-num); letter-spacing: -.2px; color: #343f58; }
.u-app-transport .tp-tv i { font-style: normal; font-size: 12px; color: #5d6779; }


.u-app-transport .tp-cd { position: absolute; left: 13px; width: 346px; height: 104.2px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 3px 8px rgba(100,130,200,.05); }
.u-app-transport .tp-cd1 { top: 571.4px; } .u-app-transport .tp-cd2 { top: 693px; } .u-app-transport .tp-cd3 { top: 814.6px; } .u-app-transport .tp-cd4 { top: 935.3px; height: 88px; }
.u-app-transport .tp-k-blue { background: linear-gradient(90deg, #f1f5ff, #eaf1fe); color: #bcd2fb; }
.u-app-transport .tp-k-cyan { background: linear-gradient(90deg, #e3f8fa, #e6f9fa); color: #94ebe5; }
.u-app-transport .tp-k-yellow { background: linear-gradient(90deg, #fff9d9, #fff5cc); color: #ffdf86; }
.u-app-transport .tp-k-purple { background: linear-gradient(90deg, #f0eefe, #ece9fd); color: #c6bbfa; }
.u-app-transport .tp-car { position: absolute; right: 4px; top: 10.5px; opacity: .62; }
.u-app-transport .tp-cd-i { position: absolute; left: 4.8px; top: 8.5px; width: 24px; height: 24px; font-size: 24px; }
.u-app-transport .tp-k-blue .tp-cd-i { background: linear-gradient(180deg, #78b6ff, #2d6bef); }
.u-app-transport .tp-k-cyan .tp-cd-i { background: linear-gradient(180deg, #5eeadb, #0aa6b6); }
.u-app-transport .tp-k-yellow .tp-cd-i { background: linear-gradient(180deg, #ffe35e, #f0b000); }
.u-app-transport .tp-k-purple .tp-cd-i { background: linear-gradient(180deg, #c3b4ff, #6f55ee); }
.u-app-transport .tp-cd-t { position: absolute; left: 32.5px; top: 8.1px; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: .3px; color: #3a4358; white-space: nowrap; }
.u-app-transport .tp-in { position: absolute; left: 4.3px; right: 4.1px; top: 41.1px; height: 59.5px; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(80,120,220,.06); }
.u-app-transport .tp-cd4 .tp-in { top: 40.6px; height: 44px; }
.u-app-transport .tp-c { text-align: center; padding-top: 6.8px; }
.u-app-transport .tp-cl { font-size: 12.500px; line-height: 20px; color: #5d6779; white-space: nowrap; }
.u-app-transport .tp-cv { margin-top: -.8px; line-height: 28px; white-space: nowrap; }
.u-app-transport .tp-cv b { font: 700 16px/28px var(--ui-num); letter-spacing: -.2px; color: #343f58; }
.u-app-transport .tp-cv b.r { color: #f0555c; }
.u-app-transport .tp-cv i { margin-left: 3px; font-style: normal; font-size: 12px; color: #8d97ab; }
.u-app-transport .tp-in2 { grid-template-columns: 1fr 1fr; }
.u-app-transport .tp-c2 { display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.u-app-transport .tp-c2 span { font-size: 12.500px; color: #5d6779; }
.u-app-transport .tp-c2 b { font: 700 16px/24px var(--ui-num); letter-spacing: -.2px; color: #343f58; }
.u-app-transport .tp-c2 i { margin-left: -3px; font-style: normal; font-size: 12.500px; color: #8d97ab; }


.u-app-transport .tp-board { position: absolute; left: 0; top: 1102.1px; width: 375px; height: 165.4px; background: #fff; border-radius: 0 12px 0 0; }
.u-app-transport .tp-tabbg { position: absolute; left: 70px; right: 0; top: 4px; height: 44px; border-radius: 0 12px 0 0; background: linear-gradient(180deg, #e9f0fd 0, #f3f7fe 55%, #fff 100%); }
.u-app-transport .tp-tab1 { position: absolute; left: 0; top: 0; width: 86px; height: 46px; padding: 14.2px 6px 0 0; text-align: center; font-size: 16px; line-height: 22px; font-weight: 700; color: #2b6ff3; background: #fff; clip-path: path("M0 0H70Q75 0 76.500 6L86 46H0Z"); }
.u-app-transport .tp-tab { position: absolute; top: 14.4px; width: 94px; text-align: center; font-size: 16px; line-height: 22px; color: #98a1b3; }
.u-app-transport .tp-tab2 { left: 88px; } .u-app-transport .tp-tab3 { left: 182px; } .u-app-transport .tp-tab4 { left: 278px; }
.u-app-transport .tp-sep { position: absolute; top: 17.5px; width: 1px; height: 16px; background: #dbe4f4; }
.u-app-transport .tp-sep1 { left: 177px; } .u-app-transport .tp-sep2 { left: 272px; }
.u-app-transport .tp-strip { position: absolute; left: 0; right: 0; top: 65.4px; height: 74.5px; background: linear-gradient(90deg, rgba(233,241,253,0) 0, #e9f1fd 42%, #eef4fe 50%, #e9f1fd 58%, rgba(233,241,253,0) 100%); }
.u-app-transport .tp-st { position: absolute; top: 0; }
.u-app-transport .tp-st1 { left: 38.6px; } .u-app-transport .tp-st2 { left: 248.7px; }
.u-app-transport .tp-stl { position: absolute; left: 0; top: 78.8px; font-size: 13px; line-height: 20px; color: #4d576b; white-space: nowrap; }
.u-app-transport .tp-stv { position: absolute; left: 0; top: 102.3px; font: 700 22px/28px var(--ui-num); letter-spacing: -.3px; color: #1f6ff2; white-space: nowrap; }
.u-app-transport .tp-st1 .tp-stv { left: 11.1px; }
.u-app-transport .tp-ring { position: absolute; left: 138.4px; top: 56.8px; }
.u-app-transport .tp-train { position: absolute; left: 165.4px; top: 84.8px; width: 42px; height: 42px; font-size: 42px; color: #fff; }
.u-app-transport .tp-fb { position: absolute; left: 0; right: 0; top: 1267.5px; bottom: 0; background: #e9f0fe; }
.u-app-transport .tp-foot { position: absolute; left: 0; right: 0; top: 1276.8px; }


.u-app-epidemic .ep-s1 { position: absolute; left: 0; right: 0; top: 103px; }
.u-app-epidemic .ep-s2 { position: absolute; left: 4px; right: 0; top: 449.900px; }
.u-app-epidemic .ep-s3 { position: absolute; left: 0; right: 0; top: 820.700px; }
.u-app-epidemic .ep-card1 { position: absolute; left: 15.500px; top: 142.300px; width: 344px; height: 286.200px; box-shadow: none; }
.u-app-epidemic .ep-card2 { position: absolute; left: 15.500px; top: 487.600px; width: 344px; height: 311.200px; box-shadow: none; overflow: hidden; }
.u-app-epidemic .ep-card3 { position: absolute; left: 15.500px; top: 861.200px; width: 344px; height: 140px; box-shadow: none; }
.u-app-epidemic .ep-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.u-app-epidemic .ep-t text { font: 400 12px var(--ui-num); fill: #8a93a5; }
.u-app-epidemic .ep-unit { position: absolute; left: 13.500px; top: 16.300px; font-size: 12px; line-height: 20px; color: #98a2b3; }
.u-app-epidemic .ep-lg { position: absolute; right: 12.800px; top: 16.300px; display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 20px; color: #5d6779; white-space: nowrap; }
.u-app-epidemic .ep-lg i { width: 10px; height: 10px; border-radius: 2px; background: #1a6ef3; box-shadow: 0 0 0 2.500px #dbe8fd; }
.u-app-epidemic .ep-tile { position: absolute; height: 50px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
.u-app-epidemic .ep-tile span { position: absolute; font-size: 12px; line-height: 20px; color: #5d6779; }
.u-app-epidemic .ep-tile b { position: absolute; font: 700 18px/24px var(--ui-num); letter-spacing: -.2px; color: #343f58; }
.u-app-epidemic .ep-mk { position: absolute; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1.500px #fff; }
.u-app-epidemic .ep-tl1 { left: 269.600px; top: 520px; width: 63.200px; background: linear-gradient(90deg, #dfeafc, rgba(236,243,254,.15)); }
.u-app-epidemic .ep-tl1 .ep-mk { left: -5.600px; top: 18.200px; } .u-app-epidemic .ep-tl1 span { left: 10.400px; top: 4.700px; } .u-app-epidemic .ep-tl1 b { left: 10.400px; top: 24.100px; }
.u-app-epidemic .ep-tl2 { left: 15.300px; top: 647.600px; width: 67.900px; background: linear-gradient(90deg, #fbe3d2, rgba(252,238,228,.35)); }
.u-app-epidemic .ep-tl2 .ep-mk { left: 61.100px; top: 18.100px; } .u-app-epidemic .ep-tl2 span { left: 8.300px; top: 3.900px; } .u-app-epidemic .ep-tl2 b { left: 13.700px; top: 24.100px; }
.u-app-epidemic .ep-tl3 { left: 48.500px; top: 710px; width: 63px; height: 49.400px; background: linear-gradient(90deg, rgba(210,240,234,.2), #cdeee8); }
.u-app-epidemic .ep-tl3 .ep-mk { left: 55.800px; top: 18.100px; } .u-app-epidemic .ep-tl3 span { left: 9.200px; top: 3.900px; } .u-app-epidemic .ep-tl3 b { left: 12.500px; top: 23.500px; }
.u-app-epidemic .ep-tl4 { left: 261.300px; top: 716.100px; width: 66px; height: 49.900px; background: linear-gradient(90deg, #fdf1c2, rgba(255,248,224,.3)); }
.u-app-epidemic .ep-tl4 .ep-mk { left: -5px; top: 19px; } .u-app-epidemic .ep-tl4 span { left: 11.400px; top: 4.700px; } .u-app-epidemic .ep-tl4 b { left: 11.400px; top: 24.900px; }
.u-app-epidemic .ep-tbl { position: absolute; left: 0; right: 0; top: 11.900px; padding: 0 12px; }
.u-app-epidemic .ep-tbl .ph-tr--h { height: 31.600px; margin-bottom: 0; }
.u-app-epidemic .ep-tbl .ph-tr { height: 33px; }
.u-app-epidemic .ep-tdl { padding-left: 12px; }
.u-app-epidemic .ep-tbl .ph-tr--h .ph-td { font-size: 12px; }
.u-app-epidemic .ep-tbl .ph-tr:not(.ph-tr--h) .ph-td { font-size: 13px; }
.u-app-epidemic .ep-tbl .ph-tr:not(.ph-tr--h) { height: 33.500px; }


.u-app-management .mg-hero { position: absolute; left: 0; top: 0; right: 0; height: 252px; background: linear-gradient(180deg, #1a77ff 0, #2382fa 88px, #3b9bfe 110px, #58b3ff 130px, #62bcfe 165px, #87c7ff 190px, #abcffe 210px, #cbe2ff 230px, #e9f0ff 250px); }
.u-app-management .mg-hero::before { content: ""; position: absolute; left: -30px; top: 60px; width: 220px; height: 120px; background: radial-gradient(closest-side, rgba(120,200,255,.55), rgba(120,200,255,0)); }
.u-app-management .mg-head { background: transparent; }
.u-app-management .mg-bk { position: absolute; border: 1.2px solid rgba(255,255,255,.7); border-radius: 8px 8px 0 0; border-bottom: 0; }
.u-app-management .mg-bk1 { left: 245.600px; top: 103px; width: 140px; height: 121px; background: linear-gradient(180deg, #3f9cff 0, #2a86f9 38%, #4a9bfc 78%, rgba(120,180,255,.5) 100%); box-shadow: 0 -2px 12px rgba(30,110,250,.16); }
.u-app-management .mg-bk2 { left: 221px; top: 116px; width: 60px; height: 108px; background: linear-gradient(180deg, rgba(120,190,255,.42) 0, rgba(130,195,255,.55) 70%, rgba(170,215,255,.35) 100%); }
.u-app-management .mg-bk3 { left: 192px; top: 154.700px; width: 60px; height: 69px; background: linear-gradient(180deg, rgba(150,210,255,.35) 0, rgba(165,215,255,.42) 100%); }
.u-app-management .mg-doc { position: absolute; left: 263.900px; top: 124.400px; width: 102.800px; height: 96px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #f7fbff 0, #e1eefe 70%, rgba(205,226,253,.85) 100%); box-shadow: 0 6px 14px rgba(20,90,230,.18); }
.u-app-management .mg-doc i { position: absolute; left: 11.700px; height: 7.200px; border-radius: 1px; }
.u-app-management .mg-b1 { top: 20.100px; width: 79.400px; background: #2f7ff8; }
.u-app-management .mg-b2 { top: 39.500px; width: 47.400px; background: #8cbefb; }
.u-app-management .mg-b3 { top: 59.500px; width: 79.400px; background: #5aa4fb; }
.u-app-management .mg-t1 { position: absolute; left: 16px; top: 105.700px; font-size: 16px; line-height: 22px; letter-spacing: .3px; color: #fff; }
.u-app-management .mg-t2 { position: absolute; left: 15.300px; top: 134px; font: 800 38px/44px var(--ui-num); letter-spacing: -.5px; color: #fff; }
.u-app-management .mg-t3 { position: absolute; left: 83px; top: 155.300px; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.72); }
.u-app-management .mg-glass { position: absolute; left: 15.300px; top: 198.100px; width: 343.600px; height: 78.900px; border-radius: 8px; border: 1px solid rgba(255,255,255,.8); background: linear-gradient(180deg, rgba(255,255,255,.34) 0, rgba(240,246,255,.82) 70%, rgba(240,246,255,.9) 100%); box-shadow: 0 8px 20px rgba(40,110,240,.08); }
.u-app-management .mg-gc { position: absolute; top: 0; width: 114.500px; text-align: center; }
.u-app-management .mg-gc1 { left: 0; } .u-app-management .mg-gc2 { left: 114.500px; } .u-app-management .mg-gc3 { left: 229px; }
.u-app-management .mg-gc span { position: absolute; left: 0; right: 0; top: 12.300px; font-size: 14px; line-height: 20px; color: #4a5568; }
.u-app-management .mg-gc div { position: absolute; left: 0; right: 0; top: 39.700px; line-height: 28px; white-space: nowrap; }
.u-app-management .mg-gc b { font: 700 21px/28px var(--ui-num); letter-spacing: -.2px; color: #343f58; }
.u-app-management .mg-gc i { margin-left: 4px; font-style: normal; font-size: 13px; color: #5d6779; }
.u-app-management .mg-s1 { position: absolute; left: 0; right: 0; top: 298.900px; }
.u-app-management .mg-card { position: absolute; left: 15px; top: 339.400px; width: 344.400px; height: 294.700px; overflow: hidden; box-shadow: none; }
.u-app-management .mg-ring { position: absolute; left: 0; top: 0; }
.u-app-management .mg-strip { position: absolute; left: 0; top: 12.300px; width: 200px; height: 58.300px; background: linear-gradient(90deg, #e7effd 0, #f0f5fe 55%, rgba(255,255,255,0) 100%); }
.u-app-management .mg-icon { position: absolute; left: 25px; top: 29.500px; }
.u-app-management .mg-ct { position: absolute; left: 61.400px; top: 21.500px; font-size: 14px; line-height: 20px; color: #364055; white-space: nowrap; }
.u-app-management .mg-cn { position: absolute; left: 61px; top: 42px; display: flex; align-items: baseline; gap: 5px; line-height: 26px; }
.u-app-management .mg-cn b { font: 700 21px/26px var(--ui-num); letter-spacing: -.2px; color: #1f6ff2; }
.u-app-management .mg-cn i { font-style: normal; font-size: 12px; color: #5d6779; }
.u-app-management .mg-mk { position: absolute; left: 24.700px; width: 9px; height: 9px; margin-left: 0; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 2.500px color-mix(in srgb, var(--c) 28%, #fff); }
.u-app-management .mg-lt { position: absolute; left: 40.600px; font-size: 12px; line-height: 20px; color: #364055; white-space: nowrap; }
.u-app-management .mg-lv { position: absolute; left: 40.600px; display: flex; align-items: baseline; gap: 5px; line-height: 22px; white-space: nowrap; }
.u-app-management .mg-lv b { font: 700 17px/22px var(--ui-num); color: #343f58; }
.u-app-management .mg-lv i { font-style: normal; font-size: 12px; color: #98a2b3; }
.u-app-management .mg-foot { position: absolute; left: 0; right: 0; top: 642.800px; }


.u-app-special .sp-scr { background: linear-gradient(180deg, #f4f6ff 0, #f1f4ff 400px, #eef2ff 100%); }
.u-app-special .sp-sky, .u-app-special .sp-tw, .u-app-special .sp-wv { position: absolute; left: 0; top: 0; }
.u-app-special .sp-head { position: absolute; left: 0; right: 0; top: 0; background: transparent; color: #232838; }
.u-app-special .sp-head .ph-sig, .u-app-special .sp-head .ph-wifi { background: #1d2230; }
.u-app-special .sp-head .ph-bat { border-color: rgba(30,36,52,.55); }
.u-app-special .sp-head .ph-bat::before { background: #1d2230; }
.u-app-special .sp-head .ph-bat::after { background: rgba(30,36,52,.55); }
.u-app-special .sp-bk { font-size: 25px; color: #232838; margin-left: -1px; }
.u-app-special .sp-title { position: absolute; left: 10px; top: 106px; font-size: 25px; line-height: 32px; font-weight: 900; letter-spacing: 3.200px; white-space: nowrap; color: #8a2a1a; background: linear-gradient(180deg, #b24a24 0%, #8a2a1a 55%, #70201a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)); }
.u-app-special .sp-dots { position: absolute; left: 9.500px; top: 187.500px; display: flex; gap: 2.500px; }
.u-app-special .sp-dots i { width: 6px; height: 2.200px; border-radius: 1px; background: rgba(120,150,230,.6); }
.u-app-special .sp-dots i:first-child { width: 12px; background: #2f6fe6; }
.u-app-special .sp-notice { position: absolute; left: 0; right: 0; top: 206.700px; height: 33px; padding-left: 39px; overflow: hidden; background: linear-gradient(90deg, rgba(228,226,251,.92), rgba(224,232,252,.92)); }
.u-app-special .sp-notice span { display: block; font-size: 12px; line-height: 35px; color: #5d6779; white-space: nowrap; letter-spacing: .1px; }
.u-app-special .sp-tg { position: absolute; left: 6px; top: 5.500px; }

.u-app-special .sp-wx { position: absolute; left: 9.200px; top: 258.600px; width: 355.500px; height: 128.500px; border-radius: 8px; background: linear-gradient(180deg, #fff 0, #fbfbff 60%, #f3f2ff 100%); box-shadow: 0 1px 3px rgba(80,100,200,.05), 0 8px 20px rgba(100,120,230,.08); }
.u-app-special .sp-wx-b { position: absolute; left: 0; right: 0; top: 0; height: 72px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #d4f1ff 0, #cfe6ff 35%, #d2d3fc 70%, #cbc5fb 100%); }
.u-app-special .sp-wx-i { position: absolute; left: -5.800px; top: -14.800px; }
.u-app-special .sp-temp { position: absolute; left: 100.200px; top: 4px; }
.u-app-special .sp-cond { position: absolute; left: 204px; top: 14.800px; font-size: 16px; line-height: 22px; color: #3a4663; }
.u-app-special .sp-hl { position: absolute; left: 204px; top: 40.800px; font-size: 14px; line-height: 20px; color: #4b5675; white-space: nowrap; }
.u-app-special .sp-uv-i { position: absolute; left: 29.500px; top: 90.600px; font-size: 14px; color: #a3abbd; }
.u-app-special .sp-uv-l { position: absolute; left: 49.300px; top: 90.100px; font-size: 14px; line-height: 20px; color: #8a93a8; white-space: nowrap; letter-spacing: .6px; }
.u-app-special .sp-uv-v { position: absolute; left: 134px; top: 89.100px; font-size: 16px; line-height: 22px; font-weight: 700; color: #364055; }
.u-app-special .sp-dv { position: absolute; left: 177.800px; top: 93px; width: 1px; height: 16px; background: #e3e6f3; }
.u-app-special .sp-sh-i { position: absolute; left: 214.500px; top: 91.800px; }
.u-app-special .sp-sh-l { position: absolute; left: 234.400px; top: 90.100px; font-size: 14px; line-height: 20px; color: #8a93a8; white-space: nowrap; letter-spacing: .6px; }
.u-app-special .sp-sh-v { position: absolute; left: 303.800px; top: 89.100px; font-size: 16px; line-height: 22px; font-weight: 700; color: #364055; }

.u-app-special .sp-tr, .u-app-special .sp-ht { position: absolute; left: 9.200px; width: 355.500px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(80,100,200,.05), 0 8px 20px rgba(100,120,230,.08); overflow: hidden; }
.u-app-special .sp-tr { top: 405px; height: 177px; }
.u-app-special .sp-ht { top: 599px; height: 260px; background: linear-gradient(180deg, #ffe0d4 0, #fff1ec 22%, #fff 40%); }
.u-app-special .sp-hd { position: absolute; left: 0; right: 0; top: 0; height: 42px; }
.u-app-special .sp-hd-bg { position: absolute; left: 0; top: 0; }
.u-app-special .sp-hd-t { position: absolute; left: 17px; top: 7.500px; font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 2px rgba(20,40,160,.35); }
.u-app-special .sp-hd--r .sp-hd-t { text-shadow: 0 1px 2px rgba(160,30,0,.3); }
.u-app-special .sp-fold { position: absolute; left: 0; right: 0; top: 41px; height: 22px; }
.u-app-special .sp-fold::before { content: ""; position: absolute; left: 1px; top: 3px; width: 30px; height: 30px; border-radius: 50%; }
.u-app-special .sp-fold--b::before { background: radial-gradient(circle at 40% 30%, #eef1ff, #d7defc); }
.u-app-special .sp-fold--r::before { background: radial-gradient(circle at 40% 30%, #ffe9e2, #f9c7b9); }
.u-app-special .sp-fold--b { background: linear-gradient(176deg, #e4e9fe 0, #eff2ff 45%, rgba(255,255,255,0) 100%); clip-path: path("M0 0H356V4L40 22Q22 24 8 22Q0 18 0 10Z"); }
.u-app-special .sp-fold--r { background: linear-gradient(176deg, #fcd9ce 0, #fde7e0 45%, rgba(255,255,255,0) 100%); clip-path: path("M0 0H356V4L40 22Q22 24 8 22Q0 18 0 10Z"); }
.u-app-special .sp-tile { position: absolute; top: 74.300px; height: 85.600px; border-radius: 8px; background: linear-gradient(90deg, #fff 0, #f6f8ff 55%, #e9eeff 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.u-app-special .sp-tile1 { left: 16.600px; width: 157.200px; }
.u-app-special .sp-tile2 { left: 182.300px; width: 156.700px; }
.u-app-special .sp-tl { position: absolute; left: 17.700px; top: 14.400px; font-size: 14px; line-height: 20px; color: #364055; letter-spacing: .6px; }
.u-app-special .sp-tvs { position: absolute; left: 17.700px; top: 40.700px; }
.u-app-special .sp-tu { position: absolute; left: 76.500px; top: 54px; font-style: normal; font-size: 13px; line-height: 18px; color: #8a93a8; }
.u-app-special .sp-3d { position: absolute; right: 3px; top: 16px; width: 52px; height: 61px; }

.u-app-special .sp-cg { position: absolute; left: 17.100px; top: 76px; font-size: 15px; line-height: 22px; font-weight: 600; color: #364055; letter-spacing: .4px; }
.u-app-special .sp-tag { position: absolute; left: 267.300px; top: 74.700px; width: 71.100px; height: 24.200px; display: flex; align-items: center; background: linear-gradient(90deg, #c9f3e0, #daf7ec); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); border-radius: 5px 0 0 5px; }
.u-app-special .sp-tag b { width: 24px; height: 24.200px; display: grid; place-items: center; background: linear-gradient(180deg, #43e3a5, #1ec98a); border-radius: 5px; }
.u-app-special .sp-tag span { margin-left: 9px; font-size: 14px; font-weight: 600; color: #0e8f62; }
.u-app-special .sp-bar { position: absolute; left: 16.600px; top: 109.900px; width: 322.400px; height: 28.500px; border-radius: 4px; background: linear-gradient(90deg, #2fe89a 0%, #62ec6a 12%, #a3ec2c 24%, #ece500 36%, #ffc800 46%, #ff8a00 56%, #ff3a00 68%, #f20a05 78%, #d4000f 90%, #c20019 100%); box-shadow: 0 2px 5px rgba(240,40,20,.18); }
.u-app-special .sp-mk { position: absolute; left: 45.800px; top: 50%; width: 19px; height: 19px; margin: -9.500px 0 0 -9.500px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1.500px rgba(255,255,255,.4); }
.u-app-special .sp-mk em { position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,80,40,.3); }
.u-app-special .sp-bar::before { content: ""; position: absolute; left: 45.800px; top: 0; bottom: 0; width: 1.500px; margin-left: -.7px; background: #fff; opacity: .9; }
.u-app-special .sp-bl { position: absolute; top: 142.500px; font-size: 13px; line-height: 18px; color: #8d97ab; white-space: nowrap; }
.u-app-special .sp-bl1 { left: 17.100px; } .u-app-special .sp-bl2 { left: 107.400px; } .u-app-special .sp-bl3 { left: 197.800px; } .u-app-special .sp-bl4 { right: 17px; }
.u-app-special .sp-rt { position: absolute; left: 17.100px; top: 185.300px; font-size: 15px; line-height: 22px; font-weight: 600; color: #364055; letter-spacing: .4px; }


.u-app-icons-home { background: #f6f9ff; overflow: hidden; }
.u-app-icons-home .ih-sheet { position: absolute; left: 0; top: 0; width: 520px; height: 135px; }
.u-app-icons-home .ih-svg { position: absolute; left: 0; top: 0; }


.u-app-pagoda { background: #a4c0ff; overflow: hidden; }
.u-app-pagoda .pg-svg { position: absolute; left: 0; top: 0; }


.u-dash-city-a-monitors { background: #070d12; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: var(--dp-t1); }
.u-dash-city-a-monitors .mn-a { position: absolute; left: 0; top: 0; }
.u-dash-city-a-monitors .mn-stage { z-index: 1; }
.u-dash-city-a-monitors .mn-win { position: absolute; left: 0; top: 0; width: 2200px; height: 1239px; z-index: 3; overflow: hidden; }
.u-dash-city-a-monitors .mn-m { position: absolute; left: 0; top: 0; width: 2655px; height: 751px; transform-origin: 0 0; }
.u-dash-city-a-monitors .mn-cv { position: absolute; left: 0; top: 0; width: 2655px; height: 751px; background: #06141e; }
.u-dash-city-a-monitors .mn-fl { position: absolute; left: 455px; top: 0; width: 2200px; height: 751px; }
.u-dash-city-a-monitors .mn-win::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(108deg, transparent 33%, rgba(205,238,255,.075) 41%, rgba(205,238,255,.02) 49%, transparent 55%), repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(1,6,12,.25), rgba(1,6,12,.08) 40%, rgba(1,6,12,.22)), linear-gradient(180deg, rgba(1,6,12,.12), rgba(1,6,12,.18)); }
.u-dash-city-a-monitors .mn-win[data-k="1"]::after { background: radial-gradient(ellipse at 40% 45%, rgba(60,230,255,.16), rgba(60,230,255,0) 70%), linear-gradient(112deg, transparent 30%, rgba(205,238,255,.07) 38%, transparent 46%), repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgba(1,6,12,.04), rgba(1,6,12,.1)); }
.u-dash-city-a-monitors .mn-win[data-k="2"] { filter: blur(.9px) brightness(.92); }
.u-dash-city-a-monitors .mn-win[data-k="2"]::after { background: linear-gradient(100deg, rgba(190,230,255,.1), transparent 30%, rgba(190,230,255,.05) 58%, transparent 70%), repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(1,6,12,.4)); }
.u-dash-city-a-monitors .mn-gl { width: 2200px; height: 1239px; z-index: 6; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 30%, rgba(190,235,255,.05) 38%, transparent 46%), linear-gradient(100deg, transparent 58%, rgba(160,220,255,.07) 66%, transparent 76%); }
.u-dash-city-a-monitors .mn-win[data-k="0"] { clip-path: polygon(586px 163px,1487px 329px,1615px 878px,690px 1034px); } .u-dash-city-a-monitors .mn-win[data-k="0"] .mn-m { transform: matrix3d(1.46833582,0.297460322,0,0.00047395265,0.0425053855,1.01654856,0,-0.000138688067,0,0,1,0,585.82656,162.766907,0,1); }
.u-dash-city-a-monitors .mn-win[data-k="1"] { clip-path: polygon(-138px -46px,134px 46px,359px 1111px,12px 1224px); } .u-dash-city-a-monitors .mn-win[data-k="1"] .mn-m { transform: matrix3d(0.722141288,0.242887181,0,0.000389590609,0.26976685,1.62779858,0,-0.000589729292,0,0,1,0,-913.783874,-306.243379,0,1); }
.u-dash-city-a-monitors .mn-win[data-k="2"] { clip-path: polygon(1630px 351px,2334px 271px,2412px 836px,1697px 874px); } .u-dash-city-a-monitors .mn-win[data-k="2"] .mn-m { transform: matrix3d(0.37025453,-0.0699376795,0,-5.21102185e-05,0.0688582928,0.646970036,0,-8.94605999e-06,0,0,1,0,1104.25557,410.658085,0,1); }

.u-dash-city-a-monitors .cv-a { position: absolute; }
.u-dash-city-a-monitors .cv-bk { position: absolute; background: linear-gradient(90deg, rgba(3,10,18,.4), rgba(3,10,18,.3) 80%, rgba(3,10,18,0)); }
.u-dash-city-a-monitors .cv-fr { position: absolute; left: 0; top: 0; }
.u-dash-city-a-monitors .cv-t { font-size: 20px; }
.u-dash-city-a-monitors .cv-t .dp-title-t { font-size: 20px; }
.u-dash-city-a-monitors .cv-b { position: absolute; transform-origin: 0 0; width: 580px; height: 260px; }
.u-dash-city-a-monitors .cv-b > div { position: absolute; }
.u-dash-city-a-monitors .cv-b .cb-card, .u-dash-city-a-monitors .cv-b .cb-tl-t, .u-dash-city-a-monitors .cv-b .cb-tl-ln, .u-dash-city-a-monitors .cv-b .cb-dot, .u-dash-city-a-monitors .cv-b .cb-nm, .u-dash-city-a-monitors .cv-b .cb-tm, .u-dash-city-a-monitors .cv-b .cb-ex, .u-dash-city-a-monitors .cv-b .cb-bm, .u-dash-city-a-monitors .cv-b .cb-pil, .u-dash-city-a-monitors .cv-b .cb-flr, .u-dash-city-a-monitors .cv-b .cb-pp, .u-dash-city-a-monitors .cv-b .cb-city, .u-dash-city-a-monitors .cv-b .cb-pl-svg, .u-dash-city-a-monitors .cv-b .cb-pn, .u-dash-city-a-monitors .cv-b .cb-pa, .u-dash-city-a-monitors .cv-b .cb-bl, .u-dash-city-a-monitors .cv-b .cb-lg { position: absolute; }


.u-dash-city-a-monitors .cb { position: absolute; transform-origin: 0 0; }
.u-dash-city-a-monitors .cb > .in { position: absolute; }

.u-dash-city-a-monitors .cb-card { position: absolute; width: 216px; height: 78px; background: linear-gradient(180deg, rgba(14,66,92,.62), rgba(8,36,54,.5)); border-top: 1px solid rgba(80,170,210,.28); border-bottom: 1px solid rgba(80,170,210,.18); }
.u-dash-city-a-monitors .cb-bar { position: absolute; top: -3px; bottom: -3px; width: 4px; background: #1fb4e6; box-shadow: 0 0 8px rgba(31,180,230,.8); }
.u-dash-city-a-monitors .cb-bar.l { left: 0; } .u-dash-city-a-monitors .cb-bar.r { right: 0; }
.u-dash-city-a-monitors .cb-tk { position: absolute; top: 20px; height: 38px; width: 2px; background: rgba(60,170,210,.75); }
.u-dash-city-a-monitors .cb-tk.l { left: 12px; } .u-dash-city-a-monitors .cb-tk.r { right: 12px; }
.u-dash-city-a-monitors .cb-av { position: absolute; left: 28px; top: 14px; }
.u-dash-city-a-monitors .cb-ct { position: absolute; left: 90px; top: 10px; font-size: 22px; line-height: 32px; color: #e4f1fb; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-monitors .cb-tl-t { position: absolute; font-size: 22px; line-height: 30px; color: #eaf3fc; font-weight: 500; white-space: nowrap; }
.u-dash-city-a-monitors .cb-tl-t i { position: absolute; left: 0; right: -10px; bottom: -3px; height: 5px; background: linear-gradient(90deg, rgba(25,200,255,.55), rgba(25,200,255,0)); }
.u-dash-city-a-monitors .cb-tl-ln { position: absolute; width: 1px; background: rgba(120,180,210,.45); }
.u-dash-city-a-monitors .cb-dot { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #1f9ccb; background: radial-gradient(circle, #5cecff 0 4px, rgba(25,200,255,.25) 5px 7px, transparent 8px); box-shadow: 0 0 8px rgba(25,200,255,.45); }
.u-dash-city-a-monitors .cb-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgba(100,200,230,.55); }
.u-dash-city-a-monitors .cb-nm { position: absolute; font-size: 22px; line-height: 32px; color: #dcecf8; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-monitors .cb-tm { position: absolute; font-size: 24px; line-height: 28px; white-space: nowrap; letter-spacing: .5px; }

.u-dash-city-a-monitors .cb-ex { position: absolute; display: flex; align-items: baseline; gap: 6px; font-size: 22px; line-height: 32px; color: #e4f1fb; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-monitors .cb-ex b { font-size: 28px; line-height: 32px; }
.u-dash-city-a-monitors .cb-ex i { font-style: normal; font-size: 16px; color: #b8c8d6; font-weight: 400; margin-left: -2px; }
.u-dash-city-a-monitors .cb-bm { position: absolute; height: 12px; background: linear-gradient(180deg, rgba(60,170,210,.5), rgba(18,100,138,.55)); border-top: 1px solid rgba(150,220,245,.55); }
.u-dash-city-a-monitors .cb-bm.l { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); -webkit-mask-image: linear-gradient(90deg, #000 60%, rgba(0,0,0,.9)); }
.u-dash-city-a-monitors .cb-bm.r { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.u-dash-city-a-monitors .cb-bm::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 3px; border-top: 1px solid rgba(110,200,230,.35); border-bottom: 1px solid rgba(110,200,230,.2); }
.u-dash-city-a-monitors .cb-pil { position: absolute; width: 46px; height: 196px; background: linear-gradient(180deg, rgba(40,110,140,0), rgba(60,120,140,.35) 25%, rgba(120,110,70,.28) 60%, rgba(30,90,120,.1)), repeating-linear-gradient(90deg, rgba(120,200,230,.18) 0 1px, transparent 1px 4px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
.u-dash-city-a-monitors .cb-flr { position: absolute; width: 240px; height: 50px; background: radial-gradient(ellipse at 50% 30%, rgba(25,200,255,.35), rgba(25,200,255,0) 70%); }
.u-dash-city-a-monitors .cb-pp { position: absolute; filter: drop-shadow(0 0 10px rgba(25,200,255,.55)); }

.u-dash-city-a-monitors .cb-city { position: absolute; width: 210px; height: 90px; opacity: .55; }
.u-dash-city-a-monitors .cb-city i { position: absolute; background: linear-gradient(180deg, rgba(40,120,150,.7), rgba(10,40,60,.2)); border-top: 1px solid rgba(120,200,230,.35); }
.u-dash-city-a-monitors .cb-pl-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.u-dash-city-a-monitors .cb-pn { position: absolute; text-align: center; color: #e8f4fd; font-size: 22px; line-height: 28px; font-weight: 500; }
.u-dash-city-a-monitors .cb-pn b { display: block; font-size: 34px; line-height: 36px; margin-bottom: -2px; }
.u-dash-city-a-monitors .cb-pa { position: absolute; text-align: center; color: #e8f4fd; font-size: 22px; line-height: 30px; font-weight: 500; }
.u-dash-city-a-monitors .cb-pa b { display: block; font-size: 40px; line-height: 40px; }
.u-dash-city-a-monitors .cb-bl { position: absolute; filter: drop-shadow(0 0 8px rgba(25,200,255,.5)); }
.u-dash-city-a-monitors .cb-lg { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 19px; line-height: 24px; color: #dcecf8; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-monitors .cb-lg i { width: 15px; height: 15px; border-radius: 3px; flex: none; }

.u-dash-city-a-monitors .fl-a { position: absolute; }


.u-dash-city-a-charts { background: #050b13; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: var(--dp-t1); }
.u-dash-city-a-charts .ch-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(150,205,235,.32) 1.1px, transparent 1.7px); background-size: 50px 50px; background-position: 25px 25px; }

.u-dash-city-a-charts .cb { position: absolute; transform-origin: 0 0; }
.u-dash-city-a-charts .cb > .in { position: absolute; }

.u-dash-city-a-charts .cb-card { position: absolute; width: 216px; height: 78px; background: linear-gradient(180deg, rgba(14,66,92,.62), rgba(8,36,54,.5)); border-top: 1px solid rgba(80,170,210,.28); border-bottom: 1px solid rgba(80,170,210,.18); }
.u-dash-city-a-charts .cb-bar { position: absolute; top: -3px; bottom: -3px; width: 4px; background: #1fb4e6; box-shadow: 0 0 8px rgba(31,180,230,.8); }
.u-dash-city-a-charts .cb-bar.l { left: 0; } .u-dash-city-a-charts .cb-bar.r { right: 0; }
.u-dash-city-a-charts .cb-tk { position: absolute; top: 20px; height: 38px; width: 2px; background: rgba(60,170,210,.75); }
.u-dash-city-a-charts .cb-tk.l { left: 12px; } .u-dash-city-a-charts .cb-tk.r { right: 12px; }
.u-dash-city-a-charts .cb-av { position: absolute; left: 28px; top: 14px; }
.u-dash-city-a-charts .cb-ct { position: absolute; left: 90px; top: 10px; font-size: 22px; line-height: 32px; color: #e4f1fb; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-charts .cb-tl-t { position: absolute; font-size: 22px; line-height: 30px; color: #eaf3fc; font-weight: 500; white-space: nowrap; }
.u-dash-city-a-charts .cb-tl-t i { position: absolute; left: 0; right: -10px; bottom: -3px; height: 5px; background: linear-gradient(90deg, rgba(25,200,255,.55), rgba(25,200,255,0)); }
.u-dash-city-a-charts .cb-tl-ln { position: absolute; width: 1px; background: rgba(120,180,210,.45); }
.u-dash-city-a-charts .cb-dot { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #1f9ccb; background: radial-gradient(circle, #5cecff 0 4px, rgba(25,200,255,.25) 5px 7px, transparent 8px); box-shadow: 0 0 8px rgba(25,200,255,.45); }
.u-dash-city-a-charts .cb-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgba(100,200,230,.55); }
.u-dash-city-a-charts .cb-nm { position: absolute; font-size: 22px; line-height: 32px; color: #dcecf8; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-charts .cb-tm { position: absolute; font-size: 24px; line-height: 28px; white-space: nowrap; letter-spacing: .5px; }

.u-dash-city-a-charts .cb-ex { position: absolute; display: flex; align-items: baseline; gap: 6px; font-size: 22px; line-height: 32px; color: #e4f1fb; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-charts .cb-ex b { font-size: 28px; line-height: 32px; }
.u-dash-city-a-charts .cb-ex i { font-style: normal; font-size: 16px; color: #b8c8d6; font-weight: 400; margin-left: -2px; }
.u-dash-city-a-charts .cb-bm { position: absolute; height: 12px; background: linear-gradient(180deg, rgba(60,170,210,.5), rgba(18,100,138,.55)); border-top: 1px solid rgba(150,220,245,.55); }
.u-dash-city-a-charts .cb-bm.l { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); -webkit-mask-image: linear-gradient(90deg, #000 60%, rgba(0,0,0,.9)); }
.u-dash-city-a-charts .cb-bm.r { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.u-dash-city-a-charts .cb-bm::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 3px; border-top: 1px solid rgba(110,200,230,.35); border-bottom: 1px solid rgba(110,200,230,.2); }
.u-dash-city-a-charts .cb-pil { position: absolute; width: 46px; height: 196px; background: linear-gradient(180deg, rgba(40,110,140,0), rgba(60,120,140,.35) 25%, rgba(120,110,70,.28) 60%, rgba(30,90,120,.1)), repeating-linear-gradient(90deg, rgba(120,200,230,.18) 0 1px, transparent 1px 4px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
.u-dash-city-a-charts .cb-flr { position: absolute; width: 240px; height: 50px; background: radial-gradient(ellipse at 50% 30%, rgba(25,200,255,.35), rgba(25,200,255,0) 70%); }
.u-dash-city-a-charts .cb-pp { position: absolute; filter: drop-shadow(0 0 10px rgba(25,200,255,.55)); }

.u-dash-city-a-charts .cb-city { position: absolute; width: 210px; height: 90px; opacity: .55; }
.u-dash-city-a-charts .cb-city i { position: absolute; background: linear-gradient(180deg, rgba(40,120,150,.7), rgba(10,40,60,.2)); border-top: 1px solid rgba(120,200,230,.35); }
.u-dash-city-a-charts .cb-pl-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.u-dash-city-a-charts .cb-pn { position: absolute; text-align: center; color: #e8f4fd; font-size: 22px; line-height: 28px; font-weight: 500; }
.u-dash-city-a-charts .cb-pn b { display: block; font-size: 34px; line-height: 36px; margin-bottom: -2px; }
.u-dash-city-a-charts .cb-pa { position: absolute; text-align: center; color: #e8f4fd; font-size: 22px; line-height: 30px; font-weight: 500; }
.u-dash-city-a-charts .cb-pa b { display: block; font-size: 40px; line-height: 40px; }
.u-dash-city-a-charts .cb-bl { position: absolute; filter: drop-shadow(0 0 8px rgba(25,200,255,.5)); }
.u-dash-city-a-charts .cb-lg { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 19px; line-height: 24px; color: #dcecf8; white-space: nowrap; font-weight: 500; }
.u-dash-city-a-charts .cb-lg i { width: 15px; height: 15px; border-radius: 3px; flex: none; }

.u-dash-city-a-charts { background: #040c14; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: var(--dp-t1); }
.u-dash-city-a-charts .fl-a { position: absolute; }
.u-dash-city-a-charts .inc.u-dash-city-a-map { background: transparent; }
.u-dash-city-a-charts .fl-br { font-size: 14.5px; --rh: 31px; }
.u-dash-city-a-charts .fl-br .dp-bar { --h: 10px; }
.u-dash-city-a-charts .fl-br > em { font-size: 21px; }
.u-dash-city-a-charts .fl-ctr { display: flex; justify-content: center; align-items: center; }
.u-dash-city-a-charts .fl-678 { font-size: 33px; color: #4fe3ff; text-shadow: 0 0 12px rgba(79, 227, 255, .7); }
.u-dash-city-a-charts .fl-ctr2 { font-size: 17px; color: var(--dp-t1); }
.u-dash-city-a-charts .fl-lg { font-size: 16px; }
.u-dash-city-a-charts .fl-lg .dp-dot { width: 16px; height: 16px; }
.u-dash-city-a-charts .fl-lg .v { font-size: 21px; margin-right: 14px; }
.u-dash-city-a-charts .fl-amb { filter: drop-shadow(0 0 8px rgba(25, 200, 255, .6)); }
.u-dash-city-a-charts .fl-slab { clip-path: polygon(0 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(34, 140, 176, .55), rgba(14, 72, 104, .32)); }
.u-dash-city-a-charts .fl-t17 { font-size: 17px; color: var(--dp-t2); }
.u-dash-city-a-charts .fl-t32 { display: flex; align-items: baseline; }
.u-dash-city-a-charts .fl-rw { font-size: 15.5px; background: linear-gradient(90deg, rgba(20, 82, 112, .55), rgba(14, 60, 88, .22) 75%, rgba(14, 60, 88, .06)); border-bottom: 0; }
.u-dash-city-a-charts .fl-rw .dp-unit { font-size: 14px; }
.u-dash-city-a-charts .fl-rw .s { font-size: 17px; color: #aebfcc; margin-left: 4px; }
.u-dash-city-a-charts .dp-vtab { font-size: 17px; line-height: 22px; }
.u-dash-city-a-charts .fl-st { font-size: 14.5px; }
.u-dash-city-a-charts .fl-st .dp-num { font-size: 19px; }
.u-dash-city-a-charts .fl-st > div { line-height: 26px; padding-top: 0; }
.u-dash-city-a-charts .fl-shield { background: linear-gradient(180deg, #2bb6e6, #138fc4 40%, #29c2ee); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.u-dash-city-a-charts .fl-shield::before { content: ""; position: absolute; inset: 2px; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); background: linear-gradient(180deg, rgba(20, 98, 138, .92), rgba(8, 46, 72, .96)); }
.u-dash-city-a-charts .fl-flask { font-size: 34px; color: #36bff0; display: flex; }
.u-dash-city-a-charts .fl-flask s { position: absolute; right: 0; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; background: #1c8fc4; color: #dff6ff; font-size: 11px; line-height: 17px; text-align: center; text-decoration: none; }
.u-dash-city-a-charts .fl-sh-t { text-align: center; font-size: 17px; font-weight: 600; color: #fff; }
.u-dash-city-a-charts .fl-sh-s { text-align: center; font-size: 12.5px; line-height: 19px; color: #c4d8e6; }
.u-dash-city-a-charts .fl-hex { --hb: linear-gradient(180deg, #5fe0ff, #0b84be); height: 64px; }
.u-dash-city-a-charts .fl-rt { font-size: 17px; color: var(--dp-t1); text-align: center; background: linear-gradient(180deg, rgba(var(--dp-rgb), .0), rgba(var(--dp-rgb), .22)); border-bottom: 1px solid rgba(var(--dp-rgb), .2); }
.u-dash-city-a-charts .fl-rl { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--dp-t1); }
.u-dash-city-a-charts .fl-rl .dp-dot { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, .55); background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.u-dash-city-a-charts .fl-rl .dp-num { font-family: var(--dp-num-font-c); font-size: 21px; margin-left: 2px; }
.u-dash-city-a-charts .fl-kp { font-size: 17px; height: 60px; }
.u-dash-city-a-charts .fl-kp .dp-kpi-ic { width: 38px; height: 38px; font-size: 26px; }
.u-dash-city-a-charts .fl-kp .k { font-size: 16.5px; }
.u-dash-city-a-charts .fl-kp .dp-num { font-family: var(--dp-num-font-c); font-size: 26px; }
.u-dash-city-a-charts .fl-kp .dp-unit { font-size: 14px; }
.u-dash-city-a-charts .fl-mon { background: linear-gradient(135deg, rgba(34, 150, 196, .6), rgba(14, 82, 120, .38) 60%, rgba(10, 50, 82, .3)); clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); border-top: 1px solid rgba(var(--dp-rgb), .3); }
.u-dash-city-a-charts .fl-mon-k { font-size: 17px; color: var(--dp-t2); }
.u-dash-city-a-charts .fl-mon-v .dp-num { font-size: 30px; }
.u-dash-city-a-charts .fl-slab2 { background: linear-gradient(90deg, rgba(12, 62, 92, .55), rgba(8, 36, 56, .2) 70%, rgba(8, 30, 50, .04)); }
.u-dash-city-a-charts .fl-sl { display: flex; gap: 2px; }
.u-dash-city-a-charts .fl-sl i { width: 6px; height: 8px; background: #8da3b4; transform: skewX(-30deg); }
.u-dash-city-a-charts .fl-mk { font-size: 17px; color: var(--dp-t1); }
.u-dash-city-a-charts .fl-mv { display: flex; align-items: baseline; }
.u-dash-city-a-charts .fl-mv .dp-num { font-size: 24px; }
.u-dash-city-a-charts .fl-mv .dp-unit { font-size: 14px; margin-left: 6px; }
.u-dash-city-a-charts .fl-mv .dp-yoy { margin-left: 26px; font-size: 16px; }
.u-dash-city-a-charts .fl-mv .dp-yoy b { color: var(--dp-bad); font-size: 17px; }

.u-dash-city-a-charts .fl-st .dp-unit { color: #b4c4d2; }
.u-dash-city-a-charts .fl-rw .v + .dp-unit { margin-left: -5px; }
.u-dash-city-a-charts .fl-rw .s { margin-left: 8px; }

.u-dash-city-a-charts .fl-st { width: 200px !important; } .u-dash-city-a-charts .fl-st + .fl-st { width: 190px !important; }
.u-dash-city-a-charts .fl-st .dp-unit { font-style: normal; }
.u-dash-city-a-charts .fl-lg { font-size: 14px; } .u-dash-city-a-charts .fl-lg .dp-dot { width: 12px; height: 12px; } .u-dash-city-a-charts .fl-lg .v { font-size: 17px; margin-right: 18px; }
.u-dash-city-a-charts .fl-rw { font-size: 14px; } .u-dash-city-a-charts .fl-rw .dp-unit { font-size: 13px; } .u-dash-city-a-charts .fl-rw .s { font-size: 15px; } .u-dash-city-a-charts .fl-rw .dp-num--c { font-size: 19px !important; }
.u-dash-city-a-charts svg text { fill: #8d9aa8; }
.u-dash-city-a-charts .fl-shield { background: linear-gradient(180deg, rgba(60,190,235,.75), rgba(30,140,196,.5) 45%, rgba(40,190,235,.75)); }
.u-dash-city-a-charts .fl-shield::before { background: linear-gradient(180deg, rgba(16,76,108,.82), rgba(6,36,56,.9)); }


.u-dash-city-a-login { background: #030a1c; overflow: hidden; font-family: var(--ui-font); font-weight: 800; color: #fff; }
.u-dash-city-a-login .lg-a { position: absolute; }
.u-dash-city-a-login .lg-bg { left: 0; top: 0; }
.u-dash-city-a-login .lg-head { left: 0; top: 0; }
.u-dash-city-a-login .lg-title { left: 0; top: 24px; width: 2000px; text-align: center; font-size: 50px; line-height: 70px; font-weight: 900; letter-spacing: 5px; white-space: nowrap; transform: skewX(-9deg); color: #fff; -webkit-text-stroke: 1.2px #fff;
  text-shadow: 0 2px 0 rgba(10, 40, 120, .8), 0 0 18px rgba(120, 190, 255, .9), 0 0 36px rgba(60, 130, 255, .7); }
.u-dash-city-a-login .lg-wing { font-size: 40px; line-height: 44px; font-weight: 900; letter-spacing: 6px; white-space: nowrap; transform: skewX(-9deg); color: #fff; -webkit-text-stroke: 1px #fff; text-shadow: 0 2px 0 rgba(10, 50, 140, .7), 0 0 14px rgba(150, 215, 255, .9); }
.u-dash-city-a-login .lg-lab { font-size: 33px; line-height: 40px; font-weight: 900; letter-spacing: 3px; white-space: nowrap; transform: skewX(-9deg); -webkit-text-stroke: 1.3px #fff; text-shadow: 0 2px 0 rgba(10, 50, 140, .7), 0 0 10px rgba(150, 215, 255, .7); }
.u-dash-city-a-login .lg-ph { font-size: 33px; line-height: 40px; font-weight: 900; letter-spacing: 3px; white-space: nowrap; transform: skewX(-9deg); color: rgba(168, 208, 255, .62); -webkit-text-stroke: 1.1px rgba(168, 208, 255, .62); text-shadow: 0 2px 0 rgba(10, 50, 140, .5); }
.u-dash-city-a-login .lg-btn { height: 40px; text-align: center; font-size: 33px; line-height: 40px; font-weight: 900; letter-spacing: 4px; transform: skewX(-9deg); -webkit-text-stroke: 1.3px #fff; text-shadow: 0 2px 0 rgba(10, 50, 140, .8), 0 0 12px rgba(150, 215, 255, .9); }
@media (prefers-reduced-motion: no-preference) {
  .u-dash-city-a-login .lg-btn { animation: lg-pulse 3.6s ease-in-out infinite; }
  @keyframes lg-pulse { 0%, 100% { text-shadow: 0 2px 0 rgba(10, 50, 140, .8), 0 0 10px rgba(150, 215, 255, .7); } 50% { text-shadow: 0 2px 0 rgba(10, 50, 140, .8), 0 0 20px rgba(190, 235, 255, 1); } }
}


.u-dash-city-a-home { background: #02091f; overflow: hidden; font-family: var(--ui-font); font-weight: 800; color: #fff; }
.u-dash-city-a-home .hm-a { position: absolute; }
.u-dash-city-a-home .hm-bg, .u-dash-city-a-home .hm-head { left: 0; top: 0; }
.u-dash-city-a-home .hm-title { left: 0; top: 12px; width: 2000px; text-align: center; font-size: 50px; line-height: 70px; font-weight: 900; letter-spacing: 5px; white-space: nowrap; transform: skewX(-9deg); color: #fff; -webkit-text-stroke: 1.2px #fff;
  text-shadow: 0 2px 0 rgba(10, 40, 120, .8), 0 0 18px rgba(120, 190, 255, .9), 0 0 36px rgba(60, 130, 255, .7); }
.u-dash-city-a-home .hm-lb { width: 200px; height: 44px; line-height: 44px; font-size: 30px; font-weight: 900; letter-spacing: 1px; white-space: nowrap; transform: skewX(-9deg); -webkit-text-stroke: .8px #fff; text-shadow: 0 2px 0 rgba(10, 50, 140, .8), 0 0 10px rgba(150, 215, 255, .8); }
.u-dash-city-a-home .hm-lb.is-r { width: 240px; letter-spacing: 0; }
.u-dash-city-a-home .hm-big { height: 60px; line-height: 60px; text-align: center; font-size: 44px; font-weight: 900; letter-spacing: 6px; white-space: nowrap; transform: skewX(-9deg); -webkit-text-stroke: 1px #fff; text-shadow: 0 3px 0 rgba(10, 50, 140, .8), 0 0 16px rgba(150, 215, 255, .9); }
.u-dash-city-a-home .hm-gold { left: 822px; top: 532px; width: 360px; height: 90px; line-height: 90px; text-align: center; font-size: 76px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; transform: skewX(-9deg) rotate(-2deg);
  color: transparent; background: linear-gradient(180deg, #fffbe6 8%, #ffe49a 50%, #ffa83a 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1.5px rgba(255, 240, 200, .9);
  filter: drop-shadow(0 4px 2px rgba(120, 60, 0, .55)) drop-shadow(0 0 16px rgba(255, 200, 100, .85)); }


.u-dash-city-b-hero { background: #05090f; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: #eaf3fc; }
.u-dash-city-b-hero .fl-a { position: absolute; display: block; }
.u-dash-city-b-hero .fl-map { position: absolute; left: 0; top: 0; width: 2200px; height: 416px; overflow: hidden; }
.u-dash-city-b-hero .fl-map-s { position: absolute; left: 929px; top: 40.2px; width: 1479px; height: 1544px; transform: scale(.2456); transform-origin: 0 0; }
.u-dash-city-b-hero .fl-map-s .ym-bg { display: none; }
.u-dash-city-b-hero .inc.u-dash-city-b-map { background: transparent; }
.u-dash-city-b-hero .fl-title { position: absolute; left: 41px; top: 11px; font-size: 15px; line-height: 24px; font-weight: 900; letter-spacing: .6px; color: #f2f7ff; -webkit-text-stroke: .5px #f2f7ff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 10, 50, .6); }
.u-dash-city-b-hero .fl-nv, .u-dash-city-b-hero .fl-tb, .u-dash-city-b-hero .fl-wx, .u-dash-city-b-hero .fl-dt, .u-dash-city-b-hero .fl-tm { position: absolute; top: 20px; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; }
.u-dash-city-b-hero .fl-nv { font-size: 10.5px; color: #dbe8ff; font-weight: 700; letter-spacing: .8px; }
.u-dash-city-b-hero .fl-nv.on { color: #fff; text-shadow: 0 0 8px rgba(120, 180, 255, .9); }
.u-dash-city-b-hero .fl-tb { font-size: 7.4px; color: #b4c8ea; letter-spacing: .3px; }
.u-dash-city-b-hero .fl-tb.on { color: #6fc0ff; font-weight: 700; }
.u-dash-city-b-hero .fl-wx, .u-dash-city-b-hero .fl-dt { font-size: 8.6px; color: #e8f1ff; transform: translate(0, -50%); }
.u-dash-city-b-hero .fl-wx svg { display: inline-block; }
.u-dash-city-b-hero .yc-flatp .yc-hl::before, .u-dash-city-b-hero .yc-flatp .yc-hl::after { width: 2.4px; height: 2.4px; top: -.9px; box-shadow: 0 0 2px rgba(190, 215, 255, .8); }
.u-dash-city-b-hero .yc-flatp .yc-hl::before { left: -1.2px; }
.u-dash-city-b-hero .yc-flatp .yc-hl::after { right: -1.2px; }
.u-dash-city-b-hero .fl-tm { font-family: var(--dp-num-font-c); font-size: 15px; font-weight: 700; color: #fff; transform: translate(0, -50%); letter-spacing: .5px; text-shadow: 0 0 6px rgba(150, 200, 255, .6); }
.u-dash-city-b-hero .fl-wx svg { display: inline-block; }
.u-dash-city-b-hero .yc-flatp .yc-hl::before, .u-dash-city-b-hero .yc-flatp .yc-hl::after { width: 2.4px; height: 2.4px; top: -.9px; box-shadow: 0 0 2px rgba(190, 215, 255, .8); }
.u-dash-city-b-hero .yc-flatp .yc-hl::before { left: -1.2px; }
.u-dash-city-b-hero .yc-flatp .yc-hl::after { right: -1.2px; }
.u-dash-city-b-hero .fl-sec { position: absolute; height: 21px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(34, 70, 150, .75), rgba(18, 40, 96, .8) 70%, rgba(14, 30, 78, .7)); border-left: 1.4px solid #6fa0ff; border-top: .6px solid rgba(130, 170, 255, .45); border-bottom: .6px solid rgba(80, 120, 220, .4); box-shadow: inset 0 0 12px rgba(60, 110, 220, .25); }
.u-dash-city-b-hero .fl-sec b { font-size: 10px; font-weight: 900; color: #f0f6ff; letter-spacing: .5px; -webkit-text-stroke: .35px #f0f6ff; }
.u-dash-city-b-hero .fl-seci { display: flex; margin: 0 6px 0 5px; filter: drop-shadow(0 0 3px rgba(150, 190, 255, .8)); }
.u-dash-city-b-hero .fl-sec u { position: absolute; top: 6.5px; text-decoration: none; font-size: 5.6px; letter-spacing: .5px; color: rgba(150, 175, 215, .35); font-weight: 400; font-style: italic; white-space: nowrap; }
.u-dash-city-b-hero .fl-sc { position: absolute; width: 74px; height: 35px; background: linear-gradient(100deg, rgba(40, 80, 150, .7), rgba(26, 52, 108, .6) 60%, rgba(18, 36, 80, .3)); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-shadow: inset 0 0 0 .6px rgba(120, 170, 240, .35); }
.u-dash-city-b-hero .fl-sci { position: absolute; left: 4px; top: 5px; }
.u-dash-city-b-hero .fl-scl { position: absolute; left: 31px; top: 8px; font-size: 6.4px; color: #bfd0ea; }
.u-dash-city-b-hero .fl-scv { position: absolute; left: 31px; top: 17px; display: flex; align-items: baseline; }
.u-dash-city-b-hero .fl-scv b { font-size: 12px; }
.u-dash-city-b-hero .fl-scv i { font-style: normal; font-size: 5px; color: #9db1d0; margin-left: 2px; }
.u-dash-city-b-hero .yc-orow { background: linear-gradient(90deg, rgba(26, 60, 118, .85), rgba(22, 48, 98, .7)); border-top: .4px solid rgba(110, 160, 230, .35); }
.u-dash-city-b-hero .yc-card2 { background: linear-gradient(90deg, rgba(30, 58, 106, .66), rgba(18, 38, 76, .5)); box-shadow: inset 0 0 0 .5px rgba(110, 150, 220, .12); }

.u-dash-city-b-hero .yc-p { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.u-dash-city-b-hero .yc-t { position: absolute; white-space: nowrap; line-height: 1; font-weight: 500; color: #e8f1ff; font-family: var(--ui-font); letter-spacing: .3px; }
.u-dash-city-b-hero .yc-n { font-family: var(--dp-num-font-c); font-weight: 700; color: #fff; letter-spacing: .4px; text-shadow: 0 0 8px rgba(120, 190, 255, .45); }
.u-dash-city-b-hero .yc-glow { text-shadow: 0 0 12px rgba(120, 200, 255, .75), 0 0 2px rgba(255, 255, 255, .5); }
.u-dash-city-b-hero .yc-b { position: absolute; box-sizing: border-box; }
.u-dash-city-b-hero .yc-s { position: absolute; overflow: visible; }
.u-dash-city-b-hero .yc-sq { border-radius: 4px; box-shadow: 0 0 6px rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .25); background-clip: padding-box; }
.u-dash-city-b-hero .yc-ht { position: absolute; left: 24px; top: -24px; transform: translateY(-50%); font-size: 24px; line-height: 1; font-weight: 500; color: #eaf2ff; white-space: nowrap; letter-spacing: .3px; text-shadow: 0 0 10px rgba(150, 195, 255, .65); }
.u-dash-city-b-hero .yc-hi { position: absolute; left: -2px; top: -33px; fill: #eaf2ff; filter: drop-shadow(0 0 5px rgba(150, 195, 255, .8)); }
.u-dash-city-b-hero .yc-ha { position: absolute; top: -18px; }
.u-dash-city-b-hero .yc-hl { position: absolute; left: 0; top: -1px; height: 1.4px; background: linear-gradient(90deg, #6a82b4, #3a4f7c 60%, #55699a); box-shadow: 0 0 4px rgba(130, 170, 240, .2); }
.u-dash-city-b-hero .yc-hl::before, .u-dash-city-b-hero .yc-hl::after { content: ""; position: absolute; top: -2.3px; width: 5.4px; height: 5.4px; border-radius: 50%; background: #eef4ff; box-shadow: 0 0 5px rgba(190, 215, 255, .8); }
.u-dash-city-b-hero .yc-hl::before { left: -3px; }
.u-dash-city-b-hero .yc-hl::after { right: -3px; }
.u-dash-city-b-hero .yc-row { background: linear-gradient(90deg, rgba(32, 60, 106, .66), rgba(22, 44, 84, .7)); border-left: 5px solid #dbe9ff; }
.u-dash-city-b-hero .yc-tabs { background: linear-gradient(180deg, rgba(40, 70, 120, .35), rgba(20, 40, 76, .5)); border-bottom: 1px solid rgba(110, 150, 220, .3); }
.u-dash-city-b-hero .yc-tabon { background: radial-gradient(ellipse at 50% 0, rgba(100, 160, 240, .75), rgba(34, 70, 140, .55) 55%, rgba(20, 44, 92, .5)); border-bottom: 2px solid rgba(190, 215, 255, .7); box-shadow: inset 0 1px 0 rgba(200, 225, 255, .5); }
.u-dash-city-b-hero .yc-sel { border: 1px solid rgba(120, 160, 230, .45); border-radius: 15px; background: rgba(24, 48, 92, .7); }
.u-dash-city-b-hero .yc-card { background: linear-gradient(90deg, rgba(30, 58, 106, .66), rgba(18, 38, 76, .5)); box-shadow: inset 0 0 0 1px rgba(110, 150, 220, .1); }
.u-dash-city-b-hero .yc-grow { background: linear-gradient(90deg, rgba(36, 70, 122, .72), rgba(26, 52, 96, .64)); }
.u-dash-city-b-hero .yc-stc { background: linear-gradient(180deg, rgba(36, 70, 122, .7), rgba(20, 40, 76, .55)); border-top: 2.5px solid #7ec6fb; }
.u-dash-city-b-hero .yc-pct { font-family: var(--dp-num-font); font-weight: 500; color: #78f6e0; letter-spacing: .2px; text-shadow: 0 0 6px rgba(120, 246, 224, .35); }
.u-dash-city-b-hero .yc-pct.dn { color: #fa6c61; text-shadow: 0 0 6px rgba(250, 108, 97, .4); }

.u-dash-city-b-hero .yc-flatp .yc-n { font-weight: 700; }

.u-dash-city-b-hero .hr-a { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.u-dash-city-b-hero .hr-s { position: absolute; left: 0; top: 0; height: 450px; overflow: hidden; transform-origin: 0 0; }
.u-dash-city-b-hero .hr-in { position: absolute; top: 16px; width: 2240px; height: 416px; }
.u-dash-city-b-hero .hr-bz { position: absolute; left: -40px; top: -16px; width: 2300px; height: 16px; background: linear-gradient(180deg, #04060b, #0e1834); border-bottom: 1.4px solid rgba(150, 190, 255, .85); box-shadow: 0 1px 6px rgba(80, 140, 255, .6); }


.u-dash-city-b-map { background: #05091a; overflow: hidden; font-family: var(--ui-font); --dp-bg:#040a1c; }
.u-dash-city-b-map .ym-bg, .u-dash-city-b-map .ym-sw, .u-dash-city-b-map .ym-tags { position: absolute; left: 0; top: 0; width: 1479px; height: 1544px; }
.u-dash-city-b-map .ym-tags { pointer-events: none; }
.u-dash-city-b-map .ym-stage, .u-dash-city-b-map .ym-bgsvg { display: block; }
.u-dash-city-b-map .ym-tag { position: absolute; display: flex; align-items: center; width: 232px; height: 64px; margin: 0; }
.u-dash-city-b-map .ym-tag::before { content: ""; position: absolute; inset: 0; clip-path: polygon(7px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); background: linear-gradient(90deg, #1b3da6 0 62%, rgba(36, 72, 168, .74) 74%, rgba(110, 120, 150, .32) 100%); box-shadow: 0 6px 18px rgba(0, 10, 40, .5); }
.u-dash-city-b-map .ym-tag::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 69px; background: linear-gradient(180deg, #fff, #cfe0ff); transform: skewX(-9deg); transform-origin: 0 100%; }
.u-dash-city-b-map .ym-tag > span { position: relative; z-index: 1; margin-left: 22px; font-size: 44px; line-height: 1; font-weight: 900; letter-spacing: 3px; color: #fff; transform: skewX(-11deg); -webkit-text-stroke: 1.6px #fff; text-shadow: 1px 2px 0 rgba(10, 38, 130, .75), 0 3px 5px rgba(0, 12, 50, .65); }
.u-dash-city-b-map .ym-tg { position: absolute; right: 14px; top: 12px; width: 40px; height: 36px; filter: drop-shadow(0 0 6px rgba(250, 177, 90, .55)); }
.u-dash-city-b-map .ym-tg svg { display: block; }


.u-dash-city-b-flat { background: #050d22; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: #eaf3fc; }
.u-dash-city-b-flat .fl-u { position: absolute; left: 0; top: 0; width: 2200px; height: 416px; transform: scale(2); transform-origin: 0 0; }
.u-dash-city-b-flat .fl-a { position: absolute; display: block; }
.u-dash-city-b-flat .fl-map { position: absolute; left: 0; top: 0; width: 2200px; height: 416px; overflow: hidden; }
.u-dash-city-b-flat .fl-map-s { position: absolute; left: 929px; top: 40.2px; width: 1479px; height: 1544px; transform: scale(.2456); transform-origin: 0 0; }
.u-dash-city-b-flat .fl-map-s .ym-bg { display: none; }
.u-dash-city-b-flat .inc.u-dash-city-b-map { background: transparent; }
.u-dash-city-b-flat .fl-title { position: absolute; left: 41px; top: 11px; font-size: 15px; line-height: 24px; font-weight: 900; letter-spacing: .6px; color: #f2f7ff; -webkit-text-stroke: .5px #f2f7ff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 10, 50, .6); }
.u-dash-city-b-flat .fl-nv, .u-dash-city-b-flat .fl-tb, .u-dash-city-b-flat .fl-wx, .u-dash-city-b-flat .fl-dt, .u-dash-city-b-flat .fl-tm { position: absolute; top: 20px; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; }
.u-dash-city-b-flat .fl-nv { font-size: 10.5px; color: #dbe8ff; font-weight: 700; letter-spacing: .8px; }
.u-dash-city-b-flat .fl-nv.on { color: #fff; text-shadow: 0 0 8px rgba(120, 180, 255, .9); }
.u-dash-city-b-flat .fl-tb { font-size: 7.4px; color: #b4c8ea; letter-spacing: .3px; }
.u-dash-city-b-flat .fl-tb.on { color: #6fc0ff; font-weight: 700; }
.u-dash-city-b-flat .fl-wx, .u-dash-city-b-flat .fl-dt { font-size: 8.6px; color: #e8f1ff; transform: translate(0, -50%); }
.u-dash-city-b-flat .fl-wx svg { display: inline-block; }
.u-dash-city-b-flat .yc-flatp .yc-hl::before, .u-dash-city-b-flat .yc-flatp .yc-hl::after { width: 2.4px; height: 2.4px; top: -.9px; box-shadow: 0 0 2px rgba(190, 215, 255, .8); }
.u-dash-city-b-flat .yc-flatp .yc-hl::before { left: -1.2px; }
.u-dash-city-b-flat .yc-flatp .yc-hl::after { right: -1.2px; }
.u-dash-city-b-flat .fl-tm { font-family: var(--dp-num-font-c); font-size: 15px; font-weight: 700; color: #fff; transform: translate(0, -50%); letter-spacing: .5px; text-shadow: 0 0 6px rgba(150, 200, 255, .6); }
.u-dash-city-b-flat .fl-wx svg { display: inline-block; }
.u-dash-city-b-flat .yc-flatp .yc-hl::before, .u-dash-city-b-flat .yc-flatp .yc-hl::after { width: 2.4px; height: 2.4px; top: -.9px; box-shadow: 0 0 2px rgba(190, 215, 255, .8); }
.u-dash-city-b-flat .yc-flatp .yc-hl::before { left: -1.2px; }
.u-dash-city-b-flat .yc-flatp .yc-hl::after { right: -1.2px; }
.u-dash-city-b-flat .fl-sec { position: absolute; height: 21px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(34, 70, 150, .75), rgba(18, 40, 96, .8) 70%, rgba(14, 30, 78, .7)); border-left: 1.4px solid #6fa0ff; border-top: .6px solid rgba(130, 170, 255, .45); border-bottom: .6px solid rgba(80, 120, 220, .4); box-shadow: inset 0 0 12px rgba(60, 110, 220, .25); }
.u-dash-city-b-flat .fl-sec b { font-size: 10px; font-weight: 900; color: #f0f6ff; letter-spacing: .5px; -webkit-text-stroke: .35px #f0f6ff; }
.u-dash-city-b-flat .fl-seci { display: flex; margin: 0 6px 0 5px; filter: drop-shadow(0 0 3px rgba(150, 190, 255, .8)); }
.u-dash-city-b-flat .fl-sec u { position: absolute; top: 6.5px; text-decoration: none; font-size: 5.6px; letter-spacing: .5px; color: rgba(150, 175, 215, .35); font-weight: 400; font-style: italic; white-space: nowrap; }
.u-dash-city-b-flat .fl-sc { position: absolute; width: 74px; height: 35px; background: linear-gradient(100deg, rgba(40, 80, 150, .7), rgba(26, 52, 108, .6) 60%, rgba(18, 36, 80, .3)); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-shadow: inset 0 0 0 .6px rgba(120, 170, 240, .35); }
.u-dash-city-b-flat .fl-sci { position: absolute; left: 4px; top: 5px; }
.u-dash-city-b-flat .fl-scl { position: absolute; left: 31px; top: 8px; font-size: 6.4px; color: #bfd0ea; }
.u-dash-city-b-flat .fl-scv { position: absolute; left: 31px; top: 17px; display: flex; align-items: baseline; }
.u-dash-city-b-flat .fl-scv b { font-size: 12px; }
.u-dash-city-b-flat .fl-scv i { font-style: normal; font-size: 5px; color: #9db1d0; margin-left: 2px; }
.u-dash-city-b-flat .yc-orow { background: linear-gradient(90deg, rgba(26, 60, 118, .85), rgba(22, 48, 98, .7)); border-top: .4px solid rgba(110, 160, 230, .35); }
.u-dash-city-b-flat .yc-card2 { background: linear-gradient(90deg, rgba(30, 58, 106, .66), rgba(18, 38, 76, .5)); box-shadow: inset 0 0 0 .5px rgba(110, 150, 220, .12); }

.u-dash-city-b-flat .yc-p { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.u-dash-city-b-flat .yc-t { position: absolute; white-space: nowrap; line-height: 1; font-weight: 500; color: #e8f1ff; font-family: var(--ui-font); letter-spacing: .3px; }
.u-dash-city-b-flat .yc-n { font-family: var(--dp-num-font-c); font-weight: 700; color: #fff; letter-spacing: .4px; text-shadow: 0 0 8px rgba(120, 190, 255, .45); }
.u-dash-city-b-flat .yc-glow { text-shadow: 0 0 12px rgba(120, 200, 255, .75), 0 0 2px rgba(255, 255, 255, .5); }
.u-dash-city-b-flat .yc-b { position: absolute; box-sizing: border-box; }
.u-dash-city-b-flat .yc-s { position: absolute; overflow: visible; }
.u-dash-city-b-flat .yc-sq { border-radius: 4px; box-shadow: 0 0 6px rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .25); background-clip: padding-box; }
.u-dash-city-b-flat .yc-ht { position: absolute; left: 24px; top: -24px; transform: translateY(-50%); font-size: 24px; line-height: 1; font-weight: 500; color: #eaf2ff; white-space: nowrap; letter-spacing: .3px; text-shadow: 0 0 10px rgba(150, 195, 255, .65); }
.u-dash-city-b-flat .yc-hi { position: absolute; left: -2px; top: -33px; fill: #eaf2ff; filter: drop-shadow(0 0 5px rgba(150, 195, 255, .8)); }
.u-dash-city-b-flat .yc-ha { position: absolute; top: -18px; }
.u-dash-city-b-flat .yc-hl { position: absolute; left: 0; top: -1px; height: 1.4px; background: linear-gradient(90deg, #6a82b4, #3a4f7c 60%, #55699a); box-shadow: 0 0 4px rgba(130, 170, 240, .2); }
.u-dash-city-b-flat .yc-hl::before, .u-dash-city-b-flat .yc-hl::after { content: ""; position: absolute; top: -2.3px; width: 5.4px; height: 5.4px; border-radius: 50%; background: #eef4ff; box-shadow: 0 0 5px rgba(190, 215, 255, .8); }
.u-dash-city-b-flat .yc-hl::before { left: -3px; }
.u-dash-city-b-flat .yc-hl::after { right: -3px; }
.u-dash-city-b-flat .yc-row { background: linear-gradient(90deg, rgba(32, 60, 106, .66), rgba(22, 44, 84, .7)); border-left: 5px solid #dbe9ff; }
.u-dash-city-b-flat .yc-tabs { background: linear-gradient(180deg, rgba(40, 70, 120, .35), rgba(20, 40, 76, .5)); border-bottom: 1px solid rgba(110, 150, 220, .3); }
.u-dash-city-b-flat .yc-tabon { background: radial-gradient(ellipse at 50% 0, rgba(100, 160, 240, .75), rgba(34, 70, 140, .55) 55%, rgba(20, 44, 92, .5)); border-bottom: 2px solid rgba(190, 215, 255, .7); box-shadow: inset 0 1px 0 rgba(200, 225, 255, .5); }
.u-dash-city-b-flat .yc-sel { border: 1px solid rgba(120, 160, 230, .45); border-radius: 15px; background: rgba(24, 48, 92, .7); }
.u-dash-city-b-flat .yc-card { background: linear-gradient(90deg, rgba(30, 58, 106, .66), rgba(18, 38, 76, .5)); box-shadow: inset 0 0 0 1px rgba(110, 150, 220, .1); }
.u-dash-city-b-flat .yc-grow { background: linear-gradient(90deg, rgba(36, 70, 122, .72), rgba(26, 52, 96, .64)); }
.u-dash-city-b-flat .yc-stc { background: linear-gradient(180deg, rgba(36, 70, 122, .7), rgba(20, 40, 76, .55)); border-top: 2.5px solid #7ec6fb; }
.u-dash-city-b-flat .yc-pct { font-family: var(--dp-num-font); font-weight: 500; color: #78f6e0; letter-spacing: .2px; text-shadow: 0 0 6px rgba(120, 246, 224, .35); }
.u-dash-city-b-flat .yc-pct.dn { color: #fa6c61; text-shadow: 0 0 6px rgba(250, 108, 97, .4); }

.u-dash-city-b-flat .yc-flatp .yc-n { font-weight: 700; }


.u-dash-city-b-charts { background: #04070f; overflow: hidden; font-family: var(--ui-font); font-weight: 500; color: #eaf3fc; }
.u-dash-city-b-charts .yc-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(18, 36, 80, .5), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(14, 30, 70, .5), transparent 60%); }
.u-dash-city-b-charts .yc-blk { position: absolute; background-color: #091632; background-image: radial-gradient(rgba(150, 190, 240, .13) 1.3px, transparent 1.9px); background-size: 56px 56px; background-position: 28px 28px; box-shadow: inset 0 0 40px rgba(0, 0, 0, .35); }
.u-dash-city-b-charts .yc-blk.is-a { background-color: #091428; }
.u-dash-city-b-charts .yc-blk.is-b { background-color: #08112a; }
.u-dash-city-b-charts .yc-blk.is-c { background-color: #091530; }

.u-dash-city-b-charts .yc-p { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.u-dash-city-b-charts .yc-t { position: absolute; white-space: nowrap; line-height: 1; font-weight: 500; color: #e8f1ff; font-family: var(--ui-font); letter-spacing: .3px; }
.u-dash-city-b-charts .yc-n { font-family: var(--dp-num-font-c); font-weight: 700; color: #fff; letter-spacing: .4px; text-shadow: 0 0 8px rgba(120, 190, 255, .45); }
.u-dash-city-b-charts .yc-glow { text-shadow: 0 0 12px rgba(120, 200, 255, .75), 0 0 2px rgba(255, 255, 255, .5); }
.u-dash-city-b-charts .yc-b { position: absolute; box-sizing: border-box; }
.u-dash-city-b-charts .yc-s { position: absolute; overflow: visible; }
.u-dash-city-b-charts .yc-sq { border-radius: 4px; box-shadow: 0 0 6px rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .25); background-clip: padding-box; }
.u-dash-city-b-charts .yc-ht { position: absolute; left: 24px; top: -24px; transform: translateY(-50%); font-size: 24px; line-height: 1; font-weight: 500; color: #eaf2ff; white-space: nowrap; letter-spacing: .3px; text-shadow: 0 0 10px rgba(150, 195, 255, .65); }
.u-dash-city-b-charts .yc-hi { position: absolute; left: -2px; top: -33px; fill: #eaf2ff; filter: drop-shadow(0 0 5px rgba(150, 195, 255, .8)); }
.u-dash-city-b-charts .yc-ha { position: absolute; top: -18px; }
.u-dash-city-b-charts .yc-hl { position: absolute; left: 0; top: -1px; height: 1.4px; background: linear-gradient(90deg, #6a82b4, #3a4f7c 60%, #55699a); box-shadow: 0 0 4px rgba(130, 170, 240, .2); }
.u-dash-city-b-charts .yc-hl::before, .u-dash-city-b-charts .yc-hl::after { content: ""; position: absolute; top: -2.3px; width: 5.4px; height: 5.4px; border-radius: 50%; background: #eef4ff; box-shadow: 0 0 5px rgba(190, 215, 255, .8); }
.u-dash-city-b-charts .yc-hl::before { left: -3px; }
.u-dash-city-b-charts .yc-hl::after { right: -3px; }
.u-dash-city-b-charts .yc-row { background: linear-gradient(90deg, rgba(32, 60, 106, .66), rgba(22, 44, 84, .7)); border-left: 5px solid #dbe9ff; }
.u-dash-city-b-charts .yc-tabs { background: linear-gradient(180deg, rgba(40, 70, 120, .35), rgba(20, 40, 76, .5)); border-bottom: 1px solid rgba(110, 150, 220, .3); }
.u-dash-city-b-charts .yc-tabon { background: radial-gradient(ellipse at 50% 0, rgba(100, 160, 240, .75), rgba(34, 70, 140, .55) 55%, rgba(20, 44, 92, .5)); border-bottom: 2px solid rgba(190, 215, 255, .7); box-shadow: inset 0 1px 0 rgba(200, 225, 255, .5); }
.u-dash-city-b-charts .yc-sel { border: 1px solid rgba(120, 160, 230, .45); border-radius: 15px; background: rgba(24, 48, 92, .7); }
.u-dash-city-b-charts .yc-card { background: linear-gradient(90deg, rgba(30, 58, 106, .66), rgba(18, 38, 76, .5)); box-shadow: inset 0 0 0 1px rgba(110, 150, 220, .1); }
.u-dash-city-b-charts .yc-grow { background: linear-gradient(90deg, rgba(36, 70, 122, .72), rgba(26, 52, 96, .64)); }
.u-dash-city-b-charts .yc-stc { background: linear-gradient(180deg, rgba(36, 70, 122, .7), rgba(20, 40, 76, .55)); border-top: 2.5px solid #7ec6fb; }
.u-dash-city-b-charts .yc-pct { font-family: var(--dp-num-font); font-weight: 500; color: #78f6e0; letter-spacing: .2px; text-shadow: 0 0 6px rgba(120, 246, 224, .35); }
.u-dash-city-b-charts .yc-pct.dn { color: #fa6c61; text-shadow: 0 0 6px rgba(250, 108, 97, .4); }



.u-dash-city-b-monitor { background: #030710; overflow: hidden; }
.u-dash-city-b-monitor .mo-a { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.u-dash-city-b-monitor .mo-scr { position: absolute; left: 0; top: 0; width: 4400px; height: 832px; transform-origin: 0 0; transform: matrix3d(1.0720665,0.15840343,0,0.00027044357,-0.0072922824,2.099214,0,0.00019620241,0,0,1,0,-6.157685,-131.59031,0,1); }

.u-dash-city-b-monitor .mo-scr .fl-u > svg.fl-a:first-of-type > g:first-of-type > ellipse { opacity: .5; }
.u-dash-city-b-monitor .mo-scr .fl-u > svg.fl-a:first-of-type > g:first-of-type > ellipse:nth-of-type(1) { stroke-dasharray: 250 470; stroke-dashoffset: 125; }
.u-dash-city-b-monitor .mo-scr .fl-u > svg.fl-a:first-of-type > g:first-of-type > ellipse:nth-of-type(2) { stroke-dasharray: 330 390; stroke-dashoffset: 165; }
.u-dash-city-b-monitor .mo-scr .fl-u > svg.fl-a:first-of-type > g:first-of-type > ellipse:nth-of-type(3) { stroke-dasharray: 140 40 30 90 140 40 30 90 140 40; stroke-dashoffset: 70; }
.u-dash-city-b-monitor .mo-scr .fl-u > svg.fl-a:first-of-type > g:first-of-type > ellipse:nth-of-type(4) { stroke-dasharray: 190 530; stroke-dashoffset: 95; }
.u-dash-city-b-monitor .mo-scr .fl-u > svg.fl-a:first-of-type > g:first-of-type > ellipse:nth-of-type(5) { stroke-dasharray: 3 6; opacity: .3; }

.u-dash-city-b-monitor .mo-blur { position: absolute; left: 0; top: 820px; width: 1100px; height: 439px; pointer-events: none; -webkit-backdrop-filter: blur(1.1px); backdrop-filter: blur(1.1px); -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 0, rgba(0, 0, 0, .8) 45%, transparent 100%); mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 0, rgba(0, 0, 0, .8) 45%, transparent 100%); }


.u-dash-city-c-monitor { background: #05090d; overflow: hidden; font-family: var(--ui-font); }
.u-dash-city-c-monitor .mn-a { position: absolute; left: 0; top: 0; }
.u-dash-city-c-monitor .mn-room, .u-dash-city-c-monitor .mn-s2frame, .u-dash-city-c-monitor .mn-glow, .u-dash-city-c-monitor .mn-grain { width: 2200px; height: 1514px; pointer-events: none; }
.u-dash-city-c-monitor .mn-scr { width: 2200px; height: 1236px; transform-origin: 0 0; }
.u-dash-city-c-monitor .mn-flat { position: absolute; left: 0; top: 0; width: 2200px; height: 1236px; }
.u-dash-city-c-monitor .mn-bgsvg, .u-dash-city-c-monitor .mn-mapsvg { left: 0; top: 0; width: 2200px; height: 1236px; }
.u-dash-city-c-monitor .mn-globe { pointer-events: none; }


.u-dash-city-c-monitor .mn-flat .cz-bgsvg, .u-dash-city-c-monitor .mn-flat .cz-mapsvg { visibility: hidden; }
.u-dash-city-c-monitor .inc.u-dash-city-c-flat { position: absolute; left: 0; top: 0; background: transparent; }


.u-dash-city-c-monitor .mn-s2 { width: 700px; height: 1236px; transform-origin: 0 0; filter: blur(4.8px) brightness(.78) contrast(.88); opacity: .9; }
.u-dash-city-c-monitor .mn-s2in { position: absolute; left: 0; top: 0; width: 700px; height: 1236px; }


.u-dash-city-c-monitor .cz-bar::before { opacity: .55; }
.u-dash-city-c-monitor div.cz-eco { background: linear-gradient(90deg, rgba(10,54,58,.5), rgba(8,36,40,.3)); box-shadow: inset 0 0 0 1px rgba(120,220,215,.06); }
.u-dash-city-c-monitor .cz-hdr path[fill="url(#czh-tl)"] { opacity: .8; }
.u-dash-city-c-monitor .cz-hdr #czh-tl stop:nth-child(2) { stop-opacity: .5; }
.u-dash-city-c-monitor .cz-hdr #czh-tl stop:nth-child(3) { stop-opacity: .2; }
.u-dash-city-c-monitor .cz-hdr path[fill="url(#czh-p)"] { opacity: .8; }
.u-dash-city-c-monitor .cz-a.cz-ebar i { background: linear-gradient(90deg, rgba(30,146,150,.82), #1cd6d8 40%, #12e8f2); }


.u-dash-city-c-monitor .cz-eco .m span.y { left: 87px; }


.u-dash-city-c-monitor .mn-vig { width: 2200px; height: 1514px; pointer-events: none;
  background: radial-gradient(ellipse 78% 72% at 44% 50%, rgba(2,6,10,0) 52%, rgba(2,6,10,.5) 100%); }
.u-dash-city-c-monitor .mn-glare { left: 0; top: 0; width: 2200px; height: 1514px; pointer-events: none;
  background: linear-gradient(112deg, rgba(0,0,0,0) 50%, rgba(190,240,240,.05) 54%, rgba(190,240,240,.02) 62%, rgba(0,0,0,0) 66%),
    linear-gradient(100deg, rgba(120,200,210,.06) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,.28) 100%); }


.u-ops-poster-trusted { overflow: hidden; background: #3ba9fc; font-family: var(--ui-font); }
.u-ops-poster-trusted > * { position: absolute; }


.u-ops-poster-trusted .frame {
  left: 0; top: 7px; width: 840px; height: 6283px; border-radius: 34px 34px 0 0;
  background: linear-gradient(180deg, #fbfdff 0, #eff9fd 1000px, #deeafe 2000px, #cbd7ff 3000px, #b5c2fc 4000px, #a2b3fb 5000px, #7e9bfe 5400px, #4973fc 5800px, #2e60fa 6000px, #013dff 6290px);
}
.u-ops-poster-trusted .panel {
  left: 22px; top: 9px; width: 796px; height: 6281px; border-radius: 26px 26px 0 0;
  background:
    radial-gradient(280px 560px at 800px 2400px, rgba(58, 198, 255, 0.85), rgba(58, 198, 255, 0)),
    radial-gradient(460px 110px at 430px 735px, rgba(236, 246, 255, 0.85), rgba(236, 246, 255, 0)),
    linear-gradient(180deg, #cfe0ff 0, #d9eafd 440px, #a8d5fc 700px, #7ccbfd 900px, #82cefc 1450px, #bde2fb 1900px, #c8ebff 2200px, #c3e8fa 2700px, #a2c6fe 3000px, #b0d3ff 3300px, #a3d8ff 3900px, #a8defe 4400px, #bfe8fe 5000px, #b4d6fd 5300px, #7db0ff 5500px, #4582fe 5800px, #2f71fd 6000px, #0a46f5 6290px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 14px 0 28px rgba(255, 255, 255, 0.2), inset -14px 0 28px rgba(255, 255, 255, 0.16);
}
.u-ops-poster-trusted .head { left: 22px; top: 9px; clip-path: inset(0 round 26px 26px 0 0); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, #000 0, #000 78%, rgba(0,0,0,0) 100%); }


.u-ops-poster-trusted .logo { left: 520px; top: 42px; display: flex; align-items: center; gap: 12px; color: #1c50a6; white-space: nowrap; }
.u-ops-poster-trusted .lg-mark { width: 46px; height: 34px; background: linear-gradient(140deg, #3b9bff, #0a47d6); clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 52%, 50% 100%, 0 52%); position: relative; }
.u-ops-poster-trusted .lg-mark::after { content: ""; position: absolute; left: 22%; right: 22%; top: 30%; bottom: 24%; background: linear-gradient(180deg, #bfe6ff, #fff); clip-path: polygon(0 0, 50% 28%, 100% 0, 100% 40%, 50% 100%, 0 40%); }
.u-ops-poster-trusted .lg-sep { width: 2px; height: 40px; background: rgba(160, 80, 90, 0.55); }
.u-ops-poster-trusted .logo b { font: italic 900 30px/1 var(--op-en); letter-spacing: -1px; color: #0a58dc; }
.u-ops-poster-trusted .logo em { font-style: normal; font-size: 24px; color: #1c50a6; }
.u-ops-poster-trusted .lg-t { font-size: 21px; font-weight: 500; letter-spacing: 1px; color: #1c4f9e; }


.u-ops-poster-trusted .pill {
  left: 45px; top: 132px; width: 398px; height: 73px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(100deg, #1f7bf6 0%, #1b93fb 55%, #16b8ff 100%);
  border: 3px solid #0c3cc4; border-bottom-width: 4px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -10px 16px rgba(0, 40, 200, 0.18), 0 4px 10px rgba(10, 60, 200, 0.25);
}
.u-ops-poster-trusted .pill span { font-size: 29px; font-weight: 600; letter-spacing: 3px; color: #fff; text-shadow: 0 1px 2px rgba(0, 50, 190, 0.45); }
.u-ops-poster-trusted .ttl { left: 0; top: 230px; }


.u-ops-poster-trusted .bub { left: 36px; top: 692px; filter: drop-shadow(0 6px 10px rgba(40, 110, 220, 0.22)); }
.u-ops-poster-trusted .quote {
  left: 52px; top: 768px; width: 736px; height: 467px; border-radius: 36px;
  background: linear-gradient(180deg, rgba(112, 212, 250, 0.92) 0, rgba(138, 220, 252, 0.88) 150px, rgba(188, 226, 253, 0.92) 330px, rgba(222, 232, 252, 0.96) 100%);
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.55), 0 8px 22px rgba(40, 100, 220, 0.14);
}
.u-ops-poster-trusted .tail { left: 606px; top: 1232px; filter: drop-shadow(0 3px 4px rgba(60, 100, 200, 0.2)); }
.u-ops-poster-trusted .qt { left: 85px; top: 822px; width: 662px; margin: 0; font-size: 30px; font-weight: 600; letter-spacing: 1.6px; line-height: 52px; text-indent: 60px; color: #0b2347; text-align: justify; }


.u-ops-poster-trusted .sec { left: 0; width: 840px; height: 90px; }
.u-ops-poster-trusted .sec > * { position: absolute; }
.u-ops-poster-trusted .sb { left: 22px; top: 6px; width: 340px; height: 68px; background: linear-gradient(90deg, rgba(20, 110, 235, 0.38), rgba(20, 110, 235, 0)); }
.u-ops-poster-trusted .sgh { top: 0; }
.u-ops-poster-trusted .sgh text { font-family: var(--op-en); font-weight: 900; font-size: 50px; fill: rgba(92, 120, 196, 0.36); }
.u-ops-poster-trusted .sn {
  left: 56px; top: -9px; font: italic 900 92px/1 var(--op-en); transform: scaleX(0.8); transform-origin: 0 0; letter-spacing: -2px; padding-right: 10px;
  background: linear-gradient(180deg, #1c80ff, #0a50e8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.u-ops-poster-trusted .st { left: 177px; top: 23px; font-size: 46px; line-height: 1.2; font-weight: 800; color: #0a2160; letter-spacing: 0; -webkit-text-stroke: 1px #0a2160; white-space: nowrap; }
.u-ops-poster-trusted .sl { left: 378px; top: 72px; width: 368px; height: 1.5px; background: linear-gradient(90deg, #16318a, #3f5bb8); }
.u-ops-poster-trusted .so { left: 762px; top: 44px; width: 27px; height: 27px; border-radius: 50%; border: 2px solid #7782bd; background: radial-gradient(circle at 35% 30%, #ffffff, #dde4f8); box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }


.u-ops-poster-trusted .card {
  left: 52px; width: 736px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0, rgba(240, 247, 255, 0.74) 60%, rgba(228, 240, 255, 0.7) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.5), 0 6px 20px rgba(30, 80, 200, 0.1);
}
.u-ops-poster-trusted .card.intro { top: 1550px; height: 635px; }
.u-ops-poster-trusted .body { left: 85px; width: 675px; margin: 0; font-size: 26px; font-weight: 600; letter-spacing: 2px; line-height: 52.5px; color: #0e2244; text-align: justify; }
.u-ops-poster-trusted .body b { font-weight: 800; color: #04173d; -webkit-text-stroke: 0.5px #04173d; }
.u-ops-poster-trusted .body b.hl { background: linear-gradient(180deg, transparent 66%, rgba(70, 150, 255, 0.4) 66%, rgba(70, 150, 255, 0.15) 100%); }
.u-ops-poster-trusted .intro-tx { top: 1577px; }
.u-ops-poster-trusted .ring { left: 500px; top: 1450px; clip-path: inset(0 12px 0 0); }


.u-ops-poster-trusted .hl-card { border-radius: 24px; }
.u-ops-poster-trusted .bar {
  left: 108px; width: 680px; height: 76px; border-radius: 0 20px 20px 0;
  background: linear-gradient(90deg, #0b52e8 0, #1666f2 120px, #3f8cf7 330px, rgba(110, 175, 255, 0.45) 520px, rgba(160, 205, 255, 0) 100%);
}
.u-ops-poster-trusted .bar span { position: absolute; left: 64px; top: 0; line-height: 76px; font-size: 34px; font-weight: 700; -webkit-text-stroke: 0.6px #fff; letter-spacing: 0.5px; color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 50, 190, 0.35); }
.u-ops-poster-trusted .bdg {
  left: 52px; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #ffffff 0, #eef3fd 38%, #c7d6f5 78%, #a9bdea 100%);
  border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: inset 0 -6px 12px rgba(120, 150, 230, 0.35), 0 6px 14px rgba(20, 80, 210, 0.28);
}


.u-ops-poster-trusted .sub3 { background: linear-gradient(180deg, rgba(36, 96, 250, 0.7), rgba(36, 96, 250, 0.25)); border-radius: 22px 22px 0 0; left: 52px; top: 6068px; width: 736px; height: 64px; display: flex; align-items: center; gap: 22px; padding-left: 190px; }
.u-ops-poster-trusted .sub3 b { font-size: 35px; font-weight: 700; color: rgba(255, 255, 255, 0.5); letter-spacing: 1px; white-space: nowrap; }
.u-ops-poster-trusted .sub3 svg { position: absolute; left: 192px; top: 14px; width: 110px; height: 36px; }
.u-ops-poster-trusted .sub3 b { margin-left: 140px; }
.u-ops-poster-trusted .card.c3 { top: 6135px; height: 135px; overflow: hidden; border-radius: 6px 6px 0 0; width: 722px; }
.u-ops-poster-trusted .c3-tx { position: absolute; left: 33px; top: 26px; width: 650px; }
.u-ops-poster-trusted .dusk { left: 0; top: 5560px; width: 840px; height: 730px; background: linear-gradient(180deg, rgba(20, 66, 250, 0) 0, rgba(20, 66, 250, 0.3) 200px, rgba(18, 64, 250, 0.52) 380px, rgba(16, 62, 252, 0.68) 560px, rgba(14, 60, 252, 0.78) 100%); pointer-events: none; }
.u-ops-poster-trusted .s3 .sn { background: linear-gradient(180deg, #0f55ea, #0733bb); -webkit-background-clip: text; background-clip: text; }
.u-ops-poster-trusted .s3 .st { color: #091c58; -webkit-text-stroke-color: #091c58; }


.u-ops-poster-hide { overflow: hidden; background: #309efa; font-family: var(--ui-font); }
.u-ops-poster-hide > * { position: absolute; }


.u-ops-poster-hide .frame {
  left: 0; top: 7px; width: 840px; height: 5293px; border-radius: 34px 34px 0 0;
  background: linear-gradient(180deg, #fbfefd 0, #f5f8fe 500px, #eaf4fe 1000px, #e4eafc 1500px, #d5e4ff 2000px, #cbdafc 2500px, #bccffc 3000px, #b3c3fe 3500px, #a6b8fe 4000px, #9caefc 4500px, #87a2fc 5000px, #6988fd 5300px);
}
.u-ops-poster-hide .panel { left: 22px; top: 9px; width: 796px; height: 5291px; border-radius: 26px 26px 0 0; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.u-ops-poster-hide .panel > i { position: absolute; inset: 0; }
.u-ops-poster-hide .panel .pl {
  background: linear-gradient(180deg, #0f6cfc 790px, #0447fe 890px, #0449f9 990px, #0273f6 1090px, #049ff5 1190px, #047be7 1390px, #0468ed 1490px, #0363fa 1690px, #0365ff 1990px, #1073f9 2290px, #0b5efa 2390px, #0449ff 2490px, #0267f9 2690px, #0583f8 2790px, #047ff4 2990px, #056af0 3090px, #045aed 3290px, #0054ed 3490px, #0354ef 3590px, #025df4 3990px, #0574fb 4290px, #0676ff 4440px, #2f5ff6 5290px);
}
.u-ops-poster-hide .panel .pr {
  background: linear-gradient(180deg, #1fc4fd 790px, #1ac4fd 890px, #0fb0fc 1090px, #0eb0fb 1290px, #07bbfe 1490px, #03c8fc 1590px, #08c5fd 1690px, #15aefa 1790px, #2f89fd 1890px, #3866fc 1990px, #295efe 2090px, #0f5ffd 2190px, #0b72f8 2290px, #1985fb 2390px, #2598fc 2490px, #1889fd 2790px, #0d82fb 2990px, #0386fe 3290px, #0a76f7 3490px, #1865fe 3690px, #0762f8 3990px, #056ffe 4290px, #0579fb 4490px, #2f5ff6 5290px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 100%);
}
.u-ops-poster-hide .panel .dots { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.1px, rgba(255, 255, 255, 0) 1.8px); background-size: 42px 34px; opacity: 0.38; }
.u-ops-poster-hide .head { left: 22px; top: 9px; clip-path: inset(0 round 26px 26px 0 0); }


.u-ops-poster-hide .logo { left: 292px; top: 38px; display: flex; align-items: center; gap: 11px; color: #1c50a6; white-space: nowrap; }
.u-ops-poster-hide .lg-mark { width: 44px; height: 32px; background: linear-gradient(140deg, #3b9bff, #0a47d6); clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 52%, 50% 100%, 0 52%); position: relative; }
.u-ops-poster-hide .lg-mark::after { content: ""; position: absolute; left: 22%; right: 22%; top: 30%; bottom: 24%; background: linear-gradient(180deg, #bfe6ff, #fff); clip-path: polygon(0 0, 50% 28%, 100% 0, 100% 40%, 50% 100%, 0 40%); }
.u-ops-poster-hide .lg-sep { width: 2px; height: 38px; background: rgba(160, 80, 90, 0.5); }
.u-ops-poster-hide .logo b { font: italic 900 29px/1 var(--op-en); letter-spacing: -1px; color: #0a58dc; }
.u-ops-poster-hide .logo em { font-style: normal; font-size: 22px; color: #1c50a6; }
.u-ops-poster-hide .lg-t { font-size: 20px; font-weight: 500; letter-spacing: 1px; color: #1c4f9e; }


.u-ops-poster-hide .sub { left: 140px; top: 131px; width: 560px; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 1.5px; color: #fff; -webkit-text-stroke: 0.5px #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 60, 170, 0.6), 0 0 3px rgba(0, 70, 190, 0.4); }
.u-ops-poster-hide .ttl { left: 0; top: 170px; }
.u-ops-poster-hide .slogan {
  left: 78px; top: 322px; width: 690px; height: 76px; border-radius: 38px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffffff 0, #f2faff 45%, #c9ebff 100%); border: 3px solid #b5e4ff;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), inset 0 -8px 14px rgba(70, 170, 245, 0.25), 0 4px 10px rgba(10, 80, 200, 0.22);
}
.u-ops-poster-hide .slogan span { font-size: 33px; font-weight: 600; letter-spacing: 2px; color: #1a2c70; white-space: nowrap; }


.u-ops-poster-hide .pol-top { left: 52px; top: 845px; width: 736px; height: 70px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #46cdfb 0, #1f8cf6 55%, #1458ea 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.u-ops-poster-hide .scr { position: absolute; top: 32px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #bfe1ff); box-shadow: 0 1px 3px rgba(0, 40, 160, 0.35); }
.u-ops-poster-hide .scr::after { content: ""; position: absolute; left: 4px; right: 4px; top: 10px; height: 2.4px; background: #3d78e8; transform: rotate(-45deg); border-radius: 2px; }
.u-ops-poster-hide .scr.l { left: 19px; } .u-ops-poster-hide .scr.r { left: 692px; }
.u-ops-poster-hide .pol-stack { left: 52px; top: 1436px; width: 736px; height: 42px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #dfe9fc, #f6f9ff); border-bottom: 3px solid #2f67e6; box-shadow: 0 -2px 0 #fff inset; }
.u-ops-poster-hide .pol-stack::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; background: #3a72e8; opacity: 0.85; }
.u-ops-poster-hide .pol-body { left: 52px; top: 882px; width: 736px; height: 566px; background: linear-gradient(180deg, #f8faff 0, #eaf1ff 55%, #d8e5ff 100%); border-radius: 0 0 50% 50% / 0 0 30px 30px; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.9); }
.u-ops-poster-hide .pol-tab {
  left: 252px; top: 842px; width: 336px; height: 83px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(180deg, #ffd35e 0, #fbb21f 55%, #f59a10 100%); border: 2px solid #ffe6a6;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 4px 8px rgba(200, 110, 0, 0.35);
}
.u-ops-poster-hide .pol-tab b { font-size: 44px; font-weight: 800; letter-spacing: 3px; color: #fff; -webkit-text-stroke: 1px #fff; text-shadow: 0 2px 0 #d9830a, 0 3px 4px rgba(150, 70, 0, 0.35); }
.u-ops-poster-hide .pol-tab .fl { position: absolute; left: 20px; top: 24px; opacity: 0.9; } .u-ops-poster-hide .pol-tab .fl.r { left: auto; right: 20px; }
.u-ops-poster-hide .body { text-spacing-trim: space-all; margin: 0; font-size: 26px; font-weight: 600; letter-spacing: 2px; line-height: 51.7px; color: #0b2a6a; text-align: justify; }
.u-ops-poster-hide .pol-tx { left: 85px; top: 940px; width: 675px; }


.u-ops-poster-hide .sec { left: 0; width: 840px; height: 96px; }
.u-ops-poster-hide .sec > * { position: absolute; }
.u-ops-poster-hide .sb { left: 22px; top: 2px; width: 796px; height: 92px; background: linear-gradient(90deg, rgba(120, 190, 255, 0.28), rgba(120, 190, 255, 0.14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.18); }
.u-ops-poster-hide .sgh { top: 20px; }
.u-ops-poster-hide .sgh text { font-family: var(--op-en); font-weight: 900; font-size: 46px; fill: rgba(255, 255, 255, 0.34); }
.u-ops-poster-hide .sn {
  left: 62px; top: 8px; font: normal 900 98px/1 var(--op-en); transform: scaleX(1.02); transform-origin: 0 0; letter-spacing: -2px; padding-right: 8px;
  background: linear-gradient(180deg, #ffffff 10%, #9fdcff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 60, 200, 0.28));
}
.u-ops-poster-hide .sv { left: 205px; top: 10px; width: 1.5px; height: 76px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); }
.u-ops-poster-hide .st { left: 235px; top: 14px; font-size: 60px; line-height: 1.2; font-weight: 800; letter-spacing: 0.5px; color: #fff; -webkit-text-stroke: 2.2px #fff; white-space: nowrap; text-shadow: 0 2px 4px rgba(0, 50, 190, 0.28); }
.u-ops-poster-hide .so { left: 757px; top: 46px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(160, 205, 255, 0.5)); }


.u-ops-poster-hide .bh { left: 52px; top: 1725px; width: 738px; height: 125px; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #ffffff, #f1f6ff); }
.u-ops-poster-hide .bh b, .u-ops-poster-hide .dm-t { font-size: 38px; font-weight: 800; letter-spacing: 5px; line-height: 1.2; white-space: nowrap; background: linear-gradient(90deg, #1b8cf6, #0b52e4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.3px #1272ee; }
.u-ops-poster-hide .bh b { position: absolute; left: 38px; top: 38px; }
.u-ops-poster-hide .bb { left: 52px; top: 1850px; width: 738px; height: 1880px; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.18) 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32); }

.u-ops-poster-hide .pc { left: 77px; width: 686px; border-radius: 16px; filter: drop-shadow(0 6px 10px rgba(0, 30, 160, 0.18)); }
.u-ops-poster-hide .ph { left: 77px; }
.u-ops-poster-hide .pt { left: 104px; font-size: 32px; font-weight: 800; letter-spacing: 3px; line-height: 38px; color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 40, 160, 0.35); -webkit-text-stroke: 1px #fff; }
.u-ops-poster-hide .pr1, .u-ops-poster-hide .sr1 { left: 77px; width: 686px; height: 65px; display: flex; align-items: center; padding-left: 27px; }
.u-ops-poster-hide .pr1 { background: linear-gradient(90deg, #fad2d8 0, #fde2e7 55%, #fff6f8 100%); }
.u-ops-poster-hide .sr1 { background: linear-gradient(90deg, #c7fbf5 0, #e0fefb 55%, #fafffe 100%); }
.u-ops-poster-hide .pr1 b, .u-ops-poster-hide .sr1 b { font-size: 24px; font-weight: 800; letter-spacing: 1.5px; -webkit-text-stroke: 0.6px currentColor; }
.u-ops-poster-hide .pr1 b { color: #a22b3b; } .u-ops-poster-hide .sr1 b { color: #10a46e; }
.u-ops-poster-hide .tg, .u-ops-poster-hide .tm { position: absolute; right: 18px; top: 8px; }
.u-ops-poster-hide .tg g { stroke: #fff; opacity: 0.9; }
.u-ops-poster-hide .tm { right: 20px; top: 9px; } .u-ops-poster-hide .tm g { fill: #a9dcc6; opacity: 0.95; }
.u-ops-poster-hide .pr2 { left: 77px; width: 686px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, #f5e9f3 0, #efe2ec 55%, #e1c7d9 100%); }
.u-ops-poster-hide .sr2 { left: 77px; width: 686px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04)), linear-gradient(90deg, #d8f8f6 0, #c4f1f7 60%, #a8ecf8 100%); }
.u-ops-poster-hide ul { margin: 0; padding: 0; list-style: none; }
.u-ops-poster-hide li { display: flex; align-items: flex-start; gap: 12px; font-size: 24px; font-weight: 600; letter-spacing: 1.2px; line-height: 37px; }
.u-ops-poster-hide .pl2 { left: 100px; width: 660px; display: grid; grid-template-columns: 290px 1fr; row-gap: 13px; color: #4c2937; -webkit-text-stroke: 0.25px #4c2937; }
.u-ops-poster-hide .pl1 { left: 100px; width: 660px; display: flex; flex-direction: column; color: #4c2937; -webkit-text-stroke: 0.25px #4c2937; }
.u-ops-poster-hide .pi { flex: none; margin-top: 8px; }
.u-ops-poster-hide .sl { left: 102px; width: 640px; display: flex; flex-direction: column; gap: 15px; color: #1f4256; -webkit-text-stroke: 0.25px #1f4256; }
.u-ops-poster-hide .ki { flex: none; margin-top: 6px; }


.u-ops-poster-hide .dm-card { left: 52px; top: 3760px; width: 738px; height: 540px; border-radius: 22px; background: linear-gradient(180deg, #fff 0, #f2f6ff 124px, rgba(255, 255, 255, 0.34) 125px, rgba(255, 255, 255, 0.2) 100%); box-shadow: 0 6px 16px rgba(0, 30, 160, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
.u-ops-poster-hide .dm-t { left: 90px; top: 3800px; }
.u-ops-poster-hide .dm-body { display: none; }
.u-ops-poster-hide .tile { border-radius: 10px; background: linear-gradient(180deg, #fbfdff 0, #f0f5ff 46%, #d9e5fd 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 2px 4px rgba(10, 50, 170, 0.12); display: flex; flex-direction: column; align-items: center; }
.u-ops-poster-hide .tile > svg { margin-top: 19px; }
.u-ops-poster-hide .tile > b { margin-top: 19px; font-size: 24px; font-weight: 800; letter-spacing: 3px; line-height: 30px; color: #172756; -webkit-text-stroke: 0.6px #172756; }
.u-ops-poster-hide .tile > span { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: 3px; line-height: 30px; color: #3a4466; }
.u-ops-poster-hide .tile.t2 { flex-direction: row; justify-content: flex-start; padding-left: 30px; gap: 22px; }
.u-ops-poster-hide .tile.t2 > svg { margin: 0; }
.u-ops-poster-hide .tile.t2 b { display: block; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: 3px; line-height: 30px; color: #172756; -webkit-text-stroke: 0.6px #172756; }
.u-ops-poster-hide .tile.t2 span { display: block; margin-top: 15px; font-size: 22px; font-weight: 600; letter-spacing: 3px; line-height: 30px; color: #3a4466; }


.u-ops-poster-hide .scn { left: 22px; top: 4560px; }
.u-ops-poster-hide .scn text { font-family: var(--ui-font); }
.u-ops-poster-hide .fl-t { font-size: 24px; font-weight: 800; letter-spacing: 2px; fill: #10286a; stroke: #10286a; stroke-width: 0.7px; }
.u-ops-poster-hide .fl-s { font-size: 21px; font-weight: 600; letter-spacing: 1.5px; fill: #5a6aa0; }
.u-ops-poster-hide .sc-t { font-size: 32px; font-weight: 800; letter-spacing: 3px; fill: #fff; stroke: #fff; stroke-width: 0.5px; }


.u-ops-poster-coach { overflow: hidden; font-family: var(--ui-font); background: linear-gradient(180deg, #3597fa 0, #2b7bf9 30%, #0a50fb 100%); }
.u-ops-poster-coach > * { position: absolute; }
.u-ops-poster-coach .clip > * { position: absolute; }
.u-ops-poster-coach .defs { left: 0; top: 0; width: 0; height: 0; overflow: hidden; }


.u-ops-poster-coach .frame {
  left: 0; top: 0; width: 840px; height: 2592px; border-radius: 26px;
  background: linear-gradient(180deg, #fcfdff 0, #eef4ff 20%, #d8e7fe 40%, #c2dafd 56%, #a8c5ff 80%, #8bb0fe 100%);
}
.u-ops-poster-coach .clip { left: 0; top: 0; width: 840px; height: 2628px; clip-path: inset(20px 22px 56px 22px round 28px); }


.u-ops-poster-coach .sky {
  left: 0; top: 0; width: 840px; height: 800px;
  background:
    radial-gradient(ellipse 420px 120px at 420px 600px, rgba(60, 220, 240, 0.5), rgba(60, 220, 240, 0) 100%),
    linear-gradient(180deg, #14adff 0, #18abff 14%, #1396ff 40%, #0f6dff 56%, #0846fc 70%, #0630f8 100%);
}

.u-ops-poster-coach .core {
  left: 100px; top: 0; width: 640px; height: 400px;
  background: linear-gradient(90deg, rgba(20, 174, 255, 0) 7.8%, rgba(46, 200, 248, 0.55) 14%, rgba(98, 229, 239, 0.92) 20.3%, #b6fff4 26.6%, #f9fedf 32.8%, #fdfdd2 39%, #fefef1 45.3%, #fffefa 51.6%, #ffffd8 57.8%, #fefeca 64%, #f8fffb 70.3%, #95fde1 76.6%, rgba(80, 227, 234, 0.95) 82.8%, rgba(30, 194, 248, 0.7) 89%, rgba(6, 168, 254, 0) 95.3%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 62%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
}

.u-ops-poster-coach .cyb {
  left: 540px; top: 150px; width: 190px; height: 190px;
  background: linear-gradient(90deg, rgba(93, 248, 246, 0) 0, rgba(93, 248, 246, 0.8) 38%, rgba(66, 236, 254, 0.7) 66%, rgba(42, 200, 251, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 70%, transparent 100%);
}
.u-ops-poster-coach .beams { left: 0; top: 0; }
.u-ops-poster-coach .logo { left: 279px; top: 50px; font-size: 18.5px; }

.u-ops-poster-coach .tabL, .u-ops-poster-coach .tabR {
  top: 162px; height: 84px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffe597 0, #ffd662 38%, #ffc434 100%);
  box-shadow: inset 0 2px 0 rgba(255, 250, 220, 0.9), inset 0 -5px 0 #e79a14, 0 3px 6px rgba(190, 120, 0, 0.3);
}
.u-ops-poster-coach .tabL { left: 215px; width: 240px; }
.u-ops-poster-coach .tabR { left: 467px; width: 165px; }
.u-ops-poster-coach .tabL span, .u-ops-poster-coach .tabR span { font-size: 38px; font-weight: 700; letter-spacing: 5px; color: #a8620a; padding-left: 5px; margin-top: -4px; }
.u-ops-poster-coach .tabM { left: 440px; top: 196px; width: 50px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #fff6d0, #ffd96a); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.8); }

.u-ops-poster-coach .ttl { left: 0; top: 0; overflow: visible; }

.u-ops-poster-coach .date {
  left: 210px; top: 586px; width: 426px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #4dd7f6 0, #08efdf 5%, #06d6e6 12%, #0aa6ec 24%, #057eee 42%, #0450f3 66%, #0236f5 86%, #0a35d0 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.6), 0 4px 10px rgba(0, 30, 150, 0.4);
}
.u-ops-poster-coach .date span { font-size: 27px; font-weight: 600; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 2px rgba(0, 20, 140, 0.5); margin-top: 3px; }

.u-ops-poster-coach .glass {
  left: 72px; top: 668px; width: 700px; height: 107px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #f9feff 0, #f2fbff 8%, #cfe5ff 36%, #a6d2ff 56%, #4fc4fb 80%, #1d98fd 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 6px 14px rgba(0, 40, 180, 0.35);
}
.u-ops-poster-coach .glass .gw { position: absolute; left: 0; top: 0; }
.u-ops-poster-coach .glass .gt {
  position: absolute; left: 0; right: 0; top: 14px; text-align: center; font-size: 65px; line-height: 80px; font-weight: 800; letter-spacing: 1px; padding-left: 0;
  color: #53edb2; background: linear-gradient(180deg, #8bf7cd 0, #43e2a3 55%, #25c88f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #34d8a0; filter: drop-shadow(2px 3px 0 rgba(8, 110, 120, 0.55));
}


.u-ops-poster-coach .ocean {
  left: 0; top: 775px; width: 840px; height: 925px;
  background: linear-gradient(180deg, #1535f7 0, #1d36f9 2%, #1c44fb 8%, #2646f9 18%, #2c5af3 34%, #2a6aee 52%, #2a76ea 70%, #2b7ae6 82%, #2383fe 100%);
}
.u-ops-poster-coach .sea { left: 0; top: 780px; }
.u-ops-poster-coach .ring {
  left: 20px; top: 836px; width: 232px; height: 212px; border-radius: 50%;
  background: conic-gradient(from 30deg at 50% 50%, #ff5a3c 0deg, #ff8a3a 40deg, #ffc23c 90deg, #ffe35a 140deg, #ffd23e 190deg, #ffae42 230deg, #f58a6a 270deg, #b86af0 310deg, #ff5a3c 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0, transparent 60%, #000 61%);
  mask: radial-gradient(closest-side, transparent 0, transparent 60%, #000 61%);
  filter: drop-shadow(0 4px 8px rgba(10, 20, 150, 0.35));
}


.u-ops-poster-coach .banner {
  left: 75px; top: 922px; width: 742px; height: 118px; border-radius: 59px 30px 30px 59px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.04) 22%, rgba(0, 20, 120, 0) 70%, rgba(0, 20, 120, 0.2) 100%),
    linear-gradient(90deg, #3d86f8 0, #0ce6fd 9%, #0af0fd 28%, #05abf9 46%, #0b79ff 57%, #2349fd 70%, #7a0cfe 87%, #8a16f4 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1.5px rgba(210, 235, 255, 0.5), 0 6px 14px rgba(10, 20, 150, 0.3);
}
.u-ops-poster-coach .acts { left: 75px; top: 922px; width: 742px; height: 118px; overflow: hidden; border-radius: 59px 30px 30px 59px; }
.u-ops-poster-coach .bt {
  left: 113px; top: 938px; margin: 0; font-size: 55px; line-height: 86px; font-weight: 800; letter-spacing: 11px; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0, #fff2dc 45%, #ffcf9a 78%, #ffb972 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(255, 170, 80, 0.55)) drop-shadow(1px 2px 1px rgba(150, 60, 20, 0.35));
}


.u-ops-poster-coach .lower {
  left: 0; top: 1040px; width: 840px; height: 1532px;
  background:
    radial-gradient(ellipse 330px 150px at 410px 1440px, rgba(8, 84, 255, 0.85), rgba(8, 84, 255, 0) 100%),
    linear-gradient(180deg, #2a60e8 0, #3277d6 12%, #2086f6 32%, #1f98fd 48%, #21a4fe 64%, #25aeff 86%, #28aaff 100%);
}
.u-ops-poster-coach .body {
  left: 22px; top: 1040px; width: 760px; height: 620px;
  background:
    radial-gradient(ellipse 330px 560px at 100% 18%, rgba(150, 100, 235, 0.85) 0, rgba(140, 105, 238, 0.5) 50%, rgba(130, 110, 240, 0) 100%),
    linear-gradient(180deg, #2f68f8 0, #2476fb 12%, #1486fb 24%, #0a92fb 40%, #049ffd 62%, #0299fb 100%);
  box-shadow: inset 0 14px 18px -10px rgba(110, 90, 240, 0.7);
}
.u-ops-poster-coach .body2 {
  left: 22px; top: 2090px; width: 760px; height: 222px; border-radius: 0 0 32px 76px;
  background: linear-gradient(90deg, #4cb4fd 0, #2b99fd 10%, #1a8cfd 24%, #0266fc 50%, #1179fc 76%, #0f94fe 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.u-ops-poster-coach .body2::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 70px; border-radius: 0 0 32px 76px; border: 3px solid rgba(255, 255, 255, 0.92); border-top: 0; border-right: 0;
  -webkit-mask: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.8) 30%, transparent 60%); mask: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.8) 30%, transparent 60%);
}

.u-ops-poster-coach .p { left: 55px; width: 693px; color: #fff; font-size: 30px; font-weight: 600; text-shadow: 0 1px 2px rgba(10, 30, 150, 0.35); }
.u-ops-poster-coach .p1 { top: 1073px; }
.u-ops-poster-coach .p2 { top: 1343px; }
.u-ops-poster-coach .ln { height: 53.8px; line-height: 53.8px; white-space: nowrap; text-align: justify; text-align-last: justify; text-justify: inter-character; }
.u-ops-poster-coach .ln.e { text-align-last: left; letter-spacing: 2px; }
.u-ops-poster-coach .ln.ind { padding-left: 58px; }

.u-ops-poster-coach .clist {
  left: 30px; top: 1640px; width: 752px; height: 470px; border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(70, 30, 255, 0.5) 0, rgba(70, 30, 255, 0.2) 18%, rgba(70, 30, 255, 0) 42%),
    linear-gradient(100deg, #05e0ff 0, #0ed2fe 6%, #12bdfd 12%, #0a96fd 40%, #0a74fd 62%, #1246fd 88%, #2a34fd 100%);
  box-shadow: inset 2px 0 0 rgba(120, 240, 255, 0.5), inset 0 1px 0 rgba(160, 200, 255, 0.5);
}
.u-ops-poster-coach .lead { left: 57px; top: 1650px; width: 690px; font-size: 30px; font-weight: 600; color: #fff; }
.u-ops-poster-coach .lead .ln { height: 50px; line-height: 50px; }
.u-ops-poster-coach .lead .y { font-weight: 600; background: linear-gradient(90deg, #ffe38a, #ffd36a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.u-ops-poster-coach .lead .ln.e { letter-spacing: 3px; }

.u-ops-poster-coach .chk { margin: 0; padding: 0; list-style: none; left: 0; top: 0; width: 840px; height: 0; }
.u-ops-poster-coach .chk li { position: absolute; left: 55px; height: 32px; color: #fff; font-size: 24px; font-weight: 500; line-height: 32px; }
.u-ops-poster-coach .chk .ck { position: absolute; left: 0; top: 0; filter: drop-shadow(0 1px 2px rgba(0, 40, 160, 0.4)); }
.u-ops-poster-coach .chk li > span { position: absolute; left: 38px; top: 0; white-space: nowrap; text-align: justify; text-align-last: justify; text-justify: inter-character; }
.u-ops-poster-coach .chk li > span.e { text-align-last: left; letter-spacing: 1.4px; width: auto !important; }

.u-ops-poster-coach .join { left: 55px; top: 2129px; width: 693px; color: #fff; font-size: 29px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 40, 160, 0.4); }
.u-ops-poster-coach .join .ln.e { letter-spacing: 1.8px; }


.u-ops-poster-coach .rib {
  left: 108px; top: 2371px; width: 338px; height: 72px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.34));
  clip-path: polygon(0 0, calc(100% - 22px) 0, calc(100% - 22px) 20px, 100% 36px, calc(100% - 22px) 52px, calc(100% - 22px) 100%, 0 100%);
}
.u-ops-poster-coach .scan { left: 126px; top: 2387px; height: 38px; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 26px; font-weight: 500; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 50, 170, 0.35); }
.u-ops-poster-coach .scan .sc-ic { flex: none; filter: drop-shadow(0 1px 2px rgba(0, 50, 170, 0.3)); }
.u-ops-poster-coach .rline { left: 108px; top: 2445px; width: 326px; height: 2px; background: linear-gradient(90deg, #52dcff, rgba(160, 225, 255, 0.9) 60%, rgba(160, 225, 255, 0.2)); }
.u-ops-poster-coach .ask { left: 128px; top: 2462px; font-size: 17px; font-weight: 500; letter-spacing: 1.5px; color: #fff; white-space: nowrap; }
.u-ops-poster-coach .qrc {
  left: 477px; top: 2342px; width: 215px; height: 215px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(100, 175, 255, 0.55), 0 8px 18px rgba(0, 60, 190, 0.25);
}
.u-ops-poster-coach .qrc .qrs { display: block; }


.u-ops-poster-find { overflow: hidden; font-family: var(--ui-font); background: linear-gradient(180deg, #1b49c4 0, #0950f5 14px, #0a4cf6 100%); }
.u-ops-poster-find > * { position: absolute; }
.u-ops-poster-find .clip > * { position: absolute; }
.u-ops-poster-find .defs { left: 0; top: 0; width: 0; height: 0; overflow: hidden; }


.u-ops-poster-find .frame {
  left: 0; top: 2px; width: 840px; height: 3730px; border-radius: 28px;
  background: linear-gradient(180deg, #fcfffa 0, #f5f8ff 8%, #edeeff 18%, #e0e8ff 28%, #d4e1fe 38%, #c8d6fc 50%, #bccefc 60%, #b2c5fc 68%, #a6b8fd 80%, #a6b8fd 100%);
}
.u-ops-poster-find .clip { left: 0; top: 0; width: 840px; height: 3720px; clip-path: inset(22px 22px 0 22px round 8px 8px 0 0); }


.u-ops-poster-find .bg {
  left: 22px; top: 22px; width: 796px; height: 3698px;
  background: linear-gradient(137deg, #1a7aff 0, #1a7aff 11.6%, #015bfe 14.5%, #0153fe 19.3%, #036bfb 23.8%, #0189fd 28.3%, #02a8ff 32.8%, #01c2fe 37.3%, #02d0fd 41.8%, #01dafe 44.1%, #02c8ff 47.5%, #009bfd 50.8%, #0173fe 53.1%, #0259fd 55.3%, #024bfd 57.6%, #0147ff 62.1%, #0147ff 100%);
}
.u-ops-poster-find .dots {
  left: 22px; top: 560px; width: 796px; height: 3160px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.3px, rgba(255, 255, 255, 0) 2px);
  background-size: 28px 28px; background-position: 6px 8px;
}


.u-ops-poster-find .sky {
  left: 22px; top: 22px; width: 796px; height: 540px;
  background:
    linear-gradient(180deg, rgba(10, 112, 252, 0) 0, rgba(10, 112, 252, 0) 86%, rgba(10, 112, 252, 0.95) 100%),
    radial-gradient(ellipse 440px 330px at 398px 280px, #08fcff 0, #05eefd 38%, #02d2ff 66%, #03a8fb 100%);
}
.u-ops-poster-find .art { left: 0; top: 0; }
.u-ops-poster-find .logo { left: 289px; top: 46px; font-size: 17.5px; }
.u-ops-poster-find .handle { left: 692px; top: 252px; }
.u-ops-poster-find .ttl { left: 0; top: 0; overflow: visible; }

.u-ops-poster-find .pill {
  left: 226px; top: 459px; width: 395px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fffaf0 0, #fff0cd 40%, #ffdc94 78%, #f8c660 100%);
  border: 3px solid #fff; box-shadow: inset 0 -3px 0 #f1b84e, 0 5px 10px rgba(0, 70, 170, 0.28);
}
.u-ops-poster-find .pill span { font-size: 31px; font-weight: 700; letter-spacing: 1px; color: #7a2a10; white-space: nowrap; }
.u-ops-poster-find .pill b { font-weight: 700; letter-spacing: 0; margin-right: 2px; }


.u-ops-poster-find .roll {
  left: 38px; top: 549px; width: 768px; height: 48px; border-radius: 14px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0) 1.8px) 0 0 / 5px 5px,
    linear-gradient(180deg, #92f1ff 0, #40c4fd 26%, #20a0f8 58%, #0b63e8 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(0, 40, 170, 0.4), 0 3px 6px rgba(0, 50, 170, 0.3);
  border: 2px solid #0a56dc;
}
.u-ops-poster-find .pin {
  top: 546px; width: 18px; height: 56px; border-radius: 9px; background: linear-gradient(90deg, #dcecfb, #fff 50%, #d6e8fb);
  box-shadow: 0 2px 3px rgba(0, 50, 160, 0.3); z-index: 2;
}
.u-ops-poster-find .pin::after {
  content: ""; position: absolute; left: -2px; top: 42px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0, #fff 40%, #dcecfb 100%); box-shadow: 0 2px 3px rgba(0, 50, 160, 0.3);
}
.u-ops-poster-find .card1 {
  left: 70px; top: 596px; width: 713px; height: 388px; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #cfe9fb 0, #e5f2fd 22%, #ffffff 52%, #f2fdff 82%, #e3fbff 100%);
  border: 5px solid #19d6ff; border-top: 0;
  box-shadow: inset 0 0 0 3px #fff, inset 0 -6px 12px rgba(25, 214, 255, 0.28), 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.u-ops-poster-find .lab {
  left: 72px; width: 178px; height: 70px;
  background: linear-gradient(100deg, #0a9cf6 0, #11b6fb 40%, #19c6ff 100%);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.u-ops-poster-find .lab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 45%, rgba(0, 70, 220, 0.25) 100%); }
.u-ops-poster-find .lab span { position: absolute; left: 26px; top: 0; line-height: 70px; font-size: 26px; font-weight: 600; letter-spacing: 3px; color: #fff; -webkit-text-stroke: 0.5px #fff; text-shadow: 0 1px 2px rgba(0, 80, 200, 0.4); white-space: nowrap; }
.u-ops-poster-find .val { left: 263px; height: 40px; line-height: 40px; font-size: 34px; font-weight: 800; letter-spacing: 2px; color: #0b2766; white-space: nowrap; -webkit-text-stroke: 1.1px #0b2766; }
.u-ops-poster-find .val b { font-weight: 800; letter-spacing: 1px; -webkit-text-stroke: 1px #0b2766; }


.u-ops-poster-find .slab {
  left: 70px; width: 702px;
  background:
    linear-gradient(90deg, #fff 0, #fff 678px, #fb6f0f 678px, #fb6f0f 100%) top left / 100% calc(100% - 23px) no-repeat,
    linear-gradient(90deg, #efc418 0, #efc418 678px, #1a5bff 678px, #1a5bff 100%) bottom left / 100% 23px no-repeat;
  box-shadow: inset 2px 2px 0 #0b2a6b;
}
.u-ops-poster-find .shd { left: 78px; width: 712px; background: #072e6f; }
.u-ops-poster-find .slab::after { content: ""; position: absolute; left: 0; bottom: 21px; width: 678px; height: 2px; background: #0b2a6b; }
.u-ops-poster-find .slab2 { background:
    linear-gradient(90deg, #fff 0, #fff 678px, #fb6f0f 678px, #fb6f0f 100%) top left / 100% 100% no-repeat; }
.u-ops-poster-find .slab2::after { display: none; }
.u-ops-poster-find .hd {
  left: 55px; width: 437px; height: 112px; background: linear-gradient(180deg, #ffe05a 0, #ffd02e 42%, #f3b30a 100%);
  border: 2px solid #0b2a6b; box-shadow: 3px 4px 0 #0b2a6b, inset 0 2px 0 rgba(255, 255, 255, 0.55);
}
.u-ops-poster-find .hd span { position: absolute; left: 180px; top: 0; line-height: 108px; font-size: 54px; font-weight: 800; letter-spacing: 4px; color: #3b393d; -webkit-text-stroke: 1.2px #3b393d; text-shadow: 0 2px 0 rgba(255, 238, 150, 0.7); white-space: nowrap; }
.u-ops-poster-find .eyes { left: 78px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 30, 120, 0.3)); }

.u-ops-poster-find .ibox { left: 100px; width: 615px; border-radius: 14px; background: #e8f9fd; }
.u-ops-poster-find .ibar { left: 190px; width: 525px; height: 86px; border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #8fe6fb 0, #b4eefc 22%, #d4f3fd 62%, #e3f7fd 100%); }
.u-ops-poster-find .itab {
  left: 70px; width: 150px; height: 103px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(0, 40, 200, 0.2) 100%), linear-gradient(100deg, #00b0fb 0, #01c0fc 30%, #02e6ff 72%, #3cf4ff 100%);
  clip-path: polygon(0 0, 130px 0, 150px 52%, 130px 100%, 0 100%);
}
.u-ops-poster-find .itab i { position: absolute; left: 26px; top: 20px; font: italic 900 54px/62px var(--op-en); letter-spacing: -2px; color: #fff; text-shadow: 0 2px 3px rgba(0, 70, 190, 0.45); }
.u-ops-poster-find .ittl { left: 247px; height: 40px; line-height: 40px; font-size: 31px; font-weight: 800; letter-spacing: 3.5px; color: #12306e; white-space: nowrap; -webkit-text-stroke: 0.9px #12306e; }
.u-ops-poster-find .ittl .num { font-weight: 800; letter-spacing: 0; margin-right: 3px; }
.u-ops-poster-find .itx { left: 126px; width: 580px; font-size: 29px; font-weight: 500; color: #263a54; }
.u-ops-poster-find .itx .l { height: 47.5px; line-height: 47.5px; white-space: nowrap; letter-spacing: 0.6px; }
.u-ops-poster-find .itx .l.j { letter-spacing: 0; text-align: justify; text-align-last: justify; text-justify: inter-character; }
.u-ops-poster-find .itx .num { letter-spacing: 0; font-weight: 500; }
.u-ops-poster-find .who { height: 34px; line-height: 34px; font-size: 26px; color: #4a5b74; letter-spacing: 1px; white-space: nowrap; }
.u-ops-poster-find .chip { top: 2447px; width: 190px; height: 66px; border-radius: 10px; background: linear-gradient(90deg, #c6eafa 0, #d9f1fb 40%, #e8f7fc 100%); overflow: hidden; }
.u-ops-poster-find .chip i { position: absolute; left: 0; top: 0; width: 64px; height: 66px; background: linear-gradient(135deg, #f4fbff, #d9effb); display: flex; align-items: center; justify-content: center; border-radius: 10px 0 0 10px; box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.7); }
.u-ops-poster-find .chip b { position: absolute; left: 84px; top: 0; line-height: 66px; font-size: 30px; font-weight: 800; letter-spacing: 1px; color: #12306e; white-space: nowrap; -webkit-text-stroke: 0.8px #12306e; }


.u-ops-poster-find .note {
  left: 73px; top: 2840px; width: 675px; height: 54px;
  background: linear-gradient(90deg, #f1e6b6 0, #f4ebc4 20%, #f8f1d8 100%);
}
.u-ops-poster-find .note .ni { position: absolute; left: 0; top: 0; width: 78px; height: 54px; background: #ecdca4; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.u-ops-poster-find .note .ni b { position: absolute; left: 18px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #f08a24; color: #f08a24; font-size: 22px; line-height: 28px; text-align: center; font-weight: 800; }
.u-ops-poster-find .note span { position: absolute; left: 104px; top: 0; line-height: 54px; font-size: 25px; color: #8a6a2a; letter-spacing: 2px; white-space: nowrap; }

.u-ops-poster-find .pb-ring { left: 448px; top: 2958px; filter: drop-shadow(0 6px 8px rgba(120, 90, 30, 0.2)); }
.u-ops-poster-find .pbank { left: 526px; top: 2955px; width: 114px; height: 215px; border-radius: 8px; background: linear-gradient(90deg, #e6eeff 0, #f6f9ff 40%, #dde8fc 100%); border: 2px solid #bfd0f2; box-shadow: 0 8px 14px rgba(40, 70, 160, 0.22); }
.u-ops-poster-find .pbank i { position: absolute; top: 0; height: 5px; background: #233f9c; border-radius: 0 0 2px 2px; }
.u-ops-poster-find .pbank .p1 { left: 10px; width: 14px; } .u-ops-poster-find .pbank .p2 { left: 32px; width: 20px; } .u-ops-poster-find .pbank .p3 { left: 62px; width: 14px; background: #6b86d6; } .u-ops-poster-find .pbank .p4 { left: 84px; width: 12px; background: #9fb4e8; }
.u-ops-poster-find .pbank .sheen { left: 14px; top: 22px; width: 22px; height: 170px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1)); border-radius: 11px; height: 170px; }
.u-ops-poster-find .pz { border-radius: 10px; background: rgba(255, 249, 232, 0.6); border: 2px solid #e6cf8a; border-top: 0; }
.u-ops-poster-find .pz1 { left: 102px; top: 2992px; width: 352px; height: 180px; }
.u-ops-poster-find .pz2 { left: 377px; top: 3302px; width: 338px; height: 178px; border-color: #bcd0ee; background: rgba(230, 240, 255, 0.6); }
.u-ops-poster-find .pz3 { left: 102px; top: 3640px; width: 352px; height: 60px; border-color: #e9c9a0; }

.u-ops-poster-find .rbn {
  height: 71px; background: linear-gradient(180deg, #f3df94 0, #e8cb62 60%, #dcb94a 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
}
.u-ops-poster-find .rbn span { position: absolute; left: 0; right: 0; top: 0; line-height: 71px; text-align: center; padding-left: 46px; font-size: 32px; font-weight: 800; letter-spacing: 5px; color: #6a4a12; }
.u-ops-poster-find .rbn2 { background: linear-gradient(180deg, #c9e6ff 0, #9ccdf8 60%, #78b6f0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%); }
.u-ops-poster-find .rbn2 span { padding-left: 0; padding-right: 40px; color: #1d467e; }
.u-ops-poster-find .rbn3 { background: linear-gradient(180deg, #f8cc9a 0, #ee9f62 60%, #e0884a 100%); }
.u-ops-poster-find .rbn3 span { font-size: 28px; padding-left: 30px; color: #6a3a14; }

.u-ops-poster-find .hex { width: 88px; height: 96px; clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); background: linear-gradient(180deg, #f9de72, #e3b438); }
.u-ops-poster-find .hex::before { content: ""; position: absolute; inset: 7px; clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); background: linear-gradient(180deg, #f4e4a2, #e8c85a); }
.u-ops-poster-find .hex b { position: absolute; left: 0; right: 0; top: 22px; text-align: center; font: 900 46px/50px var(--op-en); color: #b8321f; }
.u-ops-poster-find .hex2 { background: linear-gradient(180deg, #cfe4ff, #8bb6f2); }
.u-ops-poster-find .hex2::before { background: linear-gradient(180deg, #e2efff, #b3d0f8); }
.u-ops-poster-find .hex2 b { color: #2b5fc0; }
.u-ops-poster-find .hex3 { width: 70px; height: 76px; background: linear-gradient(180deg, #f8c696, #e08a50); }
.u-ops-poster-find .hex3::before { inset: 6px; background: linear-gradient(180deg, #fbdcbc, #f0a674); }
.u-ops-poster-find .hex3 b { font-size: 36px; top: 14px; color: #a8481c; }
.u-ops-poster-find .crown { filter: drop-shadow(0 1px 1px rgba(120, 40, 10, 0.25)); }
.u-ops-poster-find .rk { height: 34px; line-height: 34px; font-size: 25px; letter-spacing: 1px; color: #2f4a78; white-space: nowrap; }
.u-ops-poster-find .rk2 { height: 38px; line-height: 38px; padding: 0 8px; font-size: 27px; font-weight: 800; letter-spacing: 1px; color: #1e3a6e; background: rgba(206, 220, 248, 0.85); border-radius: 4px; white-space: nowrap; }
.u-ops-poster-find .rk2 .num { font-weight: 800; letter-spacing: 0; }
.u-ops-poster-find .mdisc { left: 92px; top: 3236px; width: 280px; height: 280px; }
.u-ops-poster-find .mouse { left: 100px; top: 3222px; filter: drop-shadow(0 8px 10px rgba(60, 90, 180, 0.25)); }


.u-ops-poster-find .fade { left: 0; top: 2500px; width: 840px; height: 1220px; pointer-events: none; background: linear-gradient(180deg, rgba(6, 69, 255, 0) 0, #0645ff 96.7%, #0645ff 100%); }


.u-ops-rollup-id { overflow: hidden; background: #d9e3eb; font-family: var(--ui-font); }
.u-ops-rollup-id > * { position: absolute; }
.u-ops-rollup-id .scene, .u-ops-rollup-id .hw { left: 0; top: 0; }
.u-ops-rollup-id .floorrf { left: 234px; top: 1306px; width: calc(1000px - 234px - 333px); height: 150px; background: linear-gradient(180deg, rgba(18, 72, 190, 0.14), rgba(18, 72, 190, 0)); filter: blur(7px); }


.u-ops-rollup-id .bn { left: 0; top: 0; width: 1000px; height: 1507px; clip-path: inset(257px 333px 271px 234px); }
.u-ops-rollup-id .bn > * { position: absolute; margin: 0; }
.u-ops-rollup-id .bn > .op-dots { inset: 0; }
.u-ops-rollup-id .bg { left: 234px; top: 257px; width: calc(1000px - 234px - 333px); height: 979px; }
.u-ops-rollup-id .sheen {
  left: 234px; top: 257px; width: calc(1000px - 234px - 333px); height: 979px; pointer-events: none;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 18%),
    linear-gradient(270deg, rgba(120, 200, 255, 0.2) 0, rgba(120, 200, 255, 0) 8%);
}


.u-ops-rollup-id .bn > .sh { text-align: center; font-size: 24px; line-height: 34px; font-weight: 800; letter-spacing: 3px; color: #fff; text-shadow: 0 1px 2px rgba(0, 30, 120, 0.5), 0 0 0.5px #fff; }


.u-ops-rollup-id .bg {
  background:
    linear-gradient(90deg, rgba(110, 175, 255, 0.34) 0, rgba(110, 175, 255, 0) 22px, rgba(0, 0, 0, 0) calc(100% - 34px), rgba(30, 150, 255, 0.28) 100%),
    radial-gradient(260px 120px at 38% 118px, rgba(88, 150, 232, 0.55), rgba(88, 150, 232, 0) 100%),
    linear-gradient(180deg, #0b5ab9 0, #0a58b8 70px, #0652b2 150px, #05409f 230px, #052d95 330px, #052d93 520px, #073a9f 640px, #0d4cb6 760px, #2166bc 930px, #1d5bb6 979px);
}
.u-ops-rollup-id .haze { left: 500px; top: 257px; width: 167px; height: 170px; background: radial-gradient(closest-side at 72% 42%, rgba(226, 240, 249, 0.95), rgba(168, 210, 246, 0.55) 58%, rgba(120, 180, 240, 0)); }
.u-ops-rollup-id .geo, .u-ops-rollup-id .ttl, .u-ops-rollup-id .rib { left: 0; }
.u-ops-rollup-id .geo { top: 0; }
.u-ops-rollup-id .ttl { top: 257px; }
.u-ops-rollup-id .rib { top: 255px; }
.u-ops-rollup-id .hero { left: 498px; top: 256px; }
.u-ops-rollup-id .logo { left: 245px; top: 274px; font-size: 7.6px; }
.u-ops-rollup-id .arch { left: 0; top: 780px; }
.u-ops-rollup-id .wm { left: 0; }

.u-ops-rollup-id .bn > .fc {
  position: absolute; border-radius: 14px; padding: 0;
  background: linear-gradient(180deg, #eaf4f9 0%, #cfe6f8 42%, #a6d1f6 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(90, 160, 255, 0.35), 0 6px 14px rgba(0, 28, 120, 0.3);
}
.u-ops-rollup-id .ft { font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: 2px; color: #1b4eb3; white-space: nowrap; text-shadow: 0 0 0.6px #1b4eb3; }
.u-ops-rollup-id .fd { font-size: 11px; line-height: 16.5px; font-weight: 500; letter-spacing: 0.8px; color: #1a3d8c; white-space: nowrap; }
.u-ops-rollup-id .ft.r, .u-ops-rollup-id .fd.r { text-align: right; }
.u-ops-rollup-id .ring { filter: drop-shadow(0 3px 5px rgba(0, 30, 120, 0.3)); }

.u-ops-rollup-id .at { left: 322px; top: 822px; width: 256px; height: 36px; line-height: 36px; text-align: center; font-size: 13.5px; font-weight: 800; letter-spacing: 1.4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 40, 140, 0.4); white-space: nowrap; }
.u-ops-rollup-id .al { left: 252px; width: 396px; height: 102px; filter: drop-shadow(0 3px 4px rgba(0, 40, 140, 0.28)); }
.u-ops-rollup-id .al .ah {
  display: block; height: 34px; line-height: 35px; text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; color: #fff; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #8cccff 0, #4a9cf8 38%, #1f6fe8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); text-shadow: 0 1px 1px rgba(0, 40, 150, 0.35);
}
.u-ops-rollup-id .al .ag { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 2px; box-sizing: border-box; height: 68px; padding: 3px; background: #f6f9fd; border-radius: 0 0 10px 10px; }
.u-ops-rollup-id .al .ag span { display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 10.5px; letter-spacing: 0.9px; color: #3a4558; font-weight: 500; white-space: nowrap; background: linear-gradient(180deg, #eef3f9, #dce6f1); }
.u-ops-rollup-id .al .ag span:nth-child(4n) { font-weight: 700; color: #2a3446; background: linear-gradient(180deg, #e4ecf6, #d3deec); }

@media (prefers-reduced-motion: no-preference) {
  .u-ops-rollup-id .sheen { animation: urid-sheen 7s ease-in-out infinite alternate; }
  @keyframes urid-sheen { from { opacity: 0.75; } to { opacity: 1; } }
}


.u-ops-rollup-security { overflow: hidden; background: #d9e3eb; font-family: var(--ui-font); }
.u-ops-rollup-security > * { position: absolute; }
.u-ops-rollup-security .scene, .u-ops-rollup-security .hw { left: 0; top: 0; }
.u-ops-rollup-security .floorrf { left: 278px; top: 1306px; width: calc(1000px - 278px - 290px); height: 150px; background: linear-gradient(180deg, rgba(18, 72, 190, 0.14), rgba(18, 72, 190, 0)); filter: blur(7px); }


.u-ops-rollup-security .bn { left: 0; top: 0; width: 1000px; height: 1507px; clip-path: inset(257px 290px 271px 278px); }
.u-ops-rollup-security .bn > * { position: absolute; margin: 0; }
.u-ops-rollup-security .bn > .op-dots { inset: 0; }
.u-ops-rollup-security .bg { left: 278px; top: 257px; width: calc(1000px - 278px - 290px); height: 979px; }
.u-ops-rollup-security .sheen {
  left: 278px; top: 257px; width: calc(1000px - 278px - 290px); height: 979px; pointer-events: none;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 18%),
    linear-gradient(270deg, rgba(120, 200, 255, 0.2) 0, rgba(120, 200, 255, 0) 8%);
}


.u-ops-rollup-security .bn > .sh { text-align: center; font-size: 24px; line-height: 34px; font-weight: 800; letter-spacing: 3px; color: #fff; text-shadow: 0 1px 2px rgba(0, 30, 120, 0.5), 0 0 0.5px #fff; }


.u-ops-rollup-security .bg {
  background:
    linear-gradient(90deg, rgba(110, 175, 255, 0.3) 0, rgba(110, 175, 255, 0) 22px, rgba(0, 0, 0, 0) calc(100% - 34px), rgba(30, 150, 255, 0.26) 100%),
    linear-gradient(125deg, rgba(10, 150, 225, 0.95) 0, rgba(10, 120, 215, 0.6) 34%, rgba(10, 70, 190, 0) 60%),
    linear-gradient(180deg, #0a5fc4 0, #0852b8 90px, #0647ad 170px, #05379f 260px, #052d93 320px, #05298c 520px, #0a3a9e 640px, #0b45ae 760px, #0a45ad 979px);
}
.u-ops-rollup-security .geo, .u-ops-rollup-security .ttl, .u-ops-rollup-security .rib { left: 0; }
.u-ops-rollup-security .geo { top: 257px; }
.u-ops-rollup-security .ttl { top: 330px; }
.u-ops-rollup-security .rib { top: 255px; }
.u-ops-rollup-security .shield { left: 520px; top: 250px; }
.u-ops-rollup-security .logo { left: 288px; top: 274px; font-size: 7.6px; }
.u-ops-rollup-security .wm { left: 0; }


.u-ops-rollup-security .ip {
  left: 285px; top: 550px; width: 415px; height: 283px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #f3f9fe 0, #e6f2fc 38%, #bcdaf6 82%, #a6cdf4 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(0, 24, 120, 0.32);
}
.u-ops-rollup-security .ip .ih { position: absolute; left: 0; top: 0; right: 0; height: 38px; background: linear-gradient(180deg, #cfe5fa 0, #a6cff4 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.7); }
.u-ops-rollup-security .ico { left: 282px; top: 543px; filter: drop-shadow(0 3px 4px rgba(0, 30, 120, 0.3)); }
.u-ops-rollup-security .ihd { left: 348px; top: 559px; font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: 2.1px; color: #1d49a6; white-space: nowrap; text-shadow: 0 0 0.6px #1d49a6; }
.u-ops-rollup-security .il { left: 334.6px; font-size: 14.4px; line-height: 21.5px; letter-spacing: 1.6px; color: #1c3262; white-space: nowrap; font-weight: 500; }
.u-ops-rollup-security .nb {
  left: 307px; width: 18px; height: 18px; margin-top: -1px; text-align: center; border-radius: 50%; font: italic 900 13px/18px var(--ui-num); color: #1f62dc;
  background: radial-gradient(circle at 35% 30%, #fff, #bcdcf9 70%, #8fc0f1); box-shadow: 0 1px 2px rgba(20, 80, 200, 0.35);
}


.u-ops-rollup-security .ac {
  width: 158px; height: 79px; border-radius: 14px;
  background: linear-gradient(180deg, #e9f2fb 0%, #cfe3f8 55%, #b0d2f4 100%); border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(0, 24, 120, 0.3);
}
.u-ops-rollup-security .ac.l { left: 283px; }
.u-ops-rollup-security .ac.r { left: 545px; }
.u-ops-rollup-security .at { font-size: 14.4px; line-height: 24px; letter-spacing: 2.5px; color: #3a5282; white-space: nowrap; font-weight: 500; }
.u-ops-rollup-security .at.l { right: 587px; text-align: right; }
.u-ops-rollup-security .at.r { left: 572px; }
.u-ops-rollup-security .cap { left: 400px; top: 910px; }

@media (prefers-reduced-motion: no-preference) {
  .u-ops-rollup-security .sheen { animation: urs-sheen 7s ease-in-out infinite alternate; }
  @keyframes urs-sheen { from { opacity: 0.75; } to { opacity: 1; } }
}