#projects .demo-heading{display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 24px;}
#projects .demo-heading h4{font-size: 22px; line-height: 1.55; letter-spacing: -0.025em; margin: 8px 0px 0px;}
#projects .demo-heading > p{max-width: 270px; font-size: 12px; line-height: 1.9; color: var(--muted); margin: 0px;}















#projects .route-demo{margin-top: 8px; padding: 30px; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; border: 1px solid var(--line); border-radius: 7px; background-image: radial-gradient(var(--stage-grid) 1px,transparent 1px); background-size: 16px 16px;}
#projects .route-input{max-width: 430px; margin: 0px auto 25px; padding: 12px 18px; background: var(--panel); border: 1px solid var(--line-strong); font-size: 12px; text-align: center; border-radius: 4px; position: relative;}
#projects .route-input::after{content: ""; position: absolute; height: 26px; width: 1px; background: var(--line-strong); top: 100%; left: 50%;}
#projects .route-input > span:last-child{color: var(--muted); display: block; font-size: 10px; padding-top: 3px;}
#projects .status-dot{display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 7px; box-shadow: 0 0 0 3px color-mix(in srgb,var(--green) 9%,transparent);}
#projects .route-branches{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; position: relative;}
#projects .route-branches > button{position: relative; min-width: 0px; text-align: left; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel); padding: 14px; cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;}
#projects .route-branches > button[aria-selected="true"]{border-color: var(--green); box-shadow: 0 0 0 1px var(--green);}
#projects .route-branches > button:hover{transform: translateY(-3px);}
#projects .branch-number{display: block; font: 10px var(--mono); color: var(--muted); margin-bottom: 9px;}
#projects .route-branches strong{display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px;}
#projects .route-branches > button > span:last-child{display: block; font-size: 10px; line-height: 1.7; color: var(--muted);}
#projects .flow-junction{display: grid; grid-template-columns: repeat(4, 1fr); height: 32px; margin: 0px 1px; position: relative;}
#projects .flow-junction i{display: block; position: relative;}
#projects .flow-junction i::before{content: ""; position: absolute; left: 50%; width: 1px; top: 0px; bottom: 0px; background: var(--line-strong);}
#projects .flow-junction i::after{content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 1px; background: var(--line-strong);}
#projects .flow-junction i:first-child::after{left: 50%;}
#projects .flow-junction i:last-child::after{right: 50%;}
#projects .flow-junction i.active::before{background: var(--green); box-shadow: 0 0 6px color-mix(in srgb,var(--green) 24%,transparent);}
#projects .editor-destination{position: relative; max-width: 620px; margin: 18px auto 0px; background: var(--panel); padding: 16px 20px; border: 1px solid var(--green); border-radius: 4px; text-align: center;}
#projects .editor-destination::before{content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 19px; background: var(--green);}
#projects .editor-destination > div{display: flex; align-items: center; justify-content: center; gap: 7px;}
#projects .editor-destination strong{font-size: 14px;}
#projects .editor-destination > div > span:last-child{font-size: 10px; color: var(--muted); margin-left: 8px;}
#projects .case .editor-destination p{font-size: 11px; color: var(--muted); margin: 6px 0px 0px;}
#projects .case .route-explanation{font-size: 11px; line-height: 1.9; text-align: center; color: var(--muted); margin: 13px 0px 24px; min-height: 21px;}
#projects .editable-proofs{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 23px;}
#projects .editable-proofs figure{margin: 0px; min-width: 0px;}
#projects .editable-proofs button{display: block; width: 100%; padding: 0px; border: 1px solid var(--line); background: white; border-radius: 4px; overflow: hidden; cursor: zoom-in; text-align: left; color: rgb(23, 36, 60);}
#projects .editable-proofs img{height: 160px; width: 100%; object-fit: contain; padding: 10px;}
#projects .editable-proofs button > span{display: block; border-top: 1px solid rgb(224, 226, 219); padding: 11px 14px; font-size: 10px; background: rgb(255, 255, 255);}
#projects .editable-proofs b{display: block; font-size: 12px; font-weight: 500; margin-top: 3px;}























































































































@media (max-width: 550px){
}


@media (max-width: 1100px){





}
@media (max-width: 820px){









#projects .demo-heading{display: block;}
#projects .demo-heading h4{font-size: 20px;}
#projects .demo-heading > p{margin-top: 10px; max-width: none;}

#projects .route-demo{padding: 23px;}
#projects .route-branches{grid-template-columns: 1fr 1fr;}
#projects .route-branches button{min-height: 107px;}
#projects .flow-junction{display: none;}
#projects .editor-destination{margin-top: 28px;}
#projects .editor-destination::before{height: 29px;}
#projects .route-branches > button > span:last-child{font-size: 11px;}
#projects .editable-proofs img{height: 140px;}






















}
@media (max-width: 550px){#projects .route-demo{padding: 18px 14px;}
#projects .route-branches{gap: 9px;}
#projects .route-branches > button{padding: 12px;}
#projects .editor-destination{padding: 15px 9px;}
#projects .editor-destination > div{flex-wrap: wrap; gap: 5px;}
#projects .editor-destination > div > span:last-child{width: 100%; margin: 2px 0px 0px;}
#projects .case .editor-destination p{font-size: 10px; line-height: 1.9;}
#projects .case .route-explanation{text-align: left; min-height: 40px;}
#projects .editable-proofs{grid-template-columns: 1fr; gap: 14px;}
#projects .editable-proofs img{height: auto; max-height: 200px;}




































#projects .demo-heading h4{font-size: 19px;}






}
@media (prefers-reduced-motion: reduce){


}
@media print{#projects .route-explanation{display: none !important;}





#projects .route-demo{padding: 15px; background: white;}






#projects .route-demo{margin: 0px;}



#projects .demo-heading h4{font-size: 17px;}
}
 #projects .case{row-gap:26px}
 #projects .case>.project-demonstration{grid-column:1/-1;order:3;width:100%;min-width:0}
 #projects .case>.more-body{order:4}
 #projects .case .project-summary{font-size:16px;font-weight:500;line-height:1.9}
 #projects .case .project-focus{font-size:14px;line-height:1.9}
 #projects .case p.project-context{font-size:12px;line-height:1.9}
 #projects .case h3{margin-bottom:22px}
 #projects .case .project-method{display:none}
 #projects .case>.more-body{padding-top:20px}
 #projects .image-case{border:1px solid var(--line);border-radius:6px;padding:18px;background:var(--paper-2)}
 #projects .image-case-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-bottom:16px}
 #projects .image-case-heading strong{color:var(--green);font-size:13px;font-weight:500}
 #projects .image-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 #projects .image-triptych figure{margin:0;min-width:0}
 #projects .image-triptych .imgbox{height:180px;padding:10px;background:#fff;border:1px solid #d9dfd8;border-radius:4px}
 #projects .image-triptych img{width:100%;height:100%;object-fit:contain;display:block}
 #projects .image-triptych figcaption{font-size:11px;color:var(--ink-soft);margin-top:9px;line-height:1.7}
 #projects .image-triptych figcaption small{font:10px var(--mono);color:var(--accent);margin-right:5px}
 #projects .image-triptych figure:last-child .imgbox{border:1px solid #5b886f}
 #projects .case .image-case>p{font-size:12px;line-height:1.8;margin:16px 0 0;color:var(--ink-soft)}
 #projects .route-demo{margin-top:0;background:var(--paper-2);padding:26px}
 #projects .route-demo .demo-heading h4{font:500 23px/1.6 var(--serif)}
 #projects .route-demo .demo-heading>p{max-width:none}
 #projects .route-demo .editable-proofs img{height:205px}
 #projects .route-demo .editable-proofs button>span{font-size:11px}
 #projects .route-demo .editable-proofs b{font-size:13px}
 #projects .research-strip{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center}
 #projects .research-strip>span{font-size:22px;color:var(--accent)}
 #projects .research-strip h4{font-size:14px;color:var(--green);margin-bottom:9px}
 #projects .research-strip p{font-size:13px;line-height:1.85;margin:0;color:var(--ink-soft)}
 #projects .recall-visual{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;border:1px solid var(--line);border-radius:5px;background:var(--paper-2)}
 #projects .recall-visual li{padding:22px 17px;position:relative;min-width:0}
 #projects .recall-visual li+li{border-left:1px solid var(--line)}
 #projects .recall-visual li+li:before{content:'→';position:absolute;left:-7px;top:29px;font-size:12px;background:var(--paper-2);color:var(--accent)}
 #projects .recall-visual small{display:block;font:10px var(--mono);color:var(--muted);margin-bottom:12px}
 #projects .recall-visual strong{display:block;font-size:14px;font-weight:500;margin-bottom:7px}
 #projects .recall-visual span{font-size:11px;color:var(--muted);line-height:1.7;display:block}
 #projects .tool-evidence{display:grid;grid-template-columns:1.1fr 1fr;gap:25px;align-items:center;padding:24px;background:var(--paper-2);border:1px solid var(--line);border-radius:5px}
 #projects .tool-evidence .imgbox{padding:0;background:white;border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:zoom-in}
 #projects .tool-evidence img{display:block;width:100%;height:auto}
 #projects .tool-evidence h4{font:500 22px/1.6 var(--serif);margin:0 0 15px}
 #projects .tool-evidence ul{list-style:none;padding:0;display:grid;gap:11px}
 #projects .tool-evidence li{font-size:13px;line-height:1.8;color:var(--ink-soft)}
 #projects .tool-evidence li b{color:var(--green);font-weight:500}
 @media(max-width:820px){#projects .case .project-summary{font-size:15px}#projects .case .project-focus{font-size:13px}#projects .image-triptych .imgbox{height:140px}#projects .route-demo{padding:20px}#projects .research-strip{grid-template-columns:1fr;gap:15px}#projects .research-strip>span{display:none}#projects .tool-evidence{grid-template-columns:1fr}#projects .recall-visual{grid-template-columns:1fr}#projects .recall-visual li{padding:14px 20px}#projects .recall-visual li+li{border-left:0;border-top:1px solid var(--line)}#projects .recall-visual li+li:before{content:'↓';left:50%;top:-10px}#projects .recall-visual small{display:inline-block;margin:0 12px 0 0}#projects .recall-visual strong{display:inline}#projects .recall-visual span{margin-top:6px}}
 @media(max-width:550px){#projects .image-triptych{grid-template-columns:1fr;gap:16px}#projects .image-triptych .imgbox{height:210px}#projects .image-case-heading{display:block}#projects .image-case-heading>span{display:block;margin-top:5px}#projects .editable-proofs{grid-template-columns:1fr}#projects .route-demo .editable-proofs img{height:auto;max-height:260px}#projects .route-branches{grid-template-columns:1fr 1fr}#projects .route-branches>button{padding:13px 10px}#projects .route-branches strong{font-size:13px}#projects .route-input{margin-bottom:18px}#projects .demo-heading{display:block}#projects .demo-heading>p{margin-top:8px}#projects .editor-destination>div{flex-wrap:wrap}#projects .editor-destination p{font-size:11px}#projects .flow-junction{height:22px}}