.n8nLab{padding:76px 0;background:radial-gradient(circle at 72% 10%,#4a1c2b 0,transparent 28%),#071421;color:#f8fbfc;overflow:hidden}.n8nLab *{box-sizing:border-box}.n8nHead{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:end}.n8nHead h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.93;margin:.5rem 0}.n8nHead p{color:#b7cad4}.n8nTabs{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 16px}.n8nTabs button,.runWorkflow{border:1px solid #395468;background:#0d2332;color:#dce9ee;padding:11px 15px;border-radius:999px;font:inherit;font-weight:850;cursor:pointer}.n8nTabs button[aria-selected=true],.runWorkflow{background:#ff6d5a;color:#fff;border-color:#ff6d5a}.automationStudio{border:1px solid #315063;border-radius:22px;background:#081a27;box-shadow:0 35px 90px #0006;overflow:hidden}.studioTop{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:15px 18px;border-bottom:1px solid #29495a;background:#0c2230}.studioTop strong{display:flex;align-items:center;gap:9px}.studioTop strong:before{content:"";width:10px;height:10px;border-radius:50%;background:#ff6d5a;box-shadow:0 0 0 6px #ff6d5a25}.runWorkflow{border-radius:9px;padding:9px 14px}.runWorkflow.running{background:#b34d3f}.studioBody{display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:510px}.workflowCanvas{padding:28px;position:relative;overflow:hidden;background-image:radial-gradient(#29495a 1px,transparent 1px);background-size:22px 22px}.flowTitle h3{font-size:1.55rem;margin:.35rem 0}.flowTitle p{color:#a9c0ca;max-width:66ch}.workflowGraph{position:relative;height:310px;margin-top:18px}.connectionSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.flowLine{fill:none;stroke:#426273;stroke-width:3;stroke-linecap:round}.flowLine.active{stroke:#ff7b66;stroke-dasharray:8 10;animation:lineMove 1s linear infinite}.flowPacket{fill:#5ee1d4;filter:drop-shadow(0 0 7px #5ee1d4)}.graphNode{position:absolute;width:142px;min-height:88px;padding:12px;border:1px solid #3a5a6b;border-radius:13px;background:linear-gradient(145deg,#132f3e,#0d2432);color:#fff;text-align:left;cursor:pointer;box-shadow:0 14px 30px #0003;transition:transform .2s,border-color .2s,box-shadow .2s}.graphNode:hover,.graphNode:focus-visible{transform:translateY(-4px);border-color:#ff806c;outline:none}.graphNode.active{border-color:#5ee1d4;box-shadow:0 0 0 3px #5ee1d425,0 14px 30px #0004}.graphNode.success .nodeStatus{background:#39c59f}.graphNode.error{border-color:#ff6d5a;animation:nodeShake .25s}.nodeIcon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#ff6d5a;font-weight:950}.nodeStatus{position:absolute;right:10px;top:10px;width:9px;height:9px;border-radius:50%;background:#547483}.graphNode strong,.graphNode small{display:block}.graphNode strong{margin-top:9px}.graphNode small{color:#9eb6c1;margin-top:3px}.studioSide{border-left:1px solid #29495a;background:#0b202e;display:grid;grid-template-rows:auto 1fr}.inspector{padding:20px;border-bottom:1px solid #29495a}.inspector h3{margin:0 0 12px}.inspectRows{display:grid;gap:8px}.inspectRows div{padding:9px 10px;border:1px solid #2c4c5c;border-radius:9px;background:#102938}.inspectRows strong,.inspectRows span{display:block}.inspectRows span{font-size:.68rem;color:#9fb7c1;margin-top:3px}.executionConsole{padding:18px;background:#06151f;min-height:220px}.consoleHead{display:flex;justify-content:space-between;color:#aac0ca;font-size:.72rem;font-weight:850}.consoleLog{height:180px;overflow:auto;margin-top:12px;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:#9fb7c1}.logLine{margin:0 0 5px}.logLine.ok{color:#5ee1d4}.logLine.warn{color:#f4c86a}.logLine.err{color:#ff806d}.n8nMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}.n8nMetrics div{padding:15px;border:1px solid #294a5a;border-radius:12px;background:#0a1e2c}.n8nMetrics strong,.n8nMetrics span{display:block}.n8nMetrics strong{font-size:1.35rem}.n8nMetrics span{font-size:.66rem;color:#9eb6c1}.n8nCardDiagram{height:108px;margin:17px 0 5px;border-radius:12px;background:#091b27;overflow:hidden;position:relative}.n8nCardDiagram svg{width:100%;height:100%}.miniLine{stroke:#456878;stroke-width:2;fill:none}.miniPulse{fill:#ff6d5a;filter:drop-shadow(0 0 4px #ff6d5a);animation:miniTravel 2.4s linear infinite}.miniNode{fill:#153746;stroke:#5c8291;stroke-width:1.5}.miniNode.hot{fill:#ff6d5a;stroke:#ff9a8a}.miniText{fill:#c8dbe3;font:700 8px system-ui}.n8nDepth{padding:70px 0}.n8nDepthGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.n8nDepth article{background:#fff;border:1px solid #d8e3e6;border-radius:16px;padding:24px}.n8nDepth h3{margin:.2rem 0 12px}.n8nDepth li{margin:8px 0;color:#405b67}.n8nBoundary{margin-top:14px;padding:18px;border-radius:14px;background:#fff4db;border:1px solid #edd8a3;color:#5e4511}
@keyframes lineMove{to{stroke-dashoffset:-36}}@keyframes nodeShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes miniTravel{0%{transform:translateX(0)}100%{transform:translateX(190px)}}
@media(max-width:1050px){.studioBody{grid-template-columns:1fr}.studioSide{border-left:0;border-top:1px solid #29495a;grid-template-columns:1fr 1fr;grid-template-rows:auto}.inspector{border-bottom:0;border-right:1px solid #29495a}}
@media(max-width:850px){.n8nHead{grid-template-columns:1fr}.workflowGraph{height:auto;display:grid;gap:10px}.connectionSvg{display:none}.graphNode{position:relative;inset:auto!important;width:100%;min-height:0}.graphNode:after{content:"↓";position:absolute;bottom:-17px;left:50%;color:#ff806c}.graphNode:last-child:after{display:none}.n8nMetrics{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.n8nLab{padding:50px 0}.studioTop{align-items:flex-start}.studioBody,.studioSide{display:block}.workflowCanvas{padding:17px}.inspector{border-right:0;border-bottom:1px solid #29495a}.n8nDepthGrid,.n8nMetrics{grid-template-columns:1fr}.executionConsole{min-height:200px}}
@media(prefers-reduced-motion:reduce){.flowLine.active,.miniPulse{animation:none}.graphNode{transition:none}}

/* Isolation: prevent generic Academy workflow styles from collapsing the live studio canvas. */
.n8nLab .workflowCanvas{display:block;grid-template-columns:none;gap:0;margin:0;padding:28px;position:relative;overflow:hidden;background-image:radial-gradient(#29495a 1px,transparent 1px);background-size:22px 22px}
.n8nLab .flowTitle{display:block;width:100%;max-width:720px}
.n8nLab .workflowGraph{display:block;position:relative;width:100%;height:310px;margin:18px 0 0;padding:0}
.n8nLab .graphNode{display:block;box-sizing:border-box}
@media(max-width:850px){.n8nLab .workflowCanvas{display:block;padding:20px}.n8nLab .workflowGraph{display:grid;height:auto;gap:10px}.n8nLab .graphNode{position:relative;inset:auto!important;width:100%}}
