:root{--bg-start:#f0f0fa;--bg-end:#f8f8f8;--text-default:#bfbfce;--text-active:#020032;--font-size:32px;--line-height:1.3;--max-width:400px;--padding:64px}h1{font-optical-sizing:auto;color:var(--text-active);letter-spacing:-.02em;text-align:center;z-index:-4;width:100vw;margin:0 auto;padding:0 1em;font-family:ABCDiatypeRounded,ABCDiatype,system-ui,sans-serif;font-size:48px;font-style:normal;font-weight:800;line-height:.9em}*{box-sizing:border-box}html{scroll-behavior:smooth;overscroll-behavior:none;background-color:var(--bg-start)}body{background:var(--bg-start);overscroll-behavior:none;margin:0;font-family:ABCDiatype,system-ui,sans-serif;transition:background-color 50ms linear}noscript{flex-direction:column;width:100vw;height:100vh;padding:7em 0 12em;display:flex;position:fixed;top:0;overflow:scroll}noscript>div{justify-self:center;max-width:1125px}noscript .text{color:var(--text-active)}noscript h1{text-align:left;float:left;margin-left:var(--padding);width:auto;margin-bottom:1em;padding:0}noscript .button{background-color:var(--text-active);color:#fff;float:left;margin-left:var(--padding);border-radius:.5em;align-items:center;gap:.2em;padding:.5em .5em .5em .8em;font-size:1.5em;text-decoration:none;display:flex}noscript .button:hover{background-color:#514766}noscript .button svg{width:1em;height:1em}footer{z-index:100;gap:1em;padding:.2em;font-size:10px;display:flex;position:fixed;bottom:0;right:.5em}footer a{color:#69698a;background-color:var(--bg-start);border-radius:4px;padding:4px;text-decoration:none;display:block}footer a:hover{color:var(--text-active);text-decoration:underline}html,body{width:100%;min-height:100%;margin:0}body{min-height:100dvh}.story{width:100%;position:absolute}.panel{z-index:2;align-items:center;height:100vh;display:flex;position:relative}.text{width:min(var(--max-width), 100%);margin-left:var(--padding);font-size:var(--font-size);line-height:var(--line-height);color:var(--text-default);font-weight:400}.text-line{color:var(--text-default);background:var(--bg-start);white-space:nowrap;float:left;border-radius:10px;padding:0 6px;display:block}.text-line,#you-me{transition:color 1s,background-color 1s}.text-line.active{color:var(--text-active)}strong{font-weight:600}.word{color:var(--text-default);transition:color .25s linear}.word.active{color:var(--text-active)}canvas{top:20px;z-index:1;width:100vw;min-height:100dvh;padding:0;position:fixed;inset:0}.app{box-sizing:border-box;min-height:100dvh;transition:opacity .5s}.viewport-gradient{z-index:15;pointer-events:none;width:100%;height:120px;position:fixed;left:0}.viewport-gradient--top{background:linear-gradient(#f0f0fa 0%,#0000 100%);top:0}.viewport-gradient--bottom{background:linear-gradient(#0000 0%,#f0f0fa 100%);display:none;bottom:0}.path-dot{opacity:0;transform-box:fill-box;transform-origin:50%;fill:#f0a;transition:opacity 1s,transform 1s;transform:scale(.5)}.arrow-head{opacity:0}.draw-path,.arrow-head{fill:none;stroke:#f0a;stroke-width:1px;transition:opacity 1s}.path-dot.active,.arrow-head.active{opacity:1;transform:scale(1)}.hide .draw-path,.hide .arrow-head,.hide .path-dot{opacity:0}.process-svg{z-index:2;position:fixed;top:10vh}.process-svg #membrane path{fill:#6f6584}.layer{transition:opacity .3s}#you-me{color:var(--text-active);transform-origin:0 0;margin:0 .25em}#you-me.no-margin{margin:0}.text-line:not(.active) #you-me{color:var(--text-default)}.end .text-line:has(.no-margin){background:0 0;width:4em;min-height:1.3em}.end #you-me{margin:0;color:var(--text-active)!important}.end .text-line{color:#0000;background:0 0}.text-line:has(#you-me){display:flex}#you-me svg{width:0;height:0}.end #you-me svg{pointer-events:none;z-index:-1;width:calc(100% + 2.3em);height:calc(100% + .4em);margin:-.25em -.65em;position:absolute;inset:0;overflow:visible}.you-me-border{fill:#0000;stroke:var(--text-active);stroke-width:2px;rx:.9em;stroke-dasharray:276;stroke-dashoffset:276px;border-radius:999px;width:100%;height:100%;transition:stroke-dashoffset 1s cubic-bezier(.77,0,.18,1),fill .4s}.end .you-me-border{fill:#f8f8f8;stroke-dashoffset:0}.you-me-circle{r:0;cy:50%;cx:calc(100% - .8em);fill:#6f3dec;transition:r 1s}.end .you-me-circle{r:.5em;fill:#6f3dec}.end #you-me div{background-color:#6f3dec;display:block}header{z-index:20;justify-content:center;align-items:center;width:100vw;padding:16px 24px;display:flex;position:fixed;top:0;left:0}header .inner{justify-content:space-between;align-items:center;width:100%;max-width:1125px;display:flex}header button{color:#514766;justify-content:center;align-items:center;width:67px;height:32px;padding:4px 12px 4px 4px;display:inline-flex;position:relative}header .icon{border-radius:8px;justify-content:center;align-items:center;gap:10px;width:32px;height:32px;margin-top:-4px;margin-bottom:-4px;padding:4px;display:flex;position:relative}header .language{width:20px;height:20px;position:relative}header .label{letter-spacing:-.28px;white-space:nowrap;width:fit-content;font-family:ABCDiatype,Helvetica;font-size:14px;font-weight:700;line-height:normal;position:relative}header button .icon path{fill:#524766}header button:hover{color:#291f3d;background-color:#0000001a}header button:hover .icon path{fill:#291f3d}header button.active .icon path{fill:#4f3294}header .text-wrapper{color:#281e3d;letter-spacing:-.28px;white-space:nowrap;width:fit-content;font-family:ABCDiatype,Helvetica;font-size:14px;font-weight:700;line-height:normal;position:relative}header button.active,header button.active:hover{color:#4f3294;background-color:#d3ceef}header .div{color:#4f3294;letter-spacing:-.28px;white-space:nowrap;width:fit-content;font-family:ABCDiatype,Helvetica;font-size:14px;font-weight:700;line-height:normal;position:relative}header .tooltip-language{background-color:#fff;border:1px solid #cfccda;border-radius:16px 4px 16px 16px;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:16px;padding:8px;display:none;position:absolute;top:36px;right:0}header button.active .tooltip-language{display:inline-flex}header .frame{flex-direction:column;flex:none;display:inline-flex;position:relative}header .radio-button{flex-grow:auto;align-items:center;gap:8px;height:32px;padding:6px 8px 6px 0;display:flex;position:relative}header a.radio-button{text-decoration:none}header .radio{background-color:#514766;border:1.2px solid #514766;border-radius:20px;width:12px;height:12px;position:relative}header .radio-button .label{color:#514766;letter-spacing:-.32px;white-space:nowrap;width:fit-content;font-family:ABCDiatype,Helvetica;font-size:16px;font-weight:400;line-height:normal;position:relative}header #logo{width:auto;height:24px}header button{cursor:pointer;font:inherit;text-align:left;background-color:#0000;border:0;border-radius:8px}button:focus-visible{outline-offset:2px;outline:2px solid #4a90e2}header .frame{border:0;min-width:0;margin:0;padding:0}header .radio-button{cursor:pointer;border-radius:8px}header .radio-button:hover{color:#291f3d;background-color:#f0f0fa}header .radio-button:hover .radio{background-color:#cfcdda;box-shadow:0 0 0 3px #cfcdda}header .radio,header .radio-2{appearance:none;cursor:pointer;flex:none;margin:0;padding:0}header .radio:not(:checked){background-color:#0000}header .radio:checked{background-color:#514766!important}header .radio:focus-visible,header .radio-2:focus-visible{outline-offset:2px;outline:2px solid #4a90e2}.panel.start .container{z-index:20;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100vw;height:100vh;display:flex;position:fixed}.panel.start .button{all:unset;box-sizing:border-box;color:#726788;background-color:var(--bg-start);cursor:pointer;border:1px solid #726788;border-radius:8px;justify-content:center;align-items:center;gap:2px;height:32px;padding:4px 6px 4px 10px;display:inline-flex;overflow:hidden}.panel.start .button:hover{color:#2e2e3d;border-width:1.5px;border-color:#2e2e3d}.panel.start .button:focus-visible{outline-offset:2px;outline:2px solid #4a90e2}.panel.start .button:hover svg path{fill:#2e2e3d}.panel.start .button .label{letter-spacing:-.28px;white-space:nowrap;width:fit-content;font-family:ABCDiatype,Helvetica;font-size:14px;font-weight:500;line-height:normal;position:relative}.panel.start .button .icon-right{flex:none;align-items:center;min-width:4px;max-width:16px;display:inline-flex;position:relative}.panel.start .button svg{width:16px;height:16px;position:relative}.jumping-arrow{animation:2s ease-in-out infinite gentleJump;position:fixed;bottom:80px}.jumping-arrow path{stroke-color:#291f3d}@keyframes gentleJump{0%,20%,to{transform:translateY(0)}10%{transform:translateY(-5px)}}@media (width<=768px){:root{--font-size:24px;--line-height:1.3;--max-width:320px;--padding:16px}.viewport-gradient{display:block}header{padding:8px 16px}}