/* A shared architectural illustration of the tools around a team's work. */
.system-world { container-type:inline-size; width:100%; min-width:0; color:#e4eef5; position:relative; isolation:isolate; }
.sw-overline { display:flex; justify-content:space-between; gap:12px; padding:16px 4px; border-bottom:1px solid #adcbdf2b; font:500 9px/1.4 var(--font-brand); letter-spacing:.1em; color:#8facbe; }
.sw-stage { position:relative; aspect-ratio:4/3; perspective:1000px; isolation:isolate; }
.sw-ground { position:absolute; inset:8% 5% 12%; z-index:-1; transform:rotateX(48deg) rotateZ(-12deg); border:1px solid #65859930; border-radius:20px; background:radial-gradient(ellipse,#5681a322,transparent 65%),repeating-linear-gradient(90deg,transparent 0 8%,#698da918 8.2% 8.4%),repeating-linear-gradient(0deg,transparent 0 8%,#698da918 8.2% 8.4%); box-shadow:0 32px 0 -1px #060b10,0 33px 0 #63829b25; }
.sw-routes { position:absolute; inset:0; width:100%; height:100%; stroke:#7fa7c644; stroke-width:1.5; }
.sw-routes .sw-signal { stroke:#c1e8ff; stroke-width:2.5; stroke-dasharray:20 850; animation:sw-travel 9s linear infinite; filter:drop-shadow(0 0 5px #8cd4ff); }
.sw-routes .sw-signal-two { animation-delay:-4s; stroke-dasharray:14 720; }
.sw-pane { position:absolute; background:linear-gradient(135deg,#324453f0,#101c27f5 62%); border:1px solid #9bb8ce72; border-bottom:5px solid #273e51; border-radius:9px; box-shadow:10px 25px 35px #0008,inset 0 1px 0 #dbecf655; overflow:hidden; transform:rotateY(-10deg) rotateX(8deg) rotateZ(-5deg); animation:sw-float 9s ease-in-out infinite alternate; transition:border-color .4s,box-shadow .4s; }
.sw-pane-bar { display:flex; align-items:center; gap:4px; padding:9px 10px; border-bottom:1px solid #c4ddef20; background:#d2e8fa08; }
.sw-pane-bar>i { width:3px;height:3px;background:#b2cede88;border-radius:50%; }
.sw-pane-bar>span { margin-left:auto; font:500 clamp(7px,1.35cqw,10px)/1.3 var(--font-brand); letter-spacing:.08em; color:#a6bfd2; }
.sw-web { width:41%; top:7%; left:3%; }
.sw-web-content { padding:12px 15px 16px; background:radial-gradient(at 100% 10%,#6495b74d,transparent 75%); }
.sw-web-content>span { font:500 clamp(6px,1.15cqw,9px)/1.2 var(--font-brand); letter-spacing:.15em; }
.sw-web-content>b { display:block; margin:15px 0; font:450 clamp(16px,4.5cqw,38px)/.98 var(--font-brand); letter-spacing:-.055em; }
.sw-web-content>i { display:block; height:4px; width:45%; background:#b8dcf0; border-radius:1px; }
.sw-web-content>div { display:flex;gap:6px; margin-top:16px; }
.sw-web-content u { height:28px; flex:1; border:1px solid #a6c5d642; background:linear-gradient(135deg,#688da933,#aacde511); border-radius:2px; }
.sw-portal { width:40%; right:1%; top:14%; animation-delay:-4s; transform:rotateY(-8deg) rotateX(8deg) rotateZ(4deg); }
.sw-file { display:flex; gap:9px; align-items:center; padding:14px 12px; }
.sw-file+.sw-file { border-top:1px solid #b1d7ec20; }
.sw-file>i { font:400 clamp(13px,3cqw,24px)/1 var(--font-brand); color:#b9e0f6; font-style:normal; padding:8px; border:1px solid #8ab3d144; background:#74a7cb11; border-radius:4px; }
.sw-file span { font:500 clamp(9px,2cqw,15px)/1.2 var(--font-brand); }
.sw-file small { display:block; font:400 clamp(7px,1.4cqw,11px)/1.4 var(--font-brand); color:#8faabd; margin-top:5px; }
.sw-core { position:absolute; width:16%; aspect-ratio:1; top:45%; left:43%; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:16%; border:1px solid #d0e4f9bb; background:linear-gradient(135deg,#d8e8f4,#658bac 48%,#b6d5ee); box-shadow:0 8px 0 #314c63,0 9px 0 #7d9cba,0 25px 55px #7ac5ff36; color:#132a3d; transform:rotate(-7deg); z-index:3; }
.sw-core>span { font:550 clamp(20px,6cqw,48px)/1 var(--font-brand); letter-spacing:-.08em; }
.sw-core>small { font:600 clamp(5px,1.1cqw,9px)/1 var(--font-brand); letter-spacing:.1em; margin-top:5px; }
.sw-workflow { width:43%; bottom:6%; left:3%; animation-delay:-6s; }
.sw-assets { width:36%; bottom:0; right:2%; animation-delay:-2s; }
.sw-flow { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:14px 18px 4px; }
.sw-flow i { display:grid; place-items:center; width:25%; aspect-ratio:1; background:#91bcd51a; border:1px solid #adcee349; border-radius:5px; font:500 clamp(10px,2.2cqw,17px)/1 var(--font-brand); font-style:normal; }
.sw-flow b { color:#a9cfe6; font-size:15px; font-weight:400; }
.sw-pane p { margin:9px 12px 14px!important; font:400 clamp(8px,1.75cqw,13px)/1.4 var(--font-brand)!important; color:#bacbda!important; }
.sw-folders { display:flex; gap:8px; padding:20px 14px 5px; }
.sw-folders i { position:relative; width:30%; height:32px; border:1px solid #b0c9de70; border-radius:3px; background:linear-gradient(135deg,#809bb8,#3e5a74); box-shadow:0 6px 8px #0004; transform:rotate(-6deg); }
.sw-folders i::before { content:'';position:absolute;top:-5px;left:-1px;width:50%;height:5px;background:#8ea8c1;border-radius:3px 3px 0 0; }
.sw-folders i:nth-child(2) { transform:translateY(-5px); }.sw-folders i:last-child { transform:rotate(6deg); }
.sw-caption { display:flex; justify-content:space-between; align-items:end; gap:16px; padding:24px 4px 8px; }
.sw-caption strong { font:450 clamp(16px,3cqw,24px)/1.1 var(--font-brand); letter-spacing:-.035em; max-width:55%; }
.sw-caption>span { text-align:right; max-width:40%; font:400 clamp(8px,1.5cqw,12px)/1.5 var(--font-brand); color:#99b4c9; }
.system-world[data-system="web"] .sw-web,.system-world[data-system="portals"] .sw-portal,.system-world[data-system="workflows"] .sw-workflow,.system-world[data-system="assets"] .sw-assets { border-color:#c1e2f8; box-shadow:10px 25px 35px #0008,0 0 24px #99cff825; }
.system-paused .system-world * { animation-play-state:paused!important; }
@keyframes sw-travel { to { stroke-dashoffset:-870; } }
@keyframes sw-float { from { translate:0 -3px; } to { translate:0 5px; } }
@media(prefers-reduced-motion:reduce) { .system-world * { animation:none!important; transition:none!important; } }
@media(max-width:400px) { .sw-pane-bar { padding:7px; }.sw-file{gap:5px;padding:10px 7px}.sw-file>i{padding:5px}.sw-file small{display:none}.sw-web-content{padding:10px}.sw-web-content>b{margin:10px 0}.sw-web-content u{height:20px}.sw-folders i{height:24px}.sw-core{top:48%}.sw-overline{font-size:8px}.sw-caption{padding-top:20px}.sw-pane p{margin:8px!important} }

@container (max-width:500px) { .sw-stage { aspect-ratio:1; } }