body,html{margin:0;padding:0}*{box-sizing:border-box}input{color:var(--text-main);background-color:transparent;appearance:none;border:none;outline:none}input:focus{outline:none;border:none}:root{--bg-main: #f5f5f7;--bg-secondary: #e0e0e5;--bg-third: #4a6fff;--text-main: #1a1a1a;--icon-color: #1a1a1a50;--success: #b0ffb4;--loading-gradient-1: #f0f0f3;--loading-gradient-2: #a175f5;--loading-gradient-3: #e9e9f1;--stickers-per-row: 4;--danger: #ff6c6c}.dark{--bg-main: #101317;--bg-secondary: #1d1f24;--bg-third: #3656ff;--text-main: #ffffff;--icon-color: #ffffff50;--success: #364833;--loading-gradient-1: #1c242b;--loading-gradient-2: #7745cd;--loading-gradient-3: rgba(26, 26, 26, .85)}.sunrise{--bg-main: #fff8f0;--bg-secondary: #ffe0b2;--bg-third: #ff9800;--text-main: #3e2723;--icon-color: #3e272350;--success: #c8e6c9;--loading-gradient-1: #fff3e0;--loading-gradient-2: #ffb74d;--loading-gradient-3: #ffe0b2}.cyberpunk{--bg-main: #0a0a0f;--bg-secondary: #1a1a26;--bg-third: #ff00ff;--text-main: #00fff7;--icon-color: #00fff750;--success: #1aff66;--loading-gradient-1: #111122;--loading-gradient-2: #ff0080;--loading-gradient-3: #00e5ff}.mint{--bg-main: #f0fff7;--bg-secondary: #d0f5e3;--bg-third: #00b894;--text-main: #004d40;--icon-color: #004d4050;--success: #a7ffeb;--loading-gradient-1: #e0fff7;--loading-gradient-2: #1de9b6;--loading-gradient-3: #b2fef7}.retro{--bg-main: #fff0f6;--bg-secondary: #ffdeeb;--bg-third: #ff6ec7;--text-main: #2e003e;--icon-color: #2e003e50;--success: #ffd6ff;--loading-gradient-1: #ffe0f7;--loading-gradient-2: #ff85a2;--loading-gradient-3: #ffdeeb}.autumn{--bg-main: #fffaf0;--bg-secondary: #f5deb3;--bg-third: #d2691e;--text-main: #4e342e;--icon-color: #4e342e50;--success: #c5e1a5;--loading-gradient-1: #ffebcd;--loading-gradient-2: #ffb74d;--loading-gradient-3: #d7ccc8}.stickerpack{display:flex;flex-flow:column nowrap;gap:10px}.stickerpack__header{padding:.5rem;font-size:12px;font-weight:700;display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center}.stickerpack__header-btns{display:flex;justify-content:center;align-items:center;gap:5px}.stickerpack__x{cursor:pointer}.stickerpack__body{-webkit-user-select:none;user-select:none;display:grid;grid-template-columns:repeat(var(--stickers-per-row),1fr);gap:3px}.sticker{display:flex;justify-content:center;flex:1;align-items:center;width:100%;aspect-ratio:1/1;padding:0;border-radius:5px;transition:.3s;cursor:pointer;-webkit-user-drag:none;user-drag:none}.sticker img{pointer-events:none}.sticker:hover{background:var(--bg-secondary)}.sticker__img{width:100%;height:100%;object-fit:contain}.sticker.loading{position:relative;overflow:hidden}.sticker.loading:before{content:"";position:absolute;inset:0;transform-origin:center;background:conic-gradient(from 45deg,var(--loading-gradient-1),var(--loading-gradient-2));animation:rotateGradient 5s linear infinite;z-index:1}.sticker.loading:after{content:"";position:absolute;inset:1px;background:var(--loading-gradient-3);border-radius:inherit;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);z-index:2}.sticker.loading>*{position:relative;z-index:3}@keyframes rotateGradient{0%{transform:rotate(0) scale(1.5)}to{transform:rotate(360deg) scale(1.5)}}.field{background:var(--bg-secondary);border-radius:100px;padding-left:1rem;position:relative}.field__input{border:none;width:100%;height:40px;background-color:transparent}.field__emoji{position:absolute;right:5px;font-size:20px;top:0;height:100%;display:flex;justify-content:center;align-items:center}.theme-selector{display:flex;gap:10px;margin-bottom:20px}.theme-circle{width:30px;height:30px;border-radius:50%;cursor:pointer}.theme-circle.active{border:3px solid #007bff}.switch{position:relative;display:inline-block;width:50px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:.3s;background:var(--bg-secondary)}.slider--active{background:var(--bg-third)}.slider.slider--active:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background:var(--bg-main);transition:.3s;border-radius:50%;box-shadow:0 2px 4px #0003}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background:var(--bg-third);transition:.3s;border-radius:50%;box-shadow:0 2px 4px #0003}input:checked+.slider:before{transform:translate(22px)}body{background:var(--bg-main);color:var(--text-main);font-family:Noto Sans;width:100vw;height:100vh}*::-webkit-scrollbar{display:none}#app{width:100%;height:100%}.main{padding:5px;height:100%;width:100%;display:flex;flex-flow:column nowrap}.ico{color:var(--icon-color)}.top-nav{display:flex;flex-flow:row nowrap;gap:5px;-webkit-user-select:none;user-select:none;padding-bottom:5px}.top-nav__item{font-weight:600;cursor:pointer;flex:1;text-align:center;transition:background .2s,color .2s;padding:2px 5px;border-radius:5px;overflow:hidden}.top-nav__item.ico{max-width:40px}.top-nav__item[data-selected=true]{border-bottom:solid 3px var(--bg-third)}.top-nav__item:hover{background:var(--bg-secondary);color:var(--text-main)}.top-nav__underline{position:absolute;bottom:0;height:5px;border-radius:5px;background:var(--bg-third);transition:transform .3s ease,width .3s ease}.view{flex:1;overflow-y:scroll}.center{display:flex;justify-content:center;align-items:center;flex-flow:column nowrap;height:auto;flex:1}.btn{display:flex;text-align:center;justify-content:center;align-items:center;padding:1rem;border-radius:10px;border:none;appearance:none;background:var(--bg-secondary);color:var(--text-main);font-weight:700;cursor:pointer;transition:.3s;filter:brightness(.95);gap:10px}.btn:hover{filter:brightness(1)}.btn--flat{gap:10px;border-radius:0;justify-content:flex-start;padding:5px}.btn--tooltip{border-bottom:solid 1px rgba(0,0,0,.15)}.btn--add-stick{width:80px;padding:10px;text-align:center;background:var(--success);color:var(--text-main);transition:.3s}.btn--add-stick:hover{transform:scale(1.1)}.stickerpacks-nav{position:sticky;margin-bottom:5px;top:0;left:0;background:var(--bg-main);display:flex;flex-flow:row nowrap;gap:10px;width:100%;padding-top:10px;padding-bottom:10px;-webkit-user-select:none;user-select:none;z-index:10;overflow-x:auto;overflow-y:hidden}.stickerpacks-nav__item{cursor:pointer}.stickerpacks-nav .pack-preview:last-child{margin-right:10px}.pack-preview{min-width:40px;min-height:40px;max-width:40px;max-height:40px;width:100%;height:100%;cursor:pointer;display:flex;justify-content:center;align-items:center}.pack-preview img{pointer-events:none;width:100%;height:100%;object-fit:contain}.sticker{touch-action:none}.settings-view{display:flex;flex-flow:column nowrap;gap:10px}.input-slider-cont{display:flex;flex-flow:row nowrap}.input-slider-cont__label{padding:10px;display:flex;justify-content:center;align-items:center;text-align:center}.input-slider{flex:1;width:100%;-webkit-appearance:none;appearance:none}.input-slider::-webkit-slider-thumb,.input-slider::-moz-range-thumb{appearance:none;border:none;background:var(--bg-third);box-shadow:none}.input-slider:focus::-webkit-slider-runnable-track,.input-slider::-webkit-slider-runnable-track,.input-slider::-moz-range-track{background:var(--bg-secondary)}.theme-selector{display:flex;flex-flow:row wrap}.sticker-preview-modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;background:#00000080;z-index:9999;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}.sticker-preview-img{margin-bottom:10px;width:auto;height:40vh;pointer-events:none;-webkit-user-select:none;user-select:none}.tooltip-buttons{display:flex;flex-flow:column nowrap;min-width:200px;border-radius:10px;overflow:hidden;background:var(--bg-secondary)}.capitalize{text-transform:capitalize}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.rotation{animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.mb-1{margin-bottom:1rem}.dedrag{user-drag:none;-webkit-user-drag:none;pointer-events:auto}.flex-1{flex:1}.connect-btns{display:flex;flex-flow:row nowrap;gap:5px}.inline-send{display:flex;gap:10px;align-items:center}