.screen-enter-active[data-v-ce5723dc],.screen-leave-active[data-v-ce5723dc]{transition:opacity .25s ease,transform .25s ease}.screen-enter-from[data-v-ce5723dc]{opacity:0;transform:translate(16px)}.screen-leave-to[data-v-ce5723dc]{opacity:0;transform:translate(-16px)}.phone-edge[data-v-ce5723dc]{background:linear-gradient(145deg,#e3e4e6,#a3a5a9 35%,#d6d7da 60%,#8e9094)}.track-screen[data-v-ce5723dc]{width:100%;zoom:.72}@media(prefers-reduced-motion:reduce){.screen-enter-active[data-v-ce5723dc],.screen-leave-active[data-v-ce5723dc]{transition:none}}@media(min-width:1024px){.oc-hero-stage{align-items:stretch;container-type:size;display:flex;flex:1 1 0;min-height:0;position:relative}.oc-hero-phone{bottom:0;filter:blur(10px);opacity:0;perspective:1600px;pointer-events:none;position:absolute;right:0;transform:translate(calc(var(--phone-zoom, 1.3)*50% - 50cqw),calc(var(--phone-zoom, 1.3)*50% - 50cqh)) scale(var(--phone-zoom,1.3));transform-origin:bottom right;transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .55s ease .15s,filter .6s ease}.oc-hero-card{transform-origin:center;transition:opacity .7s ease .35s,transform .9s cubic-bezier(.16,1,.3,1) .35s,filter .7s ease .35s}[data-intro=play] .oc-hero-phone{opacity:1;pointer-events:auto;transform:translate(calc(var(--phone-intro, .95)*50% - 38cqw),calc(var(--phone-intro, .95)*50% - 50cqh)) scale(var(--phone-intro,.95))}[data-intro=play] .oc-hero-card{filter:blur(12px);opacity:0;pointer-events:none;transform:scale(.94)}[data-intro=play] .oc-hero-phone{filter:none}.oc-phone-cam{position:relative;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.45,.05,.25,1)}.oc-hero-stage[data-phone-sized] [data-intro=play] .oc-phone-enter,[data-intro=play] .oc-hero-stage[data-phone-sized] .oc-phone-enter{animation:oc-phone-in 1.4s cubic-bezier(.16,1,.3,1) both}.oc-phone-glow{animation:oc-glow 6s ease-in-out infinite;background:radial-gradient(closest-side,#d3ff528c,#d3ff5200);border-radius:9999px;filter:blur(24px);top:-18%;right:-30%;bottom:-18%;left:-30%;z-index:-1}.oc-phone-glow,.oc-phone-sheen{pointer-events:none;position:absolute}.oc-phone-sheen{border-radius:48px;top:0;right:0;bottom:0;left:0;overflow:hidden}.oc-phone-sheen:after{animation:oc-sheen 1.5s cubic-bezier(.4,0,.2,1) .4s both;background:linear-gradient(105deg,#fff0,#ffffff73,#fff0);bottom:-20%;content:"";left:-70%;position:absolute;top:-20%;transform:skew(-14deg);width:45%}[data-intro=play] .oc-hero-explain-list li{animation:oc-list-in .8s cubic-bezier(.16,1,.3,1) both}.oc-rise{animation:oc-rise .7s cubic-bezier(.16,1,.3,1) both}}@media(min-width:1024px)and (prefers-reduced-motion:no-preference){.oc-hero-card[data-your-turn] .grid>button{animation:oc-tile-wave .9s cubic-bezier(.34,1.56,.64,1) both}.oc-hero-card[data-your-turn] .grid>button:first-child{animation-delay:1.15s}.oc-hero-card[data-your-turn] .grid>button:nth-child(2){animation-delay:1.23s}.oc-hero-card[data-your-turn] .grid>button:nth-child(3){animation-delay:1.31s}.oc-hero-card[data-your-turn] .grid>button:nth-child(4){animation-delay:1.39s}.oc-hero-card[data-your-turn] .grid>button:nth-child(5){animation-delay:1.47s}.oc-hero-card[data-your-turn] .grid>button:nth-child(6){animation-delay:1.55s}.oc-hero-card[data-your-turn] .grid>button:nth-child(7){animation-delay:1.63s}.oc-hero-card[data-your-turn] .grid>button:nth-child(8){animation-delay:1.71s}.oc-hero-card[data-your-turn] .grid>button:nth-child(9){animation-delay:1.79s}.oc-hero-card[data-your-turn] .grid>button:nth-child(10){animation-delay:1.87s}.oc-hero-card[data-your-turn] .grid>button:nth-child(11){animation-delay:1.95s}.oc-hero-card[data-your-turn] .grid>button:nth-child(12){animation-delay:2.03s}.oc-hero-card[data-your-turn] .oc-hero-hint{animation:oc-hint-in .6s ease .9s both;color:#000;font-weight:600}.oc-hero-card[data-your-turn] .oc-hero-hint-arrow{animation:oc-arrow 1.2s ease-in-out 1.5s infinite}}@keyframes oc-tile-wave{0%{transform:none}35%{border-color:#111827;box-shadow:0 12px 24px -14px #00000059;transform:translateY(-6px)}to{transform:none}}@keyframes oc-hint-in{0%{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}@keyframes oc-arrow{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}@keyframes oc-phone-in{0%{opacity:0;transform:translateY(90px) rotateX(28deg) scale(.9)}to{opacity:1;transform:none}}@keyframes oc-glow{0%,to{opacity:.65;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}@keyframes oc-sheen{0%{left:-70%}to{left:130%}}@keyframes oc-list-in{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:none}}@keyframes oc-rise{0%{opacity:.2;transform:translateY(14px)}to{opacity:1;transform:none}}@media(min-width:1024px)and (prefers-reduced-motion:no-preference){html:has([data-intro=play]){overflow:hidden}}html:has(.oc-hero-stage){scrollbar-gutter:stable}@media(min-width:1024px){.oc-hero-explain-list{width:calc(62% - var(--phone-half, 170px) - 64px)}.oc-hero-explain{transition:opacity .4s ease}[data-intro=done] .oc-hero-explain{opacity:0;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s;visibility:hidden}}@media(prefers-reduced-motion:reduce){.oc-hero-explain{display:none!important}}.oc-hero-more{transition:opacity .5s ease .9s}[data-intro=play] .oc-hero-more{opacity:0;transition:none;visibility:hidden}.oc-hero-stage:not([data-phone-sized]) .oc-hero-phone{opacity:0;transition:none}@media(prefers-reduced-motion:reduce){[data-intro] .oc-hero-card,[data-intro] .oc-hero-phone{transition:none!important}[data-intro=play] .oc-hero-card{filter:none!important;opacity:1!important;pointer-events:auto!important;transform:none!important}.oc-hero-explain-list li,.oc-phone-enter,.oc-phone-glow,.oc-phone-sheen:after,.oc-rise{animation:none!important}.oc-hero-phone,.oc-hero-skip{display:none!important}}.marquee{-webkit-mask-image:linear-gradient(var(--mask-direction,to right),transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(var(--mask-direction,to right),transparent,#000 20%,#000 80%,transparent);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.marquee,.marquee__group{display:flex;gap:var(--gap)}.marquee__group{align-items:center;animation:scroll-x var(--duration) linear infinite;flex-shrink:0;justify-content:space-around;min-width:100%}@media(prefers-reduced-motion:reduce){.marquee__group{animation-play-state:paused}}.marquee--vertical .marquee__group{animation-name:scroll-y;flex-direction:column}.marquee--reverse .marquee__group{animation-delay:-3s;animation-direction:reverse}@keyframes scroll-x{0%{transform:translate(var(--scroll-start))}to{transform:translate(var(--scroll-end))}}@keyframes scroll-y{0%{transform:translateY(var(--scroll-start))}to{transform:translateY(var(--scroll-end))}}.marquee img{aspect-ratio:1/0;background:#fff;border-radius:.5rem;display:grid;fill:#1037a0;padding-left:calc(var(--size)/5);padding-right:calc(var(--size)/5);place-items:center;width:var(--size)}.marquee--vertical img{aspect-ratio:1;padding:calc(var(--size)/6);width:calc(var(--size)/1.5)}.marquee svg{aspect-ratio:16/9;background:#f2f2f2;border-radius:.5rem;display:grid;fill:#1037a0;padding:calc(var(--size)/6);place-items:center;width:var(--size)}.marquee--vertical svg{aspect-ratio:1;padding:calc(var(--size)/6);width:calc(var(--size)/1.5)}.wrapper{--gap:1rem;--duration:30s;--scroll-start:0%;--scroll-end:-100%;--size:150px;display:flex;flex-direction:column;gap:var(--gap);margin:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12.5%,#000 87.5%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12.5%,#000 87.5%,transparent);max-width:100vw;overflow:hidden;padding:2rem 0;position:relative}
