html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{font-family:Geist,sans-serif}:root{--color-brand: #bb6f59;--color-brand-2: #532d22;--color-brand-3: #756538;--color-white: #fff}.wrapper{width:100%;max-width:1160px;margin-inline:auto}section{padding-block:1rem}.coffee-life{background-color:#f5f2ea;padding:2rem 0 0;container-name:coffee;container-type:inline-size}.coffee-life .wrapper{display:grid;grid-template-areas:"time time time" "quotes quotes quotes" "text text person";grid-template-rows:max-content 1fr;gap:1rem;padding:0 1rem}@container coffee (min-width: 700px){.coffee-life .wrapper{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"quotes-start time quotes-end" "text-person text-person text-person"}}.coffee-life .quote-1{grid-area:quote-1}@container coffee (min-width: 700px){.coffee-life .quote-1{grid-area:initial;align-self:center;justify-self:center}}.coffee-life .quote-2{grid-area:quote-2}@container coffee (min-width: 700px){.coffee-life .quote-2{grid-area:initial}}.coffee-life .quote-3{grid-area:quote-3}@container coffee (min-width: 700px){.coffee-life .quote-3{display:block;grid-area:initial}}.coffee-life .quotes-wrapper{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.coffee-life .quotes-wrapper>*{align-self:center}.coffee-life .quotes-wrapper .quote{grid-area:initial}@container coffee (min-width: 700px){.coffee-life .quotes-wrapper{display:contents}}.coffee-life .quotes-wrapper-start{display:contents}@container coffee (min-width: 700px){.coffee-life .quotes-wrapper-start{display:flex;flex-direction:column;gap:1rem}}.coffee-life .quotes-wrapper-end{display:contents}@container coffee (min-width: 700px){.coffee-life .quotes-wrapper-end{display:flex;flex-direction:column;gap:1rem;grid-area:quotes-end}}.coffee-life .time{grid-area:time;align-self:center;color:#9f8f67;font-size:clamp(1rem,.8rem + 1.5cqw,2rem);font-weight:700;text-align:center;margin-bottom:1rem}.coffee-life img{anchor-name:--barista;grid-area:person;justify-self:end;align-self:end;width:clamp(15.625rem,13.186rem + 12.2cqw,25rem);height:auto;margin-top:1rem;margin-bottom:-1rem}@container coffee (min-width: 700px){.coffee-life img{grid-area:text-person;margin-top:0}}.coffee-life .text{anchor-name:--text;align-self:center;grid-area:text;font-size:clamp(1rem,-.356rem + 6.78cqw,6rem);font-weight:700;text-align:center;color:#dcd0b2;margin-top:4rem}@container coffee (min-width: 520px){.coffee-life .text{margin-top:0}}@container coffee (min-width: 700px){.coffee-life .text{grid-area:text-person}}@container coffee (min-width: 700px){.coffee-life .text>span{white-space:nowrap;color:#9f8f67}.coffee-life .text>span:first-child{position:absolute;right:anchor(--barista left);position-try-fallbacks:--part-1}.coffee-life .text>span:last-child{anchor-name:--word-2;position:absolute;left:anchor(--barista right);position-try-fallbacks:--part-2}}.coffee-life .actions{anchor-name:--actions;align-self:flex-end;grid-column:1/-1;grid-row:-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;padding-block:1rem;z-index:1;border-image:conic-gradient(rgb(from #000 r g b/.1) 0 0) fill 0/0/0 100vw;backdrop-filter:blur(1px)}.coffee-life .quotes{max-width:320px;justify-self:center}.coffee-life blockquote{padding:1rem;border-radius:10px;box-shadow:0 4px 10px #0000001a}.coffee-life blockquote p{color:#fff;font-size:clamp(13px,10px + .5cqw,16px)}.coffee-life blockquote .icon{--size: clamp(1.5rem, 1.093rem + 2.03cqw, 3rem);display:block;width:var(--size);height:var(--size);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0,0,0,0.3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-quote-icon lucide-quote'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;margin-bottom:-.7rem}.button{--button-bg-color: var(--color-brand);--button-text-color: var(--color-white);display:inline-flex;padding:.5rem 1rem;color:var(--button-text-color);background-color:var(--button-bg-color);border-radius:50px}.heads-up{--arrow-size: 72px;position-anchor:--text;position:absolute;right:anchor(right);left:anchor(left);bottom:anchor(top);margin-inline:auto;padding:12px;border-radius:12px;background:#fff;box-shadow:0 3px 10px #0000000d;margin-right:1rem;font-size:clamp(13px,10px + .5cqw,16px)}.heads-up:before{position:absolute;right:calc(100% + .5rem);aspect-ratio:72/52;width:var(--arrow-size);background-image:url("data:image/svg+xml,%3Csvg width='73' height='52' viewBox='0 0 73 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72.26 34.314C72.7095 33.6181 72.5098 32.6896 71.8139 32.24L60.4744 24.9145C59.7785 24.4649 58.85 24.6646 58.4005 25.3605C57.9509 26.0563 58.1506 26.9849 58.8465 27.4344L68.9261 33.946L62.4145 44.0256C61.9649 44.7215 62.1646 45.65 62.8605 46.0995C63.5563 46.5491 64.4849 46.3494 64.9344 45.6535L72.26 34.314ZM2 1L0.674318 1.70183C8.32797 16.1587 33.1752 43.1687 71.3154 34.9665L71 33.5L70.6846 32.0335C34.4248 39.8313 10.672 14.1746 3.32568 0.298168L2 1Z' fill='%23BB6F59'/%3E%3C/svg%3E%0A")}@container coffee (min-width: 520px){.heads-up{min-width:220px;max-width:300px;position-anchor:--barista;right:initial;left:anchor(--barista right);bottom:calc(anchor(--actions top) + 1rem);position-try-fallbacks:--bottom}}@position-try --bottom{left:anchor(--barista left);right:anchor(--barista right);bottom:anchor(--actions top)}@position-try --part-1{right:auto;left:calc(anchor(--barista right) - 80px);top:anchor(--barista top);margin-top:130px}@position-try --part-2{right:auto;left:calc(anchor(--barista left) - 80px);top:anchor(--barista top);margin-top:130px}.controls{position:relative;display:flex;flex-wrap:wrap;justify-content:center;padding:1rem;background-color:#222;box-shadow:0 5px rgb(from #000 r g b/.2)}.controls-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.controls-group label{color:#fff}body:has(.controls option[value=start]:checked) .coffee-life img{justify-self:start}body:has(.controls option[value=end]:checked) .coffee-life img{justify-self:end}body:has(.controls option[value=center]:checked) .coffee-life img{justify-self:center}.u-flow>*+*{margin-top:var(--space, 1rem)}.u-bg-1{background-color:#7a5d33}.u-bg-2{background-color:#4f7a33}.u-bg-3{background-color:#2f4c83}.quote-1{anchor-name:--watcher-icon-size}.time{anchor-name:--time}.watcher{display:none;position:absolute;z-index:100;left:anchor(left);right:anchor(right);top:anchor(top);bottom:anchor(bottom);color:#fff;background-color:rgb(from deeppink r g b/.5);border-radius:10px;font-size:1.5rem;place-content:center;backdrop-filter:blur(30px)}.watcher-quote{position-anchor:--watcher-icon-size}.watcher-barista{position-anchor:--barista}.watcher-time{position-anchor:--time}.test-nested{display:none;position:absolute;z-index:100;position-anchor:--word-2;left:anchor(left);right:anchor(right);top:anchor(top);bottom:anchor(bottom);background-color:#ff1493}