:root{--blue:#0868e8;--aqua:#42cbea;--ice:#dff8ff;--paper:#f6fbff}*{box-sizing:border-box}html,body,[data-composition-id]{width:100%;height:100%;margin:0;overflow:hidden;background:var(--paper)}[data-composition-id]{position:relative;isolation:isolate}.motion-wash{position:absolute;inset:-12%;background:radial-gradient(circle at 78% 47%,#b8f2ff 0 10%,#dff8ff99 28%,transparent 55%),radial-gradient(circle at 66% 85%,#0b68e81c 0 14%,transparent 40%);animation:wash 8s ease-in-out infinite both}.motion-line{position:absolute;right:1%;z-index:1;height:2px;transform-origin:left;background:linear-gradient(90deg,#42cbea00,#42cbea,#0868e8);animation:trace 8s cubic-bezier(.22,1,.36,1) infinite both}.line-one{top:39%;width:36%;animation-delay:-.1s}.line-two{top:65%;width:29%;animation-delay:-.25s}.paper{position:absolute;z-index:2;display:block;background:#f8fdff;border:2px solid #0868e8;box-shadow:18px 18px 0 #42cbea33}.paper-know{right:31%;top:30%;width:clamp(130px,17vw,270px);aspect-ratio:1.25;transform-origin:center;animation:know 8s cubic-bezier(.22,1,.36,1) infinite both}.paper-use{right:3%;top:31%;width:clamp(210px,27vw,440px);aspect-ratio:1.35;transform-origin:center;animation:use 8s cubic-bezier(.22,1,.36,1) infinite both}.paper-tab{position:absolute;top:-16px;left:18px;padding:3px 12px;background:#0868e8;color:#fff;font:800 clamp(12px,1.25vw,18px)/1 "Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.06em}.paper i{position:absolute;left:13%;right:13%;height:3px;background:#a4eaf7}.paper i:nth-of-type(1){top:34%}.paper i:nth-of-type(2){top:52%;right:28%}.paper i:nth-of-type(3){top:70%;right:20%}.paper-use b{position:absolute;right:12%;bottom:14%;width:24%;aspect-ratio:1;background:#0868e8;border-radius:50%}.lens{position:absolute;z-index:4;right:16%;top:26%;width:clamp(120px,15vw,230px);aspect-ratio:1;border:clamp(13px,1.6vw,25px) solid #42cbea;border-radius:50%;background:#f6fbff99;display:grid;place-items:center;color:#0868e8;font:800 clamp(12px,1.25vw,18px)/1 "Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.06em;animation:lens 8s cubic-bezier(.22,1,.36,1) infinite both}.lens:after{content:"";position:absolute;width:42%;height:clamp(13px,1.6vw,25px);right:-33%;bottom:2%;background:#42cbea;transform:rotate(42deg);transform-origin:left center}.dot{position:absolute;z-index:5;width:clamp(12px,1.4vw,24px);aspect-ratio:1;border-radius:50%;background:#0868e8;box-shadow:0 0 0 9px #dff8ff;animation:dot 8s ease-in-out infinite both}.dot-one{right:38%;top:62%;animation-delay:-.15s}.dot-two{right:19%;top:66%;animation-delay:-.3s}.dot-three{right:4%;top:57%;animation-delay:-.45s}@keyframes wash{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}@keyframes trace{0%,100%{transform:scaleX(.34);opacity:.38}35%,72%{transform:scaleX(1);opacity:1}}@keyframes know{0%,100%{transform:translate(25px,35px) rotate(-7deg) scale(.78);opacity:.55}22%,46%{transform:translate(0,0) rotate(-2deg) scale(1);opacity:1}75%{transform:translate(18px,16px) rotate(1deg) scale(.91);opacity:.85}}@keyframes lens{0%,100%{transform:translate(28px,44px) scale(.66);opacity:.5}30%,68%{transform:translate(0,0) scale(1);opacity:1}82%{transform:translate(-10px,12px) scale(.9);opacity:.82}}@keyframes use{0%,100%{transform:translate(35px,-30px) rotate(6deg) scale(.76);opacity:.62}45%,72%{transform:translate(0,0) rotate(0) scale(1);opacity:1}86%{transform:translate(-10px,10px) rotate(-2deg) scale(.94);opacity:.9}}@keyframes dot{0%,100%{transform:scale(.6);opacity:.4}48%,70%{transform:scale(1);opacity:1}}@media(max-width:760px){.motion-wash{opacity:.55;background:radial-gradient(circle at 56% 15%,#c4f2fb 0 13%,transparent 36%)}.paper{box-shadow:8px 8px 0 #42cbea33}.paper-know{right:60%;top:7%;width:95px}.lens{right:34%;top:7%;width:84px;border-width:10px}.paper-use{right:4%;top:7%;width:130px}.paper-tab{top:-13px;left:8px;padding:3px 8px;font-size:12px}.lens{font-size:12px}.line-one{right:6%;top:23%;width:80%;opacity:.8}.line-two{right:10%;top:29%;width:68%;opacity:.62}.dot-one{right:65%;top:28%}.dot-two{right:38%;top:31%}.dot-three{right:11%;top:28%}}@media(prefers-reduced-motion:reduce){*{animation:none!important}.motion-line{transform:scaleX(1);opacity:1}.paper-know,.lens,.paper-use{opacity:1}.paper-know{transform:translate(0) rotate(-2deg)}.lens{transform:translate(0)}.paper-use{transform:translate(0)}}
/* final label placement kept in the iframe stylesheet */
.paper-use .paper-tab{left:auto;right:18px}
@media(max-width:760px){.paper-use .paper-tab{left:auto;right:8px}}