.monono-stage{justify-content:center;align-items:center;min-height:calc(100vh - 200px);padding:2rem 1rem;font-family:DM Sans,system-ui,sans-serif;display:flex}.monono-device{background:linear-gradient(#fff6fa 0%,#ffd9ea 60%,#ffbad6 100%);border:1px solid #ffffff80;border-radius:36px;width:100%;max-width:420px;padding:20px 20px 24px;position:relative;box-shadow:inset 0 2px #ffffffe6,inset 0 -6px 20px #b43c6e33,0 20px 50px #b43c6e59,0 4px 12px #00000026}.monono-device-top{justify-content:space-between;align-items:center;padding:4px 10px 10px;display:flex}.monono-device-bottom{justify-content:center;padding:10px 0 2px;display:flex}.monono-label{letter-spacing:.18em;color:#8a3a65;opacity:.7;text-transform:uppercase;font-family:DM Mono,ui-monospace,monospace;font-size:9px}.monono-dot{background:#d9a5bd;border-radius:50%;width:8px;height:8px;box-shadow:inset 0 1px 2px #0003}.monono-dot--power{background:#6fe3a8;box-shadow:0 0 6px #6fe3a8,inset 0 1px 2px #0003}.monono-dot--live{background:#c58ba5;transition:all .15s}.monono-dot--live.is-on{background:#ff4a7e;box-shadow:0 0 8px #ff4a7e}.monono-screen{background:radial-gradient(at 50% 0,#fff0f6e6 0%,#0000 60%),linear-gradient(#ffeaf3 0%,#ffd0e1 100%);border:1px solid #b43c6e26;border-radius:24px;flex-direction:column;gap:16px;min-height:440px;padding:20px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px #fff9,inset 0 -2px 8px #b43c6e26,0 1px 3px #b43c6e33}.monono-screen:before{content:"";pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,#0000 0 2px,#b43c6e0a 2px 3px);position:absolute;inset:0}.monono-face-wrap{z-index:2;flex-shrink:0;width:160px;height:160px;margin:0 auto;position:relative}.monono-sprite-wrap{filter:drop-shadow(0 6px 16px #b43c6e47);margin:0 auto;position:relative}.monono-sprite{object-fit:contain;width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;opacity:0;transition:opacity 80ms linear;position:absolute;inset:0}.monono-sprite.is-active{opacity:1}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.monono-transcript{z-index:2;scroll-behavior:smooth;flex-direction:column;flex:1;gap:8px;max-height:220px;padding:4px 2px;display:flex;position:relative;overflow-y:auto}.monono-transcript::-webkit-scrollbar{width:4px}.monono-transcript::-webkit-scrollbar-thumb{background:#b43c6e40;border-radius:2px}.monono-bubble{word-wrap:break-word;border-radius:14px;max-width:85%;padding:8px 12px;font-size:14px;line-height:1.35;animation:.25s ease-out mono-pop}@keyframes mono-pop{0%{opacity:0;transform:translateY(4px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.monono-bubble--user{color:#4a1d33;background:linear-gradient(#fff 0%,#fff0f6 100%);border:1px solid #b43c6e33;border-bottom-right-radius:4px;align-self:flex-end;box-shadow:0 1px 3px #b43c6e1f}.monono-bubble--assistant{color:#fff;text-shadow:0 1px 1px #64143226;background:linear-gradient(#ff7fb1 0%,#e85d97 100%);border-bottom-left-radius:4px;align-self:flex-start;box-shadow:0 2px 6px #e85d9759}.monono-bubble.is-nudge{opacity:.82;font-style:italic}.monono-bubble.is-cutoff{opacity:.72}.monono-bubble.is-blocked{letter-spacing:.04em;background:linear-gradient(#b85580 0%,#8a3a65 100%);font-family:DM Mono,monospace;font-size:12px}.monono-bubble.is-typing{align-items:center;gap:3px;padding:10px 14px;display:inline-flex}.monono-bubble.is-typing span{background:#fff;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite mono-dot}.monono-bubble.is-typing span:nth-child(2){animation-delay:.15s}.monono-bubble.is-typing span:nth-child(3){animation-delay:.3s}@keyframes mono-dot{0%,60%,to{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.monono-input-row{align-items:flex-end;gap:10px;padding:8px 4px 0;display:flex}.monono-input{resize:none;color:#4a1d33;background:#ffffffb3;border:none;border-radius:14px;outline:none;flex:1;min-height:40px;max-height:80px;padding:10px 14px;font-family:inherit;font-size:14px;transition:box-shadow .15s;box-shadow:inset 0 1px 2px #b43c6e1a,0 0 0 1px #b43c6e33}.monono-input:focus{background:#fff;box-shadow:inset 0 1px 2px #b43c6e26,0 0 0 2px #ff7fb1}.monono-input::placeholder{color:#b85580;opacity:.6}.monono-input:disabled{opacity:.5;cursor:not-allowed}.monono-send{color:#fff;cursor:pointer;background:linear-gradient(#ff7fb1 0%,#e85d97 100%);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;padding-bottom:2px;font-size:18px;transition:transform .1s,box-shadow .15s;display:flex;box-shadow:inset 0 1px #ffffff4d,0 2px 6px #e85d9766}.monono-send:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px #ffffff4d,0 4px 10px #e85d9780}.monono-send:active:not(:disabled){transform:translateY(0)}.monono-send:disabled{opacity:.4;cursor:not-allowed}