/* A detailed system resolves into one clear experience. */
.w2-depth-sticky { --depth-detail: 0; --depth-resolved: 0; --depth-flow: 0; }
.w2-depth-network { position: absolute; inset: 0; transform: translateZ(calc(-15px + var(--depth-open) * 50px)); opacity: var(--depth-detail); pointer-events: none; }
.w2-depth-network svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: #80a9f9; }
.w2-depth-network path { stroke-width: 1; opacity: .45; }
.w2-depth-network .w2-data-flow { stroke: #bfedff; stroke-width: 2; stroke-dasharray: 8 56; stroke-dashoffset: var(--depth-flow); opacity: 1; }
.w2-system-node { position: absolute; width: 27%; padding: 14px; border: 1px solid #759de77a; background: #101e37f5; box-shadow: 0 10px 35px #0004, inset 0 1px #a6c7ff18; border-radius: 5px; transform: translate(calc(var(--nx) * var(--depth-detail)),calc(var(--ny) * var(--depth-detail))); }
.w2-system-node>span { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #96b5e9; font-size: 7px; letter-spacing: .1em; white-space: nowrap; }
.w2-system-node>span i { width: 4px; height: 4px; background: #b5f2e0; box-shadow: 0 0 8px #83e6cb; border-radius: 50%; }
.w2-system-node>b { display: block; color: #f0f5ff; font-size: 12px; font-weight: 500; margin: 10px 0 13px; white-space: nowrap; }
.w2-node-content { left: 0; top: 0; --nx: -100%; --ny: -45%; }
.w2-node-journey { right: 0; top: 0; --nx: 100%; --ny: -40%; }
.w2-node-system { left: 0; top: 42%; --nx: -115%; --ny: 0%; }
.w2-node-motion { right: 0; top: 42%; --nx: 115%; --ny: 0%; }
.w2-node-device { left: 0; bottom: 0; --nx: -85%; --ny: 65%; }
.w2-node-connect { right: 0; bottom: 0; --nx: 85%; --ny: 65%; }
.w2-node-diagram { display: flex; gap: 4px; height: 18px; align-items: end; }
.w2-node-diagram i { display: block; width: 24%; height: 100%; border: 1px solid #779cdd; background: #365c9238; }
.w2-node-content .w2-node-diagram { flex-direction: column; gap: 3px; align-items: start; }
.w2-node-content .w2-node-diagram i { width: 100%; height: 3px; border: 0; background: #729dd2; }
.w2-node-content .w2-node-diagram i:nth-child(even) { width: 65%; }
.w2-node-journey .w2-node-diagram i { border-radius: 50%; width: 15px; height: 15px; margin-right: 5px; }
.w2-node-system .w2-node-diagram i:nth-child(2) { background: #b7c4e7; }.w2-node-system .w2-node-diagram i:nth-child(3) { background: #426cf4; }.w2-node-system .w2-node-diagram i:nth-child(4) { background: #d4eaf7; }
.w2-node-motion .w2-node-diagram i:nth-child(1) { height: 25%; }.w2-node-motion .w2-node-diagram i:nth-child(2) { height: 60%; }.w2-node-motion .w2-node-diagram i:nth-child(4) { height: 70%; }
.w2-node-device .w2-node-diagram i:nth-child(2) { width: 17%; }.w2-node-device .w2-node-diagram i:nth-child(3) { width: 10%; }.w2-node-device .w2-node-diagram i:last-child { display: none; }
.w2-node-connect .w2-node-diagram { border-top: 1px solid #83aff2; height: 12px; justify-content: space-between; }
.w2-node-connect .w2-node-diagram i { width: 7px; height: 7px; border-radius: 50%; }
.w2-depth-resolved { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); opacity: var(--depth-resolved); font-size: 8px; color: #bdd6eb; letter-spacing: .16em; white-space: nowrap; display: flex; align-items: center; gap: 9px; }
.w2-depth-resolved>i { width: 5px; height: 5px; background: #a3e8d2; border-radius: 50%; }
.w2-depth-stack { scale: calc(1 - var(--depth-open) * .24); }
.w2-depth-motion { background: none; }
.web2-page .w2-depth-header h2 { text-wrap: balance; }
.w2-work-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px 24px; }
.w2-work:nth-child(even) { transform: none; }
.web2-page .w2-works { padding-bottom: 105px!important; }
.w2-work-image { padding: 15px; aspect-ratio: 1.5; }
.w2-work:nth-child(4n+1) .w2-work-image { background: #e7e0ed; }.w2-work:nth-child(4n+2) .w2-work-image { background: #e4e8e7; }.w2-work:nth-child(4n+3) .w2-work-image { background: #e7e4de; }.w2-work:nth-child(4n+4) .w2-work-image { background: #e2e9f0; }
.w2-work-image img { box-shadow: 0 7px 20px #10152218; }
.w2-work-meta { margin-top: 15px; flex-direction: column; align-items: start; gap: 6px; }
.web2-page .w2-work-meta h3 { font-size: 19px; line-height: 1.35; word-break: keep-all; }
.w2-work-meta>span { font-size: 10px; }
.web2-page .w2-work>p { font-size: 12px; margin-top: 7px; text-wrap: pretty; }
.w2-work-open { width: 30px; height: 30px; font-size: 18px; right: 9px; bottom: 9px; }
/* A short, staggered invitation on the controls themselves. */
.w2-device-buttons,.w2-width-control,.w2-theme-switch { position: relative; }
.w2-width-control { border-radius: 6px; }
.w2-device-buttons { --cue-delay: .5s; }
.w2-width-control { --cue-delay: 0s; }
.w2-theme-switch { --cue-delay: 1s; }
.is-cueing .w2-device-buttons>button,.is-cueing .w2-width-control,.is-cueing .w2-theme-switch { animation: w2-control-halo 1.8s ease-in-out var(--cue-delay) both; }
.is-cueing .w2-device-buttons:after,.is-cueing .w2-width-control:after,.is-cueing .w2-theme-switch:after { content: ''; position: absolute; left: calc(50% - 4px); top: -23px; width: 8px; height: 8px; border-right: 2px solid #244cf4; border-bottom: 2px solid #244cf4; pointer-events: none; animation: w2-control-arrow 1.8s ease-in-out var(--cue-delay) both; }
.w2-play-controls button:focus-visible,.w2-width-control input:focus-visible { outline: 2px solid #244cf4; outline-offset: 4px; }
@keyframes w2-control-halo { 0%,100% { box-shadow: 0 0 0 0 #244cf400,0 0 0 0 #244cf400; } 30%,65% { box-shadow: 0 0 0 2px #244cf4a0,0 0 0 7px #244cf412; } }
@keyframes w2-control-arrow { 0%,100% { opacity: 0; transform: translateY(-6px) rotate(45deg); } 30%,65% { opacity: 1; transform: translateY(0) rotate(45deg); } }
@media(max-width:900px) {
    .w2-work-grid { gap: 28px 18px; }.web2-page .w2-work-meta h3 { font-size: 17px; }
    .w2-system-node { padding: 10px; }.w2-system-node>b { font-size: 10px; }.w2-system-node>span { font-size: 6px; }
}
@media(max-width:600px) {
    .w2-work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 12px; }
    .w2-work-image { padding: 8px; aspect-ratio: 1.35; }.w2-work-open { width: 24px; height: 24px; font-size: 15px; right: 5px; bottom: 5px; }
    .w2-work-meta { margin-top: 11px; gap: 5px; }.web2-page .w2-work-meta h3 { font-size: 15px; letter-spacing: -.04em; }
    .w2-work-meta>span { font-size: 9px; }.web2-page .w2-work>p { display: none; }
    .web2-page .w2-works { padding-bottom: 65px!important; }
    .w2-depth-stack { scale: calc(1 - var(--depth-open) * .32); }
    .w2-system-node { width: 28%; padding: 8px; }.w2-system-node>b { font-size: 9px; margin: 7px 0; }.w2-system-node>span { font-size: 5px; letter-spacing: 0; }
    .w2-node-diagram { height: 13px; }.w2-node-system { --nx: -90%; }.w2-node-motion { --nx: 90%; }
    .w2-node-content { --nx: -75%; }.w2-node-journey { --nx: 75%; }.w2-node-device { --nx: -65%; }.w2-node-connect { --nx: 65%; }
    .w2-depth-resolved { font-size: 6px; }
}
@media(prefers-reduced-motion:reduce) {
    .is-cueing .w2-device-buttons>button,.is-cueing .w2-width-control,.is-cueing .w2-theme-switch { animation: none; outline: 2px solid #244cf480; outline-offset: 3px; }
    .is-cueing .w2-device-buttons:after,.is-cueing .w2-width-control:after,.is-cueing .w2-theme-switch:after { display: none; }
    .w2-depth-network { display: none; }.w2-depth-resolved { opacity: 1; }
}

/* Localized node labels wrap instead of running past the panel edge. */
.w2-system-node>b { white-space: normal; word-break: keep-all; overflow-wrap: break-word; line-height: 1.4; }