:root{--ocean-1:#4a90e2;--ocean-2:#7bb3f0;--ocean-3:#a8d0f0;--ocean-4:#d4e9f7;--sunset-1:#ff6b6b;--sunset-2:#ff8e8e;--sunset-3:#ffb3b3;--sunset-4:#ffd6d6;--forest-1:#4caf50;--forest-2:#66bb6a;--forest-3:#81c784;--forest-4:#a5d6a7;--lavender-1:#9c27b0;--lavender-2:#ab47bc;--lavender-3:#ba68c8;--lavender-4:#ce93d8;--neutral-1:#757575;--neutral-2:#9e9e9e;--neutral-3:#bdbdbd;--neutral-4:#e0e0e0}.calming-break{background:transparent;border-radius:0;isolation:isolate;overflow:hidden;position:relative;width:100%;--animation-duration:45s}.calming-break__animation-container{box-sizing:border-box;height:100%;left:0;overflow:hidden;padding:30px;position:absolute;top:0;width:100%;will-change:transform}.calming-break__overlay-text{color:hsla(0,0%,100%,.7);font-size:1.5rem;font-weight:200;left:50%;letter-spacing:.3em;pointer-events:none;position:absolute;text-shadow:0 2px 8px rgba(0,0,0,.3);top:50%;transform:translate(-50%,-50%);z-index:2}.calming-break--ocean{--color-1:var(--ocean-1);--color-2:var(--ocean-2);--color-3:var(--ocean-3);--color-4:var(--ocean-4)}.calming-break--sunset{--color-1:var(--sunset-1);--color-2:var(--sunset-2);--color-3:var(--sunset-3);--color-4:var(--sunset-4)}.calming-break--forest{--color-1:var(--forest-1);--color-2:var(--forest-2);--color-3:var(--forest-3);--color-4:var(--forest-4)}.calming-break--lavender{--color-1:var(--lavender-1);--color-2:var(--lavender-2);--color-3:var(--lavender-3);--color-4:var(--lavender-4)}.calming-break--neutral{--color-1:var(--neutral-1);--color-2:var(--neutral-2);--color-3:var(--neutral-3);--color-4:var(--neutral-4)}.calming-break__gradient{background:linear-gradient(45deg,rgba(from var(--color-1) r g b/.25),rgba(from var(--color-2) r g b/.35),rgba(from var(--color-3) r g b/.4),rgba(from var(--color-4) r g b/.2));background-size:400% 400%;border-radius:20px;height:100%;width:100%;will-change:background-position}.calming-break--gradient:not(.calming-break--reduced-motion) .calming-break__gradient{animation:gradientFlow var(--animation-duration) ease-in-out infinite}@keyframes gradientFlow{0%,to{background-position:0 50%}25%{background-position:100% 50%}50%{background-position:100% 100%}75%{background-position:0 100%}}.calming-break__organic{border-radius:20px;height:100%;overflow:hidden;position:relative;width:100%}.calming-break__shape{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;filter:blur(1px);mix-blend-mode:multiply;position:absolute;will-change:transform,border-radius}.calming-break__shape--1{background:linear-gradient(135deg,rgba(from var(--color-1) r g b/.3),rgba(from var(--color-2) r g b/.15));height:70%;left:20%;opacity:.8;top:15%;width:60%}.calming-break__shape--2{background:linear-gradient(45deg,rgba(from var(--color-3) r g b/.25),rgba(from var(--color-4) r g b/.2));height:50%;opacity:.7;right:30%;top:25%;width:40%}.calming-break--organic:not(.calming-break--reduced-motion) .calming-break__shape--1{animation:organicShape1 var(--animation-duration) ease-in-out infinite}.calming-break--organic:not(.calming-break--reduced-motion) .calming-break__shape--2{animation:organicShape2 calc(var(--animation-duration)*1.3) ease-in-out infinite reverse}@keyframes organicShape1{0%,to{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:rotate(0deg) scale(1)}25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:rotate(3deg) scale(1.02)}50%{border-radius:50% 60% 40% 30%/40% 70% 60% 30%;transform:rotate(0deg) scale(.98)}75%{border-radius:70% 30% 60% 40%/30% 40% 70% 60%;transform:rotate(-2deg) scale(1.01)}}@keyframes organicShape2{0%,to{border-radius:40% 60% 50% 30%/30% 50% 40% 60%;transform:rotate(0deg) scale(1)}33%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:rotate(-4deg) scale(1.03)}66%{border-radius:30% 70% 60% 40%/50% 40% 30% 60%;transform:rotate(2deg) scale(.97)}}.calming-break__breathing{align-items:center;border-radius:20px;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.calming-break__circle{border-radius:50%;filter:blur(.5px);mix-blend-mode:screen;position:absolute;will-change:transform,opacity}.calming-break__circle--1{background:radial-gradient(circle,rgba(from var(--color-1) r g b/.2),transparent 70%);height:200px;max-height:60%;max-width:60%;opacity:.8;width:200px}.calming-break__circle--2{background:radial-gradient(circle,rgba(from var(--color-2) r g b/.25),transparent 70%);height:140px;max-height:45%;max-width:45%;opacity:.7;width:140px}.calming-break__circle--3{background:radial-gradient(circle,rgba(from var(--color-3) r g b/.3),transparent 70%);height:80px;max-height:30%;max-width:30%;opacity:.6;width:80px}.calming-break--breathing:not(.calming-break--reduced-motion) .calming-break__circle--1{animation:breathe var(--animation-duration) ease-in-out infinite}.calming-break--breathing:not(.calming-break--reduced-motion) .calming-break__circle--2{animation:breathe calc(var(--animation-duration)*.8) ease-in-out infinite .2s}.calming-break--breathing:not(.calming-break--reduced-motion) .calming-break__circle--3{animation:breathe calc(var(--animation-duration)*.6) ease-in-out infinite .4s}@keyframes breathe{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:.6;transform:scale(1.2)}}.calming-break__particles{border-radius:20px;height:100%;overflow:hidden;position:relative;width:100%}.calming-break__particle{border-radius:50%;filter:blur(.5px);height:8px;mix-blend-mode:screen;position:absolute;width:8px;will-change:transform,opacity}.calming-break__particle--1{background:rgba(from var(--color-1) r g b/.4);left:20%;top:15%}.calming-break__particle--2{background:rgba(from var(--color-2) r g b/.35);left:70%;top:25%}.calming-break__particle--3{background:rgba(from var(--color-3) r g b/.45);left:30%;top:45%}.calming-break__particle--4{background:rgba(from var(--color-4) r g b/.38);left:60%;top:55%}.calming-break__particle--5{background:rgba(from var(--color-1) r g b/.32);left:45%;top:70%}.calming-break__particle--6{background:rgba(from var(--color-2) r g b/.42);left:15%;top:80%}.calming-break__particle--7{background:rgba(from var(--color-3) r g b/.36);left:50%;top:35%}.calming-break__particle--8{background:rgba(from var(--color-4) r g b/.34);left:75%;top:50%}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--1{animation:float1 calc(var(--animation-duration) + 3s) ease-in-out infinite .3s}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--2{animation:float2 calc(var(--animation-duration) + 6s) ease-in-out infinite .6s}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--3{animation:float3 calc(var(--animation-duration) + 9s) ease-in-out infinite .9s}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--4{animation:float4 calc(var(--animation-duration) + 12s) ease-in-out infinite 1.2s}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--5{animation:float5 calc(var(--animation-duration) + 15s) ease-in-out infinite 1.5s}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--6{animation:float6 calc(var(--animation-duration) + 18s) ease-in-out infinite 1.8s}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--7{animation:float7 calc(var(--animation-duration) + 21s) ease-in-out infinite 2.1s}.calming-break--particles:not(.calming-break--reduced-motion) .calming-break__particle--8{animation:float8 calc(var(--animation-duration) + 24s) ease-in-out infinite 2.4s}@keyframes float1{0%,to{opacity:.2;transform:translate(0) scale(.7)}50%{opacity:.6;transform:translate(15px,-10px) scale(1.5)}}@keyframes float2{0%,to{opacity:.18;transform:translate(0) scale(.8)}50%{opacity:.55;transform:translate(-15px,8px) scale(1.3)}}@keyframes float3{0%,to{opacity:.22;transform:translate(0) scale(.75)}50%{opacity:.65;transform:translate(12px,-15px) scale(1.4)}}@keyframes float4{0%,to{opacity:.16;transform:translate(0) scale(.9)}50%{opacity:.58;transform:translate(-18px,6px) scale(1.2)}}@keyframes float5{0%,to{opacity:.15;transform:translate(0) scale(.6)}50%{opacity:.5;transform:translate(10px,12px) scale(1.6)}}@keyframes float6{0%,to{opacity:.2;transform:translate(0) scale(1)}50%{opacity:.62;transform:translate(-12px,-8px) scale(.9)}}@keyframes float7{0%,to{opacity:.17;transform:translate(0) scale(.7)}50%{opacity:.54;transform:translate(14px,10px) scale(1.35)}}@keyframes float8{0%,to{opacity:.14;transform:translate(0) scale(.85)}50%{opacity:.52;transform:translate(-16px,-12px) scale(1.25)}}.calming-break__waves{border-radius:20px;height:100%;overflow:hidden;position:relative;width:100%}.calming-break__wave{border-radius:15px;filter:blur(2px);height:calc(100% - 20px);left:10px;mix-blend-mode:overlay;opacity:.3;position:absolute;top:10px;width:calc(100% - 20px);will-change:transform}.calming-break__wave--1{background:linear-gradient(90deg,transparent,rgba(from var(--color-1) r g b/.25),transparent);transform:translateX(-100%)}.calming-break__wave--2{background:linear-gradient(90deg,transparent,rgba(from var(--color-2) r g b/.2),transparent);transform:translateX(-100%)}.calming-break__wave--3{background:linear-gradient(90deg,transparent,rgba(from var(--color-3) r g b/.3),transparent);transform:translateX(-100%)}.calming-break--waves:not(.calming-break--reduced-motion) .calming-break__wave--1{animation:wave var(--animation-duration) linear infinite}.calming-break--waves:not(.calming-break--reduced-motion) .calming-break__wave--2{animation:wave calc(var(--animation-duration)*1.2) linear infinite 15s}.calming-break--waves:not(.calming-break--reduced-motion) .calming-break__wave--3{animation:wave calc(var(--animation-duration)*.8) linear infinite 30s}@keyframes wave{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.calming-break__ambient{border-radius:20px;height:100%;overflow:hidden;position:relative;width:100%}.calming-break__light{border-radius:50%;filter:blur(40px);height:80%;left:10%;mix-blend-mode:soft-light;position:absolute;top:10%;width:80%;will-change:opacity,transform}.calming-break__light--1{background:radial-gradient(circle,rgba(from var(--color-1) r g b/.15),rgba(from var(--color-2) r g b/.08));opacity:.8}.calming-break__light--2{background:radial-gradient(circle,rgba(from var(--color-3) r g b/.12),rgba(from var(--color-4) r g b/.06));left:15%;opacity:.7;top:5%}.calming-break--ambient:not(.calming-break--reduced-motion) .calming-break__light--1{animation:ambientLight1 var(--animation-duration) ease-in-out infinite}.calming-break--ambient:not(.calming-break--reduced-motion) .calming-break__light--2{animation:ambientLight2 calc(var(--animation-duration)*1.3) ease-in-out infinite reverse}@keyframes ambientLight1{0%,to{opacity:.3;transform:scale(1) rotate(0deg)}25%{opacity:.6;transform:scale(1.05) rotate(90deg)}50%{opacity:.4;transform:scale(.95) rotate(180deg)}75%{opacity:.7;transform:scale(1.02) rotate(270deg)}}@keyframes ambientLight2{0%,to{opacity:.2;transform:scale(.9) rotate(0deg)}33%{opacity:.5;transform:scale(1.1) rotate(120deg)}66%{opacity:.35;transform:scale(.98) rotate(240deg)}}@media(prefers-reduced-motion:reduce){.calming-break:not(.calming-break--editor):after{background:linear-gradient(45deg,rgba(from var(--color-1) r g b/.15),rgba(from var(--color-4) r g b/.2));border-radius:20px;content:"";height:calc(100% - 60px);left:30px;opacity:.8;position:absolute;top:30px;width:calc(100% - 60px);z-index:1}.calming-break *,.calming-break :after,.calming-break :before{animation:none!important;transition:none!important}}.calming-break:focus-visible{outline:2px solid rgba(0,92,204,.6);outline-offset:2px}