.coffee-status{position:relative;isolation:isolate;overflow:hidden;border:1px solid #51402f;border-radius:8px;background:radial-gradient(ellipse at 78% 50%,#272119 0,transparent 58%),#121210;padding:24px 26px 12px}
.coffee-status [hidden]{display:none!important}
.coffee-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:1}
.coffee-topline .eyebrow{font-size:10px;letter-spacing:1.45px;line-height:1.5}
.coffee-state-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #575047;border-radius:20px;font-size:10px;line-height:1.4;color:#c4bdb1;white-space:nowrap}
.coffee-state-badge:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.coffee-layout{display:grid;grid-template-columns:1.05fr 1.1fr;align-items:center;gap:0;min-height:275px}
.coffee-copy{z-index:1;position:relative;padding:14px 0 20px}
.coffee-copy h2{font-size:clamp(38px,5.8vw,57px);line-height:.98;letter-spacing:-.5px;text-wrap:balance}
.coffee-copy h2>span{display:block}
.coffee-copy .coffee-punchline{color:var(--copper,#d79d63)}
.coffee-copy p{max-width:280px;font-size:13px;line-height:1.6;color:#c6c0b6;margin-top:18px;text-wrap:pretty}
.coffee-scene{position:relative;min-width:0;width:100%;max-width:440px;margin:12px 0 0;justify-self:center;align-self:center}
.coffee-illustration{position:relative;display:block;width:100%;height:auto;max-height:380px;fill:none;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.coffee-machine-photo{filter:drop-shadow(0 14px 20px #0007)}
.coffee-serving{display:none}
.coffee-status[data-state="on"] .coffee-serving{display:inline}
.coffee-power-light{stroke:transparent;opacity:0}
.coffee-scene-glow{position:absolute;inset:28% 6% 10% 18%;background:radial-gradient(ellipse,#c2813d33,transparent 68%);opacity:0;transition:opacity .8s}
.coffee-bottomline{display:flex;justify-content:flex-end;min-height:37px}
.coffee-motion-button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 9px;color:#aaa397;border:1px solid transparent;background:transparent;font-size:10px;line-height:1.4;border-radius:4px}
.coffee-motion-button:hover{border-color:#4b4033;color:#eee2d1}
.coffee-motion-symbol{font-size:13px;min-width:11px;text-align:center}
.coffee-stream{opacity:0;stroke-dasharray:70;stroke-dashoffset:70}
.coffee-in-cup,.coffee-crema{opacity:0}
.coffee-status[data-state="on"]{border-color:#85613c;background:radial-gradient(ellipse at 78% 50%,#3b2a18 0,transparent 60%),#15120e}
.coffee-status[data-state="on"] .coffee-state-badge{color:#f5c590;border-color:#997044;background:#6a48232e}
.coffee-status[data-state="on"] .coffee-power-light{fill:none;stroke:#fff1d8;opacity:1;filter:drop-shadow(0 0 10px #f4b56b)}
.coffee-status[data-state="on"] .coffee-scene-glow{opacity:1}
.coffee-status[data-state="on"] .coffee-steam{opacity:1}
.coffee-status[data-state="on"] .coffee-in-cup{opacity:1}
.coffee-status[data-state="on"] .coffee-crema{opacity:.7;animation:coffee-crema 7s ease-in-out infinite}
.coffee-status[data-state="on"] .coffee-stream{animation:coffee-pour 7s cubic-bezier(.4,0,.3,1) infinite}
.coffee-status[data-state="on"] .coffee-stream-right{animation-delay:.13s}
.coffee-status[data-state="on"] .coffee-steam path{animation:coffee-steam-rise 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.coffee-status[data-state="on"] .coffee-steam .coffee-steam-two{animation-delay:-1.2s}
.coffee-status[data-state="on"] .coffee-steam .coffee-steam-three{animation-delay:-2.4s;stroke-width:4}
.coffee-status[data-state="off"] .coffee-illustration{opacity:.7}
.coffee-status[data-state="off"] .coffee-power-light{opacity:0}
.coffee-status[data-state="unknown"] .coffee-illustration{opacity:.65;filter:saturate(.5)}
.coffee-status[data-motion="paused"] *{animation-play-state:paused!important;transition:none!important}
@keyframes coffee-pour{0%,6%{opacity:0;stroke-dashoffset:70}10%{opacity:1}24%,58%{opacity:1;stroke-dashoffset:0}66%{opacity:0;stroke-dashoffset:-70}100%{opacity:0;stroke-dashoffset:-70}}
@keyframes coffee-steam-rise{0%{opacity:0;transform:translate(0,14px) scaleX(.85)}25%{opacity:.55}70%{opacity:.3}100%{opacity:0;transform:translate(12px,-65px) scaleX(1.12)}}
@keyframes coffee-crema{0%,17%,75%,100%{transform:scaleX(.7);opacity:.35}30%,60%{transform:scaleX(1);opacity:.8}}
.coffee-crema{transform-box:fill-box;transform-origin:center}
@media(max-width:650px){.coffee-status{padding:20px 20px 10px}.coffee-layout{grid-template-columns:1fr;min-height:0}.coffee-copy{padding:27px 0 0}.coffee-copy h2{font-size:45px;max-width:360px}.coffee-copy p{max-width:none;font-size:13px;margin-top:14px}.coffee-scene{max-width:340px;margin:20px 0 0}.coffee-illustration{max-height:320px}.coffee-bottomline{margin-top:4px}.coffee-topline .eyebrow{max-width:190px;font-size:9px;letter-spacing:1.2px}.coffee-state-badge{font-size:9px}.coffee-motion-button{min-height:44px}}
@media(max-width:360px){.coffee-status{padding:18px 16px 8px}.coffee-copy h2{font-size:39px}.coffee-topline{gap:8px}.coffee-topline .eyebrow{max-width:160px}.coffee-state-badge{padding:5px 8px}}
@media(prefers-reduced-motion:reduce){.coffee-status *{animation:none!important;transition:none!important}.coffee-status[data-state="on"] .coffee-steam path{opacity:.45}.coffee-status[data-state="on"] .coffee-stream{opacity:0}.coffee-motion-button{display:none!important}}