.fly-tile{--tw:clamp(32px,6vw,46px);--th:clamp(50px,9.4vw,74px);position:absolute;display:grid;place-items:center;width:var(--tw);height:var(--th);border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#fdf8ec,#efe4c6);box-shadow:0 10px 20px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.1),inset 0 -3px 0 rgba(0,0,0,.06);font-family:var(--font-heading);font-weight:700;font-size:clamp(15px,2.6vw,20px);animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both;animation-timeline:view();animation-range:entry 8% cover 42%}.fly-tile.c-navy{color:#1e3a6e}.fly-tile.c-red{color:#c0392b}.fly-tile.c-black{color:#1a1a1a}.fly-tile.c-green{color:#1f7a4d}.okey-story{position:relative;width:92%;aspect-ratio:var(--story-ratio,1300/640);margin:0 auto;cursor:grab;touch-action:pan-y;-webkit-user-drag:none;user-select:none;--ring-r:clamp(110px,24vw,220px);transform-origin:50% 50%;transform:rotate(90deg)}.okey-story:active{cursor:grabbing}.okey-story.is-visible{animation:okey-story-turn-in .7s cubic-bezier(.22,.61,.36,1) forwards}@keyframes okey-story-turn-in{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.okey-story__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));z-index:1;opacity:0;transform:translateX(0);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}.okey-story__frame.is-active{opacity:1;transform:translateX(0);z-index:2}.okey-story__frame.is-before{transform:translateX(-8%)}.okey-story__frame.is-after{transform:translateX(8%)}.okey-story__frame.okey-story__frame--scripted{transform:none;filter:brightness(0);transition:opacity 1.1s ease,filter 1.1s ease}.okey-story__frame.okey-story__frame--scripted.is-active{opacity:1;transform:none;filter:brightness(1)}.okey-story__frame.okey-story__frame--scripted.is-after,.okey-story__frame.okey-story__frame--scripted.is-before{opacity:0;transform:none;filter:brightness(0)}.okey-story__loadbar{position:absolute;left:50%;top:80%;transform:translateX(-50%);width:30%;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;z-index:3;opacity:0;transition:opacity .3s ease;pointer-events:none}.okey-story__loadbar.is-active{opacity:1}.okey-story__loadbar-fill{display:block;height:100%;width:100%;background:#fff;border-radius:inherit;transform-origin:left;transform:scaleX(0)}.okey-story.is-visible .okey-story__loadbar.is-active .okey-story__loadbar-fill{animation:okey-story-loadbar-fill 2s linear forwards}@keyframes okey-story-loadbar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.okey-story__dots{position:absolute;left:50%;top:100%;margin-top:14px;transform:translateX(-50%);display:flex;gap:6px;z-index:3}.okey-story__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .3s ease,transform .3s ease}.okey-story__dot.is-active{background:#fff;transform:scale(1.3)}.okey-story__swipe-hint{position:absolute;top:50%;z-index:4;width:clamp(30px,6vw,40px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.32);backdrop-filter:blur(2px);color:rgba(255,255,255,.92);font-size:clamp(13px,1.6vw,16px);opacity:0;pointer-events:none;transition:opacity .5s ease;animation:okey-story-swipe-hint-nudge 1.6s ease-in-out infinite;animation-play-state:paused}.okey-story__swipe-hint.is-shown{opacity:1;animation-play-state:running}.okey-story__swipe-hint--left{left:-8%;--nudge-x:-6px}.okey-story__swipe-hint--right{right:-8%;--nudge-x:6px;animation-delay:.8s}@keyframes okey-story-swipe-hint-nudge{0%,to{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(var(--nudge-x))}}.okey-story__rings{position:absolute;top:50%;left:50%;z-index:-1;width:calc(var(--ring-r) * 2.6);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 14px,color-mix(in srgb,var(--story-accent,#d8b16a) 30%,transparent) 14px 15px);mask-image:radial-gradient(circle,transparent 22%,#000 40%,#000 78%,transparent 92%);opacity:.5;animation:okey-story-rings-spin 60s linear infinite;animation-play-state:paused}.okey-story.is-visible .okey-story__rings{animation-play-state:running}@keyframes okey-story-rings-spin{to{rotate:1turn}}.okey-story .tile-orbit-rings{position:absolute;top:0;left:0;translate:-50% -50%;width:clamp(92px,16vw,132px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 7px,color-mix(in srgb,var(--story-accent,#d8b16a) 35%,transparent) 7px 8px);mask-image:radial-gradient(circle,transparent 18%,#000 42%,transparent 86%);opacity:0;scale:0;animation:okey-story-rings-spin 40s linear infinite,okey-tile-rings-grow .6s cubic-bezier(.22,.61,.36,1) forwards;animation-play-state:paused}@keyframes okey-tile-rings-grow{0%{opacity:0;scale:0}to{opacity:.65;scale:1}}.okey-story.is-visible .tile-orbit-rings{animation-play-state:running}.okey-story .tile-orbit-slot{position:absolute;top:50%;left:50%;width:0;height:0;z-index:0}.okey-story .fly-tile{position:absolute;top:0;left:0;opacity:0;transform:translate(-50%,-50%) scale(0);--tw:clamp(38px,7vw,54px);--th:clamp(58px,11vw,84px);font-size:clamp(19px,3.4vw,27px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.okey-story .fly-tile:after{content:"";width:32%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,currentColor 0 34%,transparent 34% 58%,currentColor 58% 100%)}.okey-story .fly-tile:has(.fly-tile__mark){display:grid;place-items:center}.okey-story .fly-tile:has(.fly-tile__mark):after{content:none}.fly-tile__mark{display:block;object-fit:contain;width:78%;height:auto}.okey-story.is-visible .fly-tile{animation:okey-tile-pop .4s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes okey-tile-pop{0%{opacity:0;transform:translate(-50%,-50%) translateY(-14px) scale(.4)}60%{opacity:1}to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}}.fly-tile.tavla-checker,.fly-tile.tavla-die{--tw:clamp(40px,7vw,58px);--th:var(--tw);width:var(--tw);height:var(--th);box-shadow:none}.fly-tile.tavla-checker:after,.fly-tile.tavla-die:after{content:none}.fly-tile.tavla-die{border-radius:16%;background:linear-gradient(150deg,#fffaf0,#d9c9a8);box-shadow:0 10px 20px rgba(0,0,0,.45),inset 0 -4px 8px rgba(0,0,0,.16),inset 0 3px 6px rgba(255,255,255,.7);rotate:0deg;animation:tavla-die-spin 9s linear infinite;animation-play-state:paused}.okey-story.is-visible .fly-tile.tavla-die{animation-play-state:running}@keyframes tavla-die-spin{to{rotate:1turn}}.fly-tile.tavla-die--five{background:radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 28% 28% /20% 20% no-repeat,radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 72% 28% /20% 20% no-repeat,radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 50% 50% /20% 20% no-repeat,radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 28% 72% /20% 20% no-repeat,radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 72% 72% /20% 20% no-repeat,linear-gradient(150deg,#fffaf0,#d9c9a8)}.fly-tile.tavla-die--three{background:radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 28% 28% /20% 20% no-repeat,radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 50% 50% /20% 20% no-repeat,radial-gradient(circle,#3a2e22 0 40%,transparent 42%) 72% 72% /20% 20% no-repeat,linear-gradient(150deg,#fffaf0,#d9c9a8)}.fly-tile.tavla-checker{border-radius:50%;box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.25),inset 0 -3px 5px rgba(0,0,0,.3)}.fly-tile.tavla-checker--light{background:radial-gradient(circle at 34% 30%,#fdf6e6,#cbb590)}.fly-tile.tavla-checker--dark{background:radial-gradient(circle at 34% 30%,#4a4f60,#1b1f2b)}