static/style.css

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 900px;
    margin: auto;
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
h1, h2, h3 { color: #FF6B6B; text-align: center; }
textarea { width: 100%; height: 100px; font-size: 16px; padding: 10px; border-radius: 8px; border: 1px solid #ccc; }
button {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.2s;
}
button:hover { transform: scale(1.02); }
.output-area { margin-top: 2rem; }
video { width: 100%; border-radius: 8px; background-color: #eee; }
pre { background-color: #f4f4f4; padding: 1rem; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
.loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #4b6cb7; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }