From 5bffb542c23dac4c5f23247706d1cdee2d72c9fa Mon Sep 17 00:00:00 2001
From: casper <casper@noreply.git.leakscript.com>
Date: Mon, 22 Jun 2026 16:24:38 +0000
Subject: [PATCH] Add public/styles.css

---
 public/styles.css | 548 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 548 insertions(+)
 create mode 100644 public/styles.css

diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..514625d
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,548 @@
+:root {
+  --bg: #000;
+  --text: #f3f3f3;
+
+  --panel: rgba(20, 20, 20, .09);
+  --panel-border: rgba(255, 255, 255, .12);
+  --panel-shadow: 0 10px 30px rgba(0, 0, 0, .16);
+
+  --track-fill: rgba(243, 245, 241, .33);
+  --track-empty: rgba(255, 255, 255, .06);
+
+  --thumb-bg: rgba(250, 252, 249, .92);
+  --thumb-border: rgba(255, 255, 255, .28);
+  --thumb-shadow:
+    0 2px 5px rgba(0, 0, 0, .05),
+    inset 0 1px 1px rgba(255, 255, 255, .25),
+    0 0 0 2px rgba(255, 255, 255, .05);
+
+  --thumb-shadow-hover:
+    0 3px 10px rgba(0, 0, 0, .12),
+    inset 0 1px 1px rgba(255, 255, 255, .65),
+    0 0 0 5px rgba(255, 255, 255, .14);
+
+  --thumb-shadow-active:
+    0 2px 8px rgba(0, 0, 0, .1),
+    inset 0 1px 1px rgba(255, 255, 255, .72),
+    0 0 0 6px rgba(255, 255, 255, .18);
+
+  --range-track-h: 6px;
+  --range-thumb-s: 6px;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100dvh;
+  background: var(--bg);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-text-size-adjust: 100%;
+  touch-action: manipulation;
+}
+
+.player {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  background: var(--bg);
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.player::before {
+  content: "";
+  position: absolute;
+  inset: -20%;
+  pointer-events: none;
+  background: radial-gradient(
+    60% 50% at 50% 50%,
+    rgba(30, 70, 90, .18),
+    transparent 70%
+  );
+  filter: blur(40px);
+  opacity: .35;
+  z-index: 0;
+}
+
+.player::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    65% 45% at 50% 100%,
+    rgba(255, 255, 255, .04),
+    transparent 70%
+  );
+  z-index: 0;
+}
+
+video {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  background: var(--bg);
+  filter: saturate(1.01) contrast(1);
+  transform: translateZ(0) scale(1.01);
+  transform-origin: center;
+  backface-visibility: hidden;
+  will-change: transform;
+  transition: transform .28s ease, object-fit .22s ease;
+}
+
+.controls {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: var(--panel);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--panel-border);
+  box-shadow: var(--panel-shadow);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .3s ease, transform .3s ease;
+  transform: translateY(10px);
+  z-index: 5;
+}
+
+.controls.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.controls.mobile-mode {
+  gap: 8px;
+}
+
+.controls.desktop-mode {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%) translateY(10px);
+  width: min(720px, calc(100vw - 24px));
+}
+
+.controls.desktop-mode.visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+button {
+  appearance: none;
+  border: none;
+  outline: none;
+  color: transparent;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  min-height: 22px;
+  border-radius: 50%;
+  font-size: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  background: rgba(255, 255, 255, .07);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, .09);
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, .14),
+    inset 0 1px 1px rgba(255, 255, 255, .22),
+    inset 0 -1px 1px rgba(255, 255, 255, .06);
+  transition:
+    transform .15s ease,
+    background .15s ease,
+    box-shadow .15s ease,
+    border-color .15s ease;
+}
+
+button:hover {
+  background: rgba(255, 255, 255, .11);
+  border-color: rgba(255, 255, 255, .22);
+  box-shadow:
+    0 3px 8px rgba(0, 0, 0, .16),
+    inset 0 1px 1px rgba(255, 255, 255, .28),
+    inset 0 -1px 1px rgba(255, 255, 255, .08);
+}
+
+button:active {
+  transform: scale(.95);
+  background: rgba(255, 255, 255, .2);
+  box-shadow:
+    0 1px 5px rgba(0, 0, 0, .12),
+    inset 0 1px 1px rgba(255, 255, 255, .18);
+}
+
+.sidebtn {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 6;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, .02);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, .12);
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, .14),
+    inset 0 1px 1px rgba(255, 255, 255, .22),
+    inset 0 -1px 1px rgba(255, 255, 255, .06);
+  color: #f2f2f2;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity .34s ease .28s,
+    transform .15s ease,
+    background .15s ease,
+    box-shadow .15s ease,
+    border-color .15s ease;
+}
+
+.player.side-visible .sidebtn {
+  opacity: 1;
+  pointer-events: auto;
+  transition-delay: 0s, 0s, 0s, 0s, 0s;
+}
+
+.sidebtn:hover {
+  background: rgba(255, 255, 255, .16);
+  border-color: rgba(255, 255, 255, .22);
+}
+
+.sidebtn:active {
+  transform: translateY(-50%) scale(.95);
+}
+
+#prevBtn {
+  left: 14px;
+}
+
+#nextBtn {
+  right: 14px;
+}
+
+.sidebtn svg {
+  width: 4px;
+  height: 4px;
+  fill: none;
+  stroke: #f7f7f7;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (max-width: 768px) {
+  .controls {
+    left: 12px;
+    right: 12px;
+    width: auto;
+  }
+
+  .sidebtn {
+    display: none !important;
+  }
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  flex: 1;
+  min-width: 72px;
+  height: 28px;
+  margin: 0;
+  cursor: pointer;
+  touch-action: manipulation;
+  background: transparent;
+  outline: none;
+  background-image: linear-gradient(
+    to right,
+    var(--track-fill) 0%,
+    var(--track-fill) var(--range-progress, 0%),
+    var(--track-empty) var(--range-progress, 0%),
+    var(--track-empty) 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 100% var(--range-track-h);
+  background-position: center;
+  border-radius: 999px;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  height: var(--range-track-h);
+  border-radius: 999px;
+  background: transparent;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--range-thumb-s);
+  height: var(--range-thumb-s);
+  border-radius: 50%;
+  background: var(--thumb-bg);
+  border: 1px solid var(--thumb-border);
+  box-shadow: var(--thumb-shadow);
+  margin-top: calc((var(--range-track-h) - var(--range-thumb-s)) / 2);
+  transition:
+    transform .15s ease,
+    box-shadow .15s ease,
+    background .15s ease,
+    border-color .15s ease;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+input[type="range"]::-moz-range-track {
+  height: var(--range-track-h);
+  border-radius: 999px;
+  background: var(--track-empty);
+}
+
+input[type="range"]::-moz-range-progress {
+  height: var(--range-track-h);
+  border-radius: 999px;
+  background: var(--track-fill);
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: var(--range-thumb-s);
+  height: var(--range-thumb-s);
+  border-radius: 50%;
+  background: var(--thumb-bg);
+  border: 1px solid var(--thumb-border);
+  box-shadow: var(--thumb-shadow);
+  transition:
+    transform .15s ease,
+    box-shadow .15s ease,
+    background .15s ease,
+    border-color .15s ease;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+input[type="range"]:hover::-webkit-slider-thumb {
+  transform: scale(1.06);
+  background: rgba(255, 255, 255, .92);
+  border-color: rgba(255, 255, 255, .56);
+  box-shadow: var(--thumb-shadow-hover);
+}
+
+input[type="range"]:hover::-moz-range-thumb {
+  transform: scale(1.06);
+  background: rgba(255, 255, 255, .92);
+  border-color: rgba(255, 255, 255, .56);
+  box-shadow: var(--thumb-shadow-hover);
+}
+
+input[type="range"]:active::-webkit-slider-thumb {
+  transform: scale(.96);
+  background: rgba(255, 255, 255, .96);
+  border-color: rgba(255, 255, 255, .7);
+  box-shadow: var(--thumb-shadow-active);
+}
+
+input[type="range"]:active::-moz-range-thumb {
+  transform: scale(.96);
+  background: rgba(255, 255, 255, .96);
+  border-color: rgba(255, 255, 255, .7);
+  box-shadow: var(--thumb-shadow-active);
+}
+
+#volume {
+  max-width: 99px;
+  min-width: 70px;
+}
+
+.tap-unmute {
+  position: absolute;
+  left: 50%;
+  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
+  transform: translateX(-50%);
+  padding: 12px 18px;
+  border-radius: 14px;
+  background: rgba(15, 15, 15, .45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, .08);
+  color: #fff;
+  font-size: 14px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .25s ease;
+  z-index: 6;
+  white-space: nowrap;
+}
+
+.tap-unmute.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.video-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  color: var(--text);
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "SF Pro Display",
+    "SF Pro Text",
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  font-size: .33rem;
+  font-weight: 300;
+  letter-spacing: -.02em;
+  text-align: center;
+  pointer-events: none;
+  opacity: 0;
+  animation: realFlicker 5s cubic-bezier(.22, .61, .36, 1) forwards;
+  text-shadow:
+    0 0 6px rgba(255, 255, 255, .06),
+    0 0 14px rgba(255, 255, 255, .03);
+}
+
+@keyframes realFlicker {
+  0% {
+    opacity: 0;
+  }
+
+  2% {
+    opacity: .18;
+  }
+
+  3% {
+    opacity: 0;
+  }
+
+  5% {
+    opacity: .42;
+  }
+
+  6% {
+    opacity: .68;
+  }
+
+  8% {
+    opacity: .76;
+  }
+
+  9% {
+    opacity: .62;
+  }
+
+  11% {
+    opacity: 1;
+  }
+
+  15% {
+    opacity: .72;
+  }
+
+  18% {
+    opacity: .94;
+  }
+
+  24% {
+    opacity: 1;
+  }
+
+  38% {
+    opacity: .98;
+  }
+
+  55% {
+    opacity: 1;
+  }
+
+  68% {
+    opacity: .82;
+  }
+
+  72% {
+    opacity: .96;
+  }
+
+  78% {
+    opacity: .58;
+  }
+
+  83% {
+    opacity: .88;
+  }
+
+  88% {
+    opacity: .58;
+  }
+
+  92% {
+    opacity: .58;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.player:hover .video-text {
+  opacity: .05;
+}
+
+@media (max-width: 430px) {
+  .controls {
+    gap: 8px;
+    padding: 10px;
+  }
+
+  button {
+    width: 25px;
+    height: 25px;
+    min-width: 25px;
+    min-height: 25px;
+    font-size: 13px;
+  }
+
+  #volume {
+    max-width: 72px;
+    min-width: 60px;
+  }
+
+  .tap-unmute {
+    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
+  }
+}
\ No newline at end of file