:root{--background-primary: #313338;--background-secondary: #2b2d31;--background-secondary-alt: #232428;--background-tertiary: #1e1f22;--background-accent: #3f4147;--background-floating: #18191c;--background-modifier-hover: rgba(79, 84, 92, .16);--background-modifier-active: rgba(79, 84, 92, .24);--background-modifier-selected: rgba(79, 84, 92, .32);--text-normal: #dbdee1;--text-muted: #949ba4;--text-link: #00a8fc;--text-positive: #23a559;--text-warning: #f0b232;--text-danger: #da373c;--interactive-normal: #b5bac1;--interactive-hover: #dbdee1;--interactive-active: #ffffff;--interactive-muted: #4e5058;--brand-experiment: #5865f2;--brand-experiment-560: #4752c4;--brand-experiment-600: #3c45a5;--brand-experiment-hover: #4752c4;--border-subtle: rgba(255, 255, 255, .08);--elevation-low: 0 1px 0 rgba(4, 4, 5, .2), 0 1.5px 0 rgba(6, 6, 7, .05), 0 2px 0 rgba(4, 4, 5, .05);--elevation-medium: 0 4px 4px rgba(0, 0, 0, .16);--elevation-high: 0 8px 16px rgba(0, 0, 0, .24);--channeltextarea-background: #383a40;--input-background: #1e1f22;--input-border: transparent}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:gg sans,Noto Sans,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background-primary);color:var(--text-normal);overflow:hidden}#root{height:100vh;width:100vw}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-track{background-color:var(--background-secondary);border:4px solid transparent;background-clip:padding-box;border-radius:8px}::-webkit-scrollbar-thumb{background-color:var(--background-tertiary);border:4px solid transparent;background-clip:padding-box;border-radius:8px}::-webkit-scrollbar-thumb:hover{background-color:#1a1c1f}button{font-family:inherit;cursor:pointer;border:none;outline:none}.button-primary{background-color:var(--brand-experiment);color:#fff;padding:10px 16px;border-radius:3px;font-weight:500;transition:background-color .17s ease}.button-primary:hover{background-color:var(--brand-experiment-hover)}.button-secondary{background-color:var(--background-accent);color:var(--text-normal);padding:10px 16px;border-radius:3px;font-weight:500;transition:background-color .17s ease}.button-secondary:hover{background-color:#5d6269}input,textarea{font-family:inherit;background-color:var(--background-tertiary);border:1px solid rgba(0,0,0,.3);color:var(--text-normal);padding:10px;border-radius:3px;outline:none;transition:border-color .2s ease}input:focus,textarea:focus{border-color:var(--brand-experiment)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}.p-2{padding:8px}.p-4{padding:16px}.toolbar-button{background:transparent;color:#b5bac1;border:none;padding:6px;border-radius:4px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.toolbar-button:hover{background:#4f545c7a;color:#dbdee1}.toolbar-button.text-danger{color:#da373c}.toolbar-button.text-danger:hover{background:#da373c1a;color:#ed4245}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media(max-width:768px){.hide-mobile{display:none!important}body{overflow:auto}}.discord-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--background-tertiary);border-radius:2px;outline:none;opacity:.9;transition:opacity .2s;cursor:pointer;margin:10px 0}.discord-slider:hover{opacity:1}.discord-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003;margin-top:-6px;border:1px solid var(--background-secondary-alt)}.discord-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003;border:1px solid var(--background-secondary-alt);border:none}.discord-slider::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:transparent;border-radius:2px}.discord-slider::-moz-range-track{width:100%;height:4px;cursor:pointer;background:transparent;border-radius:2px}:root{--transition-fast: .1s;--transition-normal: .15s;--transition-slow: .3s;--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1)}@keyframes slideIn{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes typingDots{0%,20%{opacity:.2}50%{opacity:1}to{opacity:.2}}button{transition:all var(--transition-normal) var(--ease-in-out)}button:hover{transform:translateY(-1px)}button:active{transform:translateY(0)}.button-primary:hover{box-shadow:0 4px 12px rgba(var(--brand-experiment-rgb),.3)}.modal-backdrop{animation:fadeIn var(--transition-normal) var(--ease-out)}.modal-content{animation:scaleIn var(--transition-slow) var(--ease-out)}.settings-page-transition{animation:slideIn var(--transition-slow) var(--ease-out)}.message-enter{animation:slideUp var(--transition-normal) var(--ease-out)}.typing-dot{animation:typingDots 1.4s infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}.hover-lift{transition:transform var(--transition-fast) var(--ease-out)}.hover-lift:hover{transform:translateY(-2px)}.spinner{animation:spin 1s linear infinite}@keyframes skeleton-loading{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.skeleton{background:linear-gradient(90deg,var(--background-secondary) 0%,var(--background-modifier-hover) 50%,var(--background-secondary) 100%);background-size:200px 100%;animation:skeleton-loading 1.5s ease-in-out infinite}*{scroll-behavior:smooth}[role=button],a,input,textarea,select{transition:all var(--transition-normal) var(--ease-in-out)}*:focus-visible{outline:2px solid var(--brand-experiment);outline-offset:2px;border-radius:4px}@keyframes ripple{to{transform:scale(4);opacity:0}}.ripple{position:relative;overflow:hidden}.ripple:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#ffffff80;opacity:0;border-radius:50%;transform:translate(-50%,-50%);animation:ripple .6s}input[type=checkbox]{appearance:none;width:24px;height:24px;border:2px solid var(--brand-experiment);border-radius:3px;background:transparent;cursor:pointer;position:relative;transition:all .15s ease;flex-shrink:0}input[type=checkbox]:hover{border-color:var(--brand-experiment-560);background:rgba(var(--brand-experiment-rgb),.1)}input[type=checkbox]:checked{background:var(--brand-experiment);border-color:var(--brand-experiment)}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;font-weight:700}input[type=checkbox]:focus-visible{outline:2px solid var(--brand-experiment);outline-offset:2px}input[type=radio]{appearance:none;width:20px;height:20px;border:2px solid var(--brand-experiment);border-radius:50%;background:transparent;cursor:pointer;position:relative;transition:all .15s ease;flex-shrink:0}input[type=radio]:hover{border-color:var(--brand-experiment-560)}input[type=radio]:checked{background:var(--brand-experiment);border-color:var(--brand-experiment)}input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#fff}.button-primary{background:var(--brand-experiment);color:#fff;padding:8px 16px;border-radius:3px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .15s ease}.button-primary:hover{background:var(--brand-experiment-560)}.button-primary:active{background:var(--brand-experiment-600)}.button-secondary{background:transparent;color:var(--text-normal);padding:8px 16px;border-radius:3px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .15s ease}.button-secondary:hover{background:var(--background-modifier-hover);text-decoration:underline}.image-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.image-modal-overlay.closing{animation:fadeOut .2s ease forwards}.image-modal-content{display:flex;flex-direction:column;width:100vw;height:100vh;pointer-events:none;animation:scaleIn .2s ease}.image-modal-overlay.closing .image-modal-content{animation:scaleOut .2s ease forwards}.image-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;background:transparent;pointer-events:auto;z-index:10}.image-modal-name{font-size:14px;font-weight:600;color:#fff;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.5)}.image-modal-actions{display:flex;gap:12px}.image-modal-actions button{background:#00000080;border:none;border-radius:50%;width:36px;height:36px;padding:0;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.image-modal-actions button:hover{background:#000c;transform:scale(1.05)}.image-modal-viewer{flex:1;display:flex;align-items:center;justify-content:center;background:transparent;overflow:hidden;cursor:zoom-in;pointer-events:auto;padding:0}.image-modal-viewer img{width:auto;height:auto;max-width:none;max-height:none;object-fit:contain;-webkit-user-select:none;user-select:none;box-shadow:0 8px 32px #00000080}.image-modal-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:var(--background-tertiary);border-radius:0 0 8px 8px}.image-modal-controls button{background:var(--background-secondary-alt);border:none;border-radius:4px;padding:8px 12px;cursor:pointer;color:var(--interactive-normal);display:flex;align-items:center;justify-content:center;transition:all .15s ease}.image-modal-controls button:hover:not(:disabled){background:var(--background-modifier-hover);color:var(--interactive-hover)}.image-modal-controls button:disabled{opacity:.4;cursor:not-allowed}.zoom-level{min-width:60px;text-align:center;font-size:14px;font-weight:500;color:var(--text-normal)}.control-divider{width:1px;height:24px;background:var(--background-modifier-accent)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(.95);opacity:0}}