.container{display:flex;flex-direction:column;align-items:center;max-width:1000px;margin:0 auto;padding:20px;width:100%;box-sizing:border-box}h1{text-align:center;color:#333;margin-top:0;margin-bottom:20px;font-size:clamp(1.5rem,5vw,2.5rem)}h3{text-align:center;color:#333;margin-top:0;margin-bottom:20px}.controls{display:flex;gap:10px;margin-bottom:20px;justify-content:center;flex-wrap:wrap;width:100%}.select,.input{padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px;box-sizing:border-box}.input{flex:1}.button{padding:12px 24px;background-color:#07c160;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:all .3s ease;white-space:nowrap;min-width:80px}.button:hover{background-color:#45a049;transform:translateY(-1px)}.button:active{transform:translateY(1px)}.video-container{position:relative;width:100%;aspect-ratio:16 / 9}.video-frame{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;box-shadow:0 2px 8px #0000001a}@media screen and (max-width: 768px){.container{padding:10px}.controls{flex-direction:column;align-items:stretch;gap:15px}.select,.input{max-width:100%;font-size:14px}.button{width:100%;padding:14px;font-size:14px}.video-container{margin:10px 0}.video-frame{border-radius:4px}}@media screen and (max-width: 480px){.container{padding:8px}h1{margin-bottom:20px}.controls{gap:10px}.select,.input{padding:10px}.button{padding:12px}}@media (prefers-color-scheme: dark){body{background-color:#1a1a1a}h1,h3{color:#fff}.select,.input{background-color:#2d2d2d;border-color:#404040;color:#fff}.select:focus,.input:focus{outline:none;border-color:#07c160}.button{background-color:#07c160}.video-frame{box-shadow:0 2px 8px #0003}}