:root{line-height:1.5;padding:10vh 10vw;height:100%;justify-content:center;align-items:center;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;margin:0;background:linear-gradient(to right,#fff,#f8c1e8);font-family:Poppins}h1{line-height:1.1}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;align-items:center;display:flex;flex-direction:column;margin:0}a{font-weight:500;color:#646cff;text-decoration:inherit;font-size:clamp(1rem,3vw,1.5rem)}a:hover{color:#363ca7}.main-cont{margin:auto}h1{color:#000;font-size:6vw;font-style:italic;margin-bottom:2vh;z-index:1}.custom-underline{position:relative;display:inline-block}.custom-underline:after{content:"";position:absolute;left:0;bottom:1vh;width:100%;height:20%;background:#4fa217;z-index:-1}.description{color:#000;margin-bottom:6vh;font-size:clamp(1rem,3vw,1.5rem);font-weight:700;list-style:none;padding-left:.75em;margin-left:-1.2em}ul li{margin-left:1em;display:flex;align-items:flex-start;gap:.5em;margin-bottom:.5em}ul li:before{content:"•";color:#f873d2;font-size:2em;font-weight:700;line-height:1;transform:translateY(-.17em);text-shadow:0 0 6px #e981cb,0 0 12px #e981cb}.visualize-container{background:#ffffff5e;padding:20px;padding-top:15vh;border-radius:8px;box-shadow:0 0 10px #0000001a;min-height:25vh;width:70vw}.insertion-container{display:flex;position:relative;gap:1px;align-items:baseline;justify-content:center;width:70vw}.bubble-container{display:flex;position:relative;gap:1px;align-items:baseline;justify-content:center;width:70vw;background:#ffffff5e;padding:20px;border-radius:8px;box-shadow:0 0 10px #0000001a;min-height:25vh}.bar{background:#4ea217;box-shadow:inset -3px 0 5px #0000001a;border-radius:4px;min-width:2px;width:4vw}.floating-key{position:absolute;width:4vw;background-color:#fadadd;transform:translateY(10.5vh);transition:left .3s ease;z-index:2;border-radius:4px}@media (max-width: 900px){.custom-underline:after{content:"";position:absolute;left:0;bottom:.5vh;width:100%;height:20%;background:#4fa217;z-index:-1}h1{font-size:6vh}}