.parent{background:#fff;width:100px;height:100px;display:flex;justify-content:center;align-items:center;cursor:pointer}.parent[data-isOpen=true]{width:400px;height:200px;justify-content:flex-start;align-items:flex-start}.child{width:40px;height:40px;background:#f107a3;border-radius:50%}.child[data-open=true]{margin-top:20px;margin-left:20px}body{--black: #000000;--ash-black: #222;--white: #fafafa;--sky: #00ccff;--green: #22dddd;--blue: #1300ff;--dusk: #6600ff;--purple: #9900ff;--pink: #ff0066;--red: #fe0222;--orange: #fd7702;--primary1: #000000;--primary2: #BDFC4B;--background: var(--primary1);margin:0;padding:0;background-color:var(--background)!important;color:var(--accent)}*{font-family:sofia-pro,sans-serif;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:sofia-pro,sans-serif;font-weight:600;font-style:normal}h1{font-size:36px;font-weight:700;letter-spacing:-1px;line-height:1.2;text-align:center;margin:100px 0 40px}h2{font-weight:400;margin:50px 0 10px}p{margin:0 0 30px;font-size:18px}footer:before{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-size:15px 15px;backdrop-filter:brightness(90%) blur(20px);-webkit-backdrop-filter:brightness(90%) blur(20px);-moz-backdrop-filter:brightness(90%) blur(20px);mask-image:repeating-radial-gradient(circle at 50% 50% center,var(--background),var(--background) 20px,rgba(255,255,255,.3) 20.5px,rgba(255,255,255,.3) 21px);-webkit-mask-image:repeating-radial-gradient(circle at 50% 50%,var(--background),var(--background) 20px,rgba(255,255,255,.3) 20.5px,rgba(255,255,255,.3) 21px)}footer{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:flex-start;align-items:center;padding:20px;font-size:14px;line-height:14px}footer svg{margin-right:20px;position:relative}footer a{text-decoration:none;color:var(--accent);position:relative}code{font-family:input-mono,monospace;font-weight:400;font-style:normal}#progress{position:fixed;top:20px;left:20px;transform:rotate(-90deg)}circle{stroke-dashoffset:0;stroke-width:15%;fill:none}.bg{stroke:var(--accent);opacity:.3}#progress .indicator{stroke:var(--accent)}::-webkit-scrollbar{height:5px;width:5px;background:#fff3;-webkit-border-radius:1ex}::-webkit-scrollbar-thumb{background:var(--accent);-webkit-border-radius:1ex}::-webkit-scrollbar-corner{background:#fff3}li{flex:0 0 200px;background:var(--accent);margin:0 20px 0 0}li:last-of-type{margin:0}a,a:visited,a:hover{color:var(--primary2)}.refresh{padding:5px;position:absolute;border:1px dotted var(--accent);border-radius:5px;width:20px;height:20px;top:10px;right:10px;display:flex;justify-content:center;align-items:center;cursor:pointer}.refresh path{fill:var(--accent)}.box{width:200px;height:200px;background:var(--accent)}