:root{color-scheme:light;--ink:#11120f;--muted:#626761;--paper:#f3f4f0;--white:#fff;--line:#c9cdc5;--blue:#1f5eff;--green:#117a52;--red:#c9362b;--yellow:#e8ff6b;--violet:#7957d5;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#d9ddd7}body{min-width:320px;color:var(--ink);background:#d9ddd7;margin:0;line-height:1.5}button,input{font:inherit}a{color:inherit;text-underline-offset:.2em}:focus-visible{outline-offset:3px;outline:3px solid #ffb000}.skip-link{z-index:100;background:var(--yellow);padding:10px 14px;position:fixed;top:8px;left:8px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.site-header,main,footer{border-inline:1px solid var(--ink);background:var(--paper);width:min(100%,1440px);margin-inline:auto}.site-header{z-index:30;border-bottom:1px solid var(--ink);backdrop-filter:blur(12px);background:#f3f4f0f5;justify-content:space-between;align-items:center;gap:24px;min-height:68px;padding:0 clamp(20px,4vw,56px);display:flex;position:sticky;top:0}.wordmark{font-size:.92rem;font-weight:800;text-decoration:none}.site-header nav,footer nav{align-items:center;gap:22px;display:flex}.site-header nav a,footer nav a{align-items:center;gap:6px;font-size:.82rem;font-weight:750;text-decoration:none;display:inline-flex}.intro{border-bottom:1px solid var(--ink);grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);min-height:520px;display:grid}.intro-copy{border-right:1px solid var(--ink);flex-direction:column;justify-content:center;padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);display:flex}.eyebrow,.lab-kicker{letter-spacing:0;text-transform:uppercase;margin:0 0 14px;font-size:.74rem;font-weight:820}h1,h2,p{margin-top:0}h1,h2{letter-spacing:0;line-height:.98}h1{max-width:920px;margin-bottom:30px;font-size:clamp(3.6rem,7vw,7rem)}.lede{color:#3e433e;max-width:760px;margin-bottom:0;font-size:clamp(1.05rem,1.6vw,1.35rem)}.study-index{margin:0;padding:0;list-style:none;display:grid}.study-index li{border-bottom:1px solid var(--ink);grid-template-columns:44px 1fr auto;align-items:center;gap:18px;padding:28px 30px;display:grid}.study-index li:last-child{border-bottom:0}.study-index span{border:1px solid;border-radius:50%;place-items:center;width:36px;height:36px;font-size:.72rem;font-weight:800;display:grid}.study-index strong{font-size:1.05rem;line-height:1.25}.study-index small{color:var(--muted);text-transform:uppercase;font-weight:750}.motion-lab{border-bottom:1px solid var(--ink);background:var(--white);grid-template-columns:285px minmax(0,1fr);display:grid}#motion-lab{scroll-margin-top:68px}.lab-sidebar{border-right:1px solid var(--ink);color:#fff;background:#171815;flex-direction:column;min-width:0;padding:32px 24px;display:flex}.study-tabs{border-top:1px solid #4d514b;display:grid}.study-tabs button{text-align:left;color:#b9bdb7;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #4d514b;grid-template-columns:26px 1fr;gap:6px 12px;padding:20px 0;display:grid}.study-tabs button span{color:#7f857c;grid-row:1/3;font-size:.72rem;font-weight:800}.study-tabs button strong{color:inherit;font-size:.88rem;line-height:1.25}.study-tabs button small{color:#7f857c;text-transform:uppercase;font-size:.66rem}.study-tabs button[aria-selected=true]{color:#fff}.study-tabs button[aria-selected=true] span{color:var(--yellow)}.motion-principle{margin-top:auto;padding-top:48px}.motion-principle>span{color:#858a82;text-transform:uppercase;margin-bottom:4px;font-size:.7rem;display:block}.motion-principle>strong{color:var(--yellow);text-transform:capitalize;margin-bottom:12px;font-size:1.45rem;display:block}.motion-principle p{color:#b9bdb7;margin-bottom:0;font-size:.8rem}.lab-main{min-width:0;padding:28px}.lab-header{justify-content:space-between;align-items:flex-start;gap:20px;min-height:78px;display:flex}.lab-header h2{max-width:720px;margin:0;font-size:clamp(1.8rem,3vw,3rem)}.lab-kicker{color:var(--blue);margin-bottom:7px}.reduced-toggle{color:var(--muted);cursor:pointer;flex:none;align-items:center;gap:9px;font-size:.78rem;font-weight:750;display:inline-flex;position:relative}.reduced-toggle input{z-index:1;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.reduced-toggle span{background:#d9ddd7;border:1px solid;border-radius:20px;width:36px;height:21px;position:relative}.reduced-toggle span:after{background:var(--ink);content:"";border-radius:50%;width:13px;height:13px;transition:transform .18s;position:absolute;top:3px;left:3px}.reduced-toggle input:checked+span{background:var(--yellow)}.reduced-toggle input:checked+span:after{transform:translate(15px)}.stage{--motion-duration:.68s;--motion-easing:cubic-bezier(.22,1,.36,1);background:#e8ebe6;border:1px solid;min-height:530px;position:relative;overflow:hidden}.stage:before{content:"";pointer-events:none;border:16px solid #e1e4de;position:absolute;inset:0}.scene{display:none;position:absolute;inset:0}[data-study=capture-to-workflow] [data-scene=capture],[data-study=exception-to-recovery] [data-scene=recovery],[data-study=system-to-surfaces] [data-scene=surfaces]{display:block}.recording-shell,.workflow-nodes,.workflow-inspector,.validation-banner,.failure-signal,.review-panel,.audit-trace,.shared-record,.surface,.surface-rail{transition-duration:var(--motion-duration);transition-timing-function:var(--motion-easing)}.recording-shell{background:#fff;border:1px solid;width:60%;transition-property:top,left,width,opacity,transform;position:absolute;top:11%;left:20%;overflow:hidden;box-shadow:0 14px 40px #11120f1f}.shell-bar{border-bottom:1px solid var(--line);background:#f4f5f2;align-items:center;gap:6px;height:38px;padding:0 12px;display:flex}.shell-bar>span{background:#a7aca4;border-radius:50%;width:8px;height:8px}.shell-bar b{margin-left:8px;font-size:.68rem}.shell-bar em{color:var(--red);margin-left:auto;font-size:.66rem;font-style:normal;font-weight:850}.recording-body{padding:30px;position:relative}.recording-page{grid-template-columns:1fr 1fr;gap:12px;display:grid}.recording-page p{grid-column:1/3;margin:0;font-size:.8rem;font-weight:800}.recording-page .field{border:1px solid var(--line);background:#f7f8f6;height:34px}.recording-page .wide{grid-column:1/3}.recording-page .mock-button{color:#fff;background:var(--blue);grid-column:2;place-items:center;min-height:32px;font-size:.72rem;font-weight:800;display:grid}.recording-cursor{background:var(--ink);clip-path:polygon(0 0,0 100%,32% 68%,55% 100%,68% 91%,47% 63%,100% 62%);width:14px;height:18px;animation:1.8s ease-in-out infinite cursor-path;position:absolute;bottom:25%;right:21%}.workflow-nodes{opacity:0;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:center;width:66%;transition-property:opacity,transform;display:grid;position:absolute;top:29%;left:30%;transform:translateY(26px)}.workflow-node{background:#fff;border:1px solid;grid-template-columns:26px 1fr auto;gap:10px;min-width:0;min-height:105px;padding:14px;display:grid}.workflow-node>span{border:1px solid;border-radius:50%;place-items:center;width:24px;height:24px;font-size:.58rem;font-weight:800;display:grid}.workflow-node strong,.workflow-node small{display:block}.workflow-node strong{font-size:.78rem}.workflow-node small{color:var(--muted);margin-top:8px;font-size:.64rem}.workflow-node>svg{color:var(--green)}.node-three>svg{color:var(--violet)}.connector{background:var(--ink);transform-origin:0;height:1px;transition:transform var(--motion-duration) var(--motion-easing);transform:scaleX(0)}.workflow-inspector{opacity:0;background:#fff;border:1px solid;width:26%;padding:18px;transition-property:opacity,transform;position:absolute;top:12%;right:3%;transform:translate(30px)}.workflow-inspector>span{color:var(--muted);text-transform:uppercase;font-size:.65rem}.workflow-inspector>strong{margin:5px 0 14px;font-size:.9rem;display:block}.workflow-inspector dl{margin:0}.workflow-inspector dl div{border-top:1px solid var(--line);justify-content:space-between;padding:8px 0;font-size:.66rem;display:flex}.workflow-inspector dt{color:var(--muted)}.workflow-inspector dd{margin:0;font-weight:750}.validation-banner{opacity:0;color:#0b5637;background:#e1f5e9;border:1px solid #5eaa87;align-items:center;gap:9px;width:43%;padding:13px 16px;font-size:.7rem;font-weight:750;transition-property:opacity,transform;display:flex;position:absolute;bottom:7%;right:3%;transform:translateY(18px)}.stage[data-step-id=structure] .recording-shell,.stage[data-step-id=inspect] .recording-shell,.stage[data-step-id=ready] .recording-shell{opacity:.5;width:24%;top:7%;left:3%;transform:scale(.96)}.stage[data-step-id=structure] .workflow-nodes,.stage[data-step-id=inspect] .workflow-nodes,.stage[data-step-id=ready] .workflow-nodes{opacity:1;transform:translateY(0)}.stage[data-step-id=structure] .connector,.stage[data-step-id=inspect] .connector,.stage[data-step-id=ready] .connector{transform:scaleX(1)}.stage[data-step-id=inspect] .workflow-nodes,.stage[data-step-id=ready] .workflow-nodes{width:94%;top:47%;left:3%}.stage[data-step-id=inspect] .workflow-inspector,.stage[data-step-id=ready] .workflow-inspector,.stage[data-step-id=ready] .validation-banner{opacity:1;transform:none}.stage[data-step-id=ready] .node-three{border-color:var(--green);background:#f1fff7}.run-header{border-bottom:1px solid;align-items:center;gap:18px;width:90%;padding-bottom:14px;display:flex;position:absolute;top:6%;left:5%}.run-header span,.run-header small{color:var(--muted);font-size:.68rem}.run-header strong{color:#0b5637;background:#dff3e7;padding:4px 8px;font-size:.68rem}.run-header small{margin-left:auto}.run-pipeline{grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:center;width:90%;display:grid;position:absolute;top:26%;left:5%}.run-pipeline>i{background:var(--ink);height:1px}.run-step{min-height:92px;transition:all var(--motion-duration);background:#fff;border:1px solid;grid-template-columns:28px 1fr auto;gap:10px;padding:15px;display:grid}.run-step>span,.run-step small{color:var(--muted);font-size:.65rem}.run-step strong,.run-step small{display:block}.run-step small{margin-top:7px}.run-step>svg{color:var(--green)}.failure-signal{opacity:0;background:#fff0ee;border:1px solid #dd756d;align-items:center;gap:10px;width:32%;padding:14px;transition-property:opacity,transform,left;display:flex;position:absolute;top:49%;left:34%;transform:scale(.9)}.failure-signal svg{color:var(--red)}.failure-signal strong,.failure-signal span{display:block}.failure-signal strong{font-size:.76rem}.failure-signal span{color:#7b3730;font-size:.62rem}.review-panel{opacity:0;background:#fff;border:1px solid;width:44%;padding:18px;transition-property:opacity,transform;position:absolute;bottom:7%;right:5%;transform:translate(34px)}.review-head span,.review-head strong{display:block}.review-head span{color:var(--violet);text-transform:uppercase;font-size:.65rem;font-weight:800}.review-head strong{margin:4px 0 16px;font-size:.88rem}.diff-row{border-block:1px solid var(--line);grid-template-columns:1fr auto auto;gap:12px;padding:10px 0;font-size:.72rem;display:grid}.diff-row del{color:var(--red)}.diff-row ins{color:var(--green);font-weight:800;text-decoration:none}.review-actions{justify-content:flex-end;gap:16px;padding-top:14px;font-size:.7rem;display:flex}.review-actions strong{color:#fff;background:var(--blue);padding:8px 10px}.audit-trace{opacity:.42;border:1px solid var(--line);width:40%;color:var(--muted);background:#fff;grid-template-columns:auto auto 1fr;gap:12px;padding:12px;font-size:.65rem;transition-property:opacity,border-color,background;display:grid;position:absolute;bottom:8%;left:5%}.stage[data-step-id=blocked] .step-write{border-color:var(--red);background:#fff3f1;transform:translateY(6px)}.stage[data-step-id=blocked] .run-header strong{color:#84271f;background:#ffe0dc}.stage[data-step-id=blocked] .failure-signal,.stage[data-step-id=review] .failure-signal{opacity:1;transform:scale(1)}.stage[data-step-id=review] .review-panel{opacity:1;transform:none}.stage[data-step-id=review] .failure-signal{left:5%}.stage[data-step-id=review] .run-header strong{color:#513696;background:#ebe4ff}.stage[data-step-id=resumed] .step-write{border-color:var(--green);background:#effbf4}.stage[data-step-id=resumed] .audit-trace{opacity:1;background:#e1f5e9;border-color:#5eaa87}.shared-record{background:#fff;border:1px solid;width:34%;padding:22px;transition-property:top,left,width,transform;position:absolute;top:23%;left:33%;box-shadow:0 14px 40px #11120f1f}.shared-record>span{color:var(--blue);text-transform:uppercase;font-size:.66rem;font-weight:800}.shared-record>strong{margin:8px 0 3px;font-size:1.05rem;display:block}.shared-record>p{color:var(--muted);margin:0 0 18px;font-size:.7rem}.shared-record>div{border-top:1px solid var(--line);align-items:baseline;gap:8px;padding-top:12px;display:flex}.shared-record b{font-size:1.7rem}.shared-record small{color:var(--muted)}.shared-record em{color:var(--green);margin-left:auto;font-size:.65rem;font-style:normal;font-weight:800}.surface{opacity:0;background:#fff;border:1px solid;gap:14px;padding:18px;transition-property:opacity,transform;display:flex;position:absolute;transform:scale(.86)}.surface svg{color:var(--blue);flex:none}.surface span,.surface strong{display:block}.surface span{color:var(--muted);text-transform:uppercase;font-size:.62rem}.surface strong{margin:5px 0 10px;font-size:.76rem}.web-surface{width:40%;top:10%;right:5%}.web-surface i{border:1px solid var(--line);width:28%;height:20px;margin-right:4px;display:inline-block}.desktop-surface{width:38%;bottom:9%;right:5%}kbd{border:1px solid var(--line);place-items:center;width:25px;height:25px;margin-right:4px;font-size:.6rem;display:inline-grid}.mobile-surface{width:29%;bottom:8%;left:5%}.mobile-surface .mock-button{color:#fff;background:var(--blue);place-items:center;min-height:28px;padding:0 12px;font-size:.65rem;display:inline-grid}.agent-surface{color:#fff;background:#171815;width:37%;top:10%;left:5%}.agent-surface svg{color:var(--yellow)}.agent-surface pre{margin:0;font-size:.62rem;line-height:1.45;overflow:hidden}.surface-rail{opacity:0;border-top:1px solid;justify-content:space-between;transition-property:opacity;display:flex;position:absolute;bottom:5%;left:7%;right:7%}.surface-rail i{background:var(--ink);border-radius:50%;width:7px;height:7px;margin-top:-4px}.stage[data-step-id=web] .shared-record,.stage[data-step-id=desktop] .shared-record,.stage[data-step-id=mobile] .shared-record,.stage[data-step-id=agent] .shared-record{width:28%;top:31%;left:41%;transform:scale(.9)}.stage[data-step-id=web] .web-surface,.stage[data-step-id=desktop] .desktop-surface,.stage[data-step-id=mobile] .mobile-surface,.stage[data-step-id=agent] .agent-surface{opacity:1;transform:scale(1)}.stage[data-step-id=agent] .surface-rail{opacity:1}.state-caption{background:#fff;border:1px solid;border-top:0;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);min-height:106px;display:grid}.state-caption>div,.state-caption>p{padding:18px 20px}.state-caption>div{border-right:1px solid}.state-caption span,.state-caption strong{display:block}.state-caption span{color:var(--blue);text-transform:uppercase;font-size:.66rem;font-weight:800}.state-caption strong{font-size:1rem}.state-caption p{color:var(--muted);margin:0;font-size:.82rem}.timeline{border:1px solid;border-top:0;grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.timeline button{min-width:0;min-height:42px;color:var(--muted);border:0;border-right:1px solid var(--line);cursor:pointer;background:#f5f6f3;font-size:.68rem;font-weight:750}.timeline button:last-child{border-right:0}.timeline button[aria-pressed=true]{color:#fff;background:var(--ink)}.transport{border:1px solid;border-top:0;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;min-height:64px;padding:9px 12px;display:grid}.transport-buttons{gap:6px;display:flex}.icon-button{cursor:pointer;background:#fff;border:1px solid;place-items:center;width:40px;height:40px;display:grid}.icon-button.primary{color:#fff;background:var(--blue);border-color:var(--blue)}.icon-button .play-icon{display:none}.icon-button[data-playing=false] .play-icon{display:block}.icon-button[data-playing=false] .pause-icon{display:none}.motion-progress{background:#d4d8d1;height:3px;overflow:hidden}.motion-progress span{background:var(--blue);width:0;height:100%;display:block}.state-count{color:var(--muted);font-size:.72rem}.decision-band{border-bottom:1px solid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);display:grid}.decision-band>div:first-child{background:var(--yellow);border-right:1px solid;padding:56px 42px}.decision-band h2{margin:0;font-size:clamp(2.2rem,4vw,4.2rem)}.decision-grid{grid-template-columns:repeat(3,1fr);display:grid}.decision-grid article{border-right:1px solid;padding:34px 24px}.decision-grid article:last-child{border-right:0}.decision-grid article>span{color:var(--blue);font-size:.7rem;font-weight:800}.decision-grid strong{margin:18px 0 12px;display:block}.decision-grid p{color:var(--muted);margin:0;font-size:.78rem}footer{grid-template-columns:1fr auto auto;align-items:center;gap:28px;min-height:150px;padding:34px 42px;display:grid}footer strong,footer span{display:block}footer span,footer small{color:var(--muted);font-size:.72rem}@keyframes cursor-path{0%,15%{transform:translate(-120px,-50px)}45%,58%{transform:translate(-30px,22px)}85%,to{transform:none}}@keyframes progress{0%{width:0}to{width:100%}}.motion-lab.reduced *,.motion-lab.reduced :before,.motion-lab.reduced :after{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=980px){.intro,.motion-lab,.decision-band{grid-template-columns:1fr}.intro-copy,.lab-sidebar,.decision-band>div:first-child{border-bottom:1px solid;border-right:0}.study-tabs{grid-template-columns:repeat(3,1fr)}.study-tabs button{border-right:1px solid #4d514b;padding:16px}.motion-principle{grid-template-columns:auto auto 1fr;gap:12px;margin-top:24px;padding-top:0;display:grid}}@media (width<=680px){.site-header{min-height:62px}#motion-lab{scroll-margin-top:62px}.site-header nav a:first-child{display:none}.intro-copy{padding:48px 20px}h1{font-size:3.6rem}.study-index li{grid-template-columns:40px 1fr;padding:20px}.study-index small{grid-column:2}.lab-sidebar{padding:24px 16px}.study-tabs{grid-template-columns:1fr}.study-tabs button{border-right:0;padding:14px 0}.motion-principle{grid-template-columns:1fr}.lab-main{padding:16px}.lab-header{flex-direction:column;min-height:112px}.stage{min-height:420px}.recording-shell{width:80%;top:12%;left:10%}.stage[data-step-id=structure] .recording-shell,.stage[data-step-id=inspect] .recording-shell,.stage[data-step-id=ready] .recording-shell{width:42%;top:4%;left:4%}.workflow-nodes{grid-template-columns:1fr;gap:7px;width:92%;top:30%;left:4%}.workflow-node{min-height:58px;padding:9px}.connector{display:none}.stage[data-step-id=inspect] .workflow-nodes,.stage[data-step-id=ready] .workflow-nodes{width:52%;top:34%;left:4%}.workflow-inspector{width:38%;padding:10px;top:34%;right:4%}.workflow-inspector dl div{display:block}.validation-banner{width:92%;bottom:3%;right:4%}.run-pipeline{grid-template-columns:1fr;gap:7px;top:19%}.run-pipeline>i{display:none}.run-step{min-height:58px;padding:9px}.failure-signal{width:84%;top:57%;left:8%}.stage[data-step-id=review] .failure-signal{width:40%;left:5%}.review-panel{width:50%;padding:10px;bottom:4%;right:4%}.audit-trace{width:90%;bottom:4%;left:5%}.shared-record{width:80%;top:20%;left:10%}.stage[data-step-id=web] .shared-record,.stage[data-step-id=desktop] .shared-record,.stage[data-step-id=mobile] .shared-record,.stage[data-step-id=agent] .shared-record{width:54%;top:5%;left:5%}.web-surface,.desktop-surface,.mobile-surface,.agent-surface{width:86%;inset:auto 5% 6% auto}.state-caption{grid-template-columns:1fr}.state-caption>div{border-bottom:1px solid;border-right:0}.timeline{grid-auto-columns:minmax(92px,1fr);overflow-x:auto}.transport{grid-template-columns:1fr auto}.transport-buttons{grid-column:1/3}.decision-grid{grid-template-columns:1fr}.decision-grid article{border-bottom:1px solid;border-right:0}footer{grid-template-columns:1fr;padding:30px 20px}}