diff --git a/assets/css/style.css b/assets/css/style.css
index 96c9068..5ddc4a4 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -31,34 +31,156 @@
 }
 
 :root {
-    --font: rgba(45, 45, 45, 1);
-    --highlight: rgba(39, 94, 254, 1);
-    --highlight-08: rgba(39, 94, 254, 0.8);
-    --highlight-05: rgba(39, 94, 254, 0.5);
+    --bg: rgba(255, 255, 255, 1);
+    --bg-05: rgb(255, 255, 255, 0.05);
+    --bg-2: rgb(255, 255, 255, 0.2);
+    --bg-3: rgba(200, 200, 200, 0.2);
+    --bg-4: rgba(255, 255, 255, 0.4);
+    --bg-6: rgb(255, 255, 255, 0.6);
+    --bg-8: rgba(255, 255, 255, 0.8);
+    --bg-btn: rgba(255, 255, 255, 1);
+    --black-02: rgba(0, 0, 0, 0.02);
+    --black-05: rgba(0, 0, 0, 0.05);
+    --black-2: rgba(240, 240, 240, 0.2);
+    --border: rgb(230, 230, 230, 1);
+    --border-1: rgb(230, 230, 230, 0.1);
+    --border-5: rgb(230, 230, 230, 0.5);
+    --border-6: rgb(230, 230, 230, 0.6);
     --darker: rgba(24, 79, 238, 1);
     --darkest: rgba(20, 74, 204, 1);
-    --white: rgba(255, 255, 255, 1);
-    --white-02: rgba(255, 255, 255, 0.2);
-    --grey: rgba(107, 114, 128, 1);
-    --grey-05: rgba(107, 114, 128, 0.5);
+    --disabled: rgba(245, 245, 245, 0.2);
+    --font: rgba(45, 45, 45, 1);
+    --font-2: rgba(53, 53, 53, 1);
+    --font-weak: rgba(0, 0, 0, 0.6);
     --green: rgba(1, 212, 73, 1);
+    --green-1: rgba(1, 212, 73, 0.1);
+    --green-2: rgba(1, 212, 73, 0.2);
+    --green-03: rgba(1, 212, 73, 0.03);
+    --grey: rgba(107, 114, 128, 1);
+    --grey-5: rgba(107, 114, 128, 0.5);
+    --highlight: rgba(39, 94, 254, 1);
+    --highlight-5: rgba(39, 94, 254, 0.5);
+    --highlight-8: rgba(39, 94, 254, 0.8);
+    --main: rgba(38, 92, 255, 1);
+    --main-01: rgba(39, 94, 254, 0.01);
+    --main-05: rgba(39, 94, 254, 0.05);
+    --main-1: rgba(39, 94, 254, 0.1);
+    --main-5: rgba(39, 94, 254, 0.5);
+    --main-6: rgba(39, 94, 254, 0.6);
+    --main-alpha-2: rgba(230, 230, 230, 0.2);
+    --main-alpha-4: rgba(230, 230, 230, 0.4);
+    --main-dark: rgb(24, 79, 238, 1);
+    --main-darker: rgb(20, 74, 204, 1);
+    --npu: rgba(1, 7, 52, 1);
+    --npu-08: rgba(1, 7, 52, 0.8);
     --pink: rgba(255, 0, 129, 1);
-    --green-02: rgba(1, 212, 73, 0.2);
-    --pink-02: rgba(255, 0, 129, 0.2);
-    --green-01: rgba(1, 212, 73, 0.1);
-    --pink-01: rgba(255, 0, 129, 0.1);
-    --green-003: rgba(1, 212, 73, 0.03);
-    --pink-003: rgba(255, 0, 129, 0.03);
+    --pink-03: rgba(255, 0, 129, 0.03);
+    --pink-1: rgba(255, 0, 129, 0.1);
+    --pink-2: rgba(255, 0, 129, 0.2);
+    --pink-6: rgba(255, 0, 129, 0.6);
+    --pink-8: rgba(255, 0, 129, 0.8);
+    --scroll-1: rgb(0, 0, 0, 0.1);
+    --scroll-2: rgb(0, 0, 0, 0.2);
+}
+
+* {
+    box-sizing: border-box;
 }
 
 body {
     margin: 0;
     padding: 0;
     font-size: 1rem;
-    line-height: 1.5;
     color: var(--font);
-    background-color: var(--white);
     font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    scrollbar-width: auto;
+    scrollbar-color: var(--main-1), transparent;
+    font-weight: 400;
+    background-color: var(--bg);
+}
+
+#badge {
+    border-radius: 3px;
+    align-self: center;
+    padding: 4px 10px;
+    color: var(--bg);
+    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
+    background: linear-gradient(to right bottom, var(--pink-6), var(--pink-8), var(--pink));
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: 1fr;
+    column-gap: 10px;
+    align-items: center;
+    justify-items: center;
+    width: 120px;
+    justify-self: flex-end;
+}
+
+#badge:hover {
+    background: linear-gradient(135deg, var(--pink-8) 0%, var(--pink) 40%, var(--pink) 100%);
+    box-shadow: 0 3px 15px -1px var(--pink-6);
+}
+
+#badge.npu {
+    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu));
+}
+
+#badge.npu:hover {
+    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu-08), var(--npu));
+    box-shadow: 0 3px 15px -1px var(--npu);
+}
+
+#badge.cpu {
+    background: linear-gradient(to right bottom, var(--main-6), var(--main));
+}
+
+#badge.cpu:hover {
+    background: linear-gradient(to right bottom, var(--main), var(--main-dark), var(--main-darker));
+    box-shadow: 0 3px 15px -1px var(--main-darker);
+}
+
+.badge-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.badge-text span {
+    font-size: 0.6rem;
+}
+
+.tiles {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+    column-gap: 2px;
+    row-gap: 2px;
+    align-items: center;
+}
+
+.tile {
+    border: 1px solid var(--bg);
+    padding: 2px;
+    border-radius: 1px;
+}
+
+.t4 {
+    border-color: var(--bg-8);
+}
+
+.t3 {
+    border-color: var(--bg-6);
+}
+
+.t2 {
+    border-color: var(--bg-4);
+}
+
+.t1 {
+    border-color: var(--bg-2);
+}
+
+.t0 {
+    border-color: var(--bg-05);
 }
 
 #banner {
@@ -69,9 +191,10 @@ body {
 }
 
 .banner-content {
-    padding: 0 40px;
+    padding: 0px;
     height: 30vh;
     max-width: 90vw;
+    line-height: 1.5;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -153,6 +276,67 @@ header:hover #webnn-logo circle._logo_n3 {
     stroke: #61bafb;
 }
 
+.v1:hover #webnn-logo path._logo_n1,
+.v1:hover #webnn-logo circle._logo_n1 {
+    fill: #4777c0;
+}
+
+.v1:hover #webnn-logo path._logo_n2,
+.v1:hover #webnn-logo circle._logo_n2 {
+    stroke: #61bafb;
+    fill: #61bafb;
+}
+
+.v1:hover #webnn-logo circle._logo_n3 {
+    stroke: #61bafb;
+}
+
+.log-output::-webkit-scrollbar,
+#outputText::-webkit-scrollbar,
+#scroll-wrapper::-webkit-scrollbar {
+    width: 2px !important;
+    height: 2px !important;
+}
+
+.log-output::-webkit-scrollbar-track,
+#outputText::-webkit-scrollbar-track,
+#scroll-wrapper::-webkit-scrollbar-track {
+    background: var(--main-01);
+}
+
+.log-output::-webkit-scrollbar-thumb,
+#outputText::-webkit-scrollbar-thumb,
+#scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: var(--border-6);
+    border-radius: 5px;
+    border: 2px solid transparent;
+}
+
+.log-output:hover::-webkit-scrollbar-thumb,
+#outputText:hover::-webkit-scrollbar-thumb,
+#scroll-wrapper:hover::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+}
+
+textarea::-webkit-scrollbar {
+    width: 3px !important;
+    height: 3px !important;
+}
+
+textarea::-webkit-scrollbar-track {
+    background: var(--main-01);
+}
+
+textarea::-webkit-scrollbar-thumb {
+    background-color: var(--scroll-1);
+    border-radius: 5px;
+    border: 3px solid transparent;
+}
+
+textarea:hover::-webkit-scrollbar-thumb {
+    background-color: var(--scroll-2);
+}
+
 h1 {
     font-size: 1.2rem;
     margin: 0;
@@ -160,12 +344,12 @@ h1 {
 
 h2.title {
     font-size: 1.3rem;
-    margin: 10px 0 -6px 0;
+    margin: 0.5rem 0 0px 0;
 }
 
 .category {
     font-size: 14px;
-    color: var(--grey-05);
+    color: var(--grey-5);
 }
 
 .description:hover .category,
@@ -179,7 +363,7 @@ h2.title {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-column-gap: 2px;
-    grid-row-gap: 10px;
+    grid-row-gap: 1rem;
     justify-content: center;
     justify-items: center;
 }
@@ -188,7 +372,7 @@ h2.title {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 2px;
-    grid-row-gap: 10px;
+    grid-row-gap: 1rem;
     padding: 0 0;
 }
 
@@ -229,7 +413,7 @@ a:focus {
 }
 
 .thumb:hover {
-    box-shadow: 0 3px 15px -1px var(--highlight-05);
+    box-shadow: 0 3px 15px -1px var(--highlight-5);
 }
 
 .thumb:hover .sample::after,
@@ -301,12 +485,12 @@ a:focus {
 }
 
 .github {
-    background: var(--white-02) url(../icon/github.svg) no-repeat 50% 50%;
+    background: var(--bg-2) url(../icon/github.svg) no-repeat 50% 50%;
     background-size: 16px;
 }
 
 .github:hover {
-    background: var(--highlight-05) url(../icon/github.svg) no-repeat 50% 50%;
+    background: var(--highlight-5) url(../icon/github.svg) no-repeat 50% 50%;
     background-size: 16px;
 }
 
@@ -316,14 +500,14 @@ a:focus {
     padding: 0px 6px;
     border-radius: 3px;
     text-decoration: none;
-    background-color: var(--pink-003);
-    border-bottom: 1px dashed var(--pink-02);
+    background-color: var(--pink-03);
+    border-bottom: 1px dashed var(--pink-2);
     font-size: 0.9rem;
 }
 
 #install-guides a:hover {
     background-color: var(--pink);
-    color: var(--white);
+    color: var(--bg);
 }
 
 #install-guides ol,
@@ -338,8 +522,8 @@ a:focus {
 
 code {
     margin: 1px auto;
-    background-color: var(--green-003);
-    border-bottom: 1px dashed var(--green-02);
+    background-color: var(--green-03);
+    border-bottom: 1px dashed var(--green-2);
     display: inline-block;
     padding: 0px 6px;
     border-radius: 3px;
@@ -349,7 +533,7 @@ code {
 
 code:hover {
     background-color: var(--green);
-    color: var(--white);
+    color: var(--bg);
     font-weight: 800;
 }
 
@@ -370,7 +554,7 @@ code:hover {
 .tags span {
     color: rgb(0 0 0 / 75%);
     white-space: nowrap;
-    border: 1px solid var(--grey-05);
+    border: 1px solid var(--grey-5);
     border-radius: 2rem;
     padding: 1px 0.4rem 1px 0.4rem;
     margin: 0 3px;
@@ -383,9 +567,9 @@ code:hover {
 .tags a:hover,
 .tags span:hover {
     border: 1px solid var(--highlight);
-    color: var(--white);
-    background: linear-gradient(135deg, var(--highlight) 0%, var(--highlight-08) 40%, var(--highlight-08) 100%);
-    box-shadow: 0 3px 15px -1px var(--highlight-05);
+    color: var(--bg);
+    background: linear-gradient(135deg, var(--highlight) 0%, var(--highlight-8) 40%, var(--highlight-8) 100%);
+    box-shadow: 0 3px 15px -1px var(--highlight-5);
 }
 
 footer {
@@ -423,7 +607,7 @@ footer ul li a:hover {
     margin-bottom: 10px;
 }
 
-#status > div {
+#status>div {
     padding: 2px 6px 1px 6px;
     border-radius: 3px;
 }
@@ -434,7 +618,7 @@ footer ul li a:hover {
     color: white;
 }
 
-#status.red > a {
+#status.red>a {
     background-color: var(--pink);
     color: white;
     padding: 2px 6px 1px 6px;
@@ -569,4 +753,4 @@ footer ul li a:hover {
     .backend {
         justify-self: left;
     }
-}
+}
\ No newline at end of file
diff --git a/assets/js/common_utils.js b/assets/js/common_utils.js
index 4f3d178..230649e 100644
--- a/assets/js/common_utils.js
+++ b/assets/js/common_utils.js
@@ -77,18 +77,18 @@ export const updateQueryStringParameter = (uri, key, value) => {
 export const log = i => {
     console.log(i);
     if (getMode()) {
-        $("#status").innerText += `\n[${getTime()}] ${i}`;
+        $("#log").innerText += `\n[${getTime()}] ${i}`;
     } else {
-        $("#status").innerText += `\n${i}`;
+        $("#log").innerText += `\n${i}`;
     }
 };
 
 export const logError = i => {
     console.error(i);
     if (getMode()) {
-        $("#status").innerText += `\n[${getTime()}] ${i}`;
+        $("#log").innerText += `\n[${getTime()}] ${i}`;
     } else {
-        $("#status").innerText += `\n${i}`;
+        $("#log").innerText += `\n${i}`;
     }
 };
 
diff --git a/assets/js/index.js b/assets/js/index.js
index ba04b91..581386d 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -2,7 +2,7 @@ import { $, getWebnnStatus } from "./common_utils.js";
 
 async function webnnChecker() {
     const webnnStatus = await getWebnnStatus();
-    const status = $("#status");
+    const status = $("#log");
     const browser = $("#browser");
     const chromium = $("#chromium");
     const webnn = $("#webnn");
diff --git a/demos/image-classification/index.html b/demos/image-classification/index.html
index 25d9b94..68bfaf0 100644
--- a/demos/image-classification/index.html
+++ b/demos/image-classification/index.html
@@ -1,310 +1,224 @@
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <title>WebNN Developer Preview - Image Classification</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
-        <link rel="stylesheet" href="./static/main.css" />
-        <script type="module" src="./index.js"></script>
-    </head>
 
-    <body>
-        <div class="grid-2-41 v1">
-            <h1 class="title">
-                <div id="back">
-                    <a href="../../">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                            <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
-                        </svg>
-                    </a>
-                </div>
-                <svg
-                    id="webnn-logo"
-                    width="734"
-                    height="146"
-                    viewBox="0 0 734 146"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
-                        fill="#333333"
-                        class="_logo_n1"
-                    />
-                    <path
-                        d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5228 393.523 86 388 86H243C237.477 86 233 81.5228 233 76V18Z"
-                        fill="#B2B2B2"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
-                        fill="white"
-                    />
-                    <path d="M15 66L33 45" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M63 59L44 44" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M77 61L103 55" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path
-                        d="M126 16L119 39"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M151 41L127 47"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M161 50L156 85"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M163 38L193 83"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M162 92L188 92"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M148 98L119 119"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M101 90L155 132"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M183 126L155 132"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M194 117L197 105"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M195 131L203 142"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M123 60L149 87"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path d="M67 71L55 103" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M27 72L87 88" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M79 36L97 79" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M120 11L88 21" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <circle cx="38.5" cy="38.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="69.5" cy="63.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="127.5" cy="8.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="154.5" cy="92.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="112.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="190.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="200" cy="93" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
-                    <circle cx="115" cy="51" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
-                    <circle cx="15" cy="68" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="75" cy="25" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="163" cy="38" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="101" cy="90" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="156" cy="131" r="15" fill="#666666" class="_logo_n1" />
-                </svg>
-                <span id="title">WebNN</span> Image Classification
-            </h1>
-            <div id="badge" class="">
-                <div class="badge-text">
-                    <span>Powered by</span>
-                    <div id="device">GPU</div>
-                </div>
-                <div class="tiles">
-                    <div class="tile t0"></div>
-                    <div class="tile t1"></div>
-                    <div class="tile t2"></div>
-                    <div class="tile t1"></div>
-                    <div class="tile t2"></div>
-                    <div class="tile t3"></div>
-                    <div class="tile t2"></div>
-                    <div class="tile t3"></div>
-                    <div class="tile t4"></div>
-                </div>
+<head>
+    <meta charset="utf-8" />
+    <title>WebNN Developer Preview - Image Classification</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
+    <link rel="stylesheet" href="../../assets/css/style.css" />
+    <link rel="stylesheet" href="./static/main.css" />
+    <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+    <div class="grid-2-41 v1">
+        <h1 class="title">
+            <div id="back">
+                <a href="../../">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                        <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+                    </svg>
+                </a>
+            </div>
+            <svg id="webnn-logo" width="734" height="146" viewBox="0 0 734 146" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
+                    fill="#333333" class="_logo_n1" />
+                <path
+                    d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5228 393.523 86 388 86H243C237.477 86 233 81.5228 233 76V18Z"
+                    fill="#B2B2B2" class="_logo_n2" />
+                <path
+                    d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
+                    fill="white" />
+                <path d="M15 66L33 45" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M63 59L44 44" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M77 61L103 55" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M126 16L119 39" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M151 41L127 47" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M161 50L156 85" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M163 38L193 83" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M162 92L188 92" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M148 98L119 119" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M101 90L155 132" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M183 126L155 132" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M194 117L197 105" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M195 131L203 142" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M123 60L149 87" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M67 71L55 103" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M27 72L87 88" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M79 36L97 79" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M120 11L88 21" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <circle cx="38.5" cy="38.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="69.5" cy="63.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="127.5" cy="8.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="154.5" cy="92.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="112.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="190.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="200" cy="93" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
+                <circle cx="115" cy="51" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
+                <circle cx="15" cy="68" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="75" cy="25" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="163" cy="38" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="101" cy="90" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="156" cy="131" r="15" fill="#666666" class="_logo_n1" />
+            </svg>
+            <span id="title">WebNN</span> Image Classification
+        </h1>
+        <div id="badge" class="">
+            <div class="badge-text">
+                <span>Powered by</span>
+                <div id="device">GPU</div>
+            </div>
+            <div class="tiles">
+                <div class="tile t0"></div>
+                <div class="tile t1"></div>
+                <div class="tile t2"></div>
+                <div class="tile t1"></div>
+                <div class="tile t2"></div>
+                <div class="tile t3"></div>
+                <div class="tile t2"></div>
+                <div class="tile t3"></div>
+                <div class="tile t4"></div>
             </div>
         </div>
-        <div class="v9">
-            <div class="grid-2">
-                <div>
-                    <div id="container">
-                        <img id="image" src="./static/tiger.jpg" />
+    </div>
+    <div class="v9">
+        <div class="grid-2">
+            <div>
+                <div id="container">
+                    <img id="image" src="./static/tiger.jpg" />
+                </div>
+                <div id="controls">
+                    <div class="btn-group-toggle backends" data-toggle="buttons" id="backendBtns">
+                        <label class="btn" name="webnn" id="label_webgpu">
+                            <input type="radio" name="backend" id="webgpu" />WebGPU
+                        </label>
+                        <label class="btn" name="webnn" id="label_webnn_gpu">
+                            <input type="radio" name="backend" id="webnn_gpu" />WebNN GPU
+                        </label>
+                        <label class="btn hide" name="webnn" id="label_webnn_npu">
+                            <input type="radio" name="backend" id="webnn_npu" />WebNN NPU
+                        </label>
                     </div>
-                    <div id="controls">
-                        <div class="btn-group-toggle backends" data-toggle="buttons" id="backendBtns">
-                            <label class="btn" name="webnn" id="label_webgpu">
-                                <input type="radio" name="backend" id="webgpu" />WebGPU
-                            </label>
-                            <label class="btn" name="webnn" id="label_webnn_gpu">
-                                <input type="radio" name="backend" id="webnn_gpu" />WebNN GPU
-                            </label>
-                            <label class="btn hide" name="webnn" id="label_webnn_npu">
-                                <input type="radio" name="backend" id="webnn_npu" />WebNN NPU
-                            </label>
+                    <div class="btn-group-toggle models" data-toggle="buttons" id="modelBtns">
+                        <label class="btn" id="label_mobilenet-v2">
+                            <input type="radio" name="model" id="mobilenet-v2" />MobileNet V2
+                        </label>
+                        <label class="btn" id="label_resnet-50">
+                            <input type="radio" name="model" id="resnet-50" />ResNet50
+                        </label>
+                        <label class="btn" id="label_efficientnet-lite4">
+                            <input type="radio" name="model" id="efficientnet-lite4" />
+                            EfficientNet Lite4
+                        </label>
+                    </div>
+                    <div class="range">
+                        <input id="range" type="range" min="0" max="1000" step="10" value="1" />
+                        <div class="rangeshow">
+                            <span class="rangevalue">1</span> <span id="run-span">run</span>
                         </div>
-                        <div class="btn-group-toggle models" data-toggle="buttons" id="modelBtns">
-                            <label class="btn" id="label_mobilenet-v2">
-                                <input type="radio" name="model" id="mobilenet-v2" />MobileNet V2
-                            </label>
-                            <label class="btn" id="label_resnet-50">
-                                <input type="radio" name="model" id="resnet-50" />ResNet50
-                            </label>
-                            <label class="btn" id="label_efficientnet-lite4">
-                                <input type="radio" name="model" id="efficientnet-lite4" />
-                                EfficientNet Lite4
+                    </div>
+                    <div>
+                        <div class="button-group key">
+                            <label id="label_upload-image">
+                                <input type="file" id="upload-image" accept="image/*" hidden="" />
+                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                    <path
+                                        d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
+                                </svg>
+                                Pick Image
                             </label>
-                        </div>
-                        <div class="range">
-                            <input id="range" type="range" min="0" max="1000" step="10" value="1" />
-                            <div class="rangeshow">
-                                <span class="rangevalue">1</span> <span id="run-span">run</span>
-                            </div>
-                        </div>
-                        <div>
-                            <div class="button-group key">
-                                <label id="label_upload-image">
-                                    <input type="file" id="upload-image" accept="image/*" hidden="" />
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="24"
-                                        viewBox="0 -960 960 960"
-                                        width="24"
-                                    >
-                                        <path
-                                            d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"
-                                        />
-                                    </svg>
-                                    Pick Image
-                                </label>
-                                <button id="classify-image">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="24"
-                                        viewBox="0 -960 960 960"
-                                        width="24"
-                                    >
-                                        <path
-                                            d="M520-240v-143l-45-49-21 106-150-31 8-39 111 23 39-196-62 23v66h-40v-94l131-48q15-5 29.5 1t21.5 20q25 51 55.5 66t42.5 15v40q-21 0-55-16.5T524-550l-17 94 53 57v159h-40Zm20-400q-17 0-28.5-11.5T500-680q0-17 11.5-28.5T540-720q17 0 28.5 11.5T580-680q0 17-11.5 28.5T540-640ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"
-                                        />
-                                    </svg>
-                                    Classify
-                                </button>
-                            </div>
+                            <button id="classify-image">
+                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                    <path
+                                        d="M520-240v-143l-45-49-21 106-150-31 8-39 111 23 39-196-62 23v66h-40v-94l131-48q15-5 29.5 1t21.5 20q25 51 55.5 66t42.5 15v40q-21 0-55-16.5T524-550l-17 94 53 57v159h-40Zm20-400q-17 0-28.5-11.5T500-680q0-17 11.5-28.5T540-720q17 0 28.5 11.5T580-680q0 17-11.5 28.5T540-640ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z" />
+                                </svg>
+                                Classify
+                            </button>
                         </div>
                     </div>
                 </div>
-                <div class="right">
-                    <div class="data">
-                        <div class="latency none">
-                            <strong id="latency">0</strong>
-                            <span id="unit">ms</span>
-                        </div>
-                        <div id="indicator" class="title">
-                            <span id="model-id"></span> · <span id="data-type"></span>
-                        </div>
-
-                        <div>
-                            <table id="full-result" class="none">
-                                <tr>
-                                    <th>Indicator</th>
-                                    <th>Result</th>
-                                    <th>Indicator</th>
-                                    <th>Result</th>
-                                </tr>
-                                <tr>
-                                    <td class="r">First Inference</td>
-                                    <td id="first"></td>
-                                    <td class="r">Best Inference</td>
-                                    <td id="best"></td>
-                                </tr>
-                                <tr>
-                                    <td class="r">Average Inference</td>
-                                    <td id="average"></td>
-                                    <td class="r">Median Inference</td>
-                                    <td id="median"></td>
-                                </tr>
-                                <tr>
-                                    <td class="r">Throughput</td>
-                                    <td id="throughput"></td>
-                                    <td class="r"></td>
-                                    <td></td>
-                                </tr>
-                            </table>
-                        </div>
+            </div>
+            <div class="right">
+                <div class="data">
+                    <div class="latency none">
+                        <strong id="latency">0</strong>
+                        <span id="unit">ms</span>
+                    </div>
+                    <div id="indicator" class="title">
+                        <span id="model-id"></span> · <span id="data-type"></span>
+                    </div>
 
-                        <table id="result" class="none">
+                    <div>
+                        <table id="full-result" class="none">
                             <tr>
-                                <th class="topk">#</th>
-                                <th>Label</th>
-                                <th>Score</th>
+                                <th>Indicator</th>
+                                <th>Result</th>
+                                <th>Indicator</th>
+                                <th>Result</th>
                             </tr>
                             <tr>
-                                <td class="topk" id="top1">1</td>
-                                <td id="label1"></td>
-                                <td id="score1"></td>
+                                <td class="r">First Inference</td>
+                                <td id="first"></td>
+                                <td class="r">Best Inference</td>
+                                <td id="best"></td>
                             </tr>
                             <tr>
-                                <td class="topk" id="top2">2</td>
-                                <td id="label2"></td>
-                                <td id="score2"></td>
+                                <td class="r">Average Inference</td>
+                                <td id="average"></td>
+                                <td class="r">Median Inference</td>
+                                <td id="median"></td>
                             </tr>
                             <tr>
-                                <td class="topk" id="top3">3</td>
-                                <td id="label3"></td>
-                                <td id="score3"></td>
+                                <td class="r">Throughput</td>
+                                <td id="throughput"></td>
+                                <td class="r"></td>
+                                <td></td>
                             </tr>
                         </table>
                     </div>
+
+                    <table id="result" class="none">
+                        <tr>
+                            <th class="topk">#</th>
+                            <th>Label</th>
+                            <th>Score</th>
+                        </tr>
+                        <tr>
+                            <td class="topk" id="top1">1</td>
+                            <td id="label1"></td>
+                            <td id="score1"></td>
+                        </tr>
+                        <tr>
+                            <td class="topk" id="top2">2</td>
+                            <td id="label2"></td>
+                            <td id="score2"></td>
+                        </tr>
+                        <tr>
+                            <td class="topk" id="top3">3</td>
+                            <td id="label3"></td>
+                            <td id="score3"></td>
+                        </tr>
+                    </table>
                 </div>
             </div>
+        </div>
 
-            <div id="status" class="log-output"></div>
+        <div id="log" class="log-output"></div>
 
-            <div class="footerinfo">
-                <div id="webnnstatus">
-                    <span id="circle"></span> <span id="info">WebNN</span> <span id="backends"></span>
-                </div>
-                <div id="versions">
-                    <div id="chromiumversion"></div>
-                    <div id="ortversion"></div>
-                </div>
+        <div class="footerinfo">
+            <div id="webnnstatus">
+                <span id="circle"></span> <span id="info">WebNN</span> <span id="backends"></span>
+            </div>
+            <div id="versions">
+                <div id="chromiumversion"></div>
+                <div id="ortversion"></div>
             </div>
         </div>
-    </body>
-</html>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demos/image-classification/static/main.css b/demos/image-classification/static/main.css
index dedcd6a..6ea0d1a 100644
--- a/demos/image-classification/static/main.css
+++ b/demos/image-classification/static/main.css
@@ -1,156 +1,3 @@
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 300;
-    src: url("./fonts/archivo/archivo-v19-latin-300.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 400;
-    src: url("./fonts/archivo/archivo-v19-latin-regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 600;
-    src: url("./fonts/archivo/archivo-v19-latin-600.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 700;
-    src: url("./fonts/archivo/archivo-v19-latin-700.woff2") format("woff2");
-}
-
-:root {
-    --bg: rgba(255, 255, 255, 1);
-    --black-02: rgba(240, 240, 240, 0.2);
-    --font: rgba(45, 45, 45, 1);
-    --font-2: rgba(53, 53, 53, 1);
-    --font-weak: rgba(0, 0, 0, 0.6);
-    --disabled: rgba(245, 245, 245, 0.2);
-    --bg-05: rgb(255, 255, 255, 0.05);
-    --bg-2: rgb(255, 255, 255, 0.2);
-    --bg-4: rgba(255, 255, 255, 0.4);
-    --bg-6: rgb(255, 255, 255, 0.6);
-    --bg-8: rgba(255, 255, 255, 0.8);
-    --bg-btn: rgba(255, 255, 255, 1);
-    --npu: rgba(1, 7, 52, 1);
-    --npu-08: rgba(1, 7, 52, 0.8);
-    --main-01: rgba(39, 94, 254, 0.1);
-    --main-04: rgba(39, 94, 254, 0.4);
-    --main-001: rgba(39, 94, 254, 0.01);
-    --main-005: rgba(39, 94, 254, 0.05);
-    --main-05: rgba(39, 94, 254, 0.5);
-    --main-06: rgba(39, 94, 254, 0.6);
-    --scroll: rgb(0, 0, 0, 0.1);
-    --scroll-2: rgb(0, 0, 0, 0.2);
-    --main: rgba(38, 92, 255, 1);
-    --main-dark: rgb(24, 79, 238, 1);
-    --main-darker: rgb(20, 74, 204, 1);
-    --border: rgb(230, 230, 230, 1);
-    --border-2: rgb(230, 230, 230, 0.6);
-    --green: rgba(1, 212, 73, 1);
-    --pink: rgba(255, 0, 129, 1);
-    --pink-08: rgba(255, 0, 129, 0.8);
-    --pink-06: rgba(255, 0, 129, 0.6);
-    --green-01: rgba(1, 212, 73, 0.1);
-    --pink-01: rgba(255, 0, 129, 0.1);
-    --green-02: rgba(1, 212, 73, 0.2);
-    --pink-02: rgba(255, 0, 129, 0.2);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-    background-color: var(--bg);
-    color: var(--font);
-    font-size: 16px;
-}
-
-body {
-    scrollbar-width: auto;
-    scrollbar-color: var(--main-01), transparent;
-}
-
-#badge {
-    border-radius: 3px;
-    align-self: center;
-    padding: 4px 10px;
-    color: var(--bg);
-    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
-    background: linear-gradient(to right bottom, var(--pink-06), var(--pink-08), var(--pink));
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-template-rows: 1fr;
-    column-gap: 10px;
-    align-items: center;
-    justify-items: center;
-    width: 120px;
-    justify-self: flex-end;
-}
-
-#badge:hover {
-    background: linear-gradient(135deg, var(--pink-08) 0%, var(--pink) 40%, var(--pink) 100%);
-    box-shadow: 0 3px 15px -1px var(--pink-06);
-}
-
-#badge.npu {
-    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu));
-}
-
-#badge.npu:hover {
-    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu-08), var(--npu));
-    box-shadow: 0 3px 15px -1px var(--npu);
-}
-
-#badge.cpu {
-    background: linear-gradient(to right bottom, var(--main-06), var(--main));
-}
-
-#badge.cpu:hover {
-    background: linear-gradient(to right bottom, var(--main), var(--main-dark), var(--main-darker));
-    box-shadow: 0 3px 15px -1px var(--main-darker);
-}
-
-.badge-text {
-    display: flex;
-    flex-direction: column;
-}
-
-.badge-text span {
-    font-size: 0.6rem;
-}
-
-.tiles {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr;
-    column-gap: 2px;
-    row-gap: 2px;
-    align-items: center;
-}
-
-.tile {
-    border: 1px solid var(--bg);
-    padding: 2px;
-    border-radius: 1px;
-}
-
 #left {
     display: grid;
     align-items: center;
@@ -164,59 +11,6 @@ body {
     margin: 0 6px 0 10px;
 }
 
-.v1:hover #webnn-logo path._logo_n1,
-.v1:hover #webnn-logo circle._logo_n1 {
-    fill: #4777c0;
-}
-
-.v1:hover #webnn-logo path._logo_n2,
-.v1:hover #webnn-logo circle._logo_n2 {
-    stroke: #61bafb;
-    fill: #61bafb;
-}
-
-.v1:hover #webnn-logo circle._logo_n3 {
-    stroke: #61bafb;
-}
-
-.log-output::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-.log-output::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-.log-output::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-.log-output:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
-textarea::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-textarea::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-textarea::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-textarea:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
 h1 {
     padding: 0 0 0 0;
     font-weight: 700;
@@ -237,7 +31,7 @@ h1.title span {
     width: 24px;
     height: 24px;
     border-radius: 48px;
-    border: 1px solid var(--main-05);
+    border: 1px solid var(--main-5);
     display: grid;
     align-items: center;
     justify-items: center;
@@ -249,14 +43,14 @@ h1.title span {
 }
 
 #back svg path {
-    fill: var(--main-05);
+    fill: var(--main-5);
 }
 
 #back:hover {
     border: 1px solid var(--main);
     background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
     color: var(--bg);
-    box-shadow: 0 3px 15px -1px var(--main-05);
+    box-shadow: 0 3px 15px -1px var(--main-5);
     cursor: pointer;
 }
 
@@ -266,7 +60,7 @@ h1.title span {
 
 .progress {
     padding: 1px;
-    background-color: var(--main-005);
+    background-color: var(--main-05);
     border-radius: 10px;
 }
 
@@ -348,7 +142,7 @@ h1.title span {
     padding: 0 40px;
 }
 
-#controls > div {
+#controls>div {
     text-align: center;
 }
 
@@ -376,7 +170,7 @@ h1.title span {
     border: 1px solid var(--main-dark);
     color: var(--bg);
     background: linear-gradient(135deg, var(--main-dark) 0%, var(--main-darker) 40%, var(--main-darker) 100%);
-    box-shadow: 0 3px 15px -1px var(--main-05);
+    box-shadow: 0 3px 15px -1px var(--main-5);
 }
 
 .btn.active {
@@ -475,7 +269,7 @@ input[type="range"]::-webkit-slider-thumb:active {
     border: 1px solid var(--main-dark);
     color: var(--bg);
     background: linear-gradient(135deg, var(--main-dark) 0%, var(--main-darker) 40%, var(--main-darker) 100%);
-    box-shadow: 0 3px 15px -1px var(--main-05);
+    box-shadow: 0 3px 15px -1px var(--main-5);
 }
 
 .key button:disabled,
@@ -615,7 +409,7 @@ h4 {
 .form-group label:hover {
     color: var(--main);
     border: 1px solid var(--main);
-    background-color: var(--main-001);
+    background-color: var(--main-01);
     cursor: pointer;
 }
 
@@ -776,7 +570,6 @@ h4 {
 }
 
 #webnnstatus.red {
-    margin-top: 0px;
     background-color: var(--pink);
     color: var(--bg);
     border-radius: 5px;
@@ -874,11 +667,11 @@ h4 {
 }
 
 /* Largest devices such as desktops (1280px) */
-@media only screen and (max-width: 80em) {
-}
+@media only screen and (max-width: 80em) {}
 
 /* Large devices such as laptops (1024px) */
 @media only screen and (max-width: 64em) {
+
     .grid-2,
     .grid-2-41 {
         grid-template-columns: 1fr;
@@ -893,6 +686,7 @@ h4 {
 
 /* Medium devices such as tablets (718px) */
 @media only screen and (max-width: 718px) {
+
     .grid-2,
     .grid-2-41 {
         grid-template-columns: 1fr;
@@ -911,6 +705,7 @@ h4 {
 }
 
 @media only screen and (max-width: 40em) {
+
     .grid-2,
     .grid-2-41 {
         grid-template-columns: 1fr;
@@ -970,4 +765,4 @@ h4 {
         width: 38vw;
         padding: 6px 14px;
     }
-}
+}
\ No newline at end of file
diff --git a/demos/phi-3-mini/index.html b/demos/phi-3-mini/index.html
index 3848e69..89bae61 100644
--- a/demos/phi-3-mini/index.html
+++ b/demos/phi-3-mini/index.html
@@ -8,6 +8,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png">
+    <link rel="stylesheet" href="../../assets/css/style.css" />
     <link rel="stylesheet" href="./static/main.css">
     <script type="module" src="main.js"></script>
 </head>
@@ -87,7 +88,7 @@ <h1 class="title">
     </div>
     <div class="v9 grid-14">
         <div id="sidebar">
-            <div id="status" class="log-output"></div>
+            <div id="log" class="log-output"></div>
             <div class="p-fetch-compile">
                 <div class="p-bar">
                     <div id="p-bar-inner" class="p-bar-inner"></div>
diff --git a/demos/phi-3-mini/static/main.css b/demos/phi-3-mini/static/main.css
index df6a3ae..5f08217 100644
--- a/demos/phi-3-mini/static/main.css
+++ b/demos/phi-3-mini/static/main.css
@@ -1,1132 +1,916 @@
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 300;
-    src: url("./fonts/archivo/archivo-v19-latin-300.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 400;
-    src: url("./fonts/archivo/archivo-v19-latin-regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 600;
-    src: url("./fonts/archivo/archivo-v19-latin-600.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 700;
-    src: url("./fonts/archivo/archivo-v19-latin-700.woff2") format("woff2");
-}
-
-:root {
-    --bg: rgba(255, 255, 255, 1);
-    --black-02: rgba(240, 240, 240, 0.2);
-    --black-03: rgba(0, 0, 0, 0.05);
-    --black-01: rgba(0, 0, 0, 0.02);
-    --font: rgba(45, 45, 45, 1);
-    --font-2: rgba(53, 53, 53, 1);
-    --font-weak: rgba(0, 0, 0, 0.6);
-    --disabled: rgba(245, 245, 245, 0.2);
-    --bg-05: rgba(255, 255, 255, 0.05);
-    --bg-2: rgba(255, 255, 255, 0.2);
-    --bg-4: rgba(255, 255, 255, 0.4);
-    --bg-6: rgba(255, 255, 255, 0.6);
-    --bg-8: rgba(255, 255, 255, 0.8);
-    --bg-btn: rgba(255, 255, 255, 1);
-    --npu: rgba(1, 7, 52, 1);
-    --npu-08: rgba(1, 7, 52, 0.8);
-    --main-01: rgba(39, 94, 254, 0.1);
-    --main-04: rgba(39, 94, 254, 0.4);
-    --main-001: rgba(39, 94, 254, 0.01);
-    --main-005: rgba(39, 94, 254, 0.05);
-    --main-05: rgba(39, 94, 254, 0.5);
-    --main-06: rgba(39, 94, 254, 0.6);
-    --main: rgba(39, 94, 254, 1);
-    --main-dark: rgb(24, 79, 238, 1);
-    --main-darker: rgb(20, 74, 204, 1);
-    --border: rgb(230, 230, 230, 1);
-    --border-2: rgb(230, 230, 230, 0.6);
-    --green: rgba(1, 212, 73, 1);
-    --pink: rgba(255, 0, 129, 1);
-    --pink-08: rgba(255, 0, 129, 0.8);
-    --pink-06: rgba(255, 0, 129, 0.6);
-    --green-01: rgba(1, 212, 73, 0.1);
-    --pink-01: rgba(255, 0, 129, 0.1);
-    --green-02: rgba(1, 212, 73, 0.2);
-    --pink-02: rgba(255, 0, 129, 0.2);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-    background-color: var(--bg);
-    color: var(--font);
-    font-size: 16px;
-    /* background-image: linear-gradient(0deg, #ffffff 0%, #FFDEE9 33%, #B5FFFC 66%, #ffffff 100%);   */
-}
-
-body {
-    scrollbar-width: auto;
-    scrollbar-color: var(--main-01), transparent;
-}
-
-#badge {
-    border-radius: 3px;
-    align-self: center;
-    padding: 4px 10px;
-    color: var(--bg);
-    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
-    background: linear-gradient(to right bottom, var(--pink-06), var(--pink-08), var(--pink));
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-template-rows: 1fr;
-    column-gap: 10px;
-    align-items: center;
-    justify-items: center;
-    width: 120px;
-    justify-self: flex-end;
-}
-
-#badge:hover {
-    background: linear-gradient(135deg, var(--pink-08) 0%, var(--pink) 40%, var(--pink) 100%);
-    box-shadow: 0 3px 15px -1px var(--pink-06);
-}
-
-#badge.npu {
-    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu));
-}
-
-#badge.npu:hover {
-    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu-08), var(--npu));
-    box-shadow: 0 3px 15px -1px var(--npu);
-}
-
-#badge.cpu {
-    background: linear-gradient(to right bottom, var(--main-06), var(--main));
-}
-
-#badge.cpu:hover {
-    background: linear-gradient(to right bottom, var(--main), var(--main-dark), var(--main-darker));
-    box-shadow: 0 3px 15px -1px var(--main-darker);
-}
-
-.badge-text {
-    display: flex;
-    flex-direction: column;
-}
-
-.badge-text span {
-    font-size: 0.6rem;
-}
-
-.tiles {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr;
-    column-gap: 2px;
-    row-gap: 2px;
-    align-items: center;
-}
-
-.tile {
-    border: 1px solid var(--bg);
-    padding: 2px;
-    border-radius: 1px;
-}
-
-.t4 {
-    border-color: var(--bg-8);
-}
-
-.t3 {
-    border-color: var(--bg-6);
-}
-
-.t2 {
-    border-color: var(--bg-4);
-}
-
-.t1 {
-    border-color: var(--bg-2);
-}
-
-.t0 {
-    border-color: var(--bg-05);
-}
-
-#sidebar {
-    align-self: flex-start;
-}
-
-.message-element {
-    text-align: right;
-}
-
-.user-message {
-    padding: 0.5rem 1rem;
-    border-radius: 1.5rem;
-    background-color: var(--black-03);
-    display: inline-flex;
-    margin: 0 1rem;
-}
-
-.response-message {
-    display: block;
-    background-color: var(--black-01);
-    padding: 0.5rem 1rem;
-    border-radius: 1.5rem;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-}
-
-.response-message-outer {
-    display: grid;
-    grid-template-columns: 20fr 1fr;
-    grid-template-rows: 1fr;
-    row-gap: 1rem;
-    column-gap: 0.4rem;
-    align-items: center;
-    margin: 0.5rem 0 1rem 0;
-}
-
-.response-message-outer .copy-button {
-    background-color: transparent;
-    border: 0px solid var(--border);
-    width: 2rem;
-    border-radius: 50px;
-}
-
-.response-message p {
-    padding: 0 0.5rem;
-    margin: 0;
-}
-
-.response-message-outer .copy-button svg {
-    width: 1rem !important;
-    height: 1rem !important;
-}
-
-.response-message-outer .copy-button svg path {
-    fill: var(--border);
-}
-
-.response-message-outer .copy-button:hover {
-    border: 0px solid var(--main);
-    cursor: pointer;
-}
-
-.response-message-outer .copy-button:hover svg path {
-    fill: var(--main);
-}
-
-#performance-indicator {
-    display: flex;
-    justify-content: center;
-    margin-top: -1rem;
-    column-gap: 1rem;
-}
-
-.performance-data {
-    display: flex;
-    align-items: center;
-    transform: skew(-15deg);
-    border-radius: 3px;
-    border: 1px solid var(--pink);
-    color: var(--pink);
-    font-size: 1rem;
-}
-
-.performance-data .tokens-per-second-performance-data {
-    padding: 0.125rem 0.75rem;
-}
-
-.performance-data .tokens-per-second-performance-unit {
-    color: var(--bg);
-    background-color: var(--pink);
-    padding: 0.125rem 0.75rem;
-}
-
-.performance-data:hover .tokens-per-second-performance-data {
-    color: var(--bg);
-    background-color: var(--pink);
-}
-
-.button-group {
-    display: flex;
-    justify-content: center;
-    padding: 0.5rem;
-    background-color: var(--bg-2);
-    border: 1px solid var(--border);
-    border-radius: 2rem;
-    margin: 0 auto;
-    align-items: center;
-}
-
-.button-group:hover {
-    border: 1px solid var(--main) !important;
-}
-
-#user-input {
-    width: 100%;
-    background-color: transparent;
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 1rem;
-    padding: 0rem 1rem;
-    resize: vertical;
-    color: var(--font-weak);
-}
-
-#user-input::before {
-    content: attr(data-text);
-    color: gray;
-    position: absolute;
-    pointer-events: none;
-}
-
-#user-input:not(.empty)::before {
-    content: "";
-}
-
-#user-input:focus {
-    outline: none;
-}
-
-#user-input.enabled {
-    color: var(--main);
-}
-
-.dots {
-    font-size: 1rem;
-    letter-spacing: 2px;
-    border: 0px solid var(--border);
-    background-color: transparent;
-    width: 4rem;
-    height: 2rem;
-    padding: 0.5rem 1rem;
-    border-radius: 1.5rem;
-    display: inline-flex;
-}
-
-.dots::after {
-    content: "";
-    animation: dotAnimation 0.6s steps(3, end) infinite;
-}
-
-@keyframes dotAnimation {
-    0% {
-        content: "";
-    }
-
-    33% {
-        content: ".";
-    }
-
-    66% {
-        content: "..";
-    }
-
-    100% {
-        content: "...";
-    }
-}
-
-.button-group textarea:hover,
-.button-group textarea:focus {
-    outline: none;
-}
-
-.button-group svg {
-    width: 2rem;
-    height: 2rem;
-}
-
-.key-notes {
-    display: flex;
-    align-items: center;
-    font-size: 0.8rem;
-    justify-content: center;
-    gap: 0.5rem;
-}
-
-.key-notes span {
-    display: inline-block;
-    padding: 0.2rem;
-    border: 1px solid var(--border);
-    color: var(--font-weak);
-    font-size: 0.6rem;
-    margin-right: 0.2rem;
-    border-radius: 0.25rem;
-}
-
-.key-notes span:hover {
-    color: white;
-    background-color: var(--pink);
-}
-
-#input-area {
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    gap: 1rem;
-}
-
-#buttons {
-    width: 60%;
-}
-
-.key button {
-    display: grid;
-    align-items: center;
-    border-radius: 50%;
-    height: 2.875rem;
-    width: 2.875rem;
-    margin: 0 0.125rem;
-    cursor: pointer;
-    background: var(--main);
-    border: 1px solid var(--main);
-    background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
-    color: var(--bg);
-    font-family: "Archivo", system-ui, sans-serif;
-    text-shadow: var(--main-darker) 1px 2px 1px;
-}
-
-.key button:hover {
-    background: var(--main-dark);
-    border: 1px solid var(--main-dark);
-    color: var(--bg);
-    background: linear-gradient(135deg, var(--main-dark) 0%, var(--main-darker) 40%, var(--main-darker) 100%);
-    box-shadow: 0 3px 15px -1px var(--main-05);
-}
-
-.key button:disabled {
-    --active: 0;
-    cursor: not-allowed;
-    color: var(--border);
-    background-color: var(--disabled);
-    background: var(--disabled);
-    border: 1px solid var(--border);
-    text-shadow: none;
-}
-
-.key button svg path {
-    fill: var(--bg);
-}
-
-.key button:hover svg path {
-    fill: var(--bg);
-}
-
-.key button:disabled svg path {
-    fill: var(--border);
-}
-
-.key button:disabled:hover {
-    background: var(--disabled);
-    border: 1px solid var(--border);
-    box-shadow: none;
-}
-
-.key button:disabled:hover svg path {
-    fill: var(--border);
-}
-
-.key button#send-button {
-    display: grid;
-}
-
-.key button#stop-button {
-    display: none;
-}
-
-.key.inferencing button#send-button {
-    display: none;
-}
-
-.key.inferencing button#stop-button {
-    display: grid;
-}
-
-#webnn-logo {
-    width: 150px;
-    height: 30px;
-    display: inline-block;
-    margin: 0 6px 0 10px;
-}
-
-.v1:hover #webnn-logo path._logo_n1,
-.v1:hover #webnn-logo circle._logo_n1 {
-    fill: #4777c0;
-}
-
-.v1:hover #webnn-logo path._logo_n2,
-.v1:hover #webnn-logo circle._logo_n2 {
-    stroke: #61bafb;
-    fill: #61bafb;
-}
-
-.v1:hover #webnn-logo circle._logo_n3 {
-    stroke: #61bafb;
-}
-
-#webnnstatus a#webnn_na {
-    color: var(--pink);
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 3px;
-    padding: 1px 4px;
-    text-decoration: none;
-    display: inline-block;
-    margin-top: 2px;
-}
-
-#webnnstatus a#webnn_na:hover {
-    background-color: rgba(0, 0, 0, 0.4);
-    color: var(--bg);
-    border: 0px solid white;
-    text-decoration: none;
-}
-
-.log-output::-webkit-scrollbar,
-#outputText::-webkit-scrollbar,
-#scroll-wrapper::-webkit-scrollbar {
-    width: 2px !important;
-    height: 2px !important;
-}
-
-.log-output::-webkit-scrollbar-track,
-#outputText::-webkit-scrollbar-track,
-#scroll-wrapper::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-.log-output::-webkit-scrollbar-thumb,
-#outputText::-webkit-scrollbar-thumb,
-#scroll-wrapper::-webkit-scrollbar-thumb {
-    background-color: var(--border-2);
-    border-radius: 5px;
-    border: 2px solid transparent;
-}
-
-.log-output:hover::-webkit-scrollbar-thumb,
-#outputText:hover::-webkit-scrollbar-thumb,
-#scroll-wrapper:hover::-webkit-scrollbar-thumb {
-    background-color: var(--border);
-}
-
-#scroll-wrapper {
-    display: flex;
-    height: 100%;
-    max-height: 75vh;
-    flex-direction: column-reverse;
-    overflow-y: scroll;
-    border: 0px solid transparent;
-    border-radius: 5px;
-}
-
-h1 {
-    padding: 0 0 0 0;
-    font-weight: 700;
-    font-size: 1.8rem;
-    margin: 0;
-}
-
-h1.title {
-    display: flex;
-    align-items: center;
-}
-
-h1.title span {
-    margin-right: 5px;
-}
-
-#back {
-    display: grid;
-    align-items: center;
-    justify-items: center;
-}
-
-#back svg {
-    width: 20px;
-    height: 30px;
-}
-
-#back svg path {
-    fill: var(--main-05);
-}
-
-#back:hover {
-    color: var(--main-dark);
-    cursor: pointer;
-}
-
-#back:hover svg path {
-    fill: var(--main-dark);
-}
-
-#back a {
-    display: flex;
-}
-
-.p-fetch-compile {
-    position: relative;
-    top: -2px;
-}
-
-.p-bar {
-    width: 100%;
-    height: 2px;
-    background-color: var(--border);
-    overflow: hidden;
-    border-radius: 10px;
-}
-
-.p-bar-inner {
-    height: 100%;
-    background-color: var(--main);
-    width: 0;
-    transition: width 0.3s ease-in-out;
-}
-
-.p-fetch-compile:hover {
-    color: var(--main);
-}
-
-.p-fetch-compile:hover .p-bar-inner {
-    height: 2px;
-    background-color: var(--main);
-}
-
-.p-bar-label {
-    margin: 0.8rem;
-    font-size: 0.8rem;
-    text-align: center;
-}
-
-@-webkit-keyframes wave-animate {
-    0% {
-        transform: scale(0);
-        opacity: 1;
-    }
-
-    100% {
-        transform: scale(2);
-        opacity: 0;
-    }
-}
-
-@keyframes wave-animate {
-    0% {
-        transform: scale(0);
-        opacity: 1;
-    }
-
-    100% {
-        transform: scale(2);
-        opacity: 0;
-    }
-}
-
-.on {
-    display: none;
-}
-
-.off {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 49px;
-    width: 49px;
-}
-
-.active .on {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 49px;
-    width: 49px;
-}
-
-.active .off {
-    display: none;
-}
-
-.log-output {
-    padding: 0.5rem;
-    background-color: var(--bg-4);
-    border: 1px solid var(--border);
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column-reverse;
-    overflow-y: scroll;
-    height: 73.8vh;
-    width: 20vw;
-}
-
-.log-output:hover {
-    border: 1px solid var(--border-2);
-    background-color: var(--bg-8);
-}
-
-.data {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    padding: 0;
-}
-
-.data strong {
-    font-size: 600%;
-}
-
-.data span {
-    font-size: 228%;
-}
-
-.data .title {
-    display: block;
-}
-
-#error {
-    align-self: center;
-}
-
-.error {
-    background-color: var(--pink);
-    color: var(--bg);
-    font-size: 0.9rem;
-    border-radius: 49px;
-    padding: 6px 12px;
-}
-
-.v1 {
-    padding: 1rem 40px;
-    border-bottom: 1px solid var(--border);
-}
-
-.v9 {
-    padding: 0 40px;
-}
-
-@keyframes fadein {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-.item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0.5rem;
-    margin-bottom: 10px;
-    border: 1px solid var(--border-2);
-    border-radius: 5px;
-    color: var(--font-2);
-    background-color: var(--bg-6);
-}
-
-@keyframes bounce {
-    0%,
-    20%,
-    50%,
-    80%,
-    100% {
-        transform: translateY(0);
-    }
-
-    40% {
-        transform: translateY(-5px);
-    }
-
-    60% {
-        transform: translateY(-3px);
-    }
-}
-
-.item:first-child {
-    animation: bounce 2s ease infinite;
-}
-
-.item.app:hover {
-    border: 1px solid var(--pink);
-}
-
-.item.user:hover {
-    border: 1px solid var(--green);
-}
-
-.item .head {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
-    column-gap: 10px;
-    align-items: center;
-    font-size: 12px;
-    width: 100%;
-    color: var(--font-weak);
-}
-
-.item .head div:first-child {
-    justify-self: start;
-}
-
-.item .head div:last-child {
-    justify-self: end;
-}
-
-.item .info {
-    width: 100%;
-    font-size: 14px;
-    text-align: left;
-    margin-top: 10px;
-}
-
-.item .head span {
-    padding: 1px 6px 2px 6px;
-    border-radius: 3px;
-}
-
-.item.app .head span {
-    background-color: var(--pink-01);
-}
-
-.item.user .head span {
-    background-color: var(--green-01);
-}
-
-.item.app:hover .head span {
-    background-color: var(--pink);
-    color: var(--bg);
-}
-
-.item.user:hover .head span {
-    background-color: var(--green);
-    color: var(--bg);
-}
-
-#webnnstatus {
-    text-align: right;
-    margin-top: 10px;
-}
-
-#webnnstatus.red {
-    margin: -4px auto 5px auto;
-    text-align: left;
-}
-
-#webnnstatus #circle {
-    width: 7px;
-    height: 7px;
-    border-radius: 7px;
-    display: inline-block;
-    margin-bottom: 1px;
-}
-
-#webnnstatus.green {
-    color: var(--font);
-}
-
-#webnnstatus.red {
-    background-color: var(--pink);
-    color: var(--bg);
-    border-radius: 5px;
-    padding: 4px 12px;
-}
-
-#webnnstatus.green #circle {
-    background-color: var(--green);
-}
-
-#webnnstatus.red #circle {
-    background-color: var(--bg);
-}
-
-#webnnstatus.red a {
-    color: yellow;
-    text-decoration: none;
-}
-
-#webnnstatus.red a:hover {
-    color: var(--bg);
-    text-decoration: underline;
-}
-
-.item .info a {
-    color: var(--pink);
-    border: 1px solid var(--pink);
-    text-decoration: none;
-    padding: 2px 6px;
-    border-radius: 3px;
-}
-
-.item .info a:hover {
-    background-color: var(--pink);
-    color: var(--bg);
-}
-
-#versions {
-    font-size: 0.8rem;
-    display: block;
-    text-align: right;
-}
-
-#versions a {
-    color: var(--main);
-    text-decoration: none;
-}
-
-#versions a svg path {
-    fill: var(--main);
-}
-
-#versions a:hover {
-    color: var(--green);
-    text-decoration: underline;
-}
-
-#versions a:hover svg path {
-    fill: var(--green);
-}
-
-#webnnstatus a {
-    color: var(--main);
-    text-decoration: none;
-}
-
-#webnnstatus a:hover {
-    color: var(--green);
-    text-decoration: underline;
-}
-
-#webnnstatus #circle.none {
-    display: none;
-}
-
-.grid-1 {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 10px;
-    grid-row-gap: 0px;
-    align-items: center;
-}
-
-.grid-2 {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 0.8rem;
-    grid-row-gap: 0px;
-    align-items: center;
-    justify-items: center;
-    margin: 1rem 0;
-}
-
-.grid-14 {
-    display: grid;
-    grid-template-columns: 1fr 4fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 0.8rem;
-    grid-row-gap: 0px;
-    align-items: start;
-    justify-items: center;
-    margin: 1rem 0;
-}
-
-.grid-2-41 {
-    display: grid;
-    grid-template-columns: 4fr 1fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 0.8rem;
-    grid-row-gap: 0px;
-    align-items: start;
-    justify-items: center;
-    margin: 1rem 0;
-}
-
-.grid-2-41 h1 {
-    justify-self: left;
-}
-
-.grid-2-41.v1 {
-    margin: 0;
-    align-items: center;
-}
-
-.footerinfo {
-    margin-bottom: 1rem;
-    font-size: 0.8rem;
-}
-
-#install-guides.none {
-    display: none;
-}
-
-@keyframes fadeInOpacity {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-#install-guides {
-    position: relative;
-    width: 100%;
-    margin: 2rem auto 0 auto;
-    padding: 0.8rem;
-    text-align: left;
-    border: 1px solid var(--border);
-    border-radius: 5px;
-    font-size: 1rem;
-    opacity: 1;
-    animation-name: fadeInOpacity;
-    animation-iteration-count: 1;
-    animation-timing-function: ease-in;
-    animation-duration: 0.5s;
-}
-
-#install-guides ol {
-    margin: 10px 10px 0 10px;
-    padding: 0px 20px;
-}
-
-#install-close {
-    position: absolute;
-    right: 12px;
-    top: 2px;
-    width: 16px;
-    height: 16px;
-    background: transparent;
-    border: 0px solid var(--border);
-}
-
-#install-close svg {
-    display: inline-block;
-    width: 18px !important;
-    height: 18px !important;
-}
-
-#install-close svg path {
-    fill: var(--border);
-}
-
-#install-close:hover {
-    cursor: pointer;
-}
-
-#install-guides:hover #install-close svg path {
-    fill: var(--main);
-}
-
-#install-guides #install-close:hover svg path {
-    fill: var(--green);
-}
-
-/* Largest devices such as desktops (1280px) */
-@media only screen and (max-width: 80em) {
-}
-
-/* Large devices such as laptops (1024px) */
-@media only screen and (max-width: 64em) {
-    .grid-2-41 {
-        grid-template-columns: 2fr 1fr;
-    }
-
-    .log-output {
-        width: 32vw;
-    }
-}
-
-/* Medium devices such as tablets (718px) */
-@media only screen and (max-width: 718px) {
-}
-
-@media only screen and (max-width: 40em) {
-    .grid-2,
-    .grid-2-41 {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
-        row-gap: 10px;
-    }
-
-    .grid-2-41 {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .grid-14 {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
-        row-gap: 10px;
-    }
-
-    .key-notes {
-        flex-direction: column;
-    }
-
-    .key-notes .center {
-        display: none;
-    }
-
-    .response-message-outer {
-        display: flex;
-        flex-direction: column;
-    }
-
-    #buttons {
-        width: 90vw;
-    }
-
-    .main {
-        margin-bottom: 20px;
-    }
-
-    .log-output,
-    #badge {
-        width: auto;
-    }
-
-    .v1 {
-        padding: 1rem;
-    }
-
-    .v9 {
-        padding: 1rem;
-    }
-
-    .footerinfo {
-        margin-bottom: 0;
-    }
-
-    h1 {
-        font-size: 1rem;
-    }
-}
+ #sidebar {
+     align-self: flex-start;
+ }
+
+ .message-element {
+     text-align: right;
+ }
+
+ .user-message {
+     padding: 0.5rem 1rem;
+     border-radius: 1.5rem;
+     background-color: var(--black-05);
+     display: inline-flex;
+     margin: 0 1rem;
+ }
+
+ .response-message {
+     display: block;
+     background-color: var(--black-02);
+     padding: 0.5rem 1rem;
+     border-radius: 1.5rem;
+     text-overflow: ellipsis;
+     overflow-x: hidden;
+ }
+
+ .response-message-outer {
+     display: grid;
+     grid-template-columns: 20fr 1fr;
+     grid-template-rows: 1fr;
+     row-gap: 1rem;
+     column-gap: 0.4rem;
+     align-items: center;
+     margin: 0.5rem 0 1rem 0;
+ }
+
+ .response-message-outer .copy-button {
+     background-color: transparent;
+     border: 0px solid var(--border);
+     width: 2rem;
+     border-radius: 50px;
+ }
+
+ .response-message p {
+     padding: 0 0.5rem;
+     margin: 0;
+ }
+
+ .response-message-outer .copy-button svg {
+     width: 1rem !important;
+     height: 1rem !important;
+ }
+
+ .response-message-outer .copy-button svg path {
+     fill: var(--border);
+ }
+
+ .response-message-outer .copy-button:hover {
+     border: 0px solid var(--main);
+     cursor: pointer;
+ }
+
+ .response-message-outer .copy-button:hover svg path {
+     fill: var(--main);
+ }
+
+ #performance-indicator {
+     display: flex;
+     justify-content: center;
+     margin-top: -1rem;
+     column-gap: 1rem;
+ }
+
+ .performance-data {
+     display: flex;
+     align-items: center;
+     transform: skew(-15deg);
+     border-radius: 3px;
+     border: 1px solid var(--pink);
+     color: var(--pink);
+     font-size: 1rem;
+ }
+
+ .performance-data .tokens-per-second-performance-data {
+     padding: 0.125rem 0.75rem;
+ }
+
+ .performance-data .tokens-per-second-performance-unit {
+     color: var(--bg);
+     background-color: var(--pink);
+     padding: 0.125rem 0.75rem;
+ }
+
+ .performance-data:hover .tokens-per-second-performance-data {
+     color: var(--bg);
+     background-color: var(--pink);
+ }
+
+ .button-group {
+     display: flex;
+     justify-content: center;
+     padding: 0.5rem;
+     background-color: var(--bg-2);
+     border: 1px solid var(--border);
+     border-radius: 2rem;
+     margin: 0 auto;
+     align-items: center;
+ }
+
+ .button-group:hover {
+     border: 1px solid var(--main) !important;
+ }
+
+ #user-input {
+     width: 100%;
+     background-color: transparent;
+     font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
+     font-size: 1rem;
+     padding: 0rem 1rem;
+     resize: vertical;
+     color: var(--font-weak);
+ }
+
+ #user-input::before {
+     content: attr(data-text);
+     color: gray;
+     position: absolute;
+     pointer-events: none;
+ }
+
+ #user-input:not(.empty)::before {
+     content: "";
+ }
+
+ #user-input:focus {
+     outline: none;
+ }
+
+ #user-input.enabled {
+     color: var(--main);
+ }
+
+ .dots {
+     font-size: 1rem;
+     letter-spacing: 2px;
+     border: 0px solid var(--border);
+     background-color: transparent;
+     width: 4rem;
+     height: 2rem;
+     padding: 0.5rem 1rem;
+     border-radius: 1.5rem;
+     display: inline-flex;
+ }
+
+ .dots::after {
+     content: "";
+     animation: dotAnimation 0.6s steps(3, end) infinite;
+ }
+
+ @keyframes dotAnimation {
+     0% {
+         content: "";
+     }
+
+     33% {
+         content: ".";
+     }
+
+     66% {
+         content: "..";
+     }
+
+     100% {
+         content: "...";
+     }
+ }
+
+ .button-group textarea:hover,
+ .button-group textarea:focus {
+     outline: none;
+ }
+
+ .button-group svg {
+     width: 2rem;
+     height: 2rem;
+ }
+
+ .key-notes {
+     display: flex;
+     align-items: center;
+     font-size: 0.8rem;
+     justify-content: center;
+     gap: 0.5rem;
+ }
+
+ .key-notes span {
+     display: inline-block;
+     padding: 0.2rem;
+     border: 1px solid var(--border);
+     color: var(--font-weak);
+     font-size: 0.6rem;
+     margin-right: 0.2rem;
+     border-radius: 0.25rem;
+ }
+
+ .key-notes span:hover {
+     color: white;
+     background-color: var(--pink);
+ }
+
+ #input-area {
+     display: flex;
+     justify-content: flex-end;
+     flex-direction: column;
+     height: 100%;
+     width: 100%;
+     gap: 1rem;
+ }
+
+ #buttons {
+     width: 60%;
+ }
+
+ .key button {
+     display: grid;
+     align-items: center;
+     border-radius: 50%;
+     height: 2.875rem;
+     width: 2.875rem;
+     margin: 0 0.125rem;
+     cursor: pointer;
+     background: var(--main);
+     border: 1px solid var(--main);
+     background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
+     color: var(--bg);
+     font-family: "Archivo", system-ui, sans-serif;
+     text-shadow: var(--main-darker) 1px 2px 1px;
+ }
+
+ .key button:hover {
+     background: var(--main-dark);
+     border: 1px solid var(--main-dark);
+     color: var(--bg);
+     background: linear-gradient(135deg, var(--main-dark) 0%, var(--main-darker) 40%, var(--main-darker) 100%);
+     box-shadow: 0 3px 15px -1px var(--main-5);
+ }
+
+ .key button:disabled {
+     --active: 0;
+     cursor: not-allowed;
+     color: var(--border);
+     background-color: var(--disabled);
+     background: var(--disabled);
+     border: 1px solid var(--border);
+     text-shadow: none;
+ }
+
+ .key button svg path {
+     fill: var(--bg);
+ }
+
+ .key button:hover svg path {
+     fill: var(--bg);
+ }
+
+ .key button:disabled svg path {
+     fill: var(--border);
+ }
+
+ .key button:disabled:hover {
+     background: var(--disabled);
+     border: 1px solid var(--border);
+     box-shadow: none;
+ }
+
+ .key button:disabled:hover svg path {
+     fill: var(--border);
+ }
+
+ .key button#send-button {
+     display: grid;
+ }
+
+ .key button#stop-button {
+     display: none;
+ }
+
+ .key.inferencing button#send-button {
+     display: none;
+ }
+
+ .key.inferencing button#stop-button {
+     display: grid;
+ }
+
+ #webnn-logo {
+     width: 150px;
+     height: 30px;
+     display: inline-block;
+     margin: 0 6px 0 10px;
+ }
+
+ #webnnstatus a#webnn_na {
+     color: var(--pink);
+     background-color: rgba(255, 255, 255, 0.8);
+     border-radius: 3px;
+     padding: 1px 4px;
+     text-decoration: none;
+     display: inline-block;
+     margin-top: 2px;
+ }
+
+ #webnnstatus a#webnn_na:hover {
+     background-color: rgba(0, 0, 0, 0.4);
+     color: var(--bg);
+     border: 0px solid white;
+     text-decoration: none;
+ }
+
+ #scroll-wrapper {
+     display: flex;
+     height: 100%;
+     max-height: 75vh;
+     flex-direction: column-reverse;
+     overflow-y: scroll;
+     border: 0px solid transparent;
+     border-radius: 5px;
+ }
+
+ h1 {
+     padding: 0 0 0 0;
+     font-weight: 700;
+     font-size: 1.8rem;
+     margin: 0;
+ }
+
+ h1.title {
+     display: flex;
+     align-items: center;
+ }
+
+ h1.title span {
+     margin-right: 5px;
+ }
+
+ #back {
+     display: grid;
+     align-items: center;
+     justify-items: center;
+ }
+
+ #back svg {
+     width: 20px;
+     height: 30px;
+ }
+
+ #back svg path {
+     fill: var(--main-5);
+ }
+
+ #back:hover {
+     color: var(--main-dark);
+     cursor: pointer;
+ }
+
+ #back:hover svg path {
+     fill: var(--main-dark);
+ }
+
+ #back a {
+     display: flex;
+ }
+
+ .p-fetch-compile {
+     position: relative;
+     top: -2px;
+ }
+
+ .p-bar {
+     width: 100%;
+     height: 2px;
+     background-color: var(--border);
+     overflow: hidden;
+     border-radius: 10px;
+ }
+
+ .p-bar-inner {
+     height: 100%;
+     background-color: var(--main);
+     width: 0;
+     transition: width 0.3s ease-in-out;
+ }
+
+ .p-fetch-compile:hover {
+     color: var(--main);
+ }
+
+ .p-fetch-compile:hover .p-bar-inner {
+     height: 2px;
+     background-color: var(--main);
+ }
+
+ .p-bar-label {
+     margin: 0.8rem;
+     font-size: 0.8rem;
+     text-align: center;
+ }
+
+ @-webkit-keyframes wave-animate {
+     0% {
+         transform: scale(0);
+         opacity: 1;
+     }
+
+     100% {
+         transform: scale(2);
+         opacity: 0;
+     }
+ }
+
+ @keyframes wave-animate {
+     0% {
+         transform: scale(0);
+         opacity: 1;
+     }
+
+     100% {
+         transform: scale(2);
+         opacity: 0;
+     }
+ }
+
+ .on {
+     display: none;
+ }
+
+ .off {
+     display: inline-flex;
+     align-items: center;
+     justify-content: center;
+     height: 49px;
+     width: 49px;
+ }
+
+ .active .on {
+     display: inline-flex;
+     align-items: center;
+     justify-content: center;
+     height: 49px;
+     width: 49px;
+ }
+
+ .active .off {
+     display: none;
+ }
+
+ .log-output {
+     padding: 0.5rem;
+     background-color: var(--bg-4);
+     border: 1px solid var(--border);
+     border-radius: 5px;
+     display: flex;
+     flex-direction: column-reverse;
+     overflow-y: scroll;
+     height: 73.8vh;
+     width: 20vw;
+ }
+
+ .log-output:hover {
+     border: 1px solid var(--border-6);
+     background-color: var(--bg-8);
+ }
+
+ .data {
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     justify-content: center;
+     margin: 0;
+     padding: 0;
+ }
+
+ .data strong {
+     font-size: 600%;
+ }
+
+ .data span {
+     font-size: 228%;
+ }
+
+ .data .title {
+     display: block;
+ }
+
+ #error {
+     align-self: center;
+ }
+
+ .error {
+     background-color: var(--pink);
+     color: var(--bg);
+     font-size: 0.9rem;
+     border-radius: 49px;
+     padding: 6px 12px;
+ }
+
+ .v1 {
+     padding: 1rem 40px;
+     border-bottom: 1px solid var(--border);
+ }
+
+ .v9 {
+     padding: 0 40px;
+ }
+
+ @keyframes fadein {
+     from {
+         opacity: 0;
+     }
+
+     to {
+         opacity: 1;
+     }
+ }
+
+ .item {
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     padding: 0.5rem;
+     margin-bottom: 10px;
+     border: 1px solid var(--border-6);
+     border-radius: 5px;
+     color: var(--font-2);
+     background-color: var(--bg-6);
+ }
+
+ @keyframes bounce {
+
+     0%,
+     20%,
+     50%,
+     80%,
+     100% {
+         transform: translateY(0);
+     }
+
+     40% {
+         transform: translateY(-5px);
+     }
+
+     60% {
+         transform: translateY(-3px);
+     }
+ }
+
+ .item:first-child {
+     animation: bounce 2s ease infinite;
+ }
+
+ .item.app:hover {
+     border: 1px solid var(--pink);
+ }
+
+ .item.user:hover {
+     border: 1px solid var(--green);
+ }
+
+ .item .head {
+     display: grid;
+     grid-template-columns: 1fr 1fr;
+     grid-template-rows: 1fr;
+     column-gap: 10px;
+     align-items: center;
+     font-size: 12px;
+     width: 100%;
+     color: var(--font-weak);
+ }
+
+ .item .head div:first-child {
+     justify-self: start;
+ }
+
+ .item .head div:last-child {
+     justify-self: end;
+ }
+
+ .item .info {
+     width: 100%;
+     font-size: 14px;
+     text-align: left;
+     margin-top: 10px;
+ }
+
+ .item .head span {
+     padding: 1px 6px 2px 6px;
+     border-radius: 3px;
+ }
+
+ .item.app .head span {
+     background-color: var(--pink-1);
+ }
+
+ .item.user .head span {
+     background-color: var(--green-1);
+ }
+
+ .item.app:hover .head span {
+     background-color: var(--pink);
+     color: var(--bg);
+ }
+
+ .item.user:hover .head span {
+     background-color: var(--green);
+     color: var(--bg);
+ }
+
+ #webnnstatus {
+     text-align: right;
+     margin-top: 10px;
+ }
+
+ #webnnstatus.red {
+     margin: -4px auto 5px auto;
+     text-align: left;
+ }
+
+ #webnnstatus #circle {
+     width: 7px;
+     height: 7px;
+     border-radius: 7px;
+     display: inline-block;
+     margin-bottom: 1px;
+ }
+
+ #webnnstatus.green {
+     color: var(--font);
+ }
+
+ #webnnstatus.red {
+     background-color: var(--pink);
+     color: var(--bg);
+     border-radius: 5px;
+     padding: 4px 12px;
+ }
+
+ #webnnstatus.green #circle {
+     background-color: var(--green);
+ }
+
+ #webnnstatus.red #circle {
+     background-color: var(--bg);
+ }
+
+ #webnnstatus.red a {
+     color: yellow;
+     text-decoration: none;
+ }
+
+ #webnnstatus.red a:hover {
+     color: var(--bg);
+     text-decoration: underline;
+ }
+
+ .item .info a {
+     color: var(--pink);
+     border: 1px solid var(--pink);
+     text-decoration: none;
+     padding: 2px 6px;
+     border-radius: 3px;
+ }
+
+ .item .info a:hover {
+     background-color: var(--pink);
+     color: var(--bg);
+ }
+
+ #versions {
+     font-size: 0.8rem;
+     display: block;
+     text-align: right;
+ }
+
+ #versions a {
+     color: var(--main);
+     text-decoration: none;
+ }
+
+ #versions a svg path {
+     fill: var(--main);
+ }
+
+ #versions a:hover {
+     color: var(--green);
+     text-decoration: underline;
+ }
+
+ #versions a:hover svg path {
+     fill: var(--green);
+ }
+
+ #webnnstatus a {
+     color: var(--main);
+     text-decoration: none;
+ }
+
+ #webnnstatus a:hover {
+     color: var(--green);
+     text-decoration: underline;
+ }
+
+ #webnnstatus #circle.none {
+     display: none;
+ }
+
+ .grid-1 {
+     display: grid;
+     grid-template-columns: repeat(1, 1fr);
+     grid-template-rows: 1fr;
+     grid-column-gap: 10px;
+     grid-row-gap: 0px;
+     align-items: center;
+ }
+
+ .grid-2 {
+     display: grid;
+     grid-template-columns: 1fr 1fr;
+     grid-template-rows: 1fr;
+     grid-column-gap: 0.8rem;
+     grid-row-gap: 0px;
+     align-items: center;
+     justify-items: center;
+     margin: 1rem 0;
+ }
+
+ .grid-14 {
+     display: grid;
+     grid-template-columns: 1fr 4fr;
+     grid-template-rows: 1fr;
+     grid-column-gap: 0.8rem;
+     grid-row-gap: 0px;
+     align-items: start;
+     justify-items: center;
+     margin: 1rem 0;
+ }
+
+ .grid-2-41 {
+     display: grid;
+     grid-template-columns: 4fr 1fr;
+     grid-template-rows: 1fr;
+     grid-column-gap: 0.8rem;
+     grid-row-gap: 0px;
+     align-items: start;
+     justify-items: center;
+     margin: 1rem 0;
+ }
+
+ .grid-2-41 h1 {
+     justify-self: left;
+ }
+
+ .grid-2-41.v1 {
+     margin: 0;
+     align-items: center;
+ }
+
+ .footerinfo {
+     margin-bottom: 1rem;
+     font-size: 0.8rem;
+ }
+
+ #install-guides.none {
+     display: none;
+ }
+
+ @keyframes fadeInOpacity {
+     0% {
+         opacity: 0;
+     }
+
+     100% {
+         opacity: 1;
+     }
+ }
+
+ #install-guides {
+     position: relative;
+     width: 100%;
+     margin: 2rem auto 0 auto;
+     padding: 0.8rem;
+     text-align: left;
+     border: 1px solid var(--border);
+     border-radius: 5px;
+     font-size: 1rem;
+     opacity: 1;
+     animation-name: fadeInOpacity;
+     animation-iteration-count: 1;
+     animation-timing-function: ease-in;
+     animation-duration: 0.5s;
+ }
+
+ #install-guides ol {
+     margin: 10px 10px 0 10px;
+     padding: 0px 20px;
+ }
+
+ #install-close {
+     position: absolute;
+     right: 12px;
+     top: 2px;
+     width: 16px;
+     height: 16px;
+     background: transparent;
+     border: 0px solid var(--border);
+ }
+
+ #install-close svg {
+     display: inline-block;
+     width: 18px !important;
+     height: 18px !important;
+ }
+
+ #install-close svg path {
+     fill: var(--border);
+ }
+
+ #install-close:hover {
+     cursor: pointer;
+ }
+
+ #install-guides:hover #install-close svg path {
+     fill: var(--main);
+ }
+
+ #install-guides #install-close:hover svg path {
+     fill: var(--green);
+ }
+
+ /* Largest devices such as desktops (1280px) */
+ @media only screen and (max-width: 80em) {}
+
+ /* Large devices such as laptops (1024px) */
+ @media only screen and (max-width: 64em) {
+     .grid-2-41 {
+         grid-template-columns: 2fr 1fr;
+     }
+
+     .log-output {
+         width: 32vw;
+     }
+ }
+
+ /* Medium devices such as tablets (718px) */
+ @media only screen and (max-width: 718px) {}
+
+ @media only screen and (max-width: 40em) {
+
+     .grid-2,
+     .grid-2-41 {
+         grid-template-columns: 1fr;
+         grid-template-rows: 1fr 1fr;
+         row-gap: 10px;
+     }
+
+     .grid-2-41 {
+         display: flex;
+         flex-direction: column;
+     }
+
+     .grid-14 {
+         grid-template-columns: 1fr;
+         grid-template-rows: 1fr 1fr;
+         row-gap: 10px;
+     }
+
+     .key-notes {
+         flex-direction: column;
+     }
+
+     .key-notes .center {
+         display: none;
+     }
+
+     .response-message-outer {
+         display: flex;
+         flex-direction: column;
+     }
+
+     #buttons {
+         width: 90vw;
+     }
+
+     .main {
+         margin-bottom: 20px;
+     }
+
+     .log-output,
+     #badge {
+         width: auto;
+     }
+
+     .v1 {
+         padding: 1rem;
+     }
+
+     .v9 {
+         padding: 1rem;
+     }
+
+     .footerinfo {
+         margin-bottom: 0;
+     }
+
+     h1 {
+         font-size: 1rem;
+     }
+ }
\ No newline at end of file
diff --git a/demos/phi-3-mini/utils.js b/demos/phi-3-mini/utils.js
index 74dadb6..bc39c3c 100644
--- a/demos/phi-3-mini/utils.js
+++ b/demos/phi-3-mini/utils.js
@@ -116,7 +116,7 @@ async function readResponse(name, response) {
 export function log(i) {
     console.log(i);
     if (getMode()) {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item app">
             <div class="head">
@@ -125,9 +125,9 @@ export function log(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     } else {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item app">
             <div class="head">
@@ -136,14 +136,14 @@ export function log(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     }
 }
 
 export const logError = i => {
     console.error(i);
     if (getMode()) {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
     <div class="item app">
         <div class="head">
@@ -152,9 +152,9 @@ export const logError = i => {
         </div>
         <div class="info">${i}</div>
     </div>
-    ` + $("#status").innerHTML;
+    ` + $("#log").innerHTML;
     } else {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item app">
             <div class="head">
@@ -163,14 +163,14 @@ export const logError = i => {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     }
 };
 
 export function logUser(i) {
     console.log(i);
     if (getMode()) {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item user">
             <div class="head">
@@ -179,9 +179,9 @@ export function logUser(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     } else {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item user">
             <div class="head">
@@ -190,6 +190,6 @@ export function logUser(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     }
 }
diff --git a/demos/sd-turbo/index.html b/demos/sd-turbo/index.html
index ec1c9e3..8d224cb 100644
--- a/demos/sd-turbo/index.html
+++ b/demos/sd-turbo/index.html
@@ -7,6 +7,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
+    <link rel="stylesheet" href="../../assets/css/style.css" />
     <link rel="stylesheet" href="./static/main.css" />
     <script type="module">
         import { AutoTokenizer } from "https://cdn.jsdelivr.net/npm/@xenova/transformers/dist/transformers.js";
@@ -277,7 +278,7 @@ <h1 class="title">
         </div>
         <div id="dev" class="grid-2 mt-1">
             <div class="footerinfo">
-                <div id="status" class="log-output"></div>
+                <div id="log" class="log-output"></div>
                 <div id="webnnstatus"><span id="circle"></span> <span id="info">WebNN</span></div>
                 <div id="release">
                     <input type="checkbox" id="memory_release" checked />
diff --git a/demos/sd-turbo/static/main.css b/demos/sd-turbo/static/main.css
index cc816c6..8147aa2 100644
--- a/demos/sd-turbo/static/main.css
+++ b/demos/sd-turbo/static/main.css
@@ -1,1073 +1,943 @@
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 300;
-    src: url("./fonts/archivo/archivo-v19-latin-300.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 400;
-    src: url("./fonts/archivo/archivo-v19-latin-regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 600;
-    src: url("./fonts/archivo/archivo-v19-latin-600.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 700;
-    src: url("./fonts/archivo/archivo-v19-latin-700.woff2") format("woff2");
-}
-
-:root {
-    --bg: rgba(255, 255, 255, 1);
-    --black-02: rgba(240, 240, 240, 0.2);
-    --font: rgba(45, 45, 45, 1);
-    --font-weak: rgba(0, 0, 0, 0.6);
-    --disabled: rgba(245, 245, 245, 0.2);
-    --bg-2: rgba(230, 230, 230, 0.2);
-    --bg-2h: rgba(230, 230, 230, 0.4);
-    --bg-3: rgba(200, 200, 200, 0.2);
-    --bg-btn: rgba(255, 255, 255, 1);
-    --main-01: rgba(39, 94, 254, 0.1);
-    --main-001: rgba(39, 94, 254, 0.01);
-    --main-05: rgba(39, 94, 254, 0.5);
-    --main-06: rgba(39, 94, 254, 0.6);
-    --scroll: rgba(0, 0, 0, 0.1);
-    --scroll-2: rgba(0, 0, 0, 0.2);
-    --main: rgba(39, 94, 254, 1);
-    --main-dark: rgba(24, 79, 238, 1);
-    --main-darker: rgba(20, 74, 204, 1);
-    --border: rgba(230, 230, 230, 1);
-    --green: rgba(1, 212, 73, 1);
-    --pink: rgba(255, 0, 129, 1);
-    --main-alpha-2: rgba(230, 230, 230, 0.4);
-    --main-alpha: rgba(230, 230, 230, 0.2);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-    background-color: var(--bg);
-    color: var(--font);
-    font-size: 16px;
-}
-
-body {
-    scrollbar-width: auto;
-    scrollbar-color: var(--main-01), transparent;
-}
-
-#webnn-logo {
-    width: 150px;
-    height: 30px;
-    display: inline-block;
-    margin: 0 6px 0 10px;
-}
-
-.v1:hover #webnn-logo path._logo_n1,
-.v1:hover #webnn-logo circle._logo_n1 {
-    fill: #4777c0;
-}
-
-.v1:hover #webnn-logo path._logo_n2,
-.v1:hover #webnn-logo circle._logo_n2 {
-    stroke: #61bafb;
-    fill: #61bafb;
-}
-
-.v1:hover #webnn-logo circle._logo_n3 {
-    stroke: #61bafb;
-}
-
-#webnnstatus a#webnn_na {
-    color: var(--pink);
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 3px;
-    padding: 1px 4px;
-    text-decoration: none;
-    display: inline-block;
-    margin-top: 0px;
-}
-
-#webnnstatus a#webnn_na:hover {
-    background-color: rgba(0, 0, 0, 0.4);
-    color: var(--bg);
-    border: 0px solid white;
-    text-decoration: none;
-}
-
-.log-output::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-.log-output::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-.log-output::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-.log-output:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
-textarea::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-textarea::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-textarea::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-textarea:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
-.left::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-.left::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-.left::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-.left:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
-h1 {
-    padding: 0 0 0 0;
-    font-weight: 700;
-    font-size: 1.8rem;
-    margin: 0;
-}
-
-h1.title {
-    display: flex;
-    align-items: center;
-}
-
-h1.title span {
-    margin-right: 5px;
-}
-
-#back {
-    width: 24px;
-    height: 24px;
-    border-radius: 48px;
-    border: 1px solid var(--main-05);
-    display: grid;
-    align-items: center;
-    justify-items: center;
-}
-
-#back svg {
-    width: 20px;
-    height: 20px;
-}
-
-#back svg path {
-    fill: var(--main-05);
-}
-
-#back:hover {
-    border: 1px solid var(--main);
-    background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
-    color: var(--bg);
-    box-shadow: 0 3px 15px -1px var(--main-05);
-    cursor: pointer;
-}
-
-#back:hover svg path {
-    fill: var(--bg);
-}
-
-.left {
-    flex-direction: column;
-    padding: 10px 20px;
-    background-color: var(--bg);
-    border-right: 1px solid var(--border);
-    overflow-y: scroll;
-}
-
-.left:hover {
-    background: var(--bg-2);
-}
-
-.right {
-    align-self: stretch;
-    justify-self: stretch;
-    background: var(--bg-2);
-}
-
-.right:hover {
-    background: var(--bg-2h);
-}
-
-.right div {
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    height: 100%;
-}
-
-.input-group label {
-    display: block;
-    margin-bottom: 5px;
-    font-size: 0.9rem;
-}
-
-.input-group input,
-.input-group textarea {
-    font-size: 1rem;
-    width: 100%;
-    padding: 8px 8px;
-    border: 1px solid var(--border);
-    background-color: var(--bg-2);
-    border-radius: 5px;
-    font-family: "Archivo", system-ui, sans-serif;
-}
-
-.input-group input:focus,
-.input-group textarea:focus,
-.input-group input:hover,
-.input-group textarea:hover {
-    color: var(--main-dark);
-    border: 1px solid var(--main);
-    outline: none;
-    background-color: var(--black-02);
-}
-
-.button-group {
-    display: flex;
-    justify-content: center;
-    padding: 4px;
-    background-color: var(--bg-2);
-    border: 1px solid var(--border);
-    border-radius: 50px;
-    margin: 10px auto;
-    max-width: 50vw;
-}
-
-.button-group:hover {
-    border: 1px solid var(--main) !important;
-}
-
-.button-group textarea {
-    border: 0px solid var(--bg);
-    background-color: transparent;
-    width: 80%;
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 1rem;
-    padding: 4px 24px;
-    resize: vertical;
-    line-height: 1rem;
-    color: var(--font-weak);
-}
-
-#user-input.enabled {
-    color: var(--main);
-}
-
-.button-group textarea:hover,
-.button-group textarea:focus {
-    outline: none;
-}
-
-.button-group svg {
-    width: 18px;
-    height: 18px;
-    margin-right: 2px;
-    margin-bottom: -4px;
-}
-
-#image_area {
-    margin: 20px auto 10px auto;
-    min-height: 40vh;
-}
-
-#data_area {
-    margin-bottom: 20px;
-    font-size: 1.6rem;
-    font-weight: 600;
-    height: 40px;
-}
-
-#data_area div {
-    padding: 4px 18px;
-    background-color: var(--pink);
-    color: var(--bg);
-    transform: skew(-15deg);
-    border-radius: 5px;
-    text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
-    display: none;
-}
-
-#data_area div.show {
-    display: inline-block;
-}
-
-#data_area div.nsfw {
-    background-color: var(--font);
-}
-
-#data_area div:hover {
-    background-color: var(--main-darker);
-    color: var(--bg);
-    transform: skew(-15deg);
-    text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px;
-    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
-#data_area div.nsfw:hover {
-    background-color: rgba(191, 0, 0, 1);
-}
-
-.mt-1 {
-    margin-top: 16px;
-}
-
-.key button {
-    border-radius: 50px;
-    font-size: 1rem;
-    min-width: 190px;
-    /* background: var(--bg);
+ #webnn-logo {
+     width: 150px;
+     height: 30px;
+     display: inline-block;
+     margin: 0 6px 0 10px;
+ }
+
+ #webnnstatus a#webnn_na {
+     color: var(--pink);
+     background-color: rgba(255, 255, 255, 0.8);
+     border-radius: 3px;
+     padding: 1px 4px;
+     text-decoration: none;
+     display: inline-block;
+     margin-top: 0px;
+ }
+
+ #webnnstatus a#webnn_na:hover {
+     background-color: rgba(0, 0, 0, 0.4);
+     color: var(--bg);
+     border: 0px solid white;
+     text-decoration: none;
+ }
+
+ .left::-webkit-scrollbar {
+     width: 3px !important;
+     height: 3px !important;
+ }
+
+ .left::-webkit-scrollbar-track {
+     background: var(--main-01);
+ }
+
+ .left::-webkit-scrollbar-thumb {
+     background-color: var(--scroll-1);
+     border-radius: 5px;
+     border: 3px solid transparent;
+ }
+
+ .left:hover::-webkit-scrollbar-thumb {
+     background-color: var(--scroll-2);
+ }
+
+ h1 {
+     padding: 0 0 0 0;
+     font-weight: 700;
+     font-size: 1.8rem;
+     margin: 0;
+ }
+
+ h1.title {
+     display: flex;
+     align-items: center;
+ }
+
+ h1.title span {
+     margin-right: 5px;
+ }
+
+ #back {
+     width: 24px;
+     height: 24px;
+     border-radius: 48px;
+     border: 1px solid var(--main-5);
+     display: grid;
+     align-items: center;
+     justify-items: center;
+ }
+
+ #back svg {
+     width: 20px;
+     height: 20px;
+ }
+
+ #back svg path {
+     fill: var(--main-5);
+ }
+
+ #back:hover {
+     border: 1px solid var(--main);
+     background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
+     color: var(--bg);
+     box-shadow: 0 3px 15px -1px var(--main-5);
+     cursor: pointer;
+ }
+
+ #back:hover svg path {
+     fill: var(--bg);
+ }
+
+ .left {
+     flex-direction: column;
+     padding: 10px 20px;
+     background-color: var(--bg);
+     border-right: 1px solid var(--border);
+     overflow-y: scroll;
+ }
+
+ .left:hover {
+     background: var(--main-alpha-2);
+ }
+
+ .right {
+     align-self: stretch;
+     justify-self: stretch;
+     background: var(--main-alpha-2);
+ }
+
+ .right:hover {
+     background: var(--main-alphah);
+ }
+
+ .right div {
+     display: grid;
+     align-items: center;
+     justify-items: center;
+     height: 100%;
+ }
+
+ .input-group label {
+     display: block;
+     margin-bottom: 5px;
+     font-size: 0.9rem;
+ }
+
+ .input-group input,
+ .input-group textarea {
+     font-size: 1rem;
+     width: 100%;
+     padding: 8px 8px;
+     border: 1px solid var(--border);
+     background-color: var(--main-alpha-2);
+     border-radius: 5px;
+     font-family: "Archivo", system-ui, sans-serif;
+ }
+
+ .input-group input:focus,
+ .input-group textarea:focus,
+ .input-group input:hover,
+ .input-group textarea:hover {
+     color: var(--main-dark);
+     border: 1px solid var(--main);
+     outline: none;
+     background-color: var(--black-2);
+ }
+
+ .button-group {
+     display: flex;
+     justify-content: center;
+     padding: 4px;
+     background-color: var(--main-alpha-2);
+     border: 1px solid var(--border);
+     border-radius: 50px;
+     margin: 10px auto;
+     max-width: 50vw;
+ }
+
+ .button-group:hover {
+     border: 1px solid var(--main) !important;
+ }
+
+ .button-group textarea {
+     border: 0px solid var(--bg);
+     background-color: transparent;
+     width: 80%;
+     font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
+     font-size: 1rem;
+     padding: 4px 24px;
+     resize: vertical;
+     line-height: 1rem;
+     color: var(--font-weak);
+ }
+
+ #user-input.enabled {
+     color: var(--main);
+ }
+
+ .button-group textarea:hover,
+ .button-group textarea:focus {
+     outline: none;
+ }
+
+ .button-group svg {
+     width: 18px;
+     height: 18px;
+     margin-right: 2px;
+     margin-bottom: -4px;
+ }
+
+ #image_area {
+     margin: 20px auto 10px auto;
+     min-height: 40vh;
+ }
+
+ #data_area {
+     margin-bottom: 20px;
+     font-size: 1.6rem;
+     font-weight: 600;
+     height: 40px;
+ }
+
+ #data_area div {
+     padding: 4px 18px;
+     background-color: var(--pink);
+     color: var(--bg);
+     transform: skew(-15deg);
+     border-radius: 5px;
+     text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
+     display: none;
+ }
+
+ #data_area div.show {
+     display: inline-block;
+ }
+
+ #data_area div.nsfw {
+     background-color: var(--font);
+ }
+
+ #data_area div:hover {
+     background-color: var(--main-darker);
+     color: var(--bg);
+     transform: skew(-15deg);
+     text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px;
+     box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+ }
+
+ #data_area div.nsfw:hover {
+     background-color: rgba(191, 0, 0, 1);
+ }
+
+ .mt-1 {
+     margin-top: 16px;
+ }
+
+ .key button {
+     border-radius: 50px;
+     font-size: 1rem;
+     min-width: 190px;
+     /* background: var(--bg);
     color: var(--main-dark);
 	border: 3px solid var(--main); */
-    padding: 8px 24px;
-    cursor: pointer;
-    background: var(--main);
-    border: 1px solid var(--main);
-    background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
-    color: var(--bg);
-    font-family: "Archivo", system-ui, sans-serif;
-    text-shadow: var(--main-darker) 1px 2px 1px;
-}
-
-.key button:hover {
-    background: var(--main-dark);
-    border: 1px solid var(--main-dark);
-    color: var(--bg);
-    background: linear-gradient(135deg, var(--main-dark) 0%, var(--main-darker) 40%, var(--main-darker) 100%);
-    box-shadow: 0 3px 15px -1px var(--main-05);
-}
-
-.key button:disabled {
-    --active: 0;
-    cursor: not-allowed;
-    color: var(--border);
-    background-color: var(--disabled);
-    background: var(--disabled);
-    border: 1px solid var(--border);
-    text-shadow: none;
-}
-
-.key button svg path {
-    fill: var(--bg);
-}
-
-.key button:hover svg path {
-    fill: var(--bg);
-}
-
-.key button:disabled svg path {
-    fill: var(--border);
-}
-
-.key button:disabled:hover {
-    background: var(--disabled);
-    border: 1px solid var(--border);
-    box-shadow: none;
-}
-
-.key button:disabled:hover svg path {
-    fill: var(--border);
-}
-
-.log-output {
-    height: 20vh;
-    padding: 10px 10px;
-    background-color: var(--bg-2);
-    border: 1px solid var(--border);
-    font-size: 0.9rem;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column-reverse;
-    overflow-y: scroll;
-}
-
-.log-output:hover {
-    border: 1px solid var(--main);
-    background-color: var(--bg-btn);
-}
-
-.grid-1 {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 10px;
-    grid-row-gap: 0px;
-    align-items: center;
-}
-
-.grid-2 {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 10px;
-    grid-row-gap: 0px;
-    align-items: center;
-}
-
-.footerinfo {
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
-}
-
-#release {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: -0.1rem;
-}
-
-#release input[type=checkbox] {
-    height: 0;
-    width: 0;
-    visibility: hidden;
-}
-
-#release label {
-    cursor: pointer;
-    width: 40px;
-    height: 18px;
-    border: 1px solid var(--border);
-    background: linear-gradient(135deg, var(--border-01) 0%, var(--border-05) 40%, var(--border) 100%);
-    display: inline-block;
-    border-radius: 18px;
-    position: relative;
-    margin-right: 0.2rem;
-}
-
-#release label:after {
-    content: '';
-    position: absolute;
-    top: 1px;
-    left: 3px;
-    width: 14px;
-    height: 14px;
-    background: var(--border);
-    border-radius: 14px;
-    transition: 0.3s;
-}
-
-#release input:checked+label {
-    background: #fff;
-}
-
-#release input:checked+label:after {
-    background-color: var(--main);
-}
-
-#release input:checked+label:after {
-    left: calc(100% - 5px);
-    transform: translateX(-100%);
-}
-
-#release label:active:after {
-    width: 40px;
-}
-
-#data table,
-#data div {
-    font-size: 0.9rem !important;
-}
-
-.grid-4 {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-    align-items: center;
-    gap: 10px;
-}
-
-.grid-4 div {
-    justify-self: center;
-}
-
-.grid-4 .frame {
-    box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
-    height: 100%;
-    width: 100%;
-    border-radius: 5px;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    background-color: var(--bg-2);
-    min-height: 352.3px;
-}
-
-.grid-4 .frame:hover {
-    border: 1px solid var(--border);
-    background-color: var(--bg);
-}
-
-.frame canvas {
-    display: none;
-}
-
-.frame.inferencing canvas {
-    display: none;
-}
-
-.frame.done svg {
-    display: none;
-}
-
-.frame.done.nsfw {
-    border: 1px solid white;
-}
-
-.frame.done.nsfw:hover {
-    border: 1px solid rgba(191, 0, 0, 1);
-}
-
-.frame.done.nsfw canvas {
-    filter: blur(20px);
-    opacity: 0.6;
-}
-
-.frame.done canvas {
-    display: inline-block;
-    border-radius: 5px;
-    box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
-}
-
-.grid-4 .frame svg {
-    width: 60px;
-    height: 60px;
-}
-
-.grid-4 canvas {
-    max-width: 100%;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.frame.loadwave {
-    --loadwave-value: 0;
-    --loadwave-layer-size: 1200px;
-    --loadwave-size: 190px;
-    --loadwave-effect-size: calc(var(--loadwave-size) - 20px);
-}
-
-.frame.loadwave::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 50%;
-    height: 50%;
-    border-radius: 50%;
-    min-width: 8px;
-    min-height: 8px;
-    transform: translate(-50%, -50%);
-}
-
-.frame.loadwave[data-value="100"] {
-    background-color: var(--main-alpha-2);
-}
-
-.frame.loadwave[data-value="100"]:hover {
-    background-color: var(--bg);
-}
-
-.frame.loadwave[data-value="100"]::before {
-    background-color: transparent;
-}
-
-.frame.loadwave[data-value="100"] .loadwave-effect {
-    display: none;
-}
-
-.frame.loadwave,
-.frame.loadwave .loadwave-effect {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    align-content: center;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-}
-
-.frame.loadwave .loadwave-effect {
-    min-width: 23vw;
-    min-height: 40vh;
-    border: none;
-    margin: auto;
-    overflow: hidden;
-}
-
-.frame.loadwave .loadwave-data {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 90%;
-    transform: translate(-50%, -50%);
-    display: inline-block;
-    color: var(--color-black);
-    text-align: center;
-    overflow: hidden;
-}
-
-.frame.loadwave .loadwave-data strong,
-.frame.ready .loadwave-data strong {
-    font-size: 200%;
-}
-
-.frame.loadwave .loadwave-data span,
-.frame.ready .loadwave-data span {
-    font-size: 120%;
-}
-
-.frame.loadwave .loadwave-layer {
-    left: -50%;
-    right: 50%;
-    background: var(--main-alpha-2);
-    transform-origin: center center;
-    animation: rotates 8s linear infinite both;
-    position: absolute;
-    top: calc(100% - var(--loadwave-value) * 1%);
-    width: var(--loadwave-layer-size);
-    height: var(--loadwave-layer-size);
-    border-radius: calc(var(--loadwave-layer-size) / 2.5);
-}
-
-.frame.loadwave .loadwave-layer:nth-child(2) {
-    background: var(--main-alpha);
-    transform: rotate(90deg);
-}
-
-@keyframes wave {
-
-    from,
-    0% {
-        width: 50%;
-        height: 50%;
-        background: var(--main-alpha-2);
-        opacity: 1;
-    }
-
-    30% {
-        opacity: 1;
-    }
-
-    to,
-    100% {
-        width: 150%;
-        height: 150%;
-        background: var(--main-alpha);
-        opacity: 0;
-    }
-}
-
-@keyframes rotates {
-
-    to,
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.frame .loadwave-effect,
-.frame .data {
-    display: none;
-}
-
-.frame.loadwave .loadwave-effect,
-.frame.loadwave .data,
-.frame.ready .data {
-    display: block;
-}
-
-.frame.inferencing .ready,
-.frame.loadwave .ready,
-.frame.done .ready {
-    display: none;
-}
-
-.ready {
-    display: none;
-    text-align: center;
-}
-
-.ready.show {
-    display: block;
-}
-
-.ready strong {
-    font-size: 200%;
-}
-
-.frame.inferencing .loadwave-data {
-    position: static;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    width: auto;
-    transform: none;
-}
-
-.frame.loadwave .loadwave-data svg {
-    animation: spin 8s linear infinite;
-}
-
-.frame.inferncing .loadwave-data svg {
-    display: block;
-    animation: spin 2s linear infinite;
-}
-
-#buttons #generate,
-#buttons.loading #generate {
-    display: none;
-}
-
-#buttons.loaded #generate {
-    display: block;
-}
-
-#buttons #load {
-    display: block;
-}
-
-#buttons.loaded #load {
-    display: none;
-}
-
-#error {
-    align-self: center;
-}
-
-.error {
-    background-color: var(--pink);
-    color: var(--bg);
-    font-size: 0.9rem;
-    border-radius: 5px;
-    padding: 6px 12px;
-}
-
-.v1 {
-    padding: 1rem 40px;
-    border-bottom: 1px solid var(--border);
-}
-
-.v9 {
-    padding: 0 40px;
-}
-
-#webnnstatus {
-    text-align: right;
-    font-size: 0.9rem;
-    margin-top: 6px;
-}
-
-#webnnstatus #circle {
-    width: 8px;
-    height: 8px;
-    border-radius: 10px;
-    display: inline-block;
-    margin-bottom: 0px;
-}
-
-#webnnstatus.green {
-    color: var(--font);
-}
-
-#webnnstatus.red {
-    background-color: var(--pink);
-    color: var(--bg);
-    border-radius: 5px;
-    margin-bottom: 5px;
-    padding: 4px 12px;
-}
-
-#webnnstatus.green #circle {
-    background-color: var(--green);
-}
-
-#webnnstatus.red #circle {
-    background-color: var(--bg);
-}
-
-#versions {
-    font-size: 0.9rem;
-    display: block;
-    text-align: right;
-}
-
-#versions a {
-    color: var(--font);
-    text-decoration: underline var(--border);
-}
-
-#versions a:hover {
-    color: var(--green);
-    text-decoration: underline;
-}
-
-#versions a:hover svg path {
-    fill: var(--green);
-}
-
-#data {
-    align-self: flex-start;
-    font-size: 0.9rem;
-}
-
-#data tr:first-child th:first-child {
-    border-top-left-radius: 5px;
-}
-
-#data tr:first-child th:last-child {
-    border-top-right-radius: 5px;
-}
-
-#data tr:last-child td:first-child {
-    border-bottom-left-radius: 5px;
-}
-
-#data #runTotal4 {
-    border-bottom-right-radius: 5px;
-}
-
-#data table {
-    text-align: center;
-    margin: 0;
-    border-spacing: 0;
-    font-size: 0.9rem;
-    width: 100%;
-}
-
-#data div {
-    margin-top: 6px;
-    text-align: right;
-}
-
-#tdTurbo,
-#textEncoder,
-#unet,
-#vae,
-#sc {
-    border-left: 1px solid var(--border);
-}
-
-#data tr th,
-#data tr td {
-    text-align: center;
-    border-bottom: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-}
-
-#data tr th {
-    font-weight: 600;
-    padding: 3px 8px;
-    border-top: 1px solid var(--border);
-}
-
-#data tr td {
-    padding: 3px 8px;
-}
-
-#data tr:nth-child(odd) {
-    background-color: transparent;
-}
-
-#data tr:nth-child(even) {
-    background-color: var(--bg);
-}
-
-#data tr:hover th:hover,
-#data tr td:hover {
-    background-color: var(--main-dark);
-    color: var(--bg);
-}
-
-.hide {
-    display: none;
-}
-
-.show {
-    display: block;
-}
-
-/* Largest devices such as desktops (1280px) */
-@media only screen and (max-width: 80em) {}
-
-/* Large devices such as laptops (1024px) */
-@media only screen and (max-width: 64em) {
-    .grid-4 {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-    }
-
-    .grid-2 {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
-        row-gap: 10px;
-    }
-
-    .button-group {
-        max-width: 80%;
-    }
-
-    #data_area {
-        height: auto;
-    }
-}
-
-@media only screen and (max-width: 718px) {
-    .grid-4 {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-    }
-
-    .grid-2 {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
-        row-gap: 10px;
-    }
-
-    .button-group {
-        max-width: 100%;
-    }
-
-    #data_area {
-        height: auto;
-    }
-
-    #image_area {
-        margin: 10px auto 10px auto;
-        min-height: auto;
-    }
-
-    .v1 {
-        padding: 1rem;
-    }
-
-    .v9 {
-        padding: 1rem;
-    }
-
-    .footerinfo {
-        margin-bottom: 0;
-    }
-
-    h1 {
-        font-size: 0.9rem;
-    }
-}
-
-@media only screen and (max-width: 40em) {
-    .grid-2 {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
-        row-gap: 10px;
-    }
-
-    .grid-4 {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr 1fr 1fr;
-    }
-
-    .button-group {
-        max-width: 100%;
-    }
-
-    #data_area {
-        height: auto;
-    }
-
-    #image_area {
-        margin: 10px auto 10px auto;
-        min-height: auto;
-    }
-
-    #data table {
-        font-size: 0.38rem;
-    }
-
-    .v1 {
-        padding: 1rem;
-    }
-
-    .v9 {
-        padding: 1rem;
-    }
-
-    .mt-1 {
-        margin-top: 3rem;
-    }
-
-    .footerinfo {
-        margin-bottom: 0;
-    }
-
-    #data.footerinfo {
-        display: none;
-    }
-
-    h1 {
-        font-size: 0.9rem;
-    }
-}
\ No newline at end of file
+     padding: 8px 24px;
+     cursor: pointer;
+     background: var(--main);
+     border: 1px solid var(--main);
+     background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
+     color: var(--bg);
+     font-family: "Archivo", system-ui, sans-serif;
+     text-shadow: var(--main-darker) 1px 2px 1px;
+ }
+
+ .key button:hover {
+     background: var(--main-dark);
+     border: 1px solid var(--main-dark);
+     color: var(--bg);
+     background: linear-gradient(135deg, var(--main-dark) 0%, var(--main-darker) 40%, var(--main-darker) 100%);
+     box-shadow: 0 3px 15px -1px var(--main-5);
+ }
+
+ .key button:disabled {
+     --active: 0;
+     cursor: not-allowed;
+     color: var(--border);
+     background-color: var(--disabled);
+     background: var(--disabled);
+     border: 1px solid var(--border);
+     text-shadow: none;
+ }
+
+ .key button svg path {
+     fill: var(--bg);
+ }
+
+ .key button:hover svg path {
+     fill: var(--bg);
+ }
+
+ .key button:disabled svg path {
+     fill: var(--border);
+ }
+
+ .key button:disabled:hover {
+     background: var(--disabled);
+     border: 1px solid var(--border);
+     box-shadow: none;
+ }
+
+ .key button:disabled:hover svg path {
+     fill: var(--border);
+ }
+
+ .log-output {
+     height: 20vh;
+     padding: 10px 10px;
+     background-color: var(--main-alpha-2);
+     border: 1px solid var(--border);
+     font-size: 0.9rem;
+     border-radius: 5px;
+     display: flex;
+     flex-direction: column-reverse;
+     overflow-y: scroll;
+ }
+
+ .log-output:hover {
+     border: 1px solid var(--main);
+     background-color: var(--bg-btn);
+ }
+
+ .grid-1 {
+     display: grid;
+     grid-template-columns: repeat(1, 1fr);
+     grid-template-rows: 1fr;
+     grid-column-gap: 10px;
+     grid-row-gap: 0px;
+     align-items: center;
+ }
+
+ .grid-2 {
+     display: grid;
+     grid-template-columns: repeat(2, 1fr);
+     grid-template-rows: 1fr;
+     grid-column-gap: 10px;
+     grid-row-gap: 0px;
+     align-items: center;
+ }
+
+ .footerinfo {
+     margin-bottom: 1rem;
+     font-size: 0.9rem;
+ }
+
+ #release {
+     display: flex;
+     align-items: center;
+     justify-content: flex-end;
+     margin-top: -0.1rem;
+ }
+
+ #release input[type=checkbox] {
+     height: 0;
+     width: 0;
+     visibility: hidden;
+ }
+
+ #release label {
+     cursor: pointer;
+     width: 40px;
+     height: 18px;
+     border: 1px solid var(--border);
+     background: linear-gradient(135deg, var(--border-1) 0%, var(--border-5) 40%, var(--border) 100%);
+     display: inline-block;
+     border-radius: 18px;
+     position: relative;
+     margin-right: 0.2rem;
+ }
+
+ #release label:after {
+     content: '';
+     position: absolute;
+     top: 1px;
+     left: 3px;
+     width: 14px;
+     height: 14px;
+     background: var(--border);
+     border-radius: 14px;
+     transition: 0.3s;
+ }
+
+ #release input:checked+label {
+     background: #fff;
+ }
+
+ #release input:checked+label:after {
+     background-color: var(--main);
+ }
+
+ #release input:checked+label:after {
+     left: calc(100% - 5px);
+     transform: translateX(-100%);
+ }
+
+ #release label:active:after {
+     width: 40px;
+ }
+
+ #data table,
+ #data div {
+     font-size: 0.9rem !important;
+ }
+
+ .grid-4 {
+     display: grid;
+     grid-template-columns: repeat(4, 1fr);
+     grid-template-rows: 1fr;
+     grid-column-gap: 0px;
+     grid-row-gap: 0px;
+     align-items: center;
+     gap: 10px;
+ }
+
+ .grid-4 div {
+     justify-self: center;
+ }
+
+ .grid-4 .frame {
+     box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
+     height: 100%;
+     width: 100%;
+     border-radius: 5px;
+     display: grid;
+     align-items: center;
+     justify-items: center;
+     background-color: var(--main-alpha-2);
+     min-height: 352.3px;
+ }
+
+ .grid-4 .frame:hover {
+     border: 1px solid var(--border);
+     background-color: var(--bg);
+ }
+
+ .frame canvas {
+     display: none;
+ }
+
+ .frame.inferencing canvas {
+     display: none;
+ }
+
+ .frame.done svg {
+     display: none;
+ }
+
+ .frame.done.nsfw {
+     border: 1px solid white;
+ }
+
+ .frame.done.nsfw:hover {
+     border: 1px solid rgba(191, 0, 0, 1);
+ }
+
+ .frame.done.nsfw canvas {
+     filter: blur(20px);
+     opacity: 0.6;
+ }
+
+ .frame.done canvas {
+     display: inline-block;
+     border-radius: 5px;
+     box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
+ }
+
+ .grid-4 .frame svg {
+     width: 60px;
+     height: 60px;
+ }
+
+ .grid-4 canvas {
+     max-width: 100%;
+ }
+
+ @keyframes spin {
+     0% {
+         transform: rotate(0deg);
+     }
+
+     100% {
+         transform: rotate(360deg);
+     }
+ }
+
+ .frame.loadwave {
+     --loadwave-value: 0;
+     --loadwave-layer-size: 1200px;
+     --loadwave-size: 190px;
+     --loadwave-effect-size: calc(var(--loadwave-size) - 20px);
+ }
+
+ .frame.loadwave::before {
+     content: "";
+     display: block;
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     width: 50%;
+     height: 50%;
+     border-radius: 50%;
+     min-width: 8px;
+     min-height: 8px;
+     transform: translate(-50%, -50%);
+ }
+
+ .frame.loadwave[data-value="100"] {
+     background-color: var(--main-alpha-4);
+ }
+
+ .frame.loadwave[data-value="100"]:hover {
+     background-color: var(--bg);
+ }
+
+ .frame.loadwave[data-value="100"]::before {
+     background-color: transparent;
+ }
+
+ .frame.loadwave[data-value="100"] .loadwave-effect {
+     display: none;
+ }
+
+ .frame.loadwave,
+ .frame.loadwave .loadwave-effect {
+     position: relative;
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+     align-items: center;
+     justify-content: center;
+     align-content: center;
+     width: 100%;
+     height: 100%;
+     border-radius: 5px;
+ }
+
+ .frame.loadwave .loadwave-effect {
+     min-width: 23vw;
+     min-height: 40vh;
+     border: none;
+     margin: auto;
+     overflow: hidden;
+ }
+
+ .frame.loadwave .loadwave-data {
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     width: 90%;
+     transform: translate(-50%, -50%);
+     display: inline-block;
+     color: var(--color-black);
+     text-align: center;
+     overflow: hidden;
+ }
+
+ .frame.loadwave .loadwave-data strong,
+ .frame.ready .loadwave-data strong {
+     font-size: 200%;
+ }
+
+ .frame.loadwave .loadwave-data span,
+ .frame.ready .loadwave-data span {
+     font-size: 120%;
+ }
+
+ .frame.loadwave .loadwave-layer {
+     left: -50%;
+     right: 50%;
+     background: var(--main-alpha-4);
+     transform-origin: center center;
+     animation: rotates 8s linear infinite both;
+     position: absolute;
+     top: calc(100% - var(--loadwave-value) * 1%);
+     width: var(--loadwave-layer-size);
+     height: var(--loadwave-layer-size);
+     border-radius: calc(var(--loadwave-layer-size) / 2.5);
+ }
+
+ .frame.loadwave .loadwave-layer:nth-child(2) {
+     background: var(--main-alpha-2);
+     transform: rotate(90deg);
+ }
+
+ @keyframes wave {
+
+     from,
+     0% {
+         width: 50%;
+         height: 50%;
+         background: var(--main-alpha-4);
+         opacity: 1;
+     }
+
+     30% {
+         opacity: 1;
+     }
+
+     to,
+     100% {
+         width: 150%;
+         height: 150%;
+         background: var(--main-alpha-2);
+         opacity: 0;
+     }
+ }
+
+ @keyframes rotates {
+
+     to,
+     100% {
+         transform: rotate(360deg);
+     }
+ }
+
+ .frame .loadwave-effect,
+ .frame .data {
+     display: none;
+ }
+
+ .frame.loadwave .loadwave-effect,
+ .frame.loadwave .data,
+ .frame.ready .data {
+     display: block;
+ }
+
+ .frame.inferencing .ready,
+ .frame.loadwave .ready,
+ .frame.done .ready {
+     display: none;
+ }
+
+ .ready {
+     display: none;
+     text-align: center;
+ }
+
+ .ready.show {
+     display: block;
+ }
+
+ .ready strong {
+     font-size: 200%;
+ }
+
+ .frame.inferencing .loadwave-data {
+     position: static;
+     display: grid;
+     align-items: center;
+     justify-items: center;
+     width: auto;
+     transform: none;
+ }
+
+ .frame.loadwave .loadwave-data svg {
+     animation: spin 8s linear infinite;
+ }
+
+ .frame.inferncing .loadwave-data svg {
+     display: block;
+     animation: spin 2s linear infinite;
+ }
+
+ #buttons #generate,
+ #buttons.loading #generate {
+     display: none;
+ }
+
+ #buttons.loaded #generate {
+     display: block;
+ }
+
+ #buttons #load {
+     display: block;
+ }
+
+ #buttons.loaded #load {
+     display: none;
+ }
+
+ #error {
+     align-self: center;
+ }
+
+ .error {
+     background-color: var(--pink);
+     color: var(--bg);
+     font-size: 0.9rem;
+     border-radius: 5px;
+     padding: 6px 12px;
+ }
+
+ .v1 {
+     padding: 1rem 40px;
+     border-bottom: 1px solid var(--border);
+ }
+
+ .v9 {
+     padding: 0 40px;
+ }
+
+ #webnnstatus {
+     text-align: right;
+     font-size: 0.9rem;
+     margin-top: 6px;
+ }
+
+ #webnnstatus #circle {
+     width: 8px;
+     height: 8px;
+     border-radius: 10px;
+     display: inline-block;
+     margin-bottom: 0px;
+ }
+
+ #webnnstatus.green {
+     color: var(--font);
+ }
+
+ #webnnstatus.red {
+     background-color: var(--pink);
+     color: var(--bg);
+     border-radius: 5px;
+     margin-bottom: 5px;
+     padding: 4px 12px;
+ }
+
+ #webnnstatus.green #circle {
+     background-color: var(--green);
+ }
+
+ #webnnstatus.red #circle {
+     background-color: var(--bg);
+ }
+
+ #versions {
+     font-size: 0.9rem;
+     display: block;
+     text-align: right;
+ }
+
+ #versions a {
+     color: var(--font);
+     text-decoration: underline var(--border);
+ }
+
+ #versions a:hover {
+     color: var(--green);
+     text-decoration: underline;
+ }
+
+ #versions a:hover svg path {
+     fill: var(--green);
+ }
+
+ #data {
+     align-self: flex-start;
+     font-size: 0.9rem;
+ }
+
+ #data tr:first-child th:first-child {
+     border-top-left-radius: 5px;
+ }
+
+ #data tr:first-child th:last-child {
+     border-top-right-radius: 5px;
+ }
+
+ #data tr:last-child td:first-child {
+     border-bottom-left-radius: 5px;
+ }
+
+ #data #runTotal4 {
+     border-bottom-right-radius: 5px;
+ }
+
+ #data table {
+     text-align: center;
+     margin: 0;
+     border-spacing: 0;
+     font-size: 0.9rem;
+     width: 100%;
+ }
+
+ #data div {
+     margin-top: 6px;
+     text-align: right;
+ }
+
+ #tdTurbo,
+ #textEncoder,
+ #unet,
+ #vae,
+ #sc {
+     border-left: 1px solid var(--border);
+ }
+
+ #data tr th,
+ #data tr td {
+     text-align: center;
+     border-bottom: 1px solid var(--border);
+     border-right: 1px solid var(--border);
+ }
+
+ #data tr th {
+     font-weight: 600;
+     padding: 3px 8px;
+     border-top: 1px solid var(--border);
+ }
+
+ #data tr td {
+     padding: 3px 8px;
+ }
+
+ #data tr:nth-child(odd) {
+     background-color: transparent;
+ }
+
+ #data tr:nth-child(even) {
+     background-color: var(--bg);
+ }
+
+ #data tr:hover th:hover,
+ #data tr td:hover {
+     background-color: var(--main-dark);
+     color: var(--bg);
+ }
+
+ .hide {
+     display: none;
+ }
+
+ .show {
+     display: block;
+ }
+
+ /* Largest devices such as desktops (1280px) */
+ @media only screen and (max-width: 80em) {}
+
+ /* Large devices such as laptops (1024px) */
+ @media only screen and (max-width: 64em) {
+     .grid-4 {
+         grid-template-columns: 1fr 1fr;
+         grid-template-rows: 1fr 1fr;
+     }
+
+     .grid-2 {
+         grid-template-columns: 1fr;
+         grid-template-rows: 1fr 1fr;
+         row-gap: 10px;
+     }
+
+     .button-group {
+         max-width: 80%;
+     }
+
+     #data_area {
+         height: auto;
+     }
+ }
+
+ @media only screen and (max-width: 718px) {
+     .grid-4 {
+         grid-template-columns: 1fr 1fr;
+         grid-template-rows: 1fr 1fr;
+     }
+
+     .grid-2 {
+         grid-template-columns: 1fr;
+         grid-template-rows: 1fr 1fr;
+         row-gap: 10px;
+     }
+
+     .button-group {
+         max-width: 100%;
+     }
+
+     #data_area {
+         height: auto;
+     }
+
+     #image_area {
+         margin: 10px auto 10px auto;
+         min-height: auto;
+     }
+
+     .v1 {
+         padding: 1rem;
+     }
+
+     .v9 {
+         padding: 1rem;
+     }
+
+     .footerinfo {
+         margin-bottom: 0;
+     }
+
+     h1 {
+         font-size: 0.9rem;
+     }
+ }
+
+ @media only screen and (max-width: 40em) {
+     .grid-2 {
+         grid-template-columns: 1fr;
+         grid-template-rows: 1fr 1fr;
+         row-gap: 10px;
+     }
+
+     .grid-4 {
+         grid-template-columns: 1fr;
+         grid-template-rows: 1fr 1fr 1fr 1fr;
+     }
+
+     .button-group {
+         max-width: 100%;
+     }
+
+     #data_area {
+         height: auto;
+     }
+
+     #image_area {
+         margin: 10px auto 10px auto;
+         min-height: auto;
+     }
+
+     #data table {
+         font-size: 0.38rem;
+     }
+
+     .v1 {
+         padding: 1rem;
+     }
+
+     .v9 {
+         padding: 1rem;
+     }
+
+     .mt-1 {
+         margin-top: 3rem;
+     }
+
+     .footerinfo {
+         margin-bottom: 0;
+     }
+
+     #data.footerinfo {
+         display: none;
+     }
+
+     h1 {
+         font-size: 0.9rem;
+     }
+ }
\ No newline at end of file
diff --git a/demos/segment-anything/index.html b/demos/segment-anything/index.html
index 4e6d261..4bb10f0 100644
--- a/demos/segment-anything/index.html
+++ b/demos/segment-anything/index.html
@@ -1,223 +1,139 @@
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <title>WebNN Developer Preview - Segment Anything</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
-        <link rel="stylesheet" href="./static/main.css" />
-        <script src="./index.js" type="module"></script>
-    </head>
 
-    <body>
-        <div class="grid-1 p1 v1">
-            <h1 class="title">
-                <div id="back">
-                    <a href="../../">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                            <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
-                        </svg>
-                    </a>
-                </div>
-                <svg
-                    id="webnn-logo"
-                    width="734"
-                    height="146"
-                    viewBox="0 0 734 146"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
-                        fill="#333333"
-                        class="_logo_n1"
-                    />
-                    <path
-                        d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5228 393.523 86 388 86H243C237.477 86 233 81.5228 233 76V18Z"
-                        fill="#B2B2B2"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
-                        fill="white"
-                    />
-                    <path d="M15 66L33 45" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M63 59L44 44" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M77 61L103 55" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path
-                        d="M126 16L119 39"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M151 41L127 47"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M161 50L156 85"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M163 38L193 83"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M162 92L188 92"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M148 98L119 119"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M101 90L155 132"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M183 126L155 132"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M194 117L197 105"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M195 131L203 142"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M123 60L149 87"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path d="M67 71L55 103" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M27 72L87 88" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M79 36L97 79" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M120 11L88 21" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <circle cx="38.5" cy="38.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="69.5" cy="63.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="127.5" cy="8.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="154.5" cy="92.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="112.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="190.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="200" cy="93" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
-                    <circle cx="115" cy="51" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
-                    <circle cx="15" cy="68" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="75" cy="25" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="163" cy="38" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="101" cy="90" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="156" cy="131" r="15" fill="#666666" class="_logo_n1" />
-                </svg>
-                <span id="title">WebNN</span> Segment Anything
-            </h1>
+<head>
+    <meta charset="utf-8" />
+    <title>WebNN Developer Preview - Segment Anything</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
+    <link rel="stylesheet" href="../../assets/css/style.css" />
+    <link rel="stylesheet" href="./static/main.css" />
+    <script src="./index.js" type="module"></script>
+</head>
+
+<body>
+    <div class="grid-1 p1 v1">
+        <h1 class="title">
+            <div id="back">
+                <a href="../../">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                        <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+                    </svg>
+                </a>
+            </div>
+            <svg id="webnn-logo" width="734" height="146" viewBox="0 0 734 146" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
+                    fill="#333333" class="_logo_n1" />
+                <path
+                    d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5228 393.523 86 388 86H243C237.477 86 233 81.5228 233 76V18Z"
+                    fill="#B2B2B2" class="_logo_n2" />
+                <path
+                    d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
+                    fill="white" />
+                <path d="M15 66L33 45" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M63 59L44 44" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M77 61L103 55" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M126 16L119 39" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M151 41L127 47" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M161 50L156 85" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M163 38L193 83" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M162 92L188 92" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M148 98L119 119" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M101 90L155 132" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M183 126L155 132" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M194 117L197 105" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M195 131L203 142" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M123 60L149 87" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M67 71L55 103" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M27 72L87 88" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M79 36L97 79" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M120 11L88 21" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <circle cx="38.5" cy="38.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="69.5" cy="63.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="127.5" cy="8.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="154.5" cy="92.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="112.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="190.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="200" cy="93" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
+                <circle cx="115" cy="51" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
+                <circle cx="15" cy="68" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="75" cy="25" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="163" cy="38" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="101" cy="90" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="156" cy="131" r="15" fill="#666666" class="_logo_n1" />
+            </svg>
+            <span id="title">WebNN</span> Segment Anything
+        </h1>
+    </div>
+    <div class="v9">
+        <div style="display: none">
+            <img id="original-image" src="EgyptianCat.png" />
         </div>
-        <div class="v9">
-            <div style="display: none">
-                <img id="original-image" src="EgyptianCat.png" />
+
+        <div class="grid-2 magicpattern">
+            <div id="placeholder">
+                <div>
+                    <div id="progress-info"></div>
+                    <div class="progress progress-striped">
+                        <div class="progress-bar" id="progress-bar"></div>
+                    </div>
+                </div>
+                <canvas id="img_canvas"></canvas>
             </div>
 
-            <div class="grid-2 magicpattern">
-                <div id="placeholder">
+            <div class="right">
+                <div class="data">
                     <div>
-                        <div id="progress-info"></div>
-                        <div class="progress progress-striped">
-                            <div class="progress-bar" id="progress-bar"></div>
-                        </div>
+                        <strong id="decoder_latency"></strong>
+                        <span id="unit"></span>
                     </div>
-                    <canvas id="img_canvas"></canvas>
+                    <div id="sam-decoder-indicator" class="title none">SAM Decoder · FP16</div>
                 </div>
 
-                <div class="right">
-                    <div class="data">
-                        <div>
-                            <strong id="decoder_latency"></strong>
-                            <span id="unit"></span>
-                        </div>
-                        <div id="sam-decoder-indicator" class="title none">SAM Decoder · FP16</div>
+                <div id="action-bar" class="disable">
+                    <div class="form-group file-upload">
+                        <label for="file-in" class="file-upload_label" title="Upload image">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                <path
+                                    d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
+                            </svg>
+                        </label>
+                        <input class="file-upload_input" title="Upload Image" type="file" id="file-in" name="file-in"
+                            accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*" disabled />
                     </div>
-
-                    <div id="action-bar" class="disable">
-                        <div class="form-group file-upload">
-                            <label for="file-in" class="file-upload_label" title="Upload image">
-                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                                    <path
-                                        d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"
-                                    />
-                                </svg>
-                            </label>
-                            <input
-                                class="file-upload_input"
-                                title="Upload Image"
-                                type="file"
-                                id="file-in"
-                                name="file-in"
-                                accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*"
-                                disabled
-                            />
-                        </div>
-                        <div class="form-group">
-                            <button id="cut-button" type="button" class="btn btn-primary" title="Cut" disabled>
-                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                                    <path
-                                        d="M760-120 480-400l-94 94q8 15 11 32t3 34q0 66-47 113T240-80q-66 0-113-47T80-240q0-66 47-113t113-47q17 0 34 3t32 11l94-94-94-94q-15 8-32 11t-34 3q-66 0-113-47T80-720q0-66 47-113t113-47q66 0 113 47t47 113q0 17-3 34t-11 32l494 494v40H760ZM600-520l-80-80 240-240h120v40L600-520ZM240-640q33 0 56.5-23.5T320-720q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720q0 33 23.5 56.5T240-640Zm240 180q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM240-160q33 0 56.5-23.5T320-240q0-33-23.5-56.5T240-320q-33 0-56.5 23.5T160-240q0 33 23.5 56.5T240-160Z"
-                                    />
-                                </svg>
-                            </button>
-                            <button id="clear-button" type="button" class="btn btn-primary" title="Clear" disabled>
-                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                                    <path
-                                        d="M120-600v-240h80v134q50-62 122.5-98T480-840q118 0 210.5 67T820-600h-87q-34-72-101-116t-152-44q-57 0-107.5 21T284-680h76v80H120Zm120 360h480L570-440 450-280l-90-120-120 160ZM200-80q-33 0-56.5-23.5T120-160v-320h80v320h560v-320h80v320q0 33-23.5 56.5T760-80H200Z"
-                                    />
-                                </svg>
-                            </button>
-                        </div>
+                    <div class="form-group">
+                        <button id="cut-button" type="button" class="btn btn-primary" title="Cut" disabled>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                <path
+                                    d="M760-120 480-400l-94 94q8 15 11 32t3 34q0 66-47 113T240-80q-66 0-113-47T80-240q0-66 47-113t113-47q17 0 34 3t32 11l94-94-94-94q-15 8-32 11t-34 3q-66 0-113-47T80-720q0-66 47-113t113-47q66 0 113 47t47 113q0 17-3 34t-11 32l494 494v40H760ZM600-520l-80-80 240-240h120v40L600-520ZM240-640q33 0 56.5-23.5T320-720q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720q0 33 23.5 56.5T240-640Zm240 180q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM240-160q33 0 56.5-23.5T320-240q0-33-23.5-56.5T240-320q-33 0-56.5 23.5T160-240q0 33 23.5 56.5T240-160Z" />
+                            </svg>
+                        </button>
+                        <button id="clear-button" type="button" class="btn btn-primary" title="Clear" disabled>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                <path
+                                    d="M120-600v-240h80v134q50-62 122.5-98T480-840q118 0 210.5 67T820-600h-87q-34-72-101-116t-152-44q-57 0-107.5 21T284-680h76v80H120Zm120 360h480L570-440 450-280l-90-120-120 160ZM200-80q-33 0-56.5-23.5T120-160v-320h80v320h560v-320h80v320q0 33-23.5 56.5T760-80H200Z" />
+                            </svg>
+                        </button>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div id="status" class="log-output"></div>
+        <div id="log" class="log-output"></div>
 
-            <div class="footerinfo">
-                <div id="webnnstatus">
-                    <span id="circle"></span> <span id="info">WebNN</span> <span id="backends"></span>
-                </div>
-                <div id="versions">
-                    <div id="chromiumversion"></div>
-                    <div id="ortversion"></div>
-                </div>
+        <div class="footerinfo">
+            <div id="webnnstatus">
+                <span id="circle"></span> <span id="info">WebNN</span> <span id="backends"></span>
+            </div>
+            <div id="versions">
+                <div id="chromiumversion"></div>
+                <div id="ortversion"></div>
             </div>
         </div>
-    </body>
-</html>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demos/segment-anything/static/main.css b/demos/segment-anything/static/main.css
index 44a65d9..0974a8a 100644
--- a/demos/segment-anything/static/main.css
+++ b/demos/segment-anything/static/main.css
@@ -1,529 +1,396 @@
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 300;
-    src: url("./fonts/archivo/archivo-v19-latin-300.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 400;
-    src: url("./fonts/archivo/archivo-v19-latin-regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 600;
-    src: url("./fonts/archivo/archivo-v19-latin-600.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 700;
-    src: url("./fonts/archivo/archivo-v19-latin-700.woff2") format("woff2");
-}
-
-:root {
-    --bg: rgba(255, 255, 255, 1);
-    --black-02: rgba(240, 240, 240, 0.2);
-    --font: rgba(45, 45, 45, 1);
-    --font-weak: rgba(0, 0, 0, 0.6);
-    --disabled: rgba(245, 245, 245, 0.2);
-    --bg-2: rgb(230, 230, 230, 0.2);
-    --bg-2h: rgb(230, 230, 230, 0.4);
-    --bg-3: rgba(200, 200, 200, 0.2);
-    --bg-btn: rgba(255, 255, 255, 1);
-    --main-01: rgba(39, 94, 254, 0.1);
-    --main-001: rgba(39, 94, 254, 0.01);
-    --main-005: rgba(39, 94, 254, 0.05);
-    --main-05: rgba(39, 94, 254, 0.5);
-    --main-06: rgba(39, 94, 254, 0.6);
-    --scroll: rgb(0, 0, 0, 0.1);
-    --scroll-2: rgb(0, 0, 0, 0.2);
-    --main: rgb(39, 94, 254);
-    --main-dark: rgb(24, 79, 238, 1);
-    --main-darker: rgb(20, 74, 204, 1);
-    --border: rgb(230, 230, 230, 1);
-    --green: rgba(1, 212, 73, 1);
-    --pink: rgb(255, 0, 129);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-    background-color: var(--bg);
-    color: var(--font);
-    font-size: 16px;
-}
-
-body {
-    scrollbar-width: auto;
-    scrollbar-color: var(--main-01), transparent;
-}
-
-#placeholder {
-    align-content: center;
-    height: 480px;
-    width: 480px;
-}
-
-#placeholder.none,
-#placeholder .none {
-    display: none;
-}
-
-#sam-decoder-indicator {
-    padding: 4px 18px;
-    background-color: var(--pink);
-    color: var(--bg);
-    transform: skew(-15deg);
-    border-radius: 5px;
-}
-
-#sam-decoder-indicator.none {
-    display: none;
-}
-
-#webnn-logo {
-    width: 150px;
-    height: 30px;
-    display: inline-block;
-    margin: 0 6px 0 10px;
-}
-
-.v1:hover #webnn-logo path._logo_n1,
-.v1:hover #webnn-logo circle._logo_n1 {
-    fill: #4777c0;
-}
-
-.v1:hover #webnn-logo path._logo_n2,
-.v1:hover #webnn-logo circle._logo_n2 {
-    stroke: #61bafb;
-    fill: #61bafb;
-}
-
-.v1:hover #webnn-logo circle._logo_n3 {
-    stroke: #61bafb;
-}
-
-#webnnstatus a#webnn_na {
-    color: var(--pink);
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: 3px;
-    padding: 1px 4px;
-    text-decoration: none;
-    display: inline-block;
-    margin-top: 0px;
-}
-
-#webnnstatus a#webnn_na:hover {
-    background-color: rgba(0, 0, 0, 0.4);
-    color: var(--bg);
-    border: 0px solid white;
-    text-decoration: none;
-}
-
-.log-output::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-.log-output::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-.log-output::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-.log-output:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
-textarea::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-textarea::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-textarea::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-textarea:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
-h1 {
-    padding: 0 0 0 0;
-    font-weight: 700;
-    font-size: 1.8rem;
-    margin: 0;
-}
-
-h1.title {
-    display: flex;
-    align-items: center;
-}
-
-h1.title span {
-    margin-right: 5px;
-}
-
-#back {
-    width: 24px;
-    height: 24px;
-    border-radius: 48px;
-    border: 1px solid var(--main-05);
-    display: grid;
-    align-items: center;
-    justify-items: center;
-}
-
-#back svg {
-    width: 20px;
-    height: 20px;
-}
-
-#back svg path {
-    fill: var(--main-05);
-}
-
-#back:hover {
-    border: 1px solid var(--main);
-    background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
-    color: var(--bg);
-    box-shadow: 0 3px 15px -1px var(--main-05);
-    cursor: pointer;
-}
-
-#back:hover svg path {
-    fill: var(--bg);
-}
-
-.progress {
-    padding: 1px;
-    background-color: var(--main-005);
-    border-radius: 10px;
-}
-
-#progress-info {
-    text-align: center;
-    font-size: 0.9rem;
-    margin-bottom: 0.2rem;
-}
-
-.progress-bar {
-    height: 8px;
-    border-radius: 10px;
-    width: 0%;
-    transition: 0.4s linear;
-    transition-property: width, background-color;
-}
-
-.progress-striped .progress-bar {
-    background-color: var(--main-05);
-    background-image: linear-gradient(
-        45deg,
-        var(--main-06) 25%,
-        transparent 25%,
-        transparent 50%,
-        var(--main-06) 50%,
-        var(--main-06) 75%,
-        transparent 75%,
-        transparent
-    );
-}
-
-.right {
-    align-self: center;
-    display: flex;
-    flex-direction: column;
-}
-
-.file-upload {
-    position: relative;
-    display: inline-block;
-}
-
-.file-upload_label {
-    display: inline-block;
-}
-
-.file-upload_input {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    font-size: 1;
-    width: 0;
-    height: 100%;
-    opacity: 0;
-}
-
-.form-group {
-    display: inline-block;
-}
-
-#action-bar {
-    margin: 2rem auto 0 auto;
-}
-
-.form-group button,
-.form-group label {
-    display: inline-block;
-    border: 1px solid var(--border);
-    padding: 1rem;
-    margin: 0.5rem;
-    border-radius: 50%;
-    background-color: transparent;
-}
-
-.form-group button svg path,
-.form-group label svg path {
-    fill: var(--font);
-}
-
-.form-group button:hover,
-.form-group label:hover {
-    color: var(--main);
-    border: 1px solid var(--main);
-    background-color: var(--main-001);
-    cursor: pointer;
-}
-
-.form-group button:hover svg path,
-.form-group label:hover svg path {
-    fill: var(--main);
-}
-
-#action-bar.disable .form-group button svg path,
-#action-bar.disable .form-group label svg path {
-    fill: var(--border);
-}
-
-#action-bar.disable .form-group button:hover,
-#action-bar.disable .form-group label:hover {
-    border: 1px solid var(--border);
-}
-
-.log-output {
-    height: 18vh;
-    padding: 10px 10px;
-    background-color: var(--bg-2);
-    border: 1px solid var(--border);
-    font-size: 0.9rem;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column-reverse;
-    overflow-y: scroll;
-}
-
-.log-output:hover {
-    border: 1px solid var(--main);
-    background-color: var(--bg-btn);
-}
-
-.data {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    padding: 0;
-}
-
-.data strong {
-    font-size: 600%;
-}
-
-.data span {
-    font-size: 228%;
-}
-
-.data .title {
-    display: block;
-}
-
-#error {
-    align-self: center;
-}
-
-.error {
-    background-color: var(--pink);
-    color: var(--bg);
-    font-size: 0.9rem;
-    border-radius: 5px;
-    padding: 6px 12px;
-}
-
-.v1 {
-    padding: 1rem 40px;
-    border-bottom: 1px solid var(--border);
-}
-
-.v9 {
-    padding: 0 40px;
-}
-
-#webnnstatus {
-    text-align: right;
-    font-size: 0.9rem;
-    margin-top: 10px;
-}
-
-#webnnstatus #circle {
-    width: 8px;
-    height: 8px;
-    border-radius: 10px;
-    display: inline-block;
-    margin-bottom: 1px;
-}
-
-#webnnstatus.green {
-    color: var(--font);
-}
-
-#webnnstatus.red {
-    background-color: var(--pink);
-    color: var(--bg);
-    border-radius: 5px;
-    margin-bottom: 5px;
-    padding: 4px 12px;
-}
-
-#webnnstatus.green #circle {
-    background-color: var(--green);
-}
-
-#webnnstatus.red #circle {
-    background-color: var(--bg);
-}
-
-#versions {
-    font-size: 0.9rem;
-    display: block;
-    text-align: right;
-}
-
-#versions a {
-    color: var(--font);
-    text-decoration: underline var(--border);
-}
-
-#versions a:hover {
-    color: var(--green);
-    text-decoration: underline;
-}
-
-#versions a:hover svg path {
-    fill: var(--green);
-}
-
-#webnnstatus a {
-    color: var(--main);
-    text-decoration: none;
-}
-
-#webnnstatus a:hover {
-    color: var(--green);
-    text-decoration: underline;
-}
-
-#webnnstatus #circle.none {
-    display: none;
-}
-
-.magicpattern {
-    width: 100%;
-    background-size: cover;
-    background-position: center center;
-    background-repeat: repeat;
-    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill=%22%23fff%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cellipse cx=%22212.191%22 cy=%2236.506%22 rx=%221.837%22 ry=%221.465%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.394%22%2F%3E%3Cellipse cx=%22314.402%22 cy=%2255.228%22 rx=%221.53%22 ry=%221.155%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.185%22%2F%3E%3Cellipse cx=%22655.849%22 cy=%226.14%22 rx=%221.168%22 ry=%221.108%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.598%22%2F%3E%3Cellipse cx=%22832.256%22 cy=%2237.836%22 rx=%222.151%22 ry=%221.772%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.378%22%2F%3E%3Cellipse cx=%221060.076%22 cy=%2250.941%22 rx=%221.742%22 ry=%221.275%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.085%22%2F%3E%3Cellipse cx=%221182.118%22 cy=%2214.447%22 rx=%222.084%22 ry=%221.707%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.122%22%2F%3E%3Cellipse cx=%221386.414%22 cy=%2247.602%22 rx=%221.714%22 ry=%221.276%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.134%22%2F%3E%3Cellipse cx=%221717.148%22 cy=%223.635%22 rx=%221.566%22 ry=%221.519%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.262%22%2F%3E%3Cellipse cx=%221947.463%22 cy=%225.78%22 rx=%221.433%22 ry=%221.283%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.712%22%2F%3E%3Cellipse cx=%22104.111%22 cy=%22115.001%22 rx=%221.702%22 ry=%221.34%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.506%22%2F%3E%3Cellipse cx=%22271.934%22 cy=%2287.51%22 rx=%221.988%22 ry=%221.717%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.065%22%2F%3E%3Cellipse cx=%22502.039%22 cy=%2268.621%22 rx=%221.559%22 ry=%221.216%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.377%22%2F%3E%3Cellipse cx=%22797.111%22 cy=%2270.457%22 rx=%221.362%22 ry=%221.291%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.425%22%2F%3E%3Cellipse cx=%221093.177%22 cy=%22119.238%22 rx=%221.517%22 ry=%221.168%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.199%22%2F%3E%3Cellipse cx=%221297.705%22 cy=%2295.435%22 rx=%222.146%22 ry=%221.847%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.076%22%2F%3E%3Cellipse cx=%221354.263%22 cy=%2296.086%22 rx=%221.459%22 ry=%221.446%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.245%22%2F%3E%3Cellipse cx=%221557.671%22 cy=%2268.518%22 rx=%221.487%22 ry=%221.205%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.019%22%2F%3E%3Cellipse cx=%221813.598%22 cy=%22119.14%22 rx=%222.039%22 ry=%221.864%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.815%22%2F%3E%3Cellipse cx=%22194.381%22 cy=%22163.537%22 rx=%221.603%22 ry=%221.588%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.014%22%2F%3E%3Cellipse cx=%22242.047%22 cy=%22156.309%22 rx=%221.961%22 ry=%221.693%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.693%22%2F%3E%3Cellipse cx=%22571.192%22 cy=%22135.71%22 rx=%221.469%22 ry=%221.303%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.834%22%2F%3E%3Cellipse cx=%22702.167%22 cy=%22177.14%22 rx=%221.658%22 ry=%221.646%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.65%22%2F%3E%3Cellipse cx=%221057.919%22 cy=%22153.177%22 rx=%222.256%22 ry=%221.898%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.12%22%2F%3E%3Cellipse cx=%221301.304%22 cy=%22143.252%22 rx=%222.212%22 ry=%221.927%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.073%22%2F%3E%3Cellipse cx=%221528.244%22 cy=%22178.971%22 rx=%222.243%22 ry=%221.747%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.365%22%2F%3E%3Cellipse cx=%221773.336%22 cy=%22168.431%22 rx=%221.862%22 ry=%221.517%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.288%22%2F%3E%3Cellipse cx=%221914.009%22 cy=%22153.559%22 rx=%221.784%22 ry=%221.421%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.695%22%2F%3E%3Cellipse cx=%2283.381%22 cy=%22204.54%22 rx=%221.79%22 ry=%221.516%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.298%22%2F%3E%3Cellipse cx=%22314.309%22 cy=%22220.4%22 rx=%222.059%22 ry=%221.895%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.392%22%2F%3E%3Cellipse cx=%22551.586%22 cy=%22231.644%22 rx=%221.557%22 ry=%221.109%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.02%22%2F%3E%3Cellipse cx=%22708.132%22 cy=%22229.766%22 rx=%221.617%22 ry=%221.171%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.1%22%2F%3E%3Cellipse cx=%221066.994%22 cy=%22209.389%22 rx=%222.039%22 ry=%221.697%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.105%22%2F%3E%3Cellipse cx=%221287.847%22 cy=%22214.982%22 rx=%221.95%22 ry=%221.658%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.098%22%2F%3E%3Cellipse cx=%221420.168%22 cy=%22210.358%22 rx=%221.418%22 ry=%221.342%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.056%22%2F%3E%3Cellipse cx=%221587.486%22 cy=%22243.917%22 rx=%221.792%22 ry=%221.599%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.265%22%2F%3E%3Cellipse cx=%221912.49%22 cy=%22217.252%22 rx=%221.684%22 ry=%221.226%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.224%22%2F%3E%3Cellipse cx=%22199.052%22 cy=%22271.947%22 rx=%221.762%22 ry=%221.313%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.167%22%2F%3E%3Cellipse cx=%22344.665%22 cy=%22258.362%22 rx=%222.194%22 ry=%221.789%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.15%22%2F%3E%3Cellipse cx=%22463.17%22 cy=%22290.78%22 rx=%221.275%22 ry=%221.066%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.129%22%2F%3E%3Cellipse cx=%22730.85%22 cy=%22269.633%22 rx=%221.46%22 ry=%221.126%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.115%22%2F%3E%3Cellipse cx=%221032.458%22 cy=%22290.763%22 rx=%222.396%22 ry=%221.955%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.379%22%2F%3E%3Cellipse cx=%221118.705%22 cy=%22277.673%22 rx=%221.601%22 ry=%221.442%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.507%22%2F%3E%3Cellipse cx=%221430.273%22 cy=%22269.46%22 rx=%221.693%22 ry=%221.203%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.175%22%2F%3E%3Cellipse cx=%221684.963%22 cy=%22263.445%22 rx=%221.814%22 ry=%221.659%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.57%22%2F%3E%3Cellipse cx=%221809.894%22 cy=%22250.016%22 rx=%221.726%22 ry=%221.561%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.868%22%2F%3E%3Cellipse cx=%22142.593%22 cy=%22336.436%22 rx=%221.146%22 ry=%221.135%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.424%22%2F%3E%3Cellipse cx=%22380.915%22 cy=%22316.923%22 rx=%221.506%22 ry=%221.252%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.049%22%2F%3E%3Cellipse cx=%22618.417%22 cy=%22309.889%22 rx=%222.019%22 ry=%221.793%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.059%22%2F%3E%3Cellipse cx=%22786.653%22 cy=%22337.782%22 rx=%221.871%22 ry=%221.448%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.667%22%2F%3E%3Cellipse cx=%221093.129%22 cy=%22306.41%22 rx=%221.852%22 ry=%221.549%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.477%22%2F%3E%3Cellipse cx=%221202.914%22 cy=%22351.435%22 rx=%221.655%22 ry=%221.588%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.361%22%2F%3E%3Cellipse cx=%221389.511%22 cy=%22365.526%22 rx=%221.681%22 ry=%221.527%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.022%22%2F%3E%3Cellipse cx=%221615.719%22 cy=%22353.595%22 rx=%222.154%22 ry=%221.839%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.069%22%2F%3E%3Cellipse cx=%221814.701%22 cy=%22363.977%22 rx=%221.418%22 ry=%221.186%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.71%22%2F%3E%3Cellipse cx=%2296.056%22 cy=%22386.588%22 rx=%222.287%22 ry=%221.935%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.631%22%2F%3E%3Cellipse cx=%22286.369%22 cy=%22406.256%22 rx=%221.985%22 ry=%221.948%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.357%22%2F%3E%3Cellipse cx=%22618.923%22 cy=%22415.612%22 rx=%221.707%22 ry=%221.366%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.379%22%2F%3E%3Cellipse cx=%22739.614%22 cy=%22421.167%22 rx=%221.626%22 ry=%221.417%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.589%22%2F%3E%3Cellipse cx=%221070.221%22 cy=%22423.128%22 rx=%221.517%22 ry=%221.264%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.68%22%2F%3E%3Cellipse cx=%221206.77%22 cy=%22366.286%22 rx=%221.397%22 ry=%221.327%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.166%22%2F%3E%3Cellipse cx=%221507.904%22 cy=%22401.236%22 rx=%221.823%22 ry=%221.48%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.699%22%2F%3E%3Cellipse cx=%221649.693%22 cy=%22410.706%22 rx=%221.515%22 ry=%221.424%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.089%22%2F%3E%3Cellipse cx=%221808.692%22 cy=%22379.433%22 rx=%221.939%22 ry=%221.513%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.086%22%2F%3E%3Cellipse cx=%22191.994%22 cy=%22451.171%22 rx=%222.354%22 ry=%221.861%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.62%22%2F%3E%3Cellipse cx=%22264.069%22 cy=%22477.313%22 rx=%222.085%22 ry=%221.954%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.729%22%2F%3E%3Cellipse cx=%22463.071%22 cy=%22446.584%22 rx=%221.991%22 ry=%221.81%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.57%22%2F%3E%3Cellipse cx=%22740.5%22 cy=%22451.242%22 rx=%221.426%22 ry=%221.35%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.146%22%2F%3E%3Cellipse cx=%221000.693%22 cy=%22466.532%22 rx=%222.172%22 ry=%221.988%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.357%22%2F%3E%3Cellipse cx=%221180.985%22 cy=%22479.063%22 rx=%221.363%22 ry=%221.212%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.396%22%2F%3E%3Cellipse cx=%221454.524%22 cy=%22444.26%22 rx=%221.224%22 ry=%221.114%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.036%22%2F%3E%3Cellipse cx=%221581.077%22 cy=%22449.746%22 rx=%222.318%22 ry=%221.865%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.08%22%2F%3E%3Cellipse cx=%221904.829%22 cy=%22440.581%22 rx=%221.846%22 ry=%221.724%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.39%22%2F%3E%3Cellipse cx=%22122.185%22 cy=%22546.57%22 rx=%221.175%22 ry=%221.033%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.409%22%2F%3E%3Cellipse cx=%22436.036%22 cy=%22527.473%22 rx=%222.409%22 ry=%221.948%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.465%22%2F%3E%3Cellipse cx=%22649.643%22 cy=%22524.564%22 rx=%221.499%22 ry=%221.009%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.1%22%2F%3E%3Cellipse cx=%22886.672%22 cy=%22517.089%22 rx=%221.509%22 ry=%221.385%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.009%22%2F%3E%3Cellipse cx=%22968.219%22 cy=%22514.47%22 rx=%221.805%22 ry=%221.373%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.657%22%2F%3E%3Cellipse cx=%221307.854%22 cy=%22531.032%22 rx=%222.079%22 ry=%221.891%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.73%22%2F%3E%3Cellipse cx=%221376.913%22 cy=%22512.672%22 rx=%221.388%22 ry=%221.112%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.697%22%2F%3E%3Cellipse cx=%221664.084%22 cy=%22522.561%22 rx=%221.627%22 ry=%221.244%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.588%22%2F%3E%3Cellipse cx=%221952.776%22 cy=%22532.492%22 rx=%221.502%22 ry=%221.076%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.03%22%2F%3E%3Cellipse cx=%2277.536%22 cy=%22582.352%22 rx=%221.573%22 ry=%221.337%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.46%22%2F%3E%3Cellipse cx=%22407.147%22 cy=%22584.018%22 rx=%221.85%22 ry=%221.833%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.284%22%2F%3E%3Cellipse cx=%22624.337%22 cy=%22579.925%22 rx=%221.225%22 ry=%221.138%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.569%22%2F%3E%3Cellipse cx=%22744.133%22 cy=%22550.436%22 rx=%222.024%22 ry=%221.764%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.076%22%2F%3E%3Cellipse cx=%221085.155%22 cy=%22566.879%22 rx=%221.253%22 ry=%221.133%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.273%22%2F%3E%3Cellipse cx=%221256.358%22 cy=%22602.431%22 rx=%222.206%22 ry=%221.937%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.676%22%2F%3E%3Cellipse cx=%221363.584%22 cy=%22569.619%22 rx=%221.976%22 ry=%221.85%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.519%22%2F%3E%3Cellipse cx=%221640.98%22 cy=%22597.035%22 rx=%221.191%22 ry=%221.015%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.044%22%2F%3E%3Cellipse cx=%221792.549%22 cy=%22605.639%22 rx=%221.746%22 ry=%221.374%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.754%22%2F%3E%3Cellipse cx=%22199.117%22 cy=%22633.596%22 rx=%221.98%22 ry=%221.602%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.584%22%2F%3E%3Cellipse cx=%22366.777%22 cy=%22664.105%22 rx=%221.581%22 ry=%221.133%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.394%22%2F%3E%3Cellipse cx=%22514.884%22 cy=%22616.685%22 rx=%221.147%22 ry=%221.109%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.104%22%2F%3E%3Cellipse cx=%22786.239%22 cy=%22659.114%22 rx=%221.518%22 ry=%221.277%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.828%22%2F%3E%3Cellipse cx=%221071.864%22 cy=%22665.206%22 rx=%221.409%22 ry=%221.265%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.415%22%2F%3E%3Cellipse cx=%221139.576%22 cy=%22667.447%22 rx=%221.844%22 ry=%221.667%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.587%22%2F%3E%3Cellipse cx=%221380.726%22 cy=%22622.073%22 rx=%221.975%22 ry=%221.653%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.919%22%2F%3E%3Cellipse cx=%221580.471%22 cy=%22665.779%22 rx=%221.335%22 ry=%221.318%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.16%22%2F%3E%3Cellipse cx=%221997.277%22 cy=%22631.534%22 rx=%221.665%22 ry=%221.544%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.6%22%2F%3E%3Cellipse cx=%2293.548%22 cy=%22698.204%22 rx=%221.613%22 ry=%221.471%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.158%22%2F%3E%3Cellipse cx=%22223.937%22 cy=%22678.106%22 rx=%222.356%22 ry=%221.915%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.775%22%2F%3E%3Cellipse cx=%22646.023%22 cy=%22672.912%22 rx=%222.279%22 ry=%221.783%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.228%22%2F%3E%3Cellipse cx=%22726.976%22 cy=%22727.962%22 rx=%222.133%22 ry=%221.667%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.725%22%2F%3E%3Cellipse cx=%22944.441%22 cy=%22700.955%22 rx=%221.438%22 ry=%221.116%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.18%22%2F%3E%3Cellipse cx=%221251.017%22 cy=%22673.833%22 rx=%221.688%22 ry=%221.686%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.101%22%2F%3E%3Cellipse cx=%221435.333%22 cy=%22715.661%22 rx=%221.41%22 ry=%221.032%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.1%22%2F%3E%3Cellipse cx=%221723.105%22 cy=%22683.002%22 rx=%221.275%22 ry=%221.014%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.612%22%2F%3E%3Cellipse cx=%221867.592%22 cy=%22701.535%22 rx=%221.565%22 ry=%221.182%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.773%22%2F%3E%3Cellipse cx=%2220.166%22 cy=%22734.981%22 rx=%221.462%22 ry=%221.388%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.14%22%2F%3E%3Cellipse cx=%22248.969%22 cy=%22749.676%22 rx=%221.309%22 ry=%221.155%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.394%22%2F%3E%3Cellipse cx=%22504.076%22 cy=%22782.879%22 rx=%221.667%22 ry=%221.403%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.498%22%2F%3E%3Cellipse cx=%22686.247%22 cy=%22743.015%22 rx=%221.23%22 ry=%221.08%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.607%22%2F%3E%3Cellipse cx=%221001.791%22 cy=%22739.711%22 rx=%221.506%22 ry=%221.039%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.261%22%2F%3E%3Cellipse cx=%221315.816%22 cy=%22791.286%22 rx=%221.205%22 ry=%221.002%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.582%22%2F%3E%3Cellipse cx=%221403.568%22 cy=%22784.948%22 rx=%221.18%22 ry=%221.146%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.329%22%2F%3E%3Cellipse cx=%221751.589%22 cy=%22742.243%22 rx=%221.643%22 ry=%221.569%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.877%22%2F%3E%3Cellipse cx=%221802.497%22 cy=%22783.266%22 rx=%221.332%22 ry=%221.319%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.411%22%2F%3E%3Cellipse cx=%2236.788%22 cy=%22826.495%22 rx=%221.561%22 ry=%221.539%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.123%22%2F%3E%3Cellipse cx=%22443.108%22 cy=%22814.887%22 rx=%221.476%22 ry=%221.168%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.115%22%2F%3E%3Cellipse cx=%22572.957%22 cy=%22830.638%22 rx=%221.858%22 ry=%221.621%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.795%22%2F%3E%3Cellipse cx=%22799.711%22 cy=%22793.973%22 rx=%222.058%22 ry=%221.929%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.624%22%2F%3E%3Cellipse cx=%22971.467%22 cy=%22796.517%22 rx=%221.421%22 ry=%221.173%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.483%22%2F%3E%3Cellipse cx=%221217.14%22 cy=%22796.179%22 rx=%221.244%22 ry=%221.226%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.784%22%2F%3E%3Cellipse cx=%221534.785%22 cy=%22813.617%22 rx=%221.684%22 ry=%221.548%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.63%22%2F%3E%3Cellipse cx=%221706.386%22 cy=%22816.374%22 rx=%221.515%22 ry=%221.306%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.193%22%2F%3E%3Cellipse cx=%221922.332%22 cy=%22847.491%22 rx=%221.191%22 ry=%221.13%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.375%22%2F%3E%3Cellipse cx=%2291.675%22 cy=%22871.324%22 rx=%222.037%22 ry=%221.885%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.378%22%2F%3E%3Cellipse cx=%22326.714%22 cy=%22908.773%22 rx=%221.779%22 ry=%221.73%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.42%22%2F%3E%3Cellipse cx=%22493.524%22 cy=%22864.023%22 rx=%221.743%22 ry=%221.456%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.707%22%2F%3E%3Cellipse cx=%22788.422%22 cy=%22865.913%22 rx=%221.498%22 ry=%221.256%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.621%22%2F%3E%3Cellipse cx=%22919.944%22 cy=%22886.151%22 rx=%222.282%22 ry=%221.843%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.792%22%2F%3E%3Cellipse cx=%221110.393%22 cy=%22872.613%22 rx=%221.535%22 ry=%221.287%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.802%22%2F%3E%3Cellipse cx=%221412.936%22 cy=%22864.837%22 rx=%222.236%22 ry=%221.848%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.163%22%2F%3E%3Cellipse cx=%221577.145%22 cy=%22899.332%22 rx=%222.333%22 ry=%221.86%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.684%22%2F%3E%3Cellipse cx=%221838.741%22 cy=%22870.88%22 rx=%222.025%22 ry=%221.716%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.443%22%2F%3E%3Cellipse cx=%22109.118%22 cy=%22972.43%22 rx=%221.405%22 ry=%221.099%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.049%22%2F%3E%3Cellipse cx=%22364.278%22 cy=%22934.843%22 rx=%222.101%22 ry=%221.631%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.665%22%2F%3E%3Cellipse cx=%22577.343%22 cy=%22933.407%22 rx=%221.784%22 ry=%221.774%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.508%22%2F%3E%3Cellipse cx=%22857.704%22 cy=%22934.735%22 rx=%221.895%22 ry=%221.879%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.238%22%2F%3E%3Cellipse cx=%221057.57%22 cy=%22966.553%22 rx=%221.719%22 ry=%221.427%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.51%22%2F%3E%3Cellipse cx=%221322.497%22 cy=%22943.176%22 rx=%221.434%22 ry=%221.365%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.212%22%2F%3E%3Cellipse cx=%221432.904%22 cy=%22920.388%22 rx=%221.411%22 ry=%221.039%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.82%22%2F%3E%3Cellipse cx=%221697.533%22 cy=%22965.266%22 rx=%221.645%22 ry=%221.308%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.846%22%2F%3E%3Cellipse cx=%221793.53%22 cy=%22942.674%22 rx=%222.146%22 ry=%221.941%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.486%22%2F%3E%3Cellipse cx=%2210.662%22 cy=%221031.722%22 rx=%221.775%22 ry=%221.731%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.142%22%2F%3E%3Cellipse cx=%22303.442%22 cy=%22976.143%22 rx=%221.27%22 ry=%221.141%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.851%22%2F%3E%3Cellipse cx=%22452.966%22 cy=%221021.608%22 rx=%221.679%22 ry=%221.395%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.07%22%2F%3E%3Cellipse cx=%22828.639%22 cy=%22978.602%22 rx=%221.671%22 ry=%221.526%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.565%22%2F%3E%3Cellipse cx=%221024.878%22 cy=%221010.25%22 rx=%221.495%22 ry=%221.337%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.599%22%2F%3E%3Cellipse cx=%221141.15%22 cy=%221002.476%22 rx=%221.691%22 ry=%221.514%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.241%22%2F%3E%3Cellipse cx=%221429.221%22 cy=%22996.119%22 rx=%221.836%22 ry=%221.378%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.61%22%2F%3E%3Cellipse cx=%221713.95%22 cy=%22995.765%22 rx=%221.892%22 ry=%221.744%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.119%22%2F%3E%3Cellipse cx=%221990.821%22 cy=%221012.172%22 rx=%221.419%22 ry=%221.179%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.187%22%2F%3E%3Cellipse cx=%2222.081%22 cy=%221081.666%22 rx=%221.571%22 ry=%221.39%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.644%22%2F%3E%3Cellipse cx=%22403.947%22 cy=%221062.009%22 rx=%221.345%22 ry=%221.225%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.18%22%2F%3E%3Cellipse cx=%22585.076%22 cy=%221037.808%22 rx=%221.684%22 ry=%221.336%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.425%22%2F%3E%3Cellipse cx=%22729.055%22 cy=%221046.373%22 rx=%222.422%22 ry=%221.985%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.417%22%2F%3E%3Cellipse cx=%221039.941%22 cy=%221056.7%22 rx=%221.719%22 ry=%221.307%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.299%22%2F%3E%3Cellipse cx=%221129.028%22 cy=%221043.798%22 rx=%221.075%22 ry=%221.001%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.842%22%2F%3E%3Cellipse cx=%221396.798%22 cy=%221061.17%22 rx=%222.139%22 ry=%221.861%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.775%22%2F%3E%3Cellipse cx=%221644.03%22 cy=%221040.88%22 rx=%222.062%22 ry=%221.941%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.633%22%2F%3E%3Cellipse cx=%221953.601%22 cy=%221093.733%22 rx=%221.262%22 ry=%221.222%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.45%22%2F%3E%3Cellipse cx=%22106.928%22 cy=%221133.643%22 rx=%221.49%22 ry=%221.424%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.082%22%2F%3E%3Cellipse cx=%22243.139%22 cy=%221145.452%22 rx=%221.985%22 ry=%221.77%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.765%22%2F%3E%3Cellipse cx=%22486.169%22 cy=%221123.527%22 rx=%221.708%22 ry=%221.289%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.796%22%2F%3E%3Cellipse cx=%22864.431%22 cy=%221120.948%22 rx=%221.578%22 ry=%221.536%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.545%22%2F%3E%3Cellipse cx=%221101.545%22 cy=%221158.85%22 rx=%221.46%22 ry=%221.265%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.063%22%2F%3E%3Cellipse cx=%221250.109%22 cy=%221154.005%22 rx=%221.678%22 ry=%221.421%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.29%22%2F%3E%3Cellipse cx=%221370.006%22 cy=%221121.501%22 rx=%222.033%22 ry=%221.55%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.15%22%2F%3E%3Cellipse cx=%221623.654%22 cy=%221135.772%22 rx=%221.778%22 ry=%221.371%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.154%22%2F%3E%3Cellipse cx=%221992.581%22 cy=%221147.371%22 rx=%222.347%22 ry=%221.938%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.479%22%2F%3E%3Cellipse cx=%22207.874%22 cy=%221170.073%22 rx=%221.426%22 ry=%221.194%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.527%22%2F%3E%3Cellipse cx=%22310.22%22 cy=%221218.336%22 rx=%221.618%22 ry=%221.124%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.183%22%2F%3E%3Cellipse cx=%22619.369%22 cy=%221186.649%22 rx=%221.75%22 ry=%221.74%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.007%22%2F%3E%3Cellipse cx=%22806.249%22 cy=%221204.473%22 rx=%222.009%22 ry=%221.875%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.429%22%2F%3E%3Cellipse cx=%22965.756%22 cy=%221187.824%22 rx=%221.148%22 ry=%221.141%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.066%22%2F%3E%3Cellipse cx=%221206.333%22 cy=%221162.411%22 rx=%222.223%22 ry=%221.877%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.096%22%2F%3E%3Cellipse cx=%221447.489%22 cy=%221169.509%22 rx=%222.176%22 ry=%221.901%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.448%22%2F%3E%3Cellipse cx=%221734.757%22 cy=%221201.868%22 rx=%221.988%22 ry=%221.827%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.556%22%2F%3E%3Cellipse cx=%221850.562%22 cy=%221208.484%22 rx=%221.739%22 ry=%221.451%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.156%22%2F%3E%3Cellipse cx=%2213.725%22 cy=%221278.083%22 rx=%221.689%22 ry=%221.446%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.182%22%2F%3E%3Cellipse cx=%22261.221%22 cy=%221220.664%22 rx=%221.113%22 ry=%221.008%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.025%22%2F%3E%3Cellipse cx=%22625.573%22 cy=%221226.385%22 rx=%221.395%22 ry=%221.006%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.423%22%2F%3E%3Cellipse cx=%22829.91%22 cy=%221270.297%22 rx=%221.906%22 ry=%221.466%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.756%22%2F%3E%3Cellipse cx=%22925.342%22 cy=%221223.687%22 rx=%221.956%22 ry=%221.629%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.65%22%2F%3E%3Cellipse cx=%221260.14%22 cy=%221221.62%22 rx=%222.025%22 ry=%221.581%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.209%22%2F%3E%3Cellipse cx=%221411.561%22 cy=%221244.502%22 rx=%222.053%22 ry=%221.813%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.183%22%2F%3E%3Cellipse cx=%221619.523%22 cy=%221277.219%22 rx=%221.962%22 ry=%221.683%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.088%22%2F%3E%3Cellipse cx=%221831.241%22 cy=%221220.438%22 rx=%222.161%22 ry=%221.803%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.186%22%2F%3E%3Cellipse cx=%22116.136%22 cy=%221305.428%22 rx=%221.385%22 ry=%221.213%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.62%22%2F%3E%3Cellipse cx=%22418.797%22 cy=%221333.471%22 rx=%221.326%22 ry=%221.027%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.208%22%2F%3E%3Cellipse cx=%22539.072%22 cy=%221281.769%22 rx=%222.194%22 ry=%221.819%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.128%22%2F%3E%3Cellipse cx=%22813.096%22 cy=%221318.54%22 rx=%222.159%22 ry=%221.832%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.08%22%2F%3E%3Cellipse cx=%221104.172%22 cy=%221286.657%22 rx=%221.542%22 ry=%221.096%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.092%22%2F%3E%3Cellipse cx=%221214.712%22 cy=%221334.446%22 rx=%221.502%22 ry=%221.29%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.592%22%2F%3E%3Cellipse cx=%221351.953%22 cy=%221314.777%22 rx=%222.121%22 ry=%221.817%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.648%22%2F%3E%3Cellipse cx=%221649.759%22 cy=%221340.778%22 rx=%221.92%22 ry=%221.589%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.497%22%2F%3E%3Cellipse cx=%221991.728%22 cy=%221333.484%22 rx=%221.519%22 ry=%221.354%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.363%22%2F%3E%3Cellipse cx=%22135.503%22 cy=%221374.789%22 rx=%221.213%22 ry=%221.129%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.627%22%2F%3E%3Cellipse cx=%22405.505%22 cy=%221358.035%22 rx=%221.738%22 ry=%221.374%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.02%22%2F%3E%3Cellipse cx=%22789.412%22 cy=%221394.045%22 rx=%221.953%22 ry=%221.681%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.361%22%2F%3E%3Cellipse cx=%22923.324%22 cy=%221359.195%22 rx=%222.192%22 ry=%221.952%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.806%22%2F%3E%3Cellipse cx=%221255.121%22 cy=%221379.644%22 rx=%221.702%22 ry=%221.216%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.496%22%2F%3E%3Cellipse cx=%221508.015%22 cy=%221378.484%22 rx=%222.378%22 ry=%221.973%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.717%22%2F%3E%3Cellipse cx=%221617.781%22 cy=%221361.486%22 rx=%222.195%22 ry=%221.949%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.74%22%2F%3E%3Cellipse cx=%221846.784%22 cy=%221385.657%22 rx=%221.442%22 ry=%221.03%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.066%22%2F%3E%3Cg transform=%22rotate(-58.916 1587.06 -1290.671)%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 y1=%221%22 x2=%22210.996%22 y2=%221%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22rgba(39%2C94%2C254%2C1)%22%2F%3E%3Cstop offset=%22.3%22 stop-color=%22%2327fefd%22 stop-opacity=%22.1%22%2F%3E%3Cstop offset=%22.7%22 stop-color=%22%2327fefd%22 stop-opacity=%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect width=%22126.598%22 height=%223.1%22 rx=%223.1%22 ry=%223.1%22 fill=%22url(%23a)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-}
-
-.grid-1 {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 10px;
-    grid-row-gap: 0px;
-    align-items: center;
-}
-
-.grid-2 {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-    align-items: center;
-    justify-items: center;
-    margin: 1rem 0;
-}
-
-.footerinfo {
-    margin-bottom: 1rem;
-}
-
-/* Largest devices such as desktops (1280px) */
-@media only screen and (max-width: 80em) {
-}
-
-/* Large devices such as laptops (1024px) */
-@media only screen and (max-width: 64em) {
-}
-
-/* Medium devices such as tablets (718px) */
-@media only screen and (max-width: 718px) {
-}
-
-@media only screen and (max-width: 40em) {
-    #placeholder,
-    #placeholder canvas {
-        width: 88vw;
-        height: 88vw;
-    }
-
-    .grid-2 {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 1fr;
-    }
-
-    .v1 {
-        padding: 1rem;
-    }
-
-    .v9 {
-        padding: 1rem;
-    }
-
-    .footerinfo {
-        margin-bottom: 0;
-    }
-
-    h1 {
-        font-size: 1rem;
-    }
-}
+ #placeholder {
+     align-content: center;
+     height: 480px;
+     width: 480px;
+ }
+
+ #placeholder.none,
+ #placeholder .none {
+     display: none;
+ }
+
+ #sam-decoder-indicator {
+     padding: 4px 18px;
+     background-color: var(--pink);
+     color: var(--bg);
+     transform: skew(-15deg);
+     border-radius: 5px;
+ }
+
+ #sam-decoder-indicator.none {
+     display: none;
+ }
+
+ #webnn-logo {
+     width: 150px;
+     height: 30px;
+     display: inline-block;
+     margin: 0 6px 0 10px;
+ }
+
+ #webnnstatus a#webnn_na {
+     color: var(--pink);
+     background-color: rgba(255, 255, 255, 0.8);
+     border-radius: 3px;
+     padding: 1px 4px;
+     text-decoration: none;
+     display: inline-block;
+     margin-top: 0px;
+ }
+
+ #webnnstatus a#webnn_na:hover {
+     background-color: rgba(0, 0, 0, 0.4);
+     color: var(--bg);
+     border: 0px solid white;
+     text-decoration: none;
+ }
+
+ h1 {
+     padding: 0 0 0 0;
+     font-weight: 700;
+     font-size: 1.8rem;
+     margin: 0;
+ }
+
+ h1.title {
+     display: flex;
+     align-items: center;
+ }
+
+ h1.title span {
+     margin-right: 5px;
+ }
+
+ #back {
+     width: 24px;
+     height: 24px;
+     border-radius: 48px;
+     border: 1px solid var(--main-5);
+     display: grid;
+     align-items: center;
+     justify-items: center;
+ }
+
+ #back svg {
+     width: 20px;
+     height: 20px;
+ }
+
+ #back svg path {
+     fill: var(--main-5);
+ }
+
+ #back:hover {
+     border: 1px solid var(--main);
+     background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
+     color: var(--bg);
+     box-shadow: 0 3px 15px -1px var(--main-5);
+     cursor: pointer;
+ }
+
+ #back:hover svg path {
+     fill: var(--bg);
+ }
+
+ .progress {
+     padding: 1px;
+     background-color: var(--main-05);
+     border-radius: 10px;
+ }
+
+ #progress-info {
+     text-align: center;
+     font-size: 0.9rem;
+     margin-bottom: 0.2rem;
+ }
+
+ .progress-bar {
+     height: 8px;
+     border-radius: 10px;
+     width: 0%;
+     transition: 0.4s linear;
+     transition-property: width, background-color;
+ }
+
+ .progress-striped .progress-bar {
+     background-color: var(--main-5);
+     background-image: linear-gradient(45deg,
+             var(--main-6) 25%,
+             transparent 25%,
+             transparent 50%,
+             var(--main-6) 50%,
+             var(--main-6) 75%,
+             transparent 75%,
+             transparent);
+ }
+
+ .right {
+     align-self: center;
+     display: flex;
+     flex-direction: column;
+ }
+
+ .file-upload {
+     position: relative;
+     display: inline-block;
+ }
+
+ .file-upload_label {
+     display: inline-block;
+ }
+
+ .file-upload_input {
+     position: absolute;
+     left: 0;
+     top: 0;
+     right: 0;
+     bottom: 0;
+     font-size: 1;
+     width: 0;
+     height: 100%;
+     opacity: 0;
+ }
+
+ .form-group {
+     display: inline-block;
+ }
+
+ #action-bar {
+     margin: 2rem auto 0 auto;
+ }
+
+ .form-group button,
+ .form-group label {
+     display: inline-block;
+     border: 1px solid var(--border);
+     padding: 1rem;
+     margin: 0.5rem;
+     border-radius: 50%;
+     background-color: transparent;
+ }
+
+ .form-group button svg path,
+ .form-group label svg path {
+     fill: var(--font);
+ }
+
+ .form-group button:hover,
+ .form-group label:hover {
+     color: var(--main);
+     border: 1px solid var(--main);
+     background-color: var(--main-01);
+     cursor: pointer;
+ }
+
+ .form-group button:hover svg path,
+ .form-group label:hover svg path {
+     fill: var(--main);
+ }
+
+ #action-bar.disable .form-group button svg path,
+ #action-bar.disable .form-group label svg path {
+     fill: var(--border);
+ }
+
+ #action-bar.disable .form-group button:hover,
+ #action-bar.disable .form-group label:hover {
+     border: 1px solid var(--border);
+ }
+
+ .log-output {
+     height: 18vh;
+     padding: 10px 10px;
+     background-color: var(--bg-2);
+     border: 1px solid var(--border);
+     font-size: 0.9rem;
+     border-radius: 5px;
+     display: flex;
+     flex-direction: column-reverse;
+     overflow-y: scroll;
+ }
+
+ .log-output:hover {
+     border: 1px solid var(--main);
+     background-color: var(--bg-btn);
+ }
+
+ .data {
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     justify-content: center;
+     margin: 0;
+     padding: 0;
+ }
+
+ .data strong {
+     font-size: 600%;
+ }
+
+ .data span {
+     font-size: 228%;
+ }
+
+ .data .title {
+     display: block;
+ }
+
+ #error {
+     align-self: center;
+ }
+
+ .error {
+     background-color: var(--pink);
+     color: var(--bg);
+     font-size: 0.9rem;
+     border-radius: 5px;
+     padding: 6px 12px;
+ }
+
+ .v1 {
+     padding: 1rem 40px;
+     border-bottom: 1px solid var(--border);
+ }
+
+ .v9 {
+     padding: 0 40px;
+ }
+
+ #webnnstatus {
+     text-align: right;
+     font-size: 0.9rem;
+     margin-top: 10px;
+ }
+
+ #webnnstatus #circle {
+     width: 8px;
+     height: 8px;
+     border-radius: 10px;
+     display: inline-block;
+     margin-bottom: 1px;
+ }
+
+ #webnnstatus.green {
+     color: var(--font);
+ }
+
+ #webnnstatus.red {
+     background-color: var(--pink);
+     color: var(--bg);
+     border-radius: 5px;
+     margin-bottom: 5px;
+     padding: 4px 12px;
+ }
+
+ #webnnstatus.green #circle {
+     background-color: var(--green);
+ }
+
+ #webnnstatus.red #circle {
+     background-color: var(--bg);
+ }
+
+ #versions {
+     font-size: 0.9rem;
+     display: block;
+     text-align: right;
+ }
+
+ #versions a {
+     color: var(--font);
+     text-decoration: underline var(--border);
+ }
+
+ #versions a:hover {
+     color: var(--green);
+     text-decoration: underline;
+ }
+
+ #versions a:hover svg path {
+     fill: var(--green);
+ }
+
+ #webnnstatus a {
+     color: var(--main);
+     text-decoration: none;
+ }
+
+ #webnnstatus a:hover {
+     color: var(--green);
+     text-decoration: underline;
+ }
+
+ #webnnstatus #circle.none {
+     display: none;
+ }
+
+ .magicpattern {
+     width: 100%;
+     background-size: cover;
+     background-position: center center;
+     background-repeat: repeat;
+     background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill=%22%23fff%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cellipse cx=%22212.191%22 cy=%2236.506%22 rx=%221.837%22 ry=%221.465%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.394%22%2F%3E%3Cellipse cx=%22314.402%22 cy=%2255.228%22 rx=%221.53%22 ry=%221.155%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.185%22%2F%3E%3Cellipse cx=%22655.849%22 cy=%226.14%22 rx=%221.168%22 ry=%221.108%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.598%22%2F%3E%3Cellipse cx=%22832.256%22 cy=%2237.836%22 rx=%222.151%22 ry=%221.772%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.378%22%2F%3E%3Cellipse cx=%221060.076%22 cy=%2250.941%22 rx=%221.742%22 ry=%221.275%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.085%22%2F%3E%3Cellipse cx=%221182.118%22 cy=%2214.447%22 rx=%222.084%22 ry=%221.707%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.122%22%2F%3E%3Cellipse cx=%221386.414%22 cy=%2247.602%22 rx=%221.714%22 ry=%221.276%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.134%22%2F%3E%3Cellipse cx=%221717.148%22 cy=%223.635%22 rx=%221.566%22 ry=%221.519%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.262%22%2F%3E%3Cellipse cx=%221947.463%22 cy=%225.78%22 rx=%221.433%22 ry=%221.283%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.712%22%2F%3E%3Cellipse cx=%22104.111%22 cy=%22115.001%22 rx=%221.702%22 ry=%221.34%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.506%22%2F%3E%3Cellipse cx=%22271.934%22 cy=%2287.51%22 rx=%221.988%22 ry=%221.717%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.065%22%2F%3E%3Cellipse cx=%22502.039%22 cy=%2268.621%22 rx=%221.559%22 ry=%221.216%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.377%22%2F%3E%3Cellipse cx=%22797.111%22 cy=%2270.457%22 rx=%221.362%22 ry=%221.291%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.425%22%2F%3E%3Cellipse cx=%221093.177%22 cy=%22119.238%22 rx=%221.517%22 ry=%221.168%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.199%22%2F%3E%3Cellipse cx=%221297.705%22 cy=%2295.435%22 rx=%222.146%22 ry=%221.847%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.076%22%2F%3E%3Cellipse cx=%221354.263%22 cy=%2296.086%22 rx=%221.459%22 ry=%221.446%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.245%22%2F%3E%3Cellipse cx=%221557.671%22 cy=%2268.518%22 rx=%221.487%22 ry=%221.205%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.019%22%2F%3E%3Cellipse cx=%221813.598%22 cy=%22119.14%22 rx=%222.039%22 ry=%221.864%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.815%22%2F%3E%3Cellipse cx=%22194.381%22 cy=%22163.537%22 rx=%221.603%22 ry=%221.588%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.014%22%2F%3E%3Cellipse cx=%22242.047%22 cy=%22156.309%22 rx=%221.961%22 ry=%221.693%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.693%22%2F%3E%3Cellipse cx=%22571.192%22 cy=%22135.71%22 rx=%221.469%22 ry=%221.303%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.834%22%2F%3E%3Cellipse cx=%22702.167%22 cy=%22177.14%22 rx=%221.658%22 ry=%221.646%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.65%22%2F%3E%3Cellipse cx=%221057.919%22 cy=%22153.177%22 rx=%222.256%22 ry=%221.898%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.12%22%2F%3E%3Cellipse cx=%221301.304%22 cy=%22143.252%22 rx=%222.212%22 ry=%221.927%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.073%22%2F%3E%3Cellipse cx=%221528.244%22 cy=%22178.971%22 rx=%222.243%22 ry=%221.747%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.365%22%2F%3E%3Cellipse cx=%221773.336%22 cy=%22168.431%22 rx=%221.862%22 ry=%221.517%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.288%22%2F%3E%3Cellipse cx=%221914.009%22 cy=%22153.559%22 rx=%221.784%22 ry=%221.421%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.695%22%2F%3E%3Cellipse cx=%2283.381%22 cy=%22204.54%22 rx=%221.79%22 ry=%221.516%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.298%22%2F%3E%3Cellipse cx=%22314.309%22 cy=%22220.4%22 rx=%222.059%22 ry=%221.895%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.392%22%2F%3E%3Cellipse cx=%22551.586%22 cy=%22231.644%22 rx=%221.557%22 ry=%221.109%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.02%22%2F%3E%3Cellipse cx=%22708.132%22 cy=%22229.766%22 rx=%221.617%22 ry=%221.171%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.1%22%2F%3E%3Cellipse cx=%221066.994%22 cy=%22209.389%22 rx=%222.039%22 ry=%221.697%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.105%22%2F%3E%3Cellipse cx=%221287.847%22 cy=%22214.982%22 rx=%221.95%22 ry=%221.658%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.098%22%2F%3E%3Cellipse cx=%221420.168%22 cy=%22210.358%22 rx=%221.418%22 ry=%221.342%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.056%22%2F%3E%3Cellipse cx=%221587.486%22 cy=%22243.917%22 rx=%221.792%22 ry=%221.599%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.265%22%2F%3E%3Cellipse cx=%221912.49%22 cy=%22217.252%22 rx=%221.684%22 ry=%221.226%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.224%22%2F%3E%3Cellipse cx=%22199.052%22 cy=%22271.947%22 rx=%221.762%22 ry=%221.313%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.167%22%2F%3E%3Cellipse cx=%22344.665%22 cy=%22258.362%22 rx=%222.194%22 ry=%221.789%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.15%22%2F%3E%3Cellipse cx=%22463.17%22 cy=%22290.78%22 rx=%221.275%22 ry=%221.066%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.129%22%2F%3E%3Cellipse cx=%22730.85%22 cy=%22269.633%22 rx=%221.46%22 ry=%221.126%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.115%22%2F%3E%3Cellipse cx=%221032.458%22 cy=%22290.763%22 rx=%222.396%22 ry=%221.955%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.379%22%2F%3E%3Cellipse cx=%221118.705%22 cy=%22277.673%22 rx=%221.601%22 ry=%221.442%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.507%22%2F%3E%3Cellipse cx=%221430.273%22 cy=%22269.46%22 rx=%221.693%22 ry=%221.203%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.175%22%2F%3E%3Cellipse cx=%221684.963%22 cy=%22263.445%22 rx=%221.814%22 ry=%221.659%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.57%22%2F%3E%3Cellipse cx=%221809.894%22 cy=%22250.016%22 rx=%221.726%22 ry=%221.561%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.868%22%2F%3E%3Cellipse cx=%22142.593%22 cy=%22336.436%22 rx=%221.146%22 ry=%221.135%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.424%22%2F%3E%3Cellipse cx=%22380.915%22 cy=%22316.923%22 rx=%221.506%22 ry=%221.252%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.049%22%2F%3E%3Cellipse cx=%22618.417%22 cy=%22309.889%22 rx=%222.019%22 ry=%221.793%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.059%22%2F%3E%3Cellipse cx=%22786.653%22 cy=%22337.782%22 rx=%221.871%22 ry=%221.448%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.667%22%2F%3E%3Cellipse cx=%221093.129%22 cy=%22306.41%22 rx=%221.852%22 ry=%221.549%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.477%22%2F%3E%3Cellipse cx=%221202.914%22 cy=%22351.435%22 rx=%221.655%22 ry=%221.588%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.361%22%2F%3E%3Cellipse cx=%221389.511%22 cy=%22365.526%22 rx=%221.681%22 ry=%221.527%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.022%22%2F%3E%3Cellipse cx=%221615.719%22 cy=%22353.595%22 rx=%222.154%22 ry=%221.839%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.069%22%2F%3E%3Cellipse cx=%221814.701%22 cy=%22363.977%22 rx=%221.418%22 ry=%221.186%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.71%22%2F%3E%3Cellipse cx=%2296.056%22 cy=%22386.588%22 rx=%222.287%22 ry=%221.935%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.631%22%2F%3E%3Cellipse cx=%22286.369%22 cy=%22406.256%22 rx=%221.985%22 ry=%221.948%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.357%22%2F%3E%3Cellipse cx=%22618.923%22 cy=%22415.612%22 rx=%221.707%22 ry=%221.366%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.379%22%2F%3E%3Cellipse cx=%22739.614%22 cy=%22421.167%22 rx=%221.626%22 ry=%221.417%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.589%22%2F%3E%3Cellipse cx=%221070.221%22 cy=%22423.128%22 rx=%221.517%22 ry=%221.264%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.68%22%2F%3E%3Cellipse cx=%221206.77%22 cy=%22366.286%22 rx=%221.397%22 ry=%221.327%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.166%22%2F%3E%3Cellipse cx=%221507.904%22 cy=%22401.236%22 rx=%221.823%22 ry=%221.48%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.699%22%2F%3E%3Cellipse cx=%221649.693%22 cy=%22410.706%22 rx=%221.515%22 ry=%221.424%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.089%22%2F%3E%3Cellipse cx=%221808.692%22 cy=%22379.433%22 rx=%221.939%22 ry=%221.513%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.086%22%2F%3E%3Cellipse cx=%22191.994%22 cy=%22451.171%22 rx=%222.354%22 ry=%221.861%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.62%22%2F%3E%3Cellipse cx=%22264.069%22 cy=%22477.313%22 rx=%222.085%22 ry=%221.954%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.729%22%2F%3E%3Cellipse cx=%22463.071%22 cy=%22446.584%22 rx=%221.991%22 ry=%221.81%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.57%22%2F%3E%3Cellipse cx=%22740.5%22 cy=%22451.242%22 rx=%221.426%22 ry=%221.35%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.146%22%2F%3E%3Cellipse cx=%221000.693%22 cy=%22466.532%22 rx=%222.172%22 ry=%221.988%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.357%22%2F%3E%3Cellipse cx=%221180.985%22 cy=%22479.063%22 rx=%221.363%22 ry=%221.212%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.396%22%2F%3E%3Cellipse cx=%221454.524%22 cy=%22444.26%22 rx=%221.224%22 ry=%221.114%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.036%22%2F%3E%3Cellipse cx=%221581.077%22 cy=%22449.746%22 rx=%222.318%22 ry=%221.865%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.08%22%2F%3E%3Cellipse cx=%221904.829%22 cy=%22440.581%22 rx=%221.846%22 ry=%221.724%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.39%22%2F%3E%3Cellipse cx=%22122.185%22 cy=%22546.57%22 rx=%221.175%22 ry=%221.033%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.409%22%2F%3E%3Cellipse cx=%22436.036%22 cy=%22527.473%22 rx=%222.409%22 ry=%221.948%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.465%22%2F%3E%3Cellipse cx=%22649.643%22 cy=%22524.564%22 rx=%221.499%22 ry=%221.009%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.1%22%2F%3E%3Cellipse cx=%22886.672%22 cy=%22517.089%22 rx=%221.509%22 ry=%221.385%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.009%22%2F%3E%3Cellipse cx=%22968.219%22 cy=%22514.47%22 rx=%221.805%22 ry=%221.373%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.657%22%2F%3E%3Cellipse cx=%221307.854%22 cy=%22531.032%22 rx=%222.079%22 ry=%221.891%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.73%22%2F%3E%3Cellipse cx=%221376.913%22 cy=%22512.672%22 rx=%221.388%22 ry=%221.112%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.697%22%2F%3E%3Cellipse cx=%221664.084%22 cy=%22522.561%22 rx=%221.627%22 ry=%221.244%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.588%22%2F%3E%3Cellipse cx=%221952.776%22 cy=%22532.492%22 rx=%221.502%22 ry=%221.076%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.03%22%2F%3E%3Cellipse cx=%2277.536%22 cy=%22582.352%22 rx=%221.573%22 ry=%221.337%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.46%22%2F%3E%3Cellipse cx=%22407.147%22 cy=%22584.018%22 rx=%221.85%22 ry=%221.833%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.284%22%2F%3E%3Cellipse cx=%22624.337%22 cy=%22579.925%22 rx=%221.225%22 ry=%221.138%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.569%22%2F%3E%3Cellipse cx=%22744.133%22 cy=%22550.436%22 rx=%222.024%22 ry=%221.764%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.076%22%2F%3E%3Cellipse cx=%221085.155%22 cy=%22566.879%22 rx=%221.253%22 ry=%221.133%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.273%22%2F%3E%3Cellipse cx=%221256.358%22 cy=%22602.431%22 rx=%222.206%22 ry=%221.937%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.676%22%2F%3E%3Cellipse cx=%221363.584%22 cy=%22569.619%22 rx=%221.976%22 ry=%221.85%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.519%22%2F%3E%3Cellipse cx=%221640.98%22 cy=%22597.035%22 rx=%221.191%22 ry=%221.015%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.044%22%2F%3E%3Cellipse cx=%221792.549%22 cy=%22605.639%22 rx=%221.746%22 ry=%221.374%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.754%22%2F%3E%3Cellipse cx=%22199.117%22 cy=%22633.596%22 rx=%221.98%22 ry=%221.602%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.584%22%2F%3E%3Cellipse cx=%22366.777%22 cy=%22664.105%22 rx=%221.581%22 ry=%221.133%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.394%22%2F%3E%3Cellipse cx=%22514.884%22 cy=%22616.685%22 rx=%221.147%22 ry=%221.109%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.104%22%2F%3E%3Cellipse cx=%22786.239%22 cy=%22659.114%22 rx=%221.518%22 ry=%221.277%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.828%22%2F%3E%3Cellipse cx=%221071.864%22 cy=%22665.206%22 rx=%221.409%22 ry=%221.265%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.415%22%2F%3E%3Cellipse cx=%221139.576%22 cy=%22667.447%22 rx=%221.844%22 ry=%221.667%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.587%22%2F%3E%3Cellipse cx=%221380.726%22 cy=%22622.073%22 rx=%221.975%22 ry=%221.653%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.919%22%2F%3E%3Cellipse cx=%221580.471%22 cy=%22665.779%22 rx=%221.335%22 ry=%221.318%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.16%22%2F%3E%3Cellipse cx=%221997.277%22 cy=%22631.534%22 rx=%221.665%22 ry=%221.544%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.6%22%2F%3E%3Cellipse cx=%2293.548%22 cy=%22698.204%22 rx=%221.613%22 ry=%221.471%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.158%22%2F%3E%3Cellipse cx=%22223.937%22 cy=%22678.106%22 rx=%222.356%22 ry=%221.915%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.775%22%2F%3E%3Cellipse cx=%22646.023%22 cy=%22672.912%22 rx=%222.279%22 ry=%221.783%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.228%22%2F%3E%3Cellipse cx=%22726.976%22 cy=%22727.962%22 rx=%222.133%22 ry=%221.667%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.725%22%2F%3E%3Cellipse cx=%22944.441%22 cy=%22700.955%22 rx=%221.438%22 ry=%221.116%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.18%22%2F%3E%3Cellipse cx=%221251.017%22 cy=%22673.833%22 rx=%221.688%22 ry=%221.686%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.101%22%2F%3E%3Cellipse cx=%221435.333%22 cy=%22715.661%22 rx=%221.41%22 ry=%221.032%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.1%22%2F%3E%3Cellipse cx=%221723.105%22 cy=%22683.002%22 rx=%221.275%22 ry=%221.014%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.612%22%2F%3E%3Cellipse cx=%221867.592%22 cy=%22701.535%22 rx=%221.565%22 ry=%221.182%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.773%22%2F%3E%3Cellipse cx=%2220.166%22 cy=%22734.981%22 rx=%221.462%22 ry=%221.388%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.14%22%2F%3E%3Cellipse cx=%22248.969%22 cy=%22749.676%22 rx=%221.309%22 ry=%221.155%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.394%22%2F%3E%3Cellipse cx=%22504.076%22 cy=%22782.879%22 rx=%221.667%22 ry=%221.403%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.498%22%2F%3E%3Cellipse cx=%22686.247%22 cy=%22743.015%22 rx=%221.23%22 ry=%221.08%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.607%22%2F%3E%3Cellipse cx=%221001.791%22 cy=%22739.711%22 rx=%221.506%22 ry=%221.039%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.261%22%2F%3E%3Cellipse cx=%221315.816%22 cy=%22791.286%22 rx=%221.205%22 ry=%221.002%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.582%22%2F%3E%3Cellipse cx=%221403.568%22 cy=%22784.948%22 rx=%221.18%22 ry=%221.146%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.329%22%2F%3E%3Cellipse cx=%221751.589%22 cy=%22742.243%22 rx=%221.643%22 ry=%221.569%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.877%22%2F%3E%3Cellipse cx=%221802.497%22 cy=%22783.266%22 rx=%221.332%22 ry=%221.319%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.411%22%2F%3E%3Cellipse cx=%2236.788%22 cy=%22826.495%22 rx=%221.561%22 ry=%221.539%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.123%22%2F%3E%3Cellipse cx=%22443.108%22 cy=%22814.887%22 rx=%221.476%22 ry=%221.168%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.115%22%2F%3E%3Cellipse cx=%22572.957%22 cy=%22830.638%22 rx=%221.858%22 ry=%221.621%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.795%22%2F%3E%3Cellipse cx=%22799.711%22 cy=%22793.973%22 rx=%222.058%22 ry=%221.929%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.624%22%2F%3E%3Cellipse cx=%22971.467%22 cy=%22796.517%22 rx=%221.421%22 ry=%221.173%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.483%22%2F%3E%3Cellipse cx=%221217.14%22 cy=%22796.179%22 rx=%221.244%22 ry=%221.226%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.784%22%2F%3E%3Cellipse cx=%221534.785%22 cy=%22813.617%22 rx=%221.684%22 ry=%221.548%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.63%22%2F%3E%3Cellipse cx=%221706.386%22 cy=%22816.374%22 rx=%221.515%22 ry=%221.306%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.193%22%2F%3E%3Cellipse cx=%221922.332%22 cy=%22847.491%22 rx=%221.191%22 ry=%221.13%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.375%22%2F%3E%3Cellipse cx=%2291.675%22 cy=%22871.324%22 rx=%222.037%22 ry=%221.885%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.378%22%2F%3E%3Cellipse cx=%22326.714%22 cy=%22908.773%22 rx=%221.779%22 ry=%221.73%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.42%22%2F%3E%3Cellipse cx=%22493.524%22 cy=%22864.023%22 rx=%221.743%22 ry=%221.456%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.707%22%2F%3E%3Cellipse cx=%22788.422%22 cy=%22865.913%22 rx=%221.498%22 ry=%221.256%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.621%22%2F%3E%3Cellipse cx=%22919.944%22 cy=%22886.151%22 rx=%222.282%22 ry=%221.843%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.792%22%2F%3E%3Cellipse cx=%221110.393%22 cy=%22872.613%22 rx=%221.535%22 ry=%221.287%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.802%22%2F%3E%3Cellipse cx=%221412.936%22 cy=%22864.837%22 rx=%222.236%22 ry=%221.848%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.163%22%2F%3E%3Cellipse cx=%221577.145%22 cy=%22899.332%22 rx=%222.333%22 ry=%221.86%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.684%22%2F%3E%3Cellipse cx=%221838.741%22 cy=%22870.88%22 rx=%222.025%22 ry=%221.716%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.443%22%2F%3E%3Cellipse cx=%22109.118%22 cy=%22972.43%22 rx=%221.405%22 ry=%221.099%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.049%22%2F%3E%3Cellipse cx=%22364.278%22 cy=%22934.843%22 rx=%222.101%22 ry=%221.631%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.665%22%2F%3E%3Cellipse cx=%22577.343%22 cy=%22933.407%22 rx=%221.784%22 ry=%221.774%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.508%22%2F%3E%3Cellipse cx=%22857.704%22 cy=%22934.735%22 rx=%221.895%22 ry=%221.879%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.238%22%2F%3E%3Cellipse cx=%221057.57%22 cy=%22966.553%22 rx=%221.719%22 ry=%221.427%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.51%22%2F%3E%3Cellipse cx=%221322.497%22 cy=%22943.176%22 rx=%221.434%22 ry=%221.365%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.212%22%2F%3E%3Cellipse cx=%221432.904%22 cy=%22920.388%22 rx=%221.411%22 ry=%221.039%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.82%22%2F%3E%3Cellipse cx=%221697.533%22 cy=%22965.266%22 rx=%221.645%22 ry=%221.308%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.846%22%2F%3E%3Cellipse cx=%221793.53%22 cy=%22942.674%22 rx=%222.146%22 ry=%221.941%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.486%22%2F%3E%3Cellipse cx=%2210.662%22 cy=%221031.722%22 rx=%221.775%22 ry=%221.731%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.142%22%2F%3E%3Cellipse cx=%22303.442%22 cy=%22976.143%22 rx=%221.27%22 ry=%221.141%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.851%22%2F%3E%3Cellipse cx=%22452.966%22 cy=%221021.608%22 rx=%221.679%22 ry=%221.395%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.07%22%2F%3E%3Cellipse cx=%22828.639%22 cy=%22978.602%22 rx=%221.671%22 ry=%221.526%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.565%22%2F%3E%3Cellipse cx=%221024.878%22 cy=%221010.25%22 rx=%221.495%22 ry=%221.337%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.599%22%2F%3E%3Cellipse cx=%221141.15%22 cy=%221002.476%22 rx=%221.691%22 ry=%221.514%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.241%22%2F%3E%3Cellipse cx=%221429.221%22 cy=%22996.119%22 rx=%221.836%22 ry=%221.378%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.61%22%2F%3E%3Cellipse cx=%221713.95%22 cy=%22995.765%22 rx=%221.892%22 ry=%221.744%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.119%22%2F%3E%3Cellipse cx=%221990.821%22 cy=%221012.172%22 rx=%221.419%22 ry=%221.179%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.187%22%2F%3E%3Cellipse cx=%2222.081%22 cy=%221081.666%22 rx=%221.571%22 ry=%221.39%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.644%22%2F%3E%3Cellipse cx=%22403.947%22 cy=%221062.009%22 rx=%221.345%22 ry=%221.225%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.18%22%2F%3E%3Cellipse cx=%22585.076%22 cy=%221037.808%22 rx=%221.684%22 ry=%221.336%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.425%22%2F%3E%3Cellipse cx=%22729.055%22 cy=%221046.373%22 rx=%222.422%22 ry=%221.985%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.417%22%2F%3E%3Cellipse cx=%221039.941%22 cy=%221056.7%22 rx=%221.719%22 ry=%221.307%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.299%22%2F%3E%3Cellipse cx=%221129.028%22 cy=%221043.798%22 rx=%221.075%22 ry=%221.001%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.842%22%2F%3E%3Cellipse cx=%221396.798%22 cy=%221061.17%22 rx=%222.139%22 ry=%221.861%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.775%22%2F%3E%3Cellipse cx=%221644.03%22 cy=%221040.88%22 rx=%222.062%22 ry=%221.941%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.633%22%2F%3E%3Cellipse cx=%221953.601%22 cy=%221093.733%22 rx=%221.262%22 ry=%221.222%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.45%22%2F%3E%3Cellipse cx=%22106.928%22 cy=%221133.643%22 rx=%221.49%22 ry=%221.424%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.082%22%2F%3E%3Cellipse cx=%22243.139%22 cy=%221145.452%22 rx=%221.985%22 ry=%221.77%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.765%22%2F%3E%3Cellipse cx=%22486.169%22 cy=%221123.527%22 rx=%221.708%22 ry=%221.289%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.796%22%2F%3E%3Cellipse cx=%22864.431%22 cy=%221120.948%22 rx=%221.578%22 ry=%221.536%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.545%22%2F%3E%3Cellipse cx=%221101.545%22 cy=%221158.85%22 rx=%221.46%22 ry=%221.265%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.063%22%2F%3E%3Cellipse cx=%221250.109%22 cy=%221154.005%22 rx=%221.678%22 ry=%221.421%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.29%22%2F%3E%3Cellipse cx=%221370.006%22 cy=%221121.501%22 rx=%222.033%22 ry=%221.55%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.15%22%2F%3E%3Cellipse cx=%221623.654%22 cy=%221135.772%22 rx=%221.778%22 ry=%221.371%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.154%22%2F%3E%3Cellipse cx=%221992.581%22 cy=%221147.371%22 rx=%222.347%22 ry=%221.938%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.479%22%2F%3E%3Cellipse cx=%22207.874%22 cy=%221170.073%22 rx=%221.426%22 ry=%221.194%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.527%22%2F%3E%3Cellipse cx=%22310.22%22 cy=%221218.336%22 rx=%221.618%22 ry=%221.124%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.183%22%2F%3E%3Cellipse cx=%22619.369%22 cy=%221186.649%22 rx=%221.75%22 ry=%221.74%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.007%22%2F%3E%3Cellipse cx=%22806.249%22 cy=%221204.473%22 rx=%222.009%22 ry=%221.875%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.429%22%2F%3E%3Cellipse cx=%22965.756%22 cy=%221187.824%22 rx=%221.148%22 ry=%221.141%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.066%22%2F%3E%3Cellipse cx=%221206.333%22 cy=%221162.411%22 rx=%222.223%22 ry=%221.877%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.096%22%2F%3E%3Cellipse cx=%221447.489%22 cy=%221169.509%22 rx=%222.176%22 ry=%221.901%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.448%22%2F%3E%3Cellipse cx=%221734.757%22 cy=%221201.868%22 rx=%221.988%22 ry=%221.827%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.556%22%2F%3E%3Cellipse cx=%221850.562%22 cy=%221208.484%22 rx=%221.739%22 ry=%221.451%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.156%22%2F%3E%3Cellipse cx=%2213.725%22 cy=%221278.083%22 rx=%221.689%22 ry=%221.446%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.182%22%2F%3E%3Cellipse cx=%22261.221%22 cy=%221220.664%22 rx=%221.113%22 ry=%221.008%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.025%22%2F%3E%3Cellipse cx=%22625.573%22 cy=%221226.385%22 rx=%221.395%22 ry=%221.006%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.423%22%2F%3E%3Cellipse cx=%22829.91%22 cy=%221270.297%22 rx=%221.906%22 ry=%221.466%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.756%22%2F%3E%3Cellipse cx=%22925.342%22 cy=%221223.687%22 rx=%221.956%22 ry=%221.629%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.65%22%2F%3E%3Cellipse cx=%221260.14%22 cy=%221221.62%22 rx=%222.025%22 ry=%221.581%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.209%22%2F%3E%3Cellipse cx=%221411.561%22 cy=%221244.502%22 rx=%222.053%22 ry=%221.813%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.183%22%2F%3E%3Cellipse cx=%221619.523%22 cy=%221277.219%22 rx=%221.962%22 ry=%221.683%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.088%22%2F%3E%3Cellipse cx=%221831.241%22 cy=%221220.438%22 rx=%222.161%22 ry=%221.803%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.186%22%2F%3E%3Cellipse cx=%22116.136%22 cy=%221305.428%22 rx=%221.385%22 ry=%221.213%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.62%22%2F%3E%3Cellipse cx=%22418.797%22 cy=%221333.471%22 rx=%221.326%22 ry=%221.027%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.208%22%2F%3E%3Cellipse cx=%22539.072%22 cy=%221281.769%22 rx=%222.194%22 ry=%221.819%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.128%22%2F%3E%3Cellipse cx=%22813.096%22 cy=%221318.54%22 rx=%222.159%22 ry=%221.832%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.08%22%2F%3E%3Cellipse cx=%221104.172%22 cy=%221286.657%22 rx=%221.542%22 ry=%221.096%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.092%22%2F%3E%3Cellipse cx=%221214.712%22 cy=%221334.446%22 rx=%221.502%22 ry=%221.29%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.592%22%2F%3E%3Cellipse cx=%221351.953%22 cy=%221314.777%22 rx=%222.121%22 ry=%221.817%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.648%22%2F%3E%3Cellipse cx=%221649.759%22 cy=%221340.778%22 rx=%221.92%22 ry=%221.589%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.497%22%2F%3E%3Cellipse cx=%221991.728%22 cy=%221333.484%22 rx=%221.519%22 ry=%221.354%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.363%22%2F%3E%3Cellipse cx=%22135.503%22 cy=%221374.789%22 rx=%221.213%22 ry=%221.129%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.627%22%2F%3E%3Cellipse cx=%22405.505%22 cy=%221358.035%22 rx=%221.738%22 ry=%221.374%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22-.02%22%2F%3E%3Cellipse cx=%22789.412%22 cy=%221394.045%22 rx=%221.953%22 ry=%221.681%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.361%22%2F%3E%3Cellipse cx=%22923.324%22 cy=%221359.195%22 rx=%222.192%22 ry=%221.952%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.806%22%2F%3E%3Cellipse cx=%221255.121%22 cy=%221379.644%22 rx=%221.702%22 ry=%221.216%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.496%22%2F%3E%3Cellipse cx=%221508.015%22 cy=%221378.484%22 rx=%222.378%22 ry=%221.973%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.717%22%2F%3E%3Cellipse cx=%221617.781%22 cy=%221361.486%22 rx=%222.195%22 ry=%221.949%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.74%22%2F%3E%3Cellipse cx=%221846.784%22 cy=%221385.657%22 rx=%221.442%22 ry=%221.03%22 fill=%22rgba(230%2C230%2C230%2C1)%22 opacity=%22.066%22%2F%3E%3Cg transform=%22rotate(-58.916 1587.06 -1290.671)%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 y1=%221%22 x2=%22210.996%22 y2=%221%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22rgba(39%2C94%2C254%2C1)%22%2F%3E%3Cstop offset=%22.3%22 stop-color=%22%2327fefd%22 stop-opacity=%22.1%22%2F%3E%3Cstop offset=%22.7%22 stop-color=%22%2327fefd%22 stop-opacity=%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect width=%22126.598%22 height=%223.1%22 rx=%223.1%22 ry=%223.1%22 fill=%22url(%23a)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+ }
+
+ .grid-1 {
+     display: grid;
+     grid-template-columns: repeat(1, 1fr);
+     grid-template-rows: 1fr;
+     grid-column-gap: 10px;
+     grid-row-gap: 0px;
+     align-items: center;
+ }
+
+ .grid-2 {
+     display: grid;
+     grid-template-columns: 1fr 1fr;
+     grid-template-rows: 1fr;
+     grid-column-gap: 0px;
+     grid-row-gap: 0px;
+     align-items: center;
+     justify-items: center;
+     margin: 1rem 0;
+ }
+
+ .footerinfo {
+     margin-bottom: 1rem;
+ }
+
+ /* Largest devices such as desktops (1280px) */
+ @media only screen and (max-width: 80em) {}
+
+ /* Large devices such as laptops (1024px) */
+ @media only screen and (max-width: 64em) {}
+
+ /* Medium devices such as tablets (718px) */
+ @media only screen and (max-width: 718px) {}
+
+ @media only screen and (max-width: 40em) {
+
+     #placeholder,
+     #placeholder canvas {
+         width: 88vw;
+         height: 88vw;
+     }
+
+     .grid-2 {
+         grid-template-columns: 1fr;
+         grid-template-rows: 1fr 1fr;
+     }
+
+     .v1 {
+         padding: 1rem;
+     }
+
+     .v9 {
+         padding: 1rem;
+     }
+
+     .footerinfo {
+         margin-bottom: 0;
+     }
+
+     h1 {
+         font-size: 1rem;
+     }
+ }
\ No newline at end of file
diff --git a/demos/stable-diffusion-1.5/index.html b/demos/stable-diffusion-1.5/index.html
index 7bb729b..362a704 100644
--- a/demos/stable-diffusion-1.5/index.html
+++ b/demos/stable-diffusion-1.5/index.html
@@ -17,6 +17,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
+    <link rel="stylesheet" href="../../assets/css/style.css" />
     <link rel="stylesheet" href="./static/main.css" />
     <script type="module" src="./index.js"></script>
 </head>
@@ -135,7 +136,7 @@ <h1 class="title">
                 </div>
             </div>
 
-            <div class="log-output" id="status"></div>
+            <div class="log-output" id="log"></div>
             <div id="data" class="hide">
                 <table>
                     <tr>
diff --git a/demos/stable-diffusion-1.5/static/main.css b/demos/stable-diffusion-1.5/static/main.css
index 7366c17..98abe34 100644
--- a/demos/stable-diffusion-1.5/static/main.css
+++ b/demos/stable-diffusion-1.5/static/main.css
@@ -1,98 +1,3 @@
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 300;
-    src: url("./fonts/archivo/archivo-v19-latin-300.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 400;
-    src: url("./fonts/archivo/archivo-v19-latin-regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 600;
-    src: url("./fonts/archivo/archivo-v19-latin-600.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 700;
-    src: url("./fonts/archivo/archivo-v19-latin-700.woff2") format("woff2");
-}
-
-/* :root {
-  --bg: #000000;
-  --black-02: rgba(0, 0, 0, 0.2);
-  --font: rgba(255,255,255, 1);
-  --font-weak: rgba(255, 255, 255, 0.5);
-  --disabled: rgba(75, 75, 75, 1);
-  --bg-2: rgba(10, 10, 10, 1.0);
-  --bg-3: rgba(20, 20, 20, 1.0);
-  --bg-btn: rgba(15, 15, 15, 1);
-  --main-01: rgba(123, 59, 252, 0.1);
-  --main-001: rgba(123, 59, 252, 0.01);
-  --main-06: rgba(123, 59, 252, 0.6);
-  --main: rgba(123, 59, 252, 1);
-  --border: rgba(32, 33, 37);
-  --green: rgba(127, 255, 0, 1);
-  --yellow: rgba(231, 255, 80, 1);
-} */
-
-:root {
-    --bg: rgba(255, 255, 255, 1);
-    --black-02: rgba(240, 240, 240, 0.2);
-    --font: rgba(45, 45, 45, 1);
-    --font-weak: rgba(0, 0, 0, 0.6);
-    --disabled: rgba(245, 245, 245, 0.2);
-    --bg-2: rgb(230, 230, 230, 0.2);
-    --bg-2h: rgb(230, 230, 230, 0.4);
-    --bg-3: rgba(200, 200, 200, 0.2);
-    --bg-btn: rgba(255, 255, 255, 1);
-    --main-01: rgba(39, 94, 254, 0.1);
-    --main-001: rgba(39, 94, 254, 0.01);
-    --main-05: rgba(39, 94, 254, 0.5);
-    --main-06: rgba(39, 94, 254, 0.6);
-    --scroll: rgb(0, 0, 0, 0.1);
-    --scroll-2: rgb(0, 0, 0, 0.2);
-    --main: rgb(39, 94, 254, 1);
-    --main-dark: rgb(24, 79, 238, 1);
-    --main-darker: rgb(20, 74, 204, 1);
-    --border: rgb(230, 230, 230, 1);
-    --border-05: rgb(230, 230, 230, 0.5);
-    --border-01: rgb(230, 230, 230, 0.1);
-    --green: rgba(1, 212, 73, 1);
-    --pink: rgb(255, 0, 129);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-    background-color: var(--bg);
-    color: var(--font);
-    font-size: 16px;
-}
-
-body {
-    scrollbar-width: auto;
-    scrollbar-color: var(--main-01), transparent;
-}
-
 .footerinfo {
     margin-bottom: 1rem;
     font-size: 0.9rem;
@@ -106,21 +11,6 @@ body {
     margin: 0 6px 0 10px;
 }
 
-.v1:hover #webnn-logo path._logo_n1,
-.v1:hover #webnn-logo circle._logo_n1 {
-    fill: #4777c0;
-}
-
-.v1:hover #webnn-logo path._logo_n2,
-.v1:hover #webnn-logo circle._logo_n2 {
-    stroke: #61bafb;
-    fill: #61bafb;
-}
-
-.v1:hover #webnn-logo circle._logo_n3 {
-    stroke: #61bafb;
-}
-
 #webnnstatus a#webnn_na {
     color: var(--pink);
     background-color: rgba(255, 255, 255, 0.8);
@@ -155,7 +45,7 @@ body {
     width: 40px;
     height: 18px;
     border: 1px solid var(--border);
-    background: linear-gradient(135deg, var(--border-01) 0%, var(--border-05) 40%, var(--border) 100%);
+    background: linear-gradient(135deg, var(--border-1) 0%, var(--border-5) 40%, var(--border) 100%);
     display: inline-block;
     border-radius: 18px;
     position: relative;
@@ -191,55 +81,17 @@ body {
     width: 40px;
 }
 
-.log-output::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-.log-output::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-.log-output::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-.log-output:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
-textarea::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-textarea::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-textarea::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-textarea:hover::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
 .left::-webkit-scrollbar {
     width: 3px !important;
     height: 3px !important;
 }
 
 .left::-webkit-scrollbar-track {
-    background: var(--main-001);
+    background: var(--main-01);
 }
 
 .left::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
+    background-color: var(--scroll-1);
     border-radius: 5px;
     border: 3px solid transparent;
 }
@@ -273,7 +125,7 @@ h1.title span {
     width: 24px;
     height: 24px;
     border-radius: 48px;
-    border: 1px solid var(--main-05);
+    border: 1px solid var(--main-5);
     display: grid;
     align-items: center;
     justify-items: center;
@@ -285,14 +137,14 @@ h1.title span {
 }
 
 #back svg path {
-    fill: var(--main-05);
+    fill: var(--main-5);
 }
 
 #back:hover {
     border: 1px solid var(--main);
     background: linear-gradient(135deg, var(--main) 0%, var(--main-dark) 40%, var(--main-darker) 100%);
     color: var(--bg);
-    box-shadow: 0 3px 15px -1px var(--main-05);
+    box-shadow: 0 3px 15px -1px var(--main-5);
     cursor: pointer;
 }
 
@@ -318,18 +170,18 @@ h1.title span {
 }
 
 .left:hover {
-    background: var(--bg-2);
+    background: var(--main-alpha-2);
 }
 
 .right {
     display: grid;
     align-items: center;
     justify-self: stretch;
-    background: var(--bg-2);
+    background: var(--main-alpha-2);
 }
 
 .right:hover {
-    background: var(--bg-2h);
+    background: var(--main-alpha-4);
 }
 
 .right div {
@@ -351,7 +203,7 @@ h1.title span {
     padding: 8px 8px;
     border: 1px solid var(--border);
     color: var(--font);
-    background-color: var(--bg-2);
+    background-color: var(--main-alpha-2);
     border-radius: 5px;
     font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -363,7 +215,7 @@ h1.title span {
     color: var(--main-dark);
     border: 1px solid var(--main);
     outline: none;
-    background-color: var(--black-02);
+    background-color: var(--black-2);
 }
 
 #negative_prompt {
@@ -464,7 +316,7 @@ h1.title span {
     border: 1px solid var(--main-dark);
     color: var(--bg);
     background: linear-gradient(135deg, var(--main-dark) 0%, var(--main-darker) 40%, var(--main-darker) 100%);
-    box-shadow: 0 3px 15px -1px var(--main-05);
+    box-shadow: 0 3px 15px -1px var(--main-5);
 }
 
 .key button:disabled {
@@ -532,7 +384,7 @@ h1.title span {
 .log-output {
     height: 22vh;
     padding: 10px 10px;
-    background-color: var(--bg-2);
+    background-color: var(--main-alpha-2);
     border: 1px solid var(--border);
     font-size: 0.9rem;
     border-radius: 5px;
diff --git a/demos/whisper-base/index.html b/demos/whisper-base/index.html
index 332545a..6b8409f 100644
--- a/demos/whisper-base/index.html
+++ b/demos/whisper-base/index.html
@@ -1,312 +1,196 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>WebNN Developer Preview - Whisper Base</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
-        <link rel="stylesheet" href="./static/main.css" />
-        <script type="module" src="main.js"></script>
-    </head>
 
-    <body>
-        <div class="grid-2-41 v1">
-            <h1 class="title">
-                <div id="back">
-                    <a href="../../">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                            <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
-                        </svg>
-                    </a>
+<head>
+    <meta charset="utf-8" />
+    <title>WebNN Developer Preview - Whisper Base</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png" />
+    <link rel="stylesheet" href="../../assets/css/style.css" />
+    <link rel="stylesheet" href="./static/main.css" />
+    <script type="module" src="main.js"></script>
+</head>
+
+<body>
+    <div class="grid-2-41 v1">
+        <h1 class="title">
+            <div id="back">
+                <a href="../../">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                        <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+                    </svg>
+                </a>
+            </div>
+            <svg id="webnn-logo" width="734" height="146" viewBox="0 0 734 146" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
+                    fill="#333333" class="_logo_n1" />
+                <path
+                    d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5228 393.523 86 388 86H243C237.477 86 233 81.5228 233 76V18Z"
+                    fill="#B2B2B2" class="_logo_n2" />
+                <path
+                    d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
+                    fill="white" />
+                <path d="M15 66L33 45" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M63 59L44 44" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M77 61L103 55" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M126 16L119 39" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M151 41L127 47" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M161 50L156 85" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M163 38L193 83" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M162 92L188 92" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M148 98L119 119" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M101 90L155 132" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M183 126L155 132" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M194 117L197 105" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M195 131L203 142" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M123 60L149 87" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M67 71L55 103" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M27 72L87 88" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M79 36L97 79" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <path d="M120 11L88 21" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
+                <circle cx="38.5" cy="38.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="69.5" cy="63.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="127.5" cy="8.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="154.5" cy="92.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="112.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="190.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
+                <circle cx="200" cy="93" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
+                <circle cx="115" cy="51" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
+                <circle cx="15" cy="68" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="75" cy="25" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="163" cy="38" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="101" cy="90" r="15" fill="#666666" class="_logo_n1" />
+                <circle cx="156" cy="131" r="15" fill="#666666" class="_logo_n1" />
+            </svg>
+            <span id="title">WebNN</span> Whisper Base
+        </h1>
+        <div id="badge" class="">
+            <div class="badge-text">
+                <span>Powered by</span>
+                <div id="device">GPU</div>
+            </div>
+            <div class="tiles">
+                <div class="tile t0"></div>
+                <div class="tile t1"></div>
+                <div class="tile t2"></div>
+                <div class="tile t1"></div>
+                <div class="tile t2"></div>
+                <div class="tile t3"></div>
+                <div class="tile t2"></div>
+                <div class="tile t3"></div>
+                <div class="tile t4"></div>
+            </div>
+        </div>
+    </div>
+    <div class="v9 grid-2-41">
+        <div class="main">
+            <div id="result-show">
+                <div id="outputText" class="form-control"></div>
+                <div class="container">
+                    <div id="container"></div>
+                </div>
+                <div id="action-bar">
+                    <div>
+                        <button id="copy" class="" type="button" title="Copy to clipboard">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                <path
+                                    d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
+                            </svg>
+                        </button>
+                    </div>
                 </div>
-                <svg
-                    id="webnn-logo"
-                    width="734"
-                    height="146"
-                    viewBox="0 0 734 146"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
-                        fill="#333333"
-                        class="_logo_n1"
-                    />
-                    <path
-                        d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5228 393.523 86 388 86H243C237.477 86 233 81.5228 233 76V18Z"
-                        fill="#B2B2B2"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
-                        fill="white"
-                    />
-                    <path d="M15 66L33 45" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M63 59L44 44" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M77 61L103 55" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path
-                        d="M126 16L119 39"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M151 41L127 47"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M161 50L156 85"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M163 38L193 83"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M162 92L188 92"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M148 98L119 119"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M101 90L155 132"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M183 126L155 132"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M194 117L197 105"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M195 131L203 142"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path
-                        d="M123 60L149 87"
-                        stroke="#B2B2B2"
-                        stroke-width="6"
-                        stroke-linecap="round"
-                        class="_logo_n2"
-                    />
-                    <path d="M67 71L55 103" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M27 72L87 88" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M79 36L97 79" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <path d="M120 11L88 21" stroke="#B2B2B2" stroke-width="6" stroke-linecap="round" class="_logo_n2" />
-                    <circle cx="38.5" cy="38.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="69.5" cy="63.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="127.5" cy="8.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="154.5" cy="92.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="112.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="190.5" cy="124.5" r="6.5" stroke="#B2B2B2" stroke-width="4" class="_logo_n3" />
-                    <circle cx="200" cy="93" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
-                    <circle cx="115" cy="51" r="10" stroke="#B2B2B2" stroke-width="6" class="_logo_n3" />
-                    <circle cx="15" cy="68" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="75" cy="25" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="163" cy="38" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="101" cy="90" r="15" fill="#666666" class="_logo_n1" />
-                    <circle cx="156" cy="131" r="15" fill="#666666" class="_logo_n1" />
-                </svg>
-                <span id="title">WebNN</span> Whisper Base
-            </h1>
-            <div id="badge" class="">
-                <div class="badge-text">
-                    <span>Powered by</span>
-                    <div id="device">GPU</div>
+
+                <div class="progress">
+                    <div id="progress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%"
+                        aria-valuemin="0" aria-valuemax="100"></div>
                 </div>
-                <div class="tiles">
-                    <div class="tile t0"></div>
-                    <div class="tile t1"></div>
-                    <div class="tile t2"></div>
-                    <div class="tile t1"></div>
-                    <div class="tile t2"></div>
-                    <div class="tile t3"></div>
-                    <div class="tile t2"></div>
-                    <div class="tile t3"></div>
-                    <div class="tile t4"></div>
+                <div class="indicator">
+                    <div id="latency"></div>
+                    <div id="audio-processing">
+                        <div>audio processing</div>
+                        <span class="ap1"></span>
+                        <span class="ap2"></span>
+                        <span class="ap3"></span>
+                        <span class="ap4"></span>
+                        <span class="ap5"></span>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="v9 grid-2-41">
-            <div class="main">
-                <div id="result-show">
-                    <div id="outputText" class="form-control"></div>
-                    <div class="container">
-                        <div id="container"></div>
+
+            <div>
+                <div id="controls">
+                    <div class="form-group">
+                        <label for="file-upload" class="file-upload-label disabled" title="Upload audio file"
+                            id="label-file-upload">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                <path
+                                    d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
+                            </svg>
+                        </label>
+                        <input class="file-upload-input" title="Upload audio files" type="file" id="file-upload"
+                            accept=".mp3,.wav,.ogg,.flac;audio/*;capture=microphone" disabled />
                     </div>
-                    <div id="action-bar">
-                        <div>
-                            <button id="copy" class="" type="button" title="Copy to clipboard">
+                    <div>
+                        <button id="record" class="" type="button" title="Record" disabled>
+                            <div class="on">
                                 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                                     <path
-                                        d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"
-                                    />
+                                        d="M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
                                 </svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="progress">
-                        <div
-                            id="progress"
-                            class="progress-bar progress-bar-striped"
-                            role="progressbar"
-                            style="width: 0%"
-                            aria-valuemin="0"
-                            aria-valuemax="100"
-                        ></div>
-                    </div>
-                    <div class="indicator">
-                        <div id="latency"></div>
-                        <div id="audio-processing">
-                            <div>audio processing</div>
-                            <span class="ap1"></span>
-                            <span class="ap2"></span>
-                            <span class="ap3"></span>
-                            <span class="ap4"></span>
-                            <span class="ap5"></span>
-                        </div>
+                            </div>
+                            <div class="off">
+                                <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                    <path
+                                        d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+                                </svg>
+                            </div>
+                        </button>
                     </div>
-                </div>
-
-                <div>
-                    <div id="controls">
-                        <div class="form-group">
-                            <label
-                                for="file-upload"
-                                class="file-upload-label disabled"
-                                title="Upload audio file"
-                                id="label-file-upload"
-                            >
+                    <div>
+                        <button id="speech" class="" type="button" title="Realtime speech" disabled>
+                            <div class="on">
                                 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                                     <path
-                                        d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"
-                                    />
+                                        d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z" />
+                                </svg>
+                            </div>
+                            <div class="off">
+                                <svg class="off" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+                                    width="24">
+                                    <path
+                                        d="m710-362-58-58q14-23 21-48t7-52h80q0 44-13 83.5T710-362ZM480-594Zm112 112-72-72v-206q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v126l-80-80v-46q0-50 35-85t85-35q50 0 85 35t35 85v240q0 11-2.5 20t-5.5 18ZM440-120v-123q-104-14-172-93t-68-184h80q0 83 57.5 141.5T480-320q34 0 64.5-10.5T600-360l57 57q-29 23-63.5 39T520-243v123h-80Zm352 64L56-792l56-56 736 736-56 56Z" />
                                 </svg>
-                            </label>
-                            <input
-                                class="file-upload-input"
-                                title="Upload audio files"
-                                type="file"
-                                id="file-upload"
-                                accept=".mp3,.wav,.ogg,.flac;audio/*;capture=microphone"
-                                disabled
-                            />
-                        </div>
-                        <div>
-                            <button id="record" class="" type="button" title="Record" disabled>
-                                <div class="on">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="24"
-                                        viewBox="0 -960 960 960"
-                                        width="24"
-                                    >
-                                        <path
-                                            d="M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
-                                        />
-                                    </svg>
-                                </div>
-                                <div class="off">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="24"
-                                        viewBox="0 -960 960 960"
-                                        width="24"
-                                    >
-                                        <path
-                                            d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
-                                        />
-                                    </svg>
-                                </div>
-                            </button>
-                        </div>
-                        <div>
-                            <button id="speech" class="" type="button" title="Realtime speech" disabled>
-                                <div class="on">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="24"
-                                        viewBox="0 -960 960 960"
-                                        width="24"
-                                    >
-                                        <path
-                                            d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"
-                                        />
-                                    </svg>
-                                </div>
-                                <div class="off">
-                                    <svg
-                                        class="off"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="24"
-                                        viewBox="0 -960 960 960"
-                                        width="24"
-                                    >
-                                        <path
-                                            d="m710-362-58-58q14-23 21-48t7-52h80q0 44-13 83.5T710-362ZM480-594Zm112 112-72-72v-206q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v126l-80-80v-46q0-50 35-85t85-35q50 0 85 35t35 85v240q0 11-2.5 20t-5.5 18ZM440-120v-123q-104-14-172-93t-68-184h80q0 83 57.5 141.5T480-320q34 0 64.5-10.5T600-360l57 57q-29 23-63.5 39T520-243v123h-80Zm352 64L56-792l56-56 736 736-56 56Z"
-                                        />
-                                    </svg>
-                                </div>
-                            </button>
-                        </div>
+                            </div>
+                        </button>
                     </div>
                 </div>
+            </div>
 
-                <div id="record_play">
-                    <audio id="record_play_audio" controls></audio>
-                </div>
+            <div id="record_play">
+                <audio id="record_play_audio" controls></audio>
             </div>
-            <div id="sidebar">
-                <div id="status" class="log-output"></div>
-                <div class="p-fetch-compile">
-                    <div class="p-bar">
-                        <div id="p-bar-inner" class="p-bar-inner"></div>
-                    </div>
-                    <div class="p-bar-label" id="p-bar-label">0%</div>
+        </div>
+        <div id="sidebar">
+            <div id="log" class="log-output"></div>
+            <div class="p-fetch-compile">
+                <div class="p-bar">
+                    <div id="p-bar-inner" class="p-bar-inner"></div>
                 </div>
-                <div class="footerinfo">
-                    <div id="webnnstatus"><span id="circle"></span> <span id="info">WebNN</span></div>
-                    <div id="versions">
-                        <div id="chromiumversion"></div>
-                        <div id="ortversion"></div>
-                    </div>
+                <div class="p-bar-label" id="p-bar-label">0%</div>
+            </div>
+            <div class="footerinfo">
+                <div id="webnnstatus"><span id="circle"></span> <span id="info">WebNN</span></div>
+                <div id="versions">
+                    <div id="chromiumversion"></div>
+                    <div id="ortversion"></div>
                 </div>
             </div>
         </div>
-    </body>
-</html>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demos/whisper-base/static/main.css b/demos/whisper-base/static/main.css
index e48582c..c02a21b 100644
--- a/demos/whisper-base/static/main.css
+++ b/demos/whisper-base/static/main.css
@@ -1,177 +1,3 @@
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 300;
-    src: url("./fonts/archivo/archivo-v19-latin-300.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 400;
-    src: url("./fonts/archivo/archivo-v19-latin-regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 600;
-    src: url("./fonts/archivo/archivo-v19-latin-600.woff2") format("woff2");
-}
-
-@font-face {
-    font-display: swap;
-    font-family: "Archivo";
-    font-style: normal;
-    font-weight: 700;
-    src: url("./fonts/archivo/archivo-v19-latin-700.woff2") format("woff2");
-}
-
-:root {
-    --bg: rgba(255, 255, 255, 1);
-    --black-02: rgba(240, 240, 240, 0.2);
-    --font: rgba(45, 45, 45, 1);
-    --font-2: rgba(53, 53, 53, 1);
-    --font-weak: rgba(0, 0, 0, 0.6);
-    --disabled: rgba(245, 245, 245, 0.2);
-    --bg-05: rgb(255, 255, 255, 0.05);
-    --bg-2: rgb(255, 255, 255, 0.2);
-    --bg-4: rgba(255, 255, 255, 0.4);
-    --bg-6: rgb(255, 255, 255, 0.6);
-    --bg-8: rgba(255, 255, 255, 0.8);
-    --bg-btn: rgba(255, 255, 255, 1);
-    --npu: rgba(1, 7, 52, 1);
-    --npu-08: rgba(1, 7, 52, 0.8);
-    --main-01: rgba(39, 94, 254, 0.1);
-    --main-04: rgba(39, 94, 254, 0.4);
-    --main-001: rgba(39, 94, 254, 0.01);
-    --main-005: rgba(39, 94, 254, 0.05);
-    --main-05: rgba(39, 94, 254, 0.5);
-    --main-06: rgba(39, 94, 254, 0.6);
-    --scroll: rgb(0, 0, 0, 0.1);
-    --scroll-2: rgb(0, 0, 0, 0.2);
-    --main: rgba(39, 94, 254, 1);
-    --main-dark: rgb(24, 79, 238, 1);
-    --main-darker: rgb(20, 74, 204, 1);
-    --border: rgb(230, 230, 230, 1);
-    --border-2: rgb(230, 230, 230, 0.6);
-    --green: rgba(1, 212, 73, 1);
-    --pink: rgba(255, 0, 129, 1);
-    --pink-08: rgba(255, 0, 129, 0.8);
-    --pink-06: rgba(255, 0, 129, 0.6);
-    --green-01: rgba(1, 212, 73, 0.1);
-    --pink-01: rgba(255, 0, 129, 0.1);
-    --green-02: rgba(1, 212, 73, 0.2);
-    --pink-02: rgba(255, 0, 129, 0.2);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font-family: "Archivo", "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-    background-color: var(--bg);
-    color: var(--font);
-    font-size: 16px;
-    /* background-image: linear-gradient(0deg, #ffffff 0%, #FFDEE9 33%, #B5FFFC 66%, #ffffff 100%);   */
-}
-
-body {
-    scrollbar-width: auto;
-    scrollbar-color: var(--main-01), transparent;
-}
-
-#badge {
-    border-radius: 3px;
-    align-self: center;
-    padding: 4px 10px;
-    color: var(--bg);
-    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
-    background: linear-gradient(to right bottom, var(--pink-06), var(--pink-08), var(--pink));
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-template-rows: 1fr;
-    column-gap: 10px;
-    align-items: center;
-    justify-items: center;
-    width: 120px;
-    justify-self: flex-end;
-}
-
-#badge:hover {
-    background: linear-gradient(135deg, var(--pink-08) 0%, var(--pink) 40%, var(--pink) 100%);
-    box-shadow: 0 3px 15px -1px var(--pink-06);
-}
-
-#badge.npu {
-    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu));
-}
-
-#badge.npu:hover {
-    background: linear-gradient(to right bottom, rgba(117, 116, 242), var(--npu-08), var(--npu));
-    box-shadow: 0 3px 15px -1px var(--npu);
-}
-
-#badge.cpu {
-    background: linear-gradient(to right bottom, var(--main-06), var(--main));
-}
-
-#badge.cpu:hover {
-    background: linear-gradient(to right bottom, var(--main), var(--main-dark), var(--main-darker));
-    box-shadow: 0 3px 15px -1px var(--main-darker);
-}
-
-.badge-text {
-    display: flex;
-    flex-direction: column;
-}
-
-.badge-text span {
-    font-size: 0.6rem;
-}
-
-.tiles {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr;
-    column-gap: 2px;
-    row-gap: 2px;
-    align-items: center;
-}
-
-.tile {
-    border: 1px solid var(--bg);
-    padding: 2px;
-    border-radius: 1px;
-}
-
-.t4 {
-    border-color: var(--bg-8);
-}
-
-.t3 {
-    border-color: var(--bg-6);
-}
-
-.t2 {
-    border-color: var(--bg-4);
-}
-
-.t1 {
-    border-color: var(--bg-2);
-}
-
-.t0 {
-    border-color: var(--bg-05);
-}
-
 .main {
     width: 100%;
 }
@@ -227,21 +53,6 @@ body {
     margin: 0 6px 0 10px;
 }
 
-.v1:hover #webnn-logo path._logo_n1,
-.v1:hover #webnn-logo circle._logo_n1 {
-    fill: #4777c0;
-}
-
-.v1:hover #webnn-logo path._logo_n2,
-.v1:hover #webnn-logo circle._logo_n2 {
-    stroke: #61bafb;
-    fill: #61bafb;
-}
-
-.v1:hover #webnn-logo circle._logo_n3 {
-    stroke: #61bafb;
-}
-
 #webnnstatus a#webnn_na {
     color: var(--pink);
     background-color: rgba(255, 255, 255, 0.8);
@@ -259,29 +70,6 @@ body {
     text-decoration: none;
 }
 
-.log-output::-webkit-scrollbar,
-#outputText::-webkit-scrollbar {
-    width: 3px !important;
-    height: 3px !important;
-}
-
-.log-output::-webkit-scrollbar-track,
-#outputText::-webkit-scrollbar-track {
-    background: var(--main-001);
-}
-
-.log-output::-webkit-scrollbar-thumb,
-#outputText::-webkit-scrollbar-thumb {
-    background-color: var(--scroll);
-    border-radius: 5px;
-    border: 3px solid transparent;
-}
-
-.log-output:hover::-webkit-scrollbar-thumb,
-#outputText::-webkit-scrollbar-thumb {
-    background-color: var(--scroll-2);
-}
-
 h1 {
     padding: 0 0 0 0;
     font-weight: 700;
@@ -310,7 +98,7 @@ h1.title span {
 }
 
 #back svg path {
-    fill: var(--main-05);
+    fill: var(--main-5);
 }
 
 #back:hover {
@@ -353,7 +141,7 @@ h1.title span {
     display: flex;
 }
 
-#action-bar > div {
+#action-bar>div {
     border: 1px solid var(--border);
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
@@ -391,7 +179,7 @@ h1.title span {
     display: none;
 }
 
-.indicator > div {
+.indicator>div {
     color: var(--bg);
     transform: skew(-15deg);
     border-radius: 3px;
@@ -498,17 +286,15 @@ h1.title span {
 }
 
 .progress-striped .progress-bar {
-    background-color: var(--main-05);
-    background-image: linear-gradient(
-        45deg,
-        var(--main-06) 25%,
-        transparent 25%,
-        transparent 50%,
-        var(--main-06) 50%,
-        var(--main-06) 75%,
-        transparent 75%,
-        transparent
-    );
+    background-color: var(--main-5);
+    background-image: linear-gradient(45deg,
+            var(--main-6) 25%,
+            transparent 25%,
+            transparent 50%,
+            var(--main-6) 50%,
+            var(--main-6) 75%,
+            transparent 75%,
+            transparent);
 }
 
 .p-fetch-compile {
@@ -712,7 +498,7 @@ button svg {
 #controls label:hover {
     color: var(--main);
     border: 1px solid var(--main);
-    background-color: var(--main-001);
+    background-color: var(--main-01);
     cursor: pointer;
 }
 
@@ -744,7 +530,7 @@ button svg {
 }
 
 .log-output:hover {
-    border: 1px solid var(--border-2);
+    border: 1px solid var(--border-6);
     background-color: var(--bg-8);
 }
 
@@ -806,13 +592,14 @@ button svg {
     align-items: center;
     padding: 0.5rem;
     margin-bottom: 10px;
-    border: 1px solid var(--border-2);
+    border: 1px solid var(--border-6);
     border-radius: 5px;
     color: var(--font-2);
     background-color: var(--bg-6);
 }
 
 @keyframes bounce {
+
     0%,
     20%,
     50%,
@@ -874,11 +661,11 @@ button svg {
 }
 
 .item.app .head span {
-    background-color: var(--pink-01);
+    background-color: var(--pink-1);
 }
 
 .item.user .head span {
-    background-color: var(--green-01);
+    background-color: var(--green-1);
 }
 
 .item.app:hover .head span {
@@ -1102,8 +889,7 @@ button svg {
 }
 
 /* Largest devices such as desktops (1280px) */
-@media only screen and (max-width: 80em) {
-}
+@media only screen and (max-width: 80em) {}
 
 /* Large devices such as laptops (1024px) */
 @media only screen and (max-width: 64em) {
@@ -1117,10 +903,10 @@ button svg {
 }
 
 /* Medium devices such as tablets (718px) */
-@media only screen and (max-width: 718px) {
-}
+@media only screen and (max-width: 718px) {}
 
 @media only screen and (max-width: 40em) {
+
     #placeholder,
     #placeholder canvas {
         width: 88vw;
@@ -1163,4 +949,4 @@ button svg {
     h1 {
         font-size: 1rem;
     }
-}
+}
\ No newline at end of file
diff --git a/demos/whisper-base/utils.js b/demos/whisper-base/utils.js
index a75dc4e..45c962f 100644
--- a/demos/whisper-base/utils.js
+++ b/demos/whisper-base/utils.js
@@ -165,7 +165,7 @@ async function readResponse(name, response) {
 export function log(i) {
     console.log(i);
     if (getMode()) {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item app">
             <div class="head">
@@ -174,9 +174,9 @@ export function log(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     } else {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item app">
             <div class="head">
@@ -185,14 +185,14 @@ export function log(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     }
 }
 
 export const logError = i => {
     console.error(i);
     if (getMode()) {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
     <div class="item app">
         <div class="head">
@@ -201,9 +201,9 @@ export const logError = i => {
         </div>
         <div class="info">${i}</div>
     </div>
-    ` + $("#status").innerHTML;
+    ` + $("#log").innerHTML;
     } else {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item app">
             <div class="head">
@@ -212,14 +212,14 @@ export const logError = i => {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     }
 };
 
 export function logUser(i) {
     console.log(i);
     if (getMode()) {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item user">
             <div class="head">
@@ -228,9 +228,9 @@ export function logUser(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     } else {
-        $("#status").innerHTML =
+        $("#log").innerHTML =
             `
         <div class="item user">
             <div class="head">
@@ -239,7 +239,7 @@ export function logUser(i) {
             </div>
             <div class="info">${i}</div>
         </div>
-        ` + $("#status").innerHTML;
+        ` + $("#log").innerHTML;
     }
 }