*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#060a08;overflow-x:hidden;height:100%;font-family:'Cormorant Garamond',Georgia,serif;color:#8a928e}
textarea::placeholder{color:rgba(140,160,150,0.2)}textarea:focus{border-color:rgba(140,160,150,0.25)!important;outline:none}
button{font-family:'Cormorant Garamond',Georgia,serif}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(100,120,110,0.12);border-radius:2px}
input[type=range]{-webkit-appearance:none;height:4px;border-radius:2px;cursor:pointer;background:rgba(100,120,110,0.2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#6a726e;cursor:pointer}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(140,170,180,.2)}50%{box-shadow:0 0 0 6px rgba(140,170,180,0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.app{min-height:100dvh;position:relative;overflow:hidden;max-width:480px;margin:0 auto}
.scene{position:fixed;inset:0;z-index:0;max-width:480px;margin:0 auto;animation:breathe 6s ease-in-out infinite}
.scene img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
#lips{position:absolute;inset:0;pointer-events:none}
.g1{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(6,10,8,.95),rgba(6,10,8,.7) 40%,transparent)}
.g2{position:absolute;inset:0;background:radial-gradient(ellipse at center 30%,transparent 40%,rgba(6,10,8,.4))}
.ct{position:relative;z-index:4;display:flex;flex-direction:column;min-height:100dvh;padding:12px 16px}
.sub{text-align:center;padding:10px 18px;max-width:92%;margin:0 auto;color:#b0b8b4;font-size:16px;line-height:1.65;background:rgba(6,10,8,.65);border-radius:6px;backdrop-filter:blur(8px);border:1px solid rgba(100,120,110,.08);animation:fadeIn .3s}
.sub .cursor{display:inline-block;width:1px;height:1em;background:#b0b8b4;margin-left:2px;vertical-align:text-bottom;animation:blink .8s step-end infinite}
.msg{padding:6px 12px;margin-bottom:6px;border-radius:6px;font-size:13px;line-height:1.6;backdrop-filter:blur(4px)}
.mu{background:rgba(20,30,25,.5);border-left:2px solid rgba(80,100,120,.12)}
.ma{background:rgba(15,20,18,.5);border-left:2px solid rgba(100,120,110,.2)}
.hid{display:none!important}