.about-container{flex-direction:column;gap:2rem;width:100%;max-width:44rem;margin-left:auto;margin-right:auto;padding:4rem 1.5rem;display:flex}@media (min-width:640px){.about-container{padding-left:4rem;padding-right:4rem}}
.art-stage{isolation:isolate;position:relative}.cafe-container{flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;padding:1.5rem;display:flex}.timer-and-art-container{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.timer-container,.music-container{width:100%}.art-backdrop{display:none}.art-backdrop-image{z-index:-1;position:absolute;inset:0;overflow:hidden}.art-backdrop-credit{z-index:1;position:absolute;bottom:.875rem;left:50%;transform:translate(-50%)}.art-backdrop-player-toggle{z-index:1;position:absolute;bottom:.585rem;right:.875rem}.art-stage[data-art-behind] .music-container{transition:opacity .3s,visibility linear}.art-stage[data-art-behind][data-player-hidden] .music-container{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}@media screen and (max-width:859.98px){.art-container{display:none}.art-stage[data-art-layout] .art-backdrop{display:block}.art-stage[data-art-layout] .cafe-container{padding-top:2rem;padding-bottom:4rem}.timer-and-art-container,.music-container{width:auto;max-width:26rem}.art-stage[data-art-layout] .cafe-player:before{background-color:color-mix(in srgb, var(--background) 50%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}.art-stage[data-art-layout=landscape] .art-container{display:none}.art-stage[data-art-layout=landscape] .art-backdrop{display:block}.art-stage[data-art-behind]{margin-top:calc(-1 * var(--header-height));padding-top:var(--header-height)}.art-stage{overflow-anchor:none}.art-stage[data-art-layout=landscape] .cafe-player:before{background-color:color-mix(in srgb, var(--background) 65%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.player-container{width:100%;margin-inline:auto;padding:1.5rem}.player-sub-container{flex-direction:column;gap:2rem;width:min(76rem,100%);margin-inline:auto;display:flex}@media screen and (min-width:860px){.timer-and-art-container{--row-gap:1.5rem;justify-content:center;align-items:start;gap:var(--row-gap);flex-direction:row}.timer-container{flex:0 22rem;min-width:0}.art-container{flex:0 0 28rem}.art-stage[data-art-shape=square] .timer-and-art-container{--timer-min:18rem}.art-stage[data-art-shape=square] .art-container{flex:0 0 clamp(28rem, 100% - var(--row-gap) - var(--timer-min), 32rem)}.music-container{width:min(51.5rem,100%)}.art-stage[data-art-shape=square] .music-container{width:min(55.5rem,100%)}.art-stage[data-art-layout=landscape] .cafe-container{flex-direction:row;align-items:center;gap:1.5rem;min-height:min(56.25vw,52rem);padding-top:2.5rem;padding-bottom:4.5rem}.art-stage[data-art-layout=landscape] .timer-and-art-container{width:auto}.art-stage[data-art-layout=landscape] .music-container{flex-shrink:1;width:26rem}.art-stage[data-art-layout=landscape][data-player-hidden] .music-container{display:none}}@media screen and (min-width:860px) and (max-width:895px){.cafe-container{padding-left:.75rem;padding-right:.75rem}.timer-and-art-container{--row-gap:.75rem}}@media screen and (min-width:960px){.player-sub-container{grid-template-columns:minmax(0,1fr) 20rem;align-items:start;gap:2rem;display:grid}}@media (prefers-reduced-motion:reduce){.art-stage .music-container{transition:none!important}}
.mode-button{cursor:pointer;border-radius:9999px;justify-content:center;align-items:center;height:2.25rem;font-size:.875rem;font-weight:500;display:flex}.timer-primary-icon,.timer-face-extras{display:none}.art-stage[data-art-behind] .cafe-card.timer-card{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#0000;border-color:#0000;padding:0}.art-stage[data-art-behind] .timer-modes,.art-stage[data-art-behind] .timer-face:before{background-color:color-mix(in srgb, var(--background) 65%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.art-stage[data-art-behind] .timer-face{isolation:isolate;flex-direction:column;align-items:center;gap:.75rem;padding:1rem;display:flex;position:relative}.art-stage[data-art-behind] .timer-face:before{content:"";z-index:-1;border-radius:1rem;position:absolute;inset:0}.art-stage[data-art-behind] .timer-modes{grid-template-columns:repeat(3,auto)}.art-stage[data-art-behind] .mode-button{padding-inline:.75rem}.art-stage[data-art-behind] .timer-dial svg,.art-stage[data-art-behind] .timer-status{display:none}.art-stage[data-art-behind] .timer-dial{width:auto;height:auto}.art-stage[data-art-behind] .timer-dial>div{position:static}.art-stage[data-art-behind] .timer-actions{justify-content:center}.art-stage[data-art-behind] .timer-primary{flex:none;width:2.25rem;height:2.25rem;padding:0}.art-stage[data-art-behind] .timer-primary-icon svg{width:.9375rem;height:.9375rem}.art-stage[data-art-behind] .timer-secondary{height:2.25rem;padding-inline:1.125rem;font-size:.75rem}.art-stage[data-art-behind] .timer-primary-label{display:none}.art-stage[data-art-behind] .timer-primary-icon{display:flex}.art-stage[data-art-behind] .timer-face-extras{flex-direction:column;align-self:stretch;align-items:center;gap:.75rem;display:flex}.art-stage[data-art-behind] .timer-face-slider{align-self:stretch;padding:.5rem .25rem 0;display:block}.art-stage[data-art-behind] .timer-face-notify{justify-content:center;display:flex}.art-stage[data-art-behind] .timer-face:before{transition:bottom .5s,background-color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s}.art-stage[data-art-behind] .timer-card[data-timer-active] .timer-face:before{bottom:calc(var(--timer-extras-height,0px) + .75rem);background-color:color-mix(in srgb, var(--background) 55%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.art-stage[data-art-behind] .timer-modes,.art-stage[data-art-behind] .timer-face-extras{transition:opacity .5s,visibility linear}.art-stage[data-art-behind] .timer-card[data-timer-active] .timer-modes,.art-stage[data-art-behind] .timer-card[data-timer-active] .timer-face-extras{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s linear .5s}.art-stage[data-art-behind] .timer-settings{display:none}@media (prefers-reduced-motion:reduce){.timer-modes,.timer-face:before,.timer-face-extras{transition:none!important}}