.pomo{--pomo-bg:#0b1f2a;--pomo-fg:#e6f4f8;--pomo-accent:#359fcc;background:var(--pomo-bg);color:var(--pomo-fg);transition:background .8s}.pomo.is-break{--pomo-fg:#fff;--pomo-accent:#ffe14d;isolation:isolate;background:#7b2cbf;position:relative}.pomo.is-break:before{content:"";z-index:-1;background:linear-gradient(120deg,#ff2d95,#ff9f1c,#2ec4b6,#7b2cbf,#ff2d95) 0 0/400% 400%;animation:4s linear infinite pomo-gradient,3s linear infinite pomo-hue;position:fixed;inset:0}.pomo-clock{pointer-events:none}.pomo-controls{z-index:10;position:sticky;top:0}.pomo-controls:before{content:"";z-index:-1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0000001f;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),#0000);mask-image:linear-gradient(#000 calc(100% - 28px),#0000)}.pomo.is-break .pomo-clock{text-shadow:4px 4px #7b2cbf,-4px -4px #2ec4b6;animation:.6s ease-in-out infinite alternate pomo-wobble}.pomo.is-break .pomo-video-main{animation:1.2s ease-in-out infinite alternate pomo-tilt}.pomo-dancers{pointer-events:none;justify-content:center;gap:.5em;font-size:clamp(2rem,8vw,5rem);display:flex}.pomo-dancers span{animation:.5s ease-in-out infinite alternate pomo-bounce;display:inline-block}.pomo-dancers span:nth-child(2n){animation-name:pomo-spin-bounce;animation-delay:-.25s}.pomo-dancers span:nth-child(3n){animation-duration:.35s}@keyframes pomo-gradient{0%{background-position:0%}to{background-position:400%}}@keyframes pomo-hue{to{filter:hue-rotate(360deg)}}@keyframes pomo-wobble{0%{transform:rotate(-4deg)scale(1)}to{transform:rotate(4deg)scale(1.08)}}@keyframes pomo-tilt{0%{transform:rotate(-1.5deg)translateY(-4px)}to{transform:rotate(1.5deg)translateY(4px)}}@keyframes pomo-bounce{0%{transform:translateY(0)}to{transform:translateY(-.6em)}}@keyframes pomo-spin-bounce{0%{transform:translateY(0)rotate(-20deg)}to{transform:translateY(-.6em)rotate(20deg)}}.pomo.is-break.is-calm{--pomo-accent:#ffd166;background:#3b2a52}.pomo.is-break.is-calm:before{content:none}.pomo.is-break.is-calm .pomo-clock{text-shadow:none;animation:none}.pomo.is-break.is-calm .pomo-video-main,.pomo.is-calm .pomo-dancers span{animation:none}@media (prefers-reduced-motion:reduce){.pomo.is-break:before,.pomo.is-break .pomo-clock,.pomo.is-break .pomo-video-main,.pomo-dancers span{animation:none}}