diff --git a/cmd/web/kaku/render.go b/cmd/web/kaku/render.go
index 974d37b..c060efc 100644
--- a/cmd/web/kaku/render.go
+++ b/cmd/web/kaku/render.go
@@ -168,7 +168,7 @@ func render(b *strings.Builder, nodes []Node) {
 			b.WriteString("</figure>")
 
 		case *Audio:
-			b.WriteString(`<audio controls="" preload="metadata" src="/uploaded/`)
+			b.WriteString(`<audio controls="" preload="metadata" src="`)
 			b.WriteString(html.EscapeString(safeUrl(v.URL)))
 			b.WriteString(`" type="audio/mpeg"></audio>`)
 		case *Aside:
diff --git a/ui/css/ronbun.css b/ui/css/ronbun.css
index 6242c48..c42ed8d 100644
--- a/ui/css/ronbun.css
+++ b/ui/css/ronbun.css
@@ -326,72 +326,99 @@
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  align-items: start;
   gap: 10px;
+  position: relative;
   form {
     max-width: unset;
-    flex-basis: 50%;
     width: 100%;
   }
-  article {
-      flex-basis: 50%;
-      width: 100%;
-
-  }
   textarea {
     max-width: unset;
-    height: 80vh;
   }
 }
 
-.media-picker {
-    padding-left:0;
-    overflow-y: scroll;
-    max-height: 50vh;
-    > *+* {
-        margin-top: 1em;
-        width: 100%;
-    }
-
-    li {
-        padding:0;
-    }
+.media-preview-container {
+  position: sticky;
+  top: var(--margin-s);
 }
+
+.toggle-preview-btn {
+  position: static;
+  margin: var(--margin-s) 0;
+}
+
+.media-picker {
+  display: none;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  overflow-y: scroll;
+  height: 100%;
+  max-height: 60vh;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
 .media-picker__media {
-display: grid;
-grid-template-columns: 150px 1fr;
-gap:1em;
-line-height: 1;
+  aspect-ratio: 1/1;
+  position: relative;
   img,
-  audio,
   video {
-    width: 150px;
-    height: auto;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }
 
 .media-picker__buttons {
-    display: flex;
-    margin-top:1em;
-    gap: 0.5em;
-    align-items: flex-start;
+  visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  gap: 6px;
+  button {
+    flex: 0 1 32px;
+  }
 }
 
-[theme="raw"] .media-picker__buttons {
-    display: none;
+.media-picker__media:hover .media-picker__buttons {
+  visibility: visible;
 }
 
 .page-preview {
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   padding: var(--padding-form);
-  overflow-y: scroll;
-max-height: 100vh;
+  display: block;
+
   svg {
       max-width: 100%;
   }
 }
 
+.media-preview-container[data-show="false"] {
+  display: none;
+}
 
+.media-preview-container[data-show="gallery"] {
+  .media-picker {
+    display: grid;
+  }
+  .page-preview {
+    display: none;
+  }
+}
+
+.media-preview-container[data-show="preview"] {
+  .media-picker {
+    display: none;
+  }
+  .page-preview {
+    display: block;
+  }
+}
 
 .edit-footer {
   position: fixed;
diff --git a/ui/html/pages/create.tmpl b/ui/html/pages/create.tmpl
index 34088d5..4680003 100644
--- a/ui/html/pages/create.tmpl
+++ b/ui/html/pages/create.tmpl
@@ -2,13 +2,17 @@
     <main>
         <h1>New page</h1>
         <div class="edit-footer">
+            <div>
+                <button data-small data-secondary onClick="toggleGallery()" id="mediasBtn">Medias</button>
+                <button data-small onClick="togglePreview()" id="previewBtn">Preview</button>
+            </div>
             <div>
                 <form data-naked action='/files/upload' method='POST' class="media-form">
                     <div>
                         <input type="file" multiple="multiple" id="fileUpload" value="Upload file" />
                     </div>
                     <div>
-                        <button data-small type='submit' data-size="20" id="uploadMediaBtn" >
+                        <button data-small type='submit' data-size="20" id="uploadMediaBtn" disabled>
                             Upload file
                         </button>
                     </div>
@@ -19,15 +23,6 @@
         <div class="edit-page">
         <form action='/page/create' method='POST'>
             <input type='hidden' id="csrf_token" name='csrf_token' value='{{.CSRFToken}}'>
-
-            <label for="bodyError">Content:</label>
-            <textarea id="body" name='body' {{with .Form.FieldErrors.body}} aria-invalid aria-describedby="bodyError" {{end}}>{{.Form.Body}}</textarea>
-            {{with .Form.FieldErrors.body}}
-                <span id="summaryError">{{.}}</span>
-            {{end}}
-            {{template "mediaselector" .}}
-
-
             <label for="name">Title:</label>
             <input autofocus type='text' id="name" name='name' value="{{.Form.Name}}" {{with .Form.FieldErrors.name}} aria-invalid
             aria-describedby="nameError" {{end}}>
@@ -42,6 +37,11 @@
                 <span id="summaryError">{{.}}</span>
             {{end}}
 
+            <label for="bodyError">Content:</label>
+            <textarea id="body" name='body' {{with .Form.FieldErrors.body}} aria-invalid aria-describedby="bodyError" {{end}}>{{.Form.Body}}</textarea>
+            {{with .Form.FieldErrors.body}}
+                <span id="summaryError">{{.}}</span>
+            {{end}}
 
             <div class="grouped">
                 <div>
@@ -111,11 +111,50 @@
                 <input type='submit' value='Publish page' data-size="20">
             </div>
         </form>
+        <div class="media-preview-container" data-show="preview" >
+
+            <div class="media-picker">
+            {{range $image := .Files}}
+                {{if eq  $image.Extension ".png" ".jpg" ".jpeg" ".gif" ".webp" ".avif"}}
+                    <div class="media-picker__media" id="{{$image.Filename}}">
+                    <img loading="lazy" src="{{$image.Slug}}" />
+                    <div class="media-picker__buttons">
+                        <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true)">Insert Image</button>
+                        <button data-small data-secondary
+                            onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}})">Delete</button>
+                    </div>
+                    </div>
+                {{end}}
+                {{if eq  $image.Extension ".mp4"}}
+                    <div class="media-picker__media">
+                    <video src="{{$image.Slug}}" ></video>
+                    <div class="media-picker__buttons">
+                        <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true)">Insert Video</button>
+                        <button data-small data-secondary
+                            onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}})">Delete</button>
+                    </div>
+                    </div>
+                {{end}}
+                {{if eq  $image.Extension ".mp3"}}
+                    <div class="media-picker__media">
+                        <div style="text-align: center;">
+                            <strong>{{$image.Filename}}{{$image.Extension}}</strong>
+                        </div>
+                    <div class="media-picker__buttons">
+                        <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true)">Insert Aduio</button>
+                        <button data-small data-secondary
+                            onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}})">Delete</button>
+                    </div>
+                    </div>
+                {{end}}
+            {{end}}
+        </div>
         <article class="page-preview {{.Form.Category}}"></article>
         </div>
         </div>
     </main>
     <script>
+    autosize(document.querySelector('textarea'));
 
     const formated = document.querySelector('article');
     const textarea = document.querySelector('textarea');
diff --git a/ui/html/pages/edit.tmpl b/ui/html/pages/edit.tmpl
index 54f06af..24133c1 100644
--- a/ui/html/pages/edit.tmpl
+++ b/ui/html/pages/edit.tmpl
@@ -2,6 +2,10 @@
     <main>
         <h1>Edit page</h1>
         <div class="edit-footer">
+            <div>
+                <button data-small data-secondary onClick="toggleGallery()" id="mediasBtn">Medias</button>
+                <button data-small onClick="togglePreview()" id="previewBtn">Preview</button>
+            </div>
             <div>
                 <form data-naked action='/files/upload' method='POST' class="media-form">
                     <div>
@@ -22,17 +26,11 @@
             <input type="hidden" value="{{.Form.Id}}" name="id"/>
             <input type="hidden" value="{{.Form.Slug}}" name="slug"/>
 
-
-            <label for="bodyError">Content:</label>
-            <textarea autofocus id="body" name='body' {{with .Form.FieldErrors.body}} aria-invalid aria-describedby="bodyError" {{end}}>{{.Form.Body}}</textarea>
-            {{with .Form.FieldErrors.body}}
-                <span id="summaryError">{{.}}</span>
-            {{end}}
-            {{template "mediaselector" .}}
+            <img src="/og/{{.Form.Slug}}" />
 
             <label for="name">Title:</label>
             <span>Changing the title will also change the page url</span>
-            <input type='text' id="name" name='name' value="{{.Form.Name}}" {{with .Form.FieldErrors.name}} aria-invalid
+            <input autofocus type='text' id="name" name='name' value="{{.Form.Name}}" {{with .Form.FieldErrors.name}} aria-invalid
             aria-describedby="nameError" {{end}}>
             {{with .Form.FieldErrors.name}}
             <span id="nameError">{{.}}</span>
@@ -45,6 +43,14 @@
             <span id="summaryError">{{.}}</span>
             {{end}}
 
+            <label for="bodyError">Content:</label>
+            <textarea id="body" name='body' {{with .Form.FieldErrors.body}} aria-invalid aria-describedby="bodyError" {{end}}>{{.Form.Body}}</textarea>
+            {{with .Form.FieldErrors.body}}
+                <span id="summaryError">{{.}}</span>
+            {{end}}
+
+
+
             <div class="grouped">
                 <div>
                     {{ $host := .Form.Host }}
@@ -108,21 +114,54 @@
                 <label for="menu">Show Sub Pages List</label>
             </fieldset>
 
-            <div>
-                <details>
-                <summary>OG Image Preview</summary>
-                <img src="/og/{{.Form.Slug}}" />
-            </div>
-
             <div>
                 <button type='submit' data-size="20">Save changes</button>
             </div>
         </form>
+        <div class="media-preview-container" data-show="preview" >
+
+            <div class="media-picker">
+            {{range $image := .Files}}
+                {{if eq  $image.Extension ".png" ".jpg" ".jpeg" ".gif" ".webp" ".avif"}}
+                    <div class="media-picker__media" id="{{$image.Filename}}">
+                    <img loading="lazy" src="{{$image.Slug}}" />
+                    <div class="media-picker__buttons">
+                        <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true)">Insert Image</button>
+                        <button data-small data-secondary
+                            onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}})">Delete</button>
+                    </div>
+                    </div>
+                {{end}}
+                {{if eq  $image.Extension ".mp4"}}
+                    <div class="media-picker__media">
+                    <video src="{{$image.Slug}}" ></video>
+                    <div class="media-picker__buttons">
+                        <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true)">Insert Video</button>
+                        <button data-small data-secondary
+                            onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}})">Delete</button>
+                    </div>
+                    </div>
+                {{end}}
+                {{if eq  $image.Extension ".mp3"}}
+                    <div class="media-picker__media">
+                        <div style="text-align: center;">
+                            <strong>{{$image.Filename}}{{$image.Extension}}</strong>
+                        </div>
+                    <div class="media-picker__buttons">
+                        <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true)">Insert Audio</button>
+                        <button data-small data-secondary
+                            onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}})">Delete</button>
+                    </div>
+                    </div>
+                {{end}}
+            {{end}}
+        </div>
         <article class="page-preview {{.Form.Category}}"></article>
         </div>
         </div>
     </main>
 <script>
+autosize(document.querySelector('textarea'));
 
 const formated = document.querySelector('article');
 const textarea = document.querySelector('textarea');
diff --git a/ui/html/partials/mediaselector.tmpl b/ui/html/partials/mediaselector.tmpl
deleted file mode 100644
index ec19689..0000000
--- a/ui/html/partials/mediaselector.tmpl
+++ /dev/null
@@ -1,54 +0,0 @@
-{{define "mediaselector"}}
-<div>
-<details>
-<summary>Medias</summary>
-    <ul role="list" class="media-picker">
-    {{range $image := .Files}}
-        {{if eq  $image.Extension ".png" ".jpg" ".jpeg" ".gif" ".webp" ".avif"}}
-            <li class="media-picker__media" id="{{$image.Filename}}">
-            <img loading="lazy" src="{{$image.Slug}}" />
-            <span>
-                <small><strong>{{$image.Filename}}{{$image.Extension}}</strong></small><br>
-                <small><code>(image: {{$image.Filename}}{{$image.Extension}} alt: )</code></small>
-                <div class="media-picker__buttons">
-                <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true, event)">Insert</button>
-                <button data-small data-secondary
-                    onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}}, event)">Delete</button>
-            </div>
-            </span>
-
-            </li>
-        {{end}}
-        {{if eq  $image.Extension ".mp4"}}
-            <li class="media-picker__media" id="{{$image.Filename}}">
-            <video controls src="{{$image.Slug}}" ></video>
-             <span>
-                <small><strong>{{$image.Filename}}{{$image.Extension}}</strong></small><br>
-                <small><code>(video: {{$image.Filename}}{{$image.Extension}})</code></small>
-                <div class="media-picker__buttons">
-                <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true, event)">Insert Video</button>
-                <button data-small data-secondary
-                    onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}}, event)">Delete</button>
-            </div>
-            </span>
-            </li>
-        {{end}}
-        {{if eq  $image.Extension ".mp3"}}
-            <li class="media-picker__media" id="{{$image.Filename}}">
-                <audio controls src="{{$image.Slug}}"></audio>
-                 <span>
-                <small><strong>{{$image.Filename}}{{$image.Extension}}</strong></small><br>
-                <small><code>(audio: {{$image.Filename}}{{$image.Extension}})</code></small>
-                <div class="media-picker__buttons">
-                <button data-small onClick="insertMedia({{$image.Filename}}+{{$image.Extension}}, {{$image.Extension}}, true, event)">Insert audio</button>
-                <button data-small data-secondary
-                    onClick="deleteMedia({{$image.Filename}}+{{$image.Extension}}, event)">Delete</button>
-            </div>
-            </span>
-            </li>
-        {{end}}
-    {{end}}
-    </ul>
-</details>
-</div>
-{{end}}
diff --git a/ui/html/partials/rawcss.tmpl b/ui/html/partials/rawcss.tmpl
index e1b4cdd..db39fd9 100644
--- a/ui/html/partials/rawcss.tmpl
+++ b/ui/html/partials/rawcss.tmpl
@@ -326,16 +326,58 @@ background: lightgrey;
   }
   textarea {
     max-width: unset;
-    width:100%;
-    height:30vh;
   }
 }
 
+.media-preview-container {
+  position: sticky;
+  top: 20px;
+}
+
 .toggle-preview-btn {
   position: static;
   margin: 20px 0;
 }
 
+.media-picker {
+  display: none;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  overflow-y: scroll;
+  height: 100%;
+  max-height: 60vh;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.media-picker__media {
+  aspect-ratio: 1/1;
+  position: relative;
+  img,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.media-picker__buttons {
+  visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  gap: 6px;
+  button {
+    flex: 0 1 32px;
+  }
+}
+
+.media-picker__media:hover .media-picker__buttons {
+  visibility: visible;
+}
+
 .page-preview {
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -347,56 +389,40 @@ background: lightgrey;
   }
 }
 
-
-.media-picker {
-    padding-left:0;
-    overflow-y: scroll;
-    max-height: 50vh;
-    > *+* {
-        margin-top: 1em;
-        width: 100%;
-    }
-
-    li {
-        padding:0;
-    }
+.media-preview-container[data-show="false"] {
+  display: none;
 }
-.media-picker__media {
-display: grid;
-grid-template-columns: 150px 1fr;
-gap:1em;
-line-height: 1;
-  img,
-  audio,
-  video {
-    width: 150px;
-    height: auto;
+
+.media-preview-container[data-show="gallery"] {
+  .media-picker {
+    display: grid;
+  }
+  .page-preview {
+    display: none;
   }
 }
 
-.media-picker__buttons {
-    display: flex;
-    margin-top:1em;
-    gap: 0.5em;
-    align-items: flex-start;
-}
-
-[theme="raw"] .media-picker__buttons {
+.media-preview-container[data-show="preview"] {
+  .media-picker {
     display: none;
-}
-
-.page-preview {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: var(--padding-form);
-  overflow-y: scroll;
-max-height: 100vh;
-  svg {
-      max-width: 100%;
+  }
+  .page-preview {
+    display: block;
   }
 }
 
 .edit-footer {
+  position: fixed;
+  width: 100%;
+  background-color: var(--background);
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  padding: calc(20px / 2) 40px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: calc(20px / 4) calc(20px);
 }
 
 @media (max-width: 960px) {
@@ -417,16 +443,5 @@ max-height: 100vh;
 }
 
 
-form > * {
-  display: block;
-}
-
-form > * + *, .grouped > *+*{
-  margin-top: var(--margin-s);
-  margin-top: 10px;
-  width:100%;
-}
-
-
 </style>
 {{end}}
diff --git a/ui/static/index.css b/ui/static/index.css
index 524a2bb..31c4b74 100644
--- a/ui/static/index.css
+++ b/ui/static/index.css
@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--black:#000;--white:#fff;--grey:#eee;--grey-dark:#aaa;--grey-darker:#555;--grey-pitchblack:#222;--focus:#666;--yellow:#f2d336;--yellow-dark:#dfc130;--yellow-darker:#98841f;--teal:#70eba7;--teal-dark:#5fc88f;--teal-darker:#479e6d;--pink:#ffadc9;--pink-dark:#ff85ad;--pink-darker:#d6245f;--red:#f37149;--red-dark:#dd5d36;--red-darker:#c93d13;--blue:#9094fe;--blue-dark:#767aef;--blue-darker:#595fd9;--margin-l:calc(((20/16)*1rem) + (64 - 20)*var(--fluid-bp));--margin-s:calc(((25/16)*1rem) + (30 - 25)*var(--fluid-bp))}@media screen and (width>=1440px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}:root{--text:var(--black);--background:var(--white);--accent:var(--grey);--background-dark:var(--grey-pitchblack);--border:var(--grey-dark);--picker:var(--grey)}[theme=light]{--text:var(--black);--background:var(--white);--accent:var(--grey);--background-dark:var(--grey);--border:var(--grey-dark);background-color:var(--background);color:var(--text)}[theme=dark]{--text:var(--white);--background:var(--black);--accent:var(--grey);--background-dark:var(--grey-pitchblack);--border:var(--grey-darker);background-color:var(--background);color:var(--text)}[theme=dark].projects,[theme=light].projects{--picker:var(--teal)}[theme=dark].knowledge,[theme=light].knowledge{--picker:var(--blue)}[theme=dark].portfolio,[theme=light].portfolio{--picker:var(--red)}[theme=dark].journal,[theme=light].journal{--picker:var(--yellow)}[theme=dark].about,[theme=light].about{--picker:var(--pink)}[theme=dark].portfolio,[theme=dark] .portfolio,[theme=light].portfolio,[theme=light] .portfolio{--picker:var(--red)}[theme=color].portfolio,[theme=color] .portfolio{--text:var(--black);--background:var(--red);--accent:var(--white);--background-dark:var(--red-dark);--border:var(--red-darker);--picker:var(--red);background-color:var(--background);color:var(--text)}[theme=color].hire,[theme=color] .hire{--text:var(--black);--background:var(--white);--accent:var(--white);--background-dark:var(--grey);--border:var(--grey-dark);--picker:var(--grey-darker);background-color:var(--background);color:var(--text)}[theme=color].hire svg,[theme=color] .hire svg{--text:var(--black);--background:var(--white);--accent:var(--white);--background-dark:var(--red-dark);--border:var(--red-darker);--picker:var(--grey-darker);background-color:var(--background);color:var(--text)}[theme=color].projects,[theme=color] .projects{--text:var(--black);--background:var(--teal);--accent:var(--white);--background-dark:var(--teal-dark);--border:var(--teal-darker);--picker:var(--teal);background-color:var(--background);color:var(--text)}[theme=color].journal,[theme=color] .journal{--text:var(--black);--background:var(--yellow);--accent:var(--white);--background-dark:var(--yellow-dark);--border:var(--yellow-darker);--picker:var(--yellow);background-color:var(--background);color:var(--text)}[theme=color].knowledge,[theme=color] .knowledge{--text:var(--black);--background:var(--blue);--accent:var(--white);--background-dark:var(--blue-dark);--border:var(--blue-darker);--picker:var(--blue);background-color:var(--background);color:var(--text)}[theme=color].about,[theme=color] .about{--text:var(--black);--background:var(--pink);--accent:var(--white);--background-dark:var(--pink-dark);--border:var(--pink-darker);--picker:var(--pink);background-color:var(--background);color:var(--text)}body[class=""][theme=color]{--text:var(--black);--background:var(--grey);--accent:var(--white);--background-dark:var(--grey-dark);--border:var(--grey-darker);--picker:var(--grey);background-color:var(--background);color:var(--text)}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;src:url(/static/fonts/subsetted/Inter-roman.var-subset.woff2)format("woff2")}@font-face{font-family:Editorial New Regular;src:url(/static/fonts/subsetted/EditorialNew-Regular-subset.woff2)format("woff2");font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/static/fonts/subsetted/IBMPlexMono-Regular-subset.woff2)format("woff2");font-style:normal;font-display:swap}:root{font-family:Inter,sans-serif}@supports (font-variation-settings:normal){:root{font-family:Inter var,sans-serif}}:root{--radius-sm:5px;--radius-md:10px}.logo{text-transform:uppercase;margin:0;padding:0;font-size:20px;font-weight:700;text-decoration:none}@media (prefers-reduced-motion:no-preference){.glitch-text>h1{all:unset}.glitch-text{position:relative;overflow:hidden}.glitch-text:before{content:attr(data-text);background:var(--background);animation:5s linear infinite glitch-2;position:absolute;top:0;left:0;overflow:hidden}.glitch-text:after{content:attr(data-text);background:var(--background);animation:5s linear infinite glitch;position:absolute;top:0;left:0;overflow:hidden}.glitch-text:hover:after,.glitch-text:hover:before{color:var(--background);background:var(--text)}}@keyframes glitch{0%,89%{clip-path:inset(0);top:0}90%{clip-path:inset(2% 0 10%);top:-2px}91%{clip-path:inset(21% 0 15%);top:-2px}92%{clip-path:inset(44% 0 54%);top:-2px}93%{clip-path:inset(70% 0 14%);top:-2px}94%,to{clip-path:inset(0);top:0}}@keyframes glitch-2{0%,90%{clip-path:inset(0);left:0}91%{clip-path:inset(63% 0 6%);left:-2px}92%{clip-path:inset(23% 0 20%);left:-2px}93%{clip-path:inset(36% 0 48%);left:-2px}94%,to{clip-path:inset(0);left:0}}[anim=false] *,[anim=false] :before,[anim=false] :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}@media (prefers-reduced-motion:no-preference){@keyframes projects-icon__1{0%{transform:skew(0deg)}89%{transform:skew(0deg)}90%{transform:skew(-4deg)}91%{transform:skew(4deg)}to{transform:skew(0deg)}}.projects-icon__1{transform-origin:40% 30%;animation:8s linear infinite projects-icon__1}@keyframes projects-icon__2{0%{transform:skew(0deg)}89%{transform:skew(0deg)}90%{transform:skew(-4deg)}91%{transform:skew(4deg)}to{transform:skew(0deg)}}.projects-icon__2{transform-origin:40% 30%;animation:7s linear infinite projects-icon__2}@keyframes projects-icon__3{0%{transform:translate(0)}90%{transform:translate(60px,60px)}92%{transform:translate(-10px,-10px)}to{transform:translate(0)}}.projects-icon__3{transform-origin:70% 70%;animation:5s ease-out infinite projects-icon__3}@keyframes projects-icon__4{0%{transform:skew(0deg)}89%{transform:skew(0deg)}90%{transform:skew(-4deg)}91%{transform:skew(4deg)}92%{transform:skew(-4deg)}93%{transform:skew(4deg)}94%{transform:skew(-4deg)}to{transform:skew(0deg)}}.projects-icon__4{transform-origin:70% 70%;animation:5s linear infinite projects-icon__4}.knowledge-icon__1{animation:8s linear infinite knowledge-icon__1;position:relative}@keyframes knowledge-icon__1{0%,20%{transform:translate(0)}21%,22%{transform:translateY(10px)}23%,50%{transform:translateY(10px)}51%,52%{transform:translate(10px,10px)}53%,75%{transform:translate(10px,10px)}76%,77%{transform:translate(10px)}78%,98%{transform:translate(10px)}99%,to{transform:translate(0)}}.knowledge-icon__2{animation:12s linear infinite knowledge-icon__2;position:relative}@keyframes knowledge-icon__2{0%,20%{transform:translate(0)}21%,22%{transform:translate(-10px)}23%,50%{transform:translate(-10px)}51%,52%{transform:translate(-10px,-10px)}53%,75%{transform:translate(-10px,-10px)}76%,77%{transform:translateY(-10px)}78%,98%{transform:translateY(-10px)}99%,to{transform:translate(0)}}.knowledge-icon__3{transform-origin:50%;animation:12s infinite backwards knowledge-icon__3;position:relative}@keyframes knowledge-icon__3{0%,49%{transform:rotate(0)}50%,51%{transform:rotate(4deg)}52%,78%{transform:rotate(4deg)}79%,80%{transform:rotate(0)}81%,to{transform:rotate(0)}}.knowledge-icon__4{transform-origin:50%;animation:12s infinite knowledge-icon__4;position:relative}@keyframes knowledge-icon__4{0%,49%{transform:rotate(0)}51%{transform:rotate(12deg)}78%{transform:rotate(4deg)}to{transform:rotate(0)}}.portfolio-icon__1{transform-origin:40%;animation:6s linear infinite portfolio-icon__1}@keyframes portfolio-icon__1{0%{transform:rotate(0)}35%{transform:rotate(0)}40%{transform:rotate(20deg)}60%{transform:rotate(20deg)}65%{transform:rotate(0)}to{transform:rotate(0)}}.portfolio-icon__2{transform-origin:50%;animation:6s linear infinite portfolio-icon__2}@keyframes portfolio-icon__2{0%{transform:scale(1)}40%{transform:scale(1)}45%{transform:scale(1.02)}50%{transform:scale(1)}55%{transform:scale(1.02)}60%{transform:scale(1)}to{transform:scale(1)}}.journal-icon__1{transform-origin:100%;animation:8s linear infinite journal-icon__1}@keyframes journal-icon__1{0%{transform:translate(0)}30%{transform:translate(0)}31%{transform:translate(20px,50px)rotate(12deg)}40%{transform:translate(20px,50px)rotate(12deg)}41%{transform:translate(30px,120px)rotate(26deg)}50%{transform:translate(30px,120px)rotate(26deg)}51%{transform:translate(15px,215px)rotate(46deg)}98%{transform:translate(15px,215px)rotate(46deg)}99%{transform:translate(30px,25px)rotate(12deg)}to{transform:translate(0)}}.journal-icon__2{animation:8s linear infinite journal-icon__2}@keyframes journal-icon__2{0%{transform:translate(0)}97%{transform:translate(0)}98%{transform-origin:100%;transform:skew(4deg,4deg)}99%{transform-origin:100%;transform:skew(-4deg,-4deg)}to{transform:translate(0)}}.about-icon__1{animation:8s linear infinite about-icon__1}@keyframes about-icon__1{0%{transform:translateY(5px)}12.5%{transform:translate(-15px)}25%{transform:translateY(5px)}37.5%{transform:translate(15px)}45%{transform:translateY(-18px)}65%{transform:translateY(-18px)}75%{transform:translateY(5px)}87.5%{transform:translate(15px)}to{transform:translateY(5px)}}.about-icon__2{animation:4s linear infinite about-icon__2}@keyframes about-icon__2{0%{transform:translate(0)}25%{transform:translate(-40px)}50%{transform:translate(0)}75%{transform:translate(40px)}to{transform:translate(0)}}}:root{--fluid-min-width:320;--fluid-max-width:1440;--fluid-screen:100vw;--fluid-bp:calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)));--base-font-size:calc(((16/16)*1rem) + (18 - 16)*var(--fluid-bp));--base-line-height:calc(((24/16)*1rem) + (30 - 24)*var(--fluid-bp))}*{scrollbar-color:var(--background)var(--text);max-width:60ch}html,body,div,header,nav,main,article,footer,input,svg,label{max-width:none}html{overflow-y:scroll}img{max-width:100%}body{font-size:var(--base-font-size);line-height:var(--base-line-height)}main{margin:var(--margin-l)}main>*+*{margin-top:var(--margin-s)}fieldset{border:none;padding:0}footer{margin:var(--margin-l)}@view-transition{navigation:auto}:root{--title-scale-6:clamp(.9rem,.79rem + .58vw,1.31rem);--title-scale-5:clamp(1.09rem,.93rem + .79vw,1.64rem);--title-scale-4:clamp(1.3rem,1.19rem + .55vw,1.69rem);--title-scale-3:clamp(1.56rem,1.37rem + .98vw,2.25rem);--title-scale-2:clamp(1.88rem,1.55rem + 1.61vw,3rem);--title-scale-1:clamp(2.25rem,1.75rem + 2.5vw,4rem);--title-line-height-6:clamp(1.16rem,1.05rem + .51vw,1.52rem);--title-line-height-5:clamp(1.39rem,1.24rem + .73vw,1.89rem);--title-line-height-4:clamp(1.66rem,1.46rem + 1.01vw,2.37rem);--title-line-height-3:clamp(2rem,1.72rem + 1.38vw,2.96rem);--title-line-height-2:clamp(2.4rem,2.02rem + 1.86vw,3.7rem);--title-line-height-1:clamp(2.88rem,2.38rem + 2.5vw,4.63rem);--title-margin-6:calc(((4.375/16)*1rem) + (6.25 - 4.375)*var(--fluid-bp));--title-margin-5:calc(((8.75/16)*1rem) + (12.5 - 8.75)*var(--fluid-bp));--title-margin-4:calc(((17.5/16)*1rem) + (25 - 17.5)*var(--fluid-bp));--title-margin-3:calc(((25/16)*1rem) + (50 - 25)*var(--fluid-bp));--title-margin-2:calc(((52.5/16)*1rem) + (75 - 52.5)*var(--fluid-bp));--title-margin-1:calc(((70/16)*1rem) + (100 - 70)*var(--fluid-bp))}h6{font-size:.9rem;font-size:var(--title-scale-6);line-height:1.16rem;line-height:var(--title-line-height-6);max-width:30ch;margin:4.37px 0!important;margin:var(--title-margin-6)0 calc(var(--title-margin-6)/2)0!important}h5{font-size:1.09rem;font-size:var(--title-scale-5);line-height:1.39rem;line-height:var(--title-line-height-5);max-width:30ch;margin:8.75px 0!important;margin:var(--title-margin-5)0 calc(var(--title-margin-5)/2)0!important}h4{font-size:1.3rem;font-size:var(--title-scale-4);line-height:1.66rem;line-height:var(--title-line-height-4);max-width:30ch;margin:17.5px 0!important;margin:var(--title-margin-4)0 calc(var(--title-margin-4)/2)0!important}h3{font-size:1.56rem;font-size:var(--title-scale-3);line-height:2rem;line-height:var(--title-line-height-3);max-width:30ch;margin:25px 0!important;margin:var(--title-margin-3)0 calc(var(--title-margin-3)/2)0!important}h2{font-size:1.88rem;font-size:var(--title-scale-2);line-height:2.4rem;line-height:var(--title-line-height-2);max-width:30ch;margin:52.5px 0!important;margin:var(--title-margin-2)0 calc(var(--title-margin-2)/2)0!important}h1{font-size:2.25rem;font-size:var(--title-scale-1);line-height:2.88rem;line-height:var(--title-line-height-1);max-width:20ch;margin:70px 0!important;margin:var(--title-margin-1)0 calc(var(--title-margin-1)/2)0!important}h1,h2,h3,h4,h5,h6{font-family:Editorial New Regular,serif;font-weight:400;display:block}h1:hover a,h2:hover a,h3:hover a,h4:hover a,h5:hover a,h6:hover a{background:0 0;z-index:0!important}.heading-anchor{color:currentColor;opacity:.4;margin-left:1ch;font-size:.4em;text-decoration:none}a{color:var(--text);margin:-5px -10px;padding:5px 10px;transition:all .25s}[theme=dark] a{color:var(--accent)}article a{margin:0;padding:0}a:hover,a[target=_blank]:hover,a[target=_blank]:hover:after{color:var(--background);background:#000;background:var(--text);transition:all .25s}a:active{color:var(--background);background:var(--accent);transition:all .25s}a[target=_blank]{position:relative}a[href^=http]:where(:not([href*="thomasorus.com/"])):after{content:"↗";font-family:monospace;font-size:1.2em}code{color:var(--text);font-family:IBM Plex Mono,monospace;font-size:.9em}:root{--spacing-pre-y:calc(((27/16)*1rem) + (35 - 27)*var(--fluid-bp));--spacing-pre-x:calc(((15/16)*1rem) + (42 - 15)*var(--fluid-bp))}pre{background-color:#d3d3d3;background-color:var(--background-dark);color:var(--text);border-radius:var(--radius-sm);scrollbar-color:var(--accent)var(--background-dark);padding:27px 15px 54px;padding:var(--spacing-pre-y)var(--spacing-pre-x);margin:0;line-height:1;overflow-x:auto}[theme=light] pre{scrollbar-color:var(--background)var(--accent)}pre code{font-size:.85em}ul{padding-left:2em}ul:not([role=list]) li{padding-left:.75em}ul li::marker{font-size:var(--base-font-size);color:var(--border)}ul[role=list]{margin:0;padding:0}ol{padding-left:2em}ol:not([role=list]) li{padding-left:1em}ol li::marker{font-size:var(--base-font-size);color:var(--border);font-weight:500}ol[role=list]{margin:0;padding:0}hr{color:var(--text);border:1px solid var(--text);margin:45px 0!important;margin:var(--title-margin-2)0!important}:root{--blockquote-padding-x:calc(((15/16)*1rem) + (42 - 15)*var(--fluid-bp));--blockquote-padding-y:calc(((23/16)*1rem) + (36 - 23)*var(--fluid-bp))}blockquote{color:var(--text);padding:15px 23px;padding:var(--blockquote-padding-y)var(--blockquote-padding-x)}blockquote+figcaption{color:var(--text);padding:0 15px 23px 23px;padding:0 var(--blockquote-padding-y)var(--blockquote-padding-x)var(--blockquote-padding-x)}[theme=color] blockquote,[theme=color] blockquote+figcaption{background-color:var(--accent);border-left:5px solid #000;border-left:5px solid var(--text)}[theme=light] blockquote,[theme=light] blockquote+figcaption{background-color:var(--grey);border-left:5px solid var(--border)}[theme=dark] blockquote,[theme=dark] blockquote+figcaption{background-color:var(--background-dark);border-left:5px solid var(--border)}figure>img+figcaption,figure>video+figcaption{background-color:#000;background-color:var(--background-dark);padding:11px;padding:var(--figcaption-spacing);border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);min-width:100%;box-shadow:var(--background-dark)0 0 0 2px}picture{display:block}picture img,picture video{box-shadow:var(--background-dark)0 0 0 2px;display:block}picture img,figure img,figure video{border-bottom:none;width:auto;min-width:100%;max-width:100%;height:auto}figure video,figure img{width:100%;box-shadow:var(--background-dark)0 0 0 2px;display:block}button,.button{min-width:120px;max-width:20ch;min-height:44px;box-shadow:var(--text)0 0 0 2px;background-color:#000;background-color:var(--text);border-radius:var(--radius-sm);color:var(--accent);border:none;padding:5px 19px;font-weight:600;line-height:1.5;text-decoration:none}button:hover,.button:hover{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--background);cursor:pointer}button:disabled,.button:disabled{color:var(--text);box-shadow:var(--grey-dark)0 0 0 2px;background-color:var(--grey);pointer-events:none}button:active,.button:active{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--accent);cursor:pointer}button svg,.button svg{fill:var(--text);margin-top:4px}[theme=light] button,[theme=light] .button{color:var(--background);box-shadow:var(--text)0 0 0 2px;border:none}[theme=light] button:hover,[theme=light] .button:hover{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--background);cursor:pointer}[theme=light] button:active,[theme=light] .button:active{color:var(--text);background-color:var(--accent);cursor:pointer}[theme=dark] button,[theme=dark] .button{color:var(--background);box-shadow:var(--text)0 0 0 2px;border:none}[theme=dark] button:hover,[theme=dark] .button:hover{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--background);cursor:pointer}[theme=dark] button:active,[theme=dark] .button:active{color:var(--background);background-color:var(--accent);cursor:pointer}button[data-secondary]{box-shadow:var(--text)0 0 0 2px;background-color:var(--background);color:var(--text)}button[data-small]{min-height:24px;min-width:unset;padding:3px 10px;font-weight:400}button[data-naked]{box-shadow:none;color:unset;min-width:24px;min-height:24px;font-size:inherit;font-weight:inherit;background:0 0;border:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}button[data-naked]:hover{box-shadow:none;color:unset;min-width:24px;min-height:24px;font-size:inherit;font-weight:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}button[data-warning]{box-shadow:var(--red-darker)0 0 0 2px;background-color:var(--red-dark);color:var(--white)}button[data-warning]:hover{box-shadow:var(--black)0 0 0 2px;background-color:var(--red-darker);color:var(--white)}button:focus-visible{background-color:var(--focus);color:var(--accent);box-shadow:var(--text)0 0 0 2px;fill:var(--background)}:root{--padding-form:calc(((30/16)*1rem) + (50 - 30)*var(--fluid-bp));--margin-input:calc(((30/16)*1rem) + (50 - 30)*var(--fluid-bp));--margin-label:calc(((5/16)*1rem) + (10 - 5)*var(--fluid-bp))}form{border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--background-dark);padding:30px;padding:var(--padding-form)}form *{display:block}form>*+*{margin-top:30px;margin-top:var(--margin-s)}label~input,label~select,label~textarea{margin-top:5px;margin-top:var(--margin-label)}label~span{margin-top:0}legend{margin-bottom:5px;margin-bottom:var(--margin-label);padding:0}label~span{color:var(--grey-dark);font-style:italic;font-weight:600}input+span,select+span{color:var(--grey-pitchblack);font-weight:600;display:none}input[type=radio]~label,input[type=checkbox]~label{margin-right:var(--margin-label);font-weight:400}[aria-invalid]+span{color:var(--red-darker);display:block}[data-size]{width:100%}[data-size="30"]{max-width:30ch}[data-size="10"]{max-width:10ch}[type=checkbox],[type=radio],[type=checkbox]~label,[type=radio]~label{width:auto;display:inline}[theme=color] form{background-color:var(--background)}form .grouped{gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.errMsg{color:var(--red-darker);font-style:italic;font-weight:600;display:block}form[data-naked]{all:unset}:root{--padding-input-y:calc(((3/16)*1rem) + (5 - 3)*var(--fluid-bp));--padding-input-x:calc(((9/16)*1rem) + (17 - 9)*var(--fluid-bp))}input{color:var(--text);border-radius:var(--radius-sm);min-height:42px;padding:3px 9px;padding:var(--padding-input-y)var(--padding-input-x);background:#d3d3d3;border:none;outline:#0000;width:100%;display:block}[theme=color] input{background-color:var(--accent)}[theme=dark] input{background-color:var(--grey-darker)}[theme=light] input{background-color:var(--white)}input:focus{box-shadow:var(--border)0 0 0 2px}[theme=light] input:focus,[theme=dark] input:focus{box-shadow:var(--text)0 0 0 2px}input[aria-invalid=true]{background-color:var(--border)}[theme=dark] input[aria-invalid=true]{background-color:var(--grey-dark);color:var(--background)}[theme=light] input[aria-invalid=true]:focus,[theme=dark] input[aria-invalid=true]:focus{box-shadow:var(--text)0 0 0 2px}[theme=color] input[aria-invalid=true]:focus{box-shadow:var(--background)0 0 0 2px}input[data-size="30"]{width:100%;max-width:32.2ch}input[data-size="20"]{width:100%;max-width:22.2ch}input[data-size="10"]{width:100%;max-width:12.2ch}input[data-size="4"]{width:100%;max-width:6.2ch}input[data-size="2"]{width:100%;max-width:4.2ch}input[type=file]{all:unset;border-radius:var(--radius-sm);min-height:24px;min-width:unset;border:2px solid var(--text);margin:0;font-weight:400}input::file-selector-button{box-shadow:var(--text)0 0 0 2px;background-color:#000;background-color:var(--text);border-radius:var(--radius-sm);color:var(--accent);border:none;height:100%;margin:0 4px 0 0;line-height:1.5;transition:all .25s}input[type=hidden]+label{margin-top:unset}label{color:var(--text);font-size:var(--base-font-size);font-weight:700;line-height:var(--base-line-height);display:block}label .required{font-style:italic;font-weight:400}label[data-fake]{font-weight:400}legend{font-size:var(--base-font-size);font-weight:700;line-height:var(--base-line-height);display:block}:root{--padding-select-y:calc(((3/16)*1rem) + (5 - 3)*var(--fluid-bp));--padding-select-x:calc(((9/16)*1rem) + (17 - 9)*var(--fluid-bp))}select{color:var(--text);background-color:var(--grey);border-radius:var(--radius-sm);height:42px;padding:9px;padding:var(--padding-select-y)var(--padding-select-x);border:none;outline:#0000;width:100%;display:block}option{height:42px}select[data-size="30"]{width:30ch}select[data-size="20"]{width:20ch}select[data-size="10"]{width:10ch}select[data-size="5"]{width:5ch}select[data-size="4"]{width:4ch}[theme=color] select{background-color:var(--white)}[theme=dark] select{background-color:var(--grey-darker)}[theme=light] select{background-color:var(--white)}[theme=color] select:focus{box-shadow:var(--grey-pitchblack)0 0 0 2px}[theme=light] select:focus{box-shadow:var(--grey-dark)0 0 0 2px}[theme=dark] select:focus{box-shadow:var(--grey-darker)0 0 0 2px}table{text-align:left;width:100%;padding:25px;padding:var(--margin-s);border:2px solid #000;border:2px solid var(--text)}table caption{text-align:left;font-family:Editorial New Regular,serif;font-weight:400}tbody>*,thead>*{border-collapse:collapse;box-shadow:0 2px 0 var(--text);border:2px solid #000}dl{background-color:var(--background-dark);border-left:5px solid #000;border-left:5px solid var(--border);padding:25px;padding:var(--margin-s)}dt{font-weight:600}dd{padding-left:25px;padding-left:var(--margin-s)}dl>dd+dt{margin-top:12.5px;margin-top:calc(var(--margin-l)/2)}:root{--figcaption-spacing:calc(((11/16)*1rem) + (16 - 11)*var(--fluid-bp))}audio,audio::-webkit-media-controls-panel{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm);background-color:var(--background)}figure>audio+figcaption{background-color:#000;background-color:var(--background-dark);padding:11px;padding:var(--figcaption-spacing);border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);box-shadow:var(--background-dark)0 0 0 2px}figure audio{width:100%;box-shadow:var(--background-dark)0 0 0 2px;display:block}input[type=radio]{all:unset;-webkit-appearance:none;appearance:none;background-color:var(--background);font:inherit;color:var(--text);border:.15em solid var(--text);aspect-ratio:1;border-radius:50%;place-content:center;width:1em;height:1em;margin:0;display:grid}input[type=radio]:checked{border:.15em solid var(--text);background-color:var(--text)}input[type=radio]:before{content:"";width:1em;height:1em;box-shadow:inset 1em 1em var(--background);border-radius:50%;transition:transform .12s ease-in-out;transform:scale(0)}input[type=radio]:checked:before{box-shadow:none;transform:scale(.5)}input[type=radio]:focus{outline:max(1px,.15em)solid var(--text);outline-offset:max(1px,.1em);box-shadow:none}textarea{color:var(--text);border-radius:var(--radius-sm);min-height:42px;padding:3px 9px;padding:var(--padding-input-y)var(--padding-input-x);background:#d3d3d3;border:none;outline:#0000;width:100%;display:block}[theme=color] textarea{background-color:var(--accent)}[theme=dark] textarea{background-color:var(--grey-darker)}[theme=light] textarea{background-color:var(--white)}textarea:focus{box-shadow:var(--border)0 0 0 2px}[theme=light] textarea:focus,[theme=dark] textarea:focus{box-shadow:var(--text)0 0 0 2px}.grow-wrap{display:grid}.grow-wrap:after{content:attr(data-replicated-value)" ";white-space:pre-wrap;visibility:hidden}.grow-wrap>textarea{resize:none;overflow:hidden}.grow-wrap>textarea,.grow-wrap:after{font:inherit;grid-area:1/1/2/2}input[type=checkbox]{accent-color:var(--text);font:inherit;color:var(--text);min-height:unset;border:1px solid #000;outline:none;width:1em;height:1em;margin:0}iframe{aspect-ratio:16/9;width:100%;height:auto}header{background:var(--background);width:100%;padding:var(--margin-l);justify-content:space-between;align-items:flex-start;gap:var(--margin-s);flex-flow:wrap;display:flex}article>*+*{margin-top:25px;margin-top:var(--margin-s)}article .subpage-listing{margin-top:var(--title-margin-2);max-width:60ch}article .subpage-listing h2{border-top:2px solid var(--text);padding-top:var(--title-margin-2)}section[role=complementary]{background-color:#fff;background-color:var(--accent);width:100%;padding:.5em var(--margin-l);z-index:2;min-width:100%}section[role=complementary] details{justify-content:space-between;gap:var(--margin-l);cursor:pointer;flex-flow:wrap;justify-items:end;min-width:100%;display:flex}section[role=complementary] summary::-webkit-details-marker{display:none}.time-row{grid-template-columns:1fr auto;gap:.6em;min-width:100%;display:grid}section[role=complementary] details>*+*{margin-top:20px;margin-top:var(--margin-l)}.time-row__title{font-family:Editorial New Regular,serif}details[open] .time-row__second{display:none}dl.time-row-more{text-align:left;background-color:var(--accent);border-left:5px solid var(--text);grid-template-columns:auto 1fr;justify-items:start;gap:.6em;min-width:100%;display:grid}.time-row-more dt,.time-row-more dd{margin:0;padding:0}.time-row-more dt{justify-content:space-between;width:100%;display:flex}.time-row-more dt span{margin-left:var(--margin-s)}@media screen and (width<=640px){section[role=complementary]{position:static}.time-row{grid-template-columns:1fr;justify-items:start}}[theme=dark] section[role=complementary]{color:var(--background)}aside{border-left:5px solid var(--border);background-color:var(--background-dark);padding:var(--margin-s)}body[class=""] aside{background-color:var(--background-dark)}aside p:first-child{font-size:1.3rem;font-size:var(--title-scale-6);line-height:1.66rem;line-height:var(--title-line-height-4)}aside>*+*{margin-top:var(--margin-s)}article details{border-left:5px solid var(--border);background-color:var(--background-dark);padding:var(--margin-s)}article summary{font-size:1.3rem;font-size:var(--title-scale-6);line-height:1.66rem;line-height:var(--title-line-height-4)}article details>*+*{margin-top:var(--margin-s)}.nav--main{top:var(--margin-l)}.nav--main ul{flex-flow:wrap;justify-content:flex-end;align-items:center;gap:5px 20px;margin:0;padding:0;list-style:none;display:flex}.nav--main ul li{padding-left:0}.nav--main a{font-size:18px;text-decoration:none}[theme=dark] .nav--main a{color:var(--accent)}.nav--secondary ul{flex-flow:wrap;align-items:center;gap:5px 15px;margin:0;padding:0;list-style:none;display:flex}.nav--secondary ul li{padding-left:0}.nav--secondary a{white-space:nowrap;text-decoration:none}.breadcrumb{margin:0 var(--margin-l);background-color:var(--background);z-index:1;font-size:var(--base-font-size);padding-left:0;display:inline;top:0}.breadcrumb ol{gap:calc(1ch - 5px);margin:0;padding:0;list-style-type:none;display:inline-flex}.breadcrumb ol li{gap:calc(1ch - 5px);margin:0;padding:0;display:inline-flex}.breadcrumb ol li+li:before{content:"›";display:block;position:relative}@media (width<=550px){.breadcrumb ol li{display:none}.breadcrumb ol li:first-child,.breadcrumb ol li:last-child{display:inline-flex}}[theme=dark] .breadcrumb{color:var(--accent)}.color-nav{gap:.4rem;display:flex}@keyframes colors{0%{background-color:var(--teal)}20%{background-color:var(--blue)}40%{background-color:var(--red)}60%{background-color:var(--yellow)}80%{background-color:var(--pink)}to{background-color:var(--teal)}}.color-nav a{font:inherit;color:var(--text);border:.15em solid var(--text);aspect-ratio:1;border-radius:50%;place-content:center;width:1ch;margin:0;display:grid}.color-nav a[data-value=raw]{border:.1em dashed var(--text);background-color:#0000;border-radius:0;width:1ch}.color-nav a[data-value=color]{background-color:var(--picker)}.color-nav a[data-value=light]{background-color:var(--white)}.color-nav a[data-value=dark]{background-color:var(--black)}.none .color-nav a[data-value=color]{background-color:unset;animation:5s linear infinite colors}.flow>*+*{margin-top:var(--margin-s)}:root{--ratio:1.5;--s-5:calc(var(--s-4)/var(--ratio));--s-4:calc(var(--s-3)/var(--ratio));--s-3:calc(var(--s-2)/var(--ratio));--s-2:calc(var(--s-1)/var(--ratio));--s-1:calc(var(--s0)/var(--ratio));--s0:1rem;--s1:calc(var(--s0)*var(--ratio));--s2:calc(var(--s1)*var(--ratio));--s3:calc(var(--s2)*var(--ratio));--s4:calc(var(--s3)*var(--ratio));--s5:calc(var(--s4)*var(--ratio))}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.time-graph-container{box-sizing:border-box;font-size:calc(var(--base-font-size) + 1em)}.time-graph{grid-template-columns:repeat(auto-fit,calc(var(--base-font-size)*1.2));grid-gap:.15em;border-collapse:collapse;font-variant-numeric:oldstyle-nums;justify-content:center;width:100%;display:grid}.time-graph__text{margin:var(--s0)0;align-self:flex-end}.time-graph__hours{background:var(--background);color:var(--text);letter-spacing:-2px;padding:1px 3px 0 1px;font-family:monospace;font-size:.6rem;line-height:1;position:absolute;top:0;left:0}.time-graph ul{list-style:none}.time-graph__week{letter-spacing:-2px;text-align:center;flex-flow:column-reverse;width:100%;margin:10px 0;padding:0;font-family:monospace;font-size:.8rem;display:flex}.time-graph__activity{box-shadow:0 0 0 1px var(--text);width:100%;margin:1.5px;line-height:0;position:relative;padding:0!important}.time-graph__tooltip{display:none}.time-graph__activity:hover>.time-graph__tooltip{background-color:var(--background);border:1px solid var(--text);z-index:1;letter-spacing:normal;min-width:10px;margin-top:15px;margin-left:50%;padding:5px;font-family:sans-serif;font-size:.6rem;line-height:1;display:block;position:absolute;top:20%}.time-graph__legend-list{flex-flow:wrap;justify-content:center;max-width:100%;margin:10px auto 20px;padding:0;display:flex}.time-graph__legend{flex-flow:row;align-items:center;margin:5px 10px;list-style-type:none;display:flex}.time-graph__legend-container{flex-flow:row;align-items:center;margin:5px 0;font-family:monospace;font-size:.7rem;display:flex}.time-graph__value{margin-left:2px}.time-graph__definition{letter-spacing:-1px;margin-left:5px;padding-top:2px}.time-graph__pattern{border:1px solid var(--text);width:1.4em;height:1.4em;margin-right:4px;display:inline-block}.code-example{background:var(--background);border:1px solid var(--text);min-height:var(--s5)}.code-example-value{background:var(--background);color:var(--text);padding:1px 5px 0;font-family:monospace;display:inline}.code-example-children{height:var(--s2);width:var(--s2);border:1px solid var(--text)}.code-example-children-grid{border:1px solid var(--text)}.code-example-grid-star{grid-template-areas:"lefttop.righttop"".center.""leftbottom.rightbottom";display:grid}.pattern-demo{border:1px solid var(--text);background:#fff;width:100%;height:100px}.svg-demo{gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end;max-width:60ch;display:grid}.svg-demo div{flex-direction:column;align-items:start;display:flex}.svg-demo svg{border:1px solid var(--text);width:200px;height:100px;display:block}.home-grid{grid-gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.home-grid>*{padding:var(--margin-s);flex-flow:column;justify-content:flex-start;align-items:center;display:flex;position:relative}.home-grid svg{width:100%;max-width:300px}.absolute-link{width:100%;height:100%;position:absolute;inset:0}.absolute-link:hover{background:0 0}.form-demo{all:revert;color:#000;max-width:60ch;margin-top:var(--margin-s);box-sizing:border-box;background:#fff;border:1px solid;padding:5px}.form-demo input{background:#fff}.form-demo *{all:revert;box-sizing:border-box}.form-demo form,.form-demo fieldset{width:100%}.form-demo-block form *{display:block}.form-demo-spacing form>*+*,.form-demo-spacing fieldset>*+*{margin-top:1em!important}.form-demo-reduced label~span,.form-demo-reduced label~input,.form-demo-reduced label~select{margin-top:.25em!important}.form-demo-text label~span{color:#555;font-style:italic}.form-demo-err input+span,.form-demo-err input+span{display:none;color:red!important}.form-demo-err-block [aria-invalid]+span{display:block!important}.form-demo-size [data-size]{width:100%}.form-demo-size [data-size="30"]{max-width:30ch}.form-demo-size [data-size="10"]{max-width:10ch}.form-demo-checkbox form [type=checkbox],.form-demo-checkbox form [type=checkbox]~label{display:inline}.form-demo-button button,.form-demo-button [type=button],.form-demo-button [type=submit],.form-demo-button [type=reset]{all:unset;border:1px solid;padding:10px;font-size:1em}.edit-page{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px;width:100%;display:grid;& form{max-width:unset;flex-basis:50%;width:100%}& article{flex-basis:50%;width:100%}& textarea{max-width:unset;height:80vh}}.media-picker{max-height:50vh;padding-left:0;overflow-y:scroll;&>*+*{width:100%;margin-top:1em}& li{padding:0}}.media-picker__media{grid-template-columns:150px 1fr;gap:1em;line-height:1;display:grid;& img,& audio,& video{width:150px;height:auto}}.media-picker__buttons{align-items:flex-start;gap:.5em;margin-top:1em;display:flex}[theme=raw] .media-picker__buttons{display:none}.page-preview{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--padding-form);max-height:100vh;overflow-y:scroll;& svg{max-width:100%}}.edit-footer{background-color:var(--background);z-index:1;width:100%;padding:calc(var(--margin-s)/2)var(--margin-l);gap:calc(var(--margin-s)/4)calc(var(--margin-s));flex-flow:wrap;display:flex;position:fixed;bottom:0;left:0}@media (width<=960px){.edit-page{grid-template-columns:1fr}}.media-form{gap:calc(var(--margin-s)/4)!important;flex-wrap:wrap!important;align-items:center!important;display:flex!important;& div{margin:0!important}}.hire{& .headline{gap:var(--margin-s);max-width:120ch;margin:auto;margin-bottom:calc(var(--margin-l)*2);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));display:grid;& figure{width:100%}}& .button{flex-grow:0;align-items:center;margin-right:1ch;display:flex}& .buttons{flex-wrap:wrap;gap:1rem;display:flex}& img{box-shadow:none}& .testimonials{max-width:100%;min-width:unset;&>div{gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));display:grid}& h2{text-align:center;min-width:100%}& figure{grid-template-rows:subgrid;background-color:var(--border);grid-row:span 2;gap:0;display:grid}& blockquote{padding:var(--margin-s)var(--margin-s)}& figcaption{align-items:center;gap:var(--margin-s);display:flex;& img{max-width:80px;min-width:unset;aspect-ratio:1;border-radius:50%;display:inline-block}}}& .hire-projects{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;gap:1rem;display:flex;overflow-x:auto;& a{color:var(--text)}& section{background-color:var(--background-dark);width:100%;padding:calc(var(--margin-s)/2);border-radius:var(--radius-md);align-items:stretch}& img{min-width:calc(320px - var(--margin-s)/2);border-radius:var(--radius-sm)}& p{font-size:1rem;line-height:1.2}}& .testimonials::-webkit-scrollbar{background:0 0;width:0}& .skills{margin:auto;& h2{text-align:center;min-width:100%}&>div{text-align:center;min-width:100%;margin:auto}& ul{gap:calc(var(--margin-s)/2);flex-wrap:wrap;justify-content:center;width:100%;margin:auto;display:flex}& li{background-color:var(--background-dark);border-radius:calc(3*var(--radius-md));text-align:center;padding:1rem;padding:calc(var(--margin-s)/2);font-size:1rem;line-height:1}& span{margin-right:.5rem;font-size:1.25rem}}& .interested{margin:auto}& .interested *{text-align:center;justify-content:center;max-width:100%}}
\ No newline at end of file
+*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--black:#000;--white:#fff;--grey:#eee;--grey-dark:#aaa;--grey-darker:#555;--grey-pitchblack:#222;--focus:#666;--yellow:#f2d336;--yellow-dark:#dfc130;--yellow-darker:#98841f;--teal:#70eba7;--teal-dark:#5fc88f;--teal-darker:#479e6d;--pink:#ffadc9;--pink-dark:#ff85ad;--pink-darker:#d6245f;--red:#f37149;--red-dark:#dd5d36;--red-darker:#c93d13;--blue:#9094fe;--blue-dark:#767aef;--blue-darker:#595fd9;--margin-l:calc(((20/16)*1rem) + (64 - 20)*var(--fluid-bp));--margin-s:calc(((25/16)*1rem) + (30 - 25)*var(--fluid-bp))}@media screen and (width>=1440px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}:root{--text:var(--black);--background:var(--white);--accent:var(--grey);--background-dark:var(--grey-pitchblack);--border:var(--grey-dark);--picker:var(--grey)}[theme=light]{--text:var(--black);--background:var(--white);--accent:var(--grey);--background-dark:var(--grey);--border:var(--grey-dark);background-color:var(--background);color:var(--text)}[theme=dark]{--text:var(--white);--background:var(--black);--accent:var(--grey);--background-dark:var(--grey-pitchblack);--border:var(--grey-darker);background-color:var(--background);color:var(--text)}[theme=dark].projects,[theme=light].projects{--picker:var(--teal)}[theme=dark].knowledge,[theme=light].knowledge{--picker:var(--blue)}[theme=dark].portfolio,[theme=light].portfolio{--picker:var(--red)}[theme=dark].journal,[theme=light].journal{--picker:var(--yellow)}[theme=dark].about,[theme=light].about{--picker:var(--pink)}[theme=dark].portfolio,[theme=dark] .portfolio,[theme=light].portfolio,[theme=light] .portfolio{--picker:var(--red)}[theme=color].portfolio,[theme=color] .portfolio{--text:var(--black);--background:var(--red);--accent:var(--white);--background-dark:var(--red-dark);--border:var(--red-darker);--picker:var(--red);background-color:var(--background);color:var(--text)}[theme=color].hire,[theme=color] .hire{--text:var(--black);--background:var(--white);--accent:var(--white);--background-dark:var(--grey);--border:var(--grey-dark);--picker:var(--grey-darker);background-color:var(--background);color:var(--text)}[theme=color].hire svg,[theme=color] .hire svg{--text:var(--black);--background:var(--white);--accent:var(--white);--background-dark:var(--red-dark);--border:var(--red-darker);--picker:var(--grey-darker);background-color:var(--background);color:var(--text)}[theme=color].projects,[theme=color] .projects{--text:var(--black);--background:var(--teal);--accent:var(--white);--background-dark:var(--teal-dark);--border:var(--teal-darker);--picker:var(--teal);background-color:var(--background);color:var(--text)}[theme=color].journal,[theme=color] .journal{--text:var(--black);--background:var(--yellow);--accent:var(--white);--background-dark:var(--yellow-dark);--border:var(--yellow-darker);--picker:var(--yellow);background-color:var(--background);color:var(--text)}[theme=color].knowledge,[theme=color] .knowledge{--text:var(--black);--background:var(--blue);--accent:var(--white);--background-dark:var(--blue-dark);--border:var(--blue-darker);--picker:var(--blue);background-color:var(--background);color:var(--text)}[theme=color].about,[theme=color] .about{--text:var(--black);--background:var(--pink);--accent:var(--white);--background-dark:var(--pink-dark);--border:var(--pink-darker);--picker:var(--pink);background-color:var(--background);color:var(--text)}body[class=""][theme=color]{--text:var(--black);--background:var(--grey);--accent:var(--white);--background-dark:var(--grey-dark);--border:var(--grey-darker);--picker:var(--grey);background-color:var(--background);color:var(--text)}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;src:url(/static/fonts/subsetted/Inter-roman.var-subset.woff2)format("woff2")}@font-face{font-family:Editorial New Regular;src:url(/static/fonts/subsetted/EditorialNew-Regular-subset.woff2)format("woff2");font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/static/fonts/subsetted/IBMPlexMono-Regular-subset.woff2)format("woff2");font-style:normal;font-display:swap}:root{font-family:Inter,sans-serif}@supports (font-variation-settings:normal){:root{font-family:Inter var,sans-serif}}:root{--radius-sm:5px;--radius-md:10px}.logo{text-transform:uppercase;margin:0;padding:0;font-size:20px;font-weight:700;text-decoration:none}@media (prefers-reduced-motion:no-preference){.glitch-text>h1{all:unset}.glitch-text{position:relative;overflow:hidden}.glitch-text:before{content:attr(data-text);background:var(--background);animation:5s linear infinite glitch-2;position:absolute;top:0;left:0;overflow:hidden}.glitch-text:after{content:attr(data-text);background:var(--background);animation:5s linear infinite glitch;position:absolute;top:0;left:0;overflow:hidden}.glitch-text:hover:after,.glitch-text:hover:before{color:var(--background);background:var(--text)}}@keyframes glitch{0%,89%{clip-path:inset(0);top:0}90%{clip-path:inset(2% 0 10%);top:-2px}91%{clip-path:inset(21% 0 15%);top:-2px}92%{clip-path:inset(44% 0 54%);top:-2px}93%{clip-path:inset(70% 0 14%);top:-2px}94%,to{clip-path:inset(0);top:0}}@keyframes glitch-2{0%,90%{clip-path:inset(0);left:0}91%{clip-path:inset(63% 0 6%);left:-2px}92%{clip-path:inset(23% 0 20%);left:-2px}93%{clip-path:inset(36% 0 48%);left:-2px}94%,to{clip-path:inset(0);left:0}}[anim=false] *,[anim=false] :before,[anim=false] :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}@media (prefers-reduced-motion:no-preference){@keyframes projects-icon__1{0%{transform:skew(0deg)}89%{transform:skew(0deg)}90%{transform:skew(-4deg)}91%{transform:skew(4deg)}to{transform:skew(0deg)}}.projects-icon__1{transform-origin:40% 30%;animation:8s linear infinite projects-icon__1}@keyframes projects-icon__2{0%{transform:skew(0deg)}89%{transform:skew(0deg)}90%{transform:skew(-4deg)}91%{transform:skew(4deg)}to{transform:skew(0deg)}}.projects-icon__2{transform-origin:40% 30%;animation:7s linear infinite projects-icon__2}@keyframes projects-icon__3{0%{transform:translate(0)}90%{transform:translate(60px,60px)}92%{transform:translate(-10px,-10px)}to{transform:translate(0)}}.projects-icon__3{transform-origin:70% 70%;animation:5s ease-out infinite projects-icon__3}@keyframes projects-icon__4{0%{transform:skew(0deg)}89%{transform:skew(0deg)}90%{transform:skew(-4deg)}91%{transform:skew(4deg)}92%{transform:skew(-4deg)}93%{transform:skew(4deg)}94%{transform:skew(-4deg)}to{transform:skew(0deg)}}.projects-icon__4{transform-origin:70% 70%;animation:5s linear infinite projects-icon__4}.knowledge-icon__1{animation:8s linear infinite knowledge-icon__1;position:relative}@keyframes knowledge-icon__1{0%,20%{transform:translate(0)}21%,22%{transform:translateY(10px)}23%,50%{transform:translateY(10px)}51%,52%{transform:translate(10px,10px)}53%,75%{transform:translate(10px,10px)}76%,77%{transform:translate(10px)}78%,98%{transform:translate(10px)}99%,to{transform:translate(0)}}.knowledge-icon__2{animation:12s linear infinite knowledge-icon__2;position:relative}@keyframes knowledge-icon__2{0%,20%{transform:translate(0)}21%,22%{transform:translate(-10px)}23%,50%{transform:translate(-10px)}51%,52%{transform:translate(-10px,-10px)}53%,75%{transform:translate(-10px,-10px)}76%,77%{transform:translateY(-10px)}78%,98%{transform:translateY(-10px)}99%,to{transform:translate(0)}}.knowledge-icon__3{transform-origin:50%;animation:12s infinite backwards knowledge-icon__3;position:relative}@keyframes knowledge-icon__3{0%,49%{transform:rotate(0)}50%,51%{transform:rotate(4deg)}52%,78%{transform:rotate(4deg)}79%,80%{transform:rotate(0)}81%,to{transform:rotate(0)}}.knowledge-icon__4{transform-origin:50%;animation:12s infinite knowledge-icon__4;position:relative}@keyframes knowledge-icon__4{0%,49%{transform:rotate(0)}51%{transform:rotate(12deg)}78%{transform:rotate(4deg)}to{transform:rotate(0)}}.portfolio-icon__1{transform-origin:40%;animation:6s linear infinite portfolio-icon__1}@keyframes portfolio-icon__1{0%{transform:rotate(0)}35%{transform:rotate(0)}40%{transform:rotate(20deg)}60%{transform:rotate(20deg)}65%{transform:rotate(0)}to{transform:rotate(0)}}.portfolio-icon__2{transform-origin:50%;animation:6s linear infinite portfolio-icon__2}@keyframes portfolio-icon__2{0%{transform:scale(1)}40%{transform:scale(1)}45%{transform:scale(1.02)}50%{transform:scale(1)}55%{transform:scale(1.02)}60%{transform:scale(1)}to{transform:scale(1)}}.journal-icon__1{transform-origin:100%;animation:8s linear infinite journal-icon__1}@keyframes journal-icon__1{0%{transform:translate(0)}30%{transform:translate(0)}31%{transform:translate(20px,50px)rotate(12deg)}40%{transform:translate(20px,50px)rotate(12deg)}41%{transform:translate(30px,120px)rotate(26deg)}50%{transform:translate(30px,120px)rotate(26deg)}51%{transform:translate(15px,215px)rotate(46deg)}98%{transform:translate(15px,215px)rotate(46deg)}99%{transform:translate(30px,25px)rotate(12deg)}to{transform:translate(0)}}.journal-icon__2{animation:8s linear infinite journal-icon__2}@keyframes journal-icon__2{0%{transform:translate(0)}97%{transform:translate(0)}98%{transform-origin:100%;transform:skew(4deg,4deg)}99%{transform-origin:100%;transform:skew(-4deg,-4deg)}to{transform:translate(0)}}.about-icon__1{animation:8s linear infinite about-icon__1}@keyframes about-icon__1{0%{transform:translateY(5px)}12.5%{transform:translate(-15px)}25%{transform:translateY(5px)}37.5%{transform:translate(15px)}45%{transform:translateY(-18px)}65%{transform:translateY(-18px)}75%{transform:translateY(5px)}87.5%{transform:translate(15px)}to{transform:translateY(5px)}}.about-icon__2{animation:4s linear infinite about-icon__2}@keyframes about-icon__2{0%{transform:translate(0)}25%{transform:translate(-40px)}50%{transform:translate(0)}75%{transform:translate(40px)}to{transform:translate(0)}}}:root{--fluid-min-width:320;--fluid-max-width:1440;--fluid-screen:100vw;--fluid-bp:calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)));--base-font-size:calc(((16/16)*1rem) + (18 - 16)*var(--fluid-bp));--base-line-height:calc(((24/16)*1rem) + (30 - 24)*var(--fluid-bp))}*{scrollbar-color:var(--background)var(--text);max-width:60ch}html,body,div,header,nav,main,article,footer,input,svg,label{max-width:none}html{overflow-y:scroll}img{max-width:100%}body{font-size:var(--base-font-size);line-height:var(--base-line-height)}main{margin:var(--margin-l)}main>*+*{margin-top:var(--margin-s)}fieldset{border:none;padding:0}footer{margin:var(--margin-l)}@view-transition{navigation:auto}:root{--title-scale-6:clamp(.9rem,.79rem + .58vw,1.31rem);--title-scale-5:clamp(1.09rem,.93rem + .79vw,1.64rem);--title-scale-4:clamp(1.3rem,1.19rem + .55vw,1.69rem);--title-scale-3:clamp(1.56rem,1.37rem + .98vw,2.25rem);--title-scale-2:clamp(1.88rem,1.55rem + 1.61vw,3rem);--title-scale-1:clamp(2.25rem,1.75rem + 2.5vw,4rem);--title-line-height-6:clamp(1.16rem,1.05rem + .51vw,1.52rem);--title-line-height-5:clamp(1.39rem,1.24rem + .73vw,1.89rem);--title-line-height-4:clamp(1.66rem,1.46rem + 1.01vw,2.37rem);--title-line-height-3:clamp(2rem,1.72rem + 1.38vw,2.96rem);--title-line-height-2:clamp(2.4rem,2.02rem + 1.86vw,3.7rem);--title-line-height-1:clamp(2.88rem,2.38rem + 2.5vw,4.63rem);--title-margin-6:calc(((4.375/16)*1rem) + (6.25 - 4.375)*var(--fluid-bp));--title-margin-5:calc(((8.75/16)*1rem) + (12.5 - 8.75)*var(--fluid-bp));--title-margin-4:calc(((17.5/16)*1rem) + (25 - 17.5)*var(--fluid-bp));--title-margin-3:calc(((25/16)*1rem) + (50 - 25)*var(--fluid-bp));--title-margin-2:calc(((52.5/16)*1rem) + (75 - 52.5)*var(--fluid-bp));--title-margin-1:calc(((70/16)*1rem) + (100 - 70)*var(--fluid-bp))}h6{font-size:.9rem;font-size:var(--title-scale-6);line-height:1.16rem;line-height:var(--title-line-height-6);max-width:30ch;margin:4.37px 0!important;margin:var(--title-margin-6)0 calc(var(--title-margin-6)/2)0!important}h5{font-size:1.09rem;font-size:var(--title-scale-5);line-height:1.39rem;line-height:var(--title-line-height-5);max-width:30ch;margin:8.75px 0!important;margin:var(--title-margin-5)0 calc(var(--title-margin-5)/2)0!important}h4{font-size:1.3rem;font-size:var(--title-scale-4);line-height:1.66rem;line-height:var(--title-line-height-4);max-width:30ch;margin:17.5px 0!important;margin:var(--title-margin-4)0 calc(var(--title-margin-4)/2)0!important}h3{font-size:1.56rem;font-size:var(--title-scale-3);line-height:2rem;line-height:var(--title-line-height-3);max-width:30ch;margin:25px 0!important;margin:var(--title-margin-3)0 calc(var(--title-margin-3)/2)0!important}h2{font-size:1.88rem;font-size:var(--title-scale-2);line-height:2.4rem;line-height:var(--title-line-height-2);max-width:30ch;margin:52.5px 0!important;margin:var(--title-margin-2)0 calc(var(--title-margin-2)/2)0!important}h1{font-size:2.25rem;font-size:var(--title-scale-1);line-height:2.88rem;line-height:var(--title-line-height-1);max-width:20ch;margin:70px 0!important;margin:var(--title-margin-1)0 calc(var(--title-margin-1)/2)0!important}h1,h2,h3,h4,h5,h6{font-family:Editorial New Regular,serif;font-weight:400;display:block}h1:hover a,h2:hover a,h3:hover a,h4:hover a,h5:hover a,h6:hover a{background:0 0;z-index:0!important}.heading-anchor{color:currentColor;opacity:.4;margin-left:1ch;font-size:.4em;text-decoration:none}a{color:var(--text);margin:-5px -10px;padding:5px 10px;transition:all .25s}[theme=dark] a{color:var(--accent)}article a{margin:0;padding:0}a:hover,a[target=_blank]:hover,a[target=_blank]:hover:after{color:var(--background);background:#000;background:var(--text);transition:all .25s}a:active{color:var(--background);background:var(--accent);transition:all .25s}a[target=_blank]{position:relative}a[href^=http]:where(:not([href*="thomasorus.com/"])):after{content:"↗";font-family:monospace;font-size:1.2em}code{color:var(--text);font-family:IBM Plex Mono,monospace;font-size:.9em}:root{--spacing-pre-y:calc(((27/16)*1rem) + (35 - 27)*var(--fluid-bp));--spacing-pre-x:calc(((15/16)*1rem) + (42 - 15)*var(--fluid-bp))}pre{background-color:#d3d3d3;background-color:var(--background-dark);color:var(--text);border-radius:var(--radius-sm);scrollbar-color:var(--accent)var(--background-dark);padding:27px 15px 54px;padding:var(--spacing-pre-y)var(--spacing-pre-x);margin:0;line-height:1;overflow-x:auto}[theme=light] pre{scrollbar-color:var(--background)var(--accent)}pre code{font-size:.85em}ul{padding-left:2em}ul:not([role=list]) li{padding-left:.75em}ul li::marker{font-size:var(--base-font-size);color:var(--border)}ul[role=list]{margin:0;padding:0}ol{padding-left:2em}ol:not([role=list]) li{padding-left:1em}ol li::marker{font-size:var(--base-font-size);color:var(--border);font-weight:500}ol[role=list]{margin:0;padding:0}hr{color:var(--text);border:1px solid var(--text);margin:45px 0!important;margin:var(--title-margin-2)0!important}:root{--blockquote-padding-x:calc(((15/16)*1rem) + (42 - 15)*var(--fluid-bp));--blockquote-padding-y:calc(((23/16)*1rem) + (36 - 23)*var(--fluid-bp))}blockquote{color:var(--text);padding:15px 23px;padding:var(--blockquote-padding-y)var(--blockquote-padding-x)}blockquote+figcaption{color:var(--text);padding:0 15px 23px 23px;padding:0 var(--blockquote-padding-y)var(--blockquote-padding-x)var(--blockquote-padding-x)}[theme=color] blockquote,[theme=color] blockquote+figcaption{background-color:var(--accent);border-left:5px solid #000;border-left:5px solid var(--text)}[theme=light] blockquote,[theme=light] blockquote+figcaption{background-color:var(--grey);border-left:5px solid var(--border)}[theme=dark] blockquote,[theme=dark] blockquote+figcaption{background-color:var(--background-dark);border-left:5px solid var(--border)}figure>img+figcaption,figure>video+figcaption{background-color:#000;background-color:var(--background-dark);padding:11px;padding:var(--figcaption-spacing);border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);min-width:100%;box-shadow:var(--background-dark)0 0 0 2px}picture{display:block}picture img,picture video{box-shadow:var(--background-dark)0 0 0 2px;display:block}picture img,figure img,figure video{border-bottom:none;width:auto;min-width:100%;max-width:100%;height:auto}figure video,figure img{width:100%;box-shadow:var(--background-dark)0 0 0 2px;display:block}button,.button{min-width:120px;max-width:20ch;min-height:44px;box-shadow:var(--text)0 0 0 2px;background-color:#000;background-color:var(--text);border-radius:var(--radius-sm);color:var(--accent);border:none;padding:5px 19px;font-weight:600;line-height:1.5;text-decoration:none}button:hover,.button:hover{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--background);cursor:pointer}button:disabled,.button:disabled{color:var(--text);box-shadow:var(--grey-dark)0 0 0 2px;background-color:var(--grey);pointer-events:none}button:active,.button:active{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--accent);cursor:pointer}button svg,.button svg{fill:var(--text);margin-top:4px}[theme=light] button,[theme=light] .button{color:var(--background);box-shadow:var(--text)0 0 0 2px;border:none}[theme=light] button:hover,[theme=light] .button:hover{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--background);cursor:pointer}[theme=light] button:active,[theme=light] .button:active{color:var(--text);background-color:var(--accent);cursor:pointer}[theme=dark] button,[theme=dark] .button{color:var(--background);box-shadow:var(--text)0 0 0 2px;border:none}[theme=dark] button:hover,[theme=dark] .button:hover{color:var(--text);box-shadow:var(--text)0 0 0 2px;background-color:var(--background);cursor:pointer}[theme=dark] button:active,[theme=dark] .button:active{color:var(--background);background-color:var(--accent);cursor:pointer}button[data-secondary]{box-shadow:var(--text)0 0 0 2px;background-color:var(--background);color:var(--text)}button[data-small]{min-height:24px;min-width:unset;padding:3px 10px;font-weight:400}button[data-naked]{box-shadow:none;color:unset;min-width:24px;min-height:24px;font-size:inherit;font-weight:inherit;background:0 0;border:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}button[data-naked]:hover{box-shadow:none;color:unset;min-width:24px;min-height:24px;font-size:inherit;font-weight:inherit;background:0 0;border:none;outline:none;margin:0;padding:0}button[data-warning]{box-shadow:var(--red-darker)0 0 0 2px;background-color:var(--red-dark);color:var(--white)}button[data-warning]:hover{box-shadow:var(--black)0 0 0 2px;background-color:var(--red-darker);color:var(--white)}button:focus-visible{background-color:var(--focus);color:var(--accent);box-shadow:var(--text)0 0 0 2px;fill:var(--background)}:root{--padding-form:calc(((30/16)*1rem) + (50 - 30)*var(--fluid-bp));--margin-input:calc(((30/16)*1rem) + (50 - 30)*var(--fluid-bp));--margin-label:calc(((5/16)*1rem) + (10 - 5)*var(--fluid-bp))}form{border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--background-dark);padding:30px;padding:var(--padding-form)}form *{display:block}form>*+*{margin-top:30px;margin-top:var(--margin-s)}label~input,label~select,label~textarea{margin-top:5px;margin-top:var(--margin-label)}label~span{margin-top:0}legend{margin-bottom:5px;margin-bottom:var(--margin-label);padding:0}label~span{color:var(--grey-dark);font-style:italic;font-weight:600}input+span,select+span{color:var(--grey-pitchblack);font-weight:600;display:none}input[type=radio]~label,input[type=checkbox]~label{margin-right:var(--margin-label);font-weight:400}[aria-invalid]+span{color:var(--red-darker);display:block}[data-size]{width:100%}[data-size="30"]{max-width:30ch}[data-size="10"]{max-width:10ch}[type=checkbox],[type=radio],[type=checkbox]~label,[type=radio]~label{width:auto;display:inline}[theme=color] form{background-color:var(--background)}form .grouped{gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.errMsg{color:var(--red-darker);font-style:italic;font-weight:600;display:block}form[data-naked]{all:unset}:root{--padding-input-y:calc(((3/16)*1rem) + (5 - 3)*var(--fluid-bp));--padding-input-x:calc(((9/16)*1rem) + (17 - 9)*var(--fluid-bp))}input{color:var(--text);border-radius:var(--radius-sm);min-height:42px;padding:3px 9px;padding:var(--padding-input-y)var(--padding-input-x);background:#d3d3d3;border:none;outline:#0000;width:100%;display:block}[theme=color] input{background-color:var(--accent)}[theme=dark] input{background-color:var(--grey-darker)}[theme=light] input{background-color:var(--white)}input:focus{box-shadow:var(--border)0 0 0 2px}[theme=light] input:focus,[theme=dark] input:focus{box-shadow:var(--text)0 0 0 2px}input[aria-invalid=true]{background-color:var(--border)}[theme=dark] input[aria-invalid=true]{background-color:var(--grey-dark);color:var(--background)}[theme=light] input[aria-invalid=true]:focus,[theme=dark] input[aria-invalid=true]:focus{box-shadow:var(--text)0 0 0 2px}[theme=color] input[aria-invalid=true]:focus{box-shadow:var(--background)0 0 0 2px}input[data-size="30"]{width:100%;max-width:32.2ch}input[data-size="20"]{width:100%;max-width:22.2ch}input[data-size="10"]{width:100%;max-width:12.2ch}input[data-size="4"]{width:100%;max-width:6.2ch}input[data-size="2"]{width:100%;max-width:4.2ch}input[type=file]{all:unset;border-radius:var(--radius-sm);min-height:24px;min-width:unset;border:2px solid var(--text);margin:0;font-weight:400}input::file-selector-button{box-shadow:var(--text)0 0 0 2px;background-color:#000;background-color:var(--text);border-radius:var(--radius-sm);color:var(--accent);border:none;height:100%;margin:0 4px 0 0;line-height:1.5;transition:all .25s}input[type=hidden]+label{margin-top:unset}label{color:var(--text);font-size:var(--base-font-size);font-weight:700;line-height:var(--base-line-height);display:block}label .required{font-style:italic;font-weight:400}label[data-fake]{font-weight:400}legend{font-size:var(--base-font-size);font-weight:700;line-height:var(--base-line-height);display:block}:root{--padding-select-y:calc(((3/16)*1rem) + (5 - 3)*var(--fluid-bp));--padding-select-x:calc(((9/16)*1rem) + (17 - 9)*var(--fluid-bp))}select{color:var(--text);background-color:var(--grey);border-radius:var(--radius-sm);height:42px;padding:9px;padding:var(--padding-select-y)var(--padding-select-x);border:none;outline:#0000;width:100%;display:block}option{height:42px}select[data-size="30"]{width:30ch}select[data-size="20"]{width:20ch}select[data-size="10"]{width:10ch}select[data-size="5"]{width:5ch}select[data-size="4"]{width:4ch}[theme=color] select{background-color:var(--white)}[theme=dark] select{background-color:var(--grey-darker)}[theme=light] select{background-color:var(--white)}[theme=color] select:focus{box-shadow:var(--grey-pitchblack)0 0 0 2px}[theme=light] select:focus{box-shadow:var(--grey-dark)0 0 0 2px}[theme=dark] select:focus{box-shadow:var(--grey-darker)0 0 0 2px}table{text-align:left;width:100%;padding:25px;padding:var(--margin-s);border:2px solid #000;border:2px solid var(--text)}table caption{text-align:left;font-family:Editorial New Regular,serif;font-weight:400}tbody>*,thead>*{border-collapse:collapse;box-shadow:0 2px 0 var(--text);border:2px solid #000}dl{background-color:var(--background-dark);border-left:5px solid #000;border-left:5px solid var(--border);padding:25px;padding:var(--margin-s)}dt{font-weight:600}dd{padding-left:25px;padding-left:var(--margin-s)}dl>dd+dt{margin-top:12.5px;margin-top:calc(var(--margin-l)/2)}:root{--figcaption-spacing:calc(((11/16)*1rem) + (16 - 11)*var(--fluid-bp))}audio,audio::-webkit-media-controls-panel{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm);background-color:var(--background)}figure>audio+figcaption{background-color:#000;background-color:var(--background-dark);padding:11px;padding:var(--figcaption-spacing);border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);box-shadow:var(--background-dark)0 0 0 2px}figure audio{width:100%;box-shadow:var(--background-dark)0 0 0 2px;display:block}input[type=radio]{all:unset;-webkit-appearance:none;appearance:none;background-color:var(--background);font:inherit;color:var(--text);border:.15em solid var(--text);aspect-ratio:1;border-radius:50%;place-content:center;width:1em;height:1em;margin:0;display:grid}input[type=radio]:checked{border:.15em solid var(--text);background-color:var(--text)}input[type=radio]:before{content:"";width:1em;height:1em;box-shadow:inset 1em 1em var(--background);border-radius:50%;transition:transform .12s ease-in-out;transform:scale(0)}input[type=radio]:checked:before{box-shadow:none;transform:scale(.5)}input[type=radio]:focus{outline:max(1px,.15em)solid var(--text);outline-offset:max(1px,.1em);box-shadow:none}textarea{color:var(--text);border-radius:var(--radius-sm);min-height:42px;padding:3px 9px;padding:var(--padding-input-y)var(--padding-input-x);background:#d3d3d3;border:none;outline:#0000;width:100%;display:block}[theme=color] textarea{background-color:var(--accent)}[theme=dark] textarea{background-color:var(--grey-darker)}[theme=light] textarea{background-color:var(--white)}textarea:focus{box-shadow:var(--border)0 0 0 2px}[theme=light] textarea:focus,[theme=dark] textarea:focus{box-shadow:var(--text)0 0 0 2px}.grow-wrap{display:grid}.grow-wrap:after{content:attr(data-replicated-value)" ";white-space:pre-wrap;visibility:hidden}.grow-wrap>textarea{resize:none;overflow:hidden}.grow-wrap>textarea,.grow-wrap:after{font:inherit;grid-area:1/1/2/2}input[type=checkbox]{accent-color:var(--text);font:inherit;color:var(--text);min-height:unset;border:1px solid #000;outline:none;width:1em;height:1em;margin:0}iframe{aspect-ratio:16/9;width:100%;height:auto}header{background:var(--background);width:100%;padding:var(--margin-l);justify-content:space-between;align-items:flex-start;gap:var(--margin-s);flex-flow:wrap;display:flex}article>*+*{margin-top:25px;margin-top:var(--margin-s)}article .subpage-listing{margin-top:var(--title-margin-2);max-width:60ch}article .subpage-listing h2{border-top:2px solid var(--text);padding-top:var(--title-margin-2)}section[role=complementary]{background-color:#fff;background-color:var(--accent);width:100%;padding:.5em var(--margin-l);z-index:2;min-width:100%}section[role=complementary] details{justify-content:space-between;gap:var(--margin-l);cursor:pointer;flex-flow:wrap;justify-items:end;min-width:100%;display:flex}section[role=complementary] summary::-webkit-details-marker{display:none}.time-row{grid-template-columns:1fr auto;gap:.6em;min-width:100%;display:grid}section[role=complementary] details>*+*{margin-top:20px;margin-top:var(--margin-l)}.time-row__title{font-family:Editorial New Regular,serif}details[open] .time-row__second{display:none}dl.time-row-more{text-align:left;background-color:var(--accent);border-left:5px solid var(--text);grid-template-columns:auto 1fr;justify-items:start;gap:.6em;min-width:100%;display:grid}.time-row-more dt,.time-row-more dd{margin:0;padding:0}.time-row-more dt{justify-content:space-between;width:100%;display:flex}.time-row-more dt span{margin-left:var(--margin-s)}@media screen and (width<=640px){section[role=complementary]{position:static}.time-row{grid-template-columns:1fr;justify-items:start}}[theme=dark] section[role=complementary]{color:var(--background)}aside{border-left:5px solid var(--border);background-color:var(--background-dark);padding:var(--margin-s)}body[class=""] aside{background-color:var(--background-dark)}aside p:first-child{font-size:1.3rem;font-size:var(--title-scale-6);line-height:1.66rem;line-height:var(--title-line-height-4)}aside>*+*{margin-top:var(--margin-s)}article details{border-left:5px solid var(--border);background-color:var(--background-dark);padding:var(--margin-s)}article summary{font-size:1.3rem;font-size:var(--title-scale-6);line-height:1.66rem;line-height:var(--title-line-height-4)}article details>*+*{margin-top:var(--margin-s)}.nav--main{top:var(--margin-l)}.nav--main ul{flex-flow:wrap;justify-content:flex-end;align-items:center;gap:5px 20px;margin:0;padding:0;list-style:none;display:flex}.nav--main ul li{padding-left:0}.nav--main a{font-size:18px;text-decoration:none}[theme=dark] .nav--main a{color:var(--accent)}.nav--secondary ul{flex-flow:wrap;align-items:center;gap:5px 15px;margin:0;padding:0;list-style:none;display:flex}.nav--secondary ul li{padding-left:0}.nav--secondary a{white-space:nowrap;text-decoration:none}.breadcrumb{margin:0 var(--margin-l);background-color:var(--background);z-index:1;font-size:var(--base-font-size);padding-left:0;display:inline;top:0}.breadcrumb ol{gap:calc(1ch - 5px);margin:0;padding:0;list-style-type:none;display:inline-flex}.breadcrumb ol li{gap:calc(1ch - 5px);margin:0;padding:0;display:inline-flex}.breadcrumb ol li+li:before{content:"›";display:block;position:relative}@media (width<=550px){.breadcrumb ol li{display:none}.breadcrumb ol li:first-child,.breadcrumb ol li:last-child{display:inline-flex}}[theme=dark] .breadcrumb{color:var(--accent)}.color-nav{gap:.4rem;display:flex}@keyframes colors{0%{background-color:var(--teal)}20%{background-color:var(--blue)}40%{background-color:var(--red)}60%{background-color:var(--yellow)}80%{background-color:var(--pink)}to{background-color:var(--teal)}}.color-nav a{font:inherit;color:var(--text);border:.15em solid var(--text);aspect-ratio:1;border-radius:50%;place-content:center;width:1ch;margin:0;display:grid}.color-nav a[data-value=raw]{border:.1em dashed var(--text);background-color:#0000;border-radius:0;width:1ch}.color-nav a[data-value=color]{background-color:var(--picker)}.color-nav a[data-value=light]{background-color:var(--white)}.color-nav a[data-value=dark]{background-color:var(--black)}.none .color-nav a[data-value=color]{background-color:unset;animation:5s linear infinite colors}.flow>*+*{margin-top:var(--margin-s)}:root{--ratio:1.5;--s-5:calc(var(--s-4)/var(--ratio));--s-4:calc(var(--s-3)/var(--ratio));--s-3:calc(var(--s-2)/var(--ratio));--s-2:calc(var(--s-1)/var(--ratio));--s-1:calc(var(--s0)/var(--ratio));--s0:1rem;--s1:calc(var(--s0)*var(--ratio));--s2:calc(var(--s1)*var(--ratio));--s3:calc(var(--s2)*var(--ratio));--s4:calc(var(--s3)*var(--ratio));--s5:calc(var(--s4)*var(--ratio))}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.time-graph-container{box-sizing:border-box;font-size:calc(var(--base-font-size) + 1em)}.time-graph{grid-template-columns:repeat(auto-fit,calc(var(--base-font-size)*1.2));grid-gap:.15em;border-collapse:collapse;font-variant-numeric:oldstyle-nums;justify-content:center;width:100%;display:grid}.time-graph__text{margin:var(--s0)0;align-self:flex-end}.time-graph__hours{background:var(--background);color:var(--text);letter-spacing:-2px;padding:1px 3px 0 1px;font-family:monospace;font-size:.6rem;line-height:1;position:absolute;top:0;left:0}.time-graph ul{list-style:none}.time-graph__week{letter-spacing:-2px;text-align:center;flex-flow:column-reverse;width:100%;margin:10px 0;padding:0;font-family:monospace;font-size:.8rem;display:flex}.time-graph__activity{box-shadow:0 0 0 1px var(--text);width:100%;margin:1.5px;line-height:0;position:relative;padding:0!important}.time-graph__tooltip{display:none}.time-graph__activity:hover>.time-graph__tooltip{background-color:var(--background);border:1px solid var(--text);z-index:1;letter-spacing:normal;min-width:10px;margin-top:15px;margin-left:50%;padding:5px;font-family:sans-serif;font-size:.6rem;line-height:1;display:block;position:absolute;top:20%}.time-graph__legend-list{flex-flow:wrap;justify-content:center;max-width:100%;margin:10px auto 20px;padding:0;display:flex}.time-graph__legend{flex-flow:row;align-items:center;margin:5px 10px;list-style-type:none;display:flex}.time-graph__legend-container{flex-flow:row;align-items:center;margin:5px 0;font-family:monospace;font-size:.7rem;display:flex}.time-graph__value{margin-left:2px}.time-graph__definition{letter-spacing:-1px;margin-left:5px;padding-top:2px}.time-graph__pattern{border:1px solid var(--text);width:1.4em;height:1.4em;margin-right:4px;display:inline-block}.code-example{background:var(--background);border:1px solid var(--text);min-height:var(--s5)}.code-example-value{background:var(--background);color:var(--text);padding:1px 5px 0;font-family:monospace;display:inline}.code-example-children{height:var(--s2);width:var(--s2);border:1px solid var(--text)}.code-example-children-grid{border:1px solid var(--text)}.code-example-grid-star{grid-template-areas:"lefttop.righttop"".center.""leftbottom.rightbottom";display:grid}.pattern-demo{border:1px solid var(--text);background:#fff;width:100%;height:100px}.svg-demo{gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end;max-width:60ch;display:grid}.svg-demo div{flex-direction:column;align-items:start;display:flex}.svg-demo svg{border:1px solid var(--text);width:200px;height:100px;display:block}.home-grid{grid-gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.home-grid>*{padding:var(--margin-s);flex-flow:column;justify-content:flex-start;align-items:center;display:flex;position:relative}.home-grid svg{width:100%;max-width:300px}.absolute-link{width:100%;height:100%;position:absolute;inset:0}.absolute-link:hover{background:0 0}.form-demo{all:revert;color:#000;max-width:60ch;margin-top:var(--margin-s);box-sizing:border-box;background:#fff;border:1px solid;padding:5px}.form-demo input{background:#fff}.form-demo *{all:revert;box-sizing:border-box}.form-demo form,.form-demo fieldset{width:100%}.form-demo-block form *{display:block}.form-demo-spacing form>*+*,.form-demo-spacing fieldset>*+*{margin-top:1em!important}.form-demo-reduced label~span,.form-demo-reduced label~input,.form-demo-reduced label~select{margin-top:.25em!important}.form-demo-text label~span{color:#555;font-style:italic}.form-demo-err input+span,.form-demo-err input+span{display:none;color:red!important}.form-demo-err-block [aria-invalid]+span{display:block!important}.form-demo-size [data-size]{width:100%}.form-demo-size [data-size="30"]{max-width:30ch}.form-demo-size [data-size="10"]{max-width:10ch}.form-demo-checkbox form [type=checkbox],.form-demo-checkbox form [type=checkbox]~label{display:inline}.form-demo-button button,.form-demo-button [type=button],.form-demo-button [type=submit],.form-demo-button [type=reset]{all:unset;border:1px solid;padding:10px;font-size:1em}.edit-page{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start;gap:10px;width:100%;display:grid;position:relative;& form{max-width:unset;width:100%}& textarea{max-width:unset}}.media-preview-container{top:var(--margin-s);position:sticky}.toggle-preview-btn{margin:var(--margin-s)0;position:static}.media-picker{border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));height:100%;max-height:60vh;display:none;overflow-y:scroll}.media-picker__media{aspect-ratio:1;position:relative;& img,& video{object-fit:cover;width:100%;height:100%}}.media-picker__buttons{visibility:hidden;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:0;& button{flex:0 32px}}.media-picker__media:hover .media-picker__buttons{visibility:visible}.page-preview{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--padding-form);display:block;& svg{max-width:100%}}.media-preview-container[data-show=false]{display:none}.media-preview-container[data-show=gallery]{& .media-picker{display:grid}& .page-preview{display:none}}.media-preview-container[data-show=preview]{& .media-picker{display:none}& .page-preview{display:block}}.edit-footer{background-color:var(--background);z-index:1;width:100%;padding:calc(var(--margin-s)/2)var(--margin-l);gap:calc(var(--margin-s)/4)calc(var(--margin-s));flex-flow:wrap;display:flex;position:fixed;bottom:0;left:0}@media (width<=960px){.edit-page{grid-template-columns:1fr}}.media-form{gap:calc(var(--margin-s)/4)!important;flex-wrap:wrap!important;align-items:center!important;display:flex!important;& div{margin:0!important}}.hire{& .headline{gap:var(--margin-s);max-width:120ch;margin:auto;margin-bottom:calc(var(--margin-l)*2);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));display:grid;& figure{width:100%}}& .button{flex-grow:0;align-items:center;margin-right:1ch;display:flex}& .buttons{flex-wrap:wrap;gap:1rem;display:flex}& img{box-shadow:none}& .testimonials{max-width:100%;min-width:unset;&>div{gap:var(--margin-s);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));display:grid}& h2{text-align:center;min-width:100%}& figure{grid-template-rows:subgrid;background-color:var(--border);grid-row:span 2;gap:0;display:grid}& blockquote{padding:var(--margin-s)var(--margin-s)}& figcaption{align-items:center;gap:var(--margin-s);display:flex;& img{max-width:80px;min-width:unset;aspect-ratio:1;border-radius:50%;display:inline-block}}}& .hire-projects{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;gap:1rem;display:flex;overflow-x:auto;& a{color:var(--text)}& section{background-color:var(--background-dark);width:100%;padding:calc(var(--margin-s)/2);border-radius:var(--radius-md);align-items:stretch}& img{min-width:calc(320px - var(--margin-s)/2);border-radius:var(--radius-sm)}& p{font-size:1rem;line-height:1.2}}& .testimonials::-webkit-scrollbar{background:0 0;width:0}& .skills{margin:auto;& h2{text-align:center;min-width:100%}&>div{text-align:center;min-width:100%;margin:auto}& ul{gap:calc(var(--margin-s)/2);flex-wrap:wrap;justify-content:center;width:100%;margin:auto;display:flex}& li{background-color:var(--background-dark);border-radius:calc(3*var(--radius-md));text-align:center;padding:1rem;padding:calc(var(--margin-s)/2);font-size:1rem;line-height:1}& span{margin-right:.5rem;font-size:1.25rem}}& .interested{margin:auto}& .interested *{text-align:center;justify-content:center;max-width:100%}}
\ No newline at end of file
diff --git a/ui/static/index.js b/ui/static/index.js
index ad8000c..f5cf3c0 100644
--- a/ui/static/index.js
+++ b/ui/static/index.js
@@ -1,5 +1,6 @@
 // Focus-Aware Keystroke Pattern Detector with Redirects
 // This script detects keyboard shortcuts only when NOT focusing on input elements
+
 document.addEventListener('DOMContentLoaded', function () {
     // Variables to store keystroke history
     let keystrokeHistory = '';
@@ -69,6 +70,117 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+
+// Autosize
+!function (e, t) {
+    "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : (e || self).autosize = t()
+}(this, function () {
+    var e = new Map;
+
+    function t(t) {
+        var o = e.get(t);
+        o && o.destroy()
+    }
+
+    function o(t) {
+        var o = e.get(t);
+        o && o.update()
+    }
+
+    var r = null;
+    return "undefined" == typeof window ? ((r = function (e) {
+        return e
+    }).destroy = function (e) {
+        return e
+    }, r.update = function (e) {
+        return e
+    }) : ((r = function (t, o) {
+        return t && Array.prototype.forEach.call(t.length ? t : [t], function (t) {
+            return function (t) {
+                if (t && t.nodeName && "TEXTAREA" === t.nodeName && !e.has(t)) {
+                    var o, r = null, n = window.getComputedStyle(t), i = (o = t.value, function () {
+                        s({
+                            testForHeightReduction: "" === o || !t.value.startsWith(o),
+                            restoreTextAlign: null
+                        }), o = t.value
+                    }), l = function (o) {
+                        t.removeEventListener("autosize:destroy", l), t.removeEventListener("autosize:update", a), t.removeEventListener("input", i), window.removeEventListener("resize", a), Object.keys(o).forEach(function (e) {
+                            return t.style[e] = o[e]
+                        }), e.delete(t)
+                    }.bind(t, {
+                        height: t.style.height,
+                        resize: t.style.resize,
+                        textAlign: t.style.textAlign,
+                        overflowY: t.style.overflowY,
+                        overflowX: t.style.overflowX,
+                        wordWrap: t.style.wordWrap
+                    });
+                    t.addEventListener("autosize:destroy", l), t.addEventListener("autosize:update", a), t.addEventListener("input", i), window.addEventListener("resize", a), t.style.overflowX = "hidden", t.style.wordWrap = "break-word", e.set(t, {
+                        destroy: l,
+                        update: a
+                    }), a()
+                }
+
+                function s(e) {
+                    var o, i, l = e.restoreTextAlign, a = void 0 === l ? null : l, d = e.testForHeightReduction,
+                        u = void 0 === d || d, f = n.overflowY;
+                    if (0 !== t.scrollHeight && ("vertical" === n.resize ? t.style.resize = "none" : "both" === n.resize && (t.style.resize = "horizontal"), u && (o = function (e) {
+                        for (var t = []; e && e.parentNode && e.parentNode instanceof Element;) e.parentNode.scrollTop && t.push([e.parentNode, e.parentNode.scrollTop]), e = e.parentNode;
+                        return function () {
+                            return t.forEach(function (e) {
+                                var t = e[0], o = e[1];
+                                t.style.scrollBehavior = "auto", t.scrollTop = o, t.style.scrollBehavior = null
+                            })
+                        }
+                    }(t), t.style.height = ""), i = "content-box" === n.boxSizing ? t.scrollHeight - (parseFloat(n.paddingTop) + parseFloat(n.paddingBottom)) : t.scrollHeight + parseFloat(n.borderTopWidth) + parseFloat(n.borderBottomWidth), "none" !== n.maxHeight && i > parseFloat(n.maxHeight) ? ("hidden" === n.overflowY && (t.style.overflow = "scroll"), i = parseFloat(n.maxHeight)) : "hidden" !== n.overflowY && (t.style.overflow = "hidden"), t.style.height = i + "px", a && (t.style.textAlign = a), o && o(), r !== i && (t.dispatchEvent(new Event("autosize:resized", { bubbles: !0 })), r = i), f !== n.overflow && !a)) {
+                        var c = n.textAlign;
+                        "hidden" === n.overflow && (t.style.textAlign = "start" === c ? "end" : "start"), s({
+                            restoreTextAlign: c,
+                            testForHeightReduction: !0
+                        })
+                    }
+                }
+
+                function a() {
+                    s({ testForHeightReduction: !0, restoreTextAlign: null })
+                }
+            }(t)
+        }), t
+    }).destroy = function (e) {
+        return e && Array.prototype.forEach.call(e.length ? e : [e], t), e
+    }, r.update = function (e) {
+        return e && Array.prototype.forEach.call(e.length ? e : [e], o), e
+    }), r
+});
+
+function toggleGallery(e) {
+    const mediasBtn = document.querySelector("#mediasBtn")
+    const previewBtn = document.querySelector("#previewBtn")
+    const mediaPreviewContainer = document.querySelector(".media-preview-container")
+    if (mediaPreviewContainer.dataset.show !== "gallery") {
+        mediaPreviewContainer.dataset.show = "gallery"
+        delete (mediasBtn.dataset.secondary)
+        previewBtn.setAttribute("data-secondary", "");
+    } else {
+        mediaPreviewContainer.dataset.show = false
+        mediasBtn.setAttribute("data-secondary", "");
+    }
+}
+
+function togglePreview(e) {
+    const previewBtn = document.querySelector("#previewBtn")
+    const mediasBtn = document.querySelector("#mediasBtn")
+    const mediaPreviewContainer = document.querySelector(".media-preview-container")
+    if (mediaPreviewContainer.dataset.show !== "preview") {
+        mediaPreviewContainer.dataset.show = "preview"
+        delete (previewBtn.dataset.secondary)
+        mediasBtn.setAttribute("data-secondary", "");
+    } else {
+        mediaPreviewContainer.dataset.show = false
+        previewBtn.setAttribute("data-secondary", "");
+    }
+}
+
 let debounceTimer;
 function triggerDemo() {
     clearTimeout(debounceTimer);
@@ -83,8 +195,8 @@ function triggerDemo() {
 }
 
 // Insert text at saved cursor position (works even when not focused)
-function insertMedia(slug, extension, reposition, event) {
-    event.preventDefault()
+function insertMedia(slug, extension, reposition) {
+    console.log({ reposition })
     const value = textarea.value;
     let textInsert = ""
 
@@ -110,15 +222,15 @@ function insertMedia(slug, extension, reposition, event) {
         textarea.setSelectionRange(savedCursor, savedCursor);
     }
 
-    // togglePreview()
+    togglePreview()
     setTimeout(() => {
         triggerDemo()
-    }, 400)
+    }, 100)
 }
 
-function deleteMedia(filename, event) {
-    event.preventDefault()
+function deleteMedia(filename) {
     if (!confirm(`Delete "${filename}"?`)) return;
+
     const csrfToken = document.querySelector('#csrf_token')?.value;
 
     fetch(`/files/delete/${encodeURIComponent(filename)}`, {
@@ -130,7 +242,7 @@ function deleteMedia(filename, event) {
             const responseText = await response.text();
 
             if (response.ok) {
-              const mediaItem = document.querySelector(`#${filename.split('.').slice(0, -1)[0]}`)
+                const mediaItem = document.querySelector(`#${filename.split('.').slice(0, -1)}`)
                 if (mediaItem) {
                     mediaItem.remove()
                 }