@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}html{width:100%;height:100%;overflow:hidden}body{position:fixed;top:0;left:0;width:100vw;height:100vh;width:100dvw;height:100dvh;margin:0;padding:0;overflow:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch}@media (pointer: coarse){.keyboard button{color:transparent!important}}@media screen and (orientation: portrait){body{width:100vh!important;height:100vw!important;width:100dvh!important;height:100dvw!important;transform-origin:left top;transform:rotate(-90deg);top:100%!important;left:0!important}}body *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}input,textarea{-webkit-user-select:text;user-select:text}.container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;position:absolute;bottom:calc(min(40px,max(100vw,100vh) / 24)/4);left:0;right:0;margin-left:auto;margin-right:auto;width:fit-content;border:2px solid #E76F51;border-radius:min(40px,max(100vw,100vh) / 24);padding:4px;transition:transform .25s ease}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:calc(min(40px,max(100vw,100vh) / 24) / 3) calc(min(40px,max(100vw,100vh) / 24)/2)}.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,.record-done-btn,.tts-container input,.btn.primary,.create-mode-btn,.cancel-btn{padding:calc(min(40px,max(100vw,100vh) / 24) / 3) calc(min(40px,max(100vw,100vh) / 24)/2);font-size:20px;line-height:24px;font-weight:700;border-radius:50px;font-family:Pragati Narrow,sans-serif}.main-actions{display:flex;gap:10px;align-items:center;margin-left:auto}.main-actions.hidden{display:none}.create-mode-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:none;color:#e76f51;cursor:pointer;transition:all .2s ease}.create-mode-btn svg{width:24px;height:24px}.create-mode-btn:hover{background:#ffefc9}.create-mode-btn.active{background:#e76f51;color:#ffefc9}.create-mode-btn.active:hover{background:#e45c3b}.create-popover-layer{position:fixed;left:50%;bottom:40%;transform:translate(-50%);z-index:200;width:420px;pointer-events:none;transition:bottom .25s ease}.create-popover-layer.hidden{display:none}body.create-popover-slide-off .create-popover-layer{bottom:25%}.create-popover{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;border:2px solid #E76F51;border-radius:32px;padding:26px 32px 30px;color:#264653;pointer-events:auto}.create-popover.hidden{display:none}.create-popover h2{margin:0;font-size:26px;line-height:1;color:#264653}.create-popover .tts-container{width:100%}.create-popover>.btn.primary{min-width:94px}.create-popover-close{position:absolute;top:-14px;right:-14px;width:48px;height:48px;border:2px solid #E76F51;border-radius:50%;background:#ffefc9;color:#e76f51;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.create-popover-actions{display:flex;align-items:center;justify-content:center;gap:24px;width:100%}.sound-actions{min-height:48px}.live-waveform{position:relative;display:flex;align-items:center;gap:3px;width:100%;min-height:88px;padding:0 16px;border:2px solid #E76F51;border-radius:20px;background:#ffefc9;box-sizing:border-box;overflow:hidden}.live-waveform:before{content:"";position:absolute;left:16px;right:16px;top:50%;border-top:3px dotted rgba(148,154,142,.45);transform:translateY(-50%)}.live-waveform-bar{position:relative;z-index:1;width:3px;min-height:2px;border-radius:999px;background:#e76f51;opacity:.35;transition:height .16s ease-out,opacity .16s ease-out}.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,.record-done-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid #E76F51;background:#e76f51;color:#ffefc9;font-weight:700;cursor:pointer;transition:all .2s;min-width:102px}.record-btn svg,.record-done-btn svg{width:18px;height:18px}.record-btn:hover,.record-done-btn:hover{background:#e45c3b}.record-btn:disabled,.record-done-btn:disabled{opacity:.7;cursor:default}.cancel-btn{border-radius:50px;font-family:Pragati Narrow,sans-serif;background:none;color:#264653;cursor:pointer;border:0}.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;width:100%}.tts-container input::placeholder{color:#999}.tts-container input:hover{background:#ffe7b0}.btn.primary{background:#e76f51;color:#ffefc9;border:none;cursor:pointer}.btn.primary:hover{background:#e45c3b}.btn.primary:disabled{opacity:.7;cursor:default}.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}}.keyandnote{transition:transform .25s ease}.container.create-popover-slide-off{transform:translateY(70%)}@media (max-height: 500px){.create-popover-layer{bottom:40%}body.create-popover-slide-off .create-popover-layer{bottom:25%}.create-popover{gap:10px;border-radius:24px;padding:14px 26px 16px}.create-popover h2{font-size:22px}.create-popover-close{width:38px;height:38px;top:-12px;right:-12px}.live-waveform{min-height:54px;border-radius:16px}.sound-actions{min-height:40px}}.keyboard{font-size:12px;font-weight:400;display:inline-table;padding:calc(min(40px,max(100vw,100vh) / 24)/2);border-radius:calc(min(40px,max(100vw,100vh) / 24) - 4px);padding-top:min(40px,max(100vw,100vh) / 24);border:2px solid #E76F51;min-width:calc(min(40px,max(100vw,100vh) / 24)*21 + 42px)}.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:min(40px,max(100vw,100vh) / 24);height:calc(min(40px,max(100vw,100vh) / 24)*3);padding-top:calc(min(40px,max(100vw,100vh) / 24)*1.5);margin:1px}.keyboard button.white:hover{background:#d5c5ae}.keyboard button.white:active,.keyboard button.white.active{transform:translateY(4px);height:calc(min(40px,max(100vw,100vh) / 24)*3 - 8px);background:#d5c5ae}.keyboard button.black{background:#264653;width:min(40px,max(100vw,100vh) / 24);height:calc(min(40px,max(100vw,100vh) / 24)*2);z-index:99;position:absolute;transform:translate(calc(min(40px,max(100vw,100vh) / 24)/-2),-20px);padding-top:16px}.keyboard button.black:hover{background:#073b4c}.keyboard button.black:active,.keyboard button.black.active{transform:translate(calc(min(40px,max(100vw,100vh) / 24)/-2),-10px);height:calc(min(40px,max(100vw,100vh) / 24)*2 - 8px);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:min(40px,max(100vw,100vh) / 24);display:flex;align-items:center;justify-content:center;container-type:inline-size}#notes>span.system{background:var(--note-system)}#notes>span svg{width:100%;animation:rotate-note 3s linear infinite}#notes>span .pawnote-text{color:#f50;font-weight:700;text-align:center;pointer-events:none;white-space:nowrap;font-size:calc(min(40px,max(100vw,100vh) / 24)*.66)}#notes>span .pawnote-text span{display:inline-block}#notes>span .pawnote-text.wave-active span{animation:letter-jump 1s forwards;animation-delay:calc(var(--base-delay, 0s) + var(--letter-delay, 0s))}@keyframes rotate-note{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes letter-jump{0%,20%,to{transform:translateY(0)}10%{transform:translateY(calc(min(40px,max(100vw,100vh) / 24)/-4))}}#bubble{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;pointer-events:none}.app-header{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));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:8px;background:none;border:0;color:inherit;cursor:pointer;line-height:inherit;margin:0;padding:0;text-decoration:none}.app-title-container:focus-visible{outline:2px solid #E76F51;outline-offset:4px;border-radius:8px}.app-icon{width:32px;height:32px}.app-title{font-size:24px;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;border:none}#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-wrap{transform:translateY(20px)}.modal-wrap{border:2px solid #E76F51;border-radius:32px;max-width:580px;width:90%;position:relative;color:#264653;transform:translateY(0);transition:transform .3s ease;display:flex;background:#ffefc9}@media screen and (orientation: portrait){.modal-wrap{max-height:calc(100% - 40px)}}.modal-wrap .modal-content{overflow-y:auto;max-height:80vh;margin:24px 0;padding:16px 40px}.modal-wrap .modal-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.modal-wrap .modal-icon{width:32px;height:32px}.modal-wrap h2{font-size:32px;margin:0;font-weight:700;color:#264653}.modal-wrap .subtitle{font-size:20px;font-weight:700;margin-bottom:24px;font-style:italic;opacity:.8}.modal-wrap h3{font-size:20px;margin:24px 0 12px;font-weight:700}.modal-wrap p{font-size:18px;line-height:1.5;margin-bottom:16px}.modal-wrap ul.pro-tips{padding-left:20px}.modal-wrap ul.pro-tips li{font-size:18px;margin-bottom:12px;line-height:1.4}.modal-wrap ul.pro-tips li strong{color:#e76f51}.modal-wrap .modal-footer{margin-top:16px;padding-top:16px;border-top:1px solid rgba(231,111,81,.3);font-size:14px;text-align:center;opacity:.6}.modal-wrap .modal-footer p{margin:0}.modal-wrap .modal-footer a{color:#264653;text-decoration:underline}.close-modal-btn{position:absolute;top:-14px;right:-14px;width:48px;height:48px;background:#ffefc9;border:2px solid #E76F51;cursor:pointer;border-radius:50%;color:#e76f51;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s,transform .2s}.close-modal-btn svg{width:18px;height:18px}.close-modal-btn svg path{stroke:currentColor}.close-modal-btn:hover{background:#fff5dd}.close-modal-btn:active{transform:scale(.95)}