body{font-family:sans-serif;padding:2rem;margin:0;background:#000;color:#6d6d6d;transition:background-color .3s,color .3s}h1{color:inherit;margin-top:0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:1rem;margin-top:2rem}@media (max-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}@media (max-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}.icon-box{text-align:center;font-size:.75rem;position:relative;transition:outline .3s;cursor:pointer}.icon-box:hover .icon{transform:scale(1.1)}.icon{width:35px;height:35px;margin:0 auto .4rem;background-color:#fff;mask-repeat:no-repeat;mask-size:contain;mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;transition:transform .2s ease,background-color .3s}body.light{background:#eee;color:#4b4b4b}body.light .icon{background-color:#000}.icon-box::after{content:"Code copied!";position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#0f0;color:#000;padding:2px 6px;font-size:.65rem;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .3s}.icon-box.copied::after{opacity:1}.icon-box span{display:block;margin-top:.3rem;color:inherit;opacity:.7;font-size:.7rem}.theme-switch{position:fixed;top:10px;right:10px;z-index:999}.theme-switch input{opacity:0;width:0;height:0}.switch{position:relative;display:inline-block;width:38px;height:20px;background-color:#555;border-radius:34px;transition:background-color .3s;cursor:pointer}.switch::before{content:"";position:absolute;height:16px;width:16px;left:2px;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s}.theme-switch input:checked+.switch{background-color:#ccc}.theme-switch input:checked+.switch::before{transform:translateX(18px)}.search-input{display:block;width:200px;margin:0 auto 1rem auto;padding:.4em .8em;font-size:.9rem;border-radius:4px;border:none;background:#333;color:#fff;transition:background .3s}body.light .search-input{background:#ddd;color:#000}.size-slider{position:fixed;top:10px;left:10px;display:block;width:200px;margin:0 auto 1rem auto;accent-color:white}.icon{transition:transform .2s ease,background-color .3s,width .2s,height .2s}body.light .size-slider{accent-color:#000}#copy-template{box-sizing:border-box;position:absolute;bottom:0;right:0;left:0;width:100%;padding:.5rem;font-family:monospace;font-size:.85rem;background:#222;color:#fff;border:1px solid #444;border-radius:0;outline:0;z-index:999}#copy-template:focus{border-color:#fff}body.light #copy-template{background:#ddd;color:#000;border:1px solid #aaa}body.light #copy-template:focus{border-color:#000}