:root{--bg:#080d16;--surface:#0e1724;--text:#e5eff1;--muted:#94aebb;--line:#3b566b66;--accent:#ff744c;--display:'Barlow Condensed','Arial Narrow',sans-serif;--mono:'IBM Plex Mono',monospace;--body:Inter,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 95% 15%,#49234d21,transparent 50%),var(--bg);color:var(--text);font:14px/1.6 var(--body)}body[data-category=learn]{--accent:#6ce4db}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}::selection{background:var(--accent);color:var(--bg)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.category-skip{position:fixed;top:-80px;left:22px;padding:12px 20px;background:var(--accent);color:var(--bg);z-index:100}.category-skip:focus{top:10px}
.category-header{position:fixed;top:18px;left:4%;right:4%;height:64px;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:0 23px;background:#090f1ced;border:1px solid #41657c55;backdrop-filter:blur(15px)}.category-header:before{content:'';position:absolute;top:-1px;left:22px;width:42px;height:1px;background:#68e4e0;box-shadow:0 0 12px #68e4e066}.category-brand{display:flex;gap:16px;align-items:center}.category-brand>b{font:600 28px var(--display);letter-spacing:-1px}.category-brand>b em{font-style:normal;color:#ff744c}.category-brand>span{font:10px/1.5 var(--mono);letter-spacing:.06em}.category-brand small{display:block;font-size:7px;letter-spacing:.14em;color:#8da6b4}.category-header nav{display:flex;gap:28px;font:9px var(--mono);letter-spacing:.06em}.category-header nav a:hover{color:var(--accent)}.category-header nav a[aria-current=page]{color:var(--accent)}
.category-main{max-width:1480px;margin:0 auto;padding:102px 6% 0}.category-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;min-height:48px}.category-title{display:flex;align-items:center;gap:21px}.category-title h1{font:500 35px/.95 var(--display);letter-spacing:.02em;margin:0}.category-title h1:after{content:'/';margin-left:21px;color:#345265}.category-title p{margin:0;font:9px/1.6 var(--mono);color:#9ab2be;max-width:220px}.project-picker{display:flex;align-items:center;gap:12px}.project-picker>label{font:8px var(--mono);letter-spacing:.07em;color:#7896a7}.project-picker select{max-width:270px;min-width:170px;padding:10px 34px 10px 13px;border:1px solid var(--line);border-radius:0;background:#111d2c;color:var(--text);font:11px var(--mono);cursor:pointer}.project-picker option{background:#111d2c}.project-count{font:8px var(--mono);color:#6f92a5;white-space:nowrap}
.project-tour{height:auto;position:relative}.tour-pin{position:sticky;top:99px;height:min(calc(100svh - 192px),760px);min-height:480px;display:grid;grid-template-columns:.91fr 1.09fr;border:1px solid var(--line);background:var(--surface);box-shadow:0 18px 80px #0004;isolation:isolate}.tour-copy{padding:36px 33px 27px;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:linear-gradient(155deg,#18213388,#0c1520 72%)}.project-ident{display:flex;align-items:center;justify-content:space-between;gap:15px;font:9px var(--mono);letter-spacing:.06em;color:#91acb9}.project-ident strong{font-weight:500;color:var(--text)}.project-ident span{font-size:8px;color:#718e9e}.tour-outcome{margin:17px 0 28px;padding-left:12px;border-left:1px solid #5b9ca67a;color:#a1bac7;font-size:12px;line-height:1.6;max-width:350px}.step-number{font:8px var(--mono);letter-spacing:.12em;color:var(--accent);margin-top:auto}.tour-copy h2{font:500 clamp(42px,4.7vw,72px)/.96 var(--display);letter-spacing:-.012em;margin:18px 0 22px}.tour-copy h2 span{display:block}.tour-copy h2 span:last-child{color:var(--accent)}.step-copy{font-size:13px;line-height:1.7;max-width:350px;margin:0;color:#cfdbdf}.step-facts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px;color:#a0b5c2;font-size:11px;line-height:1.6}.step-facts li{padding-left:14px;position:relative}.step-facts li:before{content:'';position:absolute;left:0;top:.65em;width:4px;height:4px;background:var(--accent)}.project-links{display:flex;gap:22px;align-items:center;margin-top:auto;padding-top:30px;font:9px var(--mono);letter-spacing:.04em}.project-links a{padding-bottom:5px;border-bottom:1px solid #52738288}.project-links a:first-child{color:var(--accent)}.project-links a:hover{color:#f1fcff;border-color:var(--accent)}
.tour-visual{position:relative;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 90% 5%,#39244932,transparent 55%),#0b1420;overflow:hidden}.tour-visual:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#79b2ce06 1px,transparent 1px),linear-gradient(90deg,#79b2ce06 1px,transparent 1px);background-size:36px 36px}.visual-topline{display:flex;justify-content:space-between;gap:14px;padding:20px 23px;border-bottom:1px solid #354d6255;font:7px var(--mono);letter-spacing:.07em;color:#7899ab;text-transform:uppercase}.visual-topline>span:first-child{color:#c5d8e3;display:flex;align-items:center;gap:8px}.visual-topline i{width:4px;height:4px;background:var(--accent)}.visual-stage{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;padding:22px;position:relative}.visual-stage>figure{width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center}.visual-stage img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 25px #0009)}.visual-cue{font:8px var(--mono);letter-spacing:.07em;color:#91bbc8;padding:0 24px 18px;line-height:1.6}.tour-progress{border-top:1px solid #3b55676b;padding:20px 23px 17px;background:#09121ee8}.progress-caption{display:flex;justify-content:space-between;gap:12px;font:8px var(--mono);letter-spacing:.06em;color:#a8bdc7;margin-bottom:12px}.progress-caption span:last-child{color:#6f91a2}.progress-track{height:2px;background:#344f6266;position:relative;overflow:hidden}.progress-track i{position:absolute;inset:0;transform:scaleX(var(--tour-progress,0));transform-origin:left;background:var(--accent);box-shadow:0 0 15px var(--accent)}.step-controls{display:flex;margin-top:15px;overflow:auto;scrollbar-width:thin;scrollbar-color:#3c6579 transparent;gap:5px;padding:2px 2px 6px}.step-controls button{flex:1;min-width:58px;background:transparent;border:0;border-bottom:1px solid #46617588;color:#819eae;font:8px var(--mono);letter-spacing:.02em;padding:10px 6px;white-space:nowrap;min-height:36px}.step-controls button b{display:block;margin-bottom:6px;font:8px var(--mono);color:#57788c}.step-controls button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:#709abd08}.step-controls button[aria-pressed=true] b{color:var(--accent)}.step-controls button:hover{color:#e8f8fc;border-color:#99c8da}.step-controls button:focus-visible{outline-offset:-2px}
.flow-visual{width:100%;max-width:510px;align-self:center}.flow-nodes{display:grid;grid-template-columns:repeat(var(--nodes,3),1fr);gap:14px;margin:0 0 30px}.flow-node{position:relative;border:1px solid #3c576a88;background:#0d1925;padding:17px 10px;text-align:center;font:8px/1.5 var(--mono);color:#658699}.flow-node:after{content:'→';position:absolute;left:calc(100% + 2px);top:50%;transform:translateY(-50%);color:#496e83;font-size:11px}.flow-node:last-child:after{display:none}.flow-node>b{display:block;font-size:17px;font-weight:400;color:#46697c;margin-bottom:9px}.flow-node.is-active{border-color:var(--accent);background:#24505b22;color:#d5f8f4;box-shadow:0 0 25px #4edfd20b}.flow-node.is-active>b{color:var(--accent)}.flow-artifact{border:1px solid #416c8199;padding:27px 25px;background:linear-gradient(120deg,#142638,#1c192d);position:relative;min-height:200px}.flow-artifact:before,.flow-artifact:after{content:'';position:absolute;width:22px;height:1px;background:var(--accent)}.flow-artifact:before{top:-1px;left:0}.flow-artifact:after{right:0;bottom:-1px}.flow-artifact-label{font:8px var(--mono);letter-spacing:.08em;color:#79b8bf;display:block;margin-bottom:22px}.flow-artifact h3{font:500 29px/1.12 var(--display);letter-spacing:.01em;color:#d9e8e9;margin:0 0 20px}.flow-artifact p{font-size:12px;line-height:1.7;color:#99b7c6;margin:0}.flow-state{display:flex;align-items:center;gap:9px;font:7px/1.6 var(--mono);letter-spacing:.04em;color:#87bcbd;margin-top:21px}.flow-state i{width:4px;height:4px;background:var(--accent);flex-shrink:0}
.category-footer{max-width:1480px;margin:34px auto 0;padding:27px 6% 34px;border-top:1px solid #344c5f55;display:flex;justify-content:space-between;gap:25px;align-items:center;font:8px var(--mono);letter-spacing:.06em;color:#7896a7}.category-footer a{color:#abc7d2}.category-footer a:hover{color:var(--accent)}.category-message{font:10px/1.7 var(--mono);color:#9db7c6;padding:15px 0;margin:0}.category-manual .project-tour{height:auto!important}.category-manual .tour-pin{position:relative;top:auto;height:auto;min-height:600px}.category-manual .tour-copy{min-height:540px}.category-manual .tour-visual{min-height:540px}
@media(min-width:1500px){.tour-copy{padding:44px}.tour-copy h2{font-size:76px}.step-copy{font-size:14px}.step-facts{font-size:12px}}
@media(max-width:1000px){.category-main{padding-left:4%;padding-right:4%}.tour-copy{padding:28px 23px 24px}.tour-copy h2{font-size:52px}.tour-outcome{font-size:11px;margin-bottom:20px}.step-copy{font-size:12px}.step-facts{font-size:10px;gap:8px;margin-top:17px}.project-links{font-size:8px;gap:15px;padding-top:24px}.visual-stage{padding:16px}.flow-nodes{gap:10px;margin-bottom:20px}.flow-node{font-size:7px;padding:13px 5px}.flow-node:after{left:100%;font-size:10px}.flow-artifact{padding:21px 18px}.flow-artifact h3{font-size:27px}.flow-artifact p{font-size:11px}.visual-topline{padding:18px;font-size:6px}.tour-progress{padding:17px}.step-controls button{font-size:7px;min-width:52px}}
@media(max-width:700px){.category-header{top:12px;left:4%;right:4%;height:58px;padding:0 15px}.category-brand{gap:10px}.category-brand>b{font-size:25px}.category-brand>span{font-size:7px}.category-brand small{font-size:5px}.category-header nav{gap:15px;font-size:7px}.category-header nav .desktop-nav{display:none}.category-main{padding:88px 4% 0}.category-bar{gap:12px;margin-bottom:12px;min-height:45px}.category-title{gap:10px}.category-title h1{font-size:28px}.category-title h1:after{display:none}.category-title p{display:none}.project-picker{gap:8px}.project-picker>label{display:none}.project-picker select{min-width:132px;max-width:190px;font-size:9px;padding:9px 25px 9px 10px}.project-count{font-size:6px}.tour-pin{top:82px;grid-template-columns:1fr;grid-template-rows:auto 1fr;height:min(calc(100svh - 160px),770px);min-height:550px}.tour-copy{padding:20px 20px 19px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:0 12px}.project-ident{font-size:8px;grid-column:1/-1}.project-ident span{font-size:6px}.tour-outcome{display:none}.step-number{font-size:7px;margin-top:15px;grid-column:1/-1}.tour-copy h2{font-size:38px;line-height:.94;margin:12px 0 12px;grid-column:1/-1}.tour-copy h2 span{display:inline}.tour-copy h2 span+span:before{content:' '}.step-copy{font-size:10px;line-height:1.6;grid-column:1/-1;max-width:100%}.step-facts{margin:13px 0 0;gap:5px;grid-column:1/2;font-size:8px}.step-facts li{padding-left:10px}.step-facts li:before{width:3px;height:3px}.project-links{grid-column:2/3;margin-top:13px;padding-top:0;gap:8px;font-size:7px;align-self:end;flex-direction:column;align-items:end}.visual-topline{font-size:5px;padding:11px 14px}.visual-stage{padding:13px;min-height:120px}.visual-cue{font-size:6px;padding:0 14px 10px}.tour-progress{padding:12px 14px 7px}.progress-caption{font-size:6px;margin-bottom:9px}.step-controls{margin-top:9px;gap:4px;padding-bottom:2px}.step-controls button{font-size:6px;min-width:44px;min-height:35px;padding:5px 4px}.step-controls button b{font-size:6px;margin-bottom:4px}.flow-visual{max-width:430px}.flow-nodes{gap:10px;margin:0 0 11px}.flow-node{font-size:6px;padding:7px 4px}.flow-node>b{font-size:11px;margin-bottom:4px}.flow-artifact{min-height:105px;padding:12px 14px}.flow-artifact-label{font-size:6px;margin-bottom:9px}.flow-artifact h3{font-size:21px;margin-bottom:7px}.flow-artifact p{font-size:9px;line-height:1.5}.flow-state{font-size:5px;margin-top:10px}.category-footer{font-size:6px;gap:15px;padding:22px 4%;margin-top:22px}.category-footer>span{max-width:130px;line-height:1.7}.category-manual .tour-pin{min-height:0;height:auto}.category-manual .tour-copy{min-height:0}.category-manual .tour-visual{min-height:390px}}
@media(max-width:380px),(max-height:740px) and (max-width:700px){.tour-pin{min-height:520px}.tour-copy{padding:15px}.tour-copy h2{font-size:34px;margin:9px 0}.step-number{margin-top:10px}.step-facts{font-size:7px;margin-top:9px}.step-copy{font-size:9px}.project-links{margin-top:8px;font-size:6px}.visual-stage{padding:10px}.flow-artifact h3{font-size:19px}.flow-artifact p{font-size:8px}.flow-node>b{font-size:10px}.flow-node{padding:6px 3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.project-tour{height:auto!important}.tour-pin{position:relative;top:auto;height:auto;min-height:600px}.tour-copy,.tour-visual{min-height:540px}@media(max-width:700px){.tour-pin{min-height:0}.tour-copy{min-height:0}.tour-visual{min-height:390px}}}
/* Fit diagrams to the visual slot, so their nodes and status never cross its chrome. */
.tour-visual{min-height:0}.visual-topline,.visual-cue,.tour-progress{flex-shrink:0}.visual-stage{min-height:0;container-type:size;container-name:workflow-visual}
.flow-visual{width:100%;height:100%;max-height:430px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(7px,4cqh,14px);align-self:center;min-height:0}
.flow-nodes{margin:0;gap:12px}.flow-node{padding:clamp(5px,4cqh,14px) 8px;font-size:8px}.flow-node>b{font-size:clamp(11px,7cqh,17px);margin-bottom:clamp(3px,3cqh,9px)}
.flow-artifact{min-height:0;padding:clamp(10px,5cqh,24px) 22px;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,3cqh,12px);overflow:hidden}.flow-artifact-label{font-size:clamp(6px,3cqh,8px);line-height:1.4;margin:0}.flow-artifact h3{font-size:clamp(19px,10cqh,29px);line-height:1.1;margin:0}.flow-artifact p{font-size:clamp(9px,4cqh,12px);line-height:1.5;margin:0}.flow-state{font-size:7px;line-height:1.5;margin:0;min-height:0}
@container workflow-visual (max-height:230px){.flow-artifact p{display:none}.flow-node{padding-top:6px;padding-bottom:6px}.flow-artifact{padding-top:10px;padding-bottom:10px}}
@media(max-width:700px){.flow-nodes{gap:10px}.flow-node{font-size:6px;padding-left:4px;padding-right:4px}.flow-node>b{font-size:clamp(10px,6cqh,13px);margin-bottom:4px}.flow-artifact{padding-left:14px;padding-right:14px}.flow-artifact h3{font-size:clamp(19px,9cqh,23px)}.flow-state{font-size:5px}.category-manual .tour-visual{min-height:390px}}
@media(prefers-reduced-motion:reduce){.tour-visual{min-height:540px}@media(max-width:700px){.tour-visual{min-height:390px}}}