@charset "UTF-8";
*{box-sizing:border-box}body{margin:0;color:#242426;background:#fff;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #242426;outline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}h1,h2,p{margin:0}.lab-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 4vw;border-bottom:1px solid #e9e9eb;background:#f8f8f9;gap:20px}.lab-nav>span{font:700 10px Arial;letter-spacing:.12em;color:#777}.lab-nav nav{display:flex;gap:6px}.lab-nav a{font-size:12px;font-weight:700;padding:11px 18px;border-radius:7px}.lab-nav a[aria-current]{background:#242426;color:white}header{max-width:1260px;margin:auto;padding:24px 36px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee}.brand{font-size:26px;font-weight:900;letter-spacing:-.06em;display:flex;align-items:center;gap:10px}.brand-ball{width:32px;height:32px;border:2px solid #ff7100;border-radius:50%;background:linear-gradient(150deg,white 47%,#ff7100 48% 100%);position:relative}header nav{display:flex;gap:34px;font-size:13px;font-weight:700}.hero{max-width:1200px;margin:auto;text-align:center;padding:26px 30px 44px}h1{font-weight:900;line-height:1.2;letter-spacing:-.06em}h1>span{display:block;font-size:clamp(30px,4vw,55px)}h1>strong{font-size:clamp(32px,5.2vw,68px);display:inline-block;position:relative;isolation:isolate;line-height:1.35}h1>strong:after{content:'';position:absolute;left:0;right:-6px;bottom:6px;height:.23em;background:#ffdb00;z-index:-1}.animation{height:420px;position:relative;isolation:isolate;margin:15px auto 0;overflow:hidden;max-width:1000px}#scene,#scene>div{height:100%;position:relative}.demo-machine{position:absolute;width:290px;height:360px;left:50%;top:8px;transform:translateX(-50%);transition:transform .85s cubic-bezier(.22,.7,.2,1),opacity .65s;z-index:2}.machine-svg{width:100%;height:100%;overflow:visible;display:block}.demo-capsule{position:absolute;left:50%;top:96px;width:200px;height:240px;transform:translate(-30%,-20%) scale(.18);opacity:0;z-index:4;transition:transform .8s cubic-bezier(.17,.72,.27,1.2),opacity .35s}.capsule-svg{display:block;width:100%;height:100%;overflow:visible}.capsule-glow{position:absolute;width:190px;height:190px;left:5px;top:5px;background:radial-gradient(circle,#ffdb0088,transparent 70%);opacity:0;transition:opacity .4s,transform .8s}.shell-top,.shell-bottom{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .65s}.card-reveal{position:absolute;left:50%;top:16px;width:228px;opacity:0;transform:translateX(-50%) translateY(65px) scale(.72) rotateY(85deg);transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .45s;z-index:5}.ceo-card{border:5px solid #ff7100;border-radius:17px;padding:10px;background:white;text-align:left;box-shadow:0 13px 22px #21212416;overflow:hidden}.card-heading{font:800 8px Arial;letter-spacing:.12em;display:flex;justify-content:space-between;margin-bottom:8px}.card-heading>span{color:#888}.portrait{height:190px;position:relative;background-image:url('../assets/founders.png');background-size:300% auto;background-position:0% 18%;border-radius:8px;overflow:hidden}.portrait:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#0008)}.card-quote{position:absolute;z-index:1;bottom:9px;left:9px;color:white;font-size:21px;font-weight:900;line-height:1.3}.card-quote mark{background:none;color:#ffdf00}.card-name{padding:10px 1px 1px}.card-name>span{font-size:8px;color:#777}.card-name strong{display:block;font-size:20px;line-height:1.6}.card-name>b{display:block;border-top:1px solid #eee;margin-top:6px;padding-top:8px;font-size:9px}.mini-profile{position:absolute;top:77px;width:178px;padding:7px;background:white;border:3px solid #ffdb00;border-radius:14px;opacity:0;transition:opacity .6s,transform .8s;text-align:left;box-shadow:0 10px 20px #24242610}.profile-left{left:calc(50% - 306px);transform:translateX(70px) rotate(0)}.profile-right{left:calc(50% + 128px);transform:translateX(-70px) rotate(0)}.other-face{height:186px;background-image:url('../assets/founders.png');background-size:300% auto;border-radius:7px}.face-two{background-position:50% 14%}.face-three{background-position:100% 14%}.mini-profile span{font-size:12px;font-weight:800;display:block;padding:13px 4px 9px}.scene-caption{position:absolute;left:0;right:0;bottom:12px;font-size:18px;font-weight:800;letter-spacing:-.04em}.scene-caption>span{display:none}.animation[data-phase=crank] .caption-crank{display:inline}.animation[data-phase=capsule] .caption-capsule,.animation[data-phase=open] .caption-capsule{display:inline}.animation[data-phase=card] .caption-card,.animation[data-phase=read] .caption-card{display:inline}.animation[data-phase=crank] .turn-handle{animation:crank 1.3s .25s cubic-bezier(.6,0,.2,1) both}.animation[data-phase=crank] .tiny-ball{animation:ball-jump .3s .45s 3 alternate;transform-box:fill-box;transform-origin:center}.animation[data-phase=capsule] .demo-capsule,.animation[data-phase=open] .demo-capsule{opacity:1;transform:translateX(-50%) scale(1)}.animation[data-phase=open] .shell-top{transform:translateY(-50px) rotate(-14deg);opacity:.15}.animation[data-phase=open] .shell-bottom{transform:translateY(50px) rotate(12deg);opacity:.15}.animation[data-phase=open] .capsule-glow{opacity:1;transform:scale(1.7)}.animation[data-phase=card] .card-reveal,.animation[data-phase=read] .card-reveal{opacity:1;transform:translateX(-50%) translateY(0) scale(1) rotateY(0)}
/* 01: One clear encounter, then a small gallery of people. */
.animation[data-pattern=encounter]:not([data-phase=crank]) .demo-machine{transform:translateX(-145%) scale(.73);opacity:.42}.animation[data-pattern=encounter][data-phase=read] .demo-machine{opacity:0;transform:translateX(-150%) scale(.7)}.animation[data-pattern=encounter][data-phase=read] .profile-left{opacity:1;transform:translateX(0) rotate(-9deg)}.animation[data-pattern=encounter][data-phase=read] .profile-right{opacity:1;transform:translateX(0) rotate(9deg)}
/* 02: Three labeled actions stay on screen throughout. */
.steps-layout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:52px;max-width:940px;margin:auto;padding:8px 10px 0}.step{min-width:0;position:relative;transition:opacity .5s;opacity:.32}.step-art{height:328px;position:relative}.step-number{font:800 11px Arial;letter-spacing:.1em;color:#ff7100;text-align:left;padding-left:15px}.step h2{font-size:21px;margin-top:4px}.step .demo-machine{width:245px;height:325px;max-width:100%;top:0}.step .demo-capsule{top:58px;width:180px;height:215px}.step .card-reveal{width:192px;top:9px;max-width:100%}.step .portrait{height:149px}.step .card-quote{font-size:19px}.step .card-name strong{font-size:18px}.step .card-heading{font-size:7px}.step-light{position:absolute;top:147px;left:0;right:0;font-size:17px;font-weight:800;opacity:0;transition:opacity .4s}.step-arrow{position:absolute;top:42%;font-size:28px;color:#ddd}.a1{left:31.5%}.a2{right:31.5%}.animation[data-pattern=steps] .step-one{opacity:1}.animation[data-pattern=steps]:not([data-phase=crank]) .step-two{opacity:1}.animation[data-pattern=steps][data-phase=card] .step-three,.animation[data-pattern=steps][data-phase=read] .step-three{opacity:1}.animation[data-pattern=steps][data-phase=card] .step-light,.animation[data-pattern=steps][data-phase=read] .step-light{opacity:1}.animation[data-pattern=steps]:not([data-phase=crank]) .a1,.animation[data-pattern=steps][data-phase=card] .a2,.animation[data-pattern=steps][data-phase=read] .a2{color:#ff7100}
/* 03: The collectible opens into an interview. */
.story-page{position:absolute;left:calc(50% + 6px);top:25px;width:400px;max-width:44%;padding:25px 30px;background:#fff;border:1px solid #e7e7e9;border-top:5px solid #ff7100;border-radius:6px 15px 15px 6px;text-align:left;box-shadow:0 13px 28px #2424260b;transform-origin:left;transform:perspective(900px) rotateY(-70deg) translateX(-70px);opacity:0;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .55s;z-index:4}.story-eyebrow{font-size:10px;font-weight:700;color:#ff7100}.story-page h2{font-size:27px;line-height:1.5;margin:8px 0 13px;letter-spacing:-.05em}.story-page mark{background:linear-gradient(transparent 70%,#ffdb00 70%);color:inherit}.story-byline{display:flex;gap:11px;align-items:center;font-size:9px;line-height:1.8}.story-byline b{font-size:13px}.avatar{width:41px;height:41px;border-radius:50%;background-image:url('../assets/founders.png');background-size:300% auto;background-position:0 14%}.story-answer{padding-top:14px;margin-top:14px;border-top:1px solid #eee}.story-answer>span{font-size:12px;font-weight:800}.story-answer p{font-size:11px;line-height:1.9;color:#666;margin-top:6px}.story-more{display:block;color:#ff7100;font-weight:800;font-size:11px;margin-top:18px}.animation[data-pattern=story]:not([data-phase=crank]) .demo-machine{transform:translateX(-150%) scale(.65);opacity:.3}.animation[data-pattern=story][data-phase=card] .demo-machine,.animation[data-pattern=story][data-phase=read] .demo-machine{opacity:0}.animation[data-pattern=story][data-phase=read] .card-reveal{transform:translateX(-118%) translateY(0) scale(.95) rotate(-5deg)}.animation[data-pattern=story][data-phase=read] .story-page{opacity:1;transform:perspective(900px) rotateY(0) translateX(0)}
.playback{display:flex;justify-content:center;align-items:center;gap:18px;margin:4px auto 16px}.playback button{font-size:11px;font-weight:600;color:#777;background:none;border:0;padding:8px 5px}.playback button:hover{color:#ff7100}.progress{width:85px;height:20px;margin:0;accent-color:#ff7100;cursor:pointer}.progress:focus-visible{outline:2px solid #242426;outline-offset:3px}.hero-message{font-size:17px;font-weight:700;letter-spacing:-.03em;margin-bottom:22px}.cta{display:flex;align-items:center;justify-content:center;position:relative;max-width:440px;margin:auto;padding:21px 45px;border-radius:60px;background:#ff7100;color:white;font-size:23px;font-weight:800;box-shadow:0 5px 0 #d94c00}.cta>span{position:absolute;right:28px;font-size:29px}.read-link{display:inline-block;margin-top:26px;padding-bottom:5px;border-bottom:1px solid #aaa;font-weight:700;font-size:14px}.concept{max-width:1000px;margin:0 auto 30px;border-top:1px solid #eee;padding:28px 30px;display:flex;gap:22px;align-items:baseline}.concept>span{font:800 24px Arial;color:#ff7100}.concept h2{font-size:18px}.concept p{font-size:12px;color:#777;margin-top:10px;line-height:1.9}footer{text-align:center;font-size:10px;color:#999;padding:20px}.is-paused *{animation-play-state:paused!important}.animation.is-seeking *{transition:none!important}
@keyframes crank{from{transform:rotate(-28deg)}to{transform:rotate(332deg)}}@keyframes ball-jump{to{translate:0 -9px}}
@media(max-width:700px){.lab-nav{padding:10px;display:block}.lab-nav>span{display:block;margin:0 0 8px 4px;font-size:8px}.lab-nav nav{gap:3px}.lab-nav a{flex:1;font-size:9px;padding:10px 5px;text-align:center}header{padding:18px 20px}.brand{font-size:21px}.brand-ball{width:27px;height:27px}header nav{gap:18px;font-size:11px}.hero{padding:24px 14px 35px}h1>span{font-size:33px}h1>strong{font-size:clamp(25px,6.4vw,43px)}.animation{height:360px;margin-top:17px}.demo-machine{width:240px;height:300px;top:5px}.demo-capsule{top:63px;width:180px;height:220px}.card-reveal{width:192px;top:8px}.portrait{height:151px}.card-name strong{font-size:18px}.card-quote{font-size:19px}.scene-caption{font-size:14px;bottom:9px}.mini-profile{width:108px;top:69px;border-width:2px;padding:5px}.other-face{height:133px}.mini-profile span{font-size:9px;padding:9px 1px}.profile-left{left:calc(50% - 177px)}.profile-right{left:calc(50% + 69px)}.animation[data-pattern=encounter][data-phase=read] .card-reveal{transform:translateX(-50%) scale(.86)}.hero-message{font-size:14px;margin-bottom:18px}.playback{gap:12px;margin:0 auto 12px}.playback button{font-size:10px}.cta{max-width:360px;font-size:19px;padding:20px 40px}.cta>span{font-size:24px;right:20px}.read-link{font-size:12px}.concept{padding:25px 22px;gap:15px}.concept h2{font-size:16px}.concept p{font-size:11px}.steps-layout{gap:18px;padding:25px 0 0}.step-art{height:255px}.step-number{font-size:9px;padding-left:5px}.step h2{font-size:14px;white-space:nowrap}.step .demo-machine{width:125px;height:250px;max-width:125%;top:0}.step .demo-capsule{width:120px;height:165px;top:39px}.step .card-reveal{width:108px;max-width:120%;top:43px}.step .ceo-card{padding:5px;border-width:3px;border-radius:9px}.step .portrait{height:94px}.step .card-heading{font-size:4px;letter-spacing:0;margin-bottom:4px}.step .card-quote{font-size:12px;left:5px;bottom:6px}.step .card-name{padding-top:5px}.step .card-name>span{font-size:5px}.step .card-name strong{font-size:12px}.step .card-name>b{font-size:5px;margin-top:4px;padding-top:5px}.step-light{font-size:10px;top:123px;white-space:nowrap}.step-arrow{font-size:18px}.a1{left:31%}.a2{right:31%}.story-page{left:41%;top:27px;max-width:none;width:58%;padding:16px 13px;border-top-width:4px}.story-page h2{font-size:18px;margin:6px 0 11px}.story-eyebrow{font-size:7px}.story-byline{font-size:6px;gap:6px}.story-byline b{font-size:9px}.avatar{width:28px;height:28px;flex:none}.story-answer{margin-top:10px;padding-top:11px}.story-answer>span{font-size:9px}.story-answer p{font-size:8px;line-height:1.8}.story-more{font-size:8px;margin-top:13px}.animation[data-pattern=story][data-phase=read] .card-reveal{transform:translateX(-90%) translateY(8px) scale(.62) rotate(-6deg)}.animation[data-pattern=story] .scene-caption{font-size:13px}}
@media(max-width:360px){.profile-left{left:calc(50% - 157px)}.profile-right{left:calc(50% + 49px)}.mini-profile{width:108px}.step h2{font-size:12px}.steps-layout{gap:13px}.story-page h2{font-size:16px}.story-answer p{font-size:7px}.story-page{padding:15px 11px}.animation[data-pattern=story][data-phase=read] .card-reveal{transform:translateX(-85%) translateY(13px) scale(.54) rotate(-6deg)}}
@media(prefers-reduced-motion:reduce){.animation *{animation:none!important;transition:none!important}}
.other-face{background-size:auto 100%;background-repeat:no-repeat}.portrait,.avatar{background-repeat:no-repeat}
.animation[data-pattern=steps][data-phase=crank] .demo-capsule{opacity:.28;transform:translateX(-50%) scale(1)}
.animation[data-pattern=steps][data-phase=card] .demo-capsule,.animation[data-pattern=steps][data-phase=read] .demo-capsule{opacity:1;transform:translateX(-50%) scale(1)}
.animation[data-pattern=steps][data-phase=card] .shell-top,.animation[data-pattern=steps][data-phase=read] .shell-top{transform:translateY(-30px) rotate(-14deg);opacity:.85}
.animation[data-pattern=steps][data-phase=card] .shell-bottom,.animation[data-pattern=steps][data-phase=read] .shell-bottom{transform:translateY(25px) rotate(12deg);opacity:.85}
.step-light{top:auto;bottom:16px}
@media(max-width:700px){.story-page{left:46%;width:54%}.animation[data-pattern=story][data-phase=read] .card-reveal{transform:translateX(-105%) translateY(8px) scale(.60) rotate(-5deg)}}
@media(max-width:360px){.story-page h2{font-size:15px}.animation[data-pattern=story][data-phase=read] .card-reveal{transform:translateX(-90%) translateY(13px) scale(.50) rotate(-5deg)}}
.demo-tap{position:absolute;left:60%;top:51%;width:29px;height:36px;opacity:0;z-index:5;pointer-events:none}.demo-tap svg{width:100%;height:100%}.animation[data-phase=capsule] .demo-tap{animation:demo-tap .9s .2s both}@keyframes demo-tap{0%{opacity:0;transform:translate(15px,12px)}35%{opacity:1;transform:translate(0,0)}65%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1)}}
@media(max-width:700px){.profile-left{left:calc(50% - 162px)}.profile-right{left:calc(50% + 54px)}}
@media(max-width:360px){.mini-profile{width:96px}.other-face{height:116px}.profile-left{left:calc(50% - 132px)}.profile-right{left:calc(50% + 36px)}}