commit 6b3f13a34f85f01a185f8353a5407ebaa8d69aab
Author: MeowcaTheoRange <tabletmeowcat@gmail.com>
Date:   Thu Sep 8 22:45:41 2022 -0500

    First commit!

diff --git a/assets/chemistry.png b/assets/chemistry.png
new file mode 100644
index 0000000..bcdd1d1
Binary files /dev/null and b/assets/chemistry.png differ
diff --git a/assets/clock.png b/assets/clock.png
new file mode 100644
index 0000000..8ee2788
Binary files /dev/null and b/assets/clock.png differ
diff --git a/assets/clock2.png b/assets/clock2.png
new file mode 100644
index 0000000..15b3a57
Binary files /dev/null and b/assets/clock2.png differ
diff --git a/assets/hourglass.png b/assets/hourglass.png
new file mode 100644
index 0000000..e10cd67
Binary files /dev/null and b/assets/hourglass.png differ
diff --git a/assets/interro.png b/assets/interro.png
new file mode 100644
index 0000000..e0fb720
Binary files /dev/null and b/assets/interro.png differ
diff --git a/assets/mark.png b/assets/mark.png
new file mode 100644
index 0000000..5e5fd55
Binary files /dev/null and b/assets/mark.png differ
diff --git a/assets/none.png b/assets/none.png
new file mode 100644
index 0000000..cbf5dc3
Binary files /dev/null and b/assets/none.png differ
diff --git a/assets/rainbow.png b/assets/rainbow.png
new file mode 100644
index 0000000..c1342ba
Binary files /dev/null and b/assets/rainbow.png differ
diff --git a/assets/sport.png b/assets/sport.png
new file mode 100644
index 0000000..634be91
Binary files /dev/null and b/assets/sport.png differ
diff --git a/assets/sussy.png b/assets/sussy.png
new file mode 100644
index 0000000..e90d7a7
Binary files /dev/null and b/assets/sussy.png differ
diff --git a/assets/trans.png b/assets/trans.png
new file mode 100644
index 0000000..8284538
Binary files /dev/null and b/assets/trans.png differ
diff --git a/canvas.js b/canvas.js
new file mode 100644
index 0000000..41e5240
--- /dev/null
+++ b/canvas.js
@@ -0,0 +1,89 @@
+document.querySelectorAll(".clock").forEach((clock) => {
+  var canvas = clock.querySelector("canvas");
+  var ctx = canvas.getContext("2d");
+  ctx.resetTransform();
+  ctx.translate(32, 32);
+  ctx.strokeStyle = "#FFFFFF";
+  ctx.lineWidth = 2;
+  ctx.lineCap = "round";
+  update();
+});
+function update() {
+  document.querySelectorAll(".clock").forEach((clock, i) => {
+    if (clock.classList.contains("main-clock")) return;
+    var canvas = clock.querySelector("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.resetTransform();
+    ctx.translate(32, 32);
+    ctx.strokeStyle = "#FFFFFF";
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    var canvas = clock.querySelector("canvas");
+    var ctx = canvas.getContext("2d");
+    var now = new Date();
+    var hour = now.toLocaleTimeString(undefined, {
+      timeZone: clock.dataset.timezone,
+      hour: "2-digit",
+      hour12: false
+    }) % 12;
+    var minute = now.getMinutes();
+    clock.querySelector(".timezone").innerHTML = now.toLocaleDateString(undefined, {
+      timeZone: clock.dataset.timezone,
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      weekday: "long",
+      timeZoneName: 'long'
+    });
+    clock.querySelector(".title").innerHTML = now.toLocaleTimeString(undefined, {
+      timeZone: clock.dataset.timezone,
+      hc: "h12", timeStyle: "short"
+    });
+    ctx.clearRect(-32,-32, 64, 64);
+    ctx.beginPath();
+    ctx.arc(0, 0, 30, 0, Math.PI * 2);
+    ctx.stroke();
+    drawHand(ctx, (hour*Math.PI/6)+(minute*Math.PI/(6*60)), 16);
+    drawHand(ctx, (minute*Math.PI/30), 24);
+  });
+}
+
+function drawHand(ctx, pos, length) {
+    ctx.beginPath();
+    ctx.moveTo(0,0);
+    ctx.rotate(pos);
+    ctx.lineTo(0, -length);
+    ctx.stroke();
+    ctx.rotate(-pos);
+}
+
+var theClock = document.querySelector(".main-clock");
+var prevMin = new Date().getMinutes();
+function updateMain() {
+  var canvas = theClock.querySelector("canvas");
+  var ctx = canvas.getContext("2d");
+  var now = new Date();
+  var hour = now.getHours() % 12;
+  var minute = now.getMinutes();
+  if (prevMin != minute) update();
+  prevMin = minute;
+  theClock.querySelector(".timezone").innerHTML = now.toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    weekday: "long",
+    timeZoneName: 'long'
+  });
+  theClock.querySelector(".title").innerHTML = now.toLocaleTimeString(undefined, {
+    hc: "h12", timeStyle: "short"
+  });
+  ctx.clearRect(-32,-32, 64, 64);
+  ctx.beginPath();
+  ctx.arc(0, 0, 30, 0, Math.PI * 2);
+  ctx.stroke();
+  drawHand(ctx, (hour*Math.PI/6)+(minute*Math.PI/(6*60)), 16);
+  drawHand(ctx, (minute*Math.PI/30), 24);
+  window.requestAnimationFrame(updateMain);
+}
+
+window.requestAnimationFrame(updateMain);
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..52edddd
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e269623
--- /dev/null
+++ b/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Clock</title>
+    <link rel="stylesheet" href="./styles/root.css">
+    <link rel="stylesheet" href="./styles/clock.css">
+    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="stylesheet" href="./styles/dialog.css">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <div id="back"></div>
+    <div class="header">
+      <div>
+        <button class="material-symbols-outlined hiw" data-title="Menu" onclick="this.parentElement.parentElement.classList.toggle('wide')">menu</button>
+      </div>
+      <div>
+        <button class="material-symbols-outlined" data-title="Add World Clock" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timezone--').classList.add('open');">add_circle</button>
+        <sep></sep>
+        <button class="material-symbols-outlined" data-title="Customize Color" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-dialog--').classList.add('open');">palette</button>
+        <button class="material-symbols-outlined" data-title="Open Fullscreen" onclick="openFullscreen();">fullscreen</button>
+      </div>
+    </div>
+    <div class="body">
+      <div class="clock main-clock">
+        <canvas width="64" height="64"></canvas><!--
+        --><div class="labels">
+          <h1 class="title">Loading...</h1><br />
+          <p class="timezone">Loading...</p>
+        </div>
+        <h1>Welcome!</h1>
+        <span>Feel free to take some notes.</span><br />
+        <textarea class="txt" title="Notes" placeholder="Type here." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
+      </div>
+    </div>
+    <div class="poplight">
+      <button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="this.parentElement.classList.toggle('hidden')">unfold_less</button>
+      <button class="press material-symbols-outlined popped" onclick="this.classList.toggle('popped')"></button>
+    </div>
+    <div class="scrim-over-- scr-dialog--">
+      <div class="dialog" id="colordia">
+        <form id="color">
+          <p class="dlg-top">Customize Color</p>
+          <input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000" checked /><!--
+          --><label for="colorred" style="background-color:#800000">RED</label><!--
+          --><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000" /><!--
+          --><label for="colororange" style="background-color:#804000">ORANGE</label><!--
+          --><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000" /><!--
+          --><label for="coloryellow" style="background-color:#808000">YELLOW</label><!--
+          --><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000" /><!--
+          --><label for="colorgreen" style="background-color:#006000">GREEN</label><!--
+          --><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080" /><!--
+          --><label for="colorblue" style="background-color:#006080">BLUE</label><!--
+          --><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060" /><!--
+          --><label for="colorpurple" style="background-color:#600060">PURPLE</label><!--
+          --><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040" /><!--
+          --><label for="colordark" style="background-color:#404040">DARK</label><br /><!--
+          --><input type="radio" name="color" id="colortrans" value="#FFFF00|url(../assets/trans.png)|#404040" /><!--
+          --><label for="colortrans" style="background:url(./assets/trans.png)">TRANS</label><!--
+          --><input type="radio" name="color" id="colorrainbow" value="#FFFF00|url(../assets/rainbow.png)|#404040" /><!--
+          --><label for="colorrainbow" style="background:url(./assets/rainbow.png)">RAINBOW</label><br />
+          <p class="dlg-top">Customize Background</p>
+          <input type="radio" name="background" id="bgnone" value="../assets/none.png" checked /><!--
+          --><label for="bgnone" style="background-image: url(./assets/none.png)">NOTHING</label><!--
+          --><input type="radio" name="background" id="bgclocks" value="../assets/clock.png" /><!--
+          --><label for="bgclocks" style="background-image: url(./assets/clock.png)">CLOCKS</label><!--
+          --><input type="radio" name="background" id="bgclockstwo" value="../assets/clock2.png" /><!--
+          --><label for="bgclockstwo" style="background-image: url(./assets/clock2.png)">CLOCKS 2</label><!--
+          --><input type="radio" name="background" id="bgsus" value="../assets/sussy.png" /><!--
+          --><label for="bgsus" style="background-image: url(./assets/sussy.png)">SUSSY</label><!--
+          --><input type="radio" name="background" id="bghour" value="../assets/hourglass.png" /><!--
+          --><label for="bghour" style="background-image: url(./assets/hourglass.png)">WORKING</label><!--
+          --><input type="radio" name="background" id="bginter" value="../assets/interro.png" /><!--
+          --><label for="bginter" style="background-image: url(./assets/interro.png)">INTERRO</label><!--
+          --><input type="radio" name="background" id="bgbad" value="../assets/chemistry.png" /><!--
+          --><label for="bgbad" style="background-image: url(./assets/chemistry.png)">CHEMIST</label><!--
+          --><input type="radio" name="background" id="bgsport" value="../assets/sport.png" /><!--
+          --><label for="bgsport" style="background-image: url(./assets/sport.png)">SPORT</label><!--
+          --><input type="radio" name="background" id="bgmark" value="../assets/mark.png" /><!--
+          --><label for="bgmark" style="background-image: url(./assets/mark.png)">MARK</label><br />
+          <div>
+            <input type="submit" name="action" value="DONE"/>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="scrim-over-- scr-timezone--">
+      <div class="dialog" id="timezonedia">
+        <p class="dlg-top">Select Timezone</p>
+        <form id="timezone">
+          <select name="timezone" title="Timezone">
+            <option value="Etc/GMT">GMT</option>
+            <option value="Etc/GMT-1">GMT+1 ECT</option>
+            <option value="Etc/GMT-2">GMT+2 ART</option>
+            <option value="Etc/GMT-3">GMT+3 EAT</option>
+            <option value="Etc/GMT-4">GMT+4 NET</option>
+            <option value="Etc/GMT-5">GMT+5 IET</option>
+            <option value="Etc/GMT-6">GMT+6 BST</option>
+            <option value="Etc/GMT-7">GMT+7 VST</option>
+            <option value="Etc/GMT-8">GMT+8 CTT</option>
+            <option value="Etc/GMT-9">GMT+9 JST</option>
+            <option value="Etc/GMT-10">GMT+10 AET</option>
+            <option value="Etc/GMT-11">GMT+11 SST</option>
+            <option value="Etc/GMT+1">GMT-1 ???</option>
+            <option value="Etc/GMT+2">GMT-2 ???</option>
+            <option value="Etc/GMT+3">GMT-3 BET</option>
+            <option value="Etc/GMT+4">GMT-4 PRT</option>
+            <option value="Etc/GMT+5">GMT-5 EST</option>
+            <option value="Etc/GMT+6">GMT-6 CST</option>
+            <option value="Etc/GMT+7">GMT-7 MST</option>
+            <option value="Etc/GMT+8">GMT-8 PST</option>
+            <option value="Etc/GMT+9">GMT-9 AST</option>
+            <option value="Etc/GMT+10">GMT-10 HST</option>
+            <option value="Etc/GMT+11">GMT-11 ???</option>
+            <option value="Etc/GMT+12">GMT12</option>
+          </select>
+          <div>
+            <input type="submit" name="action" value="DONE"/>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
+    <script src="./canvas.js"></script>
+    <script>
+var elem = document.documentElement;
+
+function openFullscreen() {
+  if (document.fullscreenElement == null) {
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullscreen) { /* Safari */
+      elem.webkitRequestFullscreen();
+    } else if (elem.msRequestFullscreen) { /* IE11 */
+      elem.msRequestFullscreen();
+    }
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) { /* Safari */
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) { /* IE11 */
+      document.msExitFullscreen();
+    }
+  }
+}
+
+document.querySelector("#color").addEventListener("submit", (e) => {
+  const formData = new FormData(e.target);
+  var colors = formData.get("color").split("|");
+  localStorage.setItem("colors", formData.get("color"));
+  console.log(colors);
+  localStorage.setItem("background", formData.get("background"));
+  document.documentElement.style.setProperty('--main-color', colors[0]);
+  document.documentElement.style.setProperty('--background', colors[1]);
+  document.documentElement.style.setProperty('--background-light', colors[2]);
+  document.documentElement.style.setProperty('--background-image', "url(" + formData.get("background") + ")");
+  document.querySelector('.scr-dialog--').classList.remove('open');
+  event.preventDefault();
+})
+
+var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040").split("|");
+document.documentElement.style.setProperty('--main-color', colors[0]);
+document.documentElement.style.setProperty('--background', colors[1]);
+document.documentElement.style.setProperty('--background-light', colors[2]);
+  document.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "./assets/clock.png") + ")");
+
+document.querySelector("#color").addEventListener("change", (e) => {
+  const formData = new FormData(document.querySelector("#color"));
+  var colors = formData.get("color").split("|");
+  document.documentElement.style.setProperty('--main-color', colors[0]);
+  document.documentElement.style.setProperty('--background', colors[1]);
+  document.documentElement.style.setProperty('--background-light', colors[2]);
+})
+
+document.querySelector("#timezone").addEventListener("submit", (e) => {
+  event.preventDefault();
+  const formData = new FormData(e.target);
+  document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="clock" data-timezone="${formData.get("timezone")}">
+  <canvas width="64" height="64"></canvas><!--
+  --><div class="labels">
+    <h1 class="title">Loading...</h1><br />
+    <p class="timezone">Loading...</p>
+  </div><br />
+  <button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
+</div>`);
+  update();
+  document.querySelector('.scr-timezone--').classList.remove('open');
+})
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/styles/clock.css b/styles/clock.css
new file mode 100644
index 0000000..ded14bc
--- /dev/null
+++ b/styles/clock.css
@@ -0,0 +1,111 @@
+.body {
+  width: calc(100vw - 64px);
+  height: 100vh;
+  position: fixed;
+  left: 64px;
+  top: 0;
+  padding: 0 16px;
+  box-sizing: border-box;
+  z-index: 1;
+  overflow-y: auto;
+}
+
+.body .clock {
+  width: 100%;
+  min-height: max-content;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  padding: 16px;
+  box-sizing: border-box;
+  color: white;
+  margin: 16px 0;
+}
+
+.body .clock::before {
+  content: "";
+  background-color: #FFFFFF40;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  backdrop-filter: blur(8px);
+  z-index: -1;
+}
+
+
+
+.body .clock h1 {
+  margin: 0;
+  margin-top: 16px;
+  padding: 0;
+  color: white;
+  font-weight: lighter;
+  vertical-align: middle;
+}
+
+
+
+.body .clock div.labels {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.body .clock div.labels * {
+  margin: 0;
+  padding: 0;
+  color: white;
+  font-weight: lighter;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.body .clock div.labels .timezone {
+  color: #c0c0c0;
+}
+
+canvas {
+  margin: 0;
+  margin-right: 16px;
+  padding: 0;
+  vertical-align: middle;
+}
+
+textarea {
+  resize: none;
+  width: 100%;
+  margin-top: 8px;
+  box-sizing: border-box;
+  height: max-content;
+  max-height: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  background-color: #00000040;
+  color: white;
+}
+
+.deleteclock {
+  margin-top: 16px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background-color: #FF000080;
+  color: white;
+  border-radius: 16px;
+  transition: background-color 0.125s;
+}
+
+.deleteclock:focus {
+  background-color: #FF0000A0;
+}
+
+.deleteclock:hover {
+  background-color: #FF0000C0;
+}
+
+.deleteclock:active {
+  background-color: #FF0000FF;
+}
\ No newline at end of file
diff --git a/styles/dialog.css b/styles/dialog.css
new file mode 100644
index 0000000..e2d1cd8
--- /dev/null
+++ b/styles/dialog.css
@@ -0,0 +1,112 @@
+.scrim-over--.open {
+  background-color: #0006;
+  backdrop-filter: blur(4px);
+  pointer-events: auto;
+}
+
+.scrim-over-- .dialog {
+  display: none;
+}
+
+.scrim-over--.open .dialog {
+  display: inline-block;
+}
+
+.dialog {
+  min-width: 320px;
+  min-height: 128px;
+  background-color: var(--background-light);
+  transition: background-color 0.125s;
+  color: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.dialog p {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 4px;
+}
+
+.dialog .dlg-top {
+  display: block;
+  font-weight: bold;
+  font-size: 18px;
+  margin: 8px 0;
+}
+
+.dialog form div {
+  text-align: right;
+  margin-top: 8px;
+  box-sizing: border-box;
+}
+
+.dialog form div input[type=submit] {
+  margin: 0;
+  padding: 8px;
+  height: 32px;
+  box-sizing: border-box;
+  border: none;
+  background-color: transparent;
+  color: var(--main-color);
+  font-weight: bold;
+  border-radius: 4px;
+  transition: background-color 0.125s, color 0.125s;
+}
+
+.dialog form div input:focus {
+  background-color: #00000020;
+}
+
+.dialog form div input:hover {
+  background-color: #00000040;
+}
+
+.dialog form div input:active {
+  background-color: #00000080;
+}
+
+input[type="radio"] {
+  opacity: 0;
+  width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+input[type="radio"] + label {
+  display: inline-block;
+  margin: 8px;
+  padding: 0;
+  width: 96px;
+  height: 64px;
+  border-radius: 4px;
+  box-shadow: 0 0 4px 2px rgba(0,0,0,0.25);
+  transition: border 0.25s;
+  box-sizing: border-box;
+  border: 8px solid transparent;
+  background-size: 96px;
+  background-repeat: no-repeat;
+}
+
+input[type="radio"]:checked + label {
+  border: 8px solid #FFF6;
+}
+
+input[type="radio"]:focus + label {
+  outline: 4px solid white; 
+}
+
+.dialog select {
+  width: 100%;
+  margin: 8px 0;
+  box-sizing: border-box;
+  height: max-content;
+  max-height: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  background-color: #00000040;
+  color: white;
+}
\ No newline at end of file
diff --git a/styles/root.css b/styles/root.css
new file mode 100644
index 0000000..a223417
--- /dev/null
+++ b/styles/root.css
@@ -0,0 +1,7 @@
+:root {
+  --main-color: #FFFF00;
+  --background: #202020;
+  --background-light: #404040;
+  --background-grad: url("../assets/none.png");
+  --background-image: url("../assets/clocks.png");
+}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..d351bc0
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,310 @@
+body {
+  background: var(--background);
+  background-size: 100vw 100vh;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  transition: background 0.125s;
+  margin: 0;
+  padding: 0;
+}
+
+#back {
+  background-image: var(--background-image);
+  background-size: 128px;
+  background-position: center;
+  opacity: 0.15;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+* {
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.header {
+  width: 64px;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-content: stretch;
+  align-items: center;
+  z-index: 9;
+  transition: width 0.125s;
+}
+
+.header.wide {
+  width: 256px;
+}
+.scrim--, .scrim-over-- {
+  display: inline-block;
+  width: 100vw;
+  height: 100vh;
+  z-index: 8;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  backdrop-filter: none;
+  pointer-events: none;
+  transition: background-color 0.125s, backdrop-filter 0.125s;
+}
+.scrim-over-- {
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+.header.wide ~ .scrim-- {
+  background-color: #0006;
+  backdrop-filter: blur(4px);
+  pointer-events: auto;
+}
+
+.header::before {
+  background-color: #FFFFFF40;
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(8px);
+}
+
+.header div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: space-around;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 50%;
+}
+
+.header div:first-child {
+  justify-content: flex-start;
+}
+
+.header div:last-child {
+  justify-content: flex-end;
+}
+
+.header button {
+  height: 48px;
+  width: 100%;
+  border-radius: 24px;
+  border: none;
+  padding: 12px;
+  margin: none;
+  background-color: transparent;
+  transition: background-color 0.125s;
+  color: #FFFFFF;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.header.wide button {
+  overflow: hidden;
+}
+
+.header button:hover {
+  background-color: #FFFFFF40;
+}
+
+.header button::after {
+  position: absolute;
+  display: inline-block;
+  content: attr(data-title);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 12px;
+  height: 12px;
+  box-sizing: content-box;
+  background-color: transparent;
+  color: transparent;
+  left: calc(100% + 16px);
+  border-radius: 4px;
+  top: calc(50% - 14px);
+  transition: color 0.125s, width 0.125s;
+  width: 0;
+  padding: 8px 0;
+  overflow: hidden;
+}
+
+.header:not(.wide) button:hover::after {
+  background-color: #202020;
+  color: #FFFFFF;
+  width: initial;
+  padding: 8px;
+}
+
+.header:not(.wide) button:focus::after {
+  background-color: #202020;
+  color: #FFFFFF;
+  width: initial;
+  padding: 8px;
+}
+
+.header.wide button::after {
+  left: 48px;
+  top: calc(50% - 7px);
+  color: white;
+  width: initial;
+  height: 14px;
+  padding: 0;
+  font-size: 14px;
+}
+
+.header button:focus {
+  background-color: #FFFFFF20;
+}
+
+.header button:active {
+  background-color: #FFFFFF80;
+}
+
+sep {
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  background-color: transparent;
+  border: 1px dashed #FFFFFF;
+  margin: 4px;
+  z-index: 9;
+}
+
+.poplight {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  width: 128px;
+  height: 128px;
+  transition: bottom 0.125s;
+  z-index: 9;
+}
+
+.poplight.hidden {
+  bottom: -128px;
+}
+
+.poplight button.hide {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  right: -0px;
+  top: -48px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 16px;
+  background-color: transparent;
+  color: white;
+}
+
+.poplight button.hide::after {
+  position: absolute;
+  display: inline-block;
+  content: attr(data-title);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 12px;
+  height: 12px;
+  box-sizing: content-box;
+  background-color: transparent;
+  color: transparent;
+  right: 0;
+  border-radius: 4px;
+  top: -48px;
+  transition: color 0.125s, width 0.125s;
+  width: 0;
+  padding: 8px 0;
+  overflow: hidden;
+}
+
+.poplight button.hide:hover::after {
+  background-color: #202020;
+  color: #FFFFFF;
+  width: initial;
+  padding: 8px;
+}
+
+.poplight button.hide:focus {
+  background-color: #FFFFFF20;
+}
+
+.poplight button.hide:hover {
+  background-color: #FFFFFF40;
+}
+
+.poplight button.hide:active {
+  background-color: #FFFFFF80;
+}
+
+.poplight button.press {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 64px;
+  background-color: #808080;
+  overflow: hidden;
+  border: none;
+  font-size: 64px;
+  transition: top 0.125s, right 0.125s, width 0.125s, height 0.125s, background-color 0.125s, color 0.125s, font-size 0.125s;
+}
+
+.poplight.hidden button.press {
+  top: -48px;
+  right: 48px;
+  width: 32px;
+  height: 32px;
+  border-radius: 64px;
+  font-size: 24px;
+  color: transparent;
+}
+
+.poplight button.press.popped {
+  background-color: var(--main-color);
+  box-shadow: 0px 0px 32px 0px var(--main-color);
+}
+
+.poplight button.press::after {
+  position: absolute;
+  content: "devices";
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 64px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+.poplight button.press:hover::after {
+  background-color: #ffffff40;
+}
+
+.poplight button.press:active::after {
+  background-color: #ffffff80;
+}
+
+.poplight button.press.popped::after {
+  content: "phonelink_off";
+}
\ No newline at end of file