@font-face{font-family:Bricolage;src:url('./assets/bricolage.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Plex;src:url('./assets/plex.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--paper:#f5f5f0;--ink:#22271f;--orange:#ff5028;--lime:#d8ef67;--line:#252d2126;--mono:Plex,monospace;--pad:4.4vw;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.35,.38,1)}
*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow:hidden}body{font-family:Bricolage,Arial,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background .8s}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:5px}::selection{background:var(--orange);color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-60px;padding:12px;background:var(--orange);z-index:50}.skip-link:focus{top:15px}.page-grain{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.header{height:110px;position:absolute;left:var(--pad);right:var(--pad);top:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);z-index:10}.brand{display:flex;align-items:center;gap:23px}.wordmark{font-size:52px;font-weight:800;letter-spacing:-5px;line-height:1;display:flex;align-items:start}.brand-star{font-size:27px;color:var(--orange);line-height:1;letter-spacing:0;margin:3px 0 0 7px}.brand-caption{font-family:var(--mono);font-size:9px;line-height:1.65;letter-spacing:.025em}.header-note{font-family:var(--mono);font-size:10px;letter-spacing:.025em;line-height:1.65;position:absolute;left:50%;transform:translateX(-50%)}.contact{display:flex;gap:25px;align-items:center;background:var(--orange);padding:16px 19px;border-radius:5px;font-family:var(--mono);font-size:12px;transition:background .2s,transform .2s}.contact:hover{background:var(--lime);transform:rotate(-2deg)}.contact-symbol{font-size:22px;line-height:1}.intro{position:absolute;left:var(--pad);right:var(--pad);top:16%;display:flex;justify-content:space-between;align-items:end;z-index:5;pointer-events:none}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.025em;display:flex;align-items:center;gap:8px;margin:0 0 19px}.eyebrow>span{font-size:8px;color:var(--orange)}h1{font-size:clamp(68px,9.25vw,170px);font-weight:800;line-height:.86;letter-spacing:-.065em;margin:0}.title-line{display:block;overflow:visible}.second-line{position:relative}.title-word{display:inline-block;position:relative;color:var(--orange);transition:color .65s,transform .75s var(--spring)}.title-word:after{content:'';position:absolute;left:-1%;right:-1%;bottom:0;height:14%;background:var(--lime);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}.title-asterisk{font-size:.62em;position:absolute;left:102%;top:10%;font-weight:400;color:var(--orange);animation:star-wiggle 10s ease-in-out infinite}.intro-copy{padding-bottom:7px;max-width:280px;width:23%;margin-right:1%}.intro-copy p{font-size:25px;line-height:1.2;letter-spacing:-.035em;margin:0 0 20px}.crossed{position:relative;white-space:nowrap}.crossed:after{content:'';position:absolute;left:-2%;right:-4%;top:54%;height:2px;background:var(--orange);transform:rotate(-7deg)}.intro-description{font-size:15px;line-height:1.6;color:#666c62;display:block;max-width:265px}
.experiment{position:absolute;inset:47% var(--pad) 93px;outline:none}.stage-header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:#7e8579;z-index:3}.demo-label{display:flex;align-items:center;gap:7px}.demo-label i{width:6px;height:6px;border:1px solid #828b7d;border-radius:50%}.stage{position:absolute;inset:22px -1vw 117px;isolation:isolate}.connections{position:absolute;inset:0;height:100%;width:100%;overflow:visible;z-index:0}.connection{fill:none;stroke:#6d796c;stroke-width:1.5;stroke-dasharray:4 6;opacity:.25;transition:stroke .7s,opacity .7s}.flow-pulse{fill:none;stroke:var(--orange);stroke-width:3;stroke-dasharray:8 500;stroke-linecap:round;opacity:0;animation:flow-pulse 4s linear infinite;transition:opacity .4s}.stage-watermark{position:absolute;left:0;right:0;bottom:0;overflow:hidden;height:110px;z-index:-1;opacity:.055;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.stage-watermark span{display:block;width:max-content;font-size:150px;font-weight:800;letter-spacing:-.07em;line-height:1;animation:ticker 40s linear infinite}.task{--x:25%;--y:35%;--angle:-9deg;position:absolute;left:var(--x);top:var(--y);width:232px;min-height:82px;background:#fffef8;border:1px solid #282e2538;box-shadow:4px 5px 0 #2630210b;border-radius:6px;padding:17px 17px;display:flex;gap:13px;align-items:center;transform:translate(-50%,-50%) rotate(var(--angle));transition:left 1s var(--spring),top 1s var(--spring),transform 1s var(--spring),background .6s,box-shadow .6s,border-color .6s;z-index:4;animation:card-wander 8s ease-in-out infinite;will-change:transform}.task-0{--x:21%;--y:28%;--angle:-10deg;animation-delay:-1s}.task-1{--x:34%;--y:73%;--angle:7deg;animation-delay:-4s}.task-2{--x:78%;--y:44%;--angle:-7deg;animation-delay:-6s}.task-icon{width:30px;height:30px;flex-shrink:0}.task-icon svg{width:26px;height:26px}.task-content{min-width:0}.task-label{font-size:16px;font-weight:600;line-height:1.25;display:block;letter-spacing:-.025em}.task-meta{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.02em;margin-top:9px;color:#8a8e82;white-space:nowrap}.task-done{display:none;position:absolute;right:12px;top:12px;font-size:12px;color:#465d24}.loose-label{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:-.05em;z-index:2;transition:opacity .4s,transform .7s;animation:label-wander 6s ease-in-out infinite}.loose-one{left:6%;top:72%;transform:rotate(-6deg);color:#ac6f60}.loose-two{right:3%;top:11%;transform:rotate(4deg);color:#869373;animation-delay:-3s}.core{position:absolute;left:53%;top:45%;width:158px;height:166px;transform:translate(-50%,-50%) rotate(8deg);transition:left 1s var(--spring),top 1s var(--spring),transform 1s var(--spring);z-index:5}.core-shadow{position:absolute;inset:0;background:#c33617;border-radius:18px;transform:translate(7px,9px);transition:transform .4s}.core-face{position:absolute;inset:0;background:var(--orange);border:1.5px solid #21271b;border-radius:18px;box-shadow:inset 0 0 0 6px #ffffff1c;display:flex;align-items:center;flex-direction:column;justify-content:center;overflow:hidden}.core-glyph{position:absolute;height:116px;width:116px;opacity:.13;right:-30px;top:-20px;transform:rotate(10deg)}.core-type{font-size:61px;font-weight:800;letter-spacing:-6px;line-height:1;margin-left:-6px}.core-caption{font-family:var(--mono);font-size:7px;letter-spacing:.07em;margin-top:14px}.core-screw{position:absolute;width:5px;height:5px;border:1px solid #22271f88;border-radius:50%}.screw-one{left:12px;top:12px}.screw-two{right:12px;bottom:12px}.output{position:absolute;left:81%;top:52%;width:230px;background:var(--lime);border:1px solid #22271f;border-radius:6px;padding:21px 22px 21px;box-shadow:5px 5px 0 #22271f;transform:translate(-50%,-50%) rotate(7deg) scale(.7);opacity:0;transition:transform .7s .22s var(--spring),opacity .4s .1s;z-index:5;pointer-events:none}.output-check{position:absolute;top:14px;right:14px;font-size:23px}.output-eyebrow{font-family:var(--mono);font-size:8px;display:block;margin-bottom:15px}.output strong{font-size:26px;line-height:1;letter-spacing:-.055em;display:block;font-weight:700}.output-caption{font-size:12px;display:block;margin-top:9px;color:#59632f}.stage-note{position:absolute;bottom:6%;right:2%;display:flex;gap:12px;align-items:start;transition:opacity .3s;z-index:3}.note-number{font-family:var(--mono);font-size:8px;margin-top:3px;color:#818977}.stage-note p{font-size:16px;line-height:1.2;letter-spacing:-.035em;margin:0}.experiment-controls{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;border-top:1px solid var(--line);padding-top:20px}.control-label{font-family:var(--mono);font-size:8px;display:block;color:#808676;letter-spacing:.04em;margin-bottom:10px}.categories{display:flex;gap:3px}.categories button{font-size:13px;font-weight:500;padding:10px 16px;min-height:44px;border:1px solid transparent;border-radius:4px;background:transparent;transition:background .2s,transform .2s}.categories button:hover{background:#232c2010}.categories button[aria-selected='true']{border-color:var(--ink);background:var(--ink);color:var(--paper)}.switch-control{justify-self:center;position:relative}.switch-hint{position:absolute;top:-28px;left:50%;transform:translateX(-50%) rotate(-4deg);font-size:14px;font-style:italic;white-space:nowrap;transition:color .4s}.automation-switch{display:flex;align-items:center;justify-content:space-between;gap:19px;min-height:63px;border:1px solid var(--ink);border-radius:7px;background:var(--ink);padding:10px 13px 10px 24px;min-width:285px;color:#f5f5f0;box-shadow:0 4px 0 #00000020;transition:background .4s,color .4s,transform .2s;position:relative}.automation-switch:active{transform:translateY(3px);box-shadow:none}.switch-name,.switch-state{font-family:var(--mono);font-size:11px;letter-spacing:.04em}.switch-state{margin-left:3px;color:#b3b7ad}.switch-track{width:69px;height:39px;border:1px solid #7c8473;border-radius:25px;position:relative;flex-shrink:0}.switch-knob{position:absolute;width:31px;height:31px;top:3px;left:3px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;transition:transform .4s var(--spring),background .4s}.switch-knob svg{width:17px;height:17px}.control-aside{justify-self:end;display:flex;align-items:center;gap:14px;padding-bottom:9px}.aside-star{font-size:42px;color:var(--orange);transition:transform 1s var(--spring)}.control-aside p{font-size:14px;line-height:1.4;margin:0;letter-spacing:-.02em;color:#727b6c}.control-aside strong{font-weight:500;color:var(--ink)}.footer{position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:57px;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:8px;color:#858b7d}.footer-center{color:#969d8d}.footer button{border:0;background:transparent;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:8px;color:#636c59;min-height:44px;padding:0 4px}.footer svg{width:12px;height:12px}
body.automated{background:#eff2e4}.automated .title-word{color:var(--ink);transform:rotate(-1deg)}.automated .title-word:after{transform:scaleX(1)}.automated .title-asterisk{color:var(--orange);animation:star-turn 8s linear infinite}.automated .task{--angle:0deg;--x:22%;animation:none;transform:translate(-50%,-50%);background:#fafcf4;border-color:#69775366;box-shadow:3px 3px 0 #73854811}.automated .task-0{--y:16%}.automated .task-1{--y:50%}.automated .task-2{--y:84%}.automated .task-meta{color:#6c8250}.automated .task-done{display:block}.automated .core{transform:translate(-50%,-50%) rotate(-3deg);top:50%}.automated .core-shadow{transform:translate(4px,5px)}.automated .core-glyph{animation:star-turn 15s linear infinite}.automated .output{opacity:1;transform:translate(-50%,-50%) rotate(3deg) scale(1)}.automated .loose-label{opacity:0;transform:translateY(-20px)}.automated .stage-note{opacity:0}.automated .connection{stroke:#a2b084;stroke-dasharray:none;opacity:.7}.automated .flow-pulse{opacity:1}.automated .automation-switch{background:var(--lime);color:var(--ink)}.automated .switch-state{color:#40511d}.automated .switch-knob{transform:translateX(30px);background:var(--ink);color:var(--lime)}.automated .switch-track{border-color:#6e823c}.automated .aside-star{transform:rotate(90deg)}.automated .stage-watermark{opacity:.045}.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}
@keyframes star-wiggle{0%,80%,100%{transform:rotate(0)}90%{transform:rotate(90deg)}}@keyframes star-turn{to{transform:rotate(360deg)}}@keyframes card-wander{0%,100%{transform:translate(-50%,-50%) rotate(var(--angle))}50%{transform:translate(calc(-50% + 6px),calc(-50% - 9px)) rotate(calc(var(--angle) + 3deg))}}@keyframes label-wander{0%,100%{translate:0 0}50%{translate:2px -9px}}@keyframes flow-pulse{to{stroke-dashoffset:-1016}}@keyframes ticker{to{transform:translateX(-10%)}}
@media(min-width:1600px){.intro{top:17%}.intro-copy{max-width:350px;width:25%}.intro-copy p{font-size:30px}.intro-description{font-size:18px;max-width:310px}.experiment{top:49%}.task{width:270px;min-height:92px}.task-label{font-size:18px}.task-meta{font-size:9px}.core{width:185px;height:192px}.core-type{font-size:75px}.core-caption{font-size:9px}.output{width:265px}.output strong{font-size:32px}.control-label{font-size:10px}.categories button{font-size:15px}.header{height:125px}}
@media(max-width:1100px) and (min-width:768px){.brand-caption{display:none}.header-note{font-size:9px}.intro-copy p{font-size:20px}.intro-description{font-size:13px}.task{width:186px;padding:14px 12px;gap:8px}.task-label{font-size:14px}.task-meta{font-size:6px}.core{width:132px;height:143px}.core-type{font-size:55px}.output{width:196px;padding:18px}.output strong{font-size:24px}.categories button{padding:9px 10px;font-size:12px}.automation-switch{min-width:245px;padding-left:16px;gap:11px}.control-aside p{font-size:12px}.aside-star{font-size:32px}.loose-label{font-size:10px}.intro{top:19%}.experiment{top:48%}}
@media(max-width:767px){:root{--pad:22px}.header{height:79px;padding-top:env(safe-area-inset-top)}.wordmark{font-size:40px;letter-spacing:-4px}.brand-star{font-size:22px;margin-left:6px;margin-top:1px}.brand{gap:14px}.brand-caption{font-size:6px;line-height:1.6;letter-spacing:0}.header-note{display:none}.contact{font-size:9px;padding:13px 14px;gap:16px;min-height:44px}.contact-symbol{font-size:19px}.intro{top:113px;display:block}.eyebrow{font-size:7px;margin-bottom:17px;gap:6px;letter-spacing:0}.eyebrow>span{font-size:6px}h1{font-size:15.5vw;line-height:.9;letter-spacing:-.06em}.title-asterisk{font-size:.51em;left:90%;top:16%}.intro-heading{max-width:100%}.intro-copy{display:flex;align-items:start;justify-content:space-between;max-width:none;width:100%;margin:22px 0 0;padding:0;gap:20px}.intro-copy p{font-size:16px;line-height:1.35;width:48%;margin:0;letter-spacing:-.035em}.intro-description{font-size:12px;line-height:1.5;width:50%;color:#6e7467}.experiment{inset:355px var(--pad) 76px}.stage-header{font-size:6px;top:0;letter-spacing:0}.demo-label{gap:5px}.demo-label i{width:4px;height:4px}.stage{inset:30px 0 153px}.task{width:151px;min-height:67px;padding:13px 11px;gap:8px}.task-icon{width:23px;height:23px}.task-icon svg{width:21px;height:21px}.task-label{font-size:12px;line-height:1.2}.task-meta{font-size:5px;margin-top:6px;letter-spacing:-.05em}.task-0{--x:26%;--y:14%;--angle:-9deg}.task-1{--x:29%;--y:79%;--angle:8deg}.task-2{--x:70%;--y:50%;--angle:-7deg}.core{left:71%;top:12%;width:82px;height:88px;transform:translate(-50%,-50%) rotate(9deg)}.core-face{border-radius:11px;box-shadow:inset 0 0 0 4px #ffffff1c}.core-shadow{border-radius:11px;transform:translate(4px,5px)}.core-type{font-size:35px;letter-spacing:-3px;margin-left:-3px}.core-caption{font-size:4px;margin-top:9px;letter-spacing:.03em}.core-glyph{width:69px;height:69px;right:-24px;top:-20px}.core-screw{width:3px;height:3px}.screw-one{left:8px;top:8px}.screw-two{right:8px;bottom:8px}.loose-one{left:1%;top:45%;font-size:7px}.loose-two{right:1%;top:92%;font-size:7px}.stage-note{display:none}.stage-watermark{height:70px;bottom:0;opacity:.045}.stage-watermark span{font-size:90px}.output{left:76%;top:89%;width:134px;padding:13px 12px 13px;box-shadow:3px 3px 0 var(--ink)}.output-eyebrow{font-size:5px;margin-bottom:9px}.output-check{font-size:16px;top:9px;right:10px}.output strong{font-size:19px}.output-caption{font-size:8px;margin-top:6px}.automated .task{--x:24%;width:145px}.automated .task-0{--y:10%}.automated .task-1{--y:48%}.automated .task-2{--y:86%}.automated .core{left:75%;top:26%}.task-done{font-size:9px;right:7px;top:6px}.experiment-controls{border-top:0;padding-top:0;display:flex;flex-direction:column;align-items:center;gap:18px;bottom:0}.switch-control{order:0;align-self:stretch}.switch-hint{font-size:12px;top:-23px;transform:translateX(-50%) rotate(-3deg)}.automation-switch{width:100%;min-width:0;min-height:59px;padding:9px 12px 9px 21px;box-shadow:0 3px 0 #00000018}.switch-name,.switch-state{font-size:11px}.switch-state{margin-left:auto;margin-right:0}.switch-track{height:37px;width:66px}.switch-knob{width:29px;height:29px}.automated .switch-knob{transform:translateX(29px)}.category-control{order:1;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.control-label{font-size:6px;line-height:1.5;width:57px;margin:0;color:#7d8574}.categories{gap:0;flex:1;justify-content:space-between}.categories button{font-size:11px;padding:8px 11px;min-height:40px}.control-aside{display:none}.footer{height:56px;font-size:6px;bottom:env(safe-area-inset-bottom)}.footer-center{display:none}.footer button{font-size:6px;gap:6px}.footer svg{width:10px;height:10px}.footer>span{max-width:190px}.automated .output{transform:translate(-50%,-50%) rotate(2deg) scale(1)}}
@media(max-width:360px){:root{--pad:18px}.brand-caption{display:none}.intro{top:104px}.eyebrow{font-size:6px}.intro-copy{margin-top:18px;gap:15px}.intro-copy p{font-size:15px}.intro-description{font-size:11px}.experiment{top:329px}.task{width:137px;min-height:61px;padding:11px 9px}.task-label{font-size:11px}.task-icon{width:20px}.task-icon svg{width:18px}.task-meta{font-size:4.5px}.automated .task{width:133px}.output{width:119px}.output strong{font-size:16px}.output-caption{font-size:7px}.core{width:72px;height:78px}.core-type{font-size:31px}.categories button{font-size:10px;padding:8px 9px}.control-label{width:51px;font-size:5px}}
@media(max-height:760px) and (min-width:768px){.header{height:86px}.intro{top:16%}h1{font-size:8.1vw}.intro-copy p{font-size:21px;margin-bottom:12px}.intro-description{font-size:13px}.experiment{top:48%;bottom:76px}.stage{bottom:106px}.task{min-height:65px;padding-block:12px}.task-label{font-size:14px}.task-meta{margin-top:6px}.core{width:127px;height:133px}.core-type{font-size:49px}.core-caption{font-size:6px}.output{width:210px;padding:18px}.output strong{font-size:23px}.automation-switch{min-height:55px}.experiment-controls{padding-top:17px}.footer{height:48px}.eyebrow{margin-bottom:15px}}
@media(max-height:760px) and (max-width:767px){.header{height:68px}.intro{top:92px}.eyebrow{margin-bottom:14px}h1{font-size:14.9vw}.intro-copy{margin-top:17px}.intro-copy p{font-size:15px}.intro-description{font-size:11px}.experiment{top:305px;bottom:64px}.stage{inset:24px 0 141px}.task{min-height:57px;padding:10px 9px;width:141px}.task-label{font-size:11px}.task-meta{font-size:4.5px;margin-top:6px}.task-icon{width:21px}.task-icon svg{width:19px}.automated .task{width:137px}.core{width:71px;height:77px}.core-type{font-size:30px;letter-spacing:-3px}.core-caption{font-size:3.5px;margin-top:8px}.output{width:125px;padding:12px}.output strong{font-size:17px}.output-caption{font-size:7px}.output-eyebrow{font-size:4.5px;margin-bottom:7px}.output-check{font-size:13px}.experiment-controls{gap:12px}.automation-switch{min-height:55px}.categories button{min-height:38px}.switch-hint{font-size:11px;top:-22px}.footer{height:47px}.loose-label{font-size:6px}}
@media(max-height:660px) and (max-width:767px){.intro{top:86px}.eyebrow{font-size:6px;margin-bottom:12px}h1{font-size:13.3vw}.intro-copy{margin-top:15px}.intro-copy p{font-size:14px}.intro-description{font-size:10px;line-height:1.4}.experiment{top:276px;bottom:57px}.stage{inset:20px 0 128px}.stage-header{font-size:5px}.task{width:130px;min-height:50px;padding:8px}.task-label{font-size:10px}.task-meta{font-size:4px}.task-icon{width:17px}.task-icon svg{width:16px}.automated .task{width:126px}.core{width:62px;height:67px}.core-type{font-size:27px}.core-caption{font-size:3px}.output{width:112px;padding:10px}.output strong{font-size:15px}.output-caption{font-size:6px}.output-eyebrow{font-size:4px}.output-check{font-size:12px;top:7px;right:8px}.automation-switch{min-height:49px;padding-top:5px;padding-bottom:5px}.switch-hint{font-size:10px;top:-20px}.experiment-controls{gap:11px}.categories button{min-height:35px}.footer{height:43px}.loose-label{display:none}}
@media(max-height:500px) and (min-width:600px){.header{height:65px}.wordmark{font-size:38px}.brand-star{font-size:22px}.brand-caption,.header-note{display:none}.contact{padding:11px 14px;min-height:40px}.intro{top:95px;right:58%;display:block}h1{font-size:5.7vw}.eyebrow{font-size:6px;line-height:1.5;margin-bottom:14px}.intro-copy{width:100%;max-width:none;margin-top:18px}.intro-copy p{font-size:17px;margin-bottom:10px}.intro-description{font-size:12px;max-width:235px}.title-asterisk{left:98%;font-size:.5em}.experiment{top:89px;left:47%;right:var(--pad);bottom:56px}.stage{inset:12px 0 76px}.stage-header{font-size:5px}.task{width:126px;min-height:47px;padding:8px;gap:7px}.task-label{font-size:10px}.task-meta{font-size:4px;margin-top:5px}.task-icon{width:18px}.task-icon svg{width:16px}.core{width:71px;height:77px}.core-type{font-size:29px;letter-spacing:-3px}.core-caption{font-size:4px;margin-top:8px}.output{width:115px;padding:12px}.output strong{font-size:16px}.output-eyebrow{font-size:4px;margin-bottom:8px}.output-caption{font-size:7px}.output-check{font-size:13px}.stage-note,.loose-label,.stage-watermark{display:none}.experiment-controls{display:flex;gap:13px;padding-top:12px;align-items:end;justify-content:space-between}.switch-control{order:1}.automation-switch{min-width:146px;min-height:43px;padding:6px 7px 6px 12px;gap:8px}.switch-name{font-size:8px}.switch-state{display:none}.switch-track{height:27px;width:49px}.switch-knob{width:21px;height:21px;top:2px;left:2px}.switch-knob svg{width:12px;height:12px}.automated .switch-knob{transform:translateX(22px)}.switch-hint{font-size:9px;top:-20px}.control-label{font-size:5px;margin-bottom:3px}.categories button{font-size:9px;min-height:36px;padding:8px}.control-aside{display:none}.footer{height:42px;font-size:6px}.footer-center{display:none}.footer button{font-size:6px}}
.task-meta{font-size:9px;white-space:normal;line-height:1.3}.stage{touch-action:pan-y pinch-zoom}.stage.category-changing .task-content,.stage.category-changing .task-icon{animation:content-enter .5s var(--ease) both}.stage.category-changing .task-1 .task-content,.stage.category-changing .task-1 .task-icon{animation-delay:.06s}.stage.category-changing .task-2 .task-content,.stage.category-changing .task-2 .task-icon{animation-delay:.12s}.paused .stage.category-changing .task-content,.paused .stage.category-changing .task-icon{animation:none}.contact-symbol{font-size:23px}.stage-header{font-size:10px}.control-label{font-size:9px}.categories button{min-height:44px}.demo-caption{color:#697260}
@keyframes category-enter{from{opacity:0;transform:translate(calc(-50% + 45px),-50%) rotate(var(--angle))}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle))}}@keyframes content-enter{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
@media(max-width:767px){.intro-copy{display:block;margin-top:20px}.intro-copy p{display:none}.intro-description{width:100%;max-width:345px;font-size:16px;line-height:1.45;color:#59604f}.task-meta{display:none}.task-label{font-size:13px}.task{min-height:61px}.task-content{padding-right:4px}.stage-header{font-size:8px;line-height:1.3}.control-label{font-size:7px}.categories button{font-size:12px;min-height:44px}.output-eyebrow{font-size:6px}.output-caption{font-size:9px;line-height:1.35}.output strong{font-size:20px}.switch-name,.switch-state{font-size:12px}.footer{font-size:7px}.footer button{font-size:7px}.output{top:81%}.automated .task-0{--y:9%}.automated .task-1{--y:48%}.automated .task-2{--y:87%}.automated .core{top:22%}.title-asterisk{left:94%;font-size:.45em}.experiment{top:348px}}
@media(max-height:760px) and (max-width:767px){.intro-description{font-size:14px;max-width:325px}.intro-copy{margin-top:19px}.experiment{top:292px}.stage{bottom:148px}.task{min-height:53px}.task-label{font-size:12px}.output strong{font-size:17px}.output-caption{font-size:8px}.output-eyebrow{font-size:5px}.stage-header{font-size:7px}.switch-hint{top:-21px}.core-caption{font-size:4px}.title-asterisk{left:92%;font-size:.48em}}
@media(max-height:660px) and (max-width:767px){.intro-description{font-size:13px;line-height:1.4}.experiment{top:269px}.stage{bottom:133px}.task{min-height:48px}.task-label{font-size:11px}.output{padding:9px;width:110px}.output strong{font-size:15px}.output-caption{font-size:7px}.output-eyebrow{font-size:4px}.stage-header{font-size:6px}.categories button{min-height:40px;font-size:11px}.control-label{font-size:6px}.footer{font-size:6px}.footer button{font-size:6px}}
@media(max-height:500px) and (min-width:600px){.task-meta{display:none}.task-label{font-size:11px}.stage-header{font-size:7px}.control-label{font-size:6px}.categories button{font-size:10px;min-height:36px}.intro-description{font-size:13px}.intro-copy p{font-size:18px;display:block}.intro-copy{display:block}.intro-description{width:100%}.task{min-height:51px}}
@media(max-width:767px){.output{top:74%}}
@media(max-height:760px) and (max-width:767px){.output-eyebrow,.output-caption{display:none}.output{top:78%;padding:15px 11px}.output strong{font-size:18px;line-height:1.04;padding-right:10px}.output-check{top:8px;right:8px;font-size:11px}}
@media(max-height:660px) and (max-width:767px){.output{padding:12px 9px}.output strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}


/* === unbusy2 === */
/* headline: the second line flips from the status quo to the promise */
.title-word{display:inline-grid}
.title-word .w{grid-area:1/1;white-space:nowrap;transition:opacity .45s,transform .6s var(--spring),filter .45s}
.title-word .w-on{opacity:0;transform:translateY(.12em);filter:blur(6px)}
.automated .title-word .w-off{opacity:0;transform:translateY(-.12em);filter:blur(6px)}
.automated .title-word .w-on{opacity:1;transform:none;filter:none}
/* header button names the next step once automation is on (phones) */
.contact-text{display:grid}
.contact-text>span{grid-area:1/1;white-space:nowrap;transition:opacity .35s,transform .45s var(--spring)}
.contact-on{opacity:0;transform:translateY(8px)}
.automated .contact-off{opacity:0;transform:translateY(-8px)}
.automated .contact-on{opacity:1;transform:none}
/* ...and turns ink, pops once and glows a few times */
.contact{transition:background .35s,color .35s,transform .2s}
.automated .contact{background:var(--lime-strong);color:var(--ink);font-weight:700;animation:cta-pop .7s var(--spring),cta-glow 1.8s ease-in-out .7s 3}
.contact .contact-symbol{display:inline-block;transform-origin:50% 50%;transition:transform .9s var(--spring),color .35s}
.contact:hover .contact-symbol{transform:rotate(360deg)}
.automated .contact .contact-symbol{color:var(--orange);transform:rotate(360deg)}
.automated .contact:hover .contact-symbol{transform:rotate(720deg)}
:root{--lime-strong:#c4ea32}
body[data-category="operations"]{--lime-strong:#78d9c1}
body[data-category="finance"]{--lime-strong:#ffc538}
.automated .contact:hover{background:var(--orange);color:var(--ink)}
.automated .contact:hover .contact-symbol{color:var(--ink)}
@keyframes cta-pop{0%{transform:scale(1)}40%{transform:scale(1.07) rotate(-2deg)}100%{transform:scale(1)}}
@keyframes cta-glow{0%,100%{box-shadow:0 0 0 0 rgba(34,39,31,0)}50%{box-shadow:0 0 0 8px rgba(34,39,31,.18)}}
/* UNBUSIED gets a lime marker behind the letters instead of a thin underline */
.title-word:after{height:58%;bottom:-2%;left:-2%;right:-2%}

/* the line that the switch rewrites */
.intro-copy .intro-line{display:grid;margin:0 0 16px;font-size:21px;line-height:1.18;letter-spacing:-.035em}
.intro-line>span{grid-area:1/1;transition:opacity .5s,transform .6s var(--spring),filter .5s}
.intro-line .line-on{opacity:0;transform:translateY(10px);filter:blur(4px)}
.automated .intro-line .line-off{opacity:0;transform:translateY(-10px);filter:blur(4px)}
.automated .intro-line .line-on{opacity:1;transform:none;filter:none}
@media(min-width:1600px){.intro-copy .intro-line{font-size:25px}}

/* the copying: a field someone is typing into, and the cell it comes from */
.task-field{display:flex;align-items:center;gap:2px;padding:3px 8px;min-height:20px;min-width:96px;width:max-content;border:1px solid #282e2538;border-radius:4px;background:#f6f5ec;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#3a3f35}
.task-caret{width:1.5px;height:12px;background:var(--orange);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.automated .task-field{display:none}
.task-cell-wrap{display:flex;align-items:center;gap:8px;margin-top:9px}
.task-cell-label{font-family:var(--mono);font-size:8px;letter-spacing:.04em;color:#8a8e82}
.task-cell{display:inline-block;padding:4px 9px;border-radius:4px;background:var(--ink);color:#f5f5f0;font-family:var(--mono);font-size:11px;letter-spacing:.03em}
.automated .task-cell{background:#465d24}

/* the flow: the number travels the lines */
.flow-chip{position:absolute;left:0;top:0;padding:4px 9px;border-radius:999px;background:var(--ink);color:#f5f5f0;font-family:var(--mono);font-size:10px;letter-spacing:.03em;white-space:nowrap;opacity:0;pointer-events:none;z-index:4;transition:opacity .3s;box-shadow:2px 2px 0 #22271f33}

/* off state is restless: cards drift more and their contents fidget */
@keyframes card-wander{0%,100%{transform:translate(-50%,-50%) rotate(var(--angle))}50%{transform:translate(calc(-50% + 9px),calc(-50% - 13px)) rotate(calc(var(--angle) + 4deg))}}
.task{animation-duration:5.5s}
@keyframes content-fidget{0%,100%{translate:0 0}30%{translate:.7px -.5px}60%{translate:-.6px .6px}}
body:not(.automated) .task-content,body:not(.automated) .task-icon{animation:content-fidget 2.8s ease-in-out infinite}
@keyframes label-pop{0%,84%,100%{scale:1;rotate:0deg}89%{scale:1.16;rotate:-4deg}94%{scale:.98;rotate:1deg}}
.loose-one{animation:label-wander 6s ease-in-out infinite,label-pop 7s ease-in-out infinite}
.loose-two{animation:label-wander 6s ease-in-out infinite,label-pop 9s ease-in-out 2s infinite}

/* the switch is the main action: it pulses until touched, and nudges after the demo */
@keyframes knob-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,80,40,0)}50%{box-shadow:0 0 0 9px rgba(255,80,40,.28)}}
body:not(.touched):not(.automated) .switch-knob{animation:knob-pulse 2.2s ease-in-out infinite}

/* conversion at the moment of delight */
.output-cta{display:inline-flex;align-items:center;gap:14px;margin-top:16px;padding:11px 14px;border-radius:5px;background:var(--ink);color:#f5f5f0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-decoration:none;transition:background .2s,transform .2s}
.output-cta .contact-symbol{font-size:18px}
.output-cta:hover{background:var(--orange);color:var(--ink);transform:translateY(-1px)}
.automated .output{pointer-events:auto}

/* the accent follows the scenario */
body[data-category="operations"]{--lime:#a9e4d6}
body[data-category="finance"]{--lime:#ffd166}

/* legibility: nothing smaller than 10px */
.eyebrow{font-size:10px}.control-label{font-size:10px}.stage-header{font-size:10px}.footer,.footer button{font-size:10px}
.task-meta{font-size:9px}.output-eyebrow{font-size:9px}.output-caption{font-size:11px}.note-number{font-size:10px}.brand-caption{font-size:10px}.header-note{font-size:10px}
@media(max-width:767px){
  .eyebrow{font-size:10px}.control-label{font-size:10px}.stage-header{font-size:10px}.footer,.footer button{font-size:10px}.footer-center{display:none}.brand-caption{display:none}
  .output-eyebrow{font-size:9px}.output-caption{font-size:11px}
  .intro-copy p.intro-line{display:grid;width:100%;font-size:15px;line-height:1.3;letter-spacing:-.03em;margin:0}
  .intro-description{display:none}
  .task-field{font-size:10px;min-height:20px;padding:3px 7px;margin-top:6px;min-width:84px}
  .task-cell{font-size:10px;padding:3px 7px}.task-cell-wrap{margin-top:6px}.task-cell-label{display:none}
  .output-cta{display:none}
  .flow-chip{font-size:9px;padding:3px 7px}
}
@media(max-height:760px) and (max-width:767px){.output-cta{display:none}.task-field,.task-cell-wrap{margin-top:4px}}

/* ---- desktop only: nothing below applies to phones ---- */
@media(min-width:768px){h1{font-size:clamp(68px,min(9.25vw,15vh),170px)}}
@media(min-width:768px) and (max-height:760px){h1{font-size:min(8.1vw,15vh)}}
@media(min-width:1600px){
  .automation-switch{min-width:340px;min-height:74px;padding:12px 15px 12px 28px;gap:22px}
  .switch-name,.switch-state{font-size:13px}
  .switch-track{width:82px;height:46px}
  .switch-knob{width:38px;height:38px;top:3px;left:3px}
  .switch-knob svg{width:20px;height:20px}
  .automated .switch-knob{transform:translateX(36px)}
  .switch-hint{font-size:17px;top:-34px}
}
/* the cube is a button everywhere: it presses in; on desktop it also lifts on hover */
.core{cursor:pointer;-webkit-tap-highlight-color:transparent}
.core-face{transition:transform .25s var(--spring)}
.core:active .core-face{transform:translate(3px,4px)}
.core:active .core-shadow{transform:translate(2px,3px)}
.core:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:18px}
@media(hover:hover) and (pointer:fine){
  .core:hover .core-face{transform:translate(-3px,-4px)}
  .core:hover .core-shadow{transform:translate(10px,13px)}
  .core:hover:active .core-face{transform:translate(3px,4px)}
  .core:hover:active .core-shadow{transform:translate(2px,3px)}
}

/* === scenarios === */
/* which extra each card shows depends on the scenario */
.x-mail,.x-chips,.x-doc,.x-pings,.x-approval{display:none}
body[data-category="sales"] .x-mail{display:inline-flex}
body[data-category="operations"] .x-chips{display:flex}
body[data-category="operations"] .x-pings{display:inline-flex}
body[data-category="finance"] .x-doc{display:inline-flex}
body[data-category="finance"] .x-approval{display:inline-flex}
.task-0 .task-cell-wrap{display:none}
body[data-category="operations"] .task-2 .task-cell-wrap,body[data-category="finance"] .task-2 .task-cell-wrap{display:none}
/* while automation is off, the extra row replaces the small caption so cards stay one-extra tall */
body:not(.automated) .task-meta{display:none}
.x-mail,.x-doc,.x-pings,.x-approval,.x-chips,.task-field,.task-cell-wrap{margin-top:5px;line-height:1.2}
.x-mail,.x-approval,.task-field,.task-cell{box-sizing:border-box;min-height:0}
body:not(.automated) .task{padding-top:13px;padding-bottom:13px}

/* sales: the inbox keeps counting */
.x-mail{align-items:center;gap:6px;padding:3px 8px;border-radius:999px;background:#fff1e3;border:1px solid #ff502866;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#8a3a22;width:max-content}
.mail-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:mail-blink 1.2s steps(1) infinite}
@keyframes mail-blink{50%{opacity:.25}}
.mail-count{font-weight:700;display:inline-block;min-width:1ch;text-align:center}
.mail-count.bump{animation:bump .45s var(--spring)}
@keyframes bump{40%{transform:scale(1.6)}}
.automated .x-mail{background:#e5f3c6;border-color:#46602655;color:#465d24}
.automated .mail-dot{display:none}
.automated .x-mail::after{content:'\2713';font-weight:700}

/* operations: tasks breed, pings wait */
.x-chips{flex-wrap:nowrap;gap:4px;max-width:200px;min-height:20px;overflow:hidden}
.x-chips i:nth-child(n+5){display:none}
.x-chips i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.03em;padding:2px 6px;border-radius:4px;background:#ebe9df;border:1px solid #22271f22;animation:chip-in .35s var(--spring) both}
.x-chips i.done{background:#465d24;color:#f5f5f0;border-color:transparent}
@keyframes chip-in{from{opacity:0;transform:scale(.6) translateY(4px)}}
.x-pings{align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#8a8e82}
.x-pings i{width:6px;height:6px;border-radius:50%;background:#b9bfb0;animation:ping 1.5s ease-in-out infinite}
.x-pings i:nth-child(2){animation-delay:.25s}.x-pings i:nth-child(3){animation-delay:.5s}
.x-pings .pings-txt{margin-left:3px}
@keyframes ping{50%{background:var(--orange);transform:scale(1.35)}}
.automated .x-pings i{background:#465d24;animation:none}
.automated .x-pings{color:#465d24}

/* finance: the hunt for the right file, the wait for a signature */
.x-doc{align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:#3a3f35;min-width:120px}
.x-doc::before{content:'';width:9px;height:11px;border:1.4px solid #3a3f35;border-radius:1px;background:#fff;flex-shrink:0}
.doc-name{display:inline-block}
.doc-name.flip{animation:doc-flip .45s var(--spring)}
@keyframes doc-flip{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
.automated .x-doc{color:#465d24}
.automated .x-doc::after{content:'\2713';font-weight:700}
.x-approval{padding:3px 8px;border-radius:4px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#8a3a22;border:1px dashed #ff5028aa;animation:pend 1.6s ease-in-out infinite;width:max-content}
@keyframes pend{50%{opacity:.4}}
.automated .x-approval{border:2px solid #465d24;color:#465d24;font-weight:700;border-radius:3px;animation:stamp .5s var(--spring) both}
@keyframes stamp{0%{opacity:0;transform:rotate(-6deg) scale(1.7)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}

/* desktop only: finance cards pile up, operations cards swap places */
@media(min-width:768px){
  body:not(.automated) .task-0{--y:27%}
  body:not(.automated) .task-1{--y:76%}
  body:not(.automated) .task-2{--y:46%}
  body[data-category="finance"]:not(.automated) .task-0{--x:24%;--y:34%;--angle:-10deg}
  body[data-category="finance"]:not(.automated) .task-1{--x:36%;--y:70%;--angle:6deg}
  body[data-category="finance"]:not(.automated) .task-2{--x:77%;--y:50%;--angle:-5deg}
  body[data-category="operations"]:not(.automated) .stage[data-juggle="1"] .task-0{--x:34%;--y:76%}
  body[data-category="operations"]:not(.automated) .stage[data-juggle="1"] .task-1{--x:78%;--y:46%}
  body[data-category="operations"]:not(.automated) .stage[data-juggle="1"] .task-2{--x:21%;--y:27%}
  body[data-category="operations"]:not(.automated) .stage[data-juggle="2"] .task-0{--x:78%;--y:46%}
  body[data-category="operations"]:not(.automated) .stage[data-juggle="2"] .task-1{--x:21%;--y:27%}
  body[data-category="operations"]:not(.automated) .stage[data-juggle="2"] .task-2{--x:34%;--y:76%}
}
@media(max-width:767px){
  .x-mail,.x-pings,.x-approval,.x-doc{font-size:9px;margin-top:6px}
  .x-chips{margin-top:6px;max-width:150px}
  .x-chips i{font-size:8px;padding:2px 6px}
  .x-chips i:nth-child(n+4){display:none}
  body[data-category] .task-cell-wrap{display:none}
  .x-mail,.x-doc,.x-pings,.x-approval,.x-chips,.task-field{margin-top:5px}
  body:not(.automated) .x-mail,body:not(.automated) .x-doc,body:not(.automated) .x-pings,body:not(.automated) .x-approval,body:not(.automated) .x-chips{display:none}
}

/* === phone layout === */
@media(max-width:767px){
  /* compact cards: the stage on a phone is only 170-200px tall */
  .task{width:150px;min-height:0;padding:9px 10px;gap:8px}
  .task-label{font-size:12px;line-height:1.2}
  .task-icon{width:18px}.task-icon svg{width:16px}
  .task-field{font-size:9px;min-height:16px;padding:2px 6px;margin-top:4px;min-width:70px}
  .task-caret{height:10px}
  /* no scenario extras on phones in either state: the ticks and the texts carry the scenario */
  .x-mail,.x-doc,.x-pings,.x-approval,.x-chips,.task-cell-wrap,.task-meta{display:none!important}
  /* off: cards clear of the header, the cube and each other */
  body:not(.automated) .task-0{--x:26%;--y:15%}
  body:not(.automated) .task-2{--x:70%;--y:57%}
  body:not(.automated) .task-1{--x:29%;--y:80%}
  body:not(.automated) .loose-one{top:36%;left:6%}
  body:not(.automated) .loose-two{top:78%;right:3%}
  /* on: the tidy column */
  body.automated .task-0{--y:10%}
  body.automated .task-1{--y:48%}
  body.automated .task-2{--y:86%}
  /* one small travelling number instead of three */
  .flow-chip{font-size:8px;padding:2px 6px}
  .flow-chip[data-chip="1"],.flow-chip[data-chip="2"]{display:none}
}

/* === phone scenarios === */
/* on a phone every scenario gets its own arrangement, so switching tabs moves the furniture too */
@media(max-width:767px){
  .output{transition:transform .7s .22s var(--spring),opacity .4s .1s,left 1s var(--spring),top 1s var(--spring)}
  .loose-label{transition:opacity .4s,transform .7s,left 1s var(--spring),top 1s var(--spring)}
  .loose-one,.loose-two{right:auto}
  body:not(.automated) .loose-two{right:auto;left:calc(97% - 66px)}
  /* operations: the cube waits bottom-left and the cards come at it from the right; on, they queue on the right and the result lands top-left */
  body[data-category="operations"]:not(.automated) .task-0{--x:26%;--y:16%}
  body[data-category="operations"]:not(.automated) .task-2{--x:74%;--y:16%}
  body[data-category="operations"]:not(.automated) .task-1{--x:72%;--y:72%}
  body[data-category="operations"] .core{left:27%;top:72%}
  body[data-category="operations"]:not(.automated) .loose-one{left:6%;top:40%}
  body[data-category="operations"]:not(.automated) .loose-two{left:calc(96% - 66px);top:40%}
  body.automated[data-category="operations"] .task{--x:76%}
  body.automated[data-category="operations"] .task-0{--y:10%}
  body.automated[data-category="operations"] .task-1{--y:48%}
  body.automated[data-category="operations"] .task-2{--y:86%}
  body.automated[data-category="operations"] .core{left:25%;top:70%}
  body[data-category="operations"] .output{left:25%;top:22%}
  /* finance: the paperwork piles up on the left (labels stay readable), the cube waits on the right; on, the cube takes the centre and the pile fans out to the corners */
  body[data-category="finance"]:not(.automated) .task-0{--x:31%;--y:20%;--angle:-5deg}
  body[data-category="finance"]:not(.automated) .task-2{--x:35%;--y:44%;--angle:3deg;z-index:5}
  body[data-category="finance"]:not(.automated) .task-1{--x:39%;--y:77%;--angle:-3deg;z-index:6}
  body[data-category="finance"] .core{left:76%;top:42%}
  body[data-category="finance"]:not(.automated) .loose-one{left:calc(97% - 70px);top:8%}
  body[data-category="finance"]:not(.automated) .loose-two{left:calc(97% - 66px);top:74%}
  body.automated[data-category="finance"] .task-0{--x:24%;--y:14%}
  body.automated[data-category="finance"] .task-2{--x:76%;--y:14%}
  body.automated[data-category="finance"] .task-1{--x:24%;--y:86%}
  body.automated[data-category="finance"] .core{left:48%;top:50%}
  body[data-category="finance"] .output{left:78%;top:78%}
}

/* === short phones === */
/* on a 667px-tall viewport the stage is ~139px tall: smaller furniture, tighter positions */
@media(max-width:767px) and (max-height:700px){
  .task{width:150px;padding:7px 9px;gap:6px}
  body:not(.automated) .task{padding-top:7px;padding-bottom:7px}
  .automated .task{width:160px}
  .automated .task-label{white-space:nowrap}
  .task-label{font-size:11px;line-height:1.1}
  .task-icon{width:16px;height:16px}.task-icon svg{width:14px;height:14px}
  .task-field{font-size:8px;min-height:14px;padding:1px 5px;margin-top:3px;min-width:60px}
  .task-caret{height:9px}
  .task-done{font-size:8px;right:5px;top:4px}
  .core{width:60px;height:66px}
  .core-type{font-size:26px;letter-spacing:-2px;margin-left:-2px}
  .core-caption{margin-top:5px}
  .core-glyph{width:52px;height:52px;right:-18px;top:-15px}
  .output{width:112px;padding:9px 10px}
  .output strong{font-size:15px}
  .output-eyebrow{margin-bottom:5px}
  .output-caption{margin-top:4px}
  .output-check{font-size:13px;top:6px;right:7px}
  body:not(.automated) .loose-two{display:none}
  /* sales */
  body[data-category="sales"]:not(.automated) .task-0{--x:26%;--y:14%}
  body[data-category="sales"]:not(.automated) .task-2{--x:26%;--y:60%}
  body[data-category="sales"]:not(.automated) .task-1{--x:72%;--y:78%}
  body[data-category="sales"] .core{left:76%;top:22%}
  body[data-category="sales"]:not(.automated) .loose-one{left:3%;top:85%}
  body.automated[data-category="sales"] .task{--x:25%}
  body.automated[data-category="sales"] .task-0{--y:15%}
  body.automated[data-category="sales"] .task-1{--y:50%}
  body.automated[data-category="sales"] .task-2{--y:85%}
  body.automated[data-category="sales"] .core{left:75%;top:28%}
  body[data-category="sales"] .output{left:76%;top:78%}
  /* operations */
  body[data-category="operations"]:not(.automated) .task-0{--x:26%;--y:18%}
  body[data-category="operations"]:not(.automated) .task-2{--x:74%;--y:18%}
  body[data-category="operations"]:not(.automated) .task-1{--x:72%;--y:74%}
  body[data-category="operations"] .core{left:24%;top:74%}
  body[data-category="operations"]:not(.automated) .loose-one{display:none}
  body.automated[data-category="operations"] .task{--x:75%}
  body.automated[data-category="operations"] .task-0{--y:15%}
  body.automated[data-category="operations"] .task-1{--y:50%}
  body.automated[data-category="operations"] .task-2{--y:85%}
  body.automated[data-category="operations"] .core{left:25%;top:72%}
  body[data-category="operations"] .output{left:25%;top:22%}
  /* finance */
  body[data-category="finance"]:not(.automated) .task-0{--x:30%;--y:17%}
  body[data-category="finance"]:not(.automated) .task-2{--x:34%;--y:46%}
  body[data-category="finance"]:not(.automated) .task-1{--x:38%;--y:79%}
  body[data-category="finance"] .core{left:76%;top:44%}
  body[data-category="finance"]:not(.automated) .loose-one{left:calc(97% - 70px);top:2%}
  body.automated[data-category="finance"] .task-0{--x:25%;--y:12%}
  body.automated[data-category="finance"] .task-2{--x:75%;--y:12%}
  body.automated[data-category="finance"] .task-1{--x:25%;--y:88%}
  body.automated[data-category="finance"] .core{left:50%;top:50%}
  body[data-category="finance"] .output{left:78%;top:78%}
}

/* === smooth scenario switch === */
/* the card body glides (wander never restarts); only its contents fade in; the tilt interpolates too */
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.task{transition:left 1s var(--spring),top 1s var(--spring),transform 1s var(--spring),background .6s,box-shadow .6s,border-color .6s,--angle 1s var(--spring)}
@media(prefers-reduced-motion:reduce){.stage.category-changing .task-content,.stage.category-changing .task-icon{animation:none}}

/* === anything === */
/* the fourth scenario: a wildcard with examples from three other departments */
body[data-category="anything"]{--lime:#d9caff;--lime-strong:#bda2ff}
.x-steps,.x-asked{display:none;margin-top:5px;line-height:1.2;box-sizing:border-box;min-height:0}
body[data-category="anything"] .x-steps{display:inline-flex}
body[data-category="anything"] .x-asked{display:inline-flex}
body[data-category="anything"] .task-2 .task-cell-wrap{display:none}
.x-steps{align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#f1edff;border:1px solid #7a5cff66;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#4a35a8;width:max-content}
.x-steps .steps-n{font-weight:700;display:inline-block;min-width:1ch;text-align:center}
.x-steps .steps-n.bump{animation:bump .45s var(--spring)}
.automated .x-steps{background:#e5f3c6;border-color:#46602655;color:#465d24}
.automated .x-steps::after{content:'\2713';font-weight:700}
.x-asked{align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#8a8e82}
.x-asked i{width:8px;height:8px;border-radius:50%;border:1.5px solid #b9bfb0;box-sizing:border-box;animation:ping 1.5s ease-in-out infinite}
.x-asked .asked-n{font-weight:700;color:#3a3f35}
.x-asked .asked-n.bump{animation:bump .45s var(--spring)}
.automated .x-asked{color:#465d24}
.automated .x-asked i{border-color:#465d24;background:#465d24;animation:none}
.automated .x-asked .asked-n{display:none}
.automated .x-asked::after{content:'\2713';font-weight:700}
/* desktop: its own scatter while off */
@media(min-width:768px){
  body[data-category="anything"]:not(.automated) .task-0{--x:18%;--y:72%;--angle:-6deg}
  body[data-category="anything"]:not(.automated) .task-1{--x:34%;--y:22%;--angle:5deg}
  body[data-category="anything"]:not(.automated) .task-2{--x:78%;--y:52%;--angle:-8deg}
  body[data-category="anything"]:not(.automated) .loose-one{left:6%;top:12%}
}
/* phones: no extras, four tabs in the row, and the fourth arrangement (cube bottom-right, result top-right) */
@media(max-width:767px){
  .x-steps,.x-asked{display:none!important}
  .categories button{padding:8px 7px}
  body[data-category="anything"]:not(.automated) .task-0{--x:26%;--y:16%}
  body[data-category="anything"]:not(.automated) .task-2{--x:74%;--y:16%}
  body[data-category="anything"]:not(.automated) .task-1{--x:24%;--y:76%}
  body[data-category="anything"] .core{left:60%;top:70%}
  body[data-category="anything"]:not(.automated) .loose-one{left:calc(97% - 70px);top:50%}
  body[data-category="anything"]:not(.automated) .loose-two{left:calc(97% - 66px);top:84%}
  body.automated[data-category="anything"] .task{--x:24%}
  body.automated[data-category="anything"] .task-0{--y:10%}
  body.automated[data-category="anything"] .task-1{--y:48%}
  body.automated[data-category="anything"] .task-2{--y:86%}
  body.automated[data-category="anything"] .core{left:75%;top:74%}
  body[data-category="anything"] .output{left:76%;top:22%}
}
@media(max-width:767px) and (max-height:700px){
  body[data-category="anything"]:not(.automated) .task-0{--x:26%;--y:18%}
  body[data-category="anything"]:not(.automated) .task-2{--x:74%;--y:18%}
  body[data-category="anything"]:not(.automated) .task-1{--x:24%;--y:74%}
  body[data-category="anything"] .core{left:60%;top:70%}
  body[data-category="anything"]:not(.automated) .loose-one{display:none}
  body.automated[data-category="anything"] .task{--x:25%}
  body.automated[data-category="anything"] .task-0{--y:15%}
  body.automated[data-category="anything"] .task-1{--y:50%}
  body.automated[data-category="anything"] .task-2{--y:85%}
  body.automated[data-category="anything"] .core{left:75%;top:74%}
  body[data-category="anything"] .output{left:76%;top:22%}
}
@media(max-width:400px){.control-label{display:none}}

/* === chips === */
/* each chip is a different thing: a paper, a number, a message, the result; chips ride under the cards, so they slide out of one and into another */
.flow-chip{z-index:3}
.flow-chip.is-doc{background:#fffef8;color:var(--ink);border:1px solid var(--ink);border-radius:2px;box-shadow:2px 2px 0 #22271f2e}
.flow-chip.is-tag{background:var(--lime-strong);color:var(--ink);border:1px solid #22271f;box-shadow:2px 2px 0 #22271f2e}
.flow-chip.is-out{background:#fffef8;color:var(--ink);border:1px solid var(--ink);box-shadow:2px 2px 0 #22271f2e;font-weight:700}
@media(max-width:767px){.flow-chip[data-chip="1"],.flow-chip[data-chip="2"]{display:block}}

/* === seamless ticker === */
/* the watermark holds ten identical copies of one word; one cycle moves exactly one copy (10% of the span), so the restart is invisible */
.stage-watermark span{animation-duration:25s}