{"id":4032,"date":"2024-07-08T10:39:59","date_gmt":"2024-07-08T07:39:59","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=4032"},"modified":"2024-07-08T10:42:00","modified_gmt":"2024-07-08T07:42:00","slug":"scratch-win","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/4032\/","title":{"rendered":"Scratch &amp; Win"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Scratch &amp; Win on javascript\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/qgaHztbF9Fg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;HTML&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">    &lt;div id=&quot;scratch-win&quot; class=&quot;scratch-win&quot;&gt;\n        &lt;div class=&quot;scratch-win__title&quot;&gt; Scratch &amp; win&lt;\/div&gt;\n        &lt;div class=&quot;scratch-win__scratcher&quot;&gt;\n          &lt;div class=&quot;scratch-win__background&quot;&gt;You win&lt;\/div&gt;\n          &lt;canvas id=&quot;canvas&quot; class=&quot;scratch-win__foreground&quot;&gt;&lt;\/canvas&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      \n      &lt;div id=&quot;coin&quot; class=&quot;scratch-win__coin&quot;&gt;\n        &lt;div class=&quot;scratch-win__coin-side&quot;&gt;&lt;\/div&gt;\n        &lt;div class=&quot;scratch-win__coin-base&quot;&gt;&lt;\/div&gt;\n      &lt;\/div&gt;\n      \n      &lt;div id=&quot;confetti&quot; class=&quot;confetti&quot;&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#a864fd&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;&lt;svg class=&quot;confetti__item confetti__item--circle&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z&quot; fill=&quot;#29cdff&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#78ff44&quot; \/&gt;\n        &lt;\/svg&gt; &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n        &lt;svg class=&quot;confetti__item confetti__item--square&quot; width=&quot;6&quot; height=&quot;6&quot; viewBox=&quot;0 0 6 6&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n          &lt;path d=&quot;M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z&quot; fill=&quot;#ff718d&quot; \/&gt;\n        &lt;\/svg&gt;\n      &lt;\/div&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;CSS&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@charset &quot;UTF-8&quot;;\n@import url(&quot;https:\/\/fonts.googleapis.com\/css2?family=Archivo+Black&amp;display=swap&quot;);\nbody {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  margin: 0;\n  background: linear-gradient(#fff -100%, #888);\n  font-family: &quot;Arial Black&quot;, &quot;Archivo Black&quot;, sans-serif;\n  overflow: hidden;\n  cursor: none;\n}\n\n.scratch-win {\n  position: relative;\n  padding: 1rem 2rem 2rem 2rem;\n  background: linear-gradient(#78d6c6 -150%, #12486b);\n  border: 0.2rem solid #ffdc73;\n  border-radius: 1rem;\n  overflow: hidden;\n  box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 56, 0.3);\n}\n@media screen and (max-width: 500px) {\n  .scratch-win {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .scratch-win__coin {\n    transform: scale(0.8);\n  }\n}\n.scratch-win:after {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(-70deg, transparent, transparent 50%, rgba(255, 255, 255, 0.1) 57%, transparent 60%);\n  background-size: 300% 100%;\n  animation: shinning;\n  animation-duration: 6s;\n  animation-iteration-count: infinite;\n  pointer-events: none;\n}\n@keyframes shinning {\n  from {\n    background-position: 0 0;\n  }\n  to {\n    background-position: 100% 0;\n  }\n}\n.scratch-win__title {\n  width: 100%;\n  margin: 0 auto 1rem;\n  color: #ffdc73;\n  font-size: 2rem;\n  text-align: center;\n  text-transform: uppercase;\n  background: -webkit-linear-gradient(#ffdc73, #a67c00);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.scratch-win__scratcher {\n  position: relative;\n  width: 20rem;\n  height: 10rem;\n}\n.scratch-win__background, .scratch-win__foreground {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.scratch-win__background {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  color: #888;\n  background-color: #fff;\n  text-transform: uppercase;\n  font-size: 3.6rem;\n}\n.scratch-win__background:after {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: repeating-linear-gradient(transparent, transparent 0.5rem, #888 0.5rem, #888 0.6rem);\n  opacity: 0.5;\n}\n.scratch-win--ready .scratch-win__background {\n  display: flex;\n}\n.scratch-win__coin {\n  position: absolute;\n  z-index: 2;\n  top: calc(var(--top) - 5rem);\n  left: calc(var(--left) - 3rem);\n  width: 6rem;\n  height: 6rem;\n  pointer-events: none;\n}\n.scratch-win__coin-side {\n  position: absolute;\n  top: -0.4rem;\n  left: 0;\n  z-index: -1;\n  width: calc(100% + 0.6rem);\n  height: calc(100% + 0.6rem);\n  border-radius: 50%;\n  outline: 0.1rem solid #a67c00;\n  background: repeating-linear-gradient(90deg, #d4af37 0, #d4af37 0.5rem, #ffdc73 0.5rem, #ffdc73 0.7rem);\n  box-shadow: 0 1rem 1rem -0.5rem rgba(0, 0, 56, 0.5);\n}\n@supports (-webkit-hyphens: none) {\n  .scratch-win__coin-side {\n    outline: none;\n  }\n}\n.scratch-win__coin-base {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0.3rem dashed #d4af37;\n  outline: 0.1rem solid #a67c00;\n  border-radius: 50%;\n  background: radial-gradient(circle at 0 0, #ffdc73, #d4af37 150%);\n  box-shadow: inset 0 -0.1rem 0 0 #a67c00;\n}\n@supports (-webkit-hyphens: none) {\n  .scratch-win__coin-base {\n    outline: none;\n  }\n}\n.scratch-win__coin-base:before, .scratch-win__coin-base:after {\n  content: &quot;\u20ac&quot;;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  font-size: 4rem;\n}\n.scratch-win__coin-base:before {\n  color: #a67c00;\n  transform: rotate(45deg) translateX(-0.4rem) translateY(-0.25rem);\n}\n.scratch-win__coin-base:after {\n  color: #d4af37;\n  transform: rotate(45deg) translateX(-0.3rem) translateY(-0.2rem);\n  background: -webkit-linear-gradient(#ffdc73 -50%, #d4af37);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.confetti {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 3;\n  width: 100%;\n  height: 200%;\n  pointer-events: none;\n  --top-position: -350vh;\n}\n.confetti__item {\n  position: absolute;\n  box-shadow: 1rem 1rem 1rem 0 rgba(0, 0, 56, 0.5);\n}\n.confetti__item:nth-child(1) {\n  top: calc(0.5404519712 * 150% + var(--top-position));\n  left: calc(0.6506014204 * 100%);\n  transform: scale(max(4.7946178021, 2)) rotate(61.2407111185deg);\n}\n.confetti__item:nth-child(2) {\n  top: calc(0.3909313175 * 150% + var(--top-position));\n  left: calc(0.7391782273 * 100%);\n  transform: scale(max(4.2569375058, 2)) rotate(84.9558761747deg);\n}\n.confetti__item:nth-child(3) {\n  top: calc(0.1138870664 * 150% + var(--top-position));\n  left: calc(0.7254497993 * 100%);\n  transform: scale(max(0.8302334279, 2)) rotate(86.8883842448deg);\n}\n.confetti__item:nth-child(4) {\n  top: calc(0.9806803478 * 150% + var(--top-position));\n  left: calc(0.777420714 * 100%);\n  transform: scale(max(3.3776250875, 2)) rotate(43.6719320268deg);\n}\n.confetti__item:nth-child(5) {\n  top: calc(0.1632114775 * 150% + var(--top-position));\n  left: calc(0.1631848863 * 100%);\n  transform: scale(max(3.0007258655, 2)) rotate(60.1129399957deg);\n}\n.confetti__item:nth-child(6) {\n  top: calc(0.8892309505 * 150% + var(--top-position));\n  left: calc(0.2897734714 * 100%);\n  transform: scale(max(3.283128146, 2)) rotate(66.8518426878deg);\n}\n.confetti__item:nth-child(7) {\n  top: calc(0.5077195683 * 150% + var(--top-position));\n  left: calc(0.4478277333 * 100%);\n  transform: scale(max(4.8589080842, 2)) rotate(50.8591043253deg);\n}\n.confetti__item:nth-child(8) {\n  top: calc(0.2141277898 * 150% + var(--top-position));\n  left: calc(0.9114337801 * 100%);\n  transform: scale(max(0.8945148864, 2)) rotate(7.363273296deg);\n}\n.confetti__item:nth-child(9) {\n  top: calc(0.7216475441 * 150% + var(--top-position));\n  left: calc(0.1091409513 * 100%);\n  transform: scale(max(3.271867644, 2)) rotate(81.5232041119deg);\n}\n.confetti__item:nth-child(10) {\n  top: calc(0.6015615583 * 150% + var(--top-position));\n  left: calc(0.0462595752 * 100%);\n  transform: scale(max(4.2032851398, 2)) rotate(54.5981914046deg);\n}\n.confetti__item:nth-child(11) {\n  top: calc(0.3827487326 * 150% + var(--top-position));\n  left: calc(0.7102929271 * 100%);\n  transform: scale(max(2.7130868257, 2)) rotate(20.5345525594deg);\n}\n.confetti__item:nth-child(12) {\n  top: calc(0.733289579 * 150% + var(--top-position));\n  left: calc(0.6444747149 * 100%);\n  transform: scale(max(2.4023123964, 2)) rotate(64.8941953259deg);\n}\n.confetti__item:nth-child(13) {\n  top: calc(0.6090678083 * 150% + var(--top-position));\n  left: calc(0.9777901082 * 100%);\n  transform: scale(max(4.9661604315, 2)) rotate(16.6160184428deg);\n}\n.confetti__item:nth-child(14) {\n  top: calc(0.3388937557 * 150% + var(--top-position));\n  left: calc(0.9730151682 * 100%);\n  transform: scale(max(3.6601913457, 2)) rotate(20.7545200236deg);\n}\n.confetti__item:nth-child(15) {\n  top: calc(0.3240714144 * 150% + var(--top-position));\n  left: calc(0.2080727733 * 100%);\n  transform: scale(max(3.5215633083, 2)) rotate(41.7903181471deg);\n}\n.confetti__item:nth-child(16) {\n  top: calc(0.7991983297 * 150% + var(--top-position));\n  left: calc(0.9420046279 * 100%);\n  transform: scale(max(3.1101695507, 2)) rotate(26.2766054728deg);\n}\n.confetti__item:nth-child(17) {\n  top: calc(0.9320516538 * 150% + var(--top-position));\n  left: calc(0.1249295283 * 100%);\n  transform: scale(max(0.2474230476, 2)) rotate(64.0929470123deg);\n}\n.confetti__item:nth-child(18) {\n  top: calc(0.0740383118 * 150% + var(--top-position));\n  left: calc(0.6006731258 * 100%);\n  transform: scale(max(2.3501521055, 2)) rotate(31.3076633097deg);\n}\n.confetti__item:nth-child(19) {\n  top: calc(0.0839332982 * 150% + var(--top-position));\n  left: calc(0.9501939036 * 100%);\n  transform: scale(max(3.3205016243, 2)) rotate(50.560839839deg);\n}\n.confetti__item:nth-child(20) {\n  top: calc(0.1852994649 * 150% + var(--top-position));\n  left: calc(0.4862716357 * 100%);\n  transform: scale(max(0.9707935961, 2)) rotate(39.632151318deg);\n}\n.confetti__item:nth-child(21) {\n  top: calc(0.5133191738 * 150% + var(--top-position));\n  left: calc(0.7613170546 * 100%);\n  transform: scale(max(2.9302643788, 2)) rotate(73.7860306218deg);\n}\n.confetti__item:nth-child(22) {\n  top: calc(0.1031243099 * 150% + var(--top-position));\n  left: calc(0.7231834473 * 100%);\n  transform: scale(max(2.1761988387, 2)) rotate(5.555572089deg);\n}\n.confetti__item:nth-child(23) {\n  top: calc(0.7176230059 * 150% + var(--top-position));\n  left: calc(0.7294757954 * 100%);\n  transform: scale(max(0.9424151417, 2)) rotate(85.8422809346deg);\n}\n.confetti__item:nth-child(24) {\n  top: calc(0.0778979117 * 150% + var(--top-position));\n  left: calc(0.5519244741 * 100%);\n  transform: scale(max(3.9290120256, 2)) rotate(36.5021839801deg);\n}\n.confetti__item:nth-child(25) {\n  top: calc(0.0215022895 * 150% + var(--top-position));\n  left: calc(0.8169084763 * 100%);\n  transform: scale(max(1.2953725992, 2)) rotate(22.0731712672deg);\n}\n.confetti__item:nth-child(26) {\n  top: calc(0.2673152076 * 150% + var(--top-position));\n  left: calc(0.8999647472 * 100%);\n  transform: scale(max(3.6265296388, 2)) rotate(8.0624873302deg);\n}\n.confetti__item:nth-child(27) {\n  top: calc(0.4190237882 * 150% + var(--top-position));\n  left: calc(0.8559403538 * 100%);\n  transform: scale(max(1.1905792651, 2)) rotate(6.6262896302deg);\n}\n.confetti__item:nth-child(28) {\n  top: calc(0.4606476976 * 150% + var(--top-position));\n  left: calc(0.9070355171 * 100%);\n  transform: scale(max(1.1755136446, 2)) rotate(3.9735196246deg);\n}\n.confetti__item:nth-child(29) {\n  top: calc(0.2990307826 * 150% + var(--top-position));\n  left: calc(0.4274100922 * 100%);\n  transform: scale(max(2.0053356474, 2)) rotate(21.0669369814deg);\n}\n.confetti__item:nth-child(30) {\n  top: calc(0.1811240976 * 150% + var(--top-position));\n  left: calc(0.5094617535 * 100%);\n  transform: scale(max(4.8224957913, 2)) rotate(78.4617555562deg);\n}\n.confetti__item:nth-child(31) {\n  top: calc(0.0297416313 * 150% + var(--top-position));\n  left: calc(0.0060822603 * 100%);\n  transform: scale(max(0.2245754316, 2)) rotate(14.3638529791deg);\n}\n.confetti__item:nth-child(32) {\n  top: calc(0.5504680312 * 150% + var(--top-position));\n  left: calc(0.6538328997 * 100%);\n  transform: scale(max(3.7357530482, 2)) rotate(25.6006048276deg);\n}\n.confetti__item:nth-child(33) {\n  top: calc(0.8804217315 * 150% + var(--top-position));\n  left: calc(0.4592748878 * 100%);\n  transform: scale(max(3.8308419679, 2)) rotate(72.2440068576deg);\n}\n.confetti__item:nth-child(34) {\n  top: calc(0.9485600497 * 150% + var(--top-position));\n  left: calc(0.8265742305 * 100%);\n  transform: scale(max(1.8197151935, 2)) rotate(85.854200491deg);\n}\n.confetti__item:nth-child(35) {\n  top: calc(0.972057535 * 150% + var(--top-position));\n  left: calc(0.8189523605 * 100%);\n  transform: scale(max(3.4173008975, 2)) rotate(19.0470988554deg);\n}\n.confetti__item:nth-child(36) {\n  top: calc(0.4660158409 * 150% + var(--top-position));\n  left: calc(0.7836876661 * 100%);\n  transform: scale(max(1.242470444, 2)) rotate(6.9655561979deg);\n}\n.confetti__item:nth-child(37) {\n  top: calc(0.7127843686 * 150% + var(--top-position));\n  left: calc(0.6038966632 * 100%);\n  transform: scale(max(3.4711698381, 2)) rotate(73.6591456077deg);\n}\n.confetti__item:nth-child(38) {\n  top: calc(0.6354896009 * 150% + var(--top-position));\n  left: calc(0.3285546686 * 100%);\n  transform: scale(max(2.5445297103, 2)) rotate(89.1813701924deg);\n}\n.confetti__item:nth-child(39) {\n  top: calc(0.7070167728 * 150% + var(--top-position));\n  left: calc(0.5259211435 * 100%);\n  transform: scale(max(0.8744055745, 2)) rotate(10.3965717164deg);\n}\n.confetti__item:nth-child(40) {\n  top: calc(0.8847006255 * 150% + var(--top-position));\n  left: calc(0.7959972799 * 100%);\n  transform: scale(max(2.8370289341, 2)) rotate(62.8990664141deg);\n}\n.confetti__item:nth-child(41) {\n  top: calc(0.2258203783 * 150% + var(--top-position));\n  left: calc(0.6016582451 * 100%);\n  transform: scale(max(0.4275564621, 2)) rotate(0.0944412354deg);\n}\n.confetti__item:nth-child(42) {\n  top: calc(0.3695389861 * 150% + var(--top-position));\n  left: calc(0.0324006026 * 100%);\n  transform: scale(max(2.6625292714, 2)) rotate(50.404930755deg);\n}\n.confetti__item:nth-child(43) {\n  top: calc(0.1182130645 * 150% + var(--top-position));\n  left: calc(0.3697522412 * 100%);\n  transform: scale(max(2.6540695295, 2)) rotate(85.3287739116deg);\n}\n.confetti__item:nth-child(44) {\n  top: calc(0.1194678647 * 150% + var(--top-position));\n  left: calc(0.3698543901 * 100%);\n  transform: scale(max(1.1152651746, 2)) rotate(36.2443578526deg);\n}\n.confetti__item:nth-child(45) {\n  top: calc(0.4543513461 * 150% + var(--top-position));\n  left: calc(0.296554722 * 100%);\n  transform: scale(max(3.4582290396, 2)) rotate(4.0319925477deg);\n}\n.confetti__item:nth-child(46) {\n  top: calc(0.4039640075 * 150% + var(--top-position));\n  left: calc(0.1293177392 * 100%);\n  transform: scale(max(2.0365614775, 2)) rotate(7.3947897511deg);\n}\n.confetti__item:nth-child(47) {\n  top: calc(0.1181602179 * 150% + var(--top-position));\n  left: calc(0.5502637836 * 100%);\n  transform: scale(max(1.6946528949, 2)) rotate(16.9628789803deg);\n}\n.confetti__item:nth-child(48) {\n  top: calc(0.1070648648 * 150% + var(--top-position));\n  left: calc(0.7994123698 * 100%);\n  transform: scale(max(1.6244784111, 2)) rotate(36.0561093743deg);\n}\n.confetti__item:nth-child(49) {\n  top: calc(0.2527904286 * 150% + var(--top-position));\n  left: calc(0.3407409206 * 100%);\n  transform: scale(max(4.0319966385, 2)) rotate(26.3537960575deg);\n}\n.confetti__item:nth-child(50) {\n  top: calc(0.7994635022 * 150% + var(--top-position));\n  left: calc(0.3216456158 * 100%);\n  transform: scale(max(0.2701905816, 2)) rotate(46.8300589194deg);\n}\n.confetti__item:nth-child(51) {\n  top: calc(0.4019104905 * 150% + var(--top-position));\n  left: calc(0.4424571681 * 100%);\n  transform: scale(max(1.0604090288, 2)) rotate(77.0646566063deg);\n}\n.confetti__item:nth-child(52) {\n  top: calc(0.8539303356 * 150% + var(--top-position));\n  left: calc(0.682228957 * 100%);\n  transform: scale(max(0.978521868, 2)) rotate(48.6130545231deg);\n}\n.confetti__item:nth-child(53) {\n  top: calc(0.0809689507 * 150% + var(--top-position));\n  left: calc(0.3410146509 * 100%);\n  transform: scale(max(2.5751744215, 2)) rotate(78.6706285455deg);\n}\n.confetti__item:nth-child(54) {\n  top: calc(0.8044742794 * 150% + var(--top-position));\n  left: calc(0.5191413145 * 100%);\n  transform: scale(max(0.1575352275, 2)) rotate(60.2553658381deg);\n}\n.confetti__item:nth-child(55) {\n  top: calc(0.220786919 * 150% + var(--top-position));\n  left: calc(0.0703644157 * 100%);\n  transform: scale(max(2.7191857289, 2)) rotate(1.8131154621deg);\n}\n.confetti__item:nth-child(56) {\n  top: calc(0.1433399405 * 150% + var(--top-position));\n  left: calc(0.1505664693 * 100%);\n  transform: scale(max(1.5413303972, 2)) rotate(70.6845184273deg);\n}\n.confetti__item:nth-child(57) {\n  top: calc(0.4948810621 * 150% + var(--top-position));\n  left: calc(0.4803654353 * 100%);\n  transform: scale(max(1.2515951795, 2)) rotate(65.0339395675deg);\n}\n.confetti__item:nth-child(58) {\n  top: calc(0.6215596162 * 150% + var(--top-position));\n  left: calc(0.0168572024 * 100%);\n  transform: scale(max(4.1262074002, 2)) rotate(67.047891276deg);\n}\n.confetti__item:nth-child(59) {\n  top: calc(0.7733885025 * 150% + var(--top-position));\n  left: calc(0.0208591261 * 100%);\n  transform: scale(max(1.5699437652, 2)) rotate(18.3452837628deg);\n}\n.confetti__item:nth-child(60) {\n  top: calc(0.8070138848 * 150% + var(--top-position));\n  left: calc(0.1096675853 * 100%);\n  transform: scale(max(1.7828193535, 2)) rotate(14.1029416471deg);\n}\n.confetti__item:nth-child(61) {\n  top: calc(0.3243794615 * 150% + var(--top-position));\n  left: calc(0.0620556145 * 100%);\n  transform: scale(max(2.8306561138, 2)) rotate(22.8226034976deg);\n}\n.confetti__item:nth-child(62) {\n  top: calc(0.050125596 * 150% + var(--top-position));\n  left: calc(0.1071394489 * 100%);\n  transform: scale(max(2.9300698678, 2)) rotate(89.2720961045deg);\n}\n.confetti__item:nth-child(63) {\n  top: calc(0.8257120142 * 150% + var(--top-position));\n  left: calc(0.4813325568 * 100%);\n  transform: scale(max(0.3734432051, 2)) rotate(29.4987655908deg);\n}\n.confetti__item:nth-child(64) {\n  top: calc(0.8839167149 * 150% + var(--top-position));\n  left: calc(0.0271647213 * 100%);\n  transform: scale(max(0.6535355882, 2)) rotate(8.8040425759deg);\n}\n.confetti__item:nth-child(65) {\n  top: calc(0.5506318092 * 150% + var(--top-position));\n  left: calc(0.7035117726 * 100%);\n  transform: scale(max(0.4798323673, 2)) rotate(24.1570891915deg);\n}\n.confetti__item:nth-child(66) {\n  top: calc(0.7684554515 * 150% + var(--top-position));\n  left: calc(0.1141891117 * 100%);\n  transform: scale(max(0.1140987043, 2)) rotate(36.3665002424deg);\n}\n.confetti__item:nth-child(67) {\n  top: calc(0.3382562072 * 150% + var(--top-position));\n  left: calc(0.2968004886 * 100%);\n  transform: scale(max(2.8440836373, 2)) rotate(68.29338771deg);\n}\n.confetti__item:nth-child(68) {\n  top: calc(0.5059454813 * 150% + var(--top-position));\n  left: calc(0.5873114819 * 100%);\n  transform: scale(max(4.7158896333, 2)) rotate(36.9491785763deg);\n}\n.confetti__item:nth-child(69) {\n  top: calc(0.3122096555 * 150% + var(--top-position));\n  left: calc(0.3038858928 * 100%);\n  transform: scale(max(0.0104570451, 2)) rotate(46.3053861568deg);\n}\n.confetti__item:nth-child(70) {\n  top: calc(0.3648209325 * 150% + var(--top-position));\n  left: calc(0.3417956035 * 100%);\n  transform: scale(max(0.6378586094, 2)) rotate(81.0607506123deg);\n}\n.confetti__item:nth-child(71) {\n  top: calc(0.9843420242 * 150% + var(--top-position));\n  left: calc(0.9004346215 * 100%);\n  transform: scale(max(3.9785467619, 2)) rotate(60.4545399403deg);\n}\n.confetti__item:nth-child(72) {\n  top: calc(0.1140639813 * 150% + var(--top-position));\n  left: calc(0.3195441031 * 100%);\n  transform: scale(max(0.0969393738, 2)) rotate(87.4457288987deg);\n}\n.confetti__item:nth-child(73) {\n  top: calc(0.4444932452 * 150% + var(--top-position));\n  left: calc(0.5698287932 * 100%);\n  transform: scale(max(1.1337935043, 2)) rotate(30.5398248452deg);\n}\n.confetti__item:nth-child(74) {\n  top: calc(0.5868588109 * 150% + var(--top-position));\n  left: calc(0.4330587337 * 100%);\n  transform: scale(max(2.9319098196, 2)) rotate(79.7715794078deg);\n}\n.confetti__item:nth-child(75) {\n  top: calc(0.9174681643 * 150% + var(--top-position));\n  left: calc(0.2534077086 * 100%);\n  transform: scale(max(1.6753160948, 2)) rotate(15.3271748989deg);\n}\n.confetti__item:nth-child(76) {\n  top: calc(0.514444759 * 150% + var(--top-position));\n  left: calc(0.3126263956 * 100%);\n  transform: scale(max(0.5719600966, 2)) rotate(47.1774687198deg);\n}\n.confetti__item:nth-child(77) {\n  top: calc(0.8618144703 * 150% + var(--top-position));\n  left: calc(0.7833493743 * 100%);\n  transform: scale(max(4.760140124, 2)) rotate(29.1942508988deg);\n}\n.confetti__item:nth-child(78) {\n  top: calc(0.192888476 * 150% + var(--top-position));\n  left: calc(0.7940993958 * 100%);\n  transform: scale(max(2.2754612907, 2)) rotate(25.4702350008deg);\n}\n.confetti__item:nth-child(79) {\n  top: calc(0.8006995472 * 150% + var(--top-position));\n  left: calc(0.8679203829 * 100%);\n  transform: scale(max(0.4445642327, 2)) rotate(27.6858636354deg);\n}\n.confetti__item:nth-child(80) {\n  top: calc(0.9894210065 * 150% + var(--top-position));\n  left: calc(0.0602900922 * 100%);\n  transform: scale(max(4.1221071062, 2)) rotate(32.397335183deg);\n}\n.confetti__item:nth-child(81) {\n  top: calc(0.5378028149 * 150% + var(--top-position));\n  left: calc(0.4177548605 * 100%);\n  transform: scale(max(4.9496156681, 2)) rotate(53.0777514557deg);\n}\n.confetti__item:nth-child(82) {\n  top: calc(0.5516430249 * 150% + var(--top-position));\n  left: calc(0.0399736891 * 100%);\n  transform: scale(max(2.2683137356, 2)) rotate(1.1626463012deg);\n}\n.confetti__item:nth-child(83) {\n  top: calc(0.8575016073 * 150% + var(--top-position));\n  left: calc(0.6966277437 * 100%);\n  transform: scale(max(3.1755678618, 2)) rotate(27.7352360603deg);\n}\n.confetti__item:nth-child(84) {\n  top: calc(0.0247286928 * 150% + var(--top-position));\n  left: calc(0.5226350446 * 100%);\n  transform: scale(max(1.154895855, 2)) rotate(33.8381574489deg);\n}\n.confetti__item:nth-child(85) {\n  top: calc(0.601984445 * 150% + var(--top-position));\n  left: calc(0.5271783738 * 100%);\n  transform: scale(max(0.7724828911, 2)) rotate(67.1693278206deg);\n}\n.confetti__item:nth-child(86) {\n  top: calc(0.7696363788 * 150% + var(--top-position));\n  left: calc(0.4611916611 * 100%);\n  transform: scale(max(0.0558183757, 2)) rotate(57.8046707338deg);\n}\n.confetti__item:nth-child(87) {\n  top: calc(0.6525928279 * 150% + var(--top-position));\n  left: calc(0.2934095461 * 100%);\n  transform: scale(max(0.6122141782, 2)) rotate(58.8269585911deg);\n}\n.confetti__item:nth-child(88) {\n  top: calc(0.5078686235 * 150% + var(--top-position));\n  left: calc(0.8741478232 * 100%);\n  transform: scale(max(2.2337634479, 2)) rotate(88.2704186933deg);\n}\n.confetti__item:nth-child(89) {\n  top: calc(0.5768513497 * 150% + var(--top-position));\n  left: calc(0.6847880554 * 100%);\n  transform: scale(max(2.547293153, 2)) rotate(31.6791250605deg);\n}\n.confetti__item:nth-child(90) {\n  top: calc(0.5078868125 * 150% + var(--top-position));\n  left: calc(0.2687551614 * 100%);\n  transform: scale(max(2.332309302, 2)) rotate(28.7064211909deg);\n}\n.confetti__item:nth-child(91) {\n  top: calc(0.0389760039 * 150% + var(--top-position));\n  left: calc(0.1773495578 * 100%);\n  transform: scale(max(0.1437545655, 2)) rotate(80.9567906724deg);\n}\n.confetti__item:nth-child(92) {\n  top: calc(0.0645679861 * 150% + var(--top-position));\n  left: calc(0.5421916084 * 100%);\n  transform: scale(max(4.2084290394, 2)) rotate(51.9159772941deg);\n}\n.confetti__item:nth-child(93) {\n  top: calc(0.4347301033 * 150% + var(--top-position));\n  left: calc(0.4565635488 * 100%);\n  transform: scale(max(0.8517044935, 2)) rotate(38.3513667321deg);\n}\n.confetti__item:nth-child(94) {\n  top: calc(0.2866052378 * 150% + var(--top-position));\n  left: calc(0.3301082465 * 100%);\n  transform: scale(max(2.3153420802, 2)) rotate(13.3786548867deg);\n}\n.confetti__item:nth-child(95) {\n  top: calc(0.7767523728 * 150% + var(--top-position));\n  left: calc(0.7315190575 * 100%);\n  transform: scale(max(1.5467728364, 2)) rotate(27.8379578433deg);\n}\n.confetti__item:nth-child(96) {\n  top: calc(0.8045021651 * 150% + var(--top-position));\n  left: calc(0.9733951724 * 100%);\n  transform: scale(max(2.3723204753, 2)) rotate(70.2923435226deg);\n}\n.confetti__item:nth-child(97) {\n  top: calc(0.1470932344 * 150% + var(--top-position));\n  left: calc(0.3979296432 * 100%);\n  transform: scale(max(2.7162502972, 2)) rotate(71.9267191981deg);\n}\n.confetti__item:nth-child(98) {\n  top: calc(0.5271188387 * 150% + var(--top-position));\n  left: calc(0.0665654687 * 100%);\n  transform: scale(max(2.5146991555, 2)) rotate(1.5369227634deg);\n}\n.confetti__item:nth-child(99) {\n  top: calc(0.1345864684 * 150% + var(--top-position));\n  left: calc(0.7342625824 * 100%);\n  transform: scale(max(1.4689217944, 2)) rotate(60.8556679471deg);\n}\n.confetti__item:nth-child(100) {\n  top: calc(0.5179964404 * 150% + var(--top-position));\n  left: calc(0.5483495958 * 100%);\n  transform: scale(max(1.625910019, 2)) rotate(26.0672476949deg);\n}\n.confetti__item:nth-child(101) {\n  top: calc(0.78547907 * 150% + var(--top-position));\n  left: calc(0.5886577786 * 100%);\n  transform: scale(max(0.7867631128, 2)) rotate(56.7323912531deg);\n}\n.confetti__item:nth-child(102) {\n  top: calc(0.8282344018 * 150% + var(--top-position));\n  left: calc(0.9655042361 * 100%);\n  transform: scale(max(0.8688933014, 2)) rotate(58.4460263359deg);\n}\n.confetti__item:nth-child(103) {\n  top: calc(0.3305069339 * 150% + var(--top-position));\n  left: calc(0.4880394747 * 100%);\n  transform: scale(max(1.4981164896, 2)) rotate(83.7293908832deg);\n}\n.confetti__item:nth-child(104) {\n  top: calc(0.6266839763 * 150% + var(--top-position));\n  left: calc(0.1088131408 * 100%);\n  transform: scale(max(3.3957738206, 2)) rotate(84.374199108deg);\n}\n.confetti__item:nth-child(105) {\n  top: calc(0.8539957423 * 150% + var(--top-position));\n  left: calc(0.7410817893 * 100%);\n  transform: scale(max(4.2525307801, 2)) rotate(16.5634699332deg);\n}\n.confetti__item:nth-child(106) {\n  top: calc(0.2941480289 * 150% + var(--top-position));\n  left: calc(0.8635663923 * 100%);\n  transform: scale(max(3.7078935921, 2)) rotate(51.4825660389deg);\n}\n.confetti__item:nth-child(107) {\n  top: calc(0.7142502492 * 150% + var(--top-position));\n  left: calc(0.7176060971 * 100%);\n  transform: scale(max(1.771506285, 2)) rotate(76.4745019029deg);\n}\n.confetti__item:nth-child(108) {\n  top: calc(0.0333464186 * 150% + var(--top-position));\n  left: calc(0.6350381558 * 100%);\n  transform: scale(max(4.8166259297, 2)) rotate(36.1770901562deg);\n}\n.confetti__item:nth-child(109) {\n  top: calc(0.2189036155 * 150% + var(--top-position));\n  left: calc(0.7841385249 * 100%);\n  transform: scale(max(4.6120733688, 2)) rotate(19.0585656832deg);\n}\n.confetti__item:nth-child(110) {\n  top: calc(0.3880562565 * 150% + var(--top-position));\n  left: calc(0.2761869789 * 100%);\n  transform: scale(max(4.8770403032, 2)) rotate(76.0228522177deg);\n}\n.confetti__item:nth-child(111) {\n  top: calc(0.584760489 * 150% + var(--top-position));\n  left: calc(0.1127448919 * 100%);\n  transform: scale(max(2.6069170518, 2)) rotate(64.3479986679deg);\n}\n.confetti__item:nth-child(112) {\n  top: calc(0.7552652498 * 150% + var(--top-position));\n  left: calc(0.8658334433 * 100%);\n  transform: scale(max(2.5508908145, 2)) rotate(22.3066489528deg);\n}\n.confetti__item:nth-child(113) {\n  top: calc(0.737496037 * 150% + var(--top-position));\n  left: calc(0.4828021972 * 100%);\n  transform: scale(max(0.0410638873, 2)) rotate(9.9304218016deg);\n}\n.confetti__item:nth-child(114) {\n  top: calc(0.1225562018 * 150% + var(--top-position));\n  left: calc(0.1964117674 * 100%);\n  transform: scale(max(0.5722523861, 2)) rotate(16.9999815261deg);\n}\n.confetti__item:nth-child(115) {\n  top: calc(0.7509680908 * 150% + var(--top-position));\n  left: calc(0.5820044439 * 100%);\n  transform: scale(max(2.5324611864, 2)) rotate(14.8333158837deg);\n}\n.confetti__item:nth-child(116) {\n  top: calc(0.1497713715 * 150% + var(--top-position));\n  left: calc(0.5276296372 * 100%);\n  transform: scale(max(0.6094591283, 2)) rotate(58.718536162deg);\n}\n.confetti__item:nth-child(117) {\n  top: calc(0.5001649051 * 150% + var(--top-position));\n  left: calc(0.7256533047 * 100%);\n  transform: scale(max(3.1949744242, 2)) rotate(75.9852514698deg);\n}\n.confetti__item:nth-child(118) {\n  top: calc(0.1490632892 * 150% + var(--top-position));\n  left: calc(0.7713768536 * 100%);\n  transform: scale(max(0.7360260351, 2)) rotate(1.2401235003deg);\n}\n.confetti__item:nth-child(119) {\n  top: calc(0.8479656976 * 150% + var(--top-position));\n  left: calc(0.5828052605 * 100%);\n  transform: scale(max(1.9892139221, 2)) rotate(74.4327178501deg);\n}\n.confetti__item:nth-child(120) {\n  top: calc(0.0140199595 * 150% + var(--top-position));\n  left: calc(0.3814688132 * 100%);\n  transform: scale(max(4.9681071109, 2)) rotate(22.1112581067deg);\n}\n.confetti--active {\n  --top-position: 200vh;\n}\n.confetti--active .confetti__item {\n  transition: top 10s ease;\n}\n.confetti--active .confetti__item:nth-child(3n) {\n  transition: top 8s ease;\n}\n.confetti--active .confetti__item:nth-child(4n) {\n  transition: top 12s ease;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const scratchWin = document.getElementById(&quot;scratch-win&quot;);\nconst coin = document.getElementById(&quot;coin&quot;);\nconst canvas = document.getElementById(&quot;canvas&quot;);\nconst ctx = canvas.getContext(&quot;2d&quot;);\n\nconst width = 320;\nconst height = 160;\n\n\/\/ Paint golden gradient\ncanvas.width = width;\ncanvas.height = height;\n\nconst gradient = ctx.createLinearGradient(0, 0, width, height);\n\ngradient.addColorStop(0, &quot;#d4af37&quot;);\ngradient.addColorStop(0.3, &quot;#a67c00&quot;);\ngradient.addColorStop(0.5, &quot;#d4af37&quot;);\ngradient.addColorStop(0.8, &quot;#a67c00&quot;);\ngradient.addColorStop(1, &quot;#d4af37&quot;);\n\nctx.fillStyle = gradient;\nctx.fillRect(0, 0, width, height);\n\nscratchWin.classList.add(&quot;scratch-win--ready&quot;);\n\n\/\/ Calculate transparency\nconst confetti = document.getElementById(&quot;confetti&quot;);\nconst maxPixels = width * height;\n\nconst calculateTransparency = () =&gt; {\n  const imageData = ctx.getImageData(0, 0, width, height).data;\n  const alphaValues = imageData.filter(\n    (value, index) =&gt; index % 4 === 4 - 1 &amp;&amp; value === 0\n  );\n\n  return alphaValues.length \/ maxPixels;\n};\n\nconst mouseFunction = (mouse) =&gt; {\n  \/\/ Move coin\n  const clientX = mouse.clientX ? mouse.clientX : mouse.touches[0].clientX;\n  const clientY = mouse.clientY ? mouse.clientY : mouse.touches[0].clientY;\n  coin.style = `--top: ${clientY}px; --left: ${clientX}px;`;\n  \/\/ Scratch\n  const canvasPosition = canvas.getBoundingClientRect();\n  const canvasX = clientX - canvasPosition.left;\n  const canvasY = clientY - canvasPosition.top;\n\n  if (canvasX &gt; 0 &amp;&amp; canvasX &lt; width &amp;&amp; canvasY &gt; 0 &amp;&amp; canvasY &lt; height) {\n    ctx.clearRect(canvasX - 10, canvasY - 10, 20, 20);\n\n    if (calculateTransparency() &gt; 0.6) {\n      confetti.classList.add(&quot;confetti--active&quot;);\n    }\n  }\n};\n\n\/\/ In a real life example you should throttle these\nwindow.addEventListener(&quot;mousemove&quot;, mouseFunction);\nwindow.addEventListener(&quot;touchmove&quot;, mouseFunction);\n    container.classList.remove('container--running');\n  }\n\n})();\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4034,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-4032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/4032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=4032"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/4032\/revisions"}],"predecessor-version":[{"id":4033,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/4032\/revisions\/4033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/4034"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=4032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=4032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=4032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}