body{background-image:none;overflow-x:hidden;font-family:Bitcount Prop Single;color:#000;min-height:100dvh;display:flex;justify-content:center;align-items:center;margin:0;overflow-y:auto}.sticky-header{position:fixed;top:0;left:0;width:100%;padding:10px 20px;display:flex;align-items:center;z-index:1000;box-sizing:border-box}.sticky-header .logo{height:40px;margin-right:10px}.sticky-header .logo-name{height:30px}body:has(#layout-detector.horizontal) .sticky-header .logo{height:50px}body:has(#layout-detector.horizontal) .sticky-header .logo-name{height:40px}body:has(#layout-detector.vertical) .sticky-header .logo{height:35px}body:has(#layout-detector.vertical) .sticky-header .logo-name{height:25px}#divo-container{cursor:pointer}#canvas{width:100vw;height:auto;position:relative}.section-container{width:100%;height:100vh;position:relative;overflow:hidden}#section-1{background:linear-gradient(0deg,#f6c6f3,#d5faff)}#section-2{background:linear-gradient(180deg,#d99152cc,#f2e205b3)}.horizontal{width:88.88vh}.vertical{width:50vh}.canvas-image,.div-block,.text-block{position:relative}.text-block h3,.text-block p{margin:0}.feed-divo-button{text-decoration:none;color:#fff;font-weight:700;background:linear-gradient(to bottom,#d3ffef,#27be8b);padding:10px 15px;border-radius:40px;box-shadow:0 4px 6px #0000001a;text-align:center;display:inline-block;width:150px;height:80px;cursor:pointer;border:none;font-family:Bitcount Prop Single,sans-serif}.div-block{display:flex;flex-direction:column;gap:10px;align-items:center}.div-block .text-block{position:relative;z-index:auto;min-width:unset;min-height:unset}.canvas-image{max-width:none!important}.text-container h1,.text-container h2,.text-container h3,.text-container p{font-family:Bitcount Prop Single,sans-serif;color:#000;text-align:center;margin:0}.horizontal .text-container h2{font-size:35px;font-weight:400}.vertical .text-container h2{font-size:18px;font-weight:500}.horizontal .text-container p{font-size:25px;font-weight:400}.vertical .text-container p{font-size:15px;font-weight:500}.landing-h1,.landing-h2{text-align:center}.horizontal .landing-h1{font-size:50px;font-weight:600}.vertical .landing-h1{font-size:30px;font-weight:500}.horizontal .landing-h2{font-size:30px;font-weight:400}.vertical .landing-h2{font-size:20px;font-weight:500}.card-back p{font-weight:400;text-align:center;color:#000}.horizontal .card-back p{font-size:25px}.vertical .card-back p{font-size:14px}#section-3{background:linear-gradient(to bottom,#e3fde5,#b7f5ab)}#section-4{background:linear-gradient(to bottom,#fef4ce,#e4d2ff)}#section-3 #canvas,#section-4 #canvas{width:100vw;height:100vh;overflow:hidden;position:relative;border:none;box-shadow:none}#section-3 .horizontal,#section-4 .horizontal{width:88.88vh;height:50vh}#section-3 .vertical,#section-4 .vertical{width:50vh;height:88.88vh}#section-3 .canvas-image,#section-3 .div-block,#section-3 .card,#section-4 .canvas-image,#section-4 .div-block,#section-4 .card{position:absolute;transform:translate(-50%) translateY(-50%)}#section-3 .card,#section-4 .card{border-radius:16px;perspective:1000px}#section-3 .card-inner,#section-4 .card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d}@media (hover: hover) and (pointer: fine){#section-3 .card:hover .card-inner,#section-4 .card:hover .card-inner{transform:rotateY(180deg)}}#section-3 .card.is-flipped .card-inner,#section-4 .card.is-flipped .card-inner{transform:rotateY(180deg)}#section-3 .card-front,#section-3 .card-back,#section-4 .card-front,#section-4 .card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;box-sizing:border-box;box-shadow:0 4px 6px #0000001a;border-radius:25px}#section-3 .card-back,#section-4 .card-back{transform:rotateY(180deg);font-size:20px}#section-3 #card1 .card-front,#section-3 #card1 .card-back,#section-4 #card1 .card-front,#section-4 #card1 .card-back{background:radial-gradient(circle,#f0e0b5,#bf7c45)}#section-3 #card2 .card-front,#section-3 #card2 .card-back,#section-4 #card2 .card-front,#section-4 #card2 .card-back{background:radial-gradient(circle,#f7e8a9,#ffca43)}#section-3 #card3 .card-front,#section-3 #card3 .card-back,#section-4 #card3 .card-front,#section-4 #card3 .card-back{background:radial-gradient(circle,#f0e0b5,#bdb331)}#section-3 #card4 .card-front,#section-3 #card4 .card-back,#section-4 #card4 .card-front,#section-4 #card4 .card-back{background:radial-gradient(circle,#f7e8a9,#ffca43)}#section-3 #card5 .card-front,#section-3 #card5 .card-back,#section-4 #card5 .card-front,#section-4 #card5 .card-back{background:radial-gradient(circle,#f0e0b5,#bf7c45)}#section-3 .card .canvas-image,#section-4 .card .canvas-image{max-width:90%;max-height:90%;object-fit:contain;top:50%;left:50%}#section-3 #grass-container,#section-4 #grass-container{position:absolute;background-color:#71b25f;z-index:0}#section-3 #grass-container .canvas-image,#section-4 #grass-container .canvas-image{position:absolute;top:0;transform:translate(-50%)}#speech-bubble-container{visibility:hidden;opacity:0}#speech-bubble-container.visible{visibility:visible;opacity:1;animation:jump .5s ease-in-out}@keyframes walk-right-to-left{0%{left:85%;transform:translate(-50%) translateY(-50%) scaleX(1)}to{left:15%;transform:translate(-50%) translateY(-50%) scaleX(1)}}@keyframes walk-left-to-right{0%{left:15%;transform:translate(-50%) translateY(-50%) scaleX(-1)}to{left:85%;transform:translate(-50%) translateY(-50%) scaleX(-1)}}@keyframes jump{0%{transform:translate(-50%) translateY(-50%) scale(.9);opacity:0}50%{transform:translate(-50%) translateY(-65%) scale(1.05);opacity:1}to{transform:translate(-50%) translateY(-50%) scale(1);opacity:1}}.walk-right-to-left{animation:walk-right-to-left 5s linear forwards}.walk-left-to-right{animation:walk-left-to-right 5s linear forwards}@keyframes paw-animation{0%{opacity:0}50%{opacity:1}to{opacity:0}}.paw-image{opacity:0}.paw-animation{animation:paw-animation 2s ease-in-out}.video-placeholder{border-radius:50%;object-fit:cover}