/* A single choreographed process: source → interpretation → decision → result. */
.motion-demo{--demo-accent:#d0ff71;position:relative;isolation:isolate;overflow:hidden;border:1px solid #34442d;border-radius:16px;background:#10180f;color:#eff5e8}.motion-toolbar{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 28px;position:relative;z-index:5}.motion-cases{display:flex;gap:6px}.motion-cases button{color:#adc09c;background:transparent;border:1px solid transparent;border-radius:6px;min-height:44px;padding:11px 15px;font-size:13px;transition:color .2s,background .2s,border-color .2s}.motion-cases button:hover{color:#eff5e8;border-color:#4f663e}.motion-cases button[aria-pressed=true]{color:#e3f6ca;background:#2d4021;border-color:#75924f}.motion-playback{display:flex;gap:15px;align-items:center}.motion-playback button{display:flex;gap:7px;align-items:center;background:none;color:#b1c2a0;border:0;padding:7px 0;min-height:44px;font-size:12px;white-space:nowrap}.motion-playback button:hover{color:#e1f5c5}.motion-playback svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.motion-playback .play-icon{display:none}.motion-demo[data-paused=true] .play-icon,.motion-demo[data-state=done] .play-icon{display:block}.motion-demo[data-paused=true] .pause-icon,.motion-demo[data-state=done] .pause-icon{display:none}.motion-demo :focus-visible{outline:2px solid #d0ff71;outline-offset:5px}.motion-stage{position:relative;height:470px;isolation:isolate;perspective:1200px}.stage-light{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 60%,#59743528 0,transparent 59%);pointer-events:none}.motion-stage:after{content:'';position:absolute;left:18%;right:18%;height:80px;bottom:32px;z-index:-1;border-radius:50%;background:#050a06;filter:blur(25px);opacity:.5}.motion-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}.motion-routes path{fill:none;stroke-width:1.2}.route-track{stroke:#576b3e;stroke-opacity:.4}.route-active{stroke:#d0ff71;stroke-width:2!important;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}.source-position{position:absolute;width:26%;max-width:285px;left:6%;top:65px;z-index:2;perspective:1000px}.source-sheet{position:relative;padding:20px 22px 19px;background:#edf1e3;color:#273520;border-radius:12px;box-shadow:10px 27px 50px #02080266;transform:rotateY(10deg) rotateZ(-6deg);transform-origin:75% 60%;overflow:hidden;backface-visibility:hidden}.sheet-head{display:flex;align-items:center;gap:7px;font-size:10px;color:#607050;border-bottom:1px solid #cbd5bd;padding-bottom:15px}.sheet-head svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}.sheet-head small{margin-left:auto;font:10px var(--mono);color:#5f7050}.sheet-author{display:flex;align-items:center;gap:9px;margin-top:18px}.sender-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#d5dfc7;font-size:10px;flex-shrink:0}.sheet-author strong,.sheet-author div>span{display:block}.sheet-author strong{font-size:12px;font-weight:550}.sheet-author div>span{font-size:10px;color:#657454;margin-top:3px}.source-sheet h3{font-size:21px;line-height:1.3;letter-spacing:-.025em;font-weight:550;margin:19px 0 12px}.sheet-body{font-size:14px;line-height:1.8;margin:0;max-width:26ch}.sheet-body mark{color:inherit;background:#d9e8bd;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.sheet-reference{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:15px;border-top:1px solid #cbd5bd;font-size:10px;color:#637451}.sheet-reference strong{font:11px var(--mono);color:#324923}.sheet-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,#b8ee6366 93%,#496d20 99%,transparent 100%);transform:translateY(-105%);opacity:0}.object-label{display:block;font-size:11px;color:#90a880;text-align:center;letter-spacing:.01em;margin-top:25px}.core-position{position:absolute;left:50%;top:204px;width:150px;height:150px;transform:translate(-50%,-50%);z-index:3;perspective:800px}.processor-assembly{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(26deg) rotateY(-22deg) rotateZ(-7deg)}.processor-layer,.processor-face{position:absolute;inset:0;border-radius:24px}.processor-layer{background:#192515;outline:1px solid #486039}.layer-back{transform:translateZ(-32px) translate(9px,13px);background:#0d160c;box-shadow:12px 30px 34px #03080285}.layer-middle{transform:translateZ(-16px) translate(4px,6px);background:linear-gradient(150deg,#3f5430,#1e2f17);outline-color:#668844}.processor-face{background:linear-gradient(135deg,#d9f9ab 0%,#98c454 45%,#5d892e 100%);color:#142b09;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:inset 0 2px 2px #edffd3a6,inset 0 -2px 1px #182e084d}.processor-brand{font:550 110px/.77 'DM Sans',sans-serif;letter-spacing:-.04em;padding-bottom:10px}.processor-word{font-size:14px;font-weight:650;letter-spacing:.03em;margin-top:2px}.processor-corners{position:absolute;inset:10px;border:1px solid #36501544;border-radius:16px}.core-ripple{position:absolute;inset:-27px;border:1px solid #9fc854;border-radius:36px;transform:rotate(-7deg);opacity:0}.core-signal{display:flex;justify-content:center;align-items:center;gap:7px;position:absolute;top:calc(100% + 44px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#adca96}.core-signal i{width:5px;height:5px;background:#b6e76e;border-radius:50%}.payload{position:absolute;top:0;left:0;z-index:4;padding:10px 14px;background:#d5f3a9;color:#26371b;box-shadow:0 12px 24px #03080066;border-radius:7px;opacity:0;pointer-events:none;white-space:nowrap}.payload span{display:block;font-size:9px;line-height:1.4;color:#4b6730}.payload strong{display:block;font-size:12px;font-weight:550;margin-top:2px}.validation-tags{position:absolute;left:50%;top:358px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}.validation-tag{display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;color:#c5e6a8;opacity:0}.validation-tag svg{width:16px;height:16px;fill:none;stroke:#c6f58a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.result-position{position:absolute;right:6%;top:51px;width:27%;max-width:290px;z-index:2;perspective:1000px}.result-sheet{padding:19px 22px;background:#24321d;color:#c4d6b3;border-radius:12px;box-shadow:-7px 25px 55px #02060266;transform:rotateY(-10deg) rotateZ(5deg);transform-origin:25% 60%;min-height:308px;position:relative;overflow:hidden}.result-sheet:before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 #c6e2a933;pointer-events:none}.result-sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:9px var(--mono);color:#a8c18e;line-height:1.4}.result-sheet-top>span:first-child{max-width:13ch;letter-spacing:.06em}.result-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#d0ff71;color:#28490d;margin:22px 0 14px;opacity:0}.result-mark svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.result-sheet h3{font-size:25px;font-weight:500;letter-spacing:-.03em;line-height:1.18;color:#ecf7e1;margin:0 0 8px}.result-sheet>p{font-size:11px;color:#b4cd9d;line-height:1.7;margin:0 0 18px}.result-fields{margin:0;padding:0}.result-fields div{display:flex;justify-content:space-between;gap:10px;font-size:10px;line-height:1.5;margin:10px 0}.result-fields dt{color:#a3bd8d}.result-fields dd{color:#e0efcf;text-align:right;margin:0}.result-stamp{display:flex;align-items:center;gap:7px;border-top:1px solid #5c784346;padding-top:14px;margin-top:18px;font-size:11px;color:#d0ff71;opacity:0}.result-stamp i{width:5px;height:5px;background:currentColor;border-radius:50%}.result-position>.object-label{margin-top:25px}.motion-demo[data-scenario=missing]{--demo-accent:#eac382}.motion-demo[data-scenario=missing] .result-mark{background:#ecc788;color:#503619}.motion-demo[data-scenario=missing] .result-stamp{color:#f0cf99}.motion-demo[data-scenario=missing] .result-sheet{background:#332e21}.motion-demo[data-scenario=missing] .result-fields dt,.motion-demo[data-scenario=missing] .result-sheet-top{color:#cfbb98}.motion-demo[data-scenario=missing] .result-sheet>p{color:#d5c7ad}.motion-demo[data-scenario=missing] .result-fields dd{color:#eee3d1}.motion-demo[data-scenario=missing] #route-out-active{stroke:#eac382}.motion-narrative{display:flex;align-items:center;gap:23px;margin:0 35px;padding:27px 0 29px;border-top:1px solid #3b4e2d;min-height:133px}.narrative-count{display:flex;align-items:baseline;gap:7px;flex-shrink:0;font:11px var(--mono);color:#839b72}.narrative-count>span:first-child{font-size:38px;font-weight:400;letter-spacing:-.04em;color:#d2e4be}.narrative-copy{flex:1;max-width:65ch}.narrative-copy h3{font-size:27px;line-height:1.25;font-weight:450;letter-spacing:-.025em;color:#e9f3df;margin:0 0 8px}.narrative-copy p{font-size:13px;line-height:1.75;color:#aac295;margin:0;max-width:66ch}.motion-mode{display:flex;align-items:center;gap:7px;font-size:10px;color:#9eb68b;white-space:nowrap;margin-left:auto}.motion-mode i{display:block;width:5px;height:5px;border-radius:50%;background:#c3e999}.motion-chapters{display:grid;grid-template-columns:repeat(4,1fr);padding:0 35px 26px;gap:9px}.motion-chapters button{position:relative;text-align:left;display:flex;align-items:center;gap:12px;min-height:44px;padding:12px 0 15px;font-size:13px;background:none;border:0;color:#8da67b;overflow:hidden}.motion-chapters button>span{font:10px var(--mono);color:#91a480}.motion-chapters button:before,.motion-chapters button>i{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#394d2c}.motion-chapters button>i{background:#c7f17f;transform:scaleX(0);transform-origin:left}.motion-chapters button[aria-current=step]{color:#e7f7d4}.motion-chapters button[aria-current=step]>span{color:#ccf291}.motion-chapters button:hover{color:#effadd}.motion-noscript{padding:20px 35px;font-size:14px;line-height:1.7}.motion-demo[data-static=true] .result-mark,.motion-demo[data-static=true] .result-stamp{opacity:1}.motion-demo[data-static=true] .route-active{stroke-dashoffset:0}.motion-demo[data-static=true] #demo-play{display:none}
@media(min-width:1400px){.motion-stage{height:500px}.source-position{left:8%;top:76px}.result-position{right:8%;top:62px}.core-position{top:225px}.validation-tags{top:381px}}
@media(max-width:1000px){.motion-toolbar{padding:18px 20px;gap:15px}.motion-cases button{padding:10px;font-size:12px}.motion-playback{gap:12px}.motion-playback button{font-size:11px}.source-position{left:4%;width:27%;top:70px}.source-sheet{padding:17px}.result-position{right:4%;width:28%;top:60px}.result-sheet{padding:17px}.source-sheet h3{font-size:19px}.sheet-body{font-size:13px}.result-sheet h3{font-size:23px}.core-position{width:120px;height:120px;top:208px}.processor-brand{font-size:90px}.processor-word{font-size:12px}.core-signal{top:calc(100% + 40px);font-size:10px}.sheet-author strong{font-size:11px}.sheet-head small{display:none}.motion-mode{display:none}.motion-narrative{margin-inline:25px}.motion-chapters{padding-inline:25px}.motion-stage{height:455px}.validation-tags{top:345px}}
@media(max-width:700px){.motion-toolbar{padding:17px 16px 0;gap:10px;flex-wrap:wrap}.motion-cases{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.motion-cases button{font-size:11px;line-height:1.4;padding:8px 6px;border-color:#34492a;min-height:43px}.motion-playback{margin-left:auto;gap:20px}.motion-playback button{min-height:35px;font-size:11px}.motion-playback svg{width:15px;height:15px}.motion-stage{height:472px;perspective:900px}.source-position{width:188px;max-width:none;left:22px;top:10px;z-index:2}.source-sheet{padding:13px 15px;transform:rotateY(8deg) rotateZ(-6deg)}.sheet-head{font-size:9px;padding-bottom:9px;gap:6px}.sheet-head svg{width:14px;height:14px}.sheet-author{margin-top:11px;gap:7px}.sender-dot{width:22px;height:22px;font-size:8px}.sheet-author strong{font-size:10px}.sheet-author div>span{display:none}.source-sheet h3{font-size:16px;margin:12px 0 7px}.sheet-body{font-size:11px;line-height:1.65}.sheet-reference{margin-top:11px;padding-top:10px;font-size:9px}.sheet-reference strong{font-size:9px}.source-position>.object-label{display:none}.core-position{left:72%;top:208px;width:92px;height:92px;z-index:3}.processor-layer,.processor-face{border-radius:17px}.processor-corners{inset:7px;border-radius:11px}.processor-brand{font-size:68px;padding-bottom:5px}.processor-word{font-size:10px;margin-top:0}.layer-back{transform:translateZ(-20px) translate(5px,9px)}.layer-middle{transform:translateZ(-10px) translate(2px,4px)}.core-signal{top:calc(100% + 24px);font-size:9px;gap:5px}.core-ripple{inset:-15px;border-radius:23px}.result-position{width:225px;max-width:none;top:270px;left:30px;right:auto;z-index:4}.result-sheet{padding:14px 16px;min-height:0;transform:rotateY(-6deg) rotateZ(4deg)}.result-sheet-top{font-size:8px}.result-sheet-top>span:first-child{max-width:none}.result-mark{position:absolute;right:15px;top:40px;width:30px;height:30px;margin:0}.result-mark svg{width:24px;height:24px}.result-sheet h3{font-size:20px;max-width:13ch;margin-top:15px;margin-bottom:5px}.result-sheet>p{font-size:10px;line-height:1.6;max-width:23ch;margin-bottom:12px}.result-fields div{font-size:9px;margin:5px 0;line-height:1.5}.result-fields div:first-child{display:none}.result-stamp{padding-top:9px;margin-top:11px;font-size:10px}.result-position>.object-label{display:none}.validation-tags{left:auto;right:15px;top:324px;transform:none;align-items:flex-end;gap:9px;z-index:2}.validation-tag{font-size:9px;max-width:100px;white-space:normal;line-height:1.5;text-align:right;flex-direction:column;align-items:flex-end}.validation-tag svg{width:14px;height:14px}.payload{padding:7px 9px;border-radius:5px}.payload span{font-size:8px}.payload strong{font-size:10px}.motion-narrative{gap:15px;margin:0 20px;padding:22px 0;min-height:151px;align-items:flex-start}.narrative-count{padding-top:3px;font-size:9px;gap:4px;flex-direction:column}.narrative-count>span:first-child{font-size:28px}.narrative-copy h3{font-size:23px;line-height:1.2;max-width:19ch;margin-bottom:9px}.narrative-copy p{font-size:12px;line-height:1.7}.motion-chapters{padding:0 20px 20px;gap:8px}.motion-chapters button{font-size:11px;gap:8px;align-items:flex-start;flex-direction:column;padding:9px 0 13px;min-height:60px}.motion-chapters button>span{font-size:9px}.motion-stage:after{left:20%;right:10%;bottom:20px;height:110px}.stage-light{background:radial-gradient(ellipse at 68% 43%,#7ba34924 0,transparent 58%)}.motion-noscript{padding-inline:20px}}
@media(max-width:370px){.source-position{left:18px;width:176px}.core-position{left:73%;width:80px;height:80px}.processor-brand{font-size:60px}.result-position{left:22px;width:210px}.validation-tags{right:10px}.motion-narrative{margin-inline:17px;gap:12px}.narrative-copy h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.motion-cases button{transition:none}.source-sheet,.result-sheet,.processor-assembly{transform:none}.sheet-scan{display:none}.processor-layer{display:none}}

/* Keep the mobile story readable when the spatial layers overlap. */
@media(max-width:700px){.motion-stage{height:505px}.core-signal,.validation-tags{display:none}.result-sheet h3{max-width:none;padding-right:35px}.result-mark{top:42px}.result-sheet>p{max-width:none}.result-position{top:270px}.result-sheet{padding-bottom:16px}}