@import"https://fonts.googleapis.com/css2?family=Indie+Flower&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Space Mono,monospace;padding:20px;background-color:light-dark(#f8f9fa,#212529);color:light-dark(#343a40,#f8f9fa);line-height:1.6;max-width:800px;margin:20px auto}.container{display:flex;flex-direction:column;gap:8px}h1{margin-bottom:40px;color:light-dark(#212529,#ffffff);text-align:center}#examples{list-style:none;padding:0;cursor:pointer}#examples li{margin-bottom:10px;padding:15px 20px;border:1px solid light-dark(#dee2e6,#495057);border-radius:6px;background-color:light-dark(#ffffff,#343a40);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out}#examples li:hover{background-color:light-dark(#e9ecef,#495057);border-color:light-dark(#adb5bd,#adb5bd);box-shadow:0 2px 4px light-dark(rgba(0,0,0,.05),rgba(255,255,255,.05))}.user-turn{font-weight:700;padding:15px 20px;background-color:light-dark(#e7f5ff,#0b3d66);border-radius:6px;border-left:4px solid light-dark(#1c7ed6,#66b2ff);margin-bottom:20px}textarea#input{width:100%;padding:15px 20px;border:1px solid light-dark(#ced4da,#495057);border-radius:6px;font-family:Space Mono,monospace;margin-top:8px;min-height:90px;resize:vertical;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out;background-color:light-dark(#ffffff,#343a40);color:light-dark(#343a40,#f8f9fa)}textarea#input:focus{outline:none;border-color:light-dark(#1c7ed6,#66b2ff);box-shadow:0 0 0 2px light-dark(rgba(28,126,214,.2),rgba(102,178,255,.2))}#output+p{margin-bottom:8px;font-weight:700;color:light-dark(#495057,#dee2e6)}#error{font-weight:700;padding:15px 20px;background-color:light-dark(#ffe7e7,#660b0b);border-radius:6px;border-left:4px solid light-dark(#d61c1c,#ff6666)}.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin:40px 0;color:light-dark(#495057,#dee2e6)}.spinner{border:4px solid light-dark(rgba(0,0,0,.1),rgba(255,255,255,.2));border-left-color:light-dark(#212529,#ffffff);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loader[hidden]{display:none}.player{border:1px solid light-dark(#e9ecef,#495057);border-radius:12px;background-color:light-dark(#ffffff,#343a40);box-shadow:0 4px 12px light-dark(rgba(0,0,0,.08),rgba(0,0,0,.2));overflow:hidden;margin-top:20px}.player[hidden]{display:none}.player-display{position:relative;background-color:light-dark(#e9ecef,#212529)}.image-container{width:100%;padding-top:177.78%;position:relative;display:flex;align-items:center;justify-content:center}#player-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background-color:#fff}.caption{font-family:Indie Flower,cursive;font-size:24px;text-align:center;text-wrap:balance;color:light-dark(#212529,#f8f9fa);padding:20px;background:light-dark(rgba(255,255,255,.8),rgba(0,0,0,.6));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:absolute;bottom:0;width:100%}.player-controls{display:flex;align-items:center;gap:12px;padding:12px;background-color:light-dark(#f8f9fa,#2c2e30);border-top:1px solid light-dark(#e9ecef,#495057)}#play-pause-btn,#download-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:light-dark(#212529,#f8f9fa)}#play-pause-btn:hover,#download-btn:hover:not(:disabled){background-color:light-dark(#e9ecef,#495057)}#download-btn:disabled{cursor:not-allowed;opacity:.5}.progress-container{flex-grow:1;background-color:light-dark(#e9ecef,#495057);border-radius:5px;height:8px;cursor:pointer;overflow:hidden}#progress-bar{width:0%;height:100%;background-color:light-dark(#1c7ed6,#66b2ff);border-radius:5px;transition:width .1s linear}canvas[hidden]{display:none}