.brew-illustration { display:block; overflow:visible; filter:drop-shadow(0 16px 18px rgba(36,65,71,.10)); }
.tea-brew-page { min-height:calc(100svh - 50px); padding-bottom:72px !important; }
.brew-scene-frame { width:100%; max-width:min(620px, calc((100svh - 180px) * 1.03333)); }
.pot-outline { stroke:#6d8c97; stroke-width:2; }
.glass-highlight { fill:none; stroke:#fff; stroke-opacity:.8; stroke-width:4; stroke-linecap:round; }
.glass-highlight.faint { stroke-opacity:.38; stroke-width:2.5; }
.water-ripple { fill:none; stroke:#f6ffff; stroke-opacity:.85; stroke-width:2; }
#liquid-top { transition:y 1.2s ease, height 1.2s ease; }
#infusion-top-stop, #infusion-bottom-stop { transition:stop-color 1.7s ease; }
#pot-lid { transform-origin:370px 227px; transition:transform .65s cubic-bezier(.22,1,.36,1); }
[data-lid-open="true"] #pot-lid { transform:translate(116px,-55px) rotate(19deg); }
.tea-packet { transform:translate(30px,350px); transform-origin:70px 100px; transition:transform .85s cubic-bezier(.22,1,.36,1); }
[data-phase="adding-tea"][data-has-tea="true"] .tea-packet { transform:translate(230px,32px) rotate(125deg); }
.packet-open-mouth { opacity:0; }
[data-phase="adding-tea"][data-has-tea="true"] .packet-open-mouth { opacity:1; }
.packet-caption { transition:opacity .3s ease; }
[data-phase="adding-tea"] .packet-caption { opacity:0; }
.packet-brand { font:700 11px Poppins,sans-serif; fill:#3c535a; letter-spacing:1px; }
.packet-subtitle { font:400 10px Poppins,sans-serif; fill:#7a8d91; }
.tea-grain { opacity:0; transform-box:fill-box; transform-origin:center; }
[data-phase="adding-tea"][data-has-tea="true"] .tea-grain { animation:tea-grain-fall .65s linear infinite; animation-delay:var(--grain-delay); }
@keyframes tea-grain-fall {
  0% { opacity:0; transform:translate(0,0) rotate(0); }
  12% { opacity:1; }
  86% { opacity:1; }
  100% { opacity:0; transform:translate(var(--grain-drift),155px) rotate(var(--grain-turn)); }
}
.tea-leaves { opacity:0; transition:opacity .3s; }
[data-phase="steeping"] .tea-leaves { animation:tea-leaf-drift 3s ease-in-out infinite alternate; transform-origin:370px 330px; }
@keyframes tea-leaf-drift { to { transform:translateY(-6px) rotate(2deg); } }
.brew-steam { fill:none; stroke:#91adb5; stroke-width:5; stroke-linecap:round; filter:url(#brew-soft-steam); opacity:0; transform-origin:370px 205px; }
[data-phase="boiling"] .brew-steam, [data-phase="steeping"] .brew-steam, [data-phase="ready"] .brew-steam { animation:brew-steam-rise 2.8s ease-out infinite; }
.brew-steam:nth-child(2) { animation-delay:-.9s !important; }
.brew-steam:nth-child(3) { animation-delay:-1.8s !important; }
@keyframes brew-steam-rise { 0% { opacity:0; transform:translateY(6px) scaleX(.8); } 28% { opacity:.48; } 100% { opacity:0; transform:translate(9px,-47px) scaleX(1.15); } }
.bubble { fill:#f4ffff; opacity:0; }
[data-phase="boiling"] .bubble { animation:brew-bubble-rise 1.35s ease-in infinite; }
.bubble:nth-child(2) { animation-delay:-.8s !important; }
.bubble:nth-child(3) { animation-delay:-.3s !important; }
.bubble:nth-child(4) { animation-delay:-1.1s !important; }
.bubble:nth-child(5) { animation-delay:-.6s !important; }
@keyframes brew-bubble-rise { 0% { opacity:0; transform:translateY(0) scale(.65); } 12% { opacity:.8; } 100% { opacity:0; transform:translateY(-145px) scale(1.15); } }
[data-phase="boiling"] #bottom-water-surface, [data-phase="steeping"] #top-water-surface { animation:brew-ripple 2s ease-in-out infinite alternate; transform-origin:370px center; }
@keyframes brew-ripple { to { transform:translateY(-2px) scaleX(.98); } }
.burner-glow { opacity:0; transition:opacity .5s; }
[data-phase="heating"] .burner-glow, [data-phase="boiling"] .burner-glow { opacity:.85; }
.brew-status { width:min(100%,540px); margin-top:.2rem; padding:.9rem 1.1rem; border:1px solid #dce7e7; border-radius:1rem; background:rgba(255,255,255,.72); }
.brew-status-line { display:flex; justify-content:space-between; align-items:center; gap:1rem; color:#647a80; font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.brew-status-line span:last-child { color:#0f766e; letter-spacing:.02em; text-align:right; }
.brew-progress { height:4px; margin-top:.7rem; overflow:hidden; border-radius:99px; background:#e1ebea; }
.brew-progress-fill { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0f766e,#d7aa55); transition:width .6s ease; }
.controls-panel input:disabled { opacity:.55; }
.btn-brew:disabled { cursor:wait; opacity:.86; }
@media(min-width:992px) and (max-height:800px) {
  .controls-panel { padding:1.5rem 2rem !important; }
  .controls-panel header { margin-bottom:1rem !important; }
  .controls-panel .gap-4 { gap:1rem !important; }
  .controls-panel h1 { font-size:2.2rem; }
  .visual-panel { padding:1rem 1.5rem !important; }
  .brew-scene-frame { max-width:min(620px, calc((100svh - 230px) * 1.03333)); }
  .btn-brew { padding:.8rem; }
}
@media(max-width:991px) { .visual-panel { padding:1.2rem !important; } .brew-scene-frame { max-width:570px; } }
@media(max-width:480px) { .controls-panel { padding:1.5rem !important; } .controls-panel h1 { font-size:1.9rem; white-space:normal !important; } .brew-status-line { font-size:.55rem; gap:.4rem; } }
@media(prefers-reduced-motion:reduce) { .brew-illustration *, .brew-progress-fill { animation:none !important; transition:none !important; } }