*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 50% 30%,#2a2238,#14101c 70%);color:#f0f0f0;-webkit-user-select:none;user-select:none}.app{height:100%;display:flex;flex-direction:column;align-items:center;padding:env(safe-area-inset-top,16px) 24px env(safe-area-inset-bottom,24px);text-align:center;gap:16px}.app__title{margin:12px 0 0;font-size:clamp(28px,6vw,40px);font-weight:700;letter-spacing:.02em;color:#f7b06a}.app__stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;touch-action:pan-y;cursor:grab}.app__stage:active{cursor:grabbing}.cat{width:min(70vw,60vh,420px);height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}.cat--listening,.cat--recording{animation:cat-breathe 2.6s ease-in-out infinite}.cat--recording{animation-duration:1.2s}@keyframes cat-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.025)}}.effect-switcher{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"left chip right" "dots dots dots";align-items:center;justify-items:center;gap:6px 12px;width:min(360px,90%);-webkit-user-select:none;user-select:none}.effect-switcher__arrow{color:#f7b06a80;font-size:26px;line-height:1;pointer-events:none}.effect-switcher__arrow:first-of-type{grid-area:left}.effect-switcher__arrow:last-of-type{grid-area:right}.effect-switcher__chip{grid-area:chip;display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#f7b06a1f;border:1px solid rgba(247,176,106,.28);font-size:17px;font-weight:600;color:#f7b06a;animation:chip-in .22s ease;min-width:140px;justify-content:center}.effect-switcher__emoji{font-size:22px;line-height:1}@keyframes chip-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.effect-switcher__dots{grid-area:dots;display:flex;gap:8px}.effect-switcher__dot{width:7px;height:7px;border-radius:50%;background:#f7b06a40;transition:background .15s ease,transform .15s ease}.effect-switcher__dot.is-active{background:#f7b06a;transform:scale(1.3)}.app__controls{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:8px}.record-btn{display:inline-flex;align-items:center;gap:14px;min-height:72px;padding:0 32px;border:none;border-radius:999px;background:linear-gradient(180deg,#ff5e6c,#d6324a);color:#fff;font-size:18px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 24px #d6324a66,inset 0 1px #ffffff40;transition:transform .08s ease,box-shadow .12s ease,opacity .12s ease;touch-action:manipulation}.record-btn:active:not(:disabled){transform:scale(.97)}.record-btn:disabled{opacity:.6;cursor:default}.record-btn__dot{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 #fff9}.record-btn--off{animation:invite 2.4s ease-in-out infinite}@keyframes invite{0%,to{transform:scale(1);box-shadow:0 10px 24px #d6324a66,inset 0 1px #ffffff40}50%{transform:scale(1.04);box-shadow:0 14px 30px #d6324a8c,inset 0 1px #ffffff40}}.record-btn--listening{background:linear-gradient(180deg,#e85362,#b4283e)}.record-btn--listening .record-btn__dot{background:#fff;animation:rec-pulse 2s ease-in-out infinite}.record-btn--recording{background:linear-gradient(180deg,#d6324a,#8b1c2e)}.record-btn--recording .record-btn__dot{background:#fff;animation:rec-pulse .7s ease-in-out infinite}@keyframes rec-pulse{0%,to{box-shadow:0 0 #ffffff80}50%{box-shadow:0 0 0 10px #fff0}}.record-btn--playing{background:linear-gradient(180deg,#5b6e8a,#3a4a64);box-shadow:0 6px 18px #00000059}.app__error{margin:0;font-size:14px;color:#ffb8b8;max-width:320px}