.ai-architecture-transfer{padding:110px max(24px,calc((100vw - 1320px)/2));background:#fbfaf7;color:#20232a}.ai-architecture-transfer>.architecture-intro{display:grid;grid-template-columns:1fr .72fr;gap:80px;align-items:end;margin-bottom:42px}.architecture-intro .eyebrow{margin:0;color:#5668c6;font-size:11px;font-weight:800;letter-spacing:.14em}.architecture-intro h2{max-width:720px;margin:10px 0 0;font-size:clamp(48px,5vw,70px);line-height:.96;letter-spacing:-.055em}.architecture-intro>p{max-width:500px;margin:0;color:#646b78;font-size:17px;line-height:1.5}.ai-architecture-canvas{position:relative;overflow:hidden;padding:22px;border:1px solid #d9dee8;border-radius:30px;background:radial-gradient(circle at 75% 15%,#eef1ff 0,transparent 30%),#f7f8fb;box-shadow:0 30px 80px #34466e18}.ai-architecture-canvas:before{position:absolute;inset:0;background-image:linear-gradient(#65728b0a 1px,transparent 1px),linear-gradient(90deg,#65728b0a 1px,transparent 1px);background-size:22px 22px;content:""}.ai-architecture-canvas>header,.architecture-flow,.ai-architecture-canvas>footer{position:relative;z-index:2}.ai-architecture-canvas>header{display:flex;align-items:center;padding:0 3px 18px;border-bottom:1px solid #dce1e9}.ai-architecture-canvas>header img{width:34px;height:34px;margin-right:11px;padding:6px;border:1px solid #dfe3ea;border-radius:9px;background:#fff}.ai-architecture-canvas>header span{display:flex;flex-direction:column}.ai-architecture-canvas>header b{font-size:14px}.ai-architecture-canvas>header small{color:#78808e;font-size:9px}.ai-architecture-canvas>header em{margin-left:auto;color:#5668c6;font-size:9px;font-style:normal;font-weight:700}.architecture-flow{display:grid;gap:17px;padding:22px 0}.architecture-lane{position:relative;display:grid;grid-template-columns:155px repeat(var(--nodes),minmax(0,1fr));gap:10px;align-items:stretch;padding:10px;border:1px solid #dce2eb;border-radius:18px;background:#fffdfae8;transition:.35s background,.35s border-color,.35s box-shadow}.architecture-lane:not(:last-child):after{position:absolute;z-index:4;bottom:-20px;left:50%;color:#8b97ab;font-size:22px;content:'↓';transform:translateX(-50%)}.architecture-lane>header{display:flex;flex-direction:column;justify-content:center;padding:7px 10px}.architecture-lane>header i{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;background:#e9edf4;color:#647087;font-size:8px;font-style:normal;font-weight:800}.architecture-lane>header small{margin-top:8px;color:#778298;font-size:7px;font-weight:800;letter-spacing:.12em}.architecture-lane>header b{margin-top:3px;font-size:12px;line-height:1.2}.architecture-node{position:relative;display:flex;min-height:76px;flex-direction:column;justify-content:center;padding:10px 12px;border:1px solid #b9decf;border-radius:13px;background:#f4faf7;transition:.3s opacity,.3s transform,.3s border-color,.3s box-shadow}.architecture-node small{color:#738095;font-size:6px;font-weight:800;letter-spacing:.11em}.architecture-node b{margin-top:5px;font-size:11px;line-height:1.2}.architecture-node span{margin-top:5px;color:#747d8a;font-size:7px}.architecture-node em{position:absolute;top:9px;right:9px;color:#667cff;font-size:7px;font-style:normal;font-weight:700}.architecture-node.start{border:2px solid #667cff;border-radius:35px;background:#eef1ff}.architecture-node.human{border:2px double #d39235;background:#fff8ec}.architecture-node.end{border:2px solid #35a875;border-radius:35px;background:#effaf5}.architecture-lane.active{border-color:#6579e8;background:linear-gradient(100deg,#eef1ff,#fff);box-shadow:0 16px 38px #435bd120}.architecture-lane.active>header i{background:#5369db;color:#fff}.architecture-lane.active:not(:last-child):after{color:#5369db;animation:architecture-arrow .7s ease-in-out infinite alternate}.architecture-lane.complete{background:#f4fbf7}.architecture-lane.complete>header i{background:#2e9d72;color:#fff}.architecture-lane.complete:not(:last-child):after{color:#2e9d72}.architecture-lane:not(.active):not(.complete) .architecture-node{opacity:.64}.ai-architecture-canvas>footer{display:flex;align-items:center;gap:22px;padding:14px 3px 1px;border-top:1px solid #dce1e9;color:#6c7583;font-size:8px}.ai-architecture-canvas>footer span{display:flex;align-items:center;gap:6px}.ai-architecture-canvas>footer i{width:7px;height:7px;border-radius:50%;background:#35aa79}.ai-architecture-canvas>footer b{margin-left:auto;color:#5668c6}.architecture-progress{position:absolute;right:0;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#5369db var(--progress),#dfe4ed var(--progress));transition:.4s background}@keyframes architecture-arrow{to{transform:translate(-50%,3px)}}
@media(max-width:800px){.ai-architecture-transfer{padding:76px 18px}.ai-architecture-transfer>.architecture-intro{display:block;margin-bottom:30px}.architecture-intro h2{font-size:43px}.architecture-intro>p{margin-top:20px;font-size:15px}.ai-architecture-canvas{padding:13px;border-radius:22px}.architecture-flow{gap:18px}.architecture-lane{grid-template-columns:1fr 1fr;padding:8px}.architecture-lane>header{grid-column:1/-1;flex-direction:row;align-items:center;gap:9px}.architecture-lane>header small{margin:0}.architecture-lane>header b{margin:0}.architecture-node{min-height:82px}.ai-architecture-canvas>footer{flex-wrap:wrap;gap:9px}.ai-architecture-canvas>footer b{width:100%;margin:0}.architecture-lane.control .architecture-node.end{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.architecture-lane.active:not(:last-child):after{animation:none}}

/* AI Studio uses the canonical vertical architecture composition. */
@media(min-width:901px){
  .ai-architecture-transfer{display:grid;grid-template-columns:minmax(300px,.34fr) minmax(0,.66fr);gap:58px;align-items:center;max-width:none;padding-top:82px;padding-bottom:82px}
  .ai-architecture-transfer>.architecture-intro{display:block;margin:0}
  .architecture-intro h2{max-width:500px;margin:15px 0 25px;font-size:clamp(48px,4.35vw,62px)}
  .architecture-intro>p{max-width:455px;margin:0;font-size:16px}
  .ai-architecture-canvas{min-width:0;padding:16px;border-radius:25px}
  .ai-architecture-canvas>header{padding-bottom:14px}
  .architecture-flow{gap:14px;padding:17px 0}
  .architecture-lane{grid-template-columns:125px repeat(var(--nodes),minmax(0,1fr));gap:7px;padding:7px;border-radius:14px}
  .architecture-lane:not(:last-child):after{bottom:-17px;font-size:19px}
  .architecture-lane>header{padding:5px 7px}
  .architecture-lane>header i{width:24px;height:24px}
  .architecture-lane>header small{margin-top:6px;font-size:6px}
  .architecture-lane>header b{font-size:10px}
  .architecture-node{min-height:69px;padding:8px 9px;border-radius:11px}
  .architecture-node small{font-size:5.5px}.architecture-node b{font-size:9px}.architecture-node span{font-size:6px}.architecture-node em{top:7px;right:7px;font-size:6px}
  .architecture-node.start,.architecture-node.end{border-radius:31px}
  .ai-architecture-canvas>footer{gap:15px;padding-top:11px;font-size:6.5px}
}