.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;gap:10px;padding:4px 10px 10px;display:flex}.monono-device-top__right{align-items:center;gap:10px;display:flex}.monono-music-switch{cursor:pointer;background:linear-gradient(#a87a8e 0%,#c89aab 100%);border:none;border-radius:9px;flex-shrink:0;width:36px;height:18px;padding:0;transition:background .2s;display:inline-block;position:relative;box-shadow:inset 0 1px 2px #3c142859,inset 0 -1px 1px #ffffff2e,0 1px #fff6}.monono-music-switch.is-on{background:linear-gradient(#3fa97c 0%,#6fe3a8 100%)}.monono-music-switch__glyph{color:#ffffffe6;pointer-events:none;font-size:10px;line-height:1;transition:left .18s,right .18s,opacity .2s;position:absolute;top:50%;transform:translateY(-50%)}.monono-music-switch.is-on .monono-music-switch__glyph{opacity:.95;left:5px;right:auto}.monono-music-switch.is-off .monono-music-switch__glyph{opacity:.55;left:auto;right:5px}.monono-music-switch__thumb{background:linear-gradient(#fff 0%,#f5e4ec 100%);border-radius:50%;width:14px;height:14px;transition:transform .18s cubic-bezier(.34,1.4,.64,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000059,inset 0 -1px 1px #ffffffb3}.monono-music-switch.is-on .monono-music-switch__thumb{transform:translate(18px)}.monono-music-switch:focus-visible{outline-offset:2px;outline:2px solid #ff7fb1}.monono-music-edit{cursor:pointer;color:#6e2a4a;background:#ffffff59;border:none;border-radius:5px;justify-content:center;align-items:center;width:20px;height:18px;padding:0;font-size:11px;line-height:1;transition:background .12s,color .12s,transform 80ms;display:inline-flex;box-shadow:inset 0 1px 2px #b43c6e2e,0 1px #fff6}.monono-music-edit:hover{color:#4a1d33;background:#fff9;transform:translateY(-.5px)}.monono-music-edit:active{transform:translateY(0)}.monono-music-edit:focus-visible{outline-offset:2px;outline:2px solid #ff7fb1}.monono-music-modal{background:0 0;border:none;max-width:95vw;max-height:95vh;margin:auto;padding:0;overflow:visible}.monono-music-modal::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#08040cb3}.monono-music-modal__body{position:relative}.monono-music-modal__close{color:#d8d8e6;cursor:pointer;z-index:2;background:linear-gradient(#2c2c3a 0%,#1a1a22 100%);border:1px solid #ffffff2e;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding-bottom:2px;font-size:20px;line-height:1;transition:background .12s,transform 80ms;display:flex;position:absolute;top:8px;right:8px;box-shadow:inset 0 1px #ffffff14,0 4px 12px #0000008c}.monono-music-modal__close:hover{background:linear-gradient(#3a3a4a 0%,#24242e 100%);transform:scale(1.05)}.monono-music-modal__close:focus-visible{outline-offset:2px;outline:2px solid #6aa9ff}.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}.monono-sprite-wrap.is-user-typing{animation:1.1s ease-in-out infinite monono-bob}.monono-sprite-wrap.is-waiting{animation:2.4s ease-in-out infinite monono-look}.monono-sprite-wrap.is-asleep{opacity:.82;animation:3.2s ease-in-out infinite monono-breathe}.monono-sprite-wrap.is-woken{animation:.45s ease-out forwards monono-startle}.monono-sprite-wrap.is-pokeable{cursor:pointer}.monono-sprite-wrap.is-pokeable:active{animation:.3s ease-out forwards monono-startle}@keyframes monono-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes monono-look{0%,to{transform:translate(0)rotate(0)}30%{transform:translate(-4px)rotate(-1deg)}60%{transform:translate(3px)rotate(1deg)}80%{transform:translate(-2px)rotate(0)}}@keyframes monono-breathe{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-3px)scale(1.012)}}@keyframes monono-startle{0%{transform:scale(1)translateY(0)}25%{transform:scale(1.18)translateY(-8px)}60%{transform:scale(.94)translateY(2px)}to{transform:scale(1)translateY(0)}}.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}.monono-dev-reset{color:#fff;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:linear-gradient(#ff7fb1 0%,#e85d97 100%);border:none;border-radius:999px;margin:14px auto 4px;padding:10px 22px;font-family:DM Mono,ui-monospace,monospace;font-size:10px;transition:transform .1s,box-shadow .15s;display:block;box-shadow:inset 0 1px #ffffff4d,0 2px 8px #e85d9766}.monono-dev-reset:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff4d,0 4px 12px #e85d9780}.monono-dev-reset:active{transform:translateY(0)}
