.thinny-fog-clock {
  --thinny-clock-glow: rgba(186, 255, 241, 0.86);
  --thinny-clock-fog: rgba(185, 255, 239, 0.18);
  --thinny-clock-dim: rgba(187, 255, 239, 0.42);
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 2147483000;
  box-sizing: border-box;
  width: min(17.86rem, calc(100vw - 24px));
  min-height: 3.7rem;
  pointer-events: auto;
  isolation: isolate;
  color: var(--thinny-clock-glow);
  font: 600 1.22rem/1.1 "Courier New", ui-monospace, monospace;
  letter-spacing: 0;
  opacity: 0.9;
  transform: translateZ(0) scale(0.55);
  transform-origin: left bottom;
  transition: transform 220ms cubic-bezier(0.18, 0.88, 0.14, 1), filter 220ms ease, opacity 180ms ease;
  will-change: transform;
}

.thinny-fog-clock--zoomed {
  z-index: 85;
  opacity: 0.98;
  filter: drop-shadow(0 0 18px rgba(111, 255, 229, 0.24));
  transform: translateZ(0) scale(1);
}

.thinny-fog-clock::before,
.thinny-fog-clock::after {
  position: absolute;
  inset: -1.4rem -1.8rem;
  content: "";
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.thinny-fog-clock::before {
  background:
    radial-gradient(ellipse at 36% 58%, rgba(222, 255, 249, 0.2), transparent 36%),
    radial-gradient(ellipse at 58% 45%, rgba(105, 255, 219, 0.14), transparent 42%),
    radial-gradient(ellipse at 50% 50%, rgba(155, 255, 230, 0.08), transparent 64%);
  filter: blur(0.95rem);
  animation: thinny-fog-breathe 7.5s ease-in-out infinite;
}

.thinny-fog-clock::after {
  background:
    linear-gradient(90deg, transparent, rgba(227, 255, 250, 0.12), transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.52;
  filter: blur(0.28rem);
  transform: skewX(-7deg);
  animation: thinny-projection-drift 11s linear infinite;
}

.thinny-fog-clock__mist {
  position: absolute;
  inset: -0.9rem -1.2rem;
  z-index: -1;
  overflow: hidden;
  border-radius: 999px;
  opacity: 0.72;
  filter: blur(0.28rem);
}

.thinny-fog-clock__mist span {
  position: absolute;
  width: 45%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--thinny-clock-fog), transparent 68%);
  animation: thinny-mist-wander 14s ease-in-out infinite;
}

.thinny-fog-clock__mist span:nth-child(1) {
  left: 4%;
  top: 8%;
}

.thinny-fog-clock__mist span:nth-child(2) {
  right: 0;
  top: 34%;
  animation-delay: -4s;
  animation-duration: 18s;
}

.thinny-fog-clock__mist span:nth-child(3) {
  left: 34%;
  bottom: -10%;
  animation-delay: -8s;
  animation-duration: 16s;
}

.thinny-fog-clock__face {
  position: relative;
  width: 100%;
  min-height: 3.7rem;
  padding: 0.29rem 0.45rem 0.43rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.thinny-fog-clock__time {
  display: block;
  font-size: clamp(1.4rem, 6.95vw, 2.17rem);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow:
    0 0 9px rgba(145, 255, 232, 0.75),
    0 0 26px rgba(61, 219, 255, 0.32);
  filter: drop-shadow(0 0 10px rgba(151, 255, 234, 0.82)) drop-shadow(0 0 28px rgba(86, 211, 255, 0.32));
  animation: thinny-clock-flicker 6.4s steps(1, end) infinite;
}

.thinny-fog-clock__line {
  display: block;
  min-height: 1.39rem;
  margin-top: 0.21rem;
  color: rgba(216, 255, 244, 0.82);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.67rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  text-shadow:
    0 0 7px rgba(151, 255, 234, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  filter: drop-shadow(0 0 6px rgba(151, 255, 234, 0.56));
}

.thinny-fog-clock__zoom-control,
.thinny-fog-clock__sound-control {
  position: absolute;
  left: calc(100% + 0.72rem);
  z-index: 3;
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 30%, rgba(232, 255, 251, 0.26), transparent 34%),
    rgba(0, 18, 17, 0.28);
  color: rgba(218, 255, 249, 0.92);
  font: 700 1.28rem/1 "Courier New", ui-monospace, monospace;
  text-shadow:
    0 0 0.42rem rgba(194, 255, 243, 0.84),
    0 0 1.1rem rgba(109, 255, 226, 0.42);
  box-shadow:
    inset 0 0 0.7rem rgba(159, 255, 235, 0.12),
    0 0 0.9rem rgba(116, 255, 226, 0.24);
  cursor: pointer;
  transform: translateZ(0) rotate(0deg);
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease, color 190ms ease;
}

.thinny-fog-clock__zoom-control {
  bottom: 0.46rem;
}

.thinny-fog-clock__sound-control {
  bottom: 2.38rem;
  color: rgba(202, 255, 243, 0.74);
  font-size: 0.88rem;
  opacity: 0.78;
}

.thinny-fog-clock__zoom-control:hover,
.thinny-fog-clock__zoom-control:focus-visible,
.thinny-fog-clock__sound-control:hover,
.thinny-fog-clock__sound-control:focus-visible {
  color: #fff;
  outline: 0;
  box-shadow:
    inset 0 0 0.82rem rgba(177, 255, 239, 0.2),
    0 0 1rem rgba(130, 255, 229, 0.4),
    0 0 2rem rgba(86, 221, 255, 0.18);
}

.thinny-fog-clock__zoom-control--active {
  color: rgba(255, 244, 218, 0.98);
  transform: translateZ(0) rotate(45deg);
  box-shadow:
    inset 0 0 0.82rem rgba(255, 213, 120, 0.16),
    0 0 1rem rgba(255, 213, 120, 0.32);
}

.thinny-fog-clock__sound-control--active {
  color: rgba(129, 255, 224, 0.96);
  opacity: 1;
}

/* Hide the old large audio pill; the fog-clock sound glyph proxies it. */
.absolute.bottom-8.right-8 {
  display: none !important;
}

@keyframes thinny-clock-flicker {
  0%, 92%, 100% { opacity: 0.94; transform: translate(0, 0); }
  93% { opacity: 0.7; transform: translate(0.04rem, -0.02rem); }
  94% { opacity: 0.98; transform: translate(-0.03rem, 0.01rem); }
  95% { opacity: 0.76; }
}

@keyframes thinny-fog-breathe {
  0%, 100% { opacity: 0.58; transform: scaleX(0.94) scaleY(0.88); }
  50% { opacity: 0.88; transform: scaleX(1.05) scaleY(1.08); }
}

@keyframes thinny-projection-drift {
  0% { transform: translateX(-9%) skewX(-7deg); }
  100% { transform: translateX(9%) skewX(-7deg); }
}

@keyframes thinny-mist-wander {
  0%, 100% { transform: translate3d(-8%, 2%, 0) scale(0.96); opacity: 0.42; }
  45% { transform: translate3d(18%, -8%, 0) scale(1.16); opacity: 0.76; }
  75% { transform: translate3d(2%, 12%, 0) scale(1.04); opacity: 0.5; }
}

@media (max-width: 640px) {
  .thinny-fog-clock {
    left: 12px;
    bottom: 12px;
    width: min(17.86rem, calc(100vw - 24px));
  }
}