/* Charte B. The host page owns its headings, layout, header and footer. */
@font-face{font-family:DM;src:url('/_home-v4/assets/dm-sans-400.ttf');font-weight:400}
@font-face{font-family:DM;src:url('/_home-v4/assets/dm-sans-600.ttf');font-weight:600}
@font-face{font-family:Jakarta;src:url('/_home-v4/assets/plus-jakarta-sans-700.ttf');font-weight:700}
[data-tool-motion]{--tm-blue:var(--blue,#4458AC);--tm-lime:var(--lime,#E4EE99);--tm-ink:var(--ink,#263153);--tm-paper:var(--paper,#FCFCFF);--tm-tint:var(--tint,#EEF0FC);font-family:DM,Arial,sans-serif;color:var(--tm-ink)}
[data-tool-motion] *,[data-tool-motion] *:before,[data-tool-motion] *:after{box-sizing:border-box}
[data-tool-motion-demo]{width:100%}
[data-tool-motion] .tm-player{position:relative;width:100%;max-width:1260px;aspect-ratio:1440/820;margin:auto;background:var(--tm-paper);border-radius:16px;overflow:hidden;outline-offset:6px;touch-action:pan-y;cursor:pointer;box-shadow:0 24px 70px -34px #4458AC66}
[data-tool-motion] .tm-player:focus-visible,[data-tool-motion] .tm-roll:focus-visible{outline:3px solid var(--tm-blue)}
[data-tool-motion] .tm-stage,[data-tool-motion] .tm-planes,[data-tool-motion] .tm-labels{position:absolute;inset:0;overflow:hidden}
[data-tool-motion] .tm-plane{position:absolute;overflow:hidden}
[data-tool-motion] .tm-plane img,[data-tool-motion] .tm-plane video{position:absolute;max-width:none;object-fit:fill;pointer-events:none}
[data-tool-motion] .tm-label{position:absolute;font:600 14px/1.25 DM,Arial,sans-serif;white-space:pre-line;pointer-events:none}
[data-tool-motion] .tm-label-text{background:var(--tm-paper);align-items:center;color:var(--tm-ink)}
[data-tool-motion] .tm-label-button,[data-tool-motion] .tm-label-progress{place-items:center;border-radius:7px;background:#273CF5;color:var(--tm-paper)}
[data-tool-motion] .tm-label-progress{background:linear-gradient(to right,#3449F4 var(--progress),#C9D0FF var(--progress))}
[data-tool-motion] .tm-receipt{position:absolute;pointer-events:none;border:1.5px solid var(--tm-blue);border-radius:8px;box-shadow:0 0 0 4px rgb(68 88 172 / calc(var(--glow)*.14)),0 0 25px rgb(68 88 172 / calc(var(--glow)*.45));transform-origin:50% 50%}
[data-tool-motion] .tm-cursor{position:absolute;z-index:6;width:24px;height:30px;pointer-events:none}
[data-tool-motion] .tm-cursor svg{display:block;width:100%;height:100%}
[data-tool-motion] .tm-halo{position:absolute;z-index:5;width:44px;height:44px;margin:-22px 0 0 -22px;border:4px solid var(--tm-blue);border-radius:50%;box-shadow:0 0 0 5px #E4EE99cc;background:#E4EE9944;pointer-events:none;opacity:0}
[data-tool-motion] .tm-press{position:absolute;z-index:4;border-radius:7px;background:var(--tm-ink);box-shadow:inset 0 3px 6px var(--tm-ink);transform:translate(-50%,-50%);pointer-events:none}
[data-tool-motion] .tm-confetti{position:absolute;z-index:3;left:55%;top:48%;pointer-events:none}
[data-tool-motion] .tm-confetti i{position:absolute;width:10px;height:10px}
[data-tool-motion] .tm-confetti i:nth-child(3n){width:8px;height:8px;border-radius:50%}
[data-tool-motion-document]{width:100%;background:var(--tm-lime)}
[data-tool-motion] .tm-roll{position:relative;width:100%;height:var(--motion-document-height,calc(100svh - 64px));min-height:400px;overflow:hidden;outline-offset:-4px;overscroll-behavior:auto}
[data-tool-motion] .tm-sheet{position:absolute;left:50%;top:0;width:calc(100% - 480px);max-width:640px;margin:0;padding:4px 24px 30px;transform-origin:50% 0;transition:transform 420ms cubic-bezier(.22,1,.36,1);will-change:transform}
[data-tool-motion] .tm-part{position:relative;margin:0 0 22px;padding:20px 24px;background:var(--tm-paper);border-radius:12px;box-shadow:0 8px 22px -16px #26315366;transition:margin 700ms cubic-bezier(.22,1,.36,1),border-radius 700ms,box-shadow 700ms,transform 180ms;transform-origin:center}
[data-tool-motion] .tm-part pre{margin:0;font:400 17px/1.55 DM,Arial,sans-serif;white-space:pre-wrap;color:var(--tm-ink)}
[data-tool-motion] .tm-heading{font:700 1em/1.55 Jakarta,DM,Arial,sans-serif}
[data-tool-motion] .tm-note{position:absolute;top:22px;width:200px;font:400 15px/1.45 DM,Arial,sans-serif;color:var(--tm-blue);transition:opacity 420ms}
[data-tool-motion] .tm-note strong{display:block;margin-bottom:6px;font:600 22px/1.2 DM,Arial,sans-serif}
[data-tool-motion] .tm-note.left{right:calc(100% + 58px);text-align:right}
[data-tool-motion] .tm-note.right{left:calc(100% + 58px);text-align:left}
[data-tool-motion] .tm-note:after{position:absolute;top:12px;width:46px;height:1px;background:var(--tm-blue);content:''}
[data-tool-motion] .tm-note:before{position:absolute;top:9px;width:7px;height:7px;border-radius:50%;background:var(--tm-blue);content:''}
[data-tool-motion] .tm-note.left:after{left:calc(100% + 12px)}
[data-tool-motion] .tm-note.right:after{right:calc(100% + 12px)}
[data-tool-motion] .tm-note.left:before{left:calc(100% + 10px)}
[data-tool-motion] .tm-note.right:before{right:calc(100% + 10px)}
[data-tool-motion] .tm-note.left{--tm-dot-start:46px}
[data-tool-motion] .tm-note.right{--tm-dot-start:-46px}
[data-tool-motion] .tm-note.left:after{transform-origin:right}
[data-tool-motion] .tm-note.right:after{transform-origin:left}
[data-tool-motion] .tm-part:hover{transform:scale(1.025);box-shadow:0 12px 35px -18px #4458AC99}
[data-tool-motion] .tm-part.is-focused pre{animation:tm-part-in 600ms both}
[data-tool-motion] .tm-part.is-focused .tm-note{animation:tm-note-in 400ms both}
[data-tool-motion] .tm-part.is-focused .tm-note:after{animation:tm-line-in 420ms both}
[data-tool-motion] .tm-part.is-focused .tm-note:before{animation:tm-dot-in 520ms both}
[data-tool-motion] .is-assembled .tm-part{margin-bottom:0;border-radius:0;box-shadow:none;transform:none!important;animation:none!important}
[data-tool-motion] .is-assembled .tm-part:first-child{border-radius:12px 12px 0 0}
[data-tool-motion] .is-assembled .tm-part:last-child{border-radius:0 0 12px 12px}
[data-tool-motion] .is-assembled .tm-note{opacity:0;pointer-events:none}
@keyframes tm-part-in{from{opacity:.35;transform:translateY(7px)}40%{opacity:1;transform:scale(1.025)}to{opacity:1;transform:none}}
@keyframes tm-note-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes tm-line-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tm-dot-in{from{opacity:0;transform:translateX(var(--tm-dot-start)) scale(.4)}to{opacity:1;transform:none}}
@media(max-width:1000px) and (min-width:761px){[data-tool-motion] .tm-sheet{width:calc(100% - 340px)}[data-tool-motion] .tm-note{width:130px;font-size:12px}[data-tool-motion] .tm-note strong{font-size:17px}}
@media(max-width:760px){
 [data-tool-motion] .tm-player{aspect-ratio:342/410;max-width:342px;border-radius:14px}
 [data-tool-motion] .tm-cursor{width:32px;height:40px}
 [data-tool-motion] .tm-halo{width:26px;height:26px;margin:-13px 0 0 -13px;border-width:2px;box-shadow:0 0 0 3px #E4EE99cc}
 [data-tool-motion] .tm-roll{height:var(--motion-document-height,calc(100svh - 120px))}
 [data-tool-motion] .tm-sheet{width:100%;max-width:420px;padding:4px 0 24px}
 [data-tool-motion] .tm-part{padding:20px;margin-bottom:22px}
 [data-tool-motion] .tm-part pre{font-size:16px}
 [data-tool-motion] .tm-note{position:relative;top:auto;left:auto!important;right:auto!important;width:auto;text-align:left!important;font-size:13px;margin:0 0 24px;padding-left:16px;max-height:140px;transition:opacity 420ms,max-height 700ms,margin 700ms}
 [data-tool-motion] .tm-note strong{font-size:20px}
 [data-tool-motion] .tm-note:after{left:0!important;right:auto!important;top:8px;width:1px;height:calc(100% + 8px)}
 [data-tool-motion] .tm-note:before{left:-3px!important;right:auto!important;top:8px}
 [data-tool-motion] .tm-part.is-focused .tm-note:after{animation-name:tm-line-mobile;transform-origin:top}
 [data-tool-motion] .tm-part.is-focused .tm-note:before{animation-name:tm-dot-mobile}
 [data-tool-motion] .is-assembled .tm-note{max-height:0;margin-bottom:0;overflow:hidden}
 [data-tool-motion] .is-assembled .tm-part pre{font-size:18px}
}
@keyframes tm-line-mobile{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tm-dot-mobile{from{opacity:0;transform:translateY(14px) scale(.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 [data-tool-motion] *,[data-tool-motion] *:before,[data-tool-motion] *:after{animation:none!important;transition:none!important}
 [data-tool-motion] .tm-cursor,[data-tool-motion] .tm-halo,[data-tool-motion] .tm-press,[data-tool-motion] .tm-confetti,[data-tool-motion] .tm-receipt{display:none!important}
 [data-tool-motion] .tm-part:hover{transform:none}
}

/* Export uses native pieces of the format panel, then rejoins the actual panel. */
[data-tool-motion] .tm-native-crop{position:relative;overflow:hidden}
[data-tool-motion] .tm-native-crop img{position:absolute;height:auto;max-width:none;pointer-events:none}
[data-tool-motion] .tm-format-final{position:absolute;transition:left 120ms linear;pointer-events:none}
[data-tool-motion] .tm-format-final[hidden]{display:none}

/* QA · mobile conversation camera: retain the first character inside its viewport. */
@media(max-width:760px){
 [data-tool-motion-demo][data-motion-frame="conversation"] .tm-plane{translate:24px 0}
}

/* QA: the Export tool picker must fit as a whole on a phone. Keep native pixels
   and the emphasis in the same coordinate system while widening this camera. */
@media(max-width:760px){
 [data-tool-motion-demo][data-tool="export"][data-motion-frame="arrival"] .tm-stage{
  width:238.096%;height:238.096%;overflow:visible;transform:translate(8px,24px) scale(.42);transform-origin:0 0;
 }
 [data-tool-motion-demo][data-tool="export"][data-motion-frame="arrival"] .tm-planes{overflow:visible
 }
}