@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap";*{box-sizing:border-box;font-family:Space Mono,monospace;letter-spacing:.05em;margin:0;padding:0;text-transform:uppercase}body{background-color:#000;color:#fff;overflow:hidden;-webkit-tap-highlight-color:transparent;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.app{height:100vh;height:100svh;width:100vw}.app,.sidebar{display:flex;overflow:hidden}.sidebar{background-color:#111;border-right:1px solid #333;flex-direction:column;height:100%;padding:20px;width:200px}@media (max-width:768px){.sidebar{padding:10px;width:80px}}.sidebar h1{font-size:28px;font-weight:700;letter-spacing:2px;margin-bottom:20px;text-align:center}@media (max-width:768px){.sidebar h1{font-size:10px;height:auto;letter-spacing:1px;margin-bottom:15px}}.animals-container{display:flex;flex-direction:column;gap:15px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;flex-grow:1;max-height:calc(100% - 50px);scroll-behavior:smooth}.animals-container::-webkit-scrollbar{display:none}.animal-selector{border:1px solid #333;border-radius:0;cursor:pointer;padding:10px;transition:all .2s ease}@media (max-width:768px){.animals-container{gap:10px;max-height:calc(100% - 30px)}.animal-selector{padding:5px}}.animal-selector:hover{background-color:#222}.animal-selector img{height:auto;width:100%}.animal-selector img.selected{border:2px solid #fff}.main-content{display:flex;flex:1;flex-direction:column;padding:20px}@media (max-width:768px){.main-content{padding:10px}}.preview{align-items:center;background-color:#111;border:1px solid #333;border-radius:0;display:flex;height:70vh;justify-content:center;margin-bottom:20px}.animal-svg{max-height:80%;max-width:80%;pointer-events:none}@media (max-width:768px){.animal-svg{max-height:70%;max-width:90%}}.controls{align-items:center;display:flex;flex-wrap:wrap;gap:15px}@media (max-width:768px){.controls{gap:10px}}.action-btn,.download-btn,.record-btn,.upload-btn{align-items:center;background-color:#000;border:1px solid #fff;border-radius:0;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:700;height:44px;justify-content:center;letter-spacing:1px;padding:10px 15px;text-align:center;text-decoration:none;transition:all .2s ease}.record-btn.recording{animation:pulse-record 1.5s infinite;background-color:#f33;border-color:#f33;color:#fff}@keyframes pulse-record{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}.recording-indicator{color:#f33;font-size:14px;font-weight:700}@media (max-width:768px){.action-btn,.download-btn,.record-btn,.upload-btn{font-size:12px;height:36px;padding:8px 12px}.processing-indicator,.recording-indicator{font-size:12px}}.action-btn:hover,.download-btn:hover:not([disabled]),.record-btn:hover:not(.recording),.upload-btn:hover{background-color:#fff;color:#000}.download-btn[disabled]{cursor:not-allowed;opacity:.5}.processing-indicator{animation:pulse-process 1.5s infinite;color:#00a2ff;font-size:14px;font-weight:700}@keyframes pulse-process{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}.download-btn{display:inline-block}.file-input{display:none}.audio-player{background-color:#111;border:1px solid #333;border-radius:0;margin-top:20px;width:100%}@media (max-width:768px){.audio-player{height:40px;margin-top:10px}}.animal-name{font-weight:700;letter-spacing:1px;margin-top:8px;text-align:center}@media (max-width:768px){.animal-name{display:none}}.instructions{align-items:center;background-color:#111;border:1px solid #333;border-radius:0;color:#ccc;display:flex;font-size:12px;font-weight:700;height:44px;letter-spacing:1px;max-width:400px;padding:10px 15px}@media (max-width:768px){.instructions{display:none}}