@import"https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap";*{font-family:Pragati Narrow,sans-serif!important}.hidden{display:none!important}body{overflow:hidden}.container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;position:absolute;bottom:2rem;left:0;right:0;margin-left:auto;margin-right:auto;width:fit-content;border:2px solid #E76F51;border-radius:44px;padding:4px}button.outline{border:2px solid #E76F51}button.outline:hover{background:#ffefc9}button.outline:active{background:#e76f51}.controls-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 24px}.shuffle-btn{background:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-right:24px;transition:all .2s ease;padding:0}.shuffle-btn svg{width:20px;height:20px}.shuffle-btn svg path{transition:stroke .2s ease}.shuffle-btn.active{background:#e76f51}.shuffle-btn.active svg path{stroke:#fff}.shuffle-btn.hidden{display:none}.feedback-wrapper{flex:1;display:flex;align-items:center;justify-content:flex-start;margin-right:24px}.feedback-wrapper.hidden{display:none}.text-feedback{color:#e76f51;font-weight:700;font-size:20px;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-feedback-visualizer{display:flex;align-items:center;gap:3px;height:32px}.audio-feedback-visualizer .bar{width:3px;background:#e76f51;border-radius:2px}.slices-list{display:flex;gap:8px;align-items:flex-end;overflow-x:auto}.slices-list::-webkit-scrollbar{height:4px}.slices-list::-webkit-scrollbar-thumb{background:#e76f5133;border-radius:4px}.slice-item{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:40px;background:none;padding:4px 8px;cursor:pointer;border-radius:8px;border:2px solid #E76F51}.slice-item.playing{background:#e76f51}.slice-item.playing .slice-label{color:#ffefc9}.slice-item.playing .mini-bar{background:#ffefc9;animation:barGrow .2s ease-out backwards}.slice-item:hover{background:#ffefc9}.slice-item:active{background:#e76f51}.slice-item:active .slice-label{color:#ffefc9}.slice-item:active .mini-bar{background:#ffefc9;animation:barGrow .2s ease-out backwards}.slice-item:active{transform:scale(.95)}.slice-number{border-radius:20px;font-weight:700;font-size:20px;color:#264653;line-height:1;transition:all .2s ease;background:none}.slice-number.hidden{display:none}.slice-label{font-size:18px;font-weight:700;color:#e76f51;text-align:center;white-space:nowrap;line-height:24px}.slice-label svg,.slice-label .mini-waveform{display:flex;align-items:center;justify-content:center;gap:2px;margin:0 auto;height:24px}.slice-label .mini-bar{width:2px;background:#e76f51;border-radius:2px;transform-origin:center;transform:scaleY(1)}@keyframes barGrow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.record-btn,.tts-container input,.tts-container .btn.primary,.create-samples-btn,.cancel-btn{padding:16px 24px;font-size:20px;line-height:24px;font-weight:700;border-radius:50px;font-family:Pragati Narrow,sans-serif}.main-actions{display:flex;gap:12px;align-items:center;margin-left:auto}.main-actions.hidden{display:none}.create-samples-btn{display:flex;align-items:center;gap:8px;background:none;color:#264653;cursor:pointer;transition:all .2s ease}.create-samples-btn .icon-plus{font-size:20px;color:#e76f51;line-height:1}.controls-expanded{flex:1;display:flex;align-items:center;gap:16px;transition:all .3s ease;width:100%;justify-content:flex-end;overflow:hidden}.controls-expanded.hidden{display:none}.controls-expanded .label{font-weight:700;color:#264653;font-size:20px;margin-right:10px;white-space:nowrap}.control-group{display:flex;align-items:center;flex:1}.control-group:has(.tts-container){flex:2}.control-group.hidden{display:none}.divider{width:1px;height:24px;background-color:#e76f51;opacity:.5}.divider.hidden{display:none}.record-btn{display:flex;align-items:center;gap:8px;border:2px solid #E76F51;background:#ffefc9;color:#264653;font-weight:700;cursor:pointer;transition:all .2s}.record-btn .icon{width:12px;height:12px;background:#e76f51;border-radius:50%}.record-btn:hover{background:#ffe7b0}.record-btn.recording{background:#e76f51;color:#fff}.record-btn.recording .icon{background:#fff;animation:pulse 1s infinite;border-radius:2px}.cancel-btn{border-radius:50px;font-family:Pragati Narrow,sans-serif;background:none;color:#e76f51;color:#264653;cursor:pointer;margin-left:12px}.cancel-btn.hidden{display:none}.record-helper-text{font-size:20px;font-weight:700;color:#264653;margin-left:12px;white-space:nowrap}.record-helper-text.hidden{display:none}.tts-container{display:flex;align-items:center;flex:2;border:2px solid #E76F51;background:#ffefc9;border-radius:100px}.tts-container input{border:none;color:#555;outline:none;flex:2;background:#ffefc9}.tts-container input::placeholder{color:#999}.tts-container input:hover{background:#ffe7b0}.tts-container .btn.primary{background:#e76f51;color:#ffefc9;border:none;cursor:pointer}.tts-container .btn.primary:hover{background:#e45c3b}.close-btn{background:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:16px}.close-btn.hidden{display:none}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.keyboard{font-size:12px;font-weight:400;display:inline-table;padding:40px 24px 24px;border-radius:40px;border:2px solid #E76F51;min-width:966px}.keyboard button{outline:none;transition:all .1s ease-out;margin:0;padding:0;border:none;color:#949a8e;border-radius:100px;cursor:pointer;box-shadow:#e76f51 0 0 0 2px}.keyboard button.white{background:#ffefc9;width:44px;height:120px;padding-top:60px;margin:1px}.keyboard button.white:hover{background:#d5c5ae}.keyboard button.white:active,.keyboard button.white.active{transform:translateY(4px);height:112px;background:#d5c5ae}.keyboard button.black{background:#264653;width:44px;height:70px;z-index:99;position:absolute;transform:translate(-22px,-20px);padding-top:16px}.keyboard button.black:hover{background:#073b4c}.keyboard button.black:active,.keyboard button.black.active{transform:translate(-22px,-10px);height:62px;background:#073b4c}#notes{position:absolute;bottom:160px}#notes span{border-radius:100px;position:absolute;transform-origin:center bottom;mix-blend-mode:color-dodge;z-index:-1}#notes span.user{background:var(--note-user);height:44px}#notes span.system{background:var(--note-system)}#notes span svg{width:100%;animation:rotate-note 3s linear infinite}@keyframes rotate-note{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#bubble{position:fixed;top:0;left:0;z-index:-2;pointer-events:none}.app-header{position:absolute;top:16px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:100}.app-header *{pointer-events:auto}.app-title-container{display:flex;align-items:center;gap:12px}.app-icon{width:40px;height:40px}.app-title{font-size:32px;font-weight:700;color:#264653;margin:0;line-height:1}.about-btn{background:none;color:#e76f51;padding:8px 16px;border-radius:50px;font-weight:700;font-size:16px;cursor:pointer;transition:all .2s ease}.about-btn:hover{background:#ffefc9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-overlay.hidden .modal-content{transform:translateY(20px)}.modal-content{background:#fff;padding:40px;border-radius:24px;max-width:500px;width:90%;position:relative;color:#264653;transform:translateY(0);transition:transform .3s ease;max-height:90vh;overflow-y:auto}.modal-content .modal-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.modal-content .modal-icon{width:32px;height:32px}.modal-content h2{font-size:32px;margin:0;font-weight:700;color:#e76f51}.modal-content .subtitle{font-size:20px;font-weight:700;margin-bottom:24px;font-style:italic;opacity:.8}.modal-content h3{font-size:20px;margin:24px 0 12px;font-weight:700;border-bottom:2px solid #FFEFC9;padding-bottom:8px}.modal-content p{font-size:18px;line-height:1.5;margin-bottom:16px}.modal-content ul.pro-tips{padding-left:20px}.modal-content ul.pro-tips li{font-size:18px;margin-bottom:12px;line-height:1.4}.modal-content ul.pro-tips li strong{color:#e76f51}.modal-content .modal-footer{margin-top:32px;padding-top:16px;border-top:1px solid #eee;font-size:14px;text-align:center;opacity:.6}.modal-content .modal-footer a{color:#264653;text-decoration:underline}.close-modal-btn{position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s}.close-modal-btn:hover{background:#f0f0f0}