:root{font-family:Arial,Helvetica,sans-serif;color:#07516a;background:#fff;--teal:#009bb2;--line:#dce7e9}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #ebaa32;outline-offset:4px}button:disabled{opacity:.2;cursor:default}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#experience{height:100vh;height:100dvh;position:relative;background:#fff;overflow:hidden}#stage{position:absolute;inset:40px 24px 82px;overflow:hidden;touch-action:pan-y pinch-zoom;isolation:isolate}.canvas{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none}.canvas.current{opacity:1;visibility:visible;pointer-events:auto}.canvas.leaving{visibility:visible}.infographic,.initial-art{display:block;width:100%;height:100%;object-fit:contain;overflow:hidden}.utilities{position:absolute;z-index:4;top:7px;right:18px;display:flex;align-items:center;gap:2px;background:#ffffffed;border:1px solid #dce7e970;border-radius:30px}.icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%}.icon:hover{background:#e9f6f7}
.page-navigation{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:14px;padding:7px 9px;background:#fff;border:1px solid var(--line);border-radius:40px;box-shadow:0 5px 22px #004b630b}.arrow{width:44px;height:44px;border-radius:50%;font-size:24px;display:grid;place-items:center;transition:background .2s,transform .2s}.arrow:hover:not(:disabled){background:#e7f7f8;transform:translateX(-2px)}.arrow.next{color:#fff;background:var(--teal)}.arrow.next:hover:not(:disabled){background:#007c91;transform:translateX(2px)}.arrow.next:disabled{color:var(--teal);background:#eff8f9;opacity:.35}.pages{display:flex;align-items:center;gap:3px}.pages button{font-size:12px;width:34px;height:40px;border-radius:20px;font-variant-numeric:tabular-nums;opacity:.4;transition:background .2s}.pages button[aria-current]{font-weight:700;opacity:1}.pages button:hover{background:#e7f7f8;opacity:1}.pages span{color:#acc0c5;font-size:11px}
.stat,.illustration,.bar{transform-box:fill-box;transform-origin:center}.stat,.illustration,.bar,.donut{cursor:pointer}.stat{animation:number-pulse var(--duration,4.8s) ease-in-out infinite;animation-delay:var(--delay,0s)}.stat.small{animation-name:small-pulse}.illustration{animation:illustration-float var(--duration,3.8s) ease-in-out infinite;animation-delay:var(--delay,0s);transform-origin:var(--pivot,50% 85%)}.illustration.teacher{animation-name:teacher-float}.illustration.conversation{animation-name:bubble-bounce}.illustration.phone{animation-name:phone-rock}.stat:hover,.bar:hover{filter:drop-shadow(0 1px 3px #009bb22a)}.bar{transform-origin:left center}.shine{pointer-events:none}.bar-sheen{animation:bar-shine var(--duration,4.2s) cubic-bezier(.3,0,.2,1) infinite;animation-delay:var(--delay,0s)}.ring-sheen{animation:ring-shine 5.8s linear infinite;transform-origin:579.466px 110.85px}.canvas:not(.current) *{animation-play-state:paused!important}
@keyframes illustration-float{0%,100%{transform:translate(0,0) rotate(-.8deg)}35%{transform:translate(1px,-5.5px) rotate(1.5deg)}70%{transform:translate(-1px,-1.5px) rotate(-1.2deg)}}
@keyframes teacher-float{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-3.7px) rotate(.7deg)}}
@keyframes bubble-bounce{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}28%{transform:translateY(-6px) rotate(2deg) scale(1.035)}52%{transform:translateY(-1px) rotate(-1.5deg) scale(.99)}76%{transform:translateY(-3px) rotate(.5deg) scale(1.015)}}
@keyframes phone-rock{0%,100%{transform:translateY(0) rotate(-1deg)}30%{transform:translateY(-4px) rotate(2.5deg)}60%{transform:translateY(-1px) rotate(-2deg)}80%{transform:translateY(-2.5px) rotate(.5deg)}}
@keyframes number-pulse{0%,12%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-2.5px) scale(1.055)}57%{transform:translateY(.8px) scale(.99)}75%{transform:translateY(-.6px) scale(1.012)}}
@keyframes small-pulse{0%,15%,100%{transform:scale(1)}40%{transform:scale(1.07)}65%{transform:scale(1)}}
@keyframes bar-shine{0%,15%{transform:translateX(0);opacity:0}25%{opacity:.7}64%{opacity:.7}78%,100%{transform:translateX(var(--travel));opacity:0}}
@keyframes ring-shine{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.motion-paused .stat,.motion-paused .illustration,.motion-paused .bar-sheen,.motion-paused .ring-sheen{animation:none!important}.motion-paused .shine{display:none}.motion-paused *{transition:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:pre-line;border:0}
@media(max-width:650px){#stage{inset:51px 8px 82px}.utilities{right:10px;top:7px}.icon{width:38px;height:38px}.page-navigation{bottom:14px;gap:10px}.pages button{width:36px}}
@media(max-height:500px){#stage{inset:10px 50px 53px}.utilities{right:7px;top:7px;flex-direction:column}.icon{width:32px;height:32px}.page-navigation{bottom:6px;padding:3px 7px;gap:7px}.arrow{width:34px;height:34px;font-size:21px}.pages button{height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.shine{display:none}}
#data-targets{position:absolute;inset:0;pointer-events:none}.data-hit{position:absolute;pointer-events:auto;padding:0;border:1.5px solid transparent;border-radius:10px;cursor:zoom-in;transition:border-color .2s,box-shadow .2s}.data-hit:hover,.data-hit:focus-visible{border-color:#009bb270;box-shadow:0 0 0 4px #009bb20b}.data-hit::after{content:'+';position:absolute;right:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#008da3;color:white;font-size:19px;display:grid;place-items:center;opacity:0;transition:opacity .2s}.data-hit:hover::after,.data-hit:focus-visible::after{opacity:1}
#data-detail{padding:0;border:1px solid #dce7e9;border-radius:20px;width:min(1100px,calc(100vw - 32px));height:min(850px,calc(100dvh - 32px));max-width:none;max-height:none;color:#07516a;box-shadow:0 24px 100px #00374640;background:white}#data-detail[open]{display:grid;grid-template-rows:auto minmax(0,1fr) 64px;animation:detail-in .3s ease-out}#data-detail::backdrop{background:#003d4d80;backdrop-filter:blur(9px)}.detail-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 20px;border-bottom:1px solid #dce7e9}.detail-header h2{font-size:15px;line-height:1.35;margin:0}.detail-header .icon{font-size:28px;width:44px;height:44px;flex:none}#detail-viewport{min-height:0;min-width:0;overflow:auto;padding:16px;background:#f2f6f6;overscroll-behavior:contain;scrollbar-color:#8ebbc3 #edf4f5}#detail-art{margin:auto;background:#fff;box-shadow:0 4px 20px #004b630b}#detail-svg{display:block;width:100%;height:100%;overflow:hidden}.detail-tools{display:flex;align-items:center;justify-content:center;gap:5px;border-top:1px solid #dce7e9}.detail-tools button{min-width:44px;height:44px;border-radius:24px;font-size:22px}.detail-tools button:hover:not(:disabled){background:#e9f6f7}.detail-tools #detail-reset{font-size:12px;min-width:60px}.detail-open .canvas *{animation-play-state:paused!important}@keyframes detail-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:650px){#data-detail{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:16px}.detail-header{padding:10px 12px}.detail-header h2{font-size:13px}.data-hit{border-radius:5px}.data-hit::after{width:18px;height:18px;font-size:15px}}@media(prefers-reduced-motion:reduce){#data-detail[open]{animation:none}}