@font-face {
    font-family: 'DrukCyr';
    src: url('DrukCyr-Medium.ttf') format('truetype');
}
body { background: #000; color: #fff; font-family: 'DrukCyr', sans-serif;, sans-serif; margin: 0; min-height: 100vh; padding: 40px; box-sizing: border-box; }
.nav { display: flex; gap: 20px; margin-bottom: 40px; }
.icon-btn { background: none; border: none; width: 150px; height: 30px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.icon-btn img { width: 100%; object-fit: contain; transition: 0.3s; }
.main-content { display: flex; flex-wrap: wrap; gap: 80px; align-items: start; }
.controls { flex: 1; min-width: 300px; max-width: 350px; }
h1 { font-size: 100px; line-height: 0.9; margin-bottom: 50px; text-transform: uppercase; }
textarea { background: #1a1a1a; color: #fff; border: 1px solid #444; border-radius: 12px; padding: 20px; width: 100%; height: 150px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; resize: none; box-sizing: border-box; }
.slider-group { margin-top: 50px; width: 100%; transition: all 0.3s; opacity: 1; height: auto; }
.anim-mode .slider-group, .down-mode .slider-group { opacity: 1; }
.anim-mode .download-btn { display: none; }
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; background: #444; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 8px; background: #fff; margin-top: -7px; }
.labels { display: flex; justify-content: space-between; font-size: 14px; color: #666; margin-top: 10px; }
.right-panel { flex: 1; min-width: 300px; max-width: 600px; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
canvas { width: 100%; height: auto; background: #000; }
.download-btn { background: transparent; color: none; border:none; width: 200px; height: 30px;  font-family: 'Bebas Neue', sans-serif; font-size: 18px; cursor: pointer; border-radius: 8px; transition: 0.3s; }
.download-btn img {
    width: 100%;          /* Иконка растянется на всю ширину кнопки */
    height: 100%;         /* Иконка растянется на всю высоту кнопки */
    object-fit: contain;  /* Сохраняет пропорции иконки */
    transition: 0.3s;
}
