diff --git a/src/app/@site-modules/@common-read/ui/common-read/common-read.component.html b/src/app/@site-modules/@common-read/ui/common-read/common-read.component.html
index bd1c10a..c1a776a 100644
--- a/src/app/@site-modules/@common-read/ui/common-read/common-read.component.html
+++ b/src/app/@site-modules/@common-read/ui/common-read/common-read.component.html
@@ -16,8 +16,8 @@
         <h1>🤨</h1>
         <p>{{ error }}</p>
         <footer>
-            <a class="button mediun" [routerLink]="'/'">🏠</a>
-            <button autofocus class="button large primary" (click)="onRefreshData()">{{lang.ph().tryAgain}}</button>
+            <a class="button mediun border" [routerLink]="'/'">🏠</a>
+            <button autofocus class="button border large primary" (click)="onRefreshData()">{{lang.ph().tryAgain}}</button>
         </footer>
     </div>
 </div>
diff --git a/src/app/@site-modules/@common-read/ui/common-read/common-read.component.scss b/src/app/@site-modules/@common-read/ui/common-read/common-read.component.scss
index 843eb73..73bf5c1 100644
--- a/src/app/@site-modules/@common-read/ui/common-read/common-read.component.scss
+++ b/src/app/@site-modules/@common-read/ui/common-read/common-read.component.scss
@@ -1,30 +1,44 @@
 :host {
     display: grid;
     min-height: 100dvh;
+    --c: oklch(0.553 0.2211 20.3);
 }
 
 :host:has(.error-message) {
-    background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, rgba(207, 19, 82, .1) 100%);
+    background: oklch(from var(--c) l c h / .1);
 }
 
 .error-message {
+    
+    --shadow-color: oklch(from var(--c) var(--avarage-l-2) c h);
+    --shadow-2: 2px 2px var(--surface), var(--shadow-distance-2) var(--shadow-color);
+    
     display: grid;
     place-items: center;
     gap: 2ch;
     min-width: min(50vw, 50vh);
     margin: auto;
-    // aspect-ratio: 3/4;
     border-radius: 1ch;
     margin-inline: auto;
     padding: 2rem;
     text-wrap: balance;
     text-align: center;
-    border: 1px solid;
-    border-color: rgba(207, 19, 82, .4);
-    background-color: rgba(207, 19, 82, .05);
+    border: var(--border-size) solid;
+    border-color: var(--c);
+
+    --gl: radial-gradient(circle 1px at 0px 0px, var(--c) 1px, transparent 0);
+    --bg-1: var(--gl) 0px 0px / 8px 8px;
+    background: var(--bg-1);
+    box-shadow: var(--shadow-2);
+
+    h1 {
+        font-size: clamp(5.5rem, 4vw, 5rem);
+        line-height: 1;
+    }
 
     p {
         margin: 0;
+        font-family: 'Courier New', Courier, monospace;
         font-size: clamp(1rem, 1.5vw, 2rem);
     }
 
diff --git a/src/app/@site-modules/reddit/reddit-shell.component.ts b/src/app/@site-modules/reddit/reddit-shell.component.ts
index 4d0514d..8b94f4d 100644
--- a/src/app/@site-modules/reddit/reddit-shell.component.ts
+++ b/src/app/@site-modules/reddit/reddit-shell.component.ts
@@ -9,7 +9,9 @@ import { REDDIT_PATH } from '../../app-routing.module';
   imports: [CommonReadModule],
   selector: 'app-reddit-shell',
   template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()" [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()" >
-
+ <a ngProjectAs="source-logo" href="https://reddit.com" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 1ch; ">
+          <img style="max-width: 40px;" src="/assets/logos/reddit-logo.svg" alt="MangaDex logo">
+      </a>
 <p>{{lang.ph().imagesVia}}<a href="https://reddit.com" target="_blank" rel="noopener noreferrer">Reddit</a>
           API.
           {{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>
diff --git a/src/app/link-parser/link-parser/link-parser.component.scss b/src/app/link-parser/link-parser/link-parser.component.scss
index 1307f29..44bab4c 100644
--- a/src/app/link-parser/link-parser/link-parser.component.scss
+++ b/src/app/link-parser/link-parser/link-parser.component.scss
@@ -35,7 +35,7 @@
     }
 
     @media (prefers-color-scheme: light) {
-        background: #eceff2;
+        background: var(--surface-avarage);
 
         &.pride {
             --pride-red: oklch(from #e40303 0.96 0.0128 h);
diff --git a/src/app/link-parser/ui/parser-form/parser-form.component.scss b/src/app/link-parser/ui/parser-form/parser-form.component.scss
index 6cd35b2..1681b9b 100644
--- a/src/app/link-parser/ui/parser-form/parser-form.component.scss
+++ b/src/app/link-parser/ui/parser-form/parser-form.component.scss
@@ -10,30 +10,22 @@
 }
 
 app-text-embracer {
-    --mono-color-1: #4c93c8;
-    --mono-color-2: #002741;
-    --border-color: var(--mono-color-1);
-    --border-width: 2px;
-    color: #ffd60a;
-    --shc: #166496;
+    --border-width: calc(var(--border-size));
+    --frame-color: var(--border-color);
+    --dot-color: var(--border-color);
+    color: var(--accent);
+
     font-family: 'Troubleside', sans-serif;
     font-weight: 900;
     font-size: clamp(1rem, 8vw, 5rem);
     justify-content: center;
-    -webkit-text-stroke: var(--mono-color-2) var(--border-width);
-    --dot-color: var(--mono-color-1);
-    paint-order: stroke fill;
-
-    @media (prefers-color-scheme: light) {
-        --mono-color-1: #166496;
-        --mono-color-2: #eceff2;
-        --shc: var(--mono-color-1);
-        color: var(--mono-color-1);
-        -webkit-text-stroke: var(--mono-color-1) var(--border-width);
 
-        color: var(--mono-color-2);
+    ::ng-deep>span {
+        box-shadow: var(--shadow-1);
     }
 
+    @media (prefers-color-scheme: light) {}
+
     @media (max-width: 1080px) {
         font-size: clamp(1rem, 7vw, 8rem);
     }
@@ -167,7 +159,7 @@ app-file-change ::ng-deep .button {
     // background: unset;
 
     text-overflow: ellipsis;
-max-width: 90vw;
+    max-width: 90vw;
     overflow: hidden;
     white-space: nowrap;
 }
@@ -183,10 +175,10 @@ textarea {
     width: 100%;
     transition: all var(--t) cubic-bezier(0.075, 0.82, 0.165, 1);
     border-radius: .5ch;
-    border: 2px solid #166496;
-    box-shadow: var(--flat-shadow-medium);
-    border: 0;
-    // background-color: #16649680;
+    border: var(--border-size) solid var(--border-color);
+    box-shadow: var(--shadow-1);
+    // border: 0;
+    background-color: #16649680;
     color: #ffd60a;
 
     @media (prefers-color-scheme: light) {
@@ -202,12 +194,8 @@ textarea {
 }
 
 input[type=url]::placeholder {
-    color: #ffd60a;
+    color: var(--accent);
     opacity: 0.6;
-
-    @media (prefers-color-scheme: light) {
-        color: #166496;
-    }
 }
 
 .favicon {
@@ -259,21 +247,17 @@ input[type=url]::placeholder {
     display: flex;
     gap: 1ch;
     align-items: center;
-    --dot-color: #166496;
-    border: 1px solid var(--dot-color);
+    --dot-color: var(--border-color);
+    border: var(--border-size) solid var(--dot-color);
     --stroke: #002741;
-    --bg-1: var(--gl) 0px 0px / 4px 4px;
-    --bg-2: var(--gl) 0px 0px / 3px 3px, var(--gl) 1.5px 1.5px / 3px 3px;
     --gl: radial-gradient(circle 1px at 0px 0px, var(--dot-color) 1px, transparent 0);
+    --bg-1: var(--gl) 0px 0px / 8px 8px;
+    --bg-2: var(--gl) 0px 0px / 4px 4px, var(--gl) 1.5px 1.5px / 4px 4px;
     background: var(--bg-1);
 
     text-transform: uppercase;
     font-weight: bold;
-    // -webkit-text-stroke: 0.5ch var(--stroke);
-    // paint-order: stroke fill;
-
-    box-shadow: var(--flat-shadow-high);
-
+    box-shadow: var(--shadow-2);
 
     @media (prefers-color-scheme: light) {
         --dot-color: #166496;
@@ -283,8 +267,11 @@ input[type=url]::placeholder {
 
     &:hover,
     &:focus {
-        --dot-color: #4c93c8;
         background: var(--bg-2);
+        color: var(--accent);
+    }
 
+    &:active {
+        box-shadow: 0 0 transparent;
     }
 }
\ No newline at end of file
diff --git a/src/app/list/list-shell/list-shell.component.html b/src/app/list/list-shell/list-shell.component.html
index 20b6ef1..a462dca 100644
--- a/src/app/list/list-shell/list-shell.component.html
+++ b/src/app/list/list-shell/list-shell.component.html
@@ -1,7 +1,7 @@
 <main style="padding-top: 2rem;">
     <section>
         <h4>Вставте підтримувані посилання у поле нижче 🔗⬇️</h4>
-        <textarea class="input" style="width: 100%; height: 8lh; box-shadow: var(--flat-shadow-medium);"
+        <textarea class="input" style="width: 100%; height: 8lh; box-shadow: var(--shadow-1)"
             placeholder="Вставте сюди підтримувані посилання на епізод через кому пробіл, чи кожне посилання з нового рядка: 
 
 https://telegra.ph/YAk-kozaki-kulіsh-varili-06-28
@@ -14,7 +14,7 @@ <h4>Відредагуйте назви (за бажанням) ✏️🔢📝</
         <div style="display: grid; gap: 1ch">
             @for (item of outputValue(); track $index) {
             <article
-                style="box-shadow: var(--flat-shadow-medium); border: 1px solid #8884; padding: .5ch; border-radius: .5ch;">
+                style="box-shadow: var(--shadow-1); border: 1px solid #8884; padding: .5ch; border-radius: .5ch;">
                 <div class="input-group">
                     <input style="width: 100%;" placeholder="Введіть назву епізоду (не обов'язково)" type="text"
                         [(ngModel)]="item.title"> <button class="button"
diff --git a/src/app/list/list-shell/list-shell.component.scss b/src/app/list/list-shell/list-shell.component.scss
index 52db046..3fabf03 100644
--- a/src/app/list/list-shell/list-shell.component.scss
+++ b/src/app/list/list-shell/list-shell.component.scss
@@ -10,7 +10,7 @@ main {
 }
 
 .input-group {
-    box-shadow: var(--flat-shadow-medium);
+    box-shadow: var(--shadow-1);
 }
 
 textarea {
diff --git a/src/app/page-not-found.component.ts b/src/app/page-not-found.component.ts
index c831d04..84e3b9b 100644
--- a/src/app/page-not-found.component.ts
+++ b/src/app/page-not-found.component.ts
@@ -21,7 +21,6 @@ import { isPlatformBrowser } from '@angular/common';
     --border-color: var(--mono-color-1);
     --border-width: 2px;
     color: #ffd60a;
-    --shc: #166496;
     font-family: 'Troubleside', sans-serif;
     font-weight: 900;
     font-size: clamp(1rem, 16vw, 10rem);
@@ -33,7 +32,6 @@ import { isPlatformBrowser } from '@angular/common';
     @media (prefers-color-scheme: light) {
         --mono-color-1: #166496;
         --mono-color-2: #eceff2;
-        --shc: var(--mono-color-1);
         color: var(--mono-color-1);
         -webkit-text-stroke: var(--mono-color-1) var(--border-width);
 
diff --git a/src/app/shared/directives/img-meta.directive.ts b/src/app/shared/directives/img-meta.directive.ts
new file mode 100644
index 0000000..b5cb622
--- /dev/null
+++ b/src/app/shared/directives/img-meta.directive.ts
@@ -0,0 +1,22 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[imgMeta]',
+  standalone: false
+})
+export class ImgMetaDirective {
+
+  constructor(private el: ElementRef<HTMLImageElement>) { }
+
+  @Input('imgMeta') set meta(value: { src: string; alt: string } | null) {
+    if (!value) return;
+
+    if (value.src) {
+      this.el.nativeElement.src = value.src;
+    }
+    if (value.alt) {
+      this.el.nativeElement.alt = value.alt;
+    }
+  }
+
+}
diff --git a/src/app/shared/directives/new-tab.directive.ts b/src/app/shared/directives/new-tab.directive.ts
new file mode 100644
index 0000000..348ba99
--- /dev/null
+++ b/src/app/shared/directives/new-tab.directive.ts
@@ -0,0 +1,21 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[newTab]',
+  standalone: false
+})
+export class NewTabDirective {
+
+  @Input('newTab') href!: string;
+
+  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) {}
+
+  ngOnChanges(): void {
+    if (!this.href) return;
+
+    this.renderer.setAttribute(this.el.nativeElement, 'href', this.href);
+    this.renderer.setAttribute(this.el.nativeElement, 'target', '_blank');
+    this.renderer.setAttribute(this.el.nativeElement, 'rel', 'noopener noreferrer');
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 3d54611..7a1bf7c 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -27,6 +27,9 @@ import { ChytankaLogoWithTagsComponent } from './ui/chytanka-logo-with-tags/chyt
 import { FileSizePipe } from './pipes/filesize.pipe';
 import { RoughPaperComponent } from './ui/filters/rough-paper/rough-paper.component';
 import { SharpenComponent } from './ui/filters/sharpen/sharpen.component';
+import { ThanksPageComponent } from './ui/viewer/components/thanks-page/thanks-page.component';
+import { ImgMetaDirective } from './directives/img-meta.directive';
+import { NewTabDirective } from './directives/new-tab.directive';
 
 
 
@@ -54,7 +57,10 @@ import { SharpenComponent } from './ui/filters/sharpen/sharpen.component';
     MangaPageEvenComponent,
     FileChangeComponent,
     ChytankaLogoWithTagsComponent,
-    FileSizePipe
+    FileSizePipe,
+    ThanksPageComponent,
+    ImgMetaDirective,
+    NewTabDirective
   ],
   imports: [
     CommonModule,
diff --git a/src/app/shared/ui/@styles/details.scss b/src/app/shared/ui/@styles/details.scss
index e05ed05..df9cb7d 100644
--- a/src/app/shared/ui/@styles/details.scss
+++ b/src/app/shared/ui/@styles/details.scss
@@ -3,7 +3,7 @@ details {
     border-radius: .5ch;
     // border: 2px solid rgb(0, 40, 64);
     transition: all var(--t) ease-in-out;
-    box-shadow: var(--flat-shadow-medium);
+    box-shadow: var(--shadow-1);
 
     summary {
         cursor: pointer;
@@ -20,12 +20,12 @@ details {
         }
 
         & {
-            box-shadow: var(--flat-shadow-medium);
+            box-shadow: var(--shadow-1);
         }
 
         summary {
             color: #caa902;
-            border-bottom: 2px solid var(--shc);
+            border-bottom: var(--border-size) solid var(--border-color);
             padding-bottom: 1ch;
 
             @media (prefers-color-scheme: light) {
diff --git a/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.html b/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.html
index f047f7f..88653d0 100644
--- a/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.html
+++ b/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.html
@@ -1,38 +1,36 @@
-@for (tag of siteTags(); track $index) {
-@let c = getRandomCoordinates();
-@let s = getRandom(0.8, 1.28);
-<li class="tag" [style]="{scale: s}" [ngStyle]="{top: c.y+'%',left: c.x+'%'}"
-  [ngClass]="formatTagname(tag)">{{formatTagname(tag)}}</li>
-}
-@for (tag of fileTags(); track $index) {
-@let c = getRandomCoordinates();
-@let s = getRandom(0.8, 1.28);
-<li class="tag" [ngStyle]="{top: c.y+'%',left: c.x+'%', scale: s}"
-  [ngClass]="formatTagname(tag)">{{formatTagname(tag)}}</li>
-}
-<svg class="filters" xmlns="http://www.w3.org/2000/svg">
-  <filter id="oneBit">
-    <feFlood flood-color="#f00" x="2" y="2" width="2" height="2" result="f1" />
-    <feFlood flood-color="#f00" x="0" y="0" width="2" height="2" result="f2" />
-
-    <feMerge>
-      <feMergeNode in="f1" />
-      <feMergeNode in="f2" />
-    </feMerge>
-
-    <feComposite operator="over" x="0" y="0" width="4" height="4" />
-    <feTile x="0" y="0" width="1000" height="1000" result="tile" />
-    <feComposite in="SourceGraphic" in2="tile" operator="in" />
-  </filter>
-</svg>
-
-<svg id='logoPath' class="one-bit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
- 
-  <path d="M239.499 298.933c.518-1.403 2.239 1.681 5.352 1.725 3.112.045 7.164-2.366 10.663-2.468 3.499-.102 7.821 2.016 10.673 1.791 2.853-.225 4.533-3.038 5.169-1.867.635 1.171-2.762 3.128-5.396 3.135-2.634.007-6.804-2.889-10.397-2.773-3.594.116-8.078 3.438-11.009 3.352-2.93-.086-5.574-1.49-5.055-2.895ZM196.559 218.471c-11.034 1.443-19.764 6.028-22.795 11.971-3.504 6.871-.795 28.34 4.741 37.58 6.163 10.285 20.765 15.934 34.019 13.161 10.455-2.187 21.15-9.054 24.583-15.784 1.751-3.43 3.429-11.45 3.429-16.384 0-2.807.314-3.329 2.347-3.897 3.032-.848 22.966-.844 26.026.005 2.181.605 2.347.97 2.347 5.15 0 6.036 2.147 13.957 4.841 17.858 2.771 4.012 9.612 8.592 17.102 11.445 10.86 4.137 23.86 2.492 33.28-4.212 6.01-4.28 9.66-11.257 11.84-22.657 4.36-22.728-1.75-31.187-24.78-34.336-14.22-1.944-30.6 1.795-36.7 8.374-2.206 2.38-4.145 7.405-5.14 13.322-.485 2.882-.781 3.218-2.418 2.737-3.642-1.069-18.156-1.475-23.198-.647-5.813.953-5.958.853-6.708-4.622-1.512-11.028-9.096-16.853-24.785-19.035-7.317-1.017-10.429-1.022-18.031-.029m20.51 2.964c7.159 1.515 14.717 5.158 16.792 8.093 3.874 5.481 5.255 20.01 2.799 29.441-1.613 6.192-4.307 9.85-10.065 13.67-14.398 9.546-31.533 8.882-42.045-1.63-5.131-5.13-7.423-10.563-9.403-22.283-2.406-14.242.691-21.165 11.232-25.109 9.354-3.5 20.662-4.304 30.69-2.182m99.55-.085c10.67 2.06 16.62 5.286 19 10.3 2.82 5.95.72 24.905-3.73 33.631-3.61 7.078-12.77 12.776-22.71 14.123-9 1.222-22.8-3.997-29.349-11.103-4.844-5.256-6.332-11.014-5.812-22.494.466-10.28 2.038-15.139 5.968-18.447 7.233-6.088 22.913-8.659 36.633-6.01"/>
-
-  <path d="M260.274 447.088c-1.797.933-5.414.977-7.233.087l-89.95-43.987c-.886-.433-1.95-1.836-2.129-2.805L142.515 300.32c-.349-1.894 1.068-3.019 2.834-2.25l108.344 47.191c1.493.65 4.465.617 5.943-.067l101.877-47.124c1.663-.769 2.997.356 2.668 2.25l-17.37 100.064c-.168.97-1.171 2.372-2.005 2.805l-84.532 43.9Z" />
-  <path d="M214.485 321.631c-.692.658-1.224.932-1.983 1.85l-.017.018-39.868-17.365a29.382 29.382 0 0 1 1.673-2.41c.274-.358.761-.828 1.058-1.189-1.735.714-3.47 1.644-5.366 2.451l-28.641-12.475c-.491-.213-.956-.286-1.366-.24.017-1.253-.066-2.673-.243-4.322-.815-7.569 1.183-15.934 12.678-22.405-6.06.125-16.732 4.257-25.345-4.026-8.613-8.284-11.06-9.04-15.297-8.886 4.831-2.157 6.925-4.303 8.899-11.655 1.975-7.35 6.86-14.43 19.916-16.312-5.696-2.072-17.14-2.074-22.179-12.91-5.039-10.835-7.047-12.425-11.054-13.81 5.284-.267 8.011-1.512 12.508-7.654 4.497-6.142 11.609-10.978 24.464-8.017-4.563-3.99-15.234-8.126-16.018-20.05-.785-11.924-2.083-14.132-5.319-16.87 5.024 1.66 8.017 1.484 14.429-2.619 6.412-4.103 14.79-6.043 25.707 1.362-2.813-5.369-11.269-13.08-7.693-24.483 3.575-11.402 3.163-13.93 1.135-17.653 4.085 3.363 6.939 4.28 14.4 2.771 7.461-1.51 15.975-.292 23.48 10.557-.684-6.023-5.784-16.268 1.67-25.609 7.453-9.34 7.981-11.847 7.436-16.05 2.594 4.61 4.924 6.497 12.426 7.785 7.503 1.287 15.002 5.498 18.081 18.325 1.537-5.863.483-17.258 10.808-23.276 10.324-6.017 11.722-8.163 12.732-12.28.753 5.236 2.244 7.837 8.775 11.748 6.53 3.911 12.002 10.547 10.239 23.62 3.552-4.912 6.686-15.918 18.487-17.8 11.801-1.88 13.879-3.378 16.309-6.852-1.19 5.155-.739 8.12 3.938 14.125 4.677 6.006 7.382 14.17 1.016 25.723 5.086-3.296 11.984-12.428 23.668-9.919 11.683 2.508 14.162 1.864 17.683-.498-2.972 4.377-3.622 7.304-1.431 14.594 2.192 7.29 4.417 15.355-5.693 23.828 6.033-2.03 14.583-5.703 23.001-.175 9.989 6.56 12.533 6.855 16.669 5.924-4.352 3.008-6.016 5.502-6.606 13.091-.59 7.59-4.639 15.63-17.127 19.88 5.98.99 17.777-1.296 24.722 8.43 6.944 9.724 9.21 10.918 13.403 11.544-5.145 1.233-7.597 2.957-10.889 9.821-3.292 6.864-9.972 12.9-23.152 12.35 5.219 3.084 17.045 5.214 20.007 16.791 2.963 11.576 4.645 13.508 8.329 15.607-5.244-.709-8.153.013-13.702 5.224-5.549 5.211-13.958 8.426-26.05 3.153 3.752 4.76 14.011 11.02 12.591 22.884-1.42 11.865-.55 14.274 2.127 17.562-2.513-1.386-4.538-2.132-6.991-2.068l1.376-7.926c.341-1.965-1.043-3.13-2.768-2.334l-24.427 11.3c-2.383-1.279-4.82-3.08-7.283-5.52.629 2.05 1.95 4.567 3.146 7.433l-37.866 17.515a38.422 38.422 0 0 1-.951-1.978 24.437 24.437 0 0 0-.028 2.431l-3.347 1.55c-6.195-4.837-14.548-7.879-22.778-8.326-.239 8.627-7.308 15.548-15.994 15.548-8.688 0-15.759-6.925-15.994-15.557h-.498c-8.263-.074-16.719 3.034-23.033 8.33l-2.704-1.178c.203-.788.441-1.597.715-2.428Zm-78.841-19.6c1.484-1.497 2.564-2.835 3.275-4.382l.613 3.323c-1.398.095-2.566.491-3.888 1.06Zm201.788-11.193c8.481-12.648 4.723-22.07 1.097-27.229a94.679 94.679 0 0 0 13.066-39.256c-1.275.474-2.704.832-4.316 1.044-11.848 1.558-13.967 2.997-16.491 6.404 1.331-5.12.961-8.096-3.55-14.228-4.511-6.13-12.033-6.283-5.353-17.658-2.322 1.417-4.612 3.741-6.657 6.533-7.062 9.641-7.486 12.167-6.767 16.345-2.782-4.5-5.188-6.289-12.738-7.266-7.549-.977-15.215-4.874-18.821-17.563-1.295 5.921 1.334 19.687-8.732 26.126-10.067 6.44-15.67 6.58-16.51 10.734-.968-5.2-.992-7.93-7.678-11.567-6.687-3.638-10.812-10.212-9.591-23.347-3.346 5.054-6.023 16.181-17.736 18.548-11.713 2.367-13.728 3.948-16.012 7.52.976-5.2-1.288-5.814-6.209-11.622l-4.844-12.082s-1.449 6.985-7.676 15.097c-7.275 9.48-3.945 10.288-3.321 14.482-2.68-4.562-8.856-4.697-16.382-5.843-1.186-.18-2.287-.312-3.314-.456a94.643 94.643 0 0 0 11.391 35.387c-5.089 7.621-13.018 23.39-.622 34.15 2.034 1.765 4.4 3.432 7.038 4.998 19.252 11.425 52.964 17.428 77.621 16.767a263.809 263.809 0 0 0 16.663-.974c25.86-2.342 55.726-9.06 66.444-25.044Z"/>
-</svg>
+<div style="position: relative;">
+
+  <svg id='logoPath' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+
+    <path class="light"
+      d="m252.772 465.22-98.376-48.149a4.669 4.669 0 0 1-2.3-3.064L131.961 304.47c-.328-2.079 1.2-3.283 3.064-2.408l118.511 51.651a10.828 10.828 0 0 0 6.456 0l111.507-51.541c1.86-.876 3.283.438 2.955 2.408l-19.04 109.538a5.332 5.332 0 0 1-2.188 3.064l-92.467 48.039h-.109a9.678 9.678 0 0 1-4.056.78 8.293 8.293 0 0 1-3.822-.781Zm-14.444-143.133h-.547a39.663 39.663 0 0 0-25.168 9.083l-2.955-1.313c.128-.513.257-1.027.407-1.54a12.846 12.846 0 0 0-1.72 1.54l-43.662-19.041a19.461 19.461 0 0 1 1.86-2.626c.328-.438.875-.875 1.2-1.314-1.86.766-3.83 1.751-5.909 2.736l-31.3-13.678a2.625 2.625 0 0 0-1.532-.219 36.226 36.226 0 0 0-.219-4.705c-.875-8.316 1.313-17.4 13.9-24.512-6.675.109-18.274 4.705-27.685-4.378s-12.147-9.849-16.743-9.738c5.252-2.408 7.551-4.706 9.739-12.8s7.551-15.758 21.776-17.838c-6.237-2.3-18.712-2.3-24.293-14.116-5.471-11.818-7.66-13.569-12.147-15.1 5.8-.328 8.755-1.641 13.679-8.426s12.693-12.038 26.81-8.755c-5.033-4.377-16.633-8.864-17.509-22-.875-13.021-2.3-15.429-5.8-18.493 5.471 1.86 8.755 1.641 15.758-2.846s16.2-6.565 28.123 1.532c-3.064-5.909-12.366-14.334-8.427-26.809s3.5-15.211 1.2-19.369c4.487 3.72 7.551 4.705 15.757 3.064s17.509-.328 25.717 11.6c-.767-6.566-6.347-17.838 1.859-28.014s8.755-12.912 8.1-17.618c2.845 5.033 5.361 7.113 13.569 8.535s16.415 6.019 19.807 20.026c1.641-6.456.547-18.931 11.818-25.5s12.8-8.974 13.9-13.46c.875 5.69 2.407 8.535 9.629 12.8 7.114 4.268 13.132 11.49 11.162 25.826 3.94-5.362 7.332-17.4 20.244-19.479s15.21-3.72 17.837-7.551c-1.313 5.691-.766 8.864 4.268 15.43 5.143 6.565 8.1 15.539 1.094 28.123 5.581-3.611 13.131-13.57 25.934-10.834s15.539 2.079 19.369-.547c-3.283 4.815-3.939 7.989-1.532 15.977s4.814 16.852-6.238 26.044c6.566-2.188 15.976-6.238 25.169-.219 10.942 7.223 13.678 7.551 18.274 6.456-4.815 3.283-6.565 6.019-7.222 14.335s-5.034 17.071-18.713 21.776c6.566 1.095 19.479-1.423 27.03 9.192s10.068 11.928 14.664 12.584c-5.582 1.313-8.316 3.283-11.928 10.724s-10.943 14.116-25.387 13.46c5.69 3.392 18.6 5.691 21.885 18.384s5.034 14.773 9.083 17.071c-5.691-.766-8.973 0-14.992 5.69s-15.32 9.192-28.451 3.5c4.159 5.252 15.32 12.037 13.788 25.059s-.656 15.648 2.3 19.26a14.783 14.783 0 0 0-7.66-2.3l1.532-8.645c.327-2.188-1.095-3.392-3.064-2.517l-26.7 12.365a37.24 37.24 0 0 1-7.988-6.019c.656 2.189 2.079 5.034 3.392 8.1l-41.473 19.15c-.328-.656-.656-1.422-1.095-2.188v2.627l-3.611 1.641a45.232 45.232 0 0 0-24.949-9.082 17.451 17.451 0 0 1-17.508 16.961 17.471 17.471 0 0 1-17.506-17.062Zm-78.351-60.952c-5.581 8.316-12.038 25.607 1.532 37.315a52.884 52.884 0 0 0 7.66 5.472c21.12 12.475 58 19.04 84.916 18.384 5.69-.11 11.819-.438 18.275-1.095 28.342-2.517 60.952-9.957 72.66-27.357v.328c9.3-13.788 7.332-24.184 3.392-29.764 7.66-12.8 10.5-27.358 12.147-43.006a19.8 19.8 0 0 1-4.706 1.095c-6.365.863-10.177 1.673-12.734 2.718 4.554 5.865 5.137 14.519 2.667 27.265-2.3 12.475-6.346 20.135-12.912 24.84a39.925 39.925 0 0 1-36.44 4.6c-8.207-3.064-15.648-8.1-18.712-12.475-2.954-4.268-5.252-13.021-5.252-19.588 0-4.486-.109-4.924-2.517-5.581-3.283-.875-25.168-.875-28.451 0-2.188.656-2.517-1.094-2.517 4.268s-1.751 14.226-3.72 17.947c-3.721 7.332-15.43 14.882-26.919 17.289-14.445 2.955-30.422-3.173-37.206-14.444-6.019-10.177-8.973-33.595-5.143-41.145a14.156 14.156 0 0 1 1.485-2.341c-3.518-1.771-8.509-2.081-14.179-2.912-1.313-.218-2.517-.328-3.611-.546 1.641 13.893 3.719 27.025 10.285 38.733Zm122.343-36.329c-4.377 3.61-6.018 8.863-6.565 20.134-.547 12.584 1.094 18.822 6.346 24.622 7.114 7.769 22.214 13.46 32.063 12.146 10.834-1.422 20.9-7.66 24.84-15.429 4.815-9.52 7.114-30.312 4.05-36.768a13.025 13.025 0 0 0-2.13-3.144 12.114 12.114 0 0 0-3.123 3.144 18.529 18.529 0 0 0 .722-5.281c-3.563-2.606-8.864-4.538-16.261-5.99h.109a62.618 62.618 0 0 0-9.456-1.105 16.573 16.573 0 0 0 .263 2.418 25.584 25.584 0 0 0-1.71-2.463c-.45-.009-.9-.014-1.346-.014-11.25 0-22.028 2.836-27.802 7.73Zm-114.79 23.308c2.188 12.8 4.706 18.821 10.287 24.4 11.49 11.49 30.2 12.147 45.96 1.751 6.347-4.159 9.3-8.207 11.052-14.992 2.736-10.287 1.2-26.153-3.064-32.172-2.3-3.173-10.5-7.223-18.384-8.864a59.966 59.966 0 0 0-10.141-1.217c-4.688 1.564-6.228 3.172-7.915 5.813.487-2.533.259-4.069-.617-5.553a59.458 59.458 0 0 0-14.922 3.365c-4.07 1.512-7.125 3.45-9.255 6.013a12.918 12.918 0 0 1 .72 2.632 8.323 8.323 0 0 0-1.385-1.77c-3.309 4.632-3.933 11.161-2.339 20.594Zm102.753-6.456c1.751.546 2.079.218 2.626-2.955 1.095-6.456 3.174-11.928 5.582-14.554 5.27-5.7 17.563-9.426 30.153-9.717-2.125-1.429-4.929-2.276-9.362-2.867-8.207-1.094-16.634-5.362-20.572-19.26-1.423 6.456 1.422 21.558-9.521 28.561-11.052 7-17.18 7.222-18.056 11.709-1.094-5.691-1.094-8.645-8.426-12.694-7.332-3.939-11.819-11.161-10.5-25.5-3.611 5.581-6.566 17.727-19.37 20.244q-1.33.273-2.512.533l.1.014c17.18 2.3 25.5 8.755 27.138 20.791.767 6.019.985 6.128 7.332 5.033a62.8 62.8 0 0 1 9.528-.542c6.328.004 13.412.452 15.858 1.204Zm-95.422-28.233c-3.9 5.078-5.01 7.885-5.046 9.963 4.677-4.153 12.249-7.19 21.132-8.321l-.219.109c.745-.1 1.451-.187 2.124-.268-1.117-1.232-2.563-2.7-4.312-4.767l-5.252-13.241s-1.535 7.661-8.429 16.524Zm143.789 1.532c8.291 1.117 14.587 2.876 19.13 5.62a26.784 26.784 0 0 0-3.919-6.6c-4.925-6.675-13.131-6.893-5.91-19.369a27.905 27.905 0 0 0-7.332 7.113c-4.726 6.39-6.739 9.946-7.418 12.762 1.832.076 3.656.234 5.447.474Zm-190.843 86.667.656 3.611a10.033 10.033 0 0 0-4.268 1.2 15.865 15.865 0 0 0 3.61-4.811Zm110.194 1.314-.109.109c.547-1.532 2.407 1.86 5.909 1.86s7.879-2.626 11.71-2.736a22.407 22.407 0 0 1 5.963.99 19.977 19.977 0 0 0 5.745.98c3.173-.219 4.924-3.283 5.69-2.079.657 1.313-3.064 3.392-5.909 3.392s-7.441-3.173-11.38-3.064-8.864 3.72-12.037 3.72-6.13-1.641-5.584-3.173Zm-34.909-4.815a1.642 1.642 0 0 1 1.643-1.641 1.641 1.641 0 0 1 1.641 1.641 1.641 1.641 0 0 1-1.641 1.641 1.642 1.642 0 0 1-1.645-1.642Zm96.3.11a1.094 1.094 0 0 1 1.094-1.1 1.1 1.1 0 0 1 1.095 1.1 1.094 1.094 0 0 1-1.095 1.093 1.093 1.093 0 0 1-1.097-1.094Zm-102.754-5.8a1.641 1.641 0 0 1 1.642-1.641 1.641 1.641 0 0 1 1.641 1.641 1.641 1.641 0 0 1-1.641 1.641 1.642 1.642 0 0 1-1.645-1.642Zm108.552-.219a1.094 1.094 0 0 1 1.095-1.094 1.094 1.094 0 0 1 1.095 1.094 1.094 1.094 0 0 1-1.095 1.095 1.094 1.094 0 0 1-1.098-1.096Zm-10.176-.766a1.641 1.641 0 0 1 1.641-1.641 1.642 1.642 0 0 1 1.641 1.641 1.642 1.642 0 0 1-1.641 1.642 1.641 1.641 0 0 1-1.643-1.643Zm-87.762-.656a1.1 1.1 0 0 1 1.095-1.095 1.1 1.1 0 0 1 1.094 1.095 1.094 1.094 0 0 1-1.094 1.094 1.094 1.094 0 0 1-1.097-1.095Zm81.566-34.81c0-11.482 6.613-20.791 14.772-20.791s14.773 9.308 14.773 20.791-6.613 20.792-14.773 20.792-14.77-9.31-14.77-20.793Zm-95.2 0c0-11.482 6.614-20.791 14.773-20.791s14.772 9.308 14.772 20.791-6.615 20.792-14.772 20.792-14.777-9.31-14.777-20.793Z" />
+    <path class="dark"
+      d="M256.614 466a12.423 12.423 0 0 1-5.716-1.244l-96.236-47.1a8.834 8.834 0 0 1-4.654-6.217c-.115-.627-15.224-82.8-18.915-102.894h-.015a6.331 6.331 0 0 0-2.379.782 4.224 4.224 0 0 1-1.791.4 4.3 4.3 0 0 1-3.516-1.833 4.284 4.284 0 0 1 .483-5.488 11.6 11.6 0 0 0 2.637-3.4 4.216 4.216 0 0 1 1.469-1.8 4.315 4.315 0 0 1-.653-2.272 31.5 31.5 0 0 0-.183-4.073c-.767-7.289.856-13.691 4.825-19.028a23.731 23.731 0 0 1-17.057-6.721c-8.65-8.35-10.458-8.35-12.745-8.35h-.687a4.27 4.27 0 0 1-4.18-3.322 4.3 4.3 0 0 1 2.391-4.866c3.7-1.693 5.271-2.664 7.192-9.766 1.913-7.053 5.736-12.416 11.363-15.939a24.1 24.1 0 0 1-13.56-12.412c-5.141-11.1-6.655-11.616-9.4-12.562a4.3 4.3 0 0 1-2.868-4.643 4.3 4.3 0 0 1 4.007-3.7c4.048-.235 5.863-.566 10.174-6.5 4.3-5.919 9.792-9.562 16.335-10.826a24.034 24.034 0 0 1-8.029-16.5c-.814-12.2-2.025-13.257-4.223-15.177a4.3 4.3 0 0 1-.89-5.371 4.337 4.337 0 0 1 3.719-2.143 4.37 4.37 0 0 1 1.383.224 12.707 12.707 0 0 0 4.031.847c1.417 0 3.331-.385 7.707-3.183a26.818 26.818 0 0 1 14.577-4.557 25.344 25.344 0 0 1 4.535.418 23.8 23.8 0 0 1-1.6-18.307c3.688-11.682 2.915-13.077 1.51-15.608a4.309 4.309 0 0 1 1.02-5.381 4.307 4.307 0 0 1 2.733-.986 4.314 4.314 0 0 1 2.733.986c2.584 2.146 4.036 2.766 6.474 2.766a28.293 28.293 0 0 0 5.381-.665 31.556 31.556 0 0 1 6.2-.643 24.819 24.819 0 0 1 13.132 3.677 23.778 23.778 0 0 1 5.188-17.6c7.651-9.5 7.427-11.087 7.021-13.978a4.307 4.307 0 0 1 2.874-4.652 4.322 4.322 0 0 1 1.371-.226 4.308 4.308 0 0 1 3.73 2.176c2.072 3.671 3.411 5.061 10.292 6.251 7.187 1.248 12.881 4.544 16.925 9.8A23.929 23.929 0 0 1 241.9 59.763c10.54-6.138 10.942-7.776 11.606-10.489A4.258 4.258 0 0 1 257.665 46h.183a4.293 4.293 0 0 1 4.052 3.634c.622 4.031 1.123 5.814 7.374 9.507 6.28 3.771 10.4 8.91 12.253 15.275a23.926 23.926 0 0 1 15.648-9.595c12.137-1.953 13.019-3.243 14.622-5.584a4.265 4.265 0 0 1 3.538-1.865 4.244 4.244 0 0 1 1.725.365 4.289 4.289 0 0 1 2.456 4.888c-.943 4.125-.887 5.931 3.408 11.545 4.493 5.741 6.484 12 5.917 18.6a24.651 24.651 0 0 1 12.927-3.793 24.947 24.947 0 0 1 5.135.557 57.98 57.98 0 0 0 10.945 1.629 6.872 6.872 0 0 0 4.705-1.51 4.274 4.274 0 0 1 2.422-.751 4.317 4.317 0 0 1 3.033 1.255 4.3 4.3 0 0 1 .514 5.457c-2.39 3.495-2.99 5.2-.942 11.994l.007.024c1.524 5.071 3.611 12.015.72 19.334a28.05 28.05 0 0 1 3.3-.2 22.862 22.862 0 0 1 12.757 3.795c7.646 5.043 10.436 6.077 12.273 6.077a9.584 9.584 0 0 0 2.282-.342 4.509 4.509 0 0 1 1-.119 4.288 4.288 0 0 1 3.923 2.552 4.288 4.288 0 0 1-1.5 5.273c-3.489 2.384-4.664 3.751-5.22 10.838a28.247 28.247 0 0 1-2.149 8.916 25.809 25.809 0 0 1-6.394 8.942c6.988 1.271 12.192 4.432 15.908 9.659 7.076 9.936 8.64 10.16 11.48 10.568l-.021.033a4.29 4.29 0 0 1 3.677 4.05 4.283 4.283 0 0 1-3.3 4.363c-3.961.934-5.748 1.883-8.809 8.2a28.171 28.171 0 0 1-5.218 7.494 25.84 25.84 0 0 1-9.212 6.023c6 3.692 9.692 8.51 11.3 14.727 3.075 11.911 4.418 12.675 6.856 14.062a4.31 4.31 0 0 1 1.955 5.1 4.3 4.3 0 0 1-4.063 2.916 5.055 5.055 0 0 1-.538-.038h-.041a19.191 19.191 0 0 0-2.583-.2c-2.423 0-4.415.718-8.574 4.641a26.447 26.447 0 0 1-18.33 7.439c4.306 5.642 6.03 11.506 5.274 17.923-1.447 12.282-.469 13.478 1.307 15.649a4.266 4.266 0 0 1-.031 5.468 4.319 4.319 0 0 1-3.292 1.534 4.309 4.309 0 0 1-2.091-.548 10.708 10.708 0 0 0-4.934-1.693c-15.368 88.4-17.668 101.653-17.672 101.684a9.341 9.341 0 0 1-4.426 5.991l-90.524 47.025a4.011 4.011 0 0 1-.814.32 14.569 14.569 0 0 1-5.249.912Zm-120.9-165.042a2.132 2.132 0 0 0-1.205 2.539l19.723 107.3a4.554 4.554 0 0 0 2.25 3l96.365 47.163a8.121 8.121 0 0 0 3.745.764 9.47 9.47 0 0 0 3.973-.764h.107l90.578-47.057a5.174 5.174 0 0 0 2.145-3l17.861-102.758a4.272 4.272 0 0 1-.657-3.139l.666-3.734a1.741 1.741 0 0 0-1-.3h-.024l-21.273 9.853a4.124 4.124 0 0 1-1.36.375l-2.064.953a4.125 4.125 0 0 1-1.078.708l-40.624 18.759a4.358 4.358 0 0 1-.764.267c-.122.068-.228.121-.342.172l-3.538 1.608a4.3 4.3 0 0 1-.779.268l-38.495 17.794a8.525 8.525 0 0 1-3.122.483 9.213 9.213 0 0 1-3.2-.483l-41.073-17.9a4.244 4.244 0 0 1-.774-.257l-2.091-.933c-.107.011-.222.011-.342.011a4.383 4.383 0 0 1-1.716-.354l-42.77-18.652a4.306 4.306 0 0 1-1.243-.825 4.341 4.341 0 0 1-1.543-.353l-26.332-11.512Zm99.211 24.235a34.862 34.862 0 0 0-16.9 6.351l37.2 16.212a6.044 6.044 0 0 0 1.588.172 5.941 5.941 0 0 0 1.448-.14l34.63-16.009a39.98 39.98 0 0 0-16.239-6.244 21.635 21.635 0 0 1-7.439 11.592 21.235 21.235 0 0 1-13.387 4.638 21.272 21.272 0 0 1-20.9-16.572Zm3.238-4.437h.537a17.028 17.028 0 0 0 17.149 16.722 17.192 17.192 0 0 0 17.153-16.616 44.28 44.28 0 0 1 24.372 8.848l3.6-1.668v-2.463c.284.5.517.99.744 1.465v.01c.086.181.17.357.253.526l40.625-18.779c-.371-.86-.746-1.7-1.11-2.506a47.645 47.645 0 0 1-2.142-5.263l.031.03.032.031.081.078.015.013.194.185.115.108.033.032a35.923 35.923 0 0 0 7.083 5.291l20.425-9.443a6.95 6.95 0 0 1 1.663-.545l4.3-1.994a2.969 2.969 0 0 1 1.2-.282 1.712 1.712 0 0 1 1.342.584 2.671 2.671 0 0 1 .459 2.163l-.527 2.979a6.977 6.977 0 0 1 .483 4.042s-.09.524-.26 1.5a15.2 15.2 0 0 1 6.307 2.2c-2.837-3.468-3.766-5.995-2.252-18.866 1.168-9.923-5.281-16.238-9.99-20.847a43.546 43.546 0 0 1-3.516-3.7 31.407 31.407 0 0 0 12.413 2.84 21.893 21.893 0 0 0 15.458-6.271c4.542-4.294 7.559-5.817 11.527-5.817a23.552 23.552 0 0 1 3.157.243 10.919 10.919 0 0 1-4.729-4.542c-1.314-2.322-2.56-5.964-4.167-12.18-2.495-9.645-10.767-13.206-16.806-15.806a42.223 42.223 0 0 1-4.633-2.2c.615.028 1.251.044 1.9.044 10.829 0 18.774-4.575 22.974-13.229 3.657-7.539 6.439-9.271 11.683-10.5-4.52-.645-6.93-1.876-14.363-12.327-5.742-8.071-14.766-8.4-21.354-8.631a42.979 42.979 0 0 1-5.123-.373c11.353-3.905 17.52-11.081 18.33-21.331.652-8.272 2.421-10.87 7.074-14.041a14.289 14.289 0 0 1-3.28.459c-3.246 0-6.935-1.711-14.621-6.783a18.435 18.435 0 0 0-10.407-3.091c-4.627 0-9.064 1.526-12.628 2.752-.533.184-1.083.373-1.619.552 11.032-9.174 8.3-18.232 6.11-25.511-2.385-7.918-1.681-10.984 1.5-15.65a11.1 11.1 0 0 1-7.131 2.262 61.3 61.3 0 0 1-11.843-1.726 20.319 20.319 0 0 0-4.238-.46c-7.563 0-12.969 4.486-17.313 8.09a43.831 43.831 0 0 1-3.853 2.981c5.732-10.3 5.382-19.309-1.072-27.548-5-6.528-5.446-9.635-4.18-15.114-2.565 3.74-4.737 5.347-17.473 7.4-9.856 1.588-14.128 9.236-17.246 14.82a42.9 42.9 0 0 1-2.584 4.261c1.6-11.646-1.975-19.921-10.934-25.3-7.006-4.14-8.562-6.885-9.433-12.542a11.271 11.271 0 0 1-3.068 5.829c-1.907 1.961-5.061 4.162-10.546 7.356-8.69 5.063-9.893 13.842-10.771 20.252a45.473 45.473 0 0 1-.8 4.725c-2.765-11.417-9.11-17.834-19.4-19.618-8.063-1.4-10.492-3.405-13.292-8.36.641 4.592.123 7.27-7.932 17.257-6.312 7.829-4.269 16.435-2.778 22.719a44.044 44.044 0 0 1 .955 4.724c-5.519-8.023-12.005-11.924-19.83-11.924a27.1 27.1 0 0 0-5.36.561 32.122 32.122 0 0 1-6.225.75c-3.94 0-6.277-1.318-9.211-3.752 2.222 4.022 2.7 6.7-1.179 18.972-3.012 9.535 1.961 16.782 5.593 22.074a43.073 43.073 0 0 1 2.66 4.188c-5.253-3.566-10.4-5.375-15.286-5.375a22.308 22.308 0 0 0-12.261 3.874c-4.286 2.745-7.191 3.865-10.024 3.865a16.48 16.48 0 0 1-5.414-1.077c3.444 3.013 4.825 5.356 5.682 18.116.672 10.1 7.939 15.057 13.246 18.68a44.283 44.283 0 0 1 3.906 2.865 35.291 35.291 0 0 0-7.938-.984c-7.664 0-13.658 3.127-18.324 9.558-4.816 6.635-7.7 7.931-13.4 8.254 4.354 1.487 6.507 3.148 11.9 14.792 4.27 9.04 12.8 11.055 19.037 12.527a43.45 43.45 0 0 1 4.759 1.3c-11.634 1.7-18.611 7.413-21.331 17.472-2.14 7.917-4.36 10.168-9.541 12.541h.68c3.962 0 6.8.942 15.721 9.549 3.9 3.766 8.477 5.521 14.4 5.521a55.039 55.039 0 0 0 7.763-.711 42.862 42.862 0 0 1 4.962-.522c-10.252 5.8-14.706 13.648-13.613 24.01a35.339 35.339 0 0 1 .214 4.609 1.531 1.531 0 0 1 .365-.042 3.141 3.141 0 0 1 1.137.256l3.264 1.426a7.007 7.007 0 0 1 2.9.665l25.188 10.977.792-.379c1.511-.724 2.932-1.4 4.3-1.969a6.6 6.6 0 0 1-.591.645 6.355 6.355 0 0 0-.588.641 16.656 16.656 0 0 0-1.527 2.1l42.887 18.689a10.178 10.178 0 0 1 .837-.725l.012-.01c.141-.113.286-.229.432-.355-.139.466-.256.925-.394 1.477l2.941 1.281a38.859 38.859 0 0 1 24.597-8.861Zm12.308.257h-.008a192.966 192.966 0 0 1-23.938-1.573h-.052l-.262-.033-.04-.005-.047-.006-.226-.029-.072-.01-.073-.01-.068-.009h-.016l-.083-.011h-.029l-.161-.02c-.046-.007-.088-.013-.131-.018l-.238-.031-.037-.005h-.032l-.149-.02-.139-.019h-.032a206.683 206.683 0 0 1-20.463-3.791h-.016l-.108-.025-.1-.025-.12-.029-.066-.017c-13.171-3.179-24.515-7.448-32.806-12.343-1.556-.958-3.383-2.115-5.141-3.434a.161.161 0 0 1-.019-.013l-.018-.012-.068-.052-.064-.048-.016-.013-.01-.008-.011-.008c-.357-.27-.708-.546-1.045-.821l-.042-.034-.011-.009-.054-.044-.013-.011-.012-.01-.079-.064c-.014-.013-.029-.024-.042-.035s-.04-.035-.06-.05-.022-.019-.033-.028l-.026-.021-.033-.03-.009-.008-.034-.028-.035-.029-.01-.009-.023-.02-.038-.033-.039-.033-.011-.009-.01-.008c-.028-.025-.057-.051-.087-.074a.036.036 0 0 0-.008-.008l-.015-.013-.081-.07-.009-.008-.206-.183-.091-.081a22.143 22.143 0 0 1-6.912-10.314 24.627 24.627 0 0 1-.651-11.019 35.933 35.933 0 0 1 2.719-9.113 40.413 40.413 0 0 1 3.344-6.109c-6.545-11.671-8.5-24.609-10.077-37.945.606.122 1.243.208 1.917.3l.36.049c.337.046.786.108 1.262.188.928.137 1.837.259 2.679.369l.686.09c2.26.295 4.392.574 6.291.989h.009l.136.03a.414.414 0 0 1 .046.011c.032.006.064.013.1.021l.1.023.046.011.126.03a20.525 20.525 0 0 1 2.118.617l.015.005h.012l.04.015h.01l.045.017.014.005h.01l.023.008.034.013.051.019.049.019.012.005.035.014.034.013.056.021.031.012.023.01.019.008.086.033.045.019c.035.013.07.028.1.044l.019.007.046.02.018.008.059.026h.014l.023.01.1.047h.01l.057.026.063.03a.045.045 0 0 1 .014.006l.115.054h.009l.032.015.085.042.019.008.055.027.016.008.038.019.008.005a9.258 9.258 0 0 1 2.337 1.633 8.147 8.147 0 0 1 1.355 1.729 12.863 12.863 0 0 0-.725-2.631c-.965-2.694-1.8-5.02 4.263-12.909.75-.963 1.476-1.967 2.157-2.982a41.5 41.5 0 0 0 6.093-13.177.213.213 0 0 0 0-.024l5.146 12.968c1.2 1.424 2.237 2.532 3.15 3.51.431.461.757.81 1.075 1.159a14.466 14.466 0 0 1 1.816 2.327c.9 1.518 1.067 3.042.608 5.436.271-.425.5-.766.727-1.074a.224.224 0 0 0 .016-.022l.01-.013a11.536 11.536 0 0 1 1.131-1.339l.011-.012.027-.026.012-.012.024-.024.01-.01a12.62 12.62 0 0 1 4.5-2.7c.421-.162.854-.318 1.286-.462a70.746 70.746 0 0 1 6.935-1.823h.016c.869-.19 1.668-.359 2.446-.519.632-.123 1.249-.274 1.834-.445h.014l.03-.008h.012l.032-.009c7.242-2.159 11-7.8 13.713-13.031.382-.738.739-1.455 1.084-2.148a45.389 45.389 0 0 1 2.253-4.181c-.08.9-.143 1.813-.181 2.72-.348 8.486 1.563 14.665 5.843 18.888a.155.155 0 0 0 .021.019l.013.013.015.016a19.833 19.833 0 0 0 4.013 3h.01c.025.016.05.03.075.044l.03.016.058.033a.279.279 0 0 0 .033.019h.008l.043.024.029.017.017.009.021.012.021.012.046.025.049.027.013.007.027.014.088.047.06.034c.029.016.055.03.08.045s.042.022.059.032l.019.011c2.86 1.6 4.635 3.07 5.757 4.754l.006.008.01.016.009.013.007.01.012.018.006.01c.049.076.1.153.144.229.007.011.013.02.018.029v.007l.027.045.022.038a.033.033 0 0 0 .006.01l.024.042.021.037.014.024c.014.025.026.047.04.069.041.074.081.149.12.223v.009l.015.029.024.048v.008l.005.008.014.029.005.011.016.032.005.009v.009l.018.037.013.027.008.016v.01l.009.019.012.025.008.019c.006.012.01.019.012.027a.207.207 0 0 1 .016.035l.014.028.013.028a.168.168 0 0 0 .012.028c.01.021.019.042.027.063l.006.012.006.011.013.031.015.033a.115.115 0 0 0 .008.019v.011l.024.057.02.046.016.038v.01l.016.041.017.041a24.011 24.011 0 0 1 1.145 4.6c.073.4.148.8.23 1.229l.006-.027.006-.028v-.027a.205.205 0 0 1 .006-.027.316.316 0 0 1 .008-.039c.453-1.992 1.958-3.088 4.578-4.414.74-.375 1.584-.775 2.477-1.2a91.358 91.358 0 0 0 10.6-5.71 16.911 16.911 0 0 0 1.855-1.373l.006-.007.078-.066c.017-.016.033-.03.05-.044l.009-.009.01-.009c5.111-4.492 6.206-11.1 6.6-16.979v-.043c.081-1.216.133-2.415.178-3.474v-.019c.033-.76.063-1.478.1-2.168v-.044a.183.183 0 0 1 0-.03 27.745 27.745 0 0 1 .317-3.159v-.098c.029-.161.06-.313.092-.453.011.042.023.087.039.142.006.022.013.046.021.07l.011.038.01.034c.008.029.016.055.025.085v.01a.446.446 0 0 0 .012.044c.008.028.018.06.027.09v.015c0 .012.007.023.009.034.01.03.019.062.027.093v.011l.007.022c.01.036.021.072.032.107v.012l.021.071.007.019.008.024.012.04.011.04c0 .011.008.022.011.033l.011.033.01.036.01.033.014.045.01.031c0 .01.007.019.01.029s.007.021.011.033.011.034.016.051l.016.05v.015a.2.2 0 0 1 .007.022 30.837 30.837 0 0 0 4.044 8.373c.015.022.031.044.047.066l.005.008a21.226 21.226 0 0 0 13.928 8.733c.553.106 1.11.2 1.7.275 6.371.85 9.384 2.216 11.938 5.413.074.093.148.188.222.284.464.606.939 1.3 1.452 2.129a18.54 18.54 0 0 1-.234-1.841.09.09 0 0 0 0-.012v-.034c-.011-.156-.018-.312-.021-.479-.074-3.151 1.072-6.352 7.546-15.1a27.333 27.333 0 0 1 7.181-6.969c-2.386 4.122-3.21 7.141-2.59 9.5.035.132.073.258.115.383a.025.025 0 0 0 0 .009v.01l.009.027.007.018a.28.28 0 0 0 .012.034c.616 1.73 1.971 2.992 3.547 4.347l.423.363.056.048.018.016.011.009c.4.342.815.7 1.235 1.07a22.688 22.688 0 0 1 2.439 2.5.051.051 0 0 1 .011.015l.046.055c.008.01.016.019.024.03a.378.378 0 0 1 .031.039l.033.041.024.029.019.026.02.025.006.007.009.012.016.021c.011.014.02.026.029.039l.008.008c.074.1.15.2.223.3l.038.051.006.008.033.044a.15.15 0 0 1 .017.022l.009.012.035.047.035.048.011.014.011.014.031.042.031.042.008.01.008.011a25.3 25.3 0 0 1 3.567 6.1 11.45 11.45 0 0 1 .727 3.582 16.622 16.622 0 0 1-.55 4.532v.009l-.008.034a.247.247 0 0 1-.006.027v.016c-.007.03-.014.057-.021.084s-.009.037-.012.054a.165.165 0 0 0-.008.031l-.01.038-.009.038a.222.222 0 0 0-.008.033l-.007.026c0 .016-.007.025-.009.034v.017c-.008.03-.014.053-.019.077v.039l-.011.042-.011.042.019-.025.016-.02a.144.144 0 0 1 .016-.021.141.141 0 0 1 .016-.021c.256-.344.472-.621.68-.872a10.533 10.533 0 0 1 4.467-3.238 24.766 24.766 0 0 1 3.466-1.085l.052-.012.041-.01h.009c2.2-.532 5.026-1.026 8.905-1.552a20.042 20.042 0 0 0 4.213-.924l.035-.012.032-.011.063-.022.059-.023.07-.027h.01c.044-.016.085-.031.128-.048-.15 1.429-.282 2.6-.415 3.7 0 .014 0 .03-.005.045v.103c-.28 2.32-.573 4.434-.893 6.463v.018l-.007.043v.019c0 .023-.007.043-.01.064-.672 4.258-1.454 8.071-2.389 11.657a75.421 75.421 0 0 1-8.16 20.018c.209.3.407.6.589.9l.008.014.01.017a.038.038 0 0 1 .008.012 18.939 18.939 0 0 1 2.586 10.621c-.2 5.551-2.393 11.47-6.526 17.594v-.322l-.032.048-.031.047-.011.017-.017.024-.018.027c-.006.009-.011.018-.018.027l-.019.028-.013.019a.543.543 0 0 1-.032.046c-.008.014-.017.026-.026.039l-.013.02-.011.016-.012.019c-.019.027-.031.042-.041.059l-.014.019-.012.016c-.016.022-.03.043-.044.064l-.009.012-.008.012-.006.008-.046.064-.01.015a34.751 34.751 0 0 1-6.3 6.623l-.01.008-.035.029-.047.04-.008.006-.01.008-.036.03-.037.03-.029.024-.067.054a.416.416 0 0 1-.033.026l-.031.025-.026.021c-.019.014-.036.029-.055.044l-.018.014-.018.015-.032.026-.035.029-.01.007a.129.129 0 0 0-.019.016l-.041.032-.04.031a.058.058 0 0 1-.017.012c-.015.013-.032.026-.049.039l-.012.01-.031.024a66.927 66.927 0 0 1-17.361 9.359l-.046.018-.033.012-.042.017h-.012l-.016.006-.06.023-.029.01-.027.01-.02.008-.1.038h-.011a152.045 152.045 0 0 1-29.421 7.4l-.059.009c-.085.015-.165.027-.247.04l-.052.008-.054.008-.1.017h-.024c-5.084.8-10.455 1.449-15.961 1.938l-.192.02-.1.01-.135.014-.079.007-.075.007c-4.745.47-9.618.786-14.485.94a.073.073 0 0 1-.019 0l-.257.008-.248.008h-.698l-.382.01h-.227l-.348.008h-.136l-.252.005h-.268c-1.126.044-2.359.059-3.612.059ZM238.371 302a1.218 1.218 0 0 0 .213 1.145c.788 1.117 3.047 1.958 5.254 1.958 1.5 0 3.382-.816 5.378-1.68l.017-.008c2.163-.935 4.4-1.9 6.4-1.957h.2a18.624 18.624 0 0 1 6.347 1.686 14.546 14.546 0 0 0 4.6 1.317c2.307 0 4.994-1.341 5.681-2.451a.865.865 0 0 0 .108-.871.511.511 0 0 0-.447-.275 3.117 3.117 0 0 0-1.363.706 7.54 7.54 0 0 1-3.764 1.6c-.137.01-.283.014-.432.014a21.388 21.388 0 0 1-4.969-.915l-.227-.059a23.5 23.5 0 0 0-5.575-.973h-.266a21.4 21.4 0 0 0-5.847 1.376h-.009a18.894 18.894 0 0 1-5.613 1.3 7.223 7.223 0 0 1-4.131-1.576 2.95 2.95 0 0 0-1.229-.636c-.2 0-.333.124-.427.39l.1-.1Zm-32.584-6.326a1.607 1.607 0 0 0-1.606 1.6 1.61 1.61 0 0 0 1.606 1.609 1.612 1.612 0 0 0 1.61-1.609 1.609 1.609 0 0 0-1.605-1.601Zm93.794.642a1.073 1.073 0 0 0-1.072 1.072 1.073 1.073 0 0 0 1.072 1.073 1.074 1.074 0 0 0 1.073-1.073 1.074 1.074 0 0 0-1.068-1.073Zm-100.117-6.217a1.609 1.609 0 0 0-1.606 1.608 1.609 1.609 0 0 0 1.606 1.608 1.61 1.61 0 0 0 1.608-1.608 1.61 1.61 0 0 0-1.603-1.609Zm105.8.32a1.074 1.074 0 0 0-1.072 1.073 1.073 1.073 0 0 0 1.072 1.072 1.073 1.073 0 0 0 1.073-1.072 1.074 1.074 0 0 0-1.071-1.074Zm-9.431-1.284a1.609 1.609 0 0 0-1.608 1.606 1.61 1.61 0 0 0 1.608 1.608 1.61 1.61 0 0 0 1.608-1.608 1.609 1.609 0 0 0-1.606-1.604Zm-86.505-.108a1.073 1.073 0 0 0-1.072 1.072 1.073 1.073 0 0 0 1.072 1.072 1.074 1.074 0 0 0 1.073-1.072 1.074 1.074 0 0 0-1.071-1.073Zm-42.078-58.772c-1.251 3.836-1.434 10.293-.5 17.716 1.072 8.538 3.366 16.433 6.137 21.118 5.44 9.034 16.9 14.873 29.2 14.873a36.276 36.276 0 0 0 7.245-.724 48.993 48.993 0 0 0 16.039-6.66c4.9-3.147 8.564-6.8 10.331-10.275 1.874-3.54 3.645-12.084 3.645-17.58 0-3.953.181-3.959 1.185-4a4.737 4.737 0 0 0 1.281-.185c1.665-.445 8.2-.644 13.935-.644s12.27.2 13.935.644c1.206.328 1.8.6 2.118 1.325s.347 1.867.347 4.141c0 6.481 2.308 15.089 5.145 19.188 3.047 4.352 10.413 9.263 18.33 12.218a38.083 38.083 0 0 0 13.462 2.4 38.537 38.537 0 0 0 22.232-6.9c6.508-4.665 10.408-12.169 12.649-24.334 2.007-10.35 1.875-17.65-.417-22.972a9.1 9.1 0 0 0-2.038.985c1.216 3.136 1.472 9.253.686 16.36-.838 7.6-2.661 14.753-4.877 19.134a25.831 25.831 0 0 1-9.634 9.889 37.227 37.227 0 0 1-14.7 5.224 22.31 22.31 0 0 1-2.941.186 41.334 41.334 0 0 1-15.439-3.465 37.829 37.829 0 0 1-13.028-8.617 21.742 21.742 0 0 1-5.239-9.567c-.954-3.689-1.256-8.177-.978-14.552.279-5.761.837-9.671 1.81-12.676a14.252 14.252 0 0 1 4.622-7.047c4.618-3.913 12.615-6.594 21.94-7.356a23.569 23.569 0 0 0-5.9-1.359c-.528-.071-1.044-.151-1.535-.238a56.394 56.394 0 0 0-6.174 1.563c-5.4 1.71-9.58 4.044-12.079 6.748-2.344 2.555-4.387 7.884-5.466 14.256-.4 2.33-.68 3.106-1.539 3.106a3.605 3.605 0 0 1-1.035-.212c-2.525-.771-9.723-1.174-15.527-1.174a60.333 60.333 0 0 0-9.34.532 26.921 26.921 0 0 1-4.056.522c-2.329 0-2.588-1.22-3.125-5.453-1.3-9.551-6.908-15.446-17.636-18.553a23.786 23.786 0 0 1-4.385 1.571 48.961 48.961 0 0 1 9.385 3.4c3.384 1.642 5.853 3.384 6.954 4.9 1.994 2.813 3.48 7.985 4.074 14.189a51.657 51.657 0 0 1-1.071 17.325c-1.719 6.659-4.653 10.639-10.827 14.686a41.508 41.508 0 0 1-22.766 7.205 32.679 32.679 0 0 1-12.054-2.235 29.819 29.819 0 0 1-10.2-6.686 27.909 27.909 0 0 1-6.285-9.3 66.781 66.781 0 0 1-3.792-14.606 43.6 43.6 0 0 1-.655-11.849 20.739 20.739 0 0 1 .836-4.068c-.092-.128-.163-.238-.224-.344a4.589 4.589 0 0 0-2.053-1.777Zm135.777 4.706c-8.217 0-14.9 9.439-14.9 21.041s6.685 21.04 14.9 21.04 14.9-9.439 14.9-21.04-6.68-21.042-14.898-21.042Zm-93.8 0c-7.734 0-14.027 9.439-14.027 21.041s6.293 21.04 14.027 21.04 14.026-9.439 14.026-21.04-6.292-21.042-14.026-21.042Zm-20.293-18.508a44.725 44.725 0 0 0-11.246 3.635 8.831 8.831 0 0 0-1.722 3.953 26.5 26.5 0 0 1 5.387-2.653 56.082 56.082 0 0 1 9.64-2.612 15.79 15.79 0 0 0-1.021-1.205c-.384-.409-.715-.765-1.039-1.119Zm131.986 2.577a56.556 56.556 0 0 1 10.876 3.1 22.013 22.013 0 0 0-2.252-3.737 69.71 69.71 0 0 0-12.163-2.584c-.3-.039-.642-.084-.986-.123a6.347 6.347 0 0 0-.349 2.581c1.7.187 3.374.442 4.979.758Z" />
+
+  </svg>
+
+
+  <!--  -->
+
+  <ul>
+    @for (tag of siteTags(); track $index) {
+    @let c = getRandomCoordinates();
+    <!-- @let s = getRandom(0.8, 1.28); -->
+    @let s = 1;
+    <li class="tag" [style]="{scale: s}" [ngStyle]="{top: c.y+'%',left: c.x+'%'}" [ngClass]="formatTagname(tag)">
+      {{formatTagname(tag)}}</li>
+    }
+
+    @for (tag of fileTags(); track $index) {
+    @let c = getRandomCoordinates();
+    <!-- @let s = getRandom(0.8, 1.28); -->
+    @let s = 1;
+    <li class="tag" [ngStyle]="{top: c.y+'%',left: c.x+'%', scale: s}" [ngClass]="formatTagname(tag)">
+      {{formatTagname(tag)}}</li>
+    }
+  </ul>
+</div>
+<!--  -->
 
 <small
   class="version"><code><a href="https://github.com/chytanka/chytanka.github.io/releases" target="_blank" rel="noopener noreferrer">v{{version}}</a></code></small>
\ No newline at end of file
diff --git a/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.scss b/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.scss
index 0aced22..91baecf 100644
--- a/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.scss
+++ b/src/app/shared/ui/chytanka-logo-with-tags/chytanka-logo-with-tags.component.scss
@@ -4,20 +4,28 @@
     min-height: 0;
     min-width: 0;
     display: grid;
-    place-items: stretch;
+    // place-items: stretch;
+    align-items: anchor-center;
+
 }
 
 #logoPath {
 
-    fill: #000118;
+    fill: var(--accent);
 
-    @media (prefers-color-scheme: light) {
-        fill: #166496;
+    .light {
+        display: none;
     }
-}
 
-.one-bit {
-    filter: url('#oneBit');
+    @media (prefers-color-scheme: light) {
+        .light {
+            display: unset;
+        }
+
+        .dark {
+            display: none;
+        }
+    }
 }
 
 .filters {
@@ -36,9 +44,9 @@ img {
 }
 
 .version {
-    position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%,-50%);
+    // position: absolute;
+    // top: 50%; left: 50%;
+    // transform: translate(-50%,-50%);
     font-weight: bold;
     text-align: center;
     opacity: .5;
@@ -58,11 +66,22 @@ img {
     }
 }
 
+ul {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1ch;
+    align-items: anchor-center;
+    align-self: start;
+    justify-content: center;
+}
+
 .tag {
     z-index: 1;
     transition: all var(--t) linear;
-    position: absolute;
-    padding: .25ch;
+    // position: absolute;
+    padding: .5ch;
     text-align: center;
     border-radius: .25ch;
     font-size: small;
@@ -72,14 +91,15 @@ img {
     --f: black;
     background-color: var(--b);
     color: var(--f);
-    box-shadow: var(--flat-shadow-medium);
+    box-shadow: var(--shadow-1);
     list-style: none;
+    text-box: trim-both cap alphabetic;
 
-    &:hover {
-        cursor: none;
-        scale: 1.5 !important;
-        z-index: 2;
-    }
+    // &:hover {
+    //     cursor: none;
+    //     scale: 1.5 !important;
+    //     z-index: 2;
+    // }
 
     &.reddit {
         --b: #FF4500;
diff --git a/src/app/shared/ui/dialog/dialog.component.scss b/src/app/shared/ui/dialog/dialog.component.scss
index b350151..9b439b4 100644
--- a/src/app/shared/ui/dialog/dialog.component.scss
+++ b/src/app/shared/ui/dialog/dialog.component.scss
@@ -9,8 +9,9 @@ dialog {
     max-width: min(calc(100vw - 4ch), 60ch);
     max-height: calc(100dvh - 8ch);
     border-radius: var(--r);
-    // border: var(--b) solid #166496;
-    border: 0;
+    border: var(--border-size) solid var(--border-color);
+    // border: 0;
+    overflow-x: hidden;
     background-color: rgb(0, 15, 30);
     color: inherit;
     margin-top: 4ch;
@@ -21,13 +22,15 @@ dialog {
     }
 
     &::backdrop {
-        --brightness: .4;
-        backdrop-filter: brightness(var(--brightness)) grayscale(.8) sepia(0.5);
-
-        @media (prefers-color-scheme: light) {
-            --brightness: .9;
-            // background-color: #fff1;
-        }
+        --dots: radial-gradient(var(--surface) 4px, transparent 0px);
+        --size: 10px;
+        background-color: transparent;
+        background-image: var(--dots);
+        background-repeat: repeat;
+        background-size: var(--size) var(--size);
+        background-position: center;
+        --brightness: .6;
+        backdrop-filter: grayscale(.8) blur(var(--blur));
     }
 
     .dialog-wrapper {
@@ -62,8 +65,8 @@ dialog {
     header {
         border-top-left-radius: calc(var(--r) - var(--b));
         border-top-right-radius: calc(var(--r) - var(--b));
-        border-bottom-width: 2px;
-        border-color: var(--shc);
+        border-bottom-width: var(--border-size);
+        border-color: var(--border-color);
         display: grid;
         grid-template-columns: 1fr auto;
         align-items: center;
@@ -92,6 +95,6 @@ dialog {
 
     &[open] {
         // display: flex;
-        box-shadow:  var(--flat-shadow-high);
+        box-shadow: var(--shadow-2);
     }
 }
\ No newline at end of file
diff --git a/src/app/shared/ui/file-change/file-change.component.html b/src/app/shared/ui/file-change/file-change.component.html
index 8d165a5..3e4b010 100644
--- a/src/app/shared/ui/file-change/file-change.component.html
+++ b/src/app/shared/ui/file-change/file-change.component.html
@@ -1,6 +1,6 @@
 <!-- <input type="file" (input)="onFileSelected($event)" [accept]="accept.join(', ')" > -->
 
-<button class="button" (click)="openFileDialog()" [title]="lang.ph().openFile+' (Ctrl+O)'">{{label()}}</button>
+<button class="button border" (click)="openFileDialog()" [title]="lang.ph().openFile+' (Ctrl+O)'">{{label()}}</button>
 
 @if(showDragAndDropZone){
 <div class="drop-zone" (click)="showDragAndDropZone = false" (drop)="dropHandler($event)">
diff --git a/src/app/shared/ui/manga-page/manga-page-even.component.scss b/src/app/shared/ui/manga-page/manga-page-even.component.scss
index 4089250..c9e361a 100644
--- a/src/app/shared/ui/manga-page/manga-page-even.component.scss
+++ b/src/app/shared/ui/manga-page/manga-page-even.component.scss
@@ -1,5 +1,5 @@
 svg {
-    aspect-ratio: 257/364;
+    aspect-ratio: var(--ratio);
     border: 1px solid;
     grid-area: 1/4;
     width: 100%;
@@ -11,7 +11,7 @@ svg {
 :host {
     display: grid;
     max-height: 100vh;
-    aspect-ratio: 257/364;
+    aspect-ratio: var(--ratio);
     --side-gap: 2rem;
 
     background-color: #fff;
diff --git a/src/app/shared/ui/manga-page/manga-page.component.scss b/src/app/shared/ui/manga-page/manga-page.component.scss
index fd6d0d3..ede7aa8 100644
--- a/src/app/shared/ui/manga-page/manga-page.component.scss
+++ b/src/app/shared/ui/manga-page/manga-page.component.scss
@@ -2,7 +2,7 @@
     --side-gap: 2rem;
     display: grid;
     max-height: 100vh;
-    aspect-ratio: 257/364;
+    aspect-ratio: var(--ratio);
     background-color: #fff;
     color: #000;
     gap: 2ch 1ch;
@@ -13,7 +13,7 @@
 }
 
 svg {
-    aspect-ratio: 257/364;
+    aspect-ratio: var(--ratio);
     border: 1px solid;
     grid-area: 1/4;
     width: 100%;
diff --git a/src/app/shared/ui/pages-indicator/pages-indicator.component.scss b/src/app/shared/ui/pages-indicator/pages-indicator.component.scss
index 4a2fa62..2c1b2ae 100644
--- a/src/app/shared/ui/pages-indicator/pages-indicator.component.scss
+++ b/src/app/shared/ui/pages-indicator/pages-indicator.component.scss
@@ -42,7 +42,7 @@ div {
 :host.pages {
     div {
         border-radius: .5ch;
-        box-shadow: var(--flat-shadow-medium);
+        box-shadow: var(--shadow-1);
 
     }
 
diff --git a/src/app/shared/ui/text-embracer/text-embracer.component.scss b/src/app/shared/ui/text-embracer/text-embracer.component.scss
index f7ad1b4..d61ca07 100644
--- a/src/app/shared/ui/text-embracer/text-embracer.component.scss
+++ b/src/app/shared/ui/text-embracer/text-embracer.component.scss
@@ -1,9 +1,9 @@
 :host {
-    --border-color: currentColor;
+    --frame-color: currentColor;
     --border-width: 1px;
     --border-style: solid;
     --back-color: transparent;
-    --shc: var(--border-color);
+    --dot-color: red;
     margin: 0;
     text-transform: uppercase;
     text-align: center;
@@ -14,22 +14,18 @@
 
     &>span {
         text-box: ex alphabetic;
-        aspect-ratio: 2/3;
+        aspect-ratio: var(--ratio);
         display: grid;
-        border: var(--border-width) var(--border-style) var(--border-color);
+        border: var(--border-width) var(--border-style) var(--frame-color);
         border-radius: .1ch;
         height: 1.5lh;
         place-content: center;
         background-color: var(--back-color);
-        --bg-1: var(--gl) 0px 0px / 4px 4px;
-        --bg-2: var(--gl) 0px 0px / 3px 3px, var(--gl) 1.5px 1.5px / 3px 3px;
         --gl: radial-gradient(circle 1px at 0px 0px, var(--dot-color) 1px, transparent 0);
+        --bg-1: var(--gl) 0px 0px / 8px 8px;
+        --bg-2: var(--gl) 0px 0px / 4px 4px, var(--gl) 1.5px 1.5px / 4px 4px;
         background: var(--bg-1);
-
-        text-shadow: 0.025ch .025ch var(--shc),
-            0.05ch .05ch var(--shc),
-            0.075ch .075ch var(--shc),
-            0.1ch .1ch var(--shc);
+        text-shadow: var(--text-shadow-1);
         transition: all var(--t) ease-in-out;
 
         &:hover {
diff --git a/src/app/shared/ui/view-mode-bar/view-mode-bar.component.scss b/src/app/shared/ui/view-mode-bar/view-mode-bar.component.scss
index b29bf43..2a6000d 100644
--- a/src/app/shared/ui/view-mode-bar/view-mode-bar.component.scss
+++ b/src/app/shared/ui/view-mode-bar/view-mode-bar.component.scss
@@ -43,10 +43,10 @@
 			padding: 0;
 
 			&:checked~label {
-				background-color: #103651;
+				background-color: var(--surface-avarage);
 				color: var(--surface-1);
-				transform: translateY(.25ch);
-				// box-shadow: unset;
+				transform: translate(2px, 2px);
+				box-shadow: unset;
 			}
 
 			&:not(:checked):is(:focus-within, :hover)~label {
diff --git a/src/app/shared/ui/viewer/components/hint-page/hint-page.component.html b/src/app/shared/ui/viewer/components/hint-page/hint-page.component.html
index 6f69ae1..39755ae 100644
--- a/src/app/shared/ui/viewer/components/hint-page/hint-page.component.html
+++ b/src/app/shared/ui/viewer/components/hint-page/hint-page.component.html
@@ -34,7 +34,7 @@
         </text>
     </svg>
 
-    <img frame="4" style="display: block;" src="/assets/icons/icon-line.svg" alt="Chytanka logo">
+    <img frame="4" style="display: block;" src="/assets/icons/chtnk.svg" alt="Chytanka logo">
 
     <div dir="ltr" frame="5">
         @if (getPrevIndex() >=0 && playlist[getPrevIndex()]; as prev) {
diff --git a/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.html b/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.html
new file mode 100644
index 0000000..6949fa6
--- /dev/null
+++ b/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.html
@@ -0,0 +1,35 @@
+@let vm = viewer.viewModeOption();
+@let pub = episode?.publisher;
+
+<app-manga-page-even [class]="vm.mode" [dir]="vm.dir">
+    <div dir="ltr" frame="1"><img [imgMeta]="heart"></div>
+    <div dir="ltr" frame="2"><img [imgMeta]="map"></div>
+    <div dir="ltr" frame="5"><img [imgMeta]="logo" /></div>
+    <div dir="ltr" frame="4">
+        <p class="text-center">Кінець епізоду</p>
+        @if (getNextIndex() >=0 && playlist[getNextIndex()]; as next) {
+
+        <a dir="ltr" [routerLink]="['/', next.site, next.id]"
+            [queryParams]="{lang: lang.lang(), list: playlistLink, vm: vm.code}">
+            {{next.title??
+            lang.ph().untitled + ' ' + (getNextIndex() + 1)}} ⏩</a>
+        }
+    </div>
+
+    <div dir="ltr" frame="3">
+
+
+        <div style="display: grid;place-items: center; gap: var(--gap); text-align: center;">
+            <ng-content select="source-logo" />
+            <ng-content />
+            @if(pub && pub.id) {
+            <p>Робота від <a [newTab]="pub.site">{{pub.name}}</a></p>
+            <div class="publisher-links">
+                @for (l of pub.links; track $index) {<a [newTab]="l.link">{{l.title}}</a>}
+            </div>
+            }
+        </div>
+
+
+    </div>
+</app-manga-page-even>
\ No newline at end of file
diff --git a/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.scss b/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.scss
new file mode 100644
index 0000000..fa6ebb6
--- /dev/null
+++ b/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.scss
@@ -0,0 +1,60 @@
+app-manga-page-even.long,
+.last-hint-page.long {
+    height: unset;
+    width: 100%;
+}
+
+[frame="1"],
+[frame="2"],
+[frame="3"],
+[frame="4"],
+[frame="5"] {
+    padding: 1ch;
+    width: 100%;
+    display: grid;
+    place-items: center;
+}
+
+[frame="3"] {
+    height: 100%;
+}
+
+[frame="4"] {
+    text-align: center;
+}
+
+img {
+    display: block;
+    margin: auto;
+    max-width: 40%;
+}
+
+[frame="5"] img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+[frame] {
+    &::before {
+    --gc: #f0f4f8;
+    --gc2: #fff;
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: radial-gradient(circle at 50% 50%, var(--gc) 0 4vmin, transparent 50vmin 100%), repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 6deg, var(--gc2) 0 12deg);
+    background-blend-mode: soft-light;
+}
+}
+
+.publisher-links {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1ch;
+    font-size: x-small;
+}
+
+.text-center {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.ts b/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.ts
new file mode 100644
index 0000000..015045a
--- /dev/null
+++ b/src/app/shared/ui/viewer/components/thanks-page/thanks-page.component.ts
@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
+import { Playlist, PlaylistItem } from '../../../../../playlist/data-access/playlist.service';
+import { ViewerService } from '../../../../data-access';
+import { LangService } from '../../../../data-access/lang.service';
+import { CompositionEpisode } from '../../../../../@site-modules/@common-read';
+
+@Component({
+  selector: 'app-thanks-page',
+  standalone: false,
+  templateUrl: './thanks-page.component.html',
+  styleUrl: './thanks-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThanksPageComponent {
+  viewer: ViewerService = inject(ViewerService)
+  lang: LangService = inject(LangService)
+  @Input() episode: CompositionEpisode | undefined = undefined;
+
+  @Input() playlist: Playlist = [];
+  @Input() currentPlaylistItem: PlaylistItem | undefined;
+  @Input() playlistLink: string = "";
+
+
+  getCyrrentIndex() {
+    for (let i = 0; i < this.playlist.length; i++) {
+      const item = this.playlist[i];
+      if (this.currentPlaylistItem?.id == item.id && this.currentPlaylistItem?.site == item.site)
+        return i;
+    }
+
+    return -1;
+  }
+
+  getNextIndex() {
+    const index = this.getCyrrentIndex();
+    if (index < 0) return -1;
+
+    return ((index + 1) < this.playlist.length) ? index + 1 : -1;
+  }
+
+  readonly logo = {
+    src: '/assets/icons/chtnk.svg',
+    alt: 'Chytanka logo'
+  }
+  readonly heart = {
+    src: '/assets/images/heart-hand-drawn-symbol-outline-svgrepo-com.svg',
+    alt: 'Heart icon'
+  }
+  readonly map = {
+    src: '/assets/images/web-comics-svgrepo-com.svg',
+    alt: 'Map hand-drawn'
+  }
+
+}
diff --git a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.html b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.html
index 18bdb0d..8824a70 100644
--- a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.html
+++ b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.html
@@ -10,7 +10,7 @@
     <button class="button tshadow " [title]="lang.ph().share" (click)="showShare()">📢</button>
     <!-- <button class="button tshadow" [title]="'Download'" (click)="showDownload()">📥</button> -->
     }
-    <span class="title button" [title]="episode?.title">{{episode?.title}}</span>
+    <span class="title button" [title]="episode().title">{{episode().title}}</span>
     <app-view-mode-bar (valueChange)="setViewModeOption($event)" [options]="viewer.viewModeOptions"
         [value]="viewer.viewModeOption().code" />
 </app-overlay>
@@ -42,18 +42,18 @@
 
 
 <app-dialog class="dialog" #downloadDialog (onToggle)="onToggle.emit($event)"
-    [title]="'📥 Download '+ episode?.title">
+    [title]="'📥 Download '+ episode().title">
 
     <div style="display: grid; gap: .5ch;padding: 1ch;">
-        @if(episode) {
+        @if(episode()) {
         @if(!dl.getFromQueue(genId())){
         <article
-            style="display: grid; grid-template-columns: 1fr auto; padding: 1.5ch 2ch; border-radius:.5ch; box-shadow: var(--flat-shadow-medium);  gap: 1ch; align-items: center;">
-            <b style="margin-bottom: unset;">{{episode.title}}</b>
+            style="display: grid; grid-template-columns: 1fr auto; padding: 1.5ch 2ch; border-radius:.5ch; box-shadow: var(--shadow-1);  gap: 1ch; align-items: center;">
+            <b style="margin-bottom: unset;">{{episode().title}}</b>
             <button style="grid-row: span 2; " title="Start dowloading" class="button large tshadow"
-                (click)="dl.addToQueue(episode, genId())">▶️</button>
+                (click)="dl.addToQueue(episode(), genId())">▶️</button>
             <div style="align-items: center; display: grid; grid-template-columns: auto 1fr; gap: 1ch;">
-                <span>📥 {{episode.images.length}} pages</span>
+                <span>📥 {{episode().images.length}} pages</span>
             </div>
         </article>
 
diff --git a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss
index d3150d2..4e84f68 100644
--- a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss
+++ b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.scss
@@ -1,7 +1,7 @@
 progress {
     display: block;
     border-radius: var(--radius-2);
-    box-shadow: var(--flat-shadow-medium);
+    box-shadow: var(--shadow-1);
     height: 1lh;
     width: 100%;
     position: relative;
@@ -51,7 +51,7 @@ textarea {
     padding: 1ch;
     border-top-left-radius: var(--radius-2);
     border-bottom-left-radius: var(--radius-2);
-    box-shadow: var(--flat-shadow-medium);
+    box-shadow: var(--shadow-1);
 }
 
 .open-chtnk-link {
diff --git a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.ts b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.ts
index 08366bf..07272c9 100644
--- a/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.ts
+++ b/src/app/shared/ui/viewer/components/viewer-header/viewer-header.component.ts
@@ -1,4 +1,4 @@
-import { Component, computed, EventEmitter, HostListener, inject, Input, Output, PLATFORM_ID, Signal, signal, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, computed, effect, EventEmitter, HostListener, inject, input, Input, Output, PLATFORM_ID, Signal, signal, ViewChild } from '@angular/core';
 import { DomManipulationService, ViewerService } from '../../../../data-access';
 import { CompositionEpisode } from '../../../../../@site-modules/@common-read';
 import { Playlist, PlaylistItem } from '../../../../../playlist/data-access/playlist.service';
@@ -13,15 +13,54 @@ import { isPlatformBrowser } from '@angular/common';
 // const L = window.location;
 
 @Component({
-    selector: 'app-viewer-header',
-    templateUrl: './viewer-header.component.html',
-    styleUrls: [
-        './viewer-header.component.scss',
-        '../../../../../shared/ui/@styles/input-group.scss'
-    ],
-    standalone: false
+  selector: 'app-viewer-header',
+  templateUrl: './viewer-header.component.html',
+  styleUrls: [
+    './viewer-header.component.scss',
+    '../../../../../shared/ui/@styles/input-group.scss'
+  ],
+  standalone: false
 })
 export class ViewerHeaderComponent {
+
+  parseTagsFromTitle(title: string): Set<string> {
+    const matchedTags = title.toLowerCase().match(/\b(rtl|ltr|ver|long|scroll|nsfw|sfw|color|bw|demo|extra)\b/g) ?? [];
+    const tags = new Set(matchedTags);
+    return tags;
+  }
+
+  applyEpisodeTitleTags(tags: Set<string>): void {
+
+    const viewModeMap: Record<string, string> = {
+      'ver': '3',
+      'long': '3',
+      'scroll': '3',
+      'rtl': '1',
+      'ltr': '2',
+    };
+
+    for (const [tag, code] of Object.entries(viewModeMap)) {
+      if (tags.has(tag)) {
+        this.viewer.setViewModeOptionByCode(code);
+        break;
+      }
+    }
+
+    if (tags.has('nsfw')) {
+      this.episode().nsfw = true;
+    }
+  }
+
+
+  constructor() {
+    effect(() => {
+      const episode = this.episode();
+      if (!episode) return;
+      const tags = this.parseTagsFromTitle(episode.title);
+      this.applyEpisodeTitleTags(tags);
+    })
+  }
+
   viewer: ViewerService = inject(ViewerService)
   lang: LangService = inject(LangService)
   embedHelper = inject(EmbedHalperService);
@@ -39,7 +78,11 @@ export class ViewerHeaderComponent {
   @Input() currentPlaylistItem: PlaylistItem | undefined;
 
   // @Input() playlist: Playlist = [];
-  @Input() episode: CompositionEpisode | undefined = undefined;
+  // @Input() episode: CompositionEpisode | undefined = undefined;
+  episode = input<CompositionEpisode>({
+    title: '',
+    images: []
+  })
   @Output() onToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
 
 
@@ -63,11 +106,11 @@ export class ViewerHeaderComponent {
     this.domMan.setHotkeys(event, this.hotKeys)
   }
 
-  isFileRoute =  computed(() => {
+  isFileRoute = computed(() => {
     const L = (isPlatformBrowser(this.platformId)) ? window.location : { pathname: '' }
 
     return L.pathname.startsWith('/file/')
-})
+  })
 
   link: Signal<string> =
     //decodeURIComponent
@@ -87,7 +130,7 @@ export class ViewerHeaderComponent {
 
   shareWith() {
     const shareData = {
-      title: this.episode?.title,
+      title: this.episode().title,
       url: this.link(),
     };
     navigator?.share(shareData)
diff --git a/src/app/shared/ui/viewer/viewer.component.html b/src/app/shared/ui/viewer/viewer.component.html
index 9183a8f..7d5c0e5 100644
--- a/src/app/shared/ui/viewer/viewer.component.html
+++ b/src/app/shared/ui/viewer/viewer.component.html
@@ -41,53 +41,11 @@
     <div>
         <div class="page">
             <figure class="last-hint-page" [class]="viewer.viewModeOption().mode">
-                <app-manga-page-even [class]="viewer.viewModeOption().mode" [dir]="viewer.viewModeOption().dir">
-                    <div dir="ltr" frame="1" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
-                        <img style="display: block; max-width:50%;  margin: auto;"
-                            src="/assets/images/heart-hand-drawn-symbol-outline-svgrepo-com.svg"
-                            alt="heart-hand-drawn-symbol-outline">
-                    </div>
-
-                    <div dir="ltr" frame="5" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
-                        <ng-content select="source-logo" />
-                    </div>
-
-                    <div dir="ltr" frame="2" style="padding: 1ch; width: 100%; display: grid; place-items: center;">
-                        <img style="display: block; max-width:50%;  margin: auto;"
-                            src="/assets/images/web-comics-svgrepo-com.svg" alt="map-hand-drawn-paper">
-                    </div>
-
-                    <div dir="ltr" frame="3"
-                        style="padding: 1ch; width: 100%; height: 100%; display: grid; place-items: center;">
-                        <img style="display: block; max-width: 40%; margin: auto;" src="/assets/icons/icon-line.svg"
-                            alt="Chytanka logo">
-                        <div>
-                            <p style="text-align: center;">Кінець епізоду</p>
-                            @if(episode?.publisher?.id) {
-                            <p>Робота від <a [href]="episode?.publisher?.site" target="_blank"
-                                    rel="noopener noreferrer">{{episode?.publisher?.name}}</a></p>
-                            <div
-                                style="display: flex; justify-content: center; flex-wrap: wrap; gap: 1ch; font-size: x-small;">
-                                @for (l of episode?.publisher?.links; track $index) {
-                                <a [href]="l.link" target="_blank" rel="noopener noreferrer">{{l.title}}</a>
-                                }
-                            </div>
-                            }
-                        </div>
-
-                        @if (getNextIndex() >=0 && playlist[getNextIndex()]; as next) {
-
-                        <a dir="ltr" [routerLink]="['/', next.site, next.id]"
-                            [queryParams]="{lang: lang.lang(), list: playlistLink, vm: viewer.viewModeOption().code}">
-                            {{next.title??
-                            lang.ph().untitled + ' ' + (getNextIndex() + 1)}} ⏩</a>
-                        }
-                    </div>
-                    <div dir="ltr" frame="4"
-                        style="padding: 1ch; text-align: center; display: grid; place-content: center;">
-                        <ng-content />
-                    </div>
-                </app-manga-page-even>
+                <app-thanks-page [playlist]="playlist" [currentPlaylistItem]="currentPlaylistItem"
+                    [episode]="episode" [playlistLink]="playlistLink">
+                    <ng-content ngProjectAs="source-logo" select="source-logo" />
+                    <ng-content />
+                </app-thanks-page>
 
             </figure>
         </div>
@@ -100,9 +58,11 @@
 </div>
 
 @defer{
+@if (episode) {
 <app-viewer-header [show]="showOverlay" [episode]="episode" [playlistLink]="playlistLink"
     [currentPlaylistItem]="currentPlaylistItem" (onToggle)="isDialogOpen.set($event)" />
 }
+}
 
 @defer{
 <app-viewer-footer [show]="showOverlay" [currentPlaylistItem]="currentPlaylistItem" [playlist]="playlist"
diff --git a/src/app/shared/ui/viewer/viewer.component.scss b/src/app/shared/ui/viewer/viewer.component.scss
index a88eb68..a64db1c 100644
--- a/src/app/shared/ui/viewer/viewer.component.scss
+++ b/src/app/shared/ui/viewer/viewer.component.scss
@@ -112,17 +112,3 @@ img {
 	pointer-events: none;
 	user-select: none;
 }
-// .last-hint-page {
-// 	// width: 100%;
-// 	border: 2px dashed red;
-// }
-// app-manga-page-even {
-// 	min-height: 0;
-// 	max-height: 100dvh;
-// 	width: 50vw;
-// }
-
-app-manga-page-even.long, .last-hint-page.long {
-	height: unset;
-	width: 100%;
-}
\ No newline at end of file
diff --git a/src/app/shared/ui/viewer/viewer.long.component.scss b/src/app/shared/ui/viewer/viewer.long.component.scss
index a936939..3b1d0df 100644
--- a/src/app/shared/ui/viewer/viewer.long.component.scss
+++ b/src/app/shared/ui/viewer/viewer.long.component.scss
@@ -26,11 +26,15 @@
 			display: block;
 			width: 100%;
 
+			figure {
+				width: 100%;
+			}
+
 			img {
 				display: block;
 				width: auto;
 				margin: 0 auto;
-				max-width: 100%;
+				width: 100%;
 				height: auto;
 				position: relative;
 			}
diff --git a/src/assets/icons/chtnk.svg b/src/assets/icons/chtnk.svg
new file mode 100644
index 0000000..8bdbd02
--- /dev/null
+++ b/src/assets/icons/chtnk.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+   
+        <path fill="#fff"
+            d="m46.25 99.25-16.5-8.38 1.13-11.63-2.63-13.13 11-10.88 49 2.13 11.63 8.63-4.5 24.38-17.13 9.13-32-.25z" />
+        <path
+            d="m62.96 145.53-31.75-15.54a1.51 1.51 0 0 1-.74-.99l-6.5-35.35c-.11-.67.38-1.06.98-.78l38.25 16.67a3.49 3.49 0 0 0 2.09 0l35.99-16.64c.6-.28 1.06.15.95.78l-6.15 35.35a1.72 1.72 0 0 1-.7.99l-29.85 15.5h-.03a3.13 3.13 0 0 1-1.31.26 2.68 2.68 0 0 1-1.23-.25zm-4.66-46.2h-.18a12.8 12.8 0 0 0-8.12 2.93l-.96-.42c.04-.17.09-.33.13-.5a4.15 4.15 0 0 0-.55.5l-14.09-6.15a6.25 6.25 0 0 1 .6-.85c.1-.14.28-.28.39-.42-.6.25-1.24.56-1.91.88l-10.1-4.41a.85.85 0 0 0-.5-.07 11.64 11.64 0 0 0-.07-1.52c-.28-2.69.43-5.62 4.49-7.91-2.16.03-5.9 1.52-8.94-1.42s-3.92-3.17-5.4-3.14c1.7-.78 2.44-1.52 3.15-4.13s2.43-5.09 7.03-5.76c-2.02-.74-6.04-.74-7.85-4.55-1.76-3.82-2.47-4.38-3.92-4.88 1.88-.1 2.83-.53 4.42-2.72s4.1-3.88 8.65-2.82c-1.62-1.42-5.37-2.86-5.65-7.1-.28-4.2-.74-4.98-1.87-5.97 1.77.6 2.83.53 5.09-.92s5.22-2.12 9.07.5c-.99-1.91-3.99-4.63-2.72-8.66s1.13-4.91.39-6.25c1.45 1.2 2.44 1.52 5.09.99s5.65-.11 8.3 3.74c-.25-2.11-2.05-5.75.6-9.04s2.82-4.16 2.61-5.68c.92 1.62 1.73 2.3 4.38 2.75s5.3 1.94 6.39 6.46c.53-2.08.18-6.11 3.82-8.22s4.13-2.9 4.48-4.35c.28 1.84.78 2.76 3.11 4.13 2.3 1.38 4.24 3.71 3.6 8.34 1.27-1.73 2.37-5.62 6.53-6.29s4.91-1.2 5.76-2.44c-.42 1.84-.25 2.87 1.38 4.98 1.66 2.12 2.61 5.02.35 9.08 1.8-1.16 4.24-4.38 8.37-3.5s5.02.67 6.25-.18c-1.06 1.56-1.27 2.58-.49 5.16s1.55 5.44-2.02 8.41c2.12-.71 5.16-2.02 8.13-.07 3.53 2.33 4.41 2.43 5.9 2.08-1.56 1.06-2.12 1.94-2.33 4.63s-1.63 5.51-6.04 7.03c2.12.35 6.29-.46 8.72 2.96s3.25 3.85 4.74 4.06c-1.8.43-2.69 1.06-3.85 3.47s-3.54 4.55-8.2 4.34c1.84 1.09 6 1.84 7.06 5.93s1.63 4.77 2.94 5.51c-1.84-.24-2.9 0-4.84 1.84s-4.95 2.97-9.19 1.13c1.35 1.7 4.95 3.88 4.45 8.09s-.21 5.05.75 6.21a4.77 4.77 0 0 0-2.48-.74l.5-2.79c.1-.7-.36-1.09-.99-.81l-8.62 3.99a12.03 12.03 0 0 1-2.58-1.94c.22.7.67 1.62 1.1 2.61l-13.39 6.18c-.1-.21-.21-.46-.35-.7v.84l-1.17.53a14.6 14.6 0 0 0-8.05-2.93 5.63 5.63 0 0 1-5.65 5.48 5.64 5.64 0 0 1-5.65-5.51zM33.01 79.66c-1.8 2.68-3.89 8.26.49 12.04a17.04 17.04 0 0 0 2.48 1.77c6.81 4.02 18.71 6.14 27.4 5.93a71.97 71.97 0 0 0 5.9-.35c9.15-.82 19.67-3.22 23.45-8.83v.1c3-4.45 2.37-7.8 1.1-9.6 2.47-4.14 3.39-8.83 3.92-13.88a6.38 6.38 0 0 1-1.52.35 17.98 17.98 0 0 0-4.11.88c1.47 1.89 1.66 4.68.86 8.8-.74 4.02-2.05 6.5-4.17 8.01a12.89 12.89 0 0 1-11.76 1.49 13.84 13.84 0 0 1-6.04-4.03 13 13 0 0 1-1.7-6.32c0-1.45-.03-1.59-.81-1.8a49.81 49.81 0 0 0-9.18 0c-.71.21-.82-.36-.82 1.37a16.07 16.07 0 0 1-1.2 5.8c-1.2 2.36-4.98 4.8-8.68 5.58-4.67.95-9.82-1.03-12.01-4.67-1.94-3.28-2.9-10.84-1.66-13.27a4.61 4.61 0 0 1 .48-.76 16.58 16.58 0 0 0-4.58-.94c-.42-.07-.81-.11-1.17-.18.54 4.49 1.2 8.73 3.33 12.51zm39.48-11.73c-1.41 1.17-1.94 2.86-2.11 6.5-.18 4.06.35 6.08 2.04 7.95 2.3 2.51 7.17 4.34 10.35 3.92 3.5-.46 6.75-2.47 8.02-4.98 1.55-3.07 2.3-9.78 1.3-11.87a4.2 4.2 0 0 0-.68-1.01 3.92 3.92 0 0 0-1.01 1.01 5.96 5.96 0 0 0 .23-1.7 13.31 13.31 0 0 0-5.25-1.93h.04a20.24 20.24 0 0 0-3.05-.36 5.43 5.43 0 0 0 .08.78 8.11 8.11 0 0 0-.55-.8h-.44c-3.62 0-7.1.91-8.97 2.49zm-37.04 7.52c.7 4.14 1.51 6.08 3.32 7.88 3.7 3.71 9.74 3.92 14.83.56a7.42 7.42 0 0 0 3.56-4.83c.89-3.32.39-8.45-.98-10.39-.75-1.02-3.39-2.33-5.94-2.86a19.37 19.37 0 0 0-3.27-.39 4.01 4.01 0 0 0-2.56 1.88 2.35 2.35 0 0 0-.2-1.8 19.18 19.18 0 0 0-4.81 1.09 6.85 6.85 0 0 0-2.99 1.94 4.14 4.14 0 0 1 .23.85 2.67 2.67 0 0 0-.44-.57c-1.07 1.49-1.27 3.6-.76 6.65l.01-.01zm33.16-2.08c.56.18.67.07.85-.95a10 10 0 0 1 1.8-4.7c1.7-1.84 5.66-3.05 9.73-3.14a6.92 6.92 0 0 0-3.02-.92c-2.65-.36-5.37-1.73-6.64-6.22-.46 2.08.45 6.96-3.08 9.22-3.56 2.26-5.54 2.33-5.83 3.78-.35-1.84-.35-2.79-2.71-4.1-2.37-1.27-3.82-3.6-3.39-8.23-1.17 1.8-2.12 5.72-6.26 6.53l-.81.17h.04c5.54.75 8.23 2.83 8.76 6.71.24 1.95.31 1.98 2.36 1.63a20.26 20.26 0 0 1 3.08-.18 25.43 25.43 0 0 1 5.12.4zm-30.8-9.11c-1.26 1.64-1.62 2.54-1.63 3.21A12.91 12.91 0 0 1 43 64.79l-.07.03q.36-.04.69-.08c-.37-.4-.83-.87-1.4-1.54l-1.7-4.27a14.22 14.22 0 0 1-2.71 5.33zm46.41.49a16.28 16.28 0 0 1 6.17 1.82 8.65 8.65 0 0 0-1.26-2.13c-1.59-2.16-4.24-2.23-1.91-6.26a9 9 0 0 0-2.37 2.3 12.95 12.95 0 0 0-2.39 4.12c.59.03 1.18.08 1.76.15zm-61.6 27.97.21 1.17a3.24 3.24 0 0 0-1.37.39 5.12 5.12 0 0 0 1.17-1.55l-.01-.01zm35.57.43-.04.03c.18-.49.78.6 1.91.6s2.54-.84 3.78-.88a7.22 7.22 0 0 1 1.92.32 6.44 6.44 0 0 0 1.86.32c1.02-.07 1.59-1.06 1.83-.68.21.43-.99 1.1-1.9 1.1s-2.4-1.02-3.68-.99-2.86 1.2-3.88 1.2-1.98-.53-1.81-1.02h.01zm-11.27-1.56a.53.53 0 0 1 .53-.53.53.53 0 0 1 .53.53.53.53 0 0 1-.53.54.53.53 0 0 1-.53-.54zm31.08.04a.35.35 0 0 1 .35-.35.35.35 0 0 1 .36.35.35.35 0 0 1-.36.35.35.35 0 0 1-.35-.35zm-33.16-1.87a.53.53 0 0 1 .53-.53.53.53 0 0 1 .53.53.53.53 0 0 1-.53.53.53.53 0 0 1-.53-.53zm35.03-.07a.35.35 0 0 1 .35-.35.35.35 0 0 1 .36.35.35.35 0 0 1-.36.35.35.35 0 0 1-.35-.35zm-3.28-.25a.53.53 0 0 1 .53-.53.53.53 0 0 1 .53.53.53.53 0 0 1-.53.53.53.53 0 0 1-.53-.53zm-28.33-.21a.35.35 0 0 1 .35-.35.35.35 0 0 1 .36.35.35.35 0 0 1-.36.35.35.35 0 0 1-.34-.35h-.01zm26.33-11.24c0-3.7 2.13-6.71 4.76-6.71s4.77 3 4.77 6.71-2.13 6.71-4.77 6.71-4.76-3-4.76-6.71zm-30.73 0c0-3.7 2.13-6.71 4.77-6.71s4.77 3 4.77 6.71-2.14 6.71-4.77 6.71-4.77-3-4.77-6.71z" />
+   
+</svg>
\ No newline at end of file
diff --git a/src/favicon.ico b/src/favicon.ico
old mode 100644
new mode 100755
index bf63ddf..2d10844
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/styles.scss b/src/styles.scss
index d5b0946..52b0aff 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,6 +9,7 @@
     --blur: 1ch;
     --t: 133.333334ms; //266.666667ms; //calc(1s / 60 * 16);
     --surface: hsl(203.44 8% 16%);
+    --surface-avarage: oklch(from var(--avarage-color, var(--surface)) 0.2 0.0256 h);
     --text: hsl(200 5% 80%);
     --dot-color: #000;
     --bg-1: var(--gl) 0px 0px / 4px 4px;
@@ -20,6 +21,7 @@
     font-size: 16px;
 
     @media (prefers-color-scheme: light) {
+        --surface-avarage: oklch(from var(--avarage-color, #ffd60a) 1 0.016 h);
         --surface: #f7fcff;
         --text: #010102;
     }
@@ -75,7 +77,7 @@ input {
         transition: all var(--t);
         text-wrap: balance;
         -webkit-tap-highlight-color: transparent;
-        box-shadow: var(--flat-shadow-medium);
+        box-shadow: var(--shadow-1);
     }
 
     &.small {
@@ -104,15 +106,17 @@ input {
         color: white;
     }
 
-
+    &.border {
+        border: var(--border-size) solid var(--border-color);
+    }
 
     &:hover {
-        background-color: #103651;
-        color: #ffd60a;
+        color: #103651;
+        background-color: #ffd60a;
 
         @media (prefers-color-scheme: light) {
-            background-color: #f8d755;
-            color: #103651;
+            color: #f8d755;
+            background-color: #166496;
         }
     }
 
@@ -171,29 +175,35 @@ a[target="_blank"]:after {
 }
 
 :root {
-    --shc: #ffd60a; //rgb(0, 39, 65);
+    --ratio: 257/364;
+    --accent: #ffd60a;
+    
     --avarage-l: 0.48;
     --avarage-l-2: 0.36;
 
     @media (prefers-color-scheme: light) {
-        --shc: #166496;
+        --accent: #166496;
     }
 
     & {
-        --shadow-color: oklch(from var(--shc) var(--avarage-l-2) c h);
-        --shadow-distance: .25rem;
-        --shadow-distance-2: .5rem;
+        --avarage: oklch(from var(--avarage-color, #c3d3e3) var(--avarage-l) 0.0192 h);
+
+        --border-size: 0.2rem;
+        --border-color: oklch(from var(--avarage) var(--avarage-l) c h);
+
+        --shadow-color: oklch(from var(--avarage) var(--avarage-l-2) c h);
+        --shadow-distance: var(--border-size) var(--border-size);
+        --shadow-distance-2: calc(var(--border-size) * 2) calc(var(--border-size) * 2);
 
-        // --flat-shadow-high: 1px 1px var(--shc),
-        //     2px 2px var(--shc),
-        //     3px 3px 0 -1px var(--shc),
-        //     4px 4px 0 -1px var(--shc);
+        --shadow-1: 1px 1px var(--surface), var(--shadow-distance) var(--shadow-color);
+        --shadow-2: 2px 2px var(--surface), var(--shadow-distance-2) var(--shadow-color);
+
+        --text-shadow-1: 1px 1px var(--surface), var(--shadow-distance) var(--shadow-color);
+        --text-shadow-1: 2px 2px var(--surface), var(--shadow-distance-2) var(--shadow-color);
+
+        --filter-shadow-1: drop-shadow(1px 1px var(--surface)) drop-shadow(var(--shadow-distance) var(--shadow-color));
 
-        // --flat-shadow-medium: 1px 1px var(--shc),
-        //     2px 2px var(--shc);
 
-        --flat-shadow-medium: 1px 1px var(--surface), var(--shadow-distance) var(--shadow-distance) var(--shadow-color);
-        --flat-shadow-high: 1px 1px var(--surface), var(--shadow-distance-2) var(--shadow-distance-2) var(--shadow-color);
     }
 }
 
@@ -225,4 +235,9 @@ a[target="_blank"]:after {
             filter: blur(var(--blur));
         }
     }
+}
+
+::selection {
+    background: var(--accent);
+    color: var(--surface);
 }
\ No newline at end of file