:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}body{background:#0f1115}.container{flex-direction:column;align-items:center;padding-top:40px;display:flex}button{cursor:pointer;border:none;margin-bottom:20px;padding:10px 18px;transition:transform .2s}button:hover{transform:scale(1.05)}.grid{flex-wrap:wrap;gap:10px;width:500px;display:flex}.tile{justify-content:center;align-items:center;width:90px;height:90px;display:flex}.shape{width:100%;height:100%;transition:transform .2s,box-shadow .2s;animation:.4s forwards fadeIn;box-shadow:0 2px 6px #0003}.tile:hover .shape,.tile:hover .triangle{transform:scale(1.15)rotate(5deg)}.circle{border:4px dashed;border-radius:50%;width:80px;height:80px}.small-circle{border:2px dashed #000;border-radius:50%;width:70%;height:70%}.half-circle{border-radius:50%;width:100px;height:100px;-webkit-mask:linear-gradient(90deg,#000 50%,#0000 50%);mask:linear-gradient(90deg,#000 50%,#0000 50%)}.rounded{border-radius:16px;width:85px;height:85px}.small-square{align-self:center;width:60%;height:60%}.triangle-up{border-bottom:90px solid;border-left:45px solid #0000;border-right:45px solid #0000;width:0;height:0;transition:transform .2s;animation:.4s forwards fadeIn}.triangle-down{border-top:90px solid;border-left:45px solid #0000;border-right:45px solid #0000;width:0;height:0;transition:transform .2s;animation:.4s forwards fadeIn}.triangle-left{border-top:45px solid #0000;border-bottom:45px solid #0000;border-right:90px solid;width:0;height:0;transition:transform .2s;animation:.4s forwards fadeIn}.triangle-right{border-top:45px solid #0000;border-bottom:45px solid #0000;border-left:90px solid;width:0;height:0;transition:transform .2s;animation:.4s forwards fadeIn}.starburst{aspect-ratio:1;clip-path:polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);width:100%;transition:transform .2s;animation:.4s forwards fadeIn}.spiral{--b:6px;--c:#cd8c52;background:repeating-radial-gradient(calc(2 * var(--b)) at top, #0000 -1px, var(--c) 0 calc(50% - 1px), #0000 50% calc(100% - 1px)) calc(50% + var(--b)) 100%, repeating-radial-gradient(calc(2 * var(--b)) at bottom, var(--c) -1px, #0000 0 calc(50% - 1px), var(--c) 50% calc(100% - 1px)) 50% 0;width:100%;height:100%;-webkit-mask:radial-gradient(calc(1.5 * var(--b)) at calc(100% - var(--b) / 2) 0, #0000 calc(100% / 3), #000 calc(100% / 3 + 1px) 110%, #0000 0) calc(50% + var(--b) / 2) 100% / calc(3 * var(--b)) 50% no-repeat, conic-gradient(#000 0 0);mask:radial-gradient(calc(1.5 * var(--b)) at calc(100% - var(--b) / 2) 0, #0000 calc(100% / 3), #000 calc(100% / 3 + 1px) 110%, #0000 0) calc(50% + var(--b) / 2) 100% / calc(3 * var(--b)) 50% no-repeat, conic-gradient(#000 0 0);background-repeat:no-repeat;background-size:150% 50%;border-radius:50%;transition:transform .2s;animation:.4s forwards fadeIn}.wiggly-box{--s:8px;--c:#4ecdc4;border:calc(2 * var(--s)) solid transparent;width:100%;height:100%;padding:calc(4 * var(--s));box-sizing:border-box;background:var(--c);-webkit-mask:conic-gradient(#000 0 0) no-repeat 50% / calc(100% - 6 * var(--s)) calc(100% - 6 * var(--s)),  radial-gradient(var(--s), #000 100%, transparent calc(100% + 1px)) 0 0 / calc(4 * var(--s)) calc(4 * var(--s)), radial-gradient(var(--s), transparent calc(100% - 1px), #000) var(--s) var(--s) / calc(2 * var(--s)) calc(2 * var(--s)) padding-box;mask:conic-gradient(#000 0 0) no-repeat 50% / calc(100% - 6 * var(--s)) calc(100% - 6 * var(--s)),  radial-gradient(var(--s), #000 100%, transparent calc(100% + 1px)) 0 0 / calc(4 * var(--s)) calc(4 * var(--s)), radial-gradient(var(--s), transparent calc(100% - 1px), #000) var(--s) var(--s) / calc(2 * var(--s)) calc(2 * var(--s)) padding-box;transition:transform .2s;animation:.4s forwards fadeIn}.flower{aspect-ratio:1;--g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px), #0000 71%) no-repeat;width:100%;-webkit-mask:100% 50% var(--g), 93.301% 75% var(--g), 75% 93.301% var(--g), 50% 100% var(--g), 25% 93.301% var(--g), 6.699% 75% var(--g), 0% 50% var(--g), 6.699% 25% var(--g), 25% 6.699% var(--g), 50% 0% var(--g), 75% 6.699% var(--g), 93.301% 25% var(--g), radial-gradient(100% 100%, #000 38.366%, #0000 calc(38.366% + 1px));mask:100% 50% var(--g), 93.301% 75% var(--g), 75% 93.301% var(--g), 50% 100% var(--g), 25% 93.301% var(--g), 6.699% 75% var(--g), 0% 50% var(--g), 6.699% 25% var(--g), 25% 6.699% var(--g), 50% 0% var(--g), 75% 6.699% var(--g), 93.301% 25% var(--g), radial-gradient(100% 100%, #000 38.366%, #0000 calc(38.366% + 1px))}.rotator{justify-content:center;align-items:center;width:90px;height:90px;transition:transform 2s;display:flex}.tile:hover .rotator{animation:1.5s linear infinite spin}@keyframes spin{0%{transform:rotate(var(--r))}to{transform:rotate(calc(var(--r) + 360deg))}}@keyframes fadeIn{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@media (width<=600px){.grid{--tile-size:calc((90vw - 40px) / 5);width:90vw}.tile,.rotator{width:var(--tile-size);height:var(--tile-size)}.circle{width:89%;height:89%}.rounded{border-radius:16px;width:89%;height:89%}.wiggly-box{--s:6px}.spiral{--s:3px}.triangle-up{border-bottom:calc(18vw - 8px) solid;border-left:calc(9vw - 4px) solid #0000;border-right:calc(9vw - 4px) solid #0000}.triangle-down{border-top:calc(18vw - 8px) solid;border-left:calc(9vw - 4px) solid #0000;border-right:calc(9vw - 4px) solid #0000}.triangle-left{border-top:calc(9vw - 4px) solid #0000;border-bottom:calc(9vw - 4px) solid #0000;border-right:calc(18vw - 8px) solid}.triangle-right{border-top:calc(9vw - 4px) solid #0000;border-bottom:calc(9vw - 4px) solid #0000;border-left:calc(18vw - 8px) solid}}