diff --git a/Twitch Notes/twitch-notes.css b/Twitch Notes/twitch-notes.css
index 7baa397..7d55def 100644
--- a/Twitch Notes/twitch-notes.css	
+++ b/Twitch Notes/twitch-notes.css	
@@ -1,115 +1,287 @@
-:root {
-  --window-close: #f77669;
-  --window-minify: #ffcb6b;
-  --window-expand: #c3e88d;
-
-  --background-header: #393d3e;
-  --background-code: #1f1e1e;
-}
-
 .twitch-note-container {
-  position: fixed;
-  z-index: 1000000;
-  min-width: 420px;
-  max-width: 95vw;
-  min-height: 240px;
-  max-height: 50vh;
-  background: var(--color-background-base);
-  border: var(--border-width-default) solid var(--color-border-base) !important;
+    position: fixed;
+    z-index: 1000000;
+    min-width: 420px;
+    max-width: 95vw;
+    min-height: 240px;
+    max-height: 50vh;
+    background: var(--color-background-base);
+    border: var(--border-width-default) solid var(--color-border-base) !important;
 }
 
 .twitch-note-header {
-  width: 100%;
-  height: 32px;
-  line-height: 32px;
-  border-bottom: var(--border-width-default) solid var(--color-border-base) !important;
-  position: relative;
-  cursor: move;
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    border-bottom: var(--border-width-default) solid var(--color-border-base) !important;
+    position: relative;
+    cursor: move;
 }
 
 .twitch-note-title {
-  color: var(--color-text-alt) !important;
-  font-size: var(--font-size-6) !important;
-  font-weight: var(--font-weight-semibold) !important;
-  text-transform: uppercase !important;
-  padding-left: calc((32px - var(--font-size-6)) / 2);
+    color: var(--color-text-alt) !important;
+    font-size: var(--font-size-6) !important;
+    font-weight: var(--font-weight-semibold) !important;
+    text-transform: uppercase !important;
+    padding-left: calc((32px - var(--font-size-6)) / 2);
 }
 
 .twitch-note-close-button {
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  width: 22px;
-  height: 22px;
-  line-height: 22px;
-  text-align: center;
-  aspect-ration: 1;
-  color: var(--color-text-alt) !important;
-  font-size: var(--font-size-6) !important;
-  font-weight: var(--font-weight-semibold) !important;
-  text-transform: uppercase !important;
-  border: var(--border-width-default) solid var(--color-border-base) !important;
-  cursor: pointer;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    aspect-ratio: 1;
+    color: var(--color-text-alt) !important;
+    font-size: var(--font-size-6) !important;
+    font-weight: var(--font-weight-semibold) !important;
+    text-transform: uppercase !important;
+    cursor: pointer;
 }
 
 .twitch-note-content {
-  position: absolute;
-  top: 32px;
-  left: 0;
-  right: 0;
-  bottom: 32px;
-  background: transparent;
-  color: var(--color-text-base) !important;
-  font-family: var(--font-base);
-  vertical-align: baseline;
-  outline: none;
-  overflow: auto;
-  padding: calc((32px - var(--font-size-6)) / 2);
+    position: absolute;
+    top: 32px;
+    left: 0;
+    right: 0;
+    bottom: 32px;
+    background: transparent;
+    color: var(--color-text-base) !important;
+    font-family: var(--font-base);
+    vertical-align: baseline;
+    outline: none;
+    overflow: auto;
+    padding: calc((32px - var(--font-size-6)) / 2);
 }
 
 .twitch-note-save-button {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 32px;
-  border-top: var(--border-width-default) solid var(--color-border-base) !important;
-  cursor: pointer;
-  color: var(--color-text-alt) !important;
-  font-size: var(--font-size-6) !important;
-  font-weight: var(--font-weight-semibold) !important;
-  text-transform: uppercase !important;
-  text-align: center;
-  line-height: 32px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 32px;
+    border-top: var(--border-width-default) solid var(--color-border-base) !important;
+    cursor: pointer;
+    color: var(--color-text-alt) !important;
+    font-size: var(--font-size-6) !important;
+    font-weight: var(--font-weight-semibold) !important;
+    text-transform: uppercase !important;
+    text-align: center;
+    line-height: 32px;
 }
 
 .twitch-notes-settings-button {
-  z-index: var(--z-index-default) !important;
-  position: relative !important;
-  background-color: var(--color-background-button-primary-default);
-  color: var(--color-text-button-primary);
-  text-decoration: none;
-  cursor: pointer;
-  display: inline-flex;
-  -webkit-box-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  overflow: hidden;
-  white-space: nowrap;
-  user-select: none;
-  font-weight: var(--font-weight-semibold);
-  border-radius: var(--border-radius-medium);
-  font-size: var(--button-text-default);
-  height: var(--button-size-default);
-  padding: 0 var(--button-padding-x);
+    z-index: var(--z-index-default) !important;
+    position: relative !important;
+    background-color: var(--color-background-button-primary-default);
+    color: var(--color-text-button-primary);
+    text-decoration: none;
+    cursor: pointer;
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    vertical-align: middle;
+    overflow: hidden;
+    white-space: nowrap;
+    user-select: none;
+    font-weight: var(--font-weight-semibold);
+    border-radius: var(--border-radius-medium);
+    font-size: var(--button-text-default);
+    height: var(--button-size-default);
+    padding: 0 var(--button-padding-x);
 }
 
-.twitch-note-settings-container {
-  position: absolute;
-  z-index: var(--z-index-balloon);
-  inset: auto 0px 100% auto;
-  margin-bottom: 8px;
-  margin-right: -5.3rem;
+.twitch-notes-settings-container {
+    border: 0;
+    font: inherit;
+    padding: 0;
+    vertical-align: baseline;
+    position: fixed;
+    z-index: var(--z-index-balloon);
+    inset: auto 0 0 auto;
+    margin: 0 69px 48px 0;
+}
+
+.twitch-notes-settings-balloon {
+    display: inline-block;
+    max-width: 90vw;
+    min-width: 0;
+    white-space: nowrap;
+    border-radius: 0.6rem !important;
+    background-color: var(--color-background-base) !important;
+    box-shadow: var(--shadow-elevation-2) !important;
+    color: inherit !important;
+}
+
+.twitch-notes-settings-popover {
+    white-space: normal;
+    width: 32rem;
+}
+
+.twitch-notes-settings-header {
+    display: flex !important;
+    -webkit-box-align: center !important;
+    align-items: center !important;
+    position: relative !important;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+    background-color: var(--color-background-base) !important;
+    min-height: 4rem;
+}
+
+.twitch-notes-settings-header-left-element {
+    left: 0 !important;
+    margin-right: 0.5rem !important;
+    width: 3rem;
+}
+
+.twitch-notes-settings-header-center-element {
+    -webkit-box-align: center !important;
+    align-items: center !important;
+    display: flex !important;
+    text-align: center !important;
+    -webkit-box-flex: 1 !important;
+    flex-grow: 1 !important;
+    -webkit-box-pack: center !important;
+    justify-content: center !important;
+}
+
+.twitch-notes-settings-header-center-element-content {
+    line-height: 1.5;
+    color: var(--color-text-alt) !important;
+    font-size: var(--font-size-5) !important;
+    font-weight: var(--font-weight-semibold) !important;
+}
+
+
+.twitch-notes-settings-header-right-element {
+    right: 0 !important;
+    margin-left: 0.5rem !important;
+}
+
+.twitch-notes-settings-close-button {
+    cursor: default;
+    text-transform: none;
+    text-indent: 0;
+    text-shadow: none;
+    letter-spacing: normal;
+    text-rendering: auto;
+    appearance: auto;
+    writing-mode: horizontal-tb !important;
+    box-sizing: border-box;
+    margin: 0;
+    font: inherit;
+    border: none;
+    font-size: var(--button-text-default);
+    font-weight: var(--font-weight-semibold);
+    vertical-align: middle;
+    overflow: hidden;
+    text-decoration: none;
+    white-space: nowrap;
+    position: relative;
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    user-select: none;
+    border-radius: var(--border-radius-medium);
+    height: calc(var(--button-size-default) - 1rem);
+    width: calc(var(--button-size-default) - 1rem);
+    background-color: var(--color-background-button-text-default);
+    color: var(--color-fill-button-icon);
+}
+
+.twitch-notes-settings-scrollable-area {
+    display: flex;
+    overflow: hidden;
+    z-index: 0;
+    height: 100%;
+    position: relative;
+    max-height: 478px;
+}
+
+.twitch-notes-settings-content {
+    box-sizing: content-box;
+    min-width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: inherit!important;
+    margin: 1rem;
+    padding-bottom: 0!important;
+}
+
+.twitch-notes-settings-option-line {
+    position: relative !important;
+    width: calc(100% - 2rem)!important;
+}
+
+.twitch-notes-settings-option-line-button {
+    border-radius: var(--border-radius-medium);
+    display: block;
+    width: 100%;
+    color: inherit;
+}
+
+.twitch-notes-settings-option-line-button:hover {
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    background-color: var(--color-background-interactable-hover);
+}
+
+.twitch-notes-settings-option-line-button-container {
+    display: flex !important;
+    -webkit-box-align: center !important;
+    align-items: center !important;
+    position: relative !important;
+    padding: 0.5rem !important;
+}
+
+.twitch-notes-settings-option-line-button-container-content {
+    -webkit-box-flex: 1 !important;
+    flex-grow: 1 !important;
+}
+
+.twitch-note-settings-separator {
+    border-top: 1px solid var(--color-border-base);
+    margin-top: 1rem !important;
+    margin-left: 0.5rem !important;
+    margin-right: 0.5rem !important;
+    padding-bottom: 1rem !important;
+}
+
+.twitch-notes-x-button {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
+    top: 0;
+    fill: currentcolor;
+}
+
+.twitch-notes-blurred-background {
+    position: fixed;
+    inset: 0 0 0 0;
+    z-index: 2000000;
+    background: rgba(0,0,0,0.4);
+    backdrop-filter: blur(2px);
+}
+
+.twitch-notes-center-floating-container {
+    background: var(--color-background-base);
+    border: var(--border-width-default) solid var(--color-border-base) !important;
+    padding: 4rem 2rem 2rem;
+    position: fixed;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50%, -50%);
+    max-height: 90vh;
+    max-width: 90vw;
+    overflow: auto;
 }
diff --git a/Twitch Notes/twitch-notes.js b/Twitch Notes/twitch-notes.js
index 0121eee..992d6b6 100644
--- a/Twitch Notes/twitch-notes.js	
+++ b/Twitch Notes/twitch-notes.js	
@@ -1,6 +1,16 @@
 (function runTwitchNotes() {
+    function save(filename, data) {
+        const blob = new Blob([data], {type: 'text/json'});
+        const elem = window.document.createElement('a');
+        elem.href = window.URL.createObjectURL(blob);
+        elem.download = filename;
+        document.body.appendChild(elem);
+        elem.click();
+        document.body.removeChild(elem);
+    }
 
     const Notes = {
+        inputData: {},
         getSavedUserList: () => {
             return JSON.parse(localStorage.getItem(LS_UserList) || "[]");
         },
@@ -13,11 +23,225 @@
             }
         },
         saveNote: (username, note) => {
+            console.log({username, note});
             Notes.addUserToSavedList(username);
             localStorage.setItem(LS_Prefix + username, note);
         },
         getNote: (username) => {
             return localStorage.getItem(LS_Prefix + username) || "";
+        },
+        exportNotes: () => {
+            save('twitch-notes-' + (Date.now()) + '.json', JSON.stringify({
+                users: Notes.getSavedUserList(),
+                notes: Notes.getSavedUserList().map(user => {
+                    return {user: user, note: Notes.getNote(user)};
+                }),
+                settings: {},
+            }));
+        },
+        importNotesConflictResolve: (user, resultsContainer, container, blurredBackground) => {
+            const diffBlurredBackground = createElement('div', null, 'twitch-notes-blurred-background');
+            const diffContainer = createElement('div', '<strong>Select which note to keep for <em>' + user + '</em></strong><br /><em>You can modify notes to merge them and keep updated one</em><br /><br />', 'twitch-notes-center-floating-container');
+
+            const inputContainer = createElement('div', null, null, {
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'no-wrap',
+                width: '100%',
+            });
+
+            const valueStyle = {
+                minWidth: '320px',
+                padding: '6px',
+                border: '1px solid #FFFFFF19'
+            };
+            const valueAttr = {contentEditable: 'true'};
+
+            const localValueContainer = createElement('div');
+            const pLocal = createElement('p', '<strong>Locally saved note</strong>');
+            localValueContainer.appendChild(pLocal);
+            const localValue = createElement('div', Notes.getNote(user), null, valueStyle, valueAttr, 'local-value-container');
+            const localValueSave = createElement('button', 'Save this', 'twitch-notes-settings-button');
+            localValueSave.addEventListener('click', () => {
+                const val = document.getElementById('local-value-container').innerHTML;
+                Notes.inputData.notes = Notes.inputData.notes.map(n => n.user === user ? {
+                    user: n.user,
+                    note: val,
+                    resolved: true
+                } : n);
+                diffBlurredBackground.remove();
+                resultsContainer.remove();
+                Notes.importNotesResult(container, blurredBackground);
+            });
+            localValueContainer.appendChild(localValue);
+            localValueContainer.innerHTML += '<br />';
+            localValueContainer.appendChild(localValueSave);
+
+            const importedValueContainer = createElement('div');
+            const iLocal = createElement('p', '<strong>Imported note</strong>');
+            importedValueContainer.appendChild(iLocal);
+            const importedValue = createElement('div', Notes.inputData.notes.filter(n => n.user === user)[0].note || '', null, valueStyle, valueAttr, 'import-value-container');
+            const importedValueSave = createElement('button', 'Save this', 'twitch-notes-settings-button');
+            importedValueSave.addEventListener('click', () => {
+                const val = document.getElementById('import-value-container').innerHTML;
+                Notes.inputData.notes = Notes.inputData.notes.map(n => n.user === user ? {
+                    user: n.user,
+                    note: val,
+                    resolved: true
+                } : n);
+                diffBlurredBackground.remove();
+                resultsContainer.remove();
+                Notes.importNotesResult(container, blurredBackground);
+            });
+
+            importedValueContainer.appendChild(importedValue);
+            importedValueContainer.innerHTML += '<br />';
+            importedValueContainer.appendChild(importedValueSave);
+
+
+            inputContainer.appendChild(localValueContainer);
+            inputContainer.appendChild(importedValueContainer);
+
+            diffContainer.appendChild(inputContainer);
+            diffBlurredBackground.appendChild(diffContainer);
+            document.body.appendChild(diffBlurredBackground);
+        },
+        importNotesResult: (container, blurredBackground) => {
+
+            const willBeAdded = [];
+            let willBeOverwritten = [];
+            const noChanges = [];
+
+            for (let user of Notes.inputData.users) {
+                if (Notes.getNote(user)) {
+                    if (Notes.inputData.notes.find(note => note.user === user).resolved || Notes.getNote(user) !== Notes.inputData.notes.find(note => note.user === user).note) {
+                        willBeOverwritten.push(user);
+                    } else {
+                        noChanges.push(user);
+                    }
+                } else {
+                    willBeAdded.push(user);
+                }
+            }
+
+            const resultsContainer = createElement('div', null);
+
+            if (willBeOverwritten.length) {
+                const overwrittenContainer = createElement('div', '<strong>Note conflicts found for:</strong><br />', null, {
+                    marginTop: '1rem',
+                });
+                for (let item of willBeOverwritten) {
+                    const row = createElement('div', item + ' ', null, {
+                        color: Notes.inputData.notes.find(note => note.user === item).resolved ? 'green' : 'red',
+                    });
+                    const resolve = createElement('a', Notes.inputData.notes.find(note => note.user === item).resolved ? '[update]' : '[resolve]', null, {
+                        cursor: 'pointer',
+                    });
+                    resolve.addEventListener('click', () => {
+                        Notes.importNotesConflictResolve(item, resultsContainer, container, blurredBackground);
+                    })
+                    row.appendChild(resolve);
+                    overwrittenContainer.appendChild(row);
+                }
+                resultsContainer.appendChild(overwrittenContainer);
+            }
+
+            if (willBeAdded.length) {
+                const addedContainer = createElement('div', '<strong>Note will be added for:</strong><br />' + willBeAdded.join('<br />'), null, {
+                    marginTop: '1rem',
+                    color: 'white'
+                })
+                resultsContainer.appendChild(addedContainer);
+            }
+
+            if (noChanges.length) {
+                const noChangesContainer = createElement('div', '<strong>No changes for:</strong><br />' + noChanges.join('<br />'), null, {
+                    marginTop: '1rem',
+                    color: 'gray'
+                })
+                resultsContainer.appendChild(noChangesContainer);
+            }
+
+            const spacer = createElement('div', null, null, {height: '24px'});
+            resultsContainer.appendChild(spacer);
+
+            /*
+            TODO: make popup to allow checking differences between existing notes and ones that would override them
+            TODO: allow to edit notes and select which one to keep after import, if any content was modified after opening comparison window show that record was merged as a status
+            TODO: show visually that records have some data that will be merged or overwritten entirely
+            */
+
+            willBeOverwritten = willBeOverwritten.filter(x => !Notes.inputData.notes.find(n => n.user === x).resolved);
+
+            const saveButton = createElement('button', 'Complete import', 'twitch-notes-settings-button',
+                willBeOverwritten.length > 0 ? {background: 'gray'} : null,
+                willBeOverwritten.length > 0 ? {disabled: 'true'} : null)
+
+            resultsContainer.appendChild(saveButton)
+
+            if (willBeOverwritten.length > 0) {
+                const note = createElement('div', '<em>Import cannot be completed while there are unresolved conflicts</em>', null, {
+                    color: 'gray',
+                });
+                resultsContainer.appendChild(note);
+            } else {
+                saveButton.addEventListener('click', () => {
+                    for (let note of Notes.inputData.notes) {
+                        Notes.saveNote(note.user, note.note);
+                    }
+                    blurredBackground.remove();
+                    Notes.inputData = {};
+                });
+            }
+
+            container.appendChild(resultsContainer);
+        },
+        importNotes: () => {
+            const blurredBackground = createElement('div', null, 'twitch-notes-blurred-background');
+            const container = createElement('div', '<strong>WARNING!</strong> <em>This action might override existing data!</em><br /><br />', 'twitch-notes-center-floating-container');
+            const inputBlock = createElement('div', 'Select exported twitch notes file<br /><br />');
+            const input = createElement('input', null, 'twitch-notes-file-input', null, {
+                type: 'file',
+                accept: '.json'
+            });
+            const settingsCloseButton = createElement('button', xButton, 'twitch-notes-settings-close-button', {
+                position: 'absolute',
+                top: '1rem',
+                right: '1rem',
+            });
+            inputBlock.appendChild(input);
+            settingsCloseButton.addEventListener('click', () => {
+                blurredBackground.remove();
+            });
+            input.addEventListener('change', () => {
+                let file = input.files[0];
+                if (!file) {
+                    return;
+                }
+                let reader = new FileReader();
+                reader.readAsText(file, "UTF-8");
+                reader.onload = function (evt) {
+                    Notes.inputData = JSON.parse(evt.target.result.toString());
+                    if (Notes.inputData) {
+                        inputBlock.style.display = 'none';
+                        Notes.importNotesResult(container, blurredBackground);
+                    }
+                }
+                reader.onerror = function () {
+                    console.error("error reading file");
+                }
+            });
+
+            container.appendChild(settingsCloseButton);
+            container.appendChild(inputBlock);
+            blurredBackground.appendChild(container);
+            document.body.appendChild(blurredBackground);
+        },
+        clearAllData: () => {
+            console.log('TODO: Implement Notes Data Clearing');
+        },
+        openAllNotes: () => {
+            console.log('TODO: Implement Open All Notes functionality');
         }
     }
 
@@ -47,7 +271,7 @@
         }
     }
 
-    function createElement(tag, body, classes, styles, attributes) {
+    function createElement(tag, body, classes, styles, attributes, id) {
         const element = document.createElement(tag);
 
         if (body) {
@@ -80,6 +304,8 @@
             }
         }
 
+        element.setAttribute('id', id ? id : 'element-' + Math.floor((Math.random() * 10000000)))
+
         return element;
     }
 
@@ -125,7 +351,7 @@
             isMouseDown = true;
         });
 
-        const closeButton = createElement('span', "X", 'twitch-note-close-button')
+        const closeButton = createElement('span', xButton, 'twitch-note-close-button')
         closeButton.addEventListener("click", function close() {
             removeContainer(username);
         });
@@ -173,7 +399,7 @@
                     });
 
                     const img = createElement('img', null, null, {
-                        height:  '18px',
+                        height: '18px',
                         paddingRight: '4px'
                     }, {
                         src: "https://cdn.rdarius.lt/icons/32-id-card.png"
@@ -194,14 +420,95 @@
         }
     }
 
+    function createChatSettingsLine(text) {
+        const element = createElement('div', null, 'twitch-notes-settings-option-line');
+        const button = createElement('button', null, 'twitch-notes-settings-option-line-button');
+        const buttonContainer = createElement('div', null, 'twitch-notes-settings-option-line-button-container');
+        const buttonContainerContent = createElement('div', text, 'twitch-notes-settings-option-line-button-container-content');
+        buttonContainer.appendChild(buttonContainerContent);
+        button.appendChild(buttonContainer);
+        element.appendChild(button);
+
+        return element;
+    }
+
+    function createChatSettingsSeparator() {
+        return createElement('div', null, 'twitch-note-settings-separator');
+    }
+
     function toggleSettings() {
+        if (!settingsWindow) {
+            const settingsContainer = createElement('div', null, 'twitch-notes-settings-container');
+            const settingsBalloon = createElement('div', null, 'twitch-notes-settings-balloon');
+            const settingsPopover = createElement('div', null, 'twitch-notes-settings-popover');
+
+            // startOf: settings header
+            const settingsHeader = createElement('div', null, 'twitch-notes-settings-header');
+            const settingsHeaderLeftElement = createElement('div', null, 'twitch-notes-settings-header-left-element')
+            settingsHeader.appendChild(settingsHeaderLeftElement);
+            const settingsHeaderCenterElement = createElement('div', null, 'twitch-notes-settings-header-center-element')
+            settingsHeader.appendChild(settingsHeaderCenterElement);
+            const settingsHeaderCenterElementContent = createElement('p', 'Twitch Notes Settings', 'twitch-notes-settings-header-center-element-content')
+            settingsHeaderCenterElement.appendChild(settingsHeaderCenterElementContent);
+            const settingsHeaderRightElement = createElement('div', null, 'twitch-notes-settings-header-right-element')
+            settingsHeader.appendChild(settingsHeaderRightElement);
+            const settingsCloseButton = createElement('button', xButton, 'twitch-notes-settings-close-button');
+            settingsHeaderRightElement.appendChild(settingsCloseButton);
+            settingsPopover.appendChild(settingsHeader);
+            // endOf: settings header
+
+            settingsCloseButton.addEventListener('click', toggleSettings);
+
+
+            // startOf: scrollable area
+            const settingsScrollableArea = createElement('div', null, 'twitch-notes-settings-scrollable-area');
+            const settingsContent = createElement('div', null, 'twitch-notes-settings-content');
+            settingsScrollableArea.appendChild(settingsContent);
+
+            const exportNotes = createChatSettingsLine('Export Notes');
+            settingsContent.appendChild(exportNotes);
+            const importNotes = createChatSettingsLine('Import Notes');
+            settingsContent.appendChild(importNotes);
+            const clearData = createChatSettingsLine('Clear Data');
+            settingsContent.appendChild(clearData);
+            settingsContent.appendChild(createChatSettingsSeparator());
+            const openAllNotes = createChatSettingsLine('View All Notes');
+            settingsContent.appendChild(openAllNotes);
+
+            exportNotes.addEventListener('click', Notes.exportNotes);
+            importNotes.addEventListener('click', Notes.importNotes);
+            clearData.addEventListener('click', Notes.clearAllData);
+            openAllNotes.addEventListener('click', Notes.openAllNotes);
+
+
+            settingsPopover.appendChild(settingsScrollableArea);
+            // endOf: scrollable area
+
+
+            settingsBalloon.appendChild(settingsPopover);
+            settingsContainer.appendChild(settingsBalloon);
+            settingsWindow = settingsContainer;
+            document.body.appendChild(settingsWindow);
+            settingsWindowOpen = true;
+            return;
+        }
+
+        if (settingsWindowOpen) {
+            settingsWindow.style.display = 'none';
+            settingsWindowOpen = false;
+        } else {
+            settingsWindow.style.display = 'block';
+            settingsWindowOpen = true;
+        }
         console.log('toggle settings');
     }
 
+    const xButton = `<svg width="100%" height="100%" viewBox="0 0 20 20" x="0px" y="0px" class="twitch-notes-x-button"><g><path d="M8.5 10L4 5.5 5.5 4 10 8.5 14.5 4 16 5.5 11.5 10l4.5 4.5-1.5 1.5-4.5-4.5L5.5 16 4 14.5 8.5 10z"></path></g></svg>`;
     let openContainers = {};
     let isMouseDown = false;
     let activeContainer = null;
-    // let settingsWindowOpen = false;
+    let settingsWindowOpen = false;
+    let settingsWindow = null;
 
     let LS_UserList = "twitch-note-all-users-list";
     let LS_Prefix = "twitch-note-";
diff --git a/Twitch Notes/twitchvars.css b/Twitch Notes/twitchvars.css
new file mode 100644
index 0000000..4ae3559
--- /dev/null
+++ b/Twitch Notes/twitchvars.css	
@@ -0,0 +1,818 @@
+:root {
+    --border-width-default: 1px;
+    --border-width-input: 2px;
+    --border-width-input-overlay-unfocused: 1px;
+    --border-width-marked: 3px;
+    --border-width-spinner: 2px;
+    --border-width-tag: 2px;
+    --border-radius-none: 0;
+    --border-radius-small: 0.2rem;
+    --border-radius-medium: 0.4rem;
+    --border-radius-large: 0.6rem;
+    --border-radius-extra-large: 1rem;
+    --border-radius-extra-extra-large: 1.6rem;
+    --border-radius-rounded: 9000px;
+    --break-xs: 480px;
+    --break-sm: 768px;
+    --break-md: 1024px;
+    --break-lg: 1200px;
+    --break-xl: 1440px;
+    --break-xxl: 1600px;
+    --color-brand-muted-ice: #d6e4ff;
+    --color-brand-muted-cupcake: #ffa3ee;
+    --color-brand-muted-mint: #5cffbe;
+    --color-brand-muted-sky: #7aa7ff;
+    --color-brand-muted-blush: #ffcdcc;
+    --color-brand-muted-canary: #ebeb00;
+    --color-brand-muted-smoke: #d3d3d9;
+    --color-brand-muted-lavender: #d1b3ff;
+    --color-brand-muted-mustard: #ffd37a;
+    --color-brand-muted-emerald: #00f593;
+    --color-brand-muted-coral: #ff8280;
+    --color-brand-muted-ocean: #1345aa;
+    --color-brand-accent-grape: #5c16c5;
+    --color-brand-accent-dragonfruit: #ff38db;
+    --color-brand-accent-carrot: #e69900;
+    --color-brand-accent-sun: #ebeb00;
+    --color-brand-accent-lime: #00f593;
+    --color-brand-accent-turquoise: #00f0f0;
+    --color-brand-accent-eggplant: #451093;
+    --color-brand-accent-wine: #ae1392;
+    --color-brand-accent-slime: #00f593;
+    --color-brand-accent-seafoam: #5cffbe;
+    --color-brand-accent-cherry: #eb0400;
+    --color-brand-accent-marine: #1f69ff;
+    --color-brand-accent-seaweed: #00a3a3;
+    --color-brand-accent-pebble: #848494;
+    --color-brand-accent-moon: #efeff1;
+    --color-brand-accent-fiji: #5cffbe;
+    --color-brand-accent-blueberry: #1f69ff;
+    --color-brand-accent-arctic: #00f0f0;
+    --color-brand-accent-highlighter: #f5f500;
+    --color-brand-accent-flamingo: #ff38db;
+    --color-brand-accent-ruby: #eb0400;
+    --color-brand-accent-punch: #ffcdcc;
+    --color-brand-accent-creamsicle: #ffd37a;
+    --color-white: #fff;
+    --color-black: #000;
+    --color-red: #e91916;
+    --color-red-darker: #bb1411;
+    --color-orange: #ffd37a;
+    --color-yellow: #ffd37a;
+    --color-green: #00f593;
+    --color-green-darker: #00ad96;
+    --color-blue: #1f69ff;
+    --color-prime-blue: #0e9bd8;
+    --color-magenta: #c53dff;
+    --color-error: #eb0400;
+    --color-warn: #ffd37a;
+    --color-success: #00f593;
+    --color-info: #1f69ff;
+    --color-accent: #9147ff;
+    --color-twitch-purple: #9147ff;
+    --color-twitch-purple-1: #040109;
+    --color-twitch-purple-2: #0d031c;
+    --color-twitch-purple-3: #15052e;
+    --color-twitch-purple-4: #24094e;
+    --color-twitch-purple-5: #330c6e;
+    --color-twitch-purple-6: #451093;
+    --color-twitch-purple-7: #5c16c5;
+    --color-twitch-purple-8: #772ce8;
+    --color-twitch-purple-9: #9147ff;
+    --color-twitch-purple-10: #a970ff;
+    --color-twitch-purple-11: #bf94ff;
+    --color-twitch-purple-12: #d1b3ff;
+    --color-twitch-purple-13: #e3d1ff;
+    --color-twitch-purple-14: #ede0ff;
+    --color-twitch-purple-15: #f3ebff;
+    --color-hinted-grey-1: #0e0e10;
+    --color-hinted-grey-2: #18181b;
+    --color-hinted-grey-3: #1f1f23;
+    --color-hinted-grey-4: #26262c;
+    --color-hinted-grey-5: #323239;
+    --color-hinted-grey-6: #3b3b44;
+    --color-hinted-grey-7: #53535f;
+    --color-hinted-grey-8: #848494;
+    --color-hinted-grey-9: #adadb8;
+    --color-hinted-grey-10: #c8c8d0;
+    --color-hinted-grey-11: #d3d3d9;
+    --color-hinted-grey-12: #dedee3;
+    --color-hinted-grey-13: #e6e6ea;
+    --color-hinted-grey-14: #efeff1;
+    --color-hinted-grey-15: #f7f7f8;
+    --color-transparent: transparent;
+    --color-opac-b-1: rgba(0,0,0,.05);
+    --color-opac-b-2: rgba(0,0,0,.1);
+    --color-opac-b-3: rgba(0,0,0,.15);
+    --color-opac-b-4: rgba(0,0,0,.2);
+    --color-opac-b-5: rgba(0,0,0,.25);
+    --color-opac-b-6: rgba(0,0,0,.3);
+    --color-opac-b-7: rgba(0,0,0,.4);
+    --color-opac-b-8: rgba(0,0,0,.5);
+    --color-opac-b-9: rgba(0,0,0,.6);
+    --color-opac-b-10: rgba(0,0,0,.7);
+    --color-opac-b-11: rgba(0,0,0,.75);
+    --color-opac-b-12: rgba(0,0,0,.8);
+    --color-opac-b-13: rgba(0,0,0,.85);
+    --color-opac-b-14: rgba(0,0,0,.9);
+    --color-opac-b-15: rgba(0,0,0,.95);
+    --color-opac-w-1: hsla(0,0%,100%,.05);
+    --color-opac-w-2: hsla(0,0%,100%,.1);
+    --color-opac-w-3: hsla(0,0%,100%,.15);
+    --color-opac-w-4: hsla(0,0%,100%,.2);
+    --color-opac-w-5: hsla(0,0%,100%,.25);
+    --color-opac-w-6: hsla(0,0%,100%,.3);
+    --color-opac-w-7: hsla(0,0%,100%,.4);
+    --color-opac-w-8: hsla(0,0%,100%,.5);
+    --color-opac-w-9: hsla(0,0%,100%,.6);
+    --color-opac-w-10: hsla(0,0%,100%,.7);
+    --color-opac-w-11: hsla(0,0%,100%,.75);
+    --color-opac-w-12: hsla(0,0%,100%,.8);
+    --color-opac-w-13: hsla(0,0%,100%,.85);
+    --color-opac-w-14: hsla(0,0%,100%,.9);
+    --color-opac-w-15: hsla(0,0%,100%,.95);
+    --color-opac-p-1: rgba(92,22,197,.05);
+    --color-opac-p-2: rgba(92,22,197,.1);
+    --color-opac-p-3: rgba(92,22,197,.15);
+    --color-opac-p-4: rgba(92,22,197,.2);
+    --color-opac-p-5: rgba(92,22,197,.25);
+    --color-opac-p-6: rgba(92,22,197,.3);
+    --color-opac-p-7: rgba(92,22,197,.4);
+    --color-opac-p-8: rgba(92,22,197,.5);
+    --color-opac-p-9: rgba(92,22,197,.6);
+    --color-opac-p-10: rgba(92,22,197,.7);
+    --color-opac-p-11: rgba(92,22,197,.75);
+    --color-opac-p-12: rgba(92,22,197,.8);
+    --color-opac-p-13: rgba(92,22,197,.85);
+    --color-opac-p-14: rgba(92,22,197,.9);
+    --color-opac-p-15: rgba(92,22,197,.95);
+    --color-orange-1: #050301;
+    --color-orange-2: #090601;
+    --color-orange-3: #120d02;
+    --color-orange-4: #251a04;
+    --color-orange-5: #372706;
+    --color-orange-6: #453008;
+    --color-orange-7: #65470b;
+    --color-orange-8: #7c570e;
+    --color-orange-9: #9e6900;
+    --color-orange-10: #c28100;
+    --color-orange-11: #e69900;
+    --color-orange-12: #ffb31a;
+    --color-orange-13: #ffd37a;
+    --color-orange-14: #ffdf9e;
+    --color-orange-15: #ffebc2;
+    --color-yellow-1: #050501;
+    --color-yellow-2: #090901;
+    --color-yellow-3: #0e0e02;
+    --color-yellow-4: #1c1c03;
+    --color-yellow-5: #292905;
+    --color-yellow-6: #373706;
+    --color-yellow-7: #4e4e09;
+    --color-yellow-8: #60600b;
+    --color-yellow-9: #7a7a00;
+    --color-yellow-10: #949400;
+    --color-yellow-11: #adad00;
+    --color-yellow-12: #c7c700;
+    --color-yellow-13: #e0e000;
+    --color-yellow-14: #ebeb00;
+    --color-yellow-15: #f5f500;
+    --color-green-1: #010503;
+    --color-green-2: #010906;
+    --color-green-3: #02120c;
+    --color-green-4: #042015;
+    --color-green-5: #063221;
+    --color-green-6: #074029;
+    --color-green-7: #0a5738;
+    --color-green-8: #016b40;
+    --color-green-9: #018852;
+    --color-green-10: #00a865;
+    --color-green-11: #00c274;
+    --color-green-12: #00db84;
+    --color-green-13: #00f593;
+    --color-green-14: #5cffbe;
+    --color-green-15: #a8ffdc;
+    --color-cyan-1: #010505;
+    --color-cyan-2: #010909;
+    --color-cyan-3: #021212;
+    --color-cyan-4: #042020;
+    --color-cyan-5: #052e2e;
+    --color-cyan-6: #073c3c;
+    --color-cyan-7: #095353;
+    --color-cyan-8: #0c6a6a;
+    --color-cyan-9: #018383;
+    --color-cyan-10: #00a3a3;
+    --color-cyan-11: #00b8b8;
+    --color-cyan-12: #00d6d6;
+    --color-cyan-13: #00f0f0;
+    --color-cyan-14: #2effff;
+    --color-cyan-15: #94ffff;
+    --color-blue-1: #010205;
+    --color-blue-2: #020712;
+    --color-blue-3: #040d20;
+    --color-blue-4: #071a40;
+    --color-blue-5: #0a255c;
+    --color-blue-6: #0d3177;
+    --color-blue-7: #1345aa;
+    --color-blue-8: #1756d3;
+    --color-blue-9: #1f69ff;
+    --color-blue-10: #528bff;
+    --color-blue-11: #7aa7ff;
+    --color-blue-12: #a3c2ff;
+    --color-blue-13: #c7daff;
+    --color-blue-14: #d6e4ff;
+    --color-blue-15: #e5eeff;
+    --color-magenta-1: #050104;
+    --color-magenta-2: #12020f;
+    --color-magenta-3: #20041b;
+    --color-magenta-4: #37062e;
+    --color-magenta-5: #4e0941;
+    --color-magenta-6: #650b55;
+    --color-magenta-7: #8a0f73;
+    --color-magenta-8: #ae1392;
+    --color-magenta-9: #c516a5;
+    --color-magenta-10: #ff38db;
+    --color-magenta-11: #ff75e6;
+    --color-magenta-12: #ffa3ee;
+    --color-magenta-13: #ffc7f5;
+    --color-magenta-14: #ffd6f8;
+    --color-magenta-15: #ffe5fa;
+    --color-red-1: #050101;
+    --color-red-2: #120202;
+    --color-red-3: #200404;
+    --color-red-4: #3c0807;
+    --color-red-5: #530a09;
+    --color-red-6: #6e0e0c;
+    --color-red-7: #971311;
+    --color-red-8: #bb1411;
+    --color-red-9: #eb0400;
+    --color-red-10: #ff4f4d;
+    --color-red-11: #ff8280;
+    --color-red-12: #ffaaa8;
+    --color-red-13: #ffcdcc;
+    --color-red-14: #ffdcdb;
+    --color-red-15: #ffe6e5;
+    --color-twitter: #1da1f2;
+    --color-facebook: #3b5998;
+    --color-reddit: #ff4500;
+    --color-snapchat: #fffc00;
+    --color-instagram: #405de6;
+    --color-youtube: #cd201f;
+    --color-paypal: #009cde;
+    --color-paypal-blue: #009cde;
+    --color-paypal-yellow: #fcc439;
+    --color-vk: #45668e;
+    --color-amazon: #fad677;
+    --button-size-small: 2.4rem;
+    --button-size-default: 3rem;
+    --button-size-large: 3.6rem;
+    --button-text-small: 1.2rem;
+    --button-text-default: 1.3rem;
+    --button-text-large: 1.4rem;
+    --button-padding-x: 1rem;
+    --button-padding-y: 0.5rem;
+    --input-text-small: 1.2rem;
+    --input-text-default: 1.3rem;
+    --input-text-large: 1.4rem;
+    --input-size-small: 2.4rem;
+    --input-size-default: 3rem;
+    --input-size-large: 3.6rem;
+    --font-base: "Inter","Roobert","Helvetica Neue",Helvetica,Arial,sans-serif;
+    --font-display: "Roobert","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
+    --font-mono: monospace;
+    --font-size-1: 5.4rem;
+    --font-size-2: 3.6rem;
+    --font-size-3: 2.4rem;
+    --font-size-4: 1.8rem;
+    --font-size-5: 1.4rem;
+    --font-size-6: 1.3rem;
+    --font-size-7: 1.2rem;
+    --font-size-8: 1.2rem;
+    --font-size-base: 1.3rem;
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-hdr: 400;
+    --line-height-body: 1.5;
+    --line-height-heading: 1.2;
+    --base-rem-unit: 10;
+    --grid-columns: 12;
+    --grid-gutter-width: 1.5rem;
+    --grid-gutter-width-lg: 2rem;
+    --grid-gutter-width-sm: 1rem;
+    --grid-gutter-width-xs: 0.5rem;
+    --opac-1: 0.05;
+    --opac-2: 0.1;
+    --opac-3: 0.15;
+    --opac-4: 0.2;
+    --opac-5: 0.25;
+    --opac-6: 0.3;
+    --opac-7: 0.4;
+    --opac-8: 0.5;
+    --opac-9: 0.6;
+    --opac-10: 0.7;
+    --opac-11: 0.75;
+    --opac-12: 0.8;
+    --opac-13: 0.85;
+    --opac-14: 0.9;
+    --opac-15: 0.95;
+    --space-0: 0;
+    --space-1: 1rem;
+    --space-2: 2rem;
+    --space-3: 3rem;
+    --space-4: 4rem;
+    --space-5: 5rem;
+    --space-6: 6rem;
+    --space-7: 7rem;
+    --space-8: 8rem;
+    --space-9: 9rem;
+    --space-10: 10rem;
+    --space-auto: auto;
+    --space-05: 0.5rem;
+    --timing-short: 100ms;
+    --timing-medium: 150ms;
+    --timing-long: 200ms;
+    --z-index-modal: 5000;
+    --z-index-notification: 4000;
+    --z-index-overlay: 3000;
+    --z-index-balloon: 2000;
+    --z-index-sticky: 1000;
+    --z-index-above: 10;
+    --z-index-default: 1;
+    --z-index-below: -1;
+    --color-background-button: var(--color-twitch-purple-7);
+    --color-background-button-hover: var(--color-twitch-purple-8);
+    --color-background-button-focus: var(--color-twitch-purple-8);
+    --color-background-button-active: var(--color-twitch-purple-7);
+    --color-background-button-purchase: var(--color-opac-b-5);
+    --color-background-button-status: var(--color-background-button-success);
+    --color-background-button-status-hover: var(--color-background-button-error-hover);
+    --color-background-button-status-focus: var(--color-background-button-error-hover);
+    --color-background-button-status-active: var(--color-background-button-error-active);
+    --color-background-button-success-focus: var(--color-green-darker);
+    --color-background-button-alert: var(--color-red);
+    --color-background-button-alert-hover: var(--color-red-darker);
+    --color-background-button-alert-focus: var(--color-red-darker);
+    --color-background-button-alert-active: var(--color-red);
+    --color-background-button-overlay: var(--color-transparent);
+    --color-background-button-overlay-hover: var(--color-opac-w-1);
+    --color-background-button-overlay-focus: var(--color-opac-w-1);
+    --color-background-button-overlay-active: transparent;
+    --color-background-interactable-alpha-hover: var(--color-opac-w-4);
+    --color-background-interactable-alpha-active: var(--color-opac-w-5);
+    --color-background-interactable-alpha-selected: var(--color-opac-w-3);
+    --color-text-button: var(--color-white);
+    --color-text-button-hover: var(--color-white);
+    --color-text-button-focus: var(--color-white);
+    --color-text-button-active: var(--color-white);
+    --color-text-button-secondary-hover: var(--color-hinted-grey-6);
+    --color-text-button-secondary-focus: var(--color-hinted-grey-6);
+    --color-text-button-secondary-active: var(--color-hinted-grey-6);
+    --color-text-button-text-focus: var(--color-opac-w-1);
+    --color-text-button-text-active: var(--color-opac-p-2);
+    --color-text-button-status: var(--color-white);
+    --color-text-button-status-hover: var(--color-white);
+    --color-text-button-status-focus: var(--color-white);
+    --color-text-button-status-active: var(--color-white);
+    --color-text-button-success-hover: var(--color-black);
+    --color-text-button-success-focus: var(--color-black);
+    --color-text-button-success-active: var(--color-black);
+    --color-text-button-alert: var(--color-black);
+    --color-text-button-alert-hover: var(--color-black);
+    --color-text-button-alert-focus: var(--color-black);
+    --color-text-button-alert-active: var(--color-black);
+    --color-text-button-overlay: var(--color-white);
+    --color-text-button-overlay-hover: var(--color-white);
+    --color-text-button-overlay-focus: var(--color-white);
+    --color-text-button-overlay-active: var(--color-white);
+    --color-text-interactable: currentColor;
+    --color-text-interactable-hover: var(--color-white);
+    --color-text-interactable-active: var(--color-white);
+    --color-text-interactable-inverted: var(--color-white);
+    --color-text-input-focus: transparent;
+    --color-border-button: var(--color-twitch-purple-7);
+    --color-border-button-hover: var(--color-twitch-purple-8);
+    --color-border-button-focus: var(--color-twitch-purple-9);
+    --color-border-button-active: var(--color-twitch-purple-8);
+    --color-border-button-disabled: var(--color-opac-w-1);
+    --color-border-button-status: var(--color-green);
+    --color-border-button-status-hover: var(--color-red-darker);
+    --color-border-button-status-focus: var(--color-red-darker);
+    --color-border-button-status-active: var(--color-red);
+    --color-border-button-success: var(--color-green);
+    --color-border-button-success-hover: var(--color-green);
+    --color-border-button-success-focus: var(--color-green);
+    --color-border-button-success-active: var(--color-green);
+    --color-border-button-alert: var(--color-red);
+    --color-border-button-alert-hover: var(--color-red-darker);
+    --color-border-button-alert-focus: var(--color-red-darker);
+    --color-border-button-alert-active: var(--color-red);
+    --color-border-button-overlay: var(--color-transparent);
+    --color-border-button-overlay-hover: var(--color-transparent);
+    --color-border-button-overlay-focus: var(--color-opac-w-6);
+    --color-border-button-overlay-active: var(--color-opac-w-9);
+    --color-border-button-overlay-bordered: var(--color-white);
+    --color-border-interactable-selected: var(--color-twitch-purple-10);
+    --shadow-input: inset 0 0 0 1px var(--color-twitch-purple-5);
+    --shadow-input-error: 0 0 0 1px var(--color-border-error);
+    --shadow-input-focus: 0 0 10px -2px var(--color-border-brand);
+    --shadow-input-error-focus: 0 0 6px -2px var(--color-border-error);
+    --shadow-interactable-focus: 0 0 6px 0 var(--color-twitch-purple-8);
+    --color-background-subscriber-stream-tag-default: var(--color-twitch-purple-4);
+    --color-background-subscriber-stream-tag-hover: var(--color-twitch-purple-3);
+    --color-background-subscriber-stream-tag-active: var(--color-twitch-purple-4);
+    --color-border-subscriber-stream-tag: var(--color-twitch-purple-5);
+    --color-background-body: var(--color-hinted-grey-1);
+    --color-background-base: var(--color-hinted-grey-2);
+    --color-background-alt: var(--color-hinted-grey-3);
+    --color-background-alt-2: var(--color-hinted-grey-4);
+    --color-background-float: var(--color-hinted-grey-3);
+    --color-background-accent: var(--color-twitch-purple-8);
+    --color-background-accent-alt: var(--color-twitch-purple-7);
+    --color-background-accent-alt-2: var(--color-twitch-purple-6);
+    --color-background-placeholder: var(--color-opac-w-1);
+    --color-background-overlay-placeholder: var(--color-opac-w-3);
+    --color-background-live: var(--color-red);
+    --color-background-prime: var(--color-prime-blue);
+    --color-background-error: var(--color-red-11);
+    --color-background-warn: var(--color-orange-13);
+    --color-background-success: var(--color-green-13);
+    --color-background-info: var(--color-blue-12);
+    --color-background-brand: var(--color-twitch-purple-11);
+    --color-background-overlay-error: var(--color-red-11);
+    --color-background-overlay-warn: var(--color-orange-13);
+    --color-background-overlay-success: var(--color-green-13);
+    --color-background-overlay-info: var(--color-blue-12);
+    --color-background-overlay-brand: var(--color-twitch-purple-11);
+    --color-background-interactable-hover: var(--color-opac-w-4);
+    --color-background-interactable-active: var(--color-opac-w-5);
+    --color-background-interactable-selected: var(--color-background-button-brand);
+    --color-background-interactable-overlay-hover: var(--color-opac-w-4);
+    --color-background-interactable-overlay-active: var(--color-opac-w-5);
+    --color-background-interactable-overlay-selected: var(--color-white);
+    --color-background-interactable-destructive-hover: var(--color-red-darker);
+    --color-background-interactable-destructive-active: var(--color-red);
+    --color-background-button-primary-default: var(--color-background-button-brand);
+    --color-background-button-primary-hover: var(--color-background-button-brand-hover);
+    --color-background-button-primary-active: var(--color-background-button-brand-active);
+    --color-background-button-secondary-default: var(--color-opac-w-3);
+    --color-background-button-secondary-hover: var(--color-background-interactable-hover);
+    --color-background-button-secondary-active: var(--color-background-interactable-active);
+    --color-background-button-text-default: var(--color-transparent);
+    --color-background-button-text-hover: var(--color-background-interactable-hover);
+    --color-background-button-text-active: var(--color-background-interactable-active);
+    --color-background-button-destructive-default: var(--color-background-button-error);
+    --color-background-button-destructive-hover: var(--color-background-button-error-hover);
+    --color-background-button-destructive-active: var(--color-background-button-error-active);
+    --color-background-button-error: var(--color-red-10);
+    --color-background-button-error-hover: var(--color-red-12);
+    --color-background-button-error-active: var(--color-red-14);
+    --color-background-button-warn: var(--color-orange-12);
+    --color-background-button-warn-hover: var(--color-orange-14);
+    --color-background-button-warn-active: var(--color-orange-15);
+    --color-background-button-success: var(--color-green-12);
+    --color-background-button-success-hover: var(--color-green-14);
+    --color-background-button-success-active: var(--color-green-15);
+    --color-background-button-info: var(--color-blue-11);
+    --color-background-button-info-hover: var(--color-blue-13);
+    --color-background-button-info-active: var(--color-blue-15);
+    --color-background-button-brand: var(--color-twitch-purple-9);
+    --color-background-button-brand-hover: var(--color-twitch-purple-8);
+    --color-background-button-brand-active: var(--color-twitch-purple-7);
+    --color-background-button-overlay-primary-default: var(--color-white);
+    --color-background-button-overlay-primary-hover: var(--color-opac-w-14);
+    --color-background-button-overlay-primary-active: var(--color-opac-w-13);
+    --color-background-button-overlay-secondary-default: var(--color-opac-w-3);
+    --color-background-button-overlay-secondary-hover: var(--color-background-interactable-overlay-hover);
+    --color-background-button-overlay-secondary-active: var(--color-background-interactable-overlay-active);
+    --color-background-button-overlay-text-default: var(--color-transparent);
+    --color-background-button-overlay-text-hover: var(--color-background-interactable-overlay-hover);
+    --color-background-button-overlay-text-active: var(--color-background-interactable-overlay-active);
+    --color-background-button-overlay-error: var(--color-background-button-error);
+    --color-background-button-overlay-error-hover: var(--color-background-button-error-hover);
+    --color-background-button-overlay-error-active: var(--color-background-button-error-active);
+    --color-background-button-overlay-warn: var(--color-background-button-warn);
+    --color-background-button-overlay-warn-hover: var(--color-background-button-warn-hover);
+    --color-background-button-overlay-warn-active: var(--color-background-button-warn-active);
+    --color-background-button-overlay-success: var(--color-background-button-success);
+    --color-background-button-overlay-success-hover: var(--color-background-button-success-hover);
+    --color-background-button-overlay-success-active: var(--color-background-button-success-active);
+    --color-background-button-overlay-info: var(--color-background-button-info);
+    --color-background-button-overlay-info-hover: var(--color-background-button-info-hover);
+    --color-background-button-overlay-info-active: var(--color-background-button-info-active);
+    --color-background-button-overlay-brand: var(--color-white);
+    --color-background-button-overlay-brand-hover: var(--color-opac-w-14);
+    --color-background-button-overlay-brand-active: var(--color-opac-w-13);
+    --color-background-button-icon-overlay-default: var(--color-transparent);
+    --color-background-button-icon-overlay-hover: var(--color-background-interactable-overlay-hover);
+    --color-background-button-icon-overlay-active: var(--color-background-interactable-overlay-active);
+    --color-background-button-disabled: var(--color-opac-w-3);
+    --color-background-button-overlay-disabled: var(--color-opac-w-2);
+    --color-background-image-selector-overlay: var(--color-transparent);
+    --color-background-input: var(--color-opac-w-4);
+    --color-background-input-focus: var(--color-black);
+    --color-background-input-checked: var(--color-twitch-purple-8);
+    --color-background-input-overlay: var(--color-opac-b-4);
+    --color-background-input-overlay-focus: var(--color-black);
+    --color-background-input-checkbox-checked: var(--color-border-brand);
+    --color-background-input-checkbox-checked-background: var(--color-black);
+    --color-background-input-checkbox-checked-background-overlay: var(--color-black);
+    --color-background-input-checkbox-checked-overlay: var(--color-white);
+    --color-background-selectable: var(--color-opac-w-3);
+    --color-background-selectable-hover: var(--color-opac-w-4);
+    --color-background-selectable-overlay: var(--color-opac-w-3);
+    --color-background-selectable-overlay-hover: var(--color-opac-w-4);
+    --color-background-tag-default: var(--color-opac-w-3);
+    --color-background-tag-hover: var(--color-background-interactable-hover);
+    --color-background-tag-active: var(--color-background-interactable-active);
+    --color-background-toggle: var(--color-transparent);
+    --color-background-toggle-handle: var(--color-white);
+    --color-background-toggle-handle-checked: var(--color-twitch-purple-10);
+    --color-background-toggle-handle-overlay: var(--color-white);
+    --color-background-toggle-hover: var(--color-opac-w-5);
+    --color-background-toggle-focus: var(--color-opac-w-5);
+    --color-background-toggle-checked: var(--color-black);
+    --color-background-toggle-overlay: var(--color-opac-b-4);
+    --color-background-toggle-overlay-checked: var(--color-black);
+    --color-background-tooltip: var(--color-white);
+    --color-background-overlay: var(--color-opac-b-9);
+    --color-background-progress: var(--color-opac-w-4);
+    --color-background-progress-status: var(--color-border-brand);
+    --color-background-progress-status-error: var(--color-border-error);
+    --color-background-progress-status-caution: var(--color-border-warn);
+    --color-background-progress-status-success: var(--color-border-success);
+    --color-background-progress-overlay-status: var(--color-opac-w-12);
+    --color-background-progress-overlay-mask: var(--color-opac-b-7);
+    --color-background-progress-countdown: none;
+    --color-background-progress-countdown-status: var(--color-twitch-purple-9);
+    --color-background-pill: var(--color-hinted-grey-7);
+    --color-background-pill-new: var(--color-magenta-11);
+    --color-background-pill-subtle: var(--color-hinted-grey-10);
+    --color-background-pill-notification: var(--color-red);
+    --color-background-range: var(--color-opac-w-4);
+    --color-background-range-fill: var(--color-border-brand);
+    --color-background-range-overlay: var(--color-opac-w-6);
+    --color-background-range-overlay-fill: var(--color-white);
+    --color-background-social-column: var(--color-hinted-grey-2);
+    --color-background-top-nav: var(--color-twitch-purple-6);
+    --color-background-chat: var(--color-twitch-purple-1);
+    --color-background-chat-alt: var(--color-twitch-purple-3);
+    --color-background-chat-header: var(--color-twitch-purple-2);
+    --color-background-chat-line-mentioning: var(--color-hinted-grey-5);
+    --color-background-chat-line-mentioned: var(--color-hinted-grey-15);
+    --color-background-modal-overlay: var(--color-opac-b-13);
+    --color-background-modal: var(--color-twitch-purple-3);
+    --color-background-graph: var(--color-twitch-purple-2);
+    --color-background-graph-fill: var(--color-twitch-purple-8);
+    --color-background-scrollbar: var(--color-opac-w-8);
+    --color-background-hover: var(--color-opac-w-3);
+    --color-text-base: var(--color-hinted-grey-14);
+    --color-text-alt: var(--color-hinted-grey-12);
+    --color-text-alt-2: var(--color-hinted-grey-9);
+    --color-text-link: var(--color-twitch-purple-11);
+    --color-text-link-hover: var(--color-twitch-purple-10);
+    --color-text-link-active: var(--color-twitch-purple-11);
+    --color-text-link-focus: var(--color-twitch-purple-10);
+    --color-text-link-visited: var(--color-twitch-purple-11);
+    --color-text-live: var(--color-text-accessible-red);
+    --color-text-alert: var(--color-text-accessible-red);
+    --color-text-prime: var(--color-prime-blue);
+    --color-text-error: var(--color-red-11);
+    --color-text-warn: var(--color-orange-11);
+    --color-text-success: var(--color-green-11);
+    --color-text-info: var(--color-blue-11);
+    --color-text-brand: var(--color-twitch-purple-11);
+    --color-text-overlay-error: var(--color-red-11);
+    --color-text-overlay-warn: var(--color-orange-11);
+    --color-text-overlay-success: var(--color-green-11);
+    --color-text-overlay-info: var(--color-blue-11);
+    --color-text-overlay-brand: var(--color-white);
+    --color-text-accessible-red: var(--color-red-11);
+    --color-text-accessible-green: var(--color-green-11);
+    --color-text-accessible-blue: var(--color-blue-11);
+    --color-text-tab: var(--color-text-base);
+    --color-text-tab-active: var(--color-twitch-purple-11);
+    --color-text-badge-alt: var(--color-black);
+    --color-text-badge-alt-2: var(--color-black);
+    --color-text-button-primary: var(--color-white);
+    --color-text-button-secondary: var(--color-text-base);
+    --color-text-button-text: var(--color-text-brand);
+    --color-text-button-text-hover: var(--color-text-base);
+    --color-text-button-destructive: var(--color-text-button-error);
+    --color-text-button-error: var(--color-black);
+    --color-text-button-warn: var(--color-black);
+    --color-text-button-success: var(--color-black);
+    --color-text-button-info: var(--color-black);
+    --color-text-button-brand: var(--color-white);
+    --color-text-button-overlay-primary: var(--color-black);
+    --color-text-button-overlay-secondary: var(--color-white);
+    --color-text-button-overlay-text: var(--color-white);
+    --color-text-button-overlay-error: var(--color-black);
+    --color-text-button-overlay-warn: var(--color-black);
+    --color-text-button-overlay-success: var(--color-black);
+    --color-text-button-overlay-info: var(--color-black);
+    --color-text-button-overlay-brand: var(--color-black);
+    --color-text-button-disabled: var(--color-opac-w-8);
+    --color-text-interactable-selected: var(--color-text-overlay);
+    --color-text-interactable-overlay-selected: var(--color-black);
+    --color-text-input: var(--color-text-base);
+    --color-text-input-placeholder: var(--color-opac-w-10);
+    --color-text-input-placeholder-overlay: var(--color-opac-w-10);
+    --color-text-input-checked-icon: var(--color-white);
+    --color-text-label: var(--color-hinted-grey-15);
+    --color-text-label-optional: var(--color-hinted-grey-8);
+    --color-text-hint: var(--color-hinted-grey-8);
+    --color-text-tag: var(--color-opac-w-10);
+    --color-text-toggle-checked-icon: var(--color-border-brand);
+    --color-text-toggle-checked-icon-overlay: var(--color-white);
+    --color-text-tooltip: var(--color-twitch-purple-1);
+    --color-text-overlay: var(--color-white);
+    --color-text-overlay-alt: var(--color-opac-w-13);
+    --color-text-overlay-link: var(--color-white);
+    --color-text-overlay-link-hover: var(--color-opac-w-12);
+    --color-text-overlay-link-active: var(--color-white);
+    --color-text-overlay-link-focus: var(--color-opac-w-12);
+    --color-text-overlay-link-visited: var(--color-white);
+    --color-text-pill: var(--color-black);
+    --color-text-chat-line-mentioning: var(--color-white);
+    --color-text-chat-line-mentioned: var(--color-hinted-grey-2);
+    --color-text-channel-status-text-indicator-hosting: var(--color-black);
+    --color-text-channel-status-text-indicator-rerun: var(--color-black);
+    --color-text-channel-status-text-indicator-offline: var(--color-black);
+    --color-text-channel-status-text-indicator-hosting-overlay: var(--color-black);
+    --color-text-channel-status-text-indicator-rerun-overlay: var(--color-black);
+    --color-text-channel-status-text-indicator-offline-overlay: var(--color-black);
+    --color-text-ribbon: var(--color-white);
+    --color-border-base: var(--color-opac-w-2);
+    --color-border-region: var(--color-black);
+    --color-border-overlay: var(--color-opac-w-5);
+    --color-border-alert: var(--color-red);
+    --color-border-error: var(--color-red-10);
+    --color-border-warn: var(--color-orange-12);
+    --color-border-success: var(--color-green-12);
+    --color-border-info: var(--color-blue-10);
+    --color-border-brand: var(--color-twitch-purple-10);
+    --color-border-error-decorative: var(--color-red-10);
+    --color-border-warn-decorative: var(--color-orange-12);
+    --color-border-success-decorative: var(--color-green-12);
+    --color-border-info-decorative: var(--color-blue-10);
+    --color-border-brand-decorative: var(--color-twitch-purple-10);
+    --color-border-overlay-error: var(--color-red-10);
+    --color-border-overlay-warn: var(--color-orange-12);
+    --color-border-overlay-success: var(--color-green-12);
+    --color-border-overlay-info: var(--color-blue-10);
+    --color-border-overlay-brand: var(--color-white);
+    --color-border-overlay-error-decorative: var(--color-red-10);
+    --color-border-overlay-warn-decorative: var(--color-orange-12);
+    --color-border-overlay-success-decorative: var(--color-green-12);
+    --color-border-overlay-info-decorative: var(--color-blue-10);
+    --color-border-overlay-brand-decorative: var(--color-twitch-purple-10);
+    --color-border-balloon-overlay: var(--color-opac-w-4);
+    --color-border-tab: var(--color-border-base);
+    --color-border-tab-hover: var(--color-twitch-purple-11);
+    --color-border-tab-focus: var(--color-twitch-purple-11);
+    --color-border-tab-active: var(--color-border-brand);
+    --color-border-image-selector: var(--color-opac-b-6);
+    --color-border-image-selector-overlay: var(--color-opac-w-6);
+    --color-border-image-selector-overlay-selected: var(--color-white);
+    --color-border-input: var(--color-opac-w-4);
+    --color-border-input-hover: var(--color-opac-w-6);
+    --color-border-input-focus: var(--color-border-brand);
+    --color-border-input-error: var(--color-border-error);
+    --color-border-input-overlay: var(--color-opac-w-6);
+    --color-border-input-overlay-hover: var(--color-opac-w-8);
+    --color-border-input-overlay-focus: var(--color-white);
+    --color-border-input-checkbox: var(--color-opac-w-10);
+    --color-border-input-checkbox-hover: var(--color-white);
+    --color-border-input-checkbox-focus: var(--color-border-brand);
+    --color-border-input-checkbox-checked: var(--color-border-brand);
+    --color-border-input-checkbox-error: var(--color-border-error);
+    --color-border-input-checkbox-overlay: var(--color-opac-w-10);
+    --color-border-input-checkbox-hover-overlay: var(--color-white);
+    --color-border-input-checkbox-checked-overlay: var(--color-white);
+    --color-border-input-checkbox-overlay-focus: var(--color-white);
+    --color-border-range-handle: var(--color-border-brand);
+    --color-border-range-handle-focus: var(--color-white);
+    --color-border-tag: var(--color-opac-w-3);
+    --color-border-toggle: var(--color-opac-w-10);
+    --color-border-toggle-hover: var(--color-white);
+    --color-border-toggle-focus: var(--color-border-brand);
+    --color-border-toggle-checked: var(--color-border-brand);
+    --color-border-toggle-overlay: var(--color-opac-w-10);
+    --color-border-toggle-overlay-hover: var(--color-white);
+    --color-border-toggle-overlay-focus: var(--color-white);
+    --color-border-toggle-overlay-checked: var(--color-white);
+    --color-border-whisper-incoming: var(--color-twitch-purple-10);
+    --color-border-whisper-outgoing: var(--color-hinted-grey-9);
+    --color-border-selectable: var(--color-opac-w-3);
+    --color-border-selectable-hover: var(--color-opac-w-4);
+    --color-border-selectable-hover-selected: var(--color-white);
+    --color-border-selectable-selected-outer: var(--color-white);
+    --color-border-selectable-selected-inner: var(--color-black);
+    --color-border-selectable-overlay: var(--color-opac-w-3);
+    --color-border-selectable-overlay-hover: var(--color-opac-w-4);
+    --color-border-selectable-overlay-selected: var(--color-white);
+    --color-border-selectable-overlay-selected-inner: var(--color-black);
+    --color-border-spinner: var(--color-opac-w-3);
+    --color-border-spinner-fill: var(--color-hinted-grey-12);
+    --color-border-quote: var(--color-hinted-grey-9);
+    --color-data-series-a-base: var(--color-twitch-purple-12);
+    --color-data-series-a-alt: var(--color-twitch-purple-11);
+    --color-data-series-a-alt-2: var(--color-twitch-purple-10);
+    --color-data-series-a-alt-3: var(--color-twitch-purple-9);
+    --color-data-series-a-alt-4: var(--color-twitch-purple-8);
+    --color-data-series-b-base: var(--color-magenta-12);
+    --color-data-series-b-alt: var(--color-magenta-11);
+    --color-data-series-b-alt-2: var(--color-magenta-10);
+    --color-data-series-b-alt-3: var(--color-magenta-9);
+    --color-data-series-b-alt-4: var(--color-magenta-8);
+    --color-data-series-c-base: var(--color-blue-12);
+    --color-data-series-c-alt: var(--color-blue-11);
+    --color-data-series-c-alt-2: var(--color-blue-10);
+    --color-data-series-c-alt-3: var(--color-blue-9);
+    --color-data-series-c-alt-4: var(--color-blue-8);
+    --color-data-series-d-base: var(--color-cyan-12);
+    --color-data-series-d-alt: var(--color-cyan-11);
+    --color-data-series-d-alt-2: var(--color-cyan-10);
+    --color-data-series-d-alt-3: var(--color-cyan-9);
+    --color-data-series-d-alt-4: var(--color-cyan-8);
+    --color-data-series-e-base: var(--color-orange-12);
+    --color-data-series-e-alt: var(--color-orange-11);
+    --color-data-series-e-alt-2: var(--color-orange-10);
+    --color-data-series-e-alt-3: var(--color-orange-9);
+    --color-data-series-e-alt-4: var(--color-orange-8);
+    --color-data-text-title: var(--color-text-base);
+    --color-data-text-subtitle: var(--color-text-alt-2);
+    --color-data-background-chart: var(--color-background-base);
+    --color-data-axis: var(--color-text-alt-2);
+    --color-data-grid: var(--color-border-base);
+    --color-data-background-gauge: var(--color-background-alt);
+    --color-data-indicator-positive: var(--color-cyan-11);
+    --color-data-indicator-negative: var(--color-red-11);
+    --color-icon-input-checked: var(--color-white);
+    --color-icon-input-radio-checked: var(--color-white);
+    --color-fill-base: var(--color-text-base);
+    --color-fill-current: currentColor;
+    --color-fill-alt: var(--color-text-alt);
+    --color-fill-alt-2: var(--color-text-alt-2);
+    --color-fill-offline: var(--color-hinted-grey-9);
+    --color-fill-hosting: var(--color-orange-13);
+    --color-fill-live: var(--color-red-9);
+    --color-fill-recording: var(--color-red-9);
+    --color-fill-alert: var(--color-error);
+    --color-fill-error: var(--color-red-10);
+    --color-fill-warn: var(--color-orange-12);
+    --color-fill-success: var(--color-green-13);
+    --color-fill-info: var(--color-blue-10);
+    --color-fill-brand: var(--color-twitch-purple-10);
+    --color-fill-error-overlay: var(--color-red-10);
+    --color-fill-warn-overlay: var(--color-orange-12);
+    --color-fill-success-overlay: var(--color-green-13);
+    --color-fill-info-overlay: var(--color-blue-10);
+    --color-fill-brand-overlay: var(--color-twitch-purple-10);
+    --color-fill-prime: var(--color-prime-blue);
+    --color-fill-drops: var(--color-green);
+    --color-fill-crate: var(--color-green);
+    --color-fill-range-notch: var(--color-hinted-grey-7);
+    --color-fill-button-icon: var(--color-text-base);
+    --color-fill-button-icon-hover: var(--color-text-base);
+    --color-fill-button-icon-focus: var(--color-text-base);
+    --color-fill-button-icon-active: var(--color-text-base);
+    --color-fill-channel-status-text-indicator-hosting: var(--color-opac-w-10);
+    --color-fill-channel-status-text-indicator-rerun: var(--color-opac-w-10);
+    --color-fill-channel-status-text-indicator-offline: var(--color-white);
+    --color-fill-channel-status-text-indicator-hosting-overlay: var(--color-opac-w-10);
+    --color-fill-channel-status-text-indicator-rerun-overlay: var(--color-opac-w-10);
+    --color-fill-channel-status-text-indicator-offline-overlay: var(--color-white);
+    --color-fill-new-item-indicator: var(--color-magenta-11);
+    --color-fill-presence-offline: var(--color-hinted-grey-9);
+    --color-fill-presence-invisible: var(--color-hinted-grey-9);
+    --color-fill-presence-online: var(--color-green-13);
+    --color-fill-presence-away: var(--color-orange-12);
+    --color-fill-presence-busy: var(--color-red-10);
+    --color-fill-presence-idle: var(--color-orange-12);
+    --color-fill-ribbon: var(--color-red-9);
+    --color-social-twitter: var(--color-twitter);
+    --color-social-facebook: var(--color-facebook);
+    --color-social-reddit: var(--color-reddit);
+    --color-social-snapchat: var(--color-snapchat);
+    --color-social-instagram: var(--color-instagram);
+    --color-social-youtube: var(--color-youtube);
+    --color-social-paypal: var(--color-paypal);
+    --color-social-vk: var(--color-vk);
+    --shadow-elevation-umbra: 0.34;
+    --shadow-elevation-penumbra: 0.26;
+    --shadow-elevation-ambient: 0.28;
+    --shadow-elevation-1: 0 1px 2px var(--color-opac-b-14),0 0px 2px var(--color-opac-b-14);
+    --shadow-elevation-2: 0 4px 8px var(--color-opac-b-7),0 0px 4px var(--color-opac-b-7);
+    --shadow-elevation-3: 0 6px 16px var(--color-opac-b-8),0 0px 4px var(--color-opac-b-7);
+    --shadow-elevation-4: 0 12px 32px var(--color-opac-b-8),0 0px 8px var(--color-opac-b-7);
+    --shadow-elevation-5: 0 32px 64px var(--color-opac-b-9),0 0px 16px var(--color-opac-b-7);
+    --shadow-button-focus: 0 0 6px 0 var(--color-twitch-purple-8);
+    --shadow-button-active: 0 0 6px 0 var(--color-twitch-purple-8);
+    --shadow-button-disabled: none;
+    --shadow-button-overlay-focus: 0 0 6px 0 var(--color-opac-w-6);
+    --shadow-button-overlay-active: 0 0 6px 0 var(--color-opac-w-6);
+    --shadow-tab-focus: 0 4px 6px -4px var(--color-twitch-purple-11);
+    --shadow-balloon: 0 1px 1px var(--color-opac-b-5);
+    --shadow-scrollbar: 0 0 1px 1px var(--color-opac-w-5);
+}