diff --git a/example/index.html b/example/index.html
index 818bba43e8ccc3a8d46d2d80934c2b785c13a614..a6f42778f099161aec25d6e50da213c583877e6e 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,168 +1,20 @@
 <!doctype html>
 
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="color-scheme" content="light dark" />
-  <title>Spectre</title>
   <script src="../lib/spectre.min.js"></script>
+  <link rel="stylesheet" href="sakura.css" />
   <style>
-    /* Catppuccin Latte */
-    :root {
-      color-scheme: light dark;
-      --base: #eff1f5;
-      --mantle: #e6e9ef;
-      --crust: #dce0e8;
-      --text: #4c4f69;
-      --subtext: #6c6f85;
-      --surface: #ccd0da;
-      --overlay: #9ca0b0;
-      --accent: #7287fd;
-      --green: #40a02b;
-      --shadow: rgba(76, 79, 105, 0.15);
-    }
-
-    /* Catppuccin Mocha */
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --base: #1e1e2e;
-        --mantle: #181825;
-        --crust: #11111b;
-        --text: #cdd6f4;
-        --subtext: #a6adc8;
-        --surface: #313244;
-        --overlay: #6c7086;
-        --accent: #b4befe;
-        --green: #a6e3a1;
-        --shadow: rgba(0, 0, 0, 0.4);
-      }
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1rem;
-      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-      background: linear-gradient(135deg, var(--mantle), var(--crust));
-      color: var(--text);
-    }
-
-    form {
-      width: 100%;
-      max-width: 360px;
-      padding: 2rem;
-      background: var(--base);
-      border: 1px solid var(--surface);
-      border-radius: 12px;
-      box-shadow: 0 10px 30px var(--shadow);
-    }
-
-    h1 {
-      margin: 0 0 1.5rem;
-      font-size: 1.5rem;
-      text-align: center;
-    }
-
-    label {
-      display: block;
-      margin-bottom: 0.35rem;
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--subtext);
-    }
-
     input {
-      display: block;
-      width: 100%;
-      margin-bottom: 1rem;
-      padding: 0.65rem 0.75rem;
-      font: inherit;
-      color: var(--text);
-      background: var(--mantle);
-      border: 1px solid var(--surface);
-      border-radius: 8px;
-      transition: border-color 0.15s, box-shadow 0.15s;
-    }
-
-    input::placeholder {
-      color: var(--overlay);
-    }
-
-    input:focus,
-    button:focus-visible {
-      outline: none;
-      border-color: var(--accent);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
-    }
-
-    .result {
-      position: relative;
-    }
-
-    #result {
-      display: block;
-      padding: 0.75rem 3rem;
-      min-height: 2.75rem;
-      font-family: ui-monospace, "SF Mono", Consolas, monospace;
-      font-size: 1.1rem;
-      text-align: center;
-      word-break: break-all;
-      background: var(--crust);
-      border: 1px solid var(--surface);
-      border-radius: 8px;
-    }
-
-    button {
-      position: absolute;
-      top: 50%;
-      right: 0.4rem;
-      transform: translateY(-50%);
-      width: 2rem;
-      height: 2rem;
-      padding: 0;
-      font-size: 1.1rem;
-      line-height: 1;
-      color: var(--green);
-      background: transparent;
-      border: 1px solid transparent;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-
-    button:hover:not(:disabled) {
-      background: var(--surface);
-    }
-
-    button:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
+      width: 50%;
     }
   </style>
 </head>
 
 <body>
-  <form onsubmit="return false">
-    <h1>Spectre</h1>
-    <label for="userKey">Name</label>
-    <input id="userKey" type="text" placeholder="Robert Lee Mitchell" autocomplete="off" />
-    <label for="userSecret">Secret</label>
-    <input id="userSecret" type="password" placeholder="banana colored duckling" autocomplete="off" />
-    <label for="siteKey">Site</label>
-    <input id="siteKey" type="text" placeholder="masterpasswordapp.com" autocomplete="off" />
-    <label for="result">Password</label>
-    <div class="result">
-      <output id="result"></output>
-      <button id="copy" type="button" title="Copy password" aria-label="Copy password" disabled>📋</button>
-    </div>
-  </form>
+  <input id="userKey" type="text" placeholder="Robert Lee Mitchell" /><br />
+  <input id="userSecret" type="text" placeholder="banana colored duckling" /><br />
+  <input id="siteKey" type="text" placeholder="masterpasswordapp.com" /><br />
+  <strong id="result"></strong>
 </body>
 
 <script>
@@ -170,12 +22,10 @@   const $userKey = document.getElementById("userKey");
   const $userSecret = document.getElementById("userSecret");
   const $siteKey = document.getElementById("siteKey");
   const $result = document.getElementById("result");
-  const $copy = document.getElementById("copy");
 
   $userKey.addEventListener("change", onChange);
   $userSecret.addEventListener("change", onChange);
   $siteKey.addEventListener("keyup", generate);
-  $copy.addEventListener("click", copy);
 
   let s = null;
   function onChange() {
@@ -188,11 +38,5 @@   function generate() {
     if (s === null || $siteKey.value === "") return;
     const pw = s.site($siteKey.value);
     $result.innerText = pw;
-    $copy.disabled = !navigator.clipboard;
   }
-  async function copy() {
-    await navigator.clipboard.writeText($result.innerText);
-    $copy.innerText = "\u2714\uFE0E";
-    setTimeout(() => ($copy.innerText = "📋"), 1500);
-  }
-</script>
+</script>
\ No newline at end of file
diff --git a/example/sakura.css b/example/sakura.css
new file mode 100644
index 0000000000000000000000000000000000000000..53b47996dc0901c6b6ce7bead96da85b55cacbe5
--- /dev/null
+++ b/example/sakura.css
@@ -0,0 +1,277 @@
+/* Sakura.css v1.5.0
+ * ================
+ * Minimal css theme.
+ * Project: https://github.com/oxalorg/sakura/
+ */
+/* Body */
+html {
+  font-size: 62.5%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+}
+
+body {
+  font-size: 1.8rem;
+  line-height: 1.618;
+  max-width: 38em;
+  margin: auto;
+  color: #4a4a4a;
+  background-color: #f9f9f9;
+  padding: 13px;
+}
+
+@media (max-width: 684px) {
+  body {
+    font-size: 1.53rem;
+  }
+}
+
+@media (max-width: 382px) {
+  body {
+    font-size: 1.35rem;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.1;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  font-weight: 700;
+  margin-top: 3rem;
+  margin-bottom: 1.5rem;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+}
+
+h1 {
+  font-size: 2.35em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.75em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1em;
+}
+
+p {
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+small,
+sub,
+sup {
+  font-size: 75%;
+}
+
+hr {
+  border-color: #1d7484;
+}
+
+a {
+  text-decoration: none;
+  color: #1d7484;
+}
+
+a:visited {
+  color: #144f5a;
+}
+
+a:hover {
+  color: #982c61;
+  border-bottom: 2px solid #4a4a4a;
+}
+
+ul {
+  padding-left: 1.4em;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+li {
+  margin-bottom: 0.4em;
+}
+
+blockquote {
+  margin-left: 0px;
+  margin-right: 0px;
+  padding-left: 1em;
+  padding-top: 0.8em;
+  padding-bottom: 0.8em;
+  padding-right: 0.8em;
+  border-left: 5px solid #1d7484;
+  margin-bottom: 2.5rem;
+  background-color: #f1f1f1;
+}
+
+blockquote p {
+  margin-bottom: 0;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+/* Pre and Code */
+pre {
+  background-color: #f1f1f1;
+  display: block;
+  padding: 1em;
+  overflow-x: auto;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+  font-size: 0.9em;
+}
+
+code,
+kbd,
+samp {
+  font-size: 0.9em;
+  padding: 0 0.5em;
+  background-color: #f1f1f1;
+  white-space: pre-wrap;
+}
+
+pre > code {
+  padding: 0;
+  background-color: transparent;
+  white-space: pre;
+  font-size: 1em;
+}
+
+/* Tables */
+table {
+  text-align: justify;
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2rem;
+}
+
+td,
+th {
+  padding: 0.5em;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+/* Buttons, forms and input */
+input,
+textarea {
+  border: 1px solid #4a4a4a;
+}
+
+input:focus,
+textarea:focus {
+  border: 1px solid #1d7484;
+}
+
+textarea {
+  width: 100%;
+}
+
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="file"]::file-selector-button {
+  display: inline-block;
+  padding: 5px 10px;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: #1d7484;
+  color: #f9f9f9;
+  border-radius: 1px;
+  border: 1px solid #1d7484;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.button[disabled],
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+input[type="button"][disabled],
+input[type="file"]::file-selector-button[disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+input[type="file"]::file-selector-button:hover {
+  background-color: #982c61;
+  color: #f9f9f9;
+  outline: 0;
+}
+
+.button:focus-visible,
+button:focus-visible,
+input[type="submit"]:focus-visible,
+input[type="reset"]:focus-visible,
+input[type="button"]:focus-visible,
+input[type="file"]::file-selector-button:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+textarea,
+select,
+input {
+  color: #4a4a4a;
+  padding: 6px 10px;
+  /* The 6px vertically centers text on FF, ignored by Webkit */
+  margin-bottom: 10px;
+  background-color: #f1f1f1;
+  border: 1px solid #f1f1f1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+
+textarea:focus,
+select:focus,
+input:focus {
+  border: 1px solid #1d7484;
+  outline: 0;
+}
+
+input[type="checkbox"]:focus {
+  outline: 1px dotted #1d7484;
+}
+
+label,
+legend,
+fieldset {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}