/* An editorial motion study of context becoming a useful message. */
.method-frame-crm{background:#24323a}.crm-sequence{position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;color:#ede5d7;background:radial-gradient(ellipse at 85% 45%,#58615a44,transparent 67%),#24323a}.crm-sequence::before{content:'';position:absolute;width:75%;aspect-ratio:1;left:38%;top:0;border:1px solid #b1b9a415;border-radius:50%;pointer-events:none}.crm-sequence::after{content:'';position:absolute;width:65%;aspect-ratio:1;left:43%;top:7%;border:1px solid #b1b9a412;border-radius:50%;pointer-events:none;z-index:-1}.crm-sequence-top{position:absolute;left:25px;right:25px;top:22px;display:flex;justify-content:space-between;align-items:center;font:8px/1.5 var(--mono);letter-spacing:.04em;color:#b6b9a8}.crm-live-mark{color:#c89878;font-size:7px}.crm-sequence-heading{position:absolute;top:58px;left:25px;font-size:clamp(26px,2.65vw,43px);font-weight:400;line-height:1.02;letter-spacing:-.045em;z-index:5;pointer-events:none}.crm-sequence-heading em{font-style:normal;color:#c9a889}.crm-context-label{position:absolute;top:35%;left:25px;font:6px/1.5 var(--mono);color:#98aa9f;letter-spacing:.04em}.crm-contexts{position:absolute;top:40%;left:25px;width:31%;display:flex;flex-direction:column;gap:10px;z-index:5}.crm-contexts>button{position:relative;display:grid;grid-template-columns:17px 1fr;gap:2px 9px;text-align:left;min-height:48px;padding:9px 11px;background:#31434a;color:#c8d1c4;border:1px solid #9cae9e2a;transition:background .3s,border-color .3s,transform .3s}.crm-contexts>button>span{font:7px/1.5 var(--mono);color:#859d90;grid-row:1/3;padding-top:3px}.crm-contexts strong{font:400 14px/1.2 var(--sans);letter-spacing:-.02em}.crm-contexts small{font:9px/1.3 var(--sans);color:#9eafa1}.crm-contexts>button[aria-pressed=true]{background:#c0a185;color:#283a3b;border-color:#d8b798;transform:translateX(4px)}.crm-contexts>button[aria-pressed=true]>span{color:#76634d}.crm-contexts>button[aria-pressed=true]>small{color:#5f6555}.crm-contexts>button:hover{border-color:#c9b89a80}.crm-contexts>button:focus-visible,.crm-sequence-replay:focus-visible{outline:2px solid #dfb38a;outline-offset:4px}.crm-connection-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.crm-line-base{stroke:#a1b59e35;stroke-width:1}.crm-line-active{stroke:#d5b38d;stroke-width:1.7;stroke-dasharray:1;stroke-dashoffset:0}.crm-connection-dot{fill:#d5b38d}.crm-envelope{position:absolute;top:47%;left:51%;width:44%;height:32%;transform:rotate(5deg);pointer-events:none;z-index:2}.crm-envelope-back{position:absolute;inset:0;background:#a57659;box-shadow:0 18px 24px #101d2640}.crm-envelope-back::before{content:'';position:absolute;inset:-49% 0 0;background:#bc9473;clip-path:polygon(0 34%,50% 0,100% 34%,100% 100%,0 100%)}.crm-envelope-front{position:absolute;inset:0;background:#ad8160;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 -2px 2px #473c301f);z-index:4}.crm-envelope-front::after{content:'';position:absolute;inset:0;background:#bc9371;clip-path:polygon(0 100%,50% 38%,100% 100%)}.crm-letter{position:absolute;top:33%;left:49%;width:44%;height:43%;z-index:3;background:#f3ecde;color:#3a443e;box-shadow:0 18px 35px #0d1b233d;transform:rotate(-5deg);transform-origin:50% 100%;overflow:hidden}.crm-letter-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #c2bca950;font:7px/1.5 var(--mono);color:#96856d}.crm-letter-head>span:last-child{font:17px var(--sans);color:#956546}.crm-letter-copy{padding:13px 17px 15px}.crm-letter-copy>span:first-child{font:6px/1.5 var(--mono);letter-spacing:.02em;color:#a27f58}.crm-letter-copy>strong{font:400 clamp(24px,2.7vw,41px)/.98 var(--sans);letter-spacing:-.05em;display:block;margin-top:13px}.crm-letter-copy>p{font:10px/1.6 var(--sans);max-width:25ch;color:#7a806d;margin-top:12px}.crm-letter-next{display:flex;justify-content:space-between;align-items:center;gap:10px;font:9px/1.5 var(--sans);border-top:1px solid #c4bdab80;padding-top:11px;margin-top:14px;color:#786248}.crm-letter-next i{font:16px var(--sans);font-style:normal}.crm-sequence-bottom{position:absolute;left:25px;right:25px;bottom:24px;display:flex;align-items:end;justify-content:space-between;gap:12px;z-index:5}.crm-sequence-bottom>div>span{font:6px/1.5 var(--mono);letter-spacing:.06em;color:#98ad9c}.crm-sequence-bottom p{font:400 16px/1.4 var(--sans);letter-spacing:-.02em;color:#d2d6c7;margin-top:9px}.crm-sequence-bottom p>i{font-style:normal;color:#a78363;margin-inline:8px}.crm-sequence-replay{background:none;border:1px solid #a5b39b4a;color:#bcc7b4;font:9px var(--sans);padding:9px 11px;white-space:nowrap}.crm-sequence-replay>span{font-size:14px;margin-left:8px}.crm-sequence.is-playing .crm-line-active{animation:crm-route-draw 1.25s .25s ease both}.crm-sequence.is-playing .crm-connection-dot{animation:crm-signal-bloom 1s .75s ease both;transform-origin:257px 264px}.crm-sequence.is-playing .crm-letter{animation:crm-letter-rise 2.2s .6s cubic-bezier(.18,.75,.18,1) both}.crm-sequence.is-playing .crm-letter-copy{animation:crm-copy-in 1s 1.8s ease both}.crm-sequence.is-playing .crm-envelope{animation:crm-envelope-settle 1.8s .65s cubic-bezier(.2,.7,.2,1) both}.crm-sequence.is-playing .crm-live-mark{animation:crm-signal-light 2.5s ease both}
@keyframes crm-route-draw{from{stroke-dashoffset:1;opacity:.1}to{stroke-dashoffset:0;opacity:1}}@keyframes crm-letter-rise{0%{transform:translateY(50px) rotate(5deg) scale(.94);opacity:0}24%{opacity:1}100%{transform:translateY(0) rotate(-5deg) scale(1);opacity:1}}@keyframes crm-copy-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes crm-envelope-settle{from{transform:translateY(10px) rotate(0)}to{transform:translateY(0) rotate(5deg)}}@keyframes crm-signal-bloom{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes crm-signal-light{0%,40%{opacity:.3}100%{opacity:1}}
@media(max-width:1050px){.crm-sequence-top{left:20px;right:20px;font-size:7px}.crm-sequence-heading{left:20px;font-size:30px}.crm-context-label{left:20px;font-size:5px}.crm-contexts{left:20px;width:32%;gap:9px}.crm-contexts>button{padding:8px;grid-template-columns:13px 1fr;gap:2px 5px}.crm-contexts strong{font-size:12px}.crm-contexts small{font-size:8px}.crm-letter{left:49%;width:45%;height:45%}.crm-letter-head{padding:10px 12px;font-size:6px}.crm-letter-copy{padding:11px 13px}.crm-letter-copy>strong{font-size:28px;margin-top:10px}.crm-letter-copy>p{font-size:9px;margin-top:10px}.crm-letter-copy>span:first-child{font-size:5px}.crm-letter-next{font-size:8px;margin-top:12px;padding-top:9px}.crm-sequence-bottom{left:20px;right:20px;bottom:23px}.crm-sequence-bottom p{font-size:13px}.crm-sequence-bottom p>i{margin-inline:5px}.crm-sequence-replay{font-size:8px;padding:7px 9px}.crm-sequence-replay>span{margin-left:4px}.crm-sequence-bottom>div>span{font-size:5px}}
@media(max-width:750px){.method-inline-scene:has(.crm-sequence){height:450px}.crm-sequence-top{left:18px;right:18px;top:21px;font-size:6px}.crm-sequence-heading{left:18px;top:57px;font-size:31px}.crm-context-label{left:18px;top:34%;font-size:5px}.crm-contexts{top:39%;left:18px;width:32%;gap:10px}.crm-contexts>button{min-height:50px;padding:8px 7px;gap:2px 5px;grid-template-columns:11px 1fr}.crm-contexts>button>span{font-size:6px}.crm-contexts strong{font-size:12px}.crm-contexts small{font-size:8px}.crm-letter{top:35%;left:49%;width:45%;height:42%;transform:rotate(-5deg)}.crm-letter-head{padding:10px;font-size:5px}.crm-letter-copy{padding:10px}.crm-letter-copy>strong{font-size:27px;margin-top:11px}.crm-letter-copy>p{font-size:9px;line-height:1.6;margin-top:11px}.crm-letter-next{font-size:7px;line-height:1.4;margin-top:12px;padding-top:9px;gap:7px}.crm-letter-next i{font-size:13px}.crm-letter-copy>span:first-child{font-size:5px}.crm-envelope{top:48%;left:51%;width:44%;height:32%}.crm-sequence-bottom{left:18px;right:18px;bottom:22px;gap:8px}.crm-sequence-bottom p{font-size:13px;line-height:1.5;max-width:22ch}.crm-sequence-bottom>div>span{font-size:5px}.crm-sequence-bottom p>i{margin-inline:4px}.crm-sequence-replay{font-size:8px;padding:7px}.crm-sequence-replay>span{margin-left:3px;font-size:12px}}
@media(max-width:360px){.method-inline-scene:has(.crm-sequence){height:445px}.crm-sequence-heading{font-size:29px;left:16px}.crm-sequence-top,.crm-context-label,.crm-contexts{left:16px}.crm-contexts{width:33%}.crm-contexts>button{grid-template-columns:1fr;gap:3px;padding:8px}.crm-contexts>button>span{display:none}.crm-contexts strong{font-size:11px}.crm-contexts small{font-size:7px}.crm-letter{left:51%;width:44%;height:43%}.crm-letter-copy{padding:10px 9px}.crm-letter-copy>strong{font-size:24px}.crm-letter-copy>p{font-size:8px}.crm-letter-copy>span:first-child{font-size:4px}.crm-letter-next{font-size:7px}.crm-envelope{left:53%;width:43%}.crm-sequence-bottom{left:16px;right:16px;gap:5px}.crm-sequence-bottom p{font-size:11px}.crm-sequence-bottom p>i{margin-inline:3px}.crm-sequence-replay{font-size:7px;padding:7px 6px}}
.motion-paused .crm-sequence *{animation:none!important;transition:none!important}.motion-paused .crm-letter-copy{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.crm-sequence *{animation:none!important;transition:none!important}.crm-sequence-replay{display:none}.crm-letter-copy{opacity:1;transform:none}.crm-contexts>button[aria-pressed=true]{transform:none}}
/* Reserve enough paper for the complete message and its next step. */
.crm-letter{top:29%;height:53%}.crm-letter-head{padding:10px 14px}.crm-letter-copy{padding:11px 14px}.crm-letter-copy>strong{font-size:clamp(27px,2.5vw,37px);margin-top:10px}.crm-letter-copy>p{margin-top:10px}.crm-letter-next{margin-top:12px;padding-top:9px}
@media(max-width:1050px){.crm-letter{top:29%;height:53%}.crm-letter-head{padding:9px 11px}.crm-letter-copy{padding:10px 12px}.crm-letter-copy>strong{font-size:28px}.crm-letter-copy>p{font-size:9px}.crm-letter-next{margin-top:10px;padding-top:8px}}
@media(max-width:750px){.crm-letter{top:30%;height:52%}.crm-letter-head{padding:9px 10px}.crm-letter-copy{padding:10px}.crm-letter-copy>strong{font-size:26px}.crm-letter-copy>p{margin-top:10px}.crm-letter-next{margin-top:10px;padding-top:8px}}
@media(max-width:360px){.crm-letter{top:30%;height:53%}.crm-letter-head{padding:9px}.crm-letter-copy{padding:10px 9px}.crm-letter-copy>strong{font-size:24px}}
.crm-letter{top:27%;height:57%}
@media(max-width:750px){.crm-letter{top:28%;height:57%}}
@media(max-width:360px){.crm-letter{top:28%;height:57%}}
@media(max-width:750px){.crm-sequence-bottom p{font-size:11px;max-width:none;white-space:nowrap}.crm-sequence-bottom p>i{margin-inline:3px}}
@media(max-width:360px){.crm-sequence-bottom p{font-size:9.5px}.crm-sequence-bottom p>i{margin-inline:2px}}
.crm-letter-copy{padding-bottom:4px}
.method-canvas:has(.method-frame-crm.is-active){background:#24323a}