From 0f630b9dca9216041d9ccfac72ed6416a481a9da Mon Sep 17 00:00:00 2001
From: Daniel Legt <contact@danlegt.com>
Date: Thu, 30 Apr 2026 02:34:05 +0300
Subject: [PATCH] chore(cleanup)

---
 warpbox_uploads_win98_dark_v16.html | 2449 ---------------------------
 1 file changed, 2449 deletions(-)
 delete mode 100644 warpbox_uploads_win98_dark_v16.html
diff --git a/warpbox_uploads_win98_dark_v16.html b/warpbox_uploads_win98_dark_v16.html
deleted file mode 100644
index fe02d09..0000000
--- a/warpbox_uploads_win98_dark_v16.html
+++ /dev/null
@@ -1,2449 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>WarpBox - Upload Demo</title>
-  <style>
-    @font-face { font-family: 'PixelOperator'; src: url('/static/fonts/pixel_operator/PixelOperator.ttf'); }
-    @font-face { font-family: 'PixelOperator'; src: url('/static/fonts/pixel_operator/PixelOperator-Bold.ttf'); font-weight: bold; }
-    @font-face { font-family: 'PixeloidSans'; src: url('/static/fonts/pixeloid_sans/PixeloidSans.ttf'); }
-    @font-face { font-family: 'PixeloidSans'; src: url('/static/fonts/pixeloid_sans/PixeloidSans-Bold.ttf'); font-weight: bold; }
-    @font-face { font-family: 'MonoCraft'; src: url('/static/fonts/monocraft/Monocraft.ttf'); }
-
-    :root {
-      font-family: 'PixelOperator', 'MS Sans Serif', Arial, sans-serif;
-      font-smooth: never;
-      image-rendering: pixelated;
-      --base-font-size: 14px;
-      --w98-blue: #000078;
-      --w98-blue-gradient: linear-gradient(to right, #000078, 80%, #0f80cd);
-      --w98-gray: #c0c0c0;
-      --w98-gray2: #a6a6a6;
-      --ok: #008000;
-      --danger: #800000;
-      --sunken: #dfdfdf;
-    }
-
-    * { box-sizing: border-box; }
-
-    html { font-size: var(--base-font-size); color: #fff; background: #000; }
-    html, body { margin: 0; padding: 0; }
-    html { height: 100%; }
-    body {
-      height: 100%;
-      min-height: 100vh;
-      overflow: hidden;
-      background: #000;
-    }
-
-    button, label[for], .menu-button, .win98-button:not(:disabled) { cursor: pointer; }
-    input, textarea, select { font-family: inherit; }
-
-    main {
-      height: 100vh;
-      min-height: 0;
-      display: grid;
-      place-items: center;
-      padding: 18px;
-      position: relative;
-      z-index: 1;
-      overflow: hidden;
-    }
-
-    .desktop-wrap {
-      --window-height: 736px;
-      --side-width: 440px;
-      width: min(1278px, 100%);
-      height: min(var(--window-height), calc(100vh - 36px));
-      max-height: calc(100vh - 36px);
-      display: grid;
-      grid-template-columns: minmax(0, 820px) var(--side-width);
-      grid-template-rows: minmax(0, 1fr);
-      align-items: stretch;
-      justify-content: center;
-      gap: 18px;
-      overflow: hidden;
-    }
-
-    .win98-window {
-      display: flex;
-      flex-direction: column;
-      color: #000;
-      background: var(--w98-gray);
-      border-top: 1px solid #fff;
-      border-left: 1px solid #fff;
-      border-right: 1px solid #000;
-      border-bottom: 1px solid #000;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 4px 5px 0 rgba(0,0,0,.45);
-    }
-
-    .win98-titlebar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 22px;
-      margin: 2px;
-      padding: 2px 3px 2px 6px;
-      color: #fff;
-      background: var(--w98-blue-gradient);
-      user-select: none;
-    }
-
-    .win98-titlebar h1, .win98-titlebar h2 {
-      min-width: 0;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 14px;
-      line-height: 14px;
-      font-weight: bold;
-    }
-
-    .win98-titlebar-label { display: flex; align-items: center; min-width: 0; gap: 5px; }
-    .win98-titlebar-icon {
-      flex: 0 0 auto;
-      width: 16px;
-      height: 16px;
-      display: grid;
-      place-items: center;
-      color: #fff;
-      background: #000078;
-      border: 1px solid #fff;
-      box-shadow: inset -5px 0 0 #0f80cd, inset 0 -5px 0 #4c1ca0;
-      font-size: 11px;
-      line-height: 11px;
-    }
-
-    .win98-window-controls { display: flex; flex: 0 0 auto; gap: 2px; }
-
-    .win98-control {
-      width: 16px;
-      height: 14px;
-      display: grid;
-      place-items: center;
-      color: #000;
-      background: var(--w98-gray);
-      border-top: 1px solid #fff;
-      border-left: 1px solid #fff;
-      border-right: 1px solid #000;
-      border-bottom: 1px solid #000;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
-      font-family: Arial, Helvetica, sans-serif;
-      font-size: 12px;
-      line-height: 12px;
-      padding: 0;
-    }
-
-    .win98-button {
-      min-width: 92px;
-      height: 28px;
-      display: grid;
-      place-items: center;
-      margin: 0;
-      padding: 0 10px;
-      color: #000;
-      background: var(--w98-gray);
-      border-top: 2px solid #fff;
-      border-left: 2px solid #fff;
-      border-right: 2px solid #000;
-      border-bottom: 2px solid #000;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
-      font-family: inherit;
-      font-size: 13px;
-      line-height: 13px;
-      text-align: center;
-      appearance: none;
-    }
-
-    .win98-button:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: default; }
-    .win98-button:active:not(:disabled), .win98-control:active, .menu-button[aria-expanded="true"] {
-      border-top-color: #000;
-      border-left-color: #000;
-      border-right-color: #fff;
-      border-bottom-color: #fff;
-      box-shadow: inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 #808080;
-      padding-top: 1px;
-    }
-
-    .win98-panel {
-      background: #fff;
-      border-top: 1px solid #808080;
-      border-left: 1px solid #808080;
-      border-right: 1px solid #fff;
-      border-bottom: 1px solid #fff;
-    }
-
-    .win98-statusbar {
-      display: grid;
-      gap: 4px;
-      height: 22px;
-      padding: 0 4px 4px;
-      font-size: 12px;
-      line-height: 12px;
-    }
-
-    .win98-statusbar span {
-      display: flex;
-      align-items: center;
-      min-width: 0;
-      padding: 0 5px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-top: 1px solid #808080;
-      border-left: 1px solid #808080;
-      border-right: 1px solid #fff;
-      border-bottom: 1px solid #fff;
-    }
-
-    .menu-bar {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      height: 24px;
-      padding: 1px 6px;
-      font-size: 13px;
-      line-height: 13px;
-      z-index: 5;
-    }
-
-    .menu-item { position: relative; }
-    .menu-button {
-      height: 20px;
-      min-width: 54px;
-      padding: 0 8px;
-      color: #000;
-      background: transparent;
-      border: 1px solid transparent;
-      font-family: inherit;
-      font-size: 13px;
-      text-align: left;
-    }
-
-    .menu-button:hover, .menu-button:focus-visible {
-      border-top: 1px solid #fff;
-      border-left: 1px solid #fff;
-      border-right: 1px solid #808080;
-      border-bottom: 1px solid #808080;
-      outline: none;
-    }
-
-    .menu-popup {
-      position: absolute;
-      top: 22px;
-      left: 0;
-      min-width: 188px;
-      padding: 2px;
-      background: var(--w98-gray);
-      border-top: 2px solid #fff;
-      border-left: 2px solid #fff;
-      border-right: 2px solid #000;
-      border-bottom: 2px solid #000;
-      box-shadow: 3px 3px 0 rgba(0,0,0,.35);
-      display: none;
-      z-index: 20;
-    }
-
-    .menu-item.is-open .menu-popup { display: block; }
-    .menu-action {
-      width: 100%;
-      min-height: 22px;
-      display: grid;
-      grid-template-columns: 20px minmax(0, 1fr) auto;
-      gap: 8px;
-      align-items: center;
-      padding: 2px 6px;
-      color: #000;
-      background: transparent;
-      border: 0;
-      font-family: inherit;
-      font-size: 12px;
-      text-align: left;
-    }
-
-    .menu-action:hover, .menu-action:focus-visible { color: #fff; background: #000078; outline: none; }
-    .menu-separator { height: 1px; margin: 3px 2px; background: #808080; border-bottom: 1px solid #fff; }
-    .shortcut { color: #555; }
-    .menu-action:hover .shortcut { color: #fff; }
-
-    .upload-window { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
-    .upload-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
-    .upload-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0 8px 8px; padding: 12px; }
-
-    .upload-header {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 270px;
-      gap: 10px;
-      margin-bottom: 10px;
-      color: #000;
-    }
-
-    .upload-heading { margin: 0 0 4px; font-size: 20px; line-height: 22px; font-weight: bold; }
-    .upload-subtext { margin: 0; color: #333; font-size: 13px; line-height: 15px; }
-
-    .upload-quota {
-      min-width: 0;
-      padding: 7px;
-      background: #dfdfdf;
-      border-top: 1px solid #fff;
-      border-left: 1px solid #fff;
-      border-right: 1px solid #808080;
-      border-bottom: 1px solid #808080;
-      font-size: 12px;
-      line-height: 13px;
-      overflow: hidden;
-    }
-
-    .upload-quota strong { display: block; margin-bottom: 4px; }
-    .upload-quota-track, .upload-overall-track, .upload-progress {
-      display: block;
-      box-sizing: border-box;
-      min-width: 0;
-      overflow: hidden;
-      background: #fff;
-      border-top: 1px solid #808080;
-      border-left: 1px solid #808080;
-      border-right: 1px solid #dfdfdf;
-      border-bottom: 1px solid #dfdfdf;
-    }
-
-    .upload-quota-track { width: 100%; max-width: 100%; height: 12px; margin-top: 6px; }
-    .upload-quota-bar, .upload-overall-bar, .upload-progress-bar { display: block; width: 0%; max-width: 100%; height: 100%; background: #000078; }
-    .upload-quota-bar { width: 0%; }
-
-    .upload-dropzone {
-      flex: 0 0 auto;
-      min-height: 154px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 18px;
-      text-align: center;
-      background: #dfdfdf;
-      border: 1px dotted #000;
-      color: #000;
-    }
-
-    .upload-dropzone.is-dragging, .upload-dropzone:hover { background: #c7d8f2; outline: 2px solid #000078; outline-offset: -4px; }
-    .upload-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
-
-    .upload-icon {
-      width: 34px;
-      height: 30px;
-      position: relative;
-      background: #fff;
-      border: 2px solid #000;
-      box-shadow: inset -3px -3px 0 #dfdfdf;
-    }
-
-    .upload-icon:before {
-      content: "";
-      position: absolute;
-      right: -2px;
-      top: -2px;
-      width: 10px;
-      height: 10px;
-      background: #dfdfdf;
-      border-left: 2px solid #000;
-      border-bottom: 2px solid #000;
-    }
-
-    .upload-primary { font-size: 18px; line-height: 18px; font-weight: bold; }
-    .upload-secondary { color: #333; font-size: 13px; line-height: 15px; }
-    .upload-linklike { color: #000078; text-decoration: underline; font-weight: bold; }
-
-    .upload-details {
-      display: flex;
-      align-items: center;
-      min-height: 28px;
-      margin-top: 12px;
-      padding: 5px 8px;
-      background: #fff;
-      border-top: 1px solid #808080;
-      border-left: 1px solid #808080;
-      border-right: 1px solid #dfdfdf;
-      border-bottom: 1px solid #dfdfdf;
-      font-size: 13px;
-      line-height: 13px;
-    }
-
-    .upload-detail-label { flex: 0 0 auto; margin-right: 6px; font-weight: bold; }
-    .upload-file-count { margin-left: auto; }
-
-    .upload-file-list {
-      flex: 1 1 auto;
-      min-height: 0;
-      margin-top: 8px;
-      overflow-y: auto;
-      background: #fff;
-      border-top: 2px solid #808080;
-      border-left: 2px solid #808080;
-      border-right: 2px solid #fff;
-      border-bottom: 2px solid #fff;
-    }
-
-    .upload-empty-state { margin: 0; padding: 10px 8px; color: #555; font-size: 13px; line-height: 15px; }
-
-    .upload-file-row {
-      display: grid;
-      grid-template-columns: 22px minmax(0, 1fr) 82px 30px;
-      grid-template-rows: 20px 8px;
-      align-items: center;
-      height: 38px;
-      padding: 4px 8px;
-      border-bottom: 1px solid #dfdfdf;
-      font-size: 13px;
-      line-height: 13px;
-      column-gap: 6px;
-    }
-
-    .upload-file-row:nth-child(even) { background: #f7f7f7; }
-    .upload-file-row.is-working { animation: upload-row-loading 900ms steps(2, end) infinite; }
-    @keyframes upload-row-loading { 0% { background-color: #fff; } 100% { background-color: #e6e6e6; } }
-
-    .upload-file-icon {
-      grid-row: 1 / 3;
-      width: 18px;
-      height: 18px;
-      display: grid;
-      place-items: center;
-      background: #fff;
-      border: 1px solid #808080;
-      color: #000078;
-      font-size: 8px;
-      line-height: 8px;
-      font-weight: bold;
-      overflow: hidden;
-    }
-
-    .upload-file-name, .upload-file-size { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .upload-file-size { text-align: right; color: #333; }
-    .upload-file-remove { grid-column: 4; grid-row: 1 / 3; justify-self: end; width: 22px; min-width: 22px; height: 22px; padding: 0; font-size: 12px; }
-    .upload-progress { grid-column: 2 / 4; grid-row: 2; height: 8px; width: 100%; }
-    .upload-file-row.is-uploaded .upload-progress-bar { background: #008000; }
-    .upload-file-row.is-failed .upload-progress-bar { background: #800000; width: 100%; }
-
-    .upload-result {
-      display: grid;
-      grid-template-columns: 72px minmax(0, 1fr) 72px;
-      align-items: center;
-      gap: 6px;
-      min-height: 36px;
-      margin-top: 8px;
-      padding: 4px 6px;
-      background: #dfdfdf;
-      border-top: 1px solid #808080;
-      border-left: 1px solid #808080;
-      border-right: 1px solid #fff;
-      border-bottom: 1px solid #fff;
-      font-size: 12px;
-      line-height: 12px;
-    }
-
-    .upload-result-label { font-weight: bold; }
-    .upload-result-link { min-width: 0; overflow: hidden; color: #000078; text-overflow: ellipsis; white-space: nowrap; }
-    .upload-result-link.is-empty { color: #555; text-decoration: none; pointer-events: none; }
-    .upload-share-button { min-width: 72px; width: 72px; height: 24px; font-size: 12px; line-height: 12px; }
-
-    .upload-overall {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 42px;
-      align-items: center;
-      gap: 6px;
-      height: 28px;
-      padding: 0 8px 8px;
-      font-size: 12px;
-      line-height: 12px;
-    }
-
-    .upload-overall-track { height: 18px; border-width: 2px; border-color: #808080 #fff #fff #808080; }
-    .upload-overall-bar { background-image: repeating-linear-gradient(to right, #000078 0, #000078 10px, #c0c0c0 10px, #c0c0c0 12px); }
-    .upload-overall-percent { min-width: 0; text-align: right; }
-
-    .upload-actions { display: flex; justify-content: flex-end; gap: 8px; height: 40px; padding: 0 8px 8px; }
-    .upload-statusbar { grid-template-columns: 1fr 100px; }
-
-    .side-stack {
-      width: var(--side-width);
-      min-width: var(--side-width);
-      max-width: var(--side-width);
-      height: 100%;
-      min-height: 0;
-      display: grid;
-      grid-template-columns: var(--side-width);
-      grid-template-rows: 350px 210px 1fr;
-      align-content: stretch;
-      gap: 12px;
-      padding-top: 0;
-      overflow: hidden;
-    }
-
-    .side-panel {
-      width: var(--side-width);
-      min-width: var(--side-width);
-      max-width: var(--side-width);
-      min-height: 0;
-      resize: none;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 3px 4px 0 rgba(0,0,0,.38);
-    }
-
-    .side-panel:first-child, .side-panel:nth-child(2) { height: 100%; }
-    .side-body { margin: 0 6px 6px; padding: 9px; font-size: 13px; line-height: 15px; color: #000; }
-
-    .box-options-form { display: grid; gap: 8px; }
-    .option-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px; align-items: center; }
-    .option-check { display: flex; gap: 6px; align-items: center; }
-    .option-check input { width: 13px; height: 13px; margin: 0; }
-    .upload-select, .upload-text-input {
-      width: 100%;
-      height: 22px;
-      padding: 1px 4px;
-      color: #000;
-      background: #fff;
-      border-top: 1px solid #808080;
-      border-left: 1px solid #808080;
-      border-right: 1px solid #fff;
-      border-bottom: 1px solid #fff;
-      font-size: 12px;
-      line-height: 12px;
-    }
-
-    .terminal-box {
-      min-height: 132px;
-      padding: 10px;
-      color: #00ff66;
-      background: #000;
-      border: 0;
-      font-family: 'PixelOperator', 'Courier New', monospace;
-      font-size: 13px;
-      line-height: 16px;
-      white-space: pre-wrap;
-      overflow: auto;
-    }
-
-    .terminal-muted { color: #80b88f; }
-
-
-    .terminal-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
-    .terminal-copy-button { min-width: 148px; height: 24px; font-size: 12px; line-height: 12px; }
-    .helper-window { width: var(--side-width); min-width: var(--side-width); max-width: var(--side-width); min-height: 0; overflow: hidden; }
-    .helper-body { margin: 0 6px 6px; height: calc(100% - 34px); min-height: 0; padding: 10px; display: flex; align-items: center; justify-content: space-around; gap: 12px; overflow: auto; }
-    .folder-icon-button { width: 86px; min-width: 86px; height: 68px; display: grid; grid-template-rows: 34px 1fr; place-items: center; gap: 4px; padding: 4px; color: #000; background: transparent; border: 1px solid transparent; font-family: inherit; font-size: 12px; line-height: 12px; }
-    .folder-icon-button:hover, .folder-icon-button:focus-visible { color: #fff; background: #000078; border: 1px dotted #fff; outline: none; }
-    .folder-icon { width: 34px; height: 26px; position: relative; display: block; background: #f7d66a; border-top: 1px solid #fff5bd; border-left: 1px solid #fff5bd; border-right: 1px solid #7a5b00; border-bottom: 1px solid #7a5b00; box-shadow: inset -2px -2px 0 #d0a728; }
-    .folder-icon:before { content: ""; position: absolute; left: 3px; top: -6px; width: 15px; height: 7px; background: #f7d66a; border-top: 1px solid #fff5bd; border-left: 1px solid #fff5bd; border-right: 1px solid #7a5b00; }
-
-    .upload-quota {
-      background: #c7d8f2;
-      border-top-color: #ffffff;
-      border-left-color: #ffffff;
-      border-right-color: #404040;
-      border-bottom-color: #404040;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #e9f2ff;
-    }
-    .upload-quota strong { font-size: 13px; }
-    .upload-quota-track { height: 16px; border-width: 2px; border-color: #808080 #ffffff #ffffff #808080; }
-    .upload-quota-bar {
-      background-color: #000078;
-      background-image: repeating-linear-gradient(to right, #000078 0, #000078 8px, #0f80cd 8px, #0f80cd 11px);
-    }
-
-    .side-panel { display: flex; flex-direction: column; }
-    .side-body { flex: 1 1 auto; overflow: auto; background: #ffffff; }
-    .box-options-form { min-height: 100%; align-content: start; }
-
-    .option-check { position: relative; min-height: 18px; }
-    .option-check input[type="checkbox"] {
-      position: absolute;
-      opacity: 0;
-      width: 1px;
-      height: 1px;
-      margin: 0;
-    }
-    .option-check span { position: relative; padding-left: 20px; }
-    .option-check span:before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 1px;
-      width: 13px;
-      height: 13px;
-      background: #ffffff;
-      border-top: 1px solid #808080;
-      border-left: 1px solid #808080;
-      border-right: 1px solid #ffffff;
-      border-bottom: 1px solid #ffffff;
-      box-shadow: inset 1px 1px 0 #000000;
-    }
-    .option-check input[type="checkbox"]:checked + span:after {
-      content: "✓";
-      position: absolute;
-      left: 2px;
-      top: -2px;
-      color: #000000;
-      font-family: Arial, Helvetica, sans-serif;
-      font-size: 16px;
-      line-height: 16px;
-      font-weight: bold;
-    }
-    .option-check input[type="checkbox"]:focus-visible + span { outline: 1px dotted #000000; outline-offset: 2px; }
-
-    .start-upload-cta {
-      min-width: 128px;
-      position: relative;
-      overflow: hidden;
-      isolation: isolate;
-      font-weight: bold;
-      background: transparent;
-      animation: start-breathe 1.55s steps(12, end) infinite, start-tilt 2.1s steps(6, end) infinite;
-    }
-    .start-upload-cta:before {
-      content: "";
-      position: absolute;
-      inset: -3px;
-      z-index: -1;
-      background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
-      animation: start-rainbow 1.1s linear infinite;
-    }
-    .start-upload-cta:after {
-      content: "";
-      position: absolute;
-      inset: 3px;
-      z-index: -1;
-      background: var(--w98-gray);
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
-    }
-    .start-upload-cta:hover:not(:disabled) {
-      transform: scale(1.06) rotate(-1deg);
-      filter: brightness(1.08);
-    }
-    .start-upload-cta:active:not(:disabled) { transform: scale(.99); }
-    @keyframes start-rainbow { to { transform: rotate(1turn); } }
-    @keyframes start-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
-    @keyframes start-tilt { 0%, 100% { rotate: 0deg; } 25% { rotate: -1deg; } 75% { rotate: 1deg; } }
-
-    .modal-backdrop {
-      position: fixed;
-      inset: 0;
-      display: none;
-      background: rgba(128, 128, 128, .42);
-      z-index: 70;
-    }
-    .modal-backdrop.is-visible { display: block; }
-    .popup-window { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(780px, calc(100vw - 24px)); max-height: min(760px, calc(100vh - 24px)); display: none; z-index: 80; }
-    .popup-window.is-visible { display: flex; }
-    .popup-body { margin: 0 6px 6px; padding: 12px; max-height: calc(100vh - 90px); overflow: auto; font-size: 13px; line-height: 16px; color: #000; }
-    .popup-body h3 { margin: 0 0 8px; font-size: 16px; line-height: 18px; }
-    .popup-body h4 { margin: 14px 0 6px; font-size: 14px; line-height: 16px; }
-    .popup-body p { margin: 0 0 8px; }
-    .popup-body ul, .popup-body ol { margin: 0 0 8px 18px; padding: 0; }
-    .popup-body li { margin: 0 0 4px; }
-    .popup-body pre { margin: 6px 0 10px; padding: 8px; overflow: auto; color: #00ff66; background: #000; border: 0; font-family: 'PixelOperator', 'Courier New', monospace; font-size: 12px; line-height: 15px; white-space: pre-wrap; }
-    .popup-close { cursor: pointer; }
-
-    .toast {
-      position: fixed;
-      right: 12px;
-      bottom: 52px;
-      max-width: min(360px, calc(100vw - 24px));
-      display: none;
-      padding: 8px 10px;
-      color: #000;
-      background: #ffffcc;
-      border-top: 2px solid #fff;
-      border-left: 2px solid #fff;
-      border-right: 2px solid #000;
-      border-bottom: 2px solid #000;
-      z-index: 60;
-      font-size: 12px;
-      line-height: 14px;
-      box-shadow: 4px 4px 0 rgba(0,0,0,.45);
-    }
-    .toast.is-visible { display: block; }
-
-    @media (max-width: 1320px) {
-      body { height: auto; min-height: 100vh; overflow-y: auto; }
-      main { height: auto; min-height: 100vh; place-items: start center; overflow: visible; }
-      .desktop-wrap {
-        --window-height: 680px;
-        grid-template-columns: minmax(0, 820px);
-        grid-template-rows: var(--window-height) auto;
-        width: min(820px, 100%);
-        max-width: 820px;
-        height: auto;
-        max-height: none;
-        overflow: visible;
-      }
-      .side-stack {
-        display: grid;
-        width: 100%;
-        min-width: 0;
-        max-width: none;
-        height: auto;
-        grid-template-columns: 1fr;
-        grid-template-rows: 350px 210px 132px;
-        overflow: visible;
-      }
-      .side-panel,
-      .helper-window {
-        width: 100%;
-        min-width: 0;
-        max-width: none;
-      }
-    }
-
-    @media (min-width: 1440px) {
-      .desktop-wrap { --window-height: 780px; }
-      .side-stack { grid-template-rows: 372px 230px 1fr; }
-    }
-
-    @media (max-width: 760px) {
-      body { height: auto; min-height: 100vh; overflow-y: auto; }
-      main { height: auto; min-height: 100dvh; place-items: stretch; align-items: stretch; padding: 0; overflow: visible; }
-      .desktop-wrap { --window-height: auto; width: 100%; max-width: none; height: auto; max-height: none; min-height: 100dvh; gap: 10px; grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: visible; }
-      .upload-window { min-height: 100dvh; height: auto; width: 100vw; border-left: 0; border-right: 0; box-shadow: none; }
-      .side-stack { display: grid; width: 100%; min-width: 0; max-width: none; height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 0 6px 12px; overflow: visible; }
-      .side-panel, .helper-window { width: 100%; min-width: 0; max-width: none; min-height: 0; }
-      .side-panel:first-child { min-height: 360px; }
-      .side-panel:nth-child(2) { min-height: 210px; }
-      .helper-window { min-height: 128px; }
-      .upload-header { grid-template-columns: 1fr; }
-      .upload-panel { margin: 0 6px 8px; padding: 10px; }
-      .upload-dropzone { min-height: 118px; padding: 14px 10px; }
-      .upload-primary { font-size: 16px; }
-      .upload-details { flex-wrap: wrap; gap: 4px; }
-      .upload-file-count { margin-left: 0; width: 100%; }
-      .upload-file-row { grid-template-columns: 22px minmax(0, 1fr) 58px 28px; padding: 4px 5px; font-size: 12px; }
-      .upload-result { grid-template-columns: 1fr 72px; }
-      .upload-result-label { grid-column: 1 / 3; }
-      .upload-actions { justify-content: stretch; }
-      .upload-actions .win98-button { flex: 1; min-width: 0; }
-      .menu-bar { overflow-x: auto; }
-      .menu-popup { position: fixed; left: 6px; right: 6px; top: 50px; min-width: 0; }
-      .helper-body { justify-content: center; flex-wrap: wrap; height: auto; min-height: 88px; }
-      .popup-window {
-        left: 0;
-        top: 0;
-        transform: none;
-        width: 100vw;
-        height: 100dvh;
-        max-height: none;
-        border: 0;
-        box-shadow: none;
-      }
-      .popup-window .win98-titlebar { height: 32px; }
-      .popup-window .win98-titlebar h2 { font-size: 15px; }
-      .popup-close { width: 28px; height: 24px; font-size: 18px; font-weight: bold; }
-      .popup-body { max-height: calc(100dvh - 40px); margin: 0 6px 6px; }
-      .popup-window.is-visible { animation: popup-open-mobile-v10 160ms steps(5, end); }
-      @keyframes popup-open-mobile-v10 { from { transform: translateY(10px); opacity: .35; } to { transform: translateY(0); opacity: 1; } }
-    }
-
-    @media (max-width: 420px) {
-      :root { --base-font-size: 13px; }
-      .upload-window { min-width: 0; }
-      .win98-titlebar h1 { font-size: 13px; }
-      .upload-file-size { display: none; }
-      .upload-file-row { grid-template-columns: 22px minmax(0, 1fr) 28px; }
-      .upload-file-remove { grid-column: 3; }
-      .upload-progress { grid-column: 2 / 3; }
-    }
-
-
-    /* v9 polish and accessibility pass */
-    body { font-family: 'PixelOperator', 'MS Sans Serif', Arial, sans-serif; }
-    .terminal-box, .terminal-box pre, .terminal-box code { font-family: 'MonoCraft', 'PixelOperatorMono', 'Courier New', monospace; }
-    :focus-visible { outline: 2px dotted #000078; outline-offset: 2px; }
-    .terminal-box:focus-visible, .upload-dropzone:focus-visible { outline: 2px dotted #fff; outline-offset: 2px; }
-    .win98-minimize { align-items: start; padding-bottom: 2px; line-height: 9px; }
-    .upload-dropzone.is-current-step { animation: dropzone-attention 1500ms steps(4, end) infinite; }
-    @keyframes dropzone-attention { 0%, 100% { box-shadow: inset 0 0 0 0 #000078; transform: translateY(0); } 50% { box-shadow: inset 0 0 0 3px #000078; transform: translateY(-1px); } }
-    .start-upload-cta { animation: none; position: relative; }
-    .start-upload-cta.is-current-step { border-color: #fff #000 #000 #fff; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 0 0 0 2px #000078; animation: start-ready-breathe 900ms steps(5, end) infinite; }
-    .start-upload-cta.is-current-step::after { content: ""; position: absolute; inset: -4px; pointer-events: none; background: repeating-linear-gradient(90deg, #ff004c 0 8px, #ffcc00 8px 16px, #00d26a 16px 24px, #00a2ff 24px 32px, #8c48ff 32px 40px); z-index: -1; animation: border-march 650ms steps(8, end) infinite; }
-    .start-upload-cta.is-current-step:hover { transform: translateY(-1px); }
-    @keyframes start-ready-breathe { 0%, 100% { transform: rotate(-.4deg) scale(1); } 50% { transform: rotate(.4deg) scale(1.025); } }
-    @keyframes border-march { to { background-position: 40px 0; } }
-    .upload-result.is-current-step { animation: share-ready-pulse 1100ms steps(4, end) infinite; }
-    @keyframes share-ready-pulse { 50% { filter: brightness(1.08); box-shadow: 0 0 0 2px #000078; } }
-    .upload-progress-bar.just-completed, .upload-overall-bar.just-completed { animation: progress-impact 560ms steps(5, end); }
-    @keyframes progress-impact { 0% { transform: scaleX(.96); filter: brightness(1); } 35% { transform: scaleX(1); filter: brightness(2); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #008000; } 100% { filter: brightness(1); } }
-    .toast.is-visible { animation: toast-in 180ms steps(3, end), toast-buzz 700ms steps(2, end) 180ms; }
-    @keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
-    @keyframes toast-buzz { 0%, 100% { margin-right: 0; } 25% { margin-right: 2px; } 50% { margin-right: -2px; } }
-    .popup-window.is-visible { animation: popup-open 180ms steps(5, end); }
-    @keyframes popup-open { from { transform: translate(-50%, -48%) scale(.97); opacity: .45; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
-    .terminal-box { position: relative; white-space: pre-wrap; }
-    .terminal-box::after { content: "█"; display: inline-block; margin-left: 2px; color: #7dff8a; animation: terminal-cursor 1s steps(2, end) infinite; }
-    @keyframes terminal-cursor { 50% { opacity: 0; } }
-    .option-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
-    .option-check span { position: relative; padding-left: 22px; min-height: 16px; display: inline-flex; align-items: center; }
-    .option-check span::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; background: #fff; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #fff; border-bottom: 2px solid #fff; box-shadow: inset -1px -1px 0 #dfdfdf; }
-    .option-check input[type="checkbox"]:checked + span::after { content: "✓"; position: absolute; left: 2px; top: -3px; font-weight: bold; font-size: 18px; color: #000; }
-    .option-check input[type="checkbox"]:focus-visible + span { outline: 1px dotted #000; outline-offset: 3px; }
-    .api-key-row { display: none; }
-    .api-key-row.is-visible { display: grid; }
-    .kbd { display: inline-block; min-width: 20px; padding: 1px 5px; margin: 0 2px; background: #dfdfdf; color: #000; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #000; border-bottom: 1px solid #000; box-shadow: inset -1px -1px 0 #808080; font-family: 'MonoCraft', monospace; font-size: 12px; line-height: 15px; text-align: center; }
-    .faq-list { display: grid; gap: 10px; }
-    .faq-item { background: #fff; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 8px; }
-    .faq-q, .faq-a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; }
-    .faq-q { font-weight: bold; margin-bottom: 6px; }
-    .faq-a { color: #222; }
-    .faq-icon { width: 16px; height: 16px; display: grid; place-items: center; background: #c0c0c0; color: #000; border: 1px solid #000; font-weight: bold; }
-    .copy-fallback-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
-    .copy-fallback-text { width: 100%; min-height: 58px; font-family: 'MonoCraft', monospace; }
-
-    .start-upload-cta { overflow: visible; isolation: auto; background: var(--w98-gray); }
-    .start-upload-cta::before, .start-upload-cta::after { content: none; }
-    .start-upload-cta.is-current-step::after { content: ""; }
-
-
-
-    /* v10 texture, depth, and old-web polish */
-    * { scrollbar-width: auto; scrollbar-color: #c0c0c0 #808080; }
-    ::-webkit-scrollbar { width: 16px; height: 16px; background: #c0c0c0; }
-    ::-webkit-scrollbar-track {
-      background: repeating-linear-gradient(45deg, #c0c0c0 0 2px, #b5b5b5 2px 4px);
-      border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #fff; border-bottom: 1px solid #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #c0c0c0;
-      border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
-    }
-    ::-webkit-scrollbar-button:single-button {
-      width: 16px; height: 16px; background: #c0c0c0;
-      border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
-    }
-    ::-webkit-scrollbar-corner { background: #c0c0c0; }
-    body {
-      background-color: #000;
-      background-image: radial-gradient(circle at 18px 18px, rgba(255,255,255,.08) 1px, transparent 1px), radial-gradient(circle at 78px 42px, rgba(15,128,205,.08) 1px, transparent 1px);
-      background-size: 96px 96px, 132px 132px;
-    }
-    .win98-window {
-      background-color: #c0c0c0;
-      background-image: linear-gradient(180deg, rgba(255,255,255,.34), rgba(0,0,0,.06)), repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px);
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 5px 6px 0 rgba(0,0,0,.5);
-    }
-    .win98-titlebar {
-      background-image: linear-gradient(to right, #000078, #0f80cd 82%, #85c7ff), repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 4px);
-      box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.35);
-    }
-    .upload-panel, .side-body, .helper-body, .popup-body {
-      background-color: #fff;
-      background-image: linear-gradient(180deg, rgba(255,255,255,.9), rgba(238,238,238,.58)), repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 6px);
-    }
-    .upload-header {
-      background: #dfdfdf;
-      border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #808080; border-bottom: 1px solid #808080;
-      padding: 8px;
-      box-shadow: inset 1px 1px 0 #f7f7f7, inset -1px -1px 0 #b0b0b0;
-    }
-    .upload-dropzone {
-      background: repeating-linear-gradient(45deg, #dfdfdf 0 4px, #e9e9e9 4px 8px), #dfdfdf;
-      border: 1px solid #808080;
-      box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.7);
-    }
-    .upload-dropzone.is-dragging, .upload-dropzone:hover {
-      background: repeating-linear-gradient(45deg, #c7d8f2 0 4px, #d8e5f8 4px 8px), #c7d8f2;
-      outline: 2px dashed #000078; outline-offset: -6px;
-    }
-    .upload-dropzone.is-current-step { animation: dropzone-attention 1500ms steps(5, end) infinite; }
-    @keyframes dropzone-attention {
-      0%, 100% { filter: brightness(1); transform: translateY(0); }
-      50% { filter: brightness(1.07); transform: translateY(-1px); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 rgba(0,0,0,.2), 0 0 0 2px rgba(0,0,120,.5); }
-    }
-    .upload-details, .upload-result, .upload-quota, .upload-overall-track { box-shadow: inset 1px 1px 0 rgba(0,0,0,.16), inset -1px -1px 0 rgba(255,255,255,.75); }
-    .upload-file-list {
-      background: linear-gradient(#fff, #fff), repeating-linear-gradient(90deg, #f8f8ff 0 32px, #fff 32px 64px);
-      border-top: 2px solid #606060; border-left: 2px solid #606060; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
-    }
-    .upload-file-row:nth-child(odd) { background: rgba(255,255,255,.92); }
-    .upload-file-row:nth-child(even) { background: rgba(240,244,255,.88); }
-    .upload-file-row:hover { background: #d8e5f8; }
-    .side-panel:nth-child(2) .side-body { display: flex; flex-direction: column; min-height: 0; }
-    .terminal-box {
-      flex: 1 1 auto; min-height: 104px; max-height: 134px; overflow: auto; padding: 10px;
-      color: #00ff66; background-color: #050505;
-      background-image: radial-gradient(circle at 14px 10px, rgba(0,255,102,.10), transparent 22px), repeating-linear-gradient(transparent 0 2px, rgba(0,255,102,.055) 2px 4px);
-      border: 0;
-      box-shadow: inset 2px 2px 0 #000, inset -1px -1px 0 rgba(255,255,255,.55), 0 0 10px rgba(0,255,102,.12);
-      text-shadow: 0 0 5px rgba(0,255,102,.75);
-    }
-    .terminal-actions { flex: 0 0 auto; margin-top: 8px; padding-top: 2px; }
-    .start-upload-cta.is-current-step {
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 0 0 0 1px #000078, 0 0 8px rgba(0,0,120,.28);
-      animation: start-ready-breathe 1100ms steps(5, end) infinite;
-    }
-    .start-upload-cta.is-current-step::after {
-      content: ""; position: absolute; inset: -3px; pointer-events: none;
-      background: repeating-linear-gradient(90deg, rgba(255,0,76,.32) 0 8px, rgba(255,204,0,.32) 8px 16px, rgba(0,210,106,.32) 16px 24px, rgba(0,162,255,.32) 24px 32px, rgba(140,72,255,.32) 32px 40px);
-      z-index: -1; animation: border-march 900ms steps(8, end) infinite;
-    }
-    @keyframes start-ready-breathe { 0%, 100% { transform: rotate(-.25deg) scale(1); } 50% { transform: rotate(.25deg) scale(1.012); } }
-    .upload-progress-bar, .upload-overall-bar { position: relative; transform-origin: left center; }
-    .upload-progress-bar.just-completed, .upload-overall-bar.just-completed { animation: progress-impact-bar 520ms steps(5, end) 1; }
-    .upload-progress-bar.just-completed::after, .upload-overall-bar.just-completed::after {
-      content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 22px; transform: translateY(-50%);
-      background: repeating-linear-gradient(45deg, rgba(255,255,255,.95) 0 2px, rgba(0,255,102,.85) 2px 4px, transparent 4px 6px);
-      box-shadow: 0 0 0 1px #fff, 0 0 8px #00ff66; pointer-events: none; animation: progress-impact-spark 520ms steps(5, end) 1;
-    }
-    @keyframes progress-impact-bar { 0% { filter: brightness(1); } 35% { filter: brightness(1.75); } 100% { filter: brightness(1); } }
-    @keyframes progress-impact-spark { 0% { opacity: 0; transform: translateY(-50%) scale(.7); } 30% { opacity: 1; transform: translateY(-50%) scale(1.18); } 100% { opacity: 0; transform: translateY(-50%) scale(.7); } }
-    .popup-window.is-visible { animation: popup-open-v10 180ms steps(5, end); }
-    @keyframes popup-open-v10 { from { transform: translate(-50%, -48%) scale(.97); opacity: .35; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
-    .toast { background: repeating-linear-gradient(45deg, #ffffcc 0 5px, #fff8aa 5px 10px); }
-
-
-    @media (max-width: 760px) {
-      .popup-window.is-visible { animation: popup-open-mobile-v10-final 160ms steps(5, end); }
-      @keyframes popup-open-mobile-v10-final { from { transform: translateY(10px); opacity: .35; } to { transform: translateY(0); opacity: 1; } }
-    }
-
-    
-
-    /* v11 polish and stricter upload-state UX */
-    .win98-titlebar { background-size: 160% 100%, 8px 100%; animation: titlebar-drift 8s linear infinite; }
-    @keyframes titlebar-drift { from { background-position: 0 0, 0 0; } to { background-position: 160% 0, 24px 0; } }
-
-    .start-upload-cta.is-current-step {
-      background: var(--w98-gray);
-      border-color: #ffffff #000000 #000000 #ffffff;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 0 0 0 1px rgba(0,0,120,.75);
-      animation: start-ready-breathe-subtle 1200ms steps(5, end) infinite;
-    }
-    .start-upload-cta.is-current-step::after {
-      content: "";
-      position: absolute;
-      inset: -3px;
-      pointer-events: none;
-      z-index: -1;
-      background: none;
-      border: 2px solid transparent;
-      border-image: repeating-linear-gradient(90deg, rgba(255,0,76,.48) 0 8px, rgba(255,204,0,.48) 8px 16px, rgba(0,210,106,.48) 16px 24px, rgba(0,162,255,.48) 24px 32px, rgba(140,72,255,.48) 32px 40px) 1;
-      animation: border-march 1800ms steps(10, end) infinite;
-    }
-    @keyframes start-ready-breathe-subtle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.006); } }
-
-    .terminal-box {
-      color: #b7ffc8;
-      background-image: repeating-linear-gradient(transparent 0 3px, rgba(0,255,102,.028) 3px 5px);
-      box-shadow: inset 2px 2px 0 #000, inset -1px -1px 0 rgba(255,255,255,.38);
-      text-shadow: none;
-    }
-    .terminal-muted { color: #82b68c; }
-
-    .helper-body {
-      justify-content: flex-start;
-      align-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .folder-icon-button { flex: 0 0 86px; }
-    .folder-icon-button-disabled { color: #606060; }
-    .folder-icon-button-disabled .folder-icon { filter: grayscale(.9); opacity: .75; }
-    .folder-icon-exe { background: #dfdfdf; box-shadow: inset -2px -2px 0 #aaa; }
-    .folder-icon-exe:before { background: #dfdfdf; }
-
-    .upload-quota.is-quota-warning {
-      background: repeating-linear-gradient(45deg, #ffdede 0 5px, #fff2a8 5px 10px);
-      border-color: #800000 #800000 #800000 #800000;
-      animation: quota-warning-breathe 900ms steps(4, end) infinite;
-    }
-    .upload-quota-bar.is-over-quota {
-      background-image: repeating-linear-gradient(45deg, #800000 0 7px, #ffcc00 7px 14px);
-    }
-    .upload-file-row.is-too-large {
-      position: relative;
-      background: #fff0b8 !important;
-      animation: row-warning-breathe 900ms steps(4, end) infinite;
-    }
-    .upload-file-row.is-too-large::after {
-      content: "";
-      position: absolute;
-      inset: 1px;
-      pointer-events: none;
-      border: 2px solid transparent;
-      border-image: repeating-linear-gradient(90deg, #800000 0 8px, #ffcc00 8px 16px) 1;
-    }
-    @keyframes row-warning-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
-    @keyframes quota-warning-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
-
-    .upload-dropzone.is-locked {
-      opacity: .72;
-      cursor: not-allowed;
-      filter: grayscale(.3);
-    }
-    .upload-dropzone.is-locked .upload-primary::after { content: " - box created"; }
-
-    .win98-minimize { align-items: start; padding-top: 0; line-height: 8px; }
-
-    ::-webkit-scrollbar { width: 17px; height: 17px; }
-    ::-webkit-scrollbar-button:vertical:decrement { background: #c0c0c0; }
-    ::-webkit-scrollbar-button:vertical:increment { background: #c0c0c0; }
-    ::-webkit-scrollbar-button:horizontal:decrement { background: #c0c0c0; }
-    ::-webkit-scrollbar-button:horizontal:increment { background: #c0c0c0; }
-
-
-
-    /* v12 visual polish, scalable proportions, accessibility, and quota dialogs */
-    :root { --ui-scale: 1; }
-    @media (min-width: 1800px) { :root { --base-font-size: 15px; --ui-scale: 1.20; } .desktop-wrap { zoom: var(--ui-scale); } }
-    @media (min-width: 2048px) { :root { --base-font-size: 16px; --ui-scale: 1.36; } .desktop-wrap { zoom: var(--ui-scale); } }
-    @media (min-width: 2560px) { :root { --base-font-size: 18px; --ui-scale: 1.58; } .desktop-wrap { zoom: var(--ui-scale); } }
-    @media (min-width: 3200px) { :root { --base-font-size: 20px; --ui-scale: 1.88; } .desktop-wrap { zoom: var(--ui-scale); } }
-
-    .win98-titlebar {
-      background: linear-gradient(90deg, #000078 0%, #000078 28%, #0f80cd 50%, #000078 72%, #000078 100%) !important;
-      background-size: 240% 100% !important;
-      animation: titlebar-center-drift 34s ease-in-out infinite alternate !important;
-    }
-    @keyframes titlebar-center-drift {
-      0% { background-position: 0% 50%; }
-      100% { background-position: 100% 50%; }
-    }
-
-    .start-upload-cta.is-current-step {
-      position: relative;
-      overflow: visible;
-      isolation: isolate;
-      animation: start-ready-rainbow-breathe 1150ms ease-in-out infinite !important;
-      box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 0 0 0 1px #000 !important;
-    }
-    .start-upload-cta.is-current-step::after {
-      content: "" !important;
-      position: absolute;
-      inset: -4px;
-      pointer-events: none;
-      z-index: 1;
-      padding: 4px;
-      background: linear-gradient(90deg, #ff004c, #ffcc00, #00d26a, #00a2ff, #8c48ff, #ff004c, #ffcc00);
-      background-size: 280% 100%;
-      opacity: .9;
-      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-      animation: start-border-rainbow-slide 1850ms linear infinite;
-    }
-    @keyframes start-ready-rainbow-breathe {
-      0%, 100% { transform: rotate(-.35deg) scale(1); }
-      50% { transform: rotate(.35deg) scale(1.016); }
-    }
-    @keyframes start-border-rainbow-slide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
-
-    .terminal-box {
-      color: #b4efbd !important;
-      background-color: #030403 !important;
-      background-image: repeating-linear-gradient(transparent 0 4px, rgba(0,255,102,.018) 4px 6px) !important;
-      box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 rgba(255,255,255,.22) !important;
-      text-shadow: none !important;
-    }
-    .terminal-muted { color: #79ad83 !important; }
-
-    .shortcut-section { margin-top: 12px; padding-top: 8px; border-top: 1px solid #808080; }
-    .shortcut-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
-    .shortcut-list li { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 8px; align-items: center; padding: 4px; background: #dfdfdf; border: 1px solid #808080; box-shadow: inset 1px 1px 0 #fff; }
-    .kbd { display: inline-block; min-width: 18px; padding: 1px 5px; color: #000; background: #c0c0c0; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; font-family: 'PixelOperator', 'MS Sans Serif', Arial, sans-serif; text-align: center; }
-
-    .option-row.with-button { grid-template-columns: 88px minmax(0,1fr) auto; }
-    .option-row.with-two-buttons { grid-template-columns: 88px minmax(0,1fr) auto auto; }
-    .mini-win98-button { min-width: 68px; width: auto; height: 22px; padding: 0 7px; font-size: 12px; line-height: 12px; }
-
-    .quota-dialog-list { margin: 8px 0; padding: 6px 6px 6px 28px; background: #fff; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #fff; border-bottom: 2px solid #fff; max-height: 170px; overflow: auto; }
-    .quota-dialog-list li { padding: 3px 2px; border-bottom: 1px dotted #c0c0c0; }
-    .quota-dialog-list li:last-child { border-bottom: 0; }
-    .quota-dialog-summary { padding: 6px; background: #ffffcc; border: 1px solid #808080; }
-
-    .toast { border-width: 2px !important; }
-    .toast.toast-info { background: #ffffcc !important; border-color: #fff #808000 #808000 #fff !important; color: #000; }
-    .toast.toast-warning { background: repeating-linear-gradient(45deg, #111 0 8px, #ffcc00 8px 16px) !important; color: #fff; text-shadow: 1px 1px 0 #000; border-color: #ffec80 #000 #000 #ffec80 !important; }
-    .toast.toast-error { background: #b00000 !important; color: #fff; text-shadow: 1px 1px 0 #000; border-color: #ffb0b0 #300 #300 #ffb0b0 !important; }
-
-
-
-    .upload-quota-track, .upload-overall-track, .upload-progress {
-      background-color: #fff !important;
-      background-image: repeating-linear-gradient(to right, rgba(0,0,0,.05) 0 1px, transparent 1px 18px) !important;
-    }
-    .upload-quota-bar, .upload-overall-bar, .upload-progress-bar {
-      background-color: #000078 !important;
-      background-image: repeating-linear-gradient(to right, rgba(255,255,255,.12) 0 1px, transparent 1px 18px) !important;
-    }
-
-    .upload-text-input:disabled, .upload-select:disabled { cursor: not-allowed; }
-
-
-    .upload-quota { min-width: 250px; }
-    .popup-window.is-about-popup { width: min(360px, calc(100vw - 28px)); min-height: 220px; }
-    .popup-window.is-about-popup .popup-body { text-align: center; }
-    button[disabled], input[disabled], select[disabled], textarea[disabled] { cursor: not-allowed; }
-
-
-
-    /* v15 fixes: locked options, readable warnings, and large-screen dialog scaling */
-    .box-options-form.is-locked { opacity: .82; filter: grayscale(.12); }
-    .box-options-form.is-locked::after { content: "Box sealed after upload"; display: block; margin-top: 8px; padding: 5px 6px; color: #000; background: #dfdfdf; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 12px; line-height: 13px; }
-    .box-options-form.is-locked input[readonly], .box-options-form.is-locked input:disabled, .box-options-form.is-locked select:disabled { color: #404040; background: repeating-linear-gradient(45deg, #d0d0d0 0 4px, #c7c7c7 4px 8px); }
-    .toast.toast-warning { color: #000 !important; text-shadow: none !important; background: #ffffcc !important; border: 4px solid transparent !important; border-image: repeating-linear-gradient(45deg, #111 0 8px, #ffcc00 8px 16px) 4 !important; box-shadow: 4px 4px 0 rgba(0,0,0,.45), inset 1px 1px 0 #fff7a8, inset -1px -1px 0 #a08000 !important; }
-    .toast.toast-error { border-width: 3px !important; }
-    @media (min-width: 2048px) { .popup-window { width: min(980px, calc(100vw - 120px)); max-height: min(900px, calc(100vh - 120px)); } .popup-window.is-about-popup { width: min(520px, calc(100vw - 120px)); min-height: 300px; } .popup-body { padding: 16px; font-size: 16px; line-height: 20px; max-height: calc(100vh - 170px); } .popup-body h3 { font-size: 21px; line-height: 24px; } .popup-body h4 { font-size: 18px; line-height: 21px; } .popup-body pre { font-size: 14px; line-height: 18px; } .toast { right: 24px; bottom: 84px; max-width: min(560px, calc(100vw - 48px)); padding: 12px 14px; font-size: 16px; line-height: 19px; } .shortcut-list li { grid-template-columns: 168px minmax(0, 1fr); } }
-    @media (min-width: 3200px) { .popup-window { width: min(1120px, calc(100vw - 180px)); max-height: min(1040px, calc(100vh - 180px)); } .popup-window.is-about-popup { width: min(620px, calc(100vw - 180px)); min-height: 360px; } .popup-body { padding: 20px; font-size: 18px; line-height: 23px; max-height: calc(100vh - 230px); } .popup-body h3 { font-size: 24px; line-height: 28px; } .popup-body h4 { font-size: 20px; line-height: 24px; } .popup-body pre { font-size: 16px; line-height: 21px; } .toast { right: 36px; bottom: 116px; max-width: min(680px, calc(100vw - 72px)); padding: 16px 18px; font-size: 19px; line-height: 23px; } }
-
-    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
-
-
-    /* v16 UX fixes: duplicate warnings and daily quota dialog */
-    .duplicate-list { margin: 8px 0; padding: 6px 6px 6px 28px; background: #fff; color: #000; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #fff; border-bottom: 2px solid #fff; max-height: 180px; overflow: auto; }
-    .duplicate-list li { padding: 3px 2px; border-bottom: 1px dotted #b0b0b0; }
-    .duplicate-list li:last-child { border-bottom: 0; }
-    .quota-meter-list { display: grid; gap: 10px; margin: 10px 0; }
-    .quota-meter { padding: 8px; background: #dfdfdf; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #808080; border-bottom: 1px solid #808080; }
-    .quota-meter-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-weight: bold; }
-    .quota-meter-track { height: 18px; background-color: #fff; background-image: repeating-linear-gradient(to right, transparent 0 19px, rgba(0,0,0,.1) 19px 20px); border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #fff; border-bottom: 2px solid #fff; overflow: hidden; }
-    .quota-meter-bar { display: block; height: 100%; background: #000078; }
-    .quota-note { padding: 8px; background: #ffffcc; border: 1px solid #808080; }
-
-  </style>
-</head>
-<body>
-  <!-- TODO: When the user changes settings, make sure to save them and remember them in browser's LocalStorage. -->
-  <main>
-    <div class="desktop-wrap">
-      <section class="win98-window upload-window" aria-label="WarpBox upload window">
-        <div class="win98-titlebar upload-titlebar">
-          <div class="win98-titlebar-label">
-            <!-- TODO: Replace with an image from static folder when prompted to do so. -->
-            <span class="win98-titlebar-icon" aria-hidden="true">W</span>
-            <h1>WarpBox</h1>
-          </div>
-          <div class="win98-window-controls" aria-label="Window controls">
-            <button class="win98-control win98-minimize" type="button" data-action="minimize" title="Minimize" aria-label="Minimize">_</button>
-            <button class="win98-control" type="button" data-action="toggle-fit" title="Fit window" aria-label="Maximize">□</button>
-            <button class="win98-control" type="button" data-action="fake-close" title="Close" aria-label="Close">×</button>
-          </div>
-        </div>
-
-        <nav class="menu-bar" aria-label="Upload menu">
-          <div class="menu-item">
-            <button class="menu-button" type="button" aria-expanded="false"><u>F</u>ile</button>
-            <div class="menu-popup" role="menu">
-              <button class="menu-action" type="button" data-action="browse"><span>▸</span><span>Add files...</span><span class="shortcut">Ctrl+O</span></button>
-              <button class="menu-action" type="button" data-action="start-upload"><span>▶</span><span>Start upload</span><span class="shortcut">Enter</span></button>
-              <button class="menu-action" type="button" data-action="copy-link"><span>⧉</span><span>Copy share URL</span><span></span></button>
-              <div class="menu-separator"></div>
-              <button class="menu-action" type="button" data-action="clear"><span>×</span><span>Clear queue</span><span></span></button>
-            </div>
-          </div>
-          <div class="menu-item">
-            <button class="menu-button" type="button" aria-expanded="false"><u>B</u>ox</button>
-            <div class="menu-popup" role="menu">
-              <button class="menu-action" type="button" data-expiry="1h"><span></span><span>Expire in 1 hour</span><span></span></button>
-              <button class="menu-action" type="button" data-expiry="24h"><span></span><span>Expire in 24 hours</span><span></span></button>
-              <button class="menu-action" type="button" data-expiry="7d"><span>✓</span><span>Expire in 7 days</span><span></span></button>
-              <button class="menu-action" type="button" data-expiry="30d"><span></span><span>Expire in 30 days</span><span></span></button>
-              <div class="menu-separator"></div>
-              <button class="menu-action" type="button" data-action="toggle-delete-once"><span></span><span>Delete after first download</span><span></span></button>
-              <div class="menu-separator"></div>
-              <button class="menu-action" type="button" data-doc="dailyQuota"><span>▥</span><span>Daily guest quota...</span><span></span></button>
-            </div>
-          </div>
-          <div class="menu-item">
-            <button class="menu-button" type="button" aria-expanded="false"><u>O</u>ptions</button>
-            <div class="menu-popup" role="menu">
-              <button class="menu-action" type="button" data-action="random-password"><span>●</span><span>Generate password</span><span></span></button>
-              <button class="menu-action" type="button" data-action="random-box-name"><span>◆</span><span>Random box name</span><span></span></button>
-              <button class="menu-action" type="button" data-action="clear-password"><span>○</span><span>Clear password</span><span></span></button>
-              <button class="menu-action" type="button" data-action="toggle-page"><span>✓</span><span>Download page</span><span></span></button>
-            </div>
-          </div>
-          <div class="menu-item">
-            <button class="menu-button" type="button" aria-expanded="false"><u>H</u>elp</button>
-            <div class="menu-popup" role="menu">
-              <button class="menu-action" type="button" data-action="help"><span>?</span><span>Show quick help</span><span>F1</span></button>
-              <button class="menu-action" type="button" data-action="terminal-help"><span>&gt;</span><span>Show curl command</span><span></span></button>
-              <button class="menu-action" type="button" data-doc="about"><span>i</span><span>About WarpBox</span><span></span></button>
-            </div>
-          </div>
-        </nav>
-
-        <form class="upload-form" id="upload-form">
-          <div class="win98-panel upload-panel" id="drop-surface">
-            <header class="upload-header">
-              <div>
-                <p class="upload-heading">Upload files</p>
-                <p class="upload-subtext">Drop files into this window or browse from your computer. WarpBox creates a temporary share link when the upload finishes.</p>
-              </div>
-              <aside class="upload-quota" aria-label="Box space">
-                <strong>Box space</strong>
-                <span id="box-space-text">0 B / 4 GB</span>
-                <span class="upload-quota-track" aria-hidden="true"><span class="upload-quota-bar" id="box-space-bar"></span></span>
-              </aside>
-            </header>
-
-            <label class="upload-dropzone" for="file-upload" tabindex="0" id="dropzone">
-              <span class="upload-icon" aria-hidden="true"></span>
-              <span class="upload-primary">Drop files here</span>
-              <span class="upload-secondary">or <span class="upload-linklike">click to browse</span> from your computer</span>
-              <span class="upload-secondary">Max box: 4 GB · max file: 2 GB · links expire automatically</span>
-              <input class="upload-input" id="file-upload" type="file" multiple data-disabled-reason="The current box is sealed after upload. Press Clear to start a new box." />
-            </label>
-
-            <div class="upload-details">
-              <span class="upload-detail-label">Queue:</span>
-              <span id="queue-label">No files selected</span>
-              <span class="upload-file-count" id="queue-size">0 B total</span>
-            </div>
-
-            <div class="upload-file-list" aria-label="Upload queue" id="file-list">
-              <p class="upload-empty-state">No files in the box yet. Drop files here, use File &gt; Add files, or click the dropzone.</p>
-            </div>
-
-            <div class="upload-result">
-              <span class="upload-result-label">Share URL:</span>
-              <a class="upload-result-link is-empty" id="share-link" href="#">Not created yet</a>
-              <button class="win98-button upload-share-button" type="button" id="copy-button" disabled data-disabled-reason="There is no share URL yet. Start an upload first.">Copy</button>
-            </div>
-          </div>
-
-          <div class="upload-overall">
-            <span class="upload-overall-track" aria-label="Overall upload progress"><span class="upload-overall-bar" id="overall-bar"></span></span>
-            <span class="upload-overall-percent" id="overall-percent">0%</span>
-          </div>
-
-          <div class="upload-actions">
-            <button class="win98-button" type="button" data-action="clear">Clear</button>
-            <button class="win98-button start-upload-cta" type="submit" id="start-button" data-disabled-reason="Start upload is unavailable right now.">Start upload</button>
-          </div>
-        </form>
-
-        <div class="win98-statusbar upload-statusbar">
-          <span id="status-text">Ready · drag files anywhere onto the window</span>
-          <span>WarpBox</span>
-        </div>
-      </section>
-
-      <aside class="side-stack" aria-label="Secondary upload panels">
-        <section class="win98-window side-panel">
-          <div class="win98-titlebar">
-            <div class="win98-titlebar-label">
-              <!-- TODO: Replace with an image from static folder when prompted to do so. -->
-              <span class="win98-titlebar-icon" aria-hidden="true">i</span>
-              <h2>Box Options</h2>
-            </div>
-            <div class="win98-window-controls"><button class="win98-control" type="button" data-action="side-close" title="Close-ish">×</button></div>
-          </div>
-          <div class="win98-panel side-body">
-            <div class="box-options-form" id="box-options-form">
-              <label class="option-row">
-                <span>Expires:</span>
-                <select class="upload-select" id="expiry-select">
-                  <option value="1h">1 hour</option>
-                  <option value="24h">24 hours</option>
-                  <option value="7d" selected>7 days</option>
-                  <option value="30d">30 days</option>
-                  <option value="manual">Manual delete</option>
-                </select>
-              </label>
-              <label class="option-row">
-                <span>Password:</span>
-                <input class="upload-text-input" id="password-input" type="text" placeholder="optional" autocomplete="off" />
-              </label>
-              <label class="option-row">
-                <span>Max views:</span>
-                <input class="upload-text-input" id="max-views" type="number" min="1" max="9999" placeholder="unlimited" />
-              </label>
-              <label class="option-row">
-                <span>Box name:</span>
-                <input class="upload-text-input" id="box-name" type="text" maxlength="42" placeholder="optional, normal text" />
-              </label>
-              <label class="option-row">
-                <span>Custom slug:</span>
-                <input class="upload-text-input" id="custom-slug" type="text" maxlength="32" placeholder="optional" />
-              </label>
-              <label class="option-check">
-                <input type="checkbox" id="download-page" checked />
-                <span>Generate download page</span>
-              </label>
-              <label class="option-check">
-                <input type="checkbox" id="delete-once" />
-                <span>Delete after first download</span>
-              </label>
-              <label class="option-check">
-                <input type="checkbox" id="allow-preview" checked />
-                <span>Allow previews when possible</span>
-              </label>
-              <label class="option-check">
-                <input type="checkbox" id="keep-filenames" checked />
-                <span>Keep original filenames</span>
-              </label>
-              <label class="option-check">
-                <input type="checkbox" id="private-box" />
-                <span>Hide from public listings</span>
-              </label>
-              <label class="option-check">
-                <input type="checkbox" id="api-key-mode" />
-                <span>Use API key for larger quota</span>
-              </label>
-              <label class="option-row api-key-row" id="api-key-row">
-                <span>API key:</span>
-                <!-- TODO: When the API key is inserted, add a loading overlay over this field, disable the field, and clearly show validation progress while checking if the API key is valid. -->
-                <input class="upload-text-input" id="api-key-input" type="password" placeholder="paste key when enabled" autocomplete="off" disabled data-disabled-reason="Enable Use API key for larger quota before typing an API key." />
-              </label>
-            </div>
-          </div>
-        </section>
-
-        <section class="win98-window side-panel">
-          <div class="win98-titlebar">
-            <div class="win98-titlebar-label">
-              <!-- TODO: Replace with an image from static folder when prompted to do so. -->
-              <span class="win98-titlebar-icon" aria-hidden="true">&gt;</span>
-              <h2>Terminal Upload</h2>
-            </div>
-            <div class="win98-window-controls"><button class="win98-control" type="button" data-action="side-help" title="Help-ish">?</button></div>
-          </div>
-          <div class="win98-panel side-body">
-            <div class="terminal-box" id="terminal-box" tabindex="0" aria-label="Terminal upload command"><span class="terminal-muted">warpbox@cli</span>:~$ curl \
-  -F 'file=@build.zip' \
-  -F 'expires=7d' \
-  https://warpbox.dev/u</div>
-            <div class="terminal-actions">
-              <button class="win98-button terminal-copy-button" type="button" id="copy-curl-button">Copy cURL command</button>
-            </div>
-          </div>
-        </section>
-
-      <section class="win98-window helper-window" aria-label="WarpBox help folder">
-        <div class="win98-titlebar">
-          <div class="win98-titlebar-label"><!-- TODO: Replace with an image from static folder when prompted to do so. -->
-          <span class="win98-titlebar-icon" aria-hidden="true">?</span><h2>WarpBox Help Folder</h2></div>
-          <div class="win98-window-controls"><button class="win98-control" type="button" data-action="side-folder-close" title="Nope">×</button></div>
-        </div>
-        <div class="win98-panel helper-body">
-          <button class="folder-icon-button" type="button" data-doc="cli"><!-- TODO: Replace with an image from static folder when prompted to do so. -->
-            <span class="folder-icon" aria-hidden="true"></span><span>CLI Guide</span></button>
-          <button class="folder-icon-button" type="button" data-doc="faq"><!-- TODO: Replace with an image from static folder when prompted to do so. -->
-            <span class="folder-icon" aria-hidden="true"></span><span>Help &amp; FAQ</span></button>
-          <button class="folder-icon-button" type="button" data-doc="examples"><!-- TODO: Replace with an image from static folder when prompted to do so. -->
-            <span class="folder-icon" aria-hidden="true"></span><span>Examples</span></button>
-          <button class="folder-icon-button folder-icon-button-disabled" type="button" data-action="coming-soon"><!-- TODO: Replace with an image from static folder when prompted to do so. -->
-            <span class="folder-icon folder-icon-exe" aria-hidden="true"></span><span>WarpBox.exe</span></button>
-        </div>
-      </section>
-
-      </aside>
-
-    </div>
-  </main>
-
-  <div class="modal-backdrop" id="modal-backdrop"></div>
-
-  <section class="win98-window popup-window" id="doc-popup" aria-modal="true" role="dialog" aria-labelledby="doc-popup-title">
-    <div class="win98-titlebar">
-      <div class="win98-titlebar-label"><!-- TODO: Replace with an image from static folder when prompted to do so. -->
-        <span class="win98-titlebar-icon" aria-hidden="true">?</span><h2 id="doc-popup-title">WarpBox Help</h2></div>
-      <div class="win98-window-controls"><button class="win98-control popup-close" type="button" id="doc-popup-close" title="Close">×</button></div>
-    </div>
-    <div class="win98-panel popup-body" id="doc-popup-body"></div>
-  </section>
-
-  <div class="toast" id="toast" role="status" aria-live="polite"></div>
-
-  <script>
-    const MAX_BOX_BYTES = 4 * 1024 * 1024 * 1024;
-    const MAX_FILE_BYTES = 2 * 1024 * 1024 * 1024;
-    const demoFiles = [
-      { name: 'dashboard_mockup_final.png', size: 4.6 * 1024 * 1024, progress: 100, uploaded: true },
-      { name: 'warpbox-release-linux-x86_64.zip', size: 842 * 1024 * 1024, progress: 0, uploaded: false },
-      { name: 'terminal_demo_capture.mp4', size: 391 * 1024 * 1024, progress: 0, uploaded: false }
-    ];
-
-    let files = [];
-    let uploadTimer = null;
-    let shareUrl = '';
-    let uploadLocked = false;
-    let impactedFiles = new Set();
-    let overallImpactDone = false;
-    let pendingDuplicateFiles = [];
-
-    const el = {
-      fileInput: document.getElementById('file-upload'),
-      dropSurface: document.getElementById('drop-surface'),
-      dropzone: document.getElementById('dropzone'),
-      fileList: document.getElementById('file-list'),
-      queueLabel: document.getElementById('queue-label'),
-      queueSize: document.getElementById('queue-size'),
-      boxSpaceText: document.getElementById('box-space-text'),
-      boxSpaceBar: document.getElementById('box-space-bar'),
-      overallBar: document.getElementById('overall-bar'),
-      overallPercent: document.getElementById('overall-percent'),
-      shareLink: document.getElementById('share-link'),
-      copyButton: document.getElementById('copy-button'),
-      startButton: document.getElementById('start-button'),
-      statusText: document.getElementById('status-text'),
-      form: document.getElementById('upload-form'),
-      toast: document.getElementById('toast'),
-      clock: document.getElementById('clock'),
-      terminal: document.getElementById('terminal-box'),
-      copyCurlButton: document.getElementById('copy-curl-button'),
-      docPopup: document.getElementById('doc-popup'),
-      modalBackdrop: document.getElementById('modal-backdrop'),
-      docPopupTitle: document.getElementById('doc-popup-title'),
-      docPopupBody: document.getElementById('doc-popup-body'),
-      docPopupClose: document.getElementById('doc-popup-close'),
-      expiry: document.getElementById('expiry-select'),
-      password: document.getElementById('password-input'),
-      optionsForm: document.getElementById('box-options-form'),
-      maxViews: document.getElementById('max-views'),
-      boxName: document.getElementById('box-name'),
-      customSlug: document.getElementById('custom-slug'),
-      allowPreview: document.getElementById('allow-preview'),
-      keepFilenames: document.getElementById('keep-filenames'),
-      privateBox: document.getElementById('private-box'),
-      apiKeyMode: document.getElementById('api-key-mode'),
-      apiKeyInput: document.getElementById('api-key-input'),
-      apiKeyRow: document.getElementById('api-key-row'),
-      downloadPage: document.getElementById('download-page'),
-      deleteOnce: document.getElementById('delete-once'),
-      startWrap: document.getElementById('start-wrap'),
-      startMenuButton: document.getElementById('start-menu-button')
-    };
-
-    function formatBytes(bytes) {
-      if (!bytes) return '0 B';
-      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-      let value = bytes;
-      let unit = 0;
-      while (value >= 1024 && unit < units.length - 1) { value /= 1024; unit++; }
-      return `${value.toFixed(value >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`;
-    }
-
-    function extension(name) {
-      const parts = name.split('.');
-      return parts.length > 1 ? parts.pop().slice(0, 3).toUpperCase() : 'FILE';
-    }
-
-    function totalBytes() { return files.reduce((sum, file) => sum + file.size, 0); }
-    function uploadedBytes() { return files.reduce((sum, file) => sum + file.size * (file.progress / 100), 0); }
-    function overallProgress() {
-      const total = totalBytes();
-      return total ? Math.round((uploadedBytes() / total) * 100) : 0;
-    }
-
-    function oversizedFiles() { return files.filter(file => file.size > MAX_FILE_BYTES); }
-    function isOverBoxQuota() { return totalBytes() > MAX_BOX_BYTES; }
-    function hasQuotaError() { return isOverBoxQuota() || oversizedFiles().length > 0; }
-
-    function normalizedFileName(name) { return String(name || '').trim().toLowerCase(); }
-
-    function splitNameForIncrement(name) {
-      const value = String(name || 'file');
-      const dot = value.lastIndexOf('.');
-      if (dot > 0 && dot < value.length - 1) return [value.slice(0, dot), value.slice(dot)];
-      return [value, ''];
-    }
-
-    function nextIncrementedFileName(name, usedNames) {
-      const [base, ext] = splitNameForIncrement(name);
-      let index = 2;
-      let candidate = `${base} (${index})${ext}`;
-      while (usedNames.has(normalizedFileName(candidate))) {
-        index += 1;
-        candidate = `${base} (${index})${ext}`;
-      }
-      usedNames.add(normalizedFileName(candidate));
-      return candidate;
-    }
-
-    function duplicateFileReport(incoming = []) {
-      const used = new Set(files.map(file => normalizedFileName(file.name)));
-      const duplicates = [];
-      const unique = [];
-      incoming.forEach(file => {
-        const key = normalizedFileName(file.name);
-        if (used.has(key)) duplicates.push(file);
-        else { used.add(key); unique.push(file); }
-      });
-      return { unique, duplicates };
-    }
-
-    function showDuplicateDialog(duplicates) {
-      pendingDuplicateFiles = duplicates.map(file => ({ ...file }));
-      const list = duplicates.map(file => `<li><strong>${htmlEscape(file.name)}</strong> <span>${formatBytes(file.size)}</span></li>`).join('');
-      el.docPopupTitle.textContent = 'Duplicate file names';
-      el.docPopupBody.innerHTML = `
-        <h3>Duplicate file names detected</h3>
-        <p>These files are already selected for upload, or have the same exact name as an existing file in this box.</p>
-        <ol class="duplicate-list">${list}</ol>
-        <p>Skip them, or append numbers so they become names like <code>file (2).zip</code>.</p>
-        <div class="copy-fallback-actions">
-          <button class="win98-button" type="button" id="duplicate-append">Append numbers</button>
-          <button class="win98-button" type="button" id="duplicate-skip">Skip duplicates</button>
-        </div>`;
-      el.docPopup.classList.add('is-visible');
-      if (el.modalBackdrop) el.modalBackdrop.classList.add('is-visible');
-      showToast('Duplicate names found. Choose skip or append numbers.', 'warning');
-      setTimeout(() => document.getElementById('duplicate-append')?.focus(), 0);
-    }
-
-    function appendPendingDuplicates() {
-      if (!pendingDuplicateFiles.length) return;
-      const used = new Set(files.map(file => normalizedFileName(file.name)));
-      const renamed = pendingDuplicateFiles.map(file => ({ ...file, name: nextIncrementedFileName(file.name, used) }));
-      files.push(...renamed);
-      pendingDuplicateFiles = [];
-      shareUrl = '';
-      setShareUrl('');
-      renderFiles();
-      const warning = quotaWarningMessage(renamed);
-      if (warning) showWarningDialog('Quota warning', warning);
-      setStatus(`${renamed.length} duplicate file${renamed.length === 1 ? '' : 's'} added with numbered names`);
-      showToast('Duplicate files added with numbered names.', 'info');
-    }
-
-    function quotaWarningMessage(incoming = []) {
-      const tooBig = [...incoming, ...files].filter(file => file.size > MAX_FILE_BYTES);
-      const total = totalBytes();
-      if (tooBig.length) {
-        const list = tooBig.slice(0, 4).map(file => `${file.name} (${formatBytes(file.size)})`).join(', ');
-        const more = tooBig.length > 4 ? ` and ${tooBig.length - 4} more` : '';
-        return `These files are over the single-file demo limit of ${formatBytes(MAX_FILE_BYTES)}: ${list}${more}. Remove them or use an API key plan with higher quota.`;
-      }
-      if (total > MAX_BOX_BYTES) return `This box is ${formatBytes(total - MAX_BOX_BYTES)} over the 4 GB limit. Remove some files, clear the box, or use an API key with larger quota.`;
-      return '';
-    }
-
-    function setStatus(message) { el.statusText.textContent = message; }
-
-    function showToast(message, type = 'info') {
-      el.toast.textContent = message;
-      el.toast.classList.remove('toast-info', 'toast-warning', 'toast-error', 'is-visible');
-      el.toast.classList.add(`toast-${type}`, 'is-visible');
-      clearTimeout(showToast.timer);
-      showToast.timer = setTimeout(() => el.toast.classList.remove('is-visible'), 2600);
-    }
-
-    function updateCurrentStep() {
-      const hasFiles = files.length > 0;
-      const allDone = hasFiles && files.every(file => file.progress >= 100);
-      el.dropzone.classList.toggle('is-current-step', !hasFiles);
-      const startButton = document.getElementById('start-button');
-      if (startButton) startButton.classList.toggle('is-current-step', hasFiles && !allDone && !uploadLocked && !hasQuotaError());
-      const resultBox = document.querySelector('.upload-result');
-      if (resultBox) resultBox.classList.toggle('is-current-step', allDone && !!shareUrl);
-    }
-
-    function bumpCompletedBars() {
-      document.querySelectorAll('.upload-file-row.is-uploaded').forEach(row => {
-        const index = Number(row.dataset.index);
-        const file = files[index];
-        if (!file || file.progress < 100 || impactedFiles.has(index)) return;
-        impactedFiles.add(index);
-        const bar = row.querySelector('.upload-progress-bar');
-        if (!bar) return;
-        bar.classList.add('just-completed');
-        setTimeout(() => bar.classList.remove('just-completed'), 620);
-      });
-
-      if (overallProgress() === 100 && files.length && !overallImpactDone) {
-        overallImpactDone = true;
-        el.overallBar.classList.add('just-completed');
-        setTimeout(() => el.overallBar.classList.remove('just-completed'), 620);
-      }
-    }
-
-    function setDisabledReasons() {
-      if (el.startButton) {
-        let reason = '';
-        if (uploadLocked) reason = 'This upload already started. Press Clear to create another box.';
-        else if (hasQuotaError()) reason = 'Over maximum upload size. Remove highlighted files or clear some files.';
-        else if (!files.length) reason = 'There are no files selected. Please select files to upload.';
-        else reason = 'Start upload is unavailable right now.';
-        el.startButton.dataset.disabledReason = reason;
-      }
-      if (el.copyButton) {
-        el.copyButton.dataset.disabledReason = shareUrl ? '' : 'There is no share URL yet. Start an upload first.';
-      }
-      if (el.fileInput) {
-        el.fileInput.dataset.disabledReason = uploadLocked ? 'The current box is sealed after upload. Press Clear to start a new box.' : '';
-      }
-      document.querySelectorAll('.upload-file-remove:disabled').forEach(button => {
-        button.dataset.disabledReason = 'Files cannot be removed after the box is created. Press Clear to start a separate box.';
-      });
-      if (el.apiKeyInput && el.apiKeyInput.disabled) {
-        el.apiKeyInput.dataset.disabledReason = uploadLocked ? 'Box Options are locked because this box was already created. Press Clear to start another upload.' : 'Enable "Use API key for larger quota" before typing an API key.';
-      }
-      if (uploadLocked) {
-        [el.expiry, el.password, el.maxViews, el.boxName, el.customSlug, el.downloadPage, el.deleteOnce, el.allowPreview, el.keepFilenames, el.privateBox, el.apiKeyMode, el.apiKeyInput].filter(Boolean).forEach(control => {
-          control.dataset.disabledReason = 'Box Options are locked because this box was already created. Press Clear to start another upload.';
-        });
-      }
-    }
-
-    function setBoxOptionsLocked(locked) {
-      const controls = [el.expiry, el.password, el.maxViews, el.boxName, el.customSlug, el.downloadPage, el.deleteOnce, el.allowPreview, el.keepFilenames, el.privateBox, el.apiKeyMode, el.apiKeyInput].filter(Boolean);
-      if (el.optionsForm) el.optionsForm.classList.toggle('is-locked', locked);
-      controls.forEach(control => {
-        const reason = 'Box Options are locked because this box was already created. Press Clear to start another upload.';
-        control.dataset.disabledReason = locked ? reason : (control.dataset.disabledReason || '');
-        if (control.tagName === 'INPUT' && !['checkbox', 'radio', 'file'].includes(control.type)) {
-          control.readOnly = locked;
-        } else if (control !== el.apiKeyInput) {
-          control.disabled = locked;
-        }
-      });
-      if (el.password) el.password.type = locked ? 'password' : 'text';
-      if (!locked) syncApiKeyField();
-      setDisabledReasons();
-    }
-
-    function renderFiles() {
-      if (!files.length) {
-        el.fileList.innerHTML = '<p class="upload-empty-state">No files in the box yet. Drop files here, use File &gt; Add files, or click the dropzone.</p>';
-      } else {
-        el.fileList.innerHTML = files.map((file, index) => {
-          const state = file.progress >= 100 ? 'is-uploaded' : (file.progress > 0 ? 'is-working' : '');
-          const quotaState = file.size > MAX_FILE_BYTES ? 'is-too-large' : '';
-          return `
-            <div class="upload-file-row ${state} ${quotaState}" data-index="${index}">
-              <!-- TODO: Replace with an image from static folder when prompted to do so. -->
-              <span class="upload-file-icon">${extension(file.name)}</span>
-              <span class="upload-file-name" title="${file.name.replaceAll('"', '&quot;')}">${file.name}</span>
-              <span class="upload-file-size">${formatBytes(file.size)}</span>
-              <button class="win98-button upload-file-remove" type="button" title="${uploadLocked ? 'This file cannot be removed because this upload box was already created.' : 'Remove file'}" data-disabled-reason="${uploadLocked ? 'This file cannot be removed because this upload box was already created. Press Clear to create another upload.' : ''}" data-remove="${index}" ${uploadLocked ? 'disabled' : ''}>×</button>
-              <span class="upload-progress" aria-label="Upload progress ${Math.round(file.progress)} percent"><span class="upload-progress-bar" style="width: ${Math.min(100, file.progress)}%"></span></span>
-            </div>`;
-        }).join('');
-      }
-
-      const count = files.length;
-      el.queueLabel.textContent = count ? `${count} file${count === 1 ? '' : 's'} selected` : 'No files selected';
-      el.queueSize.textContent = `${formatBytes(totalBytes())} total`;
-
-      const usedPercentRaw = Math.round((totalBytes() / MAX_BOX_BYTES) * 100);
-      const usedPercent = Math.min(100, usedPercentRaw);
-      const overQuota = isOverBoxQuota();
-      const overFile = oversizedFiles().length > 0;
-      const quotaBox = document.querySelector('.upload-quota');
-      if (quotaBox) quotaBox.classList.toggle('is-quota-warning', overQuota || overFile);
-      el.boxSpaceText.textContent = overQuota ? `${formatBytes(totalBytes())} / 4 GB - over quota` : `${formatBytes(totalBytes())} / 4 GB`;
-      el.boxSpaceBar.style.width = `${usedPercent}%`;
-      el.boxSpaceBar.classList.toggle('is-over-quota', overQuota || overFile);
-      if (el.startButton) {
-        el.startButton.disabled = uploadLocked || hasQuotaError();
-        el.startButton.title = hasQuotaError() ? 'Over maximum upload size!' : '';
-      }
-
-      const progress = overallProgress();
-      el.overallBar.style.width = `${progress}%`;
-      el.overallPercent.textContent = `${progress}%`;
-
-      if (files.length && files.every(file => file.progress >= 100)) createShareLink();
-      updateTerminal();
-      updateCurrentStep();
-      requestAnimationFrame(bumpCompletedBars);
-    }
-
-    function htmlEscape(value) {
-      return String(value)
-        .replaceAll('&', '&amp;')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#39;');
-    }
-
-    function shellQuote(value) {
-      return `'${String(value).replaceAll("'", "'\\''")}'`;
-    }
-
-    function getCurlCommand({ full = true } = {}) {
-      const args = [];
-      const selectedFiles = files.length ? files : [{ name: 'build.zip' }];
-      const previewLimit = full ? selectedFiles.length : 4;
-      selectedFiles.slice(0, previewLimit).forEach(file => args.push(`  -F ${shellQuote(`file=@${file.name}`)}`));
-      const hiddenFileCount = !full && selectedFiles.length > previewLimit ? selectedFiles.length - previewLimit : 0;
-      args.push(`  -F ${shellQuote(`expires=${el.expiry.value}`)}`);
-      if (el.password.value) args.push(`  -F ${shellQuote('password=YOUR_PASSWORD')}`);
-      if (el.maxViews.value) args.push(`  -F ${shellQuote(`max_views=${el.maxViews.value}`)}`);
-      if (el.boxName && el.boxName.value) args.push(`  -F ${shellQuote(`box_name=${el.boxName.value}`)}`);
-      if (el.customSlug && el.customSlug.value) args.push(`  -F ${shellQuote(`slug=${el.customSlug.value}`)}`);
-      if (el.deleteOnce.checked) args.push(`  -F ${shellQuote('delete_after_first_download=true')}`);
-      if (el.allowPreview && !el.allowPreview.checked) args.push(`  -F ${shellQuote('preview=false')}`);
-      if (el.keepFilenames && !el.keepFilenames.checked) args.push(`  -F ${shellQuote('keep_filenames=false')}`);
-      if (el.privateBox && el.privateBox.checked) args.push(`  -F ${shellQuote('visibility=private')}`);
-
-      const commandLines = ['curl'];
-      if (el.apiKeyMode && el.apiKeyMode.checked) commandLines.push(`  -H ${shellQuote('Authorization: Bearer YOUR_API_KEY')}`);
-      commandLines.push(...args, '  https://warpbox.dev/u');
-      const command = commandLines.join(' \\' + '\n');
-      return hiddenFileCount ? `${command}\n# and ${hiddenFileCount} other files included when copying` : command;
-    }
-
-    function updateTerminal() {
-      const command = getCurlCommand({ full: false });
-      el.terminal.innerHTML = `<span class="terminal-muted">warpbox@cli</span>:~$ ${htmlEscape(command)}`;
-    }
-
-    function showCopyFallback(kind, value, openUrl) {
-      el.docPopupTitle.textContent = `${kind} copy failed`;
-      el.docPopupBody.innerHTML = `
-        <h3>Clipboard access failed</h3>
-        <p>The browser refused clipboard access. Copy it manually from the field below, or open the URL in a new tab if available.</p>
-        <textarea class="copy-fallback-text" readonly>${htmlEscape(value)}</textarea>
-        <div class="copy-fallback-actions">
-          ${openUrl ? `<a class="win98-button" href="${htmlEscape(openUrl)}" target="_blank" rel="noreferrer">Open in new tab</a>` : ''}
-          <button class="win98-button" type="button" id="fallback-close">Close</button>
-        </div>`;
-      el.docPopup.classList.toggle('is-about-popup', name === 'about');
-      el.docPopup.classList.add('is-visible');
-      if (el.modalBackdrop) el.modalBackdrop.classList.add('is-visible');
-      setTimeout(() => { const close = document.getElementById('fallback-close'); if (close) close.addEventListener('click', closeDoc); }, 0);
-    }
-
-    function quotaWarningHtml(message) {
-      const tooLarge = oversizedFiles();
-      const overTotal = isOverBoxQuota();
-      const parts = [];
-      if (tooLarge.length) {
-        parts.push('<p class="quota-dialog-summary"><strong>Single-file limit exceeded.</strong> Remove these files or use a plan with a larger quota.</p>');
-        parts.push('<ol class="quota-dialog-list">' + tooLarge.map(file => `<li><strong>${htmlEscape(file.name)}</strong> <span>${formatBytes(file.size)} / max ${formatBytes(MAX_FILE_BYTES)}</span></li>`).join('') + '</ol>');
-      }
-      if (overTotal) {
-        parts.push(`<p class="quota-dialog-summary"><strong>Box quota exceeded.</strong> Current total is ${formatBytes(totalBytes())}. The demo limit is ${formatBytes(MAX_BOX_BYTES)}. Remove ${formatBytes(totalBytes() - MAX_BOX_BYTES)} or more.</p>`);
-      }
-      if (!parts.length) parts.push(`<p>${htmlEscape(message)}</p>`);
-      parts.push('<p>Fix the highlighted rows, clear some files, or enable API key mode if your account allows a bigger quota.</p>');
-      return parts.join('');
-    }
-
-    function showWarningDialog(title, message) {
-      el.docPopupTitle.textContent = title;
-      el.docPopupBody.innerHTML = `
-        <h3>${htmlEscape(title)}</h3>
-        ${quotaWarningHtml(message)}
-        <div class="copy-fallback-actions"><button class="win98-button" type="button" id="fallback-close">OK</button></div>`;
-      el.docPopup.classList.add('is-visible');
-      if (el.modalBackdrop) el.modalBackdrop.classList.add('is-visible');
-      setTimeout(() => { const close = document.getElementById('fallback-close'); if (close) close.addEventListener('click', closeDoc); }, 0);
-    }
-
-    async function copyCurlCommand() {
-      const command = getCurlCommand({ full: true });
-      try {
-        await navigator.clipboard.writeText(command);
-        showToast('cURL command copied. The shell beast is pleased.');
-        setStatus('Copied cURL command');
-      } catch (_) {
-        showCopyFallback('cURL command', command, '');
-      }
-    }
-
-    const docs = {
-      cli: {
-        title: 'CLI Guide',
-        html: `
-          <h3>Upload with cURL</h3>
-          <p>WarpBox accepts normal multipart form uploads. The basic shape is:</p>
-          <pre>curl \\
-  -F 'file=@./my-file.zip' \\
-  -F 'expires=7d' \\
-  https://warpbox.dev/u</pre>
-          <h4>Common fields</h4>
-          <ul>
-            <li><strong>file</strong>: one or more files. Repeat <code>-F 'file=@...'</code> for multiple files.</li>
-            <li><strong>expires</strong>: example values are <code>1h</code>, <code>24h</code>, <code>7d</code>, <code>30d</code>, or <code>manual</code>.</li>
-            <li><strong>password</strong>: optional download password.</li>
-            <li><strong>max_views</strong>: optional download/view limit.</li>
-            <li><strong>delete_after_first_download</strong>: set to <code>true</code> for one-time downloads.</li>
-          </ul>
-          <h4>API key for bigger quota</h4>
-          <p>Users with API keys can add an authorization header:</p>
-          <pre>curl \\
-  -H 'Authorization: Bearer YOUR_API_KEY' \\
-  -F 'file=@./big-archive.zip' \\
-  -F 'expires=30d' \\
-  https://warpbox.dev/u</pre>
-          <h4>Alias option</h4>
-          <pre>alias warpbox='curl -H "Authorization: Bearer YOUR_API_KEY" -F expires=7d https://warpbox.dev/u -F file=@'</pre>
-          <p>Then upload with:</p>
-          <pre>warpbox ./build.zip</pre>
-          <h4>Small bash helper</h4>
-          <p>Create a local executable helper:</p>
-          <pre>vim warpbox
-chmod +x warpbox
-mkdir -p ~/.local/bin
-mv warpbox ~/.local/bin/</pre>
-          <p>Example script content:</p>
-          <pre>#!/usr/bin/env bash
-set -euo pipefail
-
-API_KEY="\${WARPBOX_API_KEY:-}"
-EXPIRES="\${WARPBOX_EXPIRES:-7d}"
-
-if [ "$#" -lt 1 ]; then
-  echo "usage: warpbox FILE [FILE...]"
-  exit 1
-fi
-
-args=()
-for file in "$@"; do
-  args+=( -F "file=@\${file}" )
-done
-
-if [ -n "$API_KEY" ]; then
-  curl -H "Authorization: Bearer \${API_KEY}" \\
-    "\${args[@]}" \\
-    -F "expires=\${EXPIRES}" \\
-    https://warpbox.dev/u
-else
-  curl "\${args[@]}" \\
-    -F "expires=\${EXPIRES}" \\
-    https://warpbox.dev/u
-fi</pre>
-          <p>Put <code>export WARPBOX_API_KEY='your-key'</code> in <code>~/.bashrc</code>, <code>~/.zshrc</code>, or another shell profile. For system-wide install, move the helper to <code>/usr/local/bin/warpbox</code>.</p>
-        `
-      },
-      faq: {
-        title: 'Help & FAQ',
-        html: `
-          <h3>Help & FAQ</h3>
-          <section class="shortcut-section">
-            <h4>Keyboard shortcuts</h4>
-            <p>These are meant to make the upload page usable without a mouse.</p>
-            <ul class="shortcut-list">
-              <li><span><span class="kbd">Ctrl</span> + <span class="kbd">O</span></span><span>Browse for files.</span></li>
-              <li><span><span class="kbd">Ctrl</span> + <span class="kbd">U</span></span><span>Start the current upload.</span></li>
-              <li><span><span class="kbd">Ctrl</span> + <span class="kbd">K</span></span><span>Copy the full cURL command.</span></li>
-              <li><span><span class="kbd">Ctrl</span> + <span class="kbd">L</span></span><span>Copy the share URL after upload.</span></li>
-              <li><span><span class="kbd">Shift</span> + <span class="kbd">1</span></span><span>Focus the upload queue.</span></li>
-              <li><span><span class="kbd">Shift</span> + <span class="kbd">2</span></span><span>Focus Box Options.</span></li>
-              <li><span><span class="kbd">Shift</span> + <span class="kbd">3</span></span><span>Focus Terminal Upload.</span></li>
-              <li><span><span class="kbd">Shift</span> + <span class="kbd">4</span></span><span>Focus WarpBox Help Folder.</span></li>
-              <li><span><span class="kbd">F1</span></span><span>Open this Help & FAQ window.</span></li>
-              <li><span><span class="kbd">Esc</span></span><span>Close menus and popups.</span></li>
-            </ul>
-          </section>
-          <h4>Questions and answers</h4>
-          <div class="faq-list">
-            <div class="faq-item"><p class="faq-q"><span class="faq-icon">?</span><span>What is WarpBox?</span></p><p class="faq-a"><span class="faq-icon">i</span><span>A temporary file hosting service for quick browser uploads, terminal uploads, and API based uploads.</span></p></div>
-            <div class="faq-item"><p class="faq-q"><span class="faq-icon">?</span><span>Can I password protect uploads?</span></p><p class="faq-a"><span class="faq-icon">i</span><span>Yes. Set a password in Box Options or pass <code>-F 'password=...'</code> via the API.</span></p></div>
-            <div class="faq-item"><p class="faq-q"><span class="faq-icon">?</span><span>How do I upload from a terminal?</span></p><p class="faq-a"><span class="faq-icon">i</span><span>Use the cURL command shown in Terminal Upload. Select files first, then press <strong>Copy cURL command</strong>. The visible preview may collapse long file lists, but the copied command includes every file.</span></p></div>
-            <div class="faq-item"><p class="faq-q"><span class="faq-icon">?</span><span>What do API keys do?</span></p><p class="faq-a"><span class="faq-icon">i</span><span>They are intended for larger quota, automation, and scripted uploads. Enable API key mode in Box Options to reveal the API key field.</span></p></div>
-            <div class="faq-item"><p class="faq-q"><span class="faq-icon">?</span><span>Do the toolbar menus actually do anything?</span></p><p class="faq-a"><span class="faq-icon">i</span><span>Yes. File, Box, Options, and Help include extra actions such as adding files, starting uploads, changing expiry, generating passwords, copying commands, opening docs, and clearing the queue.</span></p></div>
-            <div class="faq-item"><p class="faq-q"><span class="faq-icon">?</span><span>Can I use the page without a mouse?</span></p><p class="faq-a"><span class="faq-icon">i</span><span>Yes. Use <span class="kbd">Tab</span> and <span class="kbd">Shift</span> + <span class="kbd">Tab</span> to move around. The full shortcut list is at the top of this window.</span></p></div>
-          </div>
-        `
-      },
-      dailyQuota: {
-        title: 'Daily guest quota',
-        html: `
-          <h3>Daily guest quota</h3>
-          <p>Guest limits are tracked per IP address. This demo uses placeholder numbers so the UI shape is ready for the real API response.</p>
-          <div class="quota-meter-list">
-            <div class="quota-meter">
-              <div class="quota-meter-head"><span>Uploads today</span><span>1.2 GB / 4 GB</span></div>
-              <div class="quota-meter-track"><span class="quota-meter-bar" style="width:30%"></span></div>
-            </div>
-            <div class="quota-meter">
-              <div class="quota-meter-head"><span>Downloads today</span><span>3.8 GB / 10 GB</span></div>
-              <div class="quota-meter-track"><span class="quota-meter-bar" style="width:38%"></span></div>
-            </div>
-            <div class="quota-meter">
-              <div class="quota-meter-head"><span>Boxes created</span><span>2 / 10</span></div>
-              <div class="quota-meter-track"><span class="quota-meter-bar" style="width:20%"></span></div>
-            </div>
-          </div>
-          <p class="quota-note"><strong>Tip:</strong> API keys can unlock larger quota for storage, upload size, automation, and scripted usage. Wire this window to your quota endpoint later.</p>
-        `
-      },
-      about: {
-        title: 'About WarpBox',
-        html: `
-          <h3>WarpBox v1.0.1</h3>
-          <p><strong>WarpBox</strong> was made by <strong>Daniel Legt</strong>.</p>
-          <p>This demo page shows the browser upload flow, terminal upload hints, API examples, and old-web inspired UI behavior.</p>
-          <div class="quota-dialog-summary">Temporary file boxes, terminal-first uploads, and tiny pixel drama.</div>
-        `
-      },
-      examples: {
-        title: 'Examples',
-        html: `
-          <h3>Upload examples</h3>
-          <h4>Basic CLI upload</h4>
-          <pre>curl \\
-  -F 'file=@./photo.png' \\
-  -F 'expires=24h' \\
-  https://warpbox.dev/u</pre>
-          <h4>Multiple files with password</h4>
-          <pre>curl \\
-  -F 'file=@./one.png' \\
-  -F 'file=@./two.zip' \\
-  -F 'expires=7d' \\
-  -F 'password=secret-pass' \\
-  https://warpbox.dev/u</pre>
-          <h4>CLI upload with API key</h4>
-          <pre>curl \\
-  -H 'Authorization: Bearer YOUR_API_KEY' \\
-  -F 'file=@./archive.tar.gz' \\
-  -F 'expires=30d' \\
-  https://warpbox.dev/u</pre>
-          <h4>Go</h4>
-          <pre>package main
-
-import (
-  "bytes"
-  "fmt"
-  "io"
-  "mime/multipart"
-  "net/http"
-  "os"
-)
-
-func main() {
-  file, err := os.Open("photo.png")
-  if err != nil { panic(err) }
-  defer file.Close()
-
-  var body bytes.Buffer
-  writer := multipart.NewWriter(&body)
-
-  part, err := writer.CreateFormFile("file", "photo.png")
-  if err != nil { panic(err) }
-  if _, err := io.Copy(part, file); err != nil { panic(err) }
-
-  _ = writer.WriteField("expires", "7d")
-  writer.Close()
-
-  req, err := http.NewRequest("POST", "https://warpbox.dev/u", &body)
-  if err != nil { panic(err) }
-  req.Header.Set("Content-Type", writer.FormDataContentType())
-  req.Header.Set("Authorization", "Bearer YOUR_API_KEY")
-
-  resp, err := http.DefaultClient.Do(req)
-  if err != nil { panic(err) }
-  defer resp.Body.Close()
-
-  out, _ := io.ReadAll(resp.Body)
-  fmt.Println(string(out))
-}</pre>
-          <h4>Java 11+ HttpClient</h4>
-          <pre>import java.net.URI;
-import java.net.http.HttpClient;
-import java.net.http.HttpRequest;
-import java.net.http.HttpResponse;
-import java.nio.file.Files;
-import java.nio.file.Path;
-
-public class UploadWarpBox {
-  public static void main(String[] args) throws Exception {
-    String boundary = "----WarpBoxBoundary" + System.currentTimeMillis();
-    Path file = Path.of("photo.png");
-
-    byte[] prefix = ("--" + boundary + "\\r\\n" +
-      "Content-Disposition: form-data; name=\\"expires\\"\\r\\n\\r\\n" +
-      "7d\\r\\n" +
-      "--" + boundary + "\\r\\n" +
-      "Content-Disposition: form-data; name=\\"file\\"; filename=\\"photo.png\\"\\r\\n" +
-      "Content-Type: application/octet-stream\\r\\n\\r\\n").getBytes();
-    byte[] suffix = ("\\r\\n--" + boundary + "--\\r\\n").getBytes();
-
-    byte[] fileBytes = Files.readAllBytes(file);
-    byte[] body = new byte[prefix.length + fileBytes.length + suffix.length];
-    System.arraycopy(prefix, 0, body, 0, prefix.length);
-    System.arraycopy(fileBytes, 0, body, prefix.length, fileBytes.length);
-    System.arraycopy(suffix, 0, body, prefix.length + fileBytes.length, suffix.length);
-
-    HttpRequest request = HttpRequest.newBuilder()
-      .uri(URI.create("https://warpbox.dev/u"))
-      .header("Content-Type", "multipart/form-data; boundary=" + boundary)
-      .header("Authorization", "Bearer YOUR_API_KEY")
-      .POST(HttpRequest.BodyPublishers.ofByteArray(body))
-      .build();
-
-    HttpResponse&lt;String&gt; response = HttpClient.newHttpClient()
-      .send(request, HttpResponse.BodyHandlers.ofString());
-
-    System.out.println(response.body());
-  }
-}</pre>
-          <h4>JavaScript Node.js</h4>
-          <pre>import { openAsBlob } from 'node:fs';
-
-const file = await openAsBlob('./photo.png');
-const form = new FormData();
-form.append('file', file, 'photo.png');
-form.append('expires', '7d');
-
-const res = await fetch('https://warpbox.dev/u', {
-  method: 'POST',
-  headers: {
-    Authorization: 'Bearer YOUR_API_KEY'
-  },
-  body: form
-});
-
-console.log(await res.text());</pre>
-        `
-      }
-    };
-
-    function openDoc(name) {
-      const doc = docs[name];
-      if (!doc) return;
-      el.docPopupTitle.textContent = doc.title;
-      el.docPopupBody.innerHTML = doc.html;
-      el.docPopup.classList.add('is-visible');
-      if (el.modalBackdrop) el.modalBackdrop.classList.add('is-visible');
-      setStatus(`${doc.title} opened`);
-    }
-
-    function closeDoc() {
-      el.docPopup.classList.remove('is-visible');
-      el.docPopup.classList.remove('is-about-popup');
-      if (el.modalBackdrop) el.modalBackdrop.classList.remove('is-visible');
-    }
-
-    function addFiles(fileList) {
-      if (uploadLocked) { showToast('This box is sealed. Clear it to create a fresh upload.', 'warning'); return; }
-      const incoming = Array.from(fileList).map(file => ({ name: file.name, size: file.size || 1, progress: 0, uploaded: false }));
-      if (!incoming.length) return;
-      const { unique, duplicates } = duplicateFileReport(incoming);
-      if (unique.length) {
-        files.push(...unique);
-        shareUrl = '';
-        setShareUrl('');
-        renderFiles();
-        const warning = quotaWarningMessage(unique);
-        if (warning) showWarningDialog('Quota warning', warning);
-      }
-      if (duplicates.length) showDuplicateDialog(duplicates);
-      const added = unique.length;
-      const skipped = duplicates.length;
-      if (added) setStatus(`${added} file${added === 1 ? '' : 's'} added to queue${skipped ? `, ${skipped} duplicate${skipped === 1 ? '' : 's'} pending` : ''}`);
-      else setStatus(`${skipped} duplicate file${skipped === 1 ? '' : 's'} need your choice`);
-    }
-
-    function loadDemoFiles() {
-      if (files.length) return;
-      files = demoFiles.map(file => ({ ...file }));
-      renderFiles();
-      setStatus('Demo files loaded. Press Start upload to simulate progress.');
-    }
-
-    function removeFile(index) {
-      if (uploadLocked) { showToast('Box already created. Clear it before editing the queue.', 'warning'); return; }
-      files.splice(index, 1);
-      shareUrl = '';
-      setShareUrl('');
-      renderFiles();
-      setStatus('File removed from queue');
-    }
-
-    function clearQueue() {
-      files = [];
-      shareUrl = '';
-      uploadLocked = false;
-      setBoxOptionsLocked(false);
-      impactedFiles = new Set();
-      overallImpactDone = false;
-      setShareUrl('');
-      clearInterval(uploadTimer);
-      uploadTimer = null;
-      if (el.startButton) el.startButton.disabled = false;
-      if (el.fileInput) el.fileInput.disabled = false;
-      setDisabledReasons();
-      if (el.dropzone) el.dropzone.classList.remove('is-locked');
-      renderFiles();
-      setStatus('Queue cleared');
-      showToast('Queue cleared. The void is tidy again.');
-    }
-
-    function confirmClearQueue() {
-      if (!files.length && !shareUrl) {
-        showToast('Nothing to clear. Impressive restraint.');
-        return;
-      }
-      el.docPopupTitle.textContent = 'Clear WarpBox?';
-      el.docPopupBody.innerHTML = `
-        <h3>Confirm clear</h3>
-        <p>This removes the current queue, resets progress, and unlocks the Start upload button.</p>
-        <p>Uploaded files in this demo are not real, but the button still wants consent.</p>
-        <div class="copy-fallback-actions">
-          <button class="win98-button" type="button" id="confirm-clear-yes">Clear</button>
-          <button class="win98-button" type="button" id="confirm-clear-no">Cancel</button>
-        </div>`;
-      el.modalBackdrop.classList.add('is-visible');
-      el.docPopup.classList.add('is-visible');
-      setTimeout(() => document.getElementById('confirm-clear-no')?.focus(), 0);
-    }
-
-    function startUpload() {
-      if (hasQuotaError()) {
-        showWarningDialog('Over maximum upload size!', quotaWarningMessage() || 'Over maximum upload size!');
-        showToast('Over maximum upload size!', 'error');
-        return;
-      }
-      if (uploadLocked) {
-        showToast('Upload already started. Press Clear to create another box.', 'warning');
-        return;
-      }
-      if (!files.length) {
-        showWarningDialog('No files selected', 'There are no files selected. Please select files to upload.');
-        showToast('No files selected. Please select files to upload.', 'warning');
-        setStatus('No files selected');
-        return;
-      }
-      if (hasQuotaError()) {
-        showWarningDialog('Over maximum upload size!', quotaWarningMessage() || 'Over maximum upload size!');
-        showToast('Over maximum upload size!', 'error');
-        return;
-      }
-      uploadLocked = true;
-      setBoxOptionsLocked(true);
-      if (el.startButton) el.startButton.disabled = true;
-      if (el.fileInput) el.fileInput.disabled = true;
-      setDisabledReasons();
-      if (el.dropzone) el.dropzone.classList.add('is-locked');
-      clearInterval(uploadTimer);
-      setStatus('Uploading...');
-      uploadTimer = setInterval(() => {
-        let changed = false;
-        files = files.map(file => {
-          if (file.progress >= 100) return file;
-          changed = true;
-          const step = Math.max(3, Math.round(90000000 / Math.max(file.size, 1) * 100));
-          return { ...file, progress: Math.min(100, file.progress + step + Math.random() * 9) };
-        });
-        renderFiles();
-        if (!changed || files.every(file => file.progress >= 100)) {
-          clearInterval(uploadTimer);
-          uploadTimer = null;
-          files = files.map(file => ({ ...file, progress: 100, uploaded: true }));
-          renderFiles();
-          setStatus('Upload complete. Share URL created. Press Clear to start another upload.');
-          showToast('Upload complete. Share URL created.');
-        }
-      }, 450);
-    }
-
-    function createShareLink() {
-      if (shareUrl || !files.length) return;
-      const token = Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 4).toUpperCase();
-      setShareUrl(`https://warpbox.dev/b/${token}`);
-    }
-
-    function setShareUrl(url) {
-      shareUrl = url;
-      if (!url) {
-        el.shareLink.textContent = 'Not created yet';
-        el.shareLink.href = '#';
-        el.shareLink.classList.add('is-empty');
-        el.copyButton.disabled = true;
-        el.copyButton.dataset.disabledReason = 'There is no share URL yet. Start an upload first.';
-      } else {
-        el.shareLink.textContent = url;
-        el.shareLink.href = url;
-        el.shareLink.classList.remove('is-empty');
-        el.copyButton.disabled = false;
-        el.copyButton.dataset.disabledReason = '';
-      }
-      updateTerminal();
-    }
-
-    async function copyLink() {
-      if (!shareUrl) {
-        showToast('No share URL yet. Start an upload first. The box contains vibes, not files.', 'warning');
-        return;
-      }
-      try {
-        await navigator.clipboard.writeText(shareUrl);
-        showToast('Share URL copied to clipboard.');
-        setStatus('Copied share URL');
-      } catch (_) {
-        showCopyFallback('Share URL', shareUrl, shareUrl);
-      }
-    }
-
-    function randomPassword() {
-      el.password.value = Math.random().toString(36).slice(2, 8) + '-' + Math.random().toString(36).slice(2, 6);
-      setStatus('Generated a demo password');
-      updateTerminal();
-    }
-
-    const funnyAdjectives = ['haunted', 'turbo', 'sleepy', 'chunky', 'wizard', 'neon', 'forbidden', 'crunchy', 'cosmic', 'feral'];
-    const funnyNouns = ['floppy', 'box', 'hamster', 'archive', 'goblin', 'packet', 'zip', 'portal', 'folder', 'upload'];
-
-    function slugify(value) {
-      return String(value || '')
-        .toLowerCase()
-        .replace(/[^a-z0-9-]+/g, '-')
-        .replace(/-+/g, '-')
-        .replace(/^-|-$/g, '')
-        .slice(0, 32);
-    }
-
-    function syncSlugFromName(force = false) {
-      if (!el.customSlug || !el.boxName) return;
-      if (force || !el.customSlug.value || el.customSlug.dataset.auto === 'true') {
-        el.customSlug.value = slugify(el.boxName.value);
-        el.customSlug.dataset.auto = 'true';
-      }
-      updateTerminal();
-    }
-
-    function generateFunnyBoxName() {
-      const adj = funnyAdjectives[Math.floor(Math.random() * funnyAdjectives.length)];
-      const noun = funnyNouns[Math.floor(Math.random() * funnyNouns.length)];
-      const number = Math.floor(100 + Math.random() * 900);
-      const titleAdj = adj.charAt(0).toUpperCase() + adj.slice(1);
-      const titleNoun = noun.charAt(0).toUpperCase() + noun.slice(1);
-      el.boxName.value = `${titleAdj} ${titleNoun} ${number}`;
-      syncSlugFromName(true);
-      setStatus('Hamsters writing random names for you');
-      showToast('Hamsters writing random names for you', 'info');
-    }
-
-    function openMenu(button) {
-      document.querySelectorAll('.menu-item').forEach(item => {
-        const isTarget = item.contains(button);
-        item.classList.toggle('is-open', isTarget && !item.classList.contains('is-open'));
-        const btn = item.querySelector('.menu-button');
-        if (btn) btn.setAttribute('aria-expanded', item.classList.contains('is-open') ? 'true' : 'false');
-      });
-    }
-
-    function closeMenus() {
-      document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('is-open'));
-      document.querySelectorAll('.menu-button').forEach(button => button.setAttribute('aria-expanded', 'false'));
-      if (el.startWrap) el.startWrap.classList.remove('is-open');
-    }
-
-    function runAction(action) {
-      switch (action) {
-        case 'browse': uploadLocked ? showToast('Box already created. Clear it to add files to a new box.') : el.fileInput.click(); break;
-        case 'start-upload': startUpload(); break;
-        case 'copy-link': copyLink(); break;
-        case 'copy-curl': copyCurlCommand(); break;
-        case 'clear': confirmClearQueue(); break;
-        case 'toggle-delete-once': el.deleteOnce.checked = !el.deleteOnce.checked; setStatus(`Delete after first download ${el.deleteOnce.checked ? 'enabled' : 'disabled'}`); break;
-        case 'toggle-page': el.downloadPage.checked = !el.downloadPage.checked; setStatus(`Download page ${el.downloadPage.checked ? 'enabled' : 'disabled'}`); break;
-        case 'random-password': randomPassword(); break;
-        case 'random-box-name': generateFunnyBoxName(); break;
-        case 'clear-password': el.password.value = ''; setStatus('Password cleared'); updateTerminal(); break;
-        case 'help': showToast('Drop files, configure Box Options, then press Start upload. Menus are clickable.'); setStatus('Help opened'); break;
-        case 'terminal-help': openDoc('cli'); break;
-        case 'minimize': showToast('Minimize? Nice try. This box has abandonment issues.'); break;
-        case 'toggle-fit': document.body.classList.toggle('fit-window'); showToast('Maximize requested. The pixel rectangle feels important now.'); break;
-        case 'fake-close': showToast('Close button denied. The box is emotionally attached to your files.'); break;
-        case 'side-close': showToast('Box Options refuses to leave. It pays rent in checkboxes.'); break;
-        case 'side-help': showToast('Terminal help? Copy the command. Feed it files. Try not to anger bash.'); break;
-        case 'side-folder-close': showToast('The folder window saw that click and chose denial.'); break;
-        case 'coming-soon': showToast('Coming Soon, not implemented just yet.'); break;
-      }
-    }
-
-    el.fileInput.addEventListener('change', event => addFiles(event.target.files));
-    el.form.addEventListener('submit', event => { event.preventDefault(); startUpload(); });
-    el.copyButton.addEventListener('click', copyLink);
-    if (el.copyCurlButton) el.copyCurlButton.addEventListener('click', copyCurlCommand);
-    if (el.docPopupClose) el.docPopupClose.addEventListener('click', closeDoc);
-    if (el.modalBackdrop) el.modalBackdrop.addEventListener('click', closeDoc);
-    if (el.docPopupBody) el.docPopupBody.addEventListener('click', event => {
-      if (event.target.closest('#confirm-clear-yes')) { clearQueue(); closeDoc(); }
-      if (event.target.closest('#confirm-clear-no')) closeDoc();
-      if (event.target.closest('#duplicate-append')) { appendPendingDuplicates(); closeDoc(); }
-      if (event.target.closest('#duplicate-skip')) { pendingDuplicateFiles = []; showToast('Duplicate files skipped.', 'info'); closeDoc(); }
-    });
-
-    el.fileList.addEventListener('click', event => {
-      const remove = event.target.closest('[data-remove]');
-      if (remove) removeFile(Number(remove.dataset.remove));
-    });
-
-    ['dragenter', 'dragover'].forEach(name => {
-      el.dropSurface.addEventListener(name, event => {
-        event.preventDefault();
-        el.dropzone.classList.add('is-dragging');
-        setStatus('Drop files to add them to the queue');
-      });
-    });
-
-    ['dragleave', 'drop'].forEach(name => {
-      el.dropSurface.addEventListener(name, event => {
-        event.preventDefault();
-        el.dropzone.classList.remove('is-dragging');
-      });
-    });
-
-    el.dropSurface.addEventListener('drop', event => addFiles(event.dataTransfer.files));
-
-    document.querySelectorAll('.menu-item').forEach(item => {
-      item.addEventListener('mouseenter', () => {
-        const anyOpen = document.querySelector('.menu-item.is-open');
-        if (!anyOpen || anyOpen === item) return;
-        document.querySelectorAll('.menu-item').forEach(other => {
-          const open = other === item;
-          other.classList.toggle('is-open', open);
-          const btn = other.querySelector('.menu-button');
-          if (btn) btn.setAttribute('aria-expanded', open ? 'true' : 'false');
-        });
-      });
-    });
-
-
-    document.addEventListener('pointerdown', event => {
-      const disabledTarget = event.target.closest('button:disabled, input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly]');
-      if (!disabledTarget) return;
-      let reason = disabledTarget.dataset.disabledReason || disabledTarget.title || 'This control is disabled right now.';
-      if (disabledTarget.classList && disabledTarget.classList.contains('upload-file-remove')) reason = 'This file cannot be removed because the upload box is already created. Press Clear to start a separate box.';
-      showToast(reason, 'warning');
-      if (disabledTarget.id === 'start-button' && hasQuotaError()) {
-        showWarningDialog('Over maximum upload size!', quotaWarningMessage() || reason);
-      }
-    }, true);
-
-    document.addEventListener('click', event => {
-      const menuButton = event.target.closest('.menu-button');
-      const actionTarget = event.target.closest('[data-action]');
-      const expiryTarget = event.target.closest('[data-expiry]');
-      const docTarget = event.target.closest('[data-doc]');
-
-      if (docTarget) {
-        openDoc(docTarget.dataset.doc);
-        closeMenus();
-        return;
-      }
-
-      if (menuButton) {
-        event.stopPropagation();
-        openMenu(menuButton);
-        return;
-      }
-
-      if (expiryTarget) {
-        el.expiry.value = expiryTarget.dataset.expiry;
-        setStatus(`Expiry changed to ${el.expiry.options[el.expiry.selectedIndex].text}`);
-        updateTerminal();
-        closeMenus();
-        return;
-      }
-
-      if (actionTarget) {
-        event.preventDefault();
-        runAction(actionTarget.dataset.action);
-        closeMenus();
-        return;
-      }
-
-      if (!event.target.closest('.menu-popup')) closeMenus();
-    });
-
-    if (el.startMenuButton && el.startWrap) {
-      el.startMenuButton.addEventListener('click', event => {
-        event.stopPropagation();
-        document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('is-open'));
-        el.startWrap.classList.toggle('is-open');
-      });
-    }
-
-    [el.expiry, el.password, el.maxViews, el.boxName, el.customSlug, el.downloadPage, el.deleteOnce, el.allowPreview, el.keepFilenames, el.privateBox, el.apiKeyMode, el.apiKeyInput].filter(Boolean).forEach(input => {
-      input.addEventListener('input', () => { setStatus('Box options updated'); updateTerminal(); });
-      input.addEventListener('change', () => { setStatus('Box options updated'); updateTerminal(); });
-    });
-
-
-    if (el.randomBoxName) el.randomBoxName.addEventListener('click', generateFunnyBoxName);
-
-    if (el.boxName) {
-      el.boxName.addEventListener('input', () => syncSlugFromName(false));
-    }
-
-    if (el.customSlug) {
-      el.customSlug.addEventListener('input', () => {
-        const clean = slugify(el.customSlug.value);
-        if (el.customSlug.value !== clean) el.customSlug.value = clean;
-        el.customSlug.dataset.auto = 'false';
-        updateTerminal();
-      });
-    }
-
-    if (el.apiKeyRow) {
-      el.apiKeyRow.addEventListener('click', event => {
-        if (el.apiKeyInput && el.apiKeyInput.disabled) {
-          showToast(uploadLocked ? 'Box Options are locked because this box was already created. Press Clear to start another upload.' : 'Enable "Use API key for larger quota" before typing an API key.', 'warning');
-        }
-      });
-    }
-
-
-    function syncApiKeyField() {
-      if (uploadLocked) return;
-      const enabled = !!(el.apiKeyMode && el.apiKeyMode.checked);
-      if (el.apiKeyRow) el.apiKeyRow.classList.toggle('is-visible', enabled);
-      if (el.apiKeyInput) {
-        el.apiKeyInput.disabled = !enabled;
-        if (!enabled) el.apiKeyInput.value = '';
-      }
-      updateTerminal();
-    }
-    if (el.apiKeyMode) el.apiKeyMode.addEventListener('change', syncApiKeyField);
-
-    if (el.maxViews) {
-      el.maxViews.addEventListener('wheel', event => {
-        if (document.activeElement !== el.maxViews && !el.maxViews.matches(':hover')) return;
-        event.preventDefault();
-        const current = Number(el.maxViews.value || 0);
-        let step = 1;
-        if (event.shiftKey) step *= 10;
-        if (event.ctrlKey || event.metaKey) step *= 100;
-        const direction = event.deltaY < 0 ? 1 : -1;
-        el.maxViews.value = Math.max(1, Math.min(9999, current + direction * step));
-        setStatus(`Max views changed to ${el.maxViews.value}`);
-        updateTerminal();
-      }, { passive: false });
-    }
-
-    document.addEventListener('keydown', event => {
-      if (event.key === 'Escape') { closeMenus(); closeDoc(); }
-      if (event.key === 'F1') { event.preventDefault(); openDoc('faq'); }
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'u') { event.preventDefault(); startUpload(); }
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); copyCurlCommand(); }
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'l') { event.preventDefault(); copyLink(); }
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'o') { event.preventDefault(); el.fileInput.click(); }
-      if (event.shiftKey && !event.ctrlKey && !event.metaKey && ['1','2','3','4'].includes(event.key)) {
-        event.preventDefault();
-        const focusTargets = {
-          '1': el.fileList,
-          '2': document.querySelector('.side-panel .side-body'),
-          '3': el.terminal,
-          '4': document.querySelector('.helper-body')
-        };
-        const target = focusTargets[event.key];
-        if (target) { target.setAttribute('tabindex', target.getAttribute('tabindex') || '0'); target.focus(); }
-      }
-      if (event.key === 'Enter' && document.activeElement === document.body) startUpload();
-    });
-
-    function updateClock() {
-      if (!el.clock) return;
-      const now = new Date();
-      el.clock.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    }
-
-    syncApiKeyField();
-    setBoxOptionsLocked(false);
-    updateClock();
-    if (el.clock) setInterval(updateClock, 1000);
-    renderFiles();
-  </script>
-</body>
-</html>
