# Time zone change toast

> After landing, the clock hands spin to local time and the dial turns from morning to dusk; you can switch back to home time.

- Category: [Toasts](https://library.aimran.es/components/toasts)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-toast-timezone-shift
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

Landing in another time zone is a moment travel apps can mark with more than a line of text. Here a small analog clock spins its minute hand eight full turns while the hour hand moves forward, and a dusk gradient fades in over the morning dial. Everything runs on CSS rotate transitions with a spring curve, with no script for the animation.

The two colors paint the evening sky behind the hands. The Home time toggle uses aria-pressed and swaps the subtitle; change the angles in the CSS to match real cities, or set them from JavaScript with your traveller's offset.

## Code

### HTML

```html
<div class="uvq09-tzn"><button type="button" class="fire">Land again</button><div class="tt" role="status"><span class="clk" aria-hidden="true"><i class="hh"></i><i class="mm"></i><i class="ct"></i></span><span class="tx"><b>Local time updated</b><small class="z1">Tokyo · 17:42 · 8 h ahead of home</small><small class="z2">Madrid · 9:42</small></span><button type="button" class="hm" aria-pressed="false">Home time</button></div></div>
```

### CSS

```css
.uvq09-tzn {
  --c1: #f97316;
  --c2: #1e3a8a;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

.uvq09-tzn {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 21em;
  height: 15em;
}

.uvq09-tzn .fire {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 50%;
  top: 1.2em;
  translate: -50% 0;
  padding: .6em 1.1em;
  border-radius: 2em;
  font-size: .82em;
  font-weight: 650;
  white-space: nowrap;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .fire:hover {
  color: var(--fg);
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq09-tzn .fire:active {
  scale: .96;
}

.uvq09-tzn .fire:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tzn .tt {
  position: absolute;
  left: 50%;
  bottom: 1em;
  width: 19em;
  translate: -50% 0;
  border-radius: 1.1em;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 1.2em 2.4em -1em rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  gap: .85em;
  padding: .8em .85em;
  transform: translateY(130%) scale(.92);
  opacity: 0;
  transition: transform calc(0.55s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .tt.in {
  transform: none;
  opacity: 1;
}

.uvq09-tzn .clk {
  position: relative;
  flex: none;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  color: #334155;
  background: radial-gradient(circle at 50% 30%,#fff,#dbeafe);
  box-shadow: 0 0 0 .18em color-mix(in srgb,var(--fg) 14%,transparent),inset 0 .1em .3em rgba(0,0,0,.15);
  transition: color calc(1.2s / var(--k)) cubic-bezier(.25,.1,.25,1) calc(0.6s / var(--k));
}

.uvq09-tzn .clk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%,var(--c1),color-mix(in srgb,var(--c1) 40%,var(--c2)) 45%,var(--c2) 80%);
  opacity: 0;
  transition: opacity calc(1.2s / var(--k)) cubic-bezier(.25,.1,.25,1) calc(0.6s / var(--k));
}

.uvq09-tzn .clk::after {
  content: "";
  position: absolute;
  inset: .22em;
  border-radius: 50%;
  background: repeating-conic-gradient(currentColor 0 1.5deg,transparent 1.5deg 30deg);
  -webkit-mask: radial-gradient(circle,transparent 66%,#000 67%);
  mask: radial-gradient(circle,transparent 66%,#000 67%);
  opacity: .7;
}

.uvq09-tzn .tt.in .clk {
  color: #fff;
}

.uvq09-tzn .tt.in .clk::before {
  opacity: 1;
}

.uvq09-tzn .tt.in.home .clk {
  color: #334155;
}

.uvq09-tzn .tt.in.home .clk::before {
  opacity: 0;
}

.uvq09-tzn .hh,.uvq09-tzn .mm {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 50%;
  border-radius: 1em;
  background: currentColor;
  transform-origin: 50% 100%;
  translate: -50% 0;
  transition: rotate calc(1.8s / var(--k)) cubic-bezier(.22,1,.36,1) calc(0.4s / var(--k));
}

.uvq09-tzn .hh {
  width: .22em;
  height: .95em;
  rotate: 291deg;
}

.uvq09-tzn .mm {
  width: .14em;
  height: 1.35em;
  rotate: 252deg;
}

.uvq09-tzn .tt.in .hh {
  rotate: 531deg;
}

.uvq09-tzn .tt.in .mm {
  rotate: 3132deg;
}

.uvq09-tzn .tt.in.home .hh {
  rotate: 291deg;
}

.uvq09-tzn .tt.in.home .mm {
  rotate: 252deg;
}

.uvq09-tzn .tt:not(.in):not(.out) .clk *,.uvq09-tzn .tt:not(.in):not(.out) .clk,.uvq09-tzn .tt:not(.in):not(.out) .clk::before {
  transition: none;
}

.uvq09-tzn .ct {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: .38em;
  height: .38em;
  margin: -.19em;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 0 .08em #fff;
}

.uvq09-tzn .tx {
  display: grid;
  flex: 1;
  gap: .15em;
  min-width: 0;
}

.uvq09-tzn .tx b {
  font-size: .92em;
}

.uvq09-tzn small {
  font-size: .72em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  font-variant-numeric: tabular-nums;
}

.uvq09-tzn .z2,.uvq09-tzn .tt.home .z1 {
  display: none;
}

.uvq09-tzn .tt.home .z2 {
  display: block;
}

.uvq09-tzn .hm {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: none;
  padding: .5em .75em;
  border-radius: 2em;
  font-size: .72em;
  font-weight: 750;
  white-space: nowrap;
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .hm:hover {
  background: color-mix(in srgb,var(--fg) 11%,transparent);
}

.uvq09-tzn .hm:active {
  scale: .94;
}

.uvq09-tzn .hm:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tzn .hm[aria-pressed="true"] {
  color: #fff;
  background: var(--c2);
}

@media (prefers-reduced-motion:reduce) {
  .uvq09-tzn,.uvq09-tzn *,.uvq09-tzn *::before,.uvq09-tzn *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
```

### JavaScript

```js
document.querySelectorAll(".uvq09-tzn").forEach(el => {
  const t=el.querySelector(".tt"),f=el.querySelector(".fire");let tm=[];const clr=()=>{tm.forEach(clearTimeout);tm=[]};const later=(fn,ms)=>tm.push(setTimeout(fn,ms));
const show=()=>{clr();t.classList.remove("in","out");void t.offsetWidth;later(()=>{t.classList.add("in");t.classList.remove('home');h.setAttribute('aria-pressed','false')},60)};
const hide=()=>{t.classList.remove("in");t.classList.add("out")};f.addEventListener("click",show);show();const h=t.querySelector(".hm");h.addEventListener("click",()=>{const on=t.classList.toggle("home");h.setAttribute("aria-pressed",String(on))});return clr
});
```

### React

```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq09-tzn {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 21em;
  height: 15em;
}

.uvq09-tzn .fire {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 50%;
  top: 1.2em;
  translate: -50% 0;
  padding: .6em 1.1em;
  border-radius: 2em;
  font-size: .82em;
  font-weight: 650;
  white-space: nowrap;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .fire:hover {
  color: var(--fg);
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq09-tzn .fire:active {
  scale: .96;
}

.uvq09-tzn .fire:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tzn .tt {
  position: absolute;
  left: 50%;
  bottom: 1em;
  width: 19em;
  translate: -50% 0;
  border-radius: 1.1em;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 1.2em 2.4em -1em rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  gap: .85em;
  padding: .8em .85em;
  transform: translateY(130%) scale(.92);
  opacity: 0;
  transition: transform calc(0.55s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .tt.in {
  transform: none;
  opacity: 1;
}

.uvq09-tzn .clk {
  position: relative;
  flex: none;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  color: #334155;
  background: radial-gradient(circle at 50% 30%,#fff,#dbeafe);
  box-shadow: 0 0 0 .18em color-mix(in srgb,var(--fg) 14%,transparent),inset 0 .1em .3em rgba(0,0,0,.15);
  transition: color calc(1.2s / var(--k)) cubic-bezier(.25,.1,.25,1) calc(0.6s / var(--k));
}

.uvq09-tzn .clk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%,var(--c1),color-mix(in srgb,var(--c1) 40%,var(--c2)) 45%,var(--c2) 80%);
  opacity: 0;
  transition: opacity calc(1.2s / var(--k)) cubic-bezier(.25,.1,.25,1) calc(0.6s / var(--k));
}

.uvq09-tzn .clk::after {
  content: "";
  position: absolute;
  inset: .22em;
  border-radius: 50%;
  background: repeating-conic-gradient(currentColor 0 1.5deg,transparent 1.5deg 30deg);
  -webkit-mask: radial-gradient(circle,transparent 66%,#000 67%);
  mask: radial-gradient(circle,transparent 66%,#000 67%);
  opacity: .7;
}

.uvq09-tzn .tt.in .clk {
  color: #fff;
}

.uvq09-tzn .tt.in .clk::before {
  opacity: 1;
}

.uvq09-tzn .tt.in.home .clk {
  color: #334155;
}

.uvq09-tzn .tt.in.home .clk::before {
  opacity: 0;
}

.uvq09-tzn .hh,.uvq09-tzn .mm {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 50%;
  border-radius: 1em;
  background: currentColor;
  transform-origin: 50% 100%;
  translate: -50% 0;
  transition: rotate calc(1.8s / var(--k)) cubic-bezier(.22,1,.36,1) calc(0.4s / var(--k));
}

.uvq09-tzn .hh {
  width: .22em;
  height: .95em;
  rotate: 291deg;
}

.uvq09-tzn .mm {
  width: .14em;
  height: 1.35em;
  rotate: 252deg;
}

.uvq09-tzn .tt.in .hh {
  rotate: 531deg;
}

.uvq09-tzn .tt.in .mm {
  rotate: 3132deg;
}

.uvq09-tzn .tt.in.home .hh {
  rotate: 291deg;
}

.uvq09-tzn .tt.in.home .mm {
  rotate: 252deg;
}

.uvq09-tzn .tt:not(.in):not(.out) .clk *,.uvq09-tzn .tt:not(.in):not(.out) .clk,.uvq09-tzn .tt:not(.in):not(.out) .clk::before {
  transition: none;
}

.uvq09-tzn .ct {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: .38em;
  height: .38em;
  margin: -.19em;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 0 .08em #fff;
}

.uvq09-tzn .tx {
  display: grid;
  flex: 1;
  gap: .15em;
  min-width: 0;
}

.uvq09-tzn .tx b {
  font-size: .92em;
}

.uvq09-tzn small {
  font-size: .72em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  font-variant-numeric: tabular-nums;
}

.uvq09-tzn .z2,.uvq09-tzn .tt.home .z1 {
  display: none;
}

.uvq09-tzn .tt.home .z2 {
  display: block;
}

.uvq09-tzn .hm {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: none;
  padding: .5em .75em;
  border-radius: 2em;
  font-size: .72em;
  font-weight: 750;
  white-space: nowrap;
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .hm:hover {
  background: color-mix(in srgb,var(--fg) 11%,transparent);
}

.uvq09-tzn .hm:active {
  scale: .94;
}

.uvq09-tzn .hm:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tzn .hm[aria-pressed="true"] {
  color: #fff;
  background: var(--c2);
}

@media (prefers-reduced-motion:reduce) {
  .uvq09-tzn,.uvq09-tzn *,.uvq09-tzn *::before,.uvq09-tzn *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const t=el.querySelector(".tt"),f=el.querySelector(".fire");let tm=[];const clr=()=>{tm.forEach(clearTimeout);tm=[]};const later=(fn,ms)=>tm.push(setTimeout(fn,ms));
const show=()=>{clr();t.classList.remove("in","out");void t.offsetWidth;later(()=>{t.classList.add("in");t.classList.remove('home');h.setAttribute('aria-pressed','false')},60)};
const hide=()=>{t.classList.remove("in");t.classList.add("out")};f.addEventListener("click",show);show();const h=t.querySelector(".hm");h.addEventListener("click",()=>{const on=t.classList.toggle("home");h.setAttribute("aria-pressed",String(on))});return clr
}

export default function ToastTimezoneShift() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#f97316",
          "--c2": "#1e3a8a",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq09-tzn"><button type="button" className="fire">Land again</button><div className="tt" role="status"><span className="clk" aria-hidden="true"><i className="hh"></i><i className="mm"></i><i className="ct"></i></span><span className="tx"><b>Local time updated</b><small className="z1">Tokyo · 17:42 · 8 h ahead of home</small><small className="z2">Madrid · 9:42</small></span><button type="button" className="hm" aria-pressed="false">Home time</button></div></div>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Time zone change toast” block (Toasts) from AIMRAN Library to my project.

## What it is
After landing, the clock hands spin to local time and the dial turns from morning to dusk; you can switch back to home time.

## Chosen settings
- Main color: #f97316
- Secondary color: #1e3a8a
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)
- Text: "Hora local actualizada"

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck: setup() es JavaScript del DOM sin tipos, el mismo de la pestaña JS.
import { useEffect, useRef, type CSSProperties } from "react";

const css = `
.uvq09-tzn {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 21em;
  height: 15em;
}

.uvq09-tzn .fire {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 50%;
  top: 1.2em;
  translate: -50% 0;
  padding: .6em 1.1em;
  border-radius: 2em;
  font-size: .82em;
  font-weight: 650;
  white-space: nowrap;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .fire:hover {
  color: var(--fg);
  background: color-mix(in srgb,var(--fg) 10%,transparent);
}

.uvq09-tzn .fire:active {
  scale: .96;
}

.uvq09-tzn .fire:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tzn .tt {
  position: absolute;
  left: 50%;
  bottom: 1em;
  width: 19em;
  translate: -50% 0;
  border-radius: 1.1em;
  background: color-mix(in srgb,var(--fg) 3%,var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 1.2em 2.4em -1em rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  gap: .85em;
  padding: .8em .85em;
  transform: translateY(130%) scale(.92);
  opacity: 0;
  transition: transform calc(0.55s / var(--k)) cubic-bezier(.22,1,.36,1),opacity calc(0.3s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .tt.in {
  transform: none;
  opacity: 1;
}

.uvq09-tzn .clk {
  position: relative;
  flex: none;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  color: #334155;
  background: radial-gradient(circle at 50% 30%,#fff,#dbeafe);
  box-shadow: 0 0 0 .18em color-mix(in srgb,var(--fg) 14%,transparent),inset 0 .1em .3em rgba(0,0,0,.15);
  transition: color calc(1.2s / var(--k)) cubic-bezier(.25,.1,.25,1) calc(0.6s / var(--k));
}

.uvq09-tzn .clk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%,var(--c1),color-mix(in srgb,var(--c1) 40%,var(--c2)) 45%,var(--c2) 80%);
  opacity: 0;
  transition: opacity calc(1.2s / var(--k)) cubic-bezier(.25,.1,.25,1) calc(0.6s / var(--k));
}

.uvq09-tzn .clk::after {
  content: "";
  position: absolute;
  inset: .22em;
  border-radius: 50%;
  background: repeating-conic-gradient(currentColor 0 1.5deg,transparent 1.5deg 30deg);
  -webkit-mask: radial-gradient(circle,transparent 66%,#000 67%);
  mask: radial-gradient(circle,transparent 66%,#000 67%);
  opacity: .7;
}

.uvq09-tzn .tt.in .clk {
  color: #fff;
}

.uvq09-tzn .tt.in .clk::before {
  opacity: 1;
}

.uvq09-tzn .tt.in.home .clk {
  color: #334155;
}

.uvq09-tzn .tt.in.home .clk::before {
  opacity: 0;
}

.uvq09-tzn .hh,.uvq09-tzn .mm {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 50%;
  border-radius: 1em;
  background: currentColor;
  transform-origin: 50% 100%;
  translate: -50% 0;
  transition: rotate calc(1.8s / var(--k)) cubic-bezier(.22,1,.36,1) calc(0.4s / var(--k));
}

.uvq09-tzn .hh {
  width: .22em;
  height: .95em;
  rotate: 291deg;
}

.uvq09-tzn .mm {
  width: .14em;
  height: 1.35em;
  rotate: 252deg;
}

.uvq09-tzn .tt.in .hh {
  rotate: 531deg;
}

.uvq09-tzn .tt.in .mm {
  rotate: 3132deg;
}

.uvq09-tzn .tt.in.home .hh {
  rotate: 291deg;
}

.uvq09-tzn .tt.in.home .mm {
  rotate: 252deg;
}

.uvq09-tzn .tt:not(.in):not(.out) .clk *,.uvq09-tzn .tt:not(.in):not(.out) .clk,.uvq09-tzn .tt:not(.in):not(.out) .clk::before {
  transition: none;
}

.uvq09-tzn .ct {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: .38em;
  height: .38em;
  margin: -.19em;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 0 .08em #fff;
}

.uvq09-tzn .tx {
  display: grid;
  flex: 1;
  gap: .15em;
  min-width: 0;
}

.uvq09-tzn .tx b {
  font-size: .92em;
}

.uvq09-tzn small {
  font-size: .72em;
  color: color-mix(in srgb,var(--fg) 55%,transparent);
  font-variant-numeric: tabular-nums;
}

.uvq09-tzn .z2,.uvq09-tzn .tt.home .z1 {
  display: none;
}

.uvq09-tzn .tt.home .z2 {
  display: block;
}

.uvq09-tzn .hm {
  font: inherit;
  color: inherit;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: none;
  padding: .5em .75em;
  border-radius: 2em;
  font-size: .72em;
  font-weight: 750;
  white-space: nowrap;
  background: color-mix(in srgb,var(--fg) 6%,transparent);
  transition: background calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),color calc(0.2s / var(--k)) cubic-bezier(.25,.1,.25,1),scale calc(0.15s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq09-tzn .hm:hover {
  background: color-mix(in srgb,var(--fg) 11%,transparent);
}

.uvq09-tzn .hm:active {
  scale: .94;
}

.uvq09-tzn .hm:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

.uvq09-tzn .hm[aria-pressed="true"] {
  color: #fff;
  background: var(--c2);
}

@media (prefers-reduced-motion:reduce) {
  .uvq09-tzn,.uvq09-tzn *,.uvq09-tzn *::before,.uvq09-tzn *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

// Interacción en JavaScript del DOM: la misma que en la pestaña JS.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setup(el: any) {
  const t=el.querySelector(".tt"),f=el.querySelector(".fire");let tm=[];const clr=()=>{tm.forEach(clearTimeout);tm=[]};const later=(fn,ms)=>tm.push(setTimeout(fn,ms));
const show=()=>{clr();t.classList.remove("in","out");void t.offsetWidth;later(()=>{t.classList.add("in");t.classList.remove('home');h.setAttribute('aria-pressed','false')},60)};
const hide=()=>{t.classList.remove("in");t.classList.add("out")};f.addEventListener("click",show);show();const h=t.querySelector(".hm");h.addEventListener("click",()=>{const on=t.classList.toggle("home");h.setAttribute("aria-pressed",String(on))});return clr
}

export default function ToastTimezoneShift() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current?.firstElementChild;
    return el ? setup(el) : undefined;
  }, []);

  return (
    <>
      <style>{css}</style>
      <div
        ref={ref} style={{
          "--c1": "#f97316",
          "--c2": "#1e3a8a",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq09-tzn"><button type="button" className="fire">Land again</button><div className="tt" role="status"><span className="clk" aria-hidden="true"><i className="hh"></i><i className="mm"></i><i className="ct"></i></span><span className="tx"><b>Local time updated</b><small className="z1">Tokyo · 17:42 · 8 h ahead of home</small><small className="z2">Madrid · 9:42</small></span><button type="button" className="hm" aria-pressed="false">Home time</button></div></div>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````