/* Responsive, semantic visualizations. All diagrams are illustrative unless labelled otherwise. */
.kvis { --ink:#192b45; --quiet:#436394; --edge:#bdc7d6; --paper:#f2f4f7; --teal:#31496d; --blue:#245de8; font-family:inherit; background:var(--paper); color:var(--ink); border:1px solid var(--edge); border-radius:14px; padding:32px; overflow:hidden; width:100%; }
.kvis *, .kvis *::before, .kvis *::after { box-sizing:border-box; }
.kvis p, .kvis strong, .kvis b, .kvis span { color:inherit; }
.kvis .vis-caption { font-size:12px; line-height:1.6; color:var(--quiet); margin:26px 0 0; max-width:none; }
.vis-caption--row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.vis-window { background:#fff; border:1px solid #bbc5d5; border-radius:10px; box-shadow:0 20px 36px #192b4512; overflow:hidden; }
.vis-windowbar { display:flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-bottom:1px solid #dae0e9; background:#eceff3; }
.vis-windowbar i { width:5px; height:5px; border-radius:50%; background:#6788ba; }
.vis-appbody { display:grid; grid-template-columns:44px 1fr; min-height:310px; }
.vis-appbody aside { padding:20px 13px; border-right:1px solid #dae0e9; display:flex; flex-direction:column; gap:20px; background:#15253c; }
.vis-appbody aside i { height:14px; border:1px solid #7291bf; border-radius:3px; }
.vis-appbody>div { padding:22px; }
.vis-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.vis-metrics i { display:block; height:44px; border-radius:5px; background:#dae0e9; border-top:3px solid #344d73; }
.vis-metrics i:nth-child(2) { background:#dfe7fa; border-color:#245de8; }
.vis-bars { height:140px; display:flex; align-items:flex-end; gap:10px; border-bottom:1px solid #b2bdd0; background:repeating-linear-gradient(to top, transparent 0, transparent 33px, #cdd5e14d 34px); padding:0 8px; }
.vis-bars i { display:block; flex:1; height:var(--bar); background:#324a6e; border-radius:4px 4px 0 0; }
.vis-bars i:nth-child(3n+2) { background:#245de8; }
.vis-bars i:nth-child(3n) { background:#8ea7cc; }
.vis-table { display:grid; gap:12px; margin-top:22px; }
.vis-table i { height:5px; width:100%; background:#dae0e9; border-radius:2px; }
.vis-table i:nth-child(2) { width:70%; }
.vis-migrate { display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; }
.vis-old,.vis-new { border-radius:8px; padding:20px 14px; min-width:0; }
.vis-old { background:#182841; color:#cfd6e1; }
.vis-new { background:#e2e7ee; }
.vis-migrate strong { display:block; margin-top:18px; font-size:12px; line-height:1.5; font-weight:500; }
.vis-terminal { height:150px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.vis-terminal i { background:#7492c0; display:block; width:80%; height:3px; }
.vis-terminal i:nth-child(3n) { width:45%; }
.vis-terminal i:nth-child(2n) { width:60%; }
.vis-transfer { text-align:center; color:#375179; font-size:26px; }
.vis-cloud { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.vis-cloud>div { padding:20px; display:flex; align-items:center; gap:16px; border-radius:8px; background:#e4e8ef; border:1px solid #c5cedb; }
.vis-cloud strong { font-weight:500; font-size:15px; }
.vis-port { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border:1px solid #829ec7; border-radius:6px; font:12px/1 monospace; color:#2c4262; }
.vis-security { display:grid; gap:16px; }
.vis-security>div { padding:28px; border:1px dashed #496da3; border-radius:12px; text-align:center; }
.vis-security>div:last-child { border:1px solid #a2b6d5; background:#e2e6ed; padding:20px; display:flex; align-items:center; justify-content:center; gap:12px; }
.vis-secure-icon { width:68px; height:78px; display:flex; align-items:center; justify-content:center; border-radius:16px 16px 32px 32px; background:#2d4363; color:white !important; font-size:32px; margin:0 auto 22px; }
.vis-security strong { display:block; font-size:15px; font-weight:500; }
.vis-check { border-radius:50%; background:#324a6e; color:white !important; width:26px; height:26px; }
.vis-flow { display:flex; list-style:none; gap:16px; padding:0; margin:0; }
.vis-flow li { position:relative; flex:1; min-width:0; padding:20px; border:1px solid #c1cbd9; border-radius:8px; background:#fff; }
.vis-flow li:not(:last-child)::after { content:'→'; position:absolute; right:-14px; top:42%; color:#31496d; z-index:1; font-size:16px; }
.vis-flow b { display:flex; align-items:center; justify-content:center; width:32px; height:32px; margin-bottom:22px; border-radius:50%; font-size:12px; background:#dee3eb; color:#293d5b; font-weight:600; }
.vis-flow li:nth-child(even) b { background:#e4ebff; color:#245de8; }
.vis-flow span { display:block; font-size:14px; line-height:1.4; font-weight:500; }
.vis-flow small { display:block; font-size:9px; line-height:1.6; margin-top:8px; color:#46699d; letter-spacing:.02em; }
.vis-inference { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; padding-top:28px; align-items:center; }
.vis-inference .vis-bars { height:120px; gap:4px; }
.vis-matrix { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; transform:rotate(-8deg); }
.vis-matrix i { aspect-ratio:1; background:#245de8; border-radius:3px; }
.vis-matrix i:nth-child(3n) { background:#37537c; }
.vis-heat { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; padding:16px; background:#e1e6ed; border-radius:8px; border:1px solid #b9c4d4; }
.vis-heat i { display:block; aspect-ratio:1.2; border-radius:2px; background:#9fb4d4; }
.vis-heat .tone-1 { background:#45679b; }.vis-heat .tone-2 { background:#2f4669; }.vis-heat .tone-3 { background:#9cb2d3; }.vis-heat .tone-4 { background:#b6c1d2; }
.vis-scale { display:flex; gap:18px; justify-content:space-between; align-items:center; margin-top:16px; font-size:10px; color:#3f5e8c; }
.vis-scale i { display:block; flex:1; max-width:130px; height:6px; background:linear-gradient(90deg,#9cb2d3,#9fb4d4,#2f4669); border-radius:4px; }
.vis-report { padding:28px; border-radius:8px; border:1px solid #c5cedc; background:#fff; max-width:620px; margin:auto; }
.vis-reportlines { display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.vis-reportlines i { height:5px; width:90%; background:#d8dee7; border-radius:3px; }.vis-reportlines i:first-child { width:48%; background:#354f76; height:9px; }.vis-reportlines i:last-child { width:65%; }
.vis-report .vis-bars { margin-bottom:26px; }
.vis-owner { background:#17273e; color:#dae0e8; border-radius:10px; max-width:430px; padding:24px; margin:0 auto 32px; text-align:center; position:relative; }
.vis-owner b { display:block; font-size:16px; }.vis-owner span { display:block; font-size:10px; margin-top:9px; letter-spacing:.08em; }.vis-owner::after { content:''; position:absolute; width:1px; height:32px; background:#6b8cbd; top:100%; left:50%; }
.vis-members { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; border-top:1px solid #b4c0d1; padding-top:24px; }
.vis-members>div { border:1px solid #bfc9d8; padding:18px 14px; background:#fff; border-radius:6px; font-size:11px; display:flex; align-items:center; gap:10px; }.vis-members span { font-size:20px; color:#334d73; }
.kvis--map { height:400px; position:relative; background:#e1e6ed; }
.vis-streets { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 75px,#f9fafc80 75px 88px),repeating-linear-gradient(90deg,transparent 0 130px,#f9fafc80 130px 142px); transform:rotate(-8deg) scale(1.3); }
.vis-streets i { position:absolute; background:#f9fafc; box-shadow:0 0 0 1px #c5cedc; width:100%; height:18px; top:46%; left:0; }.vis-streets i:nth-child(2) { transform:rotate(90deg); top:50%; left:18%; }.vis-streets i:nth-child(3) { top:14%; height:24px; }.vis-streets i:nth-child(4) { top:85%; }
.vis-place { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:16px; align-items:center; background:#fff; border-radius:10px; padding:22px 28px; box-shadow:0 15px 35px #2d436425; white-space:nowrap; }
.vis-place strong { font-size:18px; }.vis-place p { margin:4px 0 0; font-size:12px; color:#3f5e8c; }
.vis-pin { display:block; width:22px; height:22px; background:#245de8; border-radius:50% 50% 50% 0; transform:rotate(-45deg); flex:none; }.vis-pin::after { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:white; top:7px; left:7px; }
.vis-north { position:absolute; right:25px; top:25px; font-size:14px; }
.prodart .kvis { padding:15px; background:#ebeef2; border:0; border-radius:8px; margin-top:12px; }.prodart .vis-flow { gap:8px; }.prodart .vis-flow li { padding:10px 6px; }.prodart .vis-flow b { margin-bottom:9px; width:22px; height:22px; font-size:9px; }.prodart .vis-flow span { font-size:10px; }.prodart .vis-flow li:not(:last-child)::after { right:-9px; font-size:11px; }.prodart .vis-heat { padding:8px; gap:3px; }.prodart .vis-heat i { aspect-ratio:2; }.prodart .vis-scale { margin-top:8px; }
.rail6 { padding-top:50px; }.rail6 .kvis { margin:0; }
.map,.map6 { border:0; border-radius:14px; }
.soygen-hero-art { position:absolute; right:0; top:65px; bottom:0; height:calc(100% - 65px); width:63%; object-fit:cover; }
@media(max-width:700px) { .kvis { padding:20px; } .vis-flow { flex-wrap:wrap; }.vis-flow li { flex:1 1 40%; }.vis-flow li:nth-child(even)::after { display:none; }.vis-flow b { margin-bottom:14px; }.vis-members { grid-template-columns:repeat(2,1fr); }.vis-migrate { grid-template-columns:1fr; gap:14px; }.vis-transfer { transform:rotate(90deg); }.vis-place { padding:20px; width:85%; white-space:normal; }.vis-place strong { font-size:15px; }.vis-place p { font-size:11px; }.prodart .vis-flow { flex-wrap:nowrap; }.soygen-hero-art { width:100%; opacity:.5; } }
/* Reference-aligned square panels, fine rules and cool technical accents. */
.kvis,.vis-window,.vis-old,.vis-new,.vis-cloud>div,.vis-security>div,.vis-flow li,.vis-heat,.vis-report,.vis-owner,.vis-members>div,.vis-place { border-radius:0; }
.kvis { background:#e9f0f8; border-color:#a6bdd73b; }
.vis-window { box-shadow:0 20px 40px #152a4610; }
.vis-flow li { background:#f4f7fb; border-style:dashed; }
.vis-flow b,.vis-port { border-radius:0; }
.vis-bars i,.vis-matrix i,.vis-heat i { border-radius:0; }
.vis-owner { background:#122542; }
.vis-secure-icon,.vis-check { background:#3974eb; }
.vis-pin { background:#3974eb; }
.soygen-hero-art { width:100%; top:0; height:100%; object-position:center; }
.prodart .kvis,.prodart .vis-heat { border-radius:0; background:#dae5f3; }