:root {
   --accent: #1e2e69;
   --accent-hover: #2a3d8a;
   --accent-active: #162052;
   --black: #000;
   --white: #fff;
   --transition-fast: 0.15s ease-out;
   --transition-medium: 0.25s ease-out;
}

.crt-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 9999;
   background: radial-gradient(
      ellipse at center,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.08) 80%,
      rgba(0, 0, 0, 0.2) 100%
   );
}

.crt-scanlines {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 9998;
   background: 
      repeating-linear-gradient(
         0deg,
         transparent 0px,
         transparent 1px,
         rgba(0, 0, 0, 0.04) 1px,
         rgba(0, 0, 0, 0.04) 2px
      );
   background-size: 100% 3px;
}

.crt-scanlines::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.008) 0%,
      rgba(0, 255, 0, 0.004) 33%,
      rgba(0, 0, 255, 0.008) 66%,
      rgba(255, 0, 0, 0.008) 100%
   );
   background-size: 3px 100%;
   animation: rgbShift 8s linear infinite;
}

@keyframes rgbShift {
   0% { background-position: 0 0; }
   100% { background-position: 30px 0; }
}

@keyframes crtFlicker {
   0%, 100% { opacity: 1; }
   3% { opacity: 0.97; }
   6% { opacity: 1; }
   9% { opacity: 0.95; }
   11% { opacity: 1; }
   87% { opacity: 1; }
   89% { opacity: 0.96; }
   92% { opacity: 1; }
}

body {
   animation: crtFlicker 5s infinite;
}

.btn:hover,
.hero_box:hover h2,
.hero_box:hover p,
nav a:hover span,
#result a:hover,
.preset-btn:hover,
.service_fileload:hover b {
   text-shadow: 
      -0.5px 0 0 rgba(255, 60, 60, 0.4),
      0.5px 0 0 rgba(60, 200, 255, 0.4),
      0 0 2px rgba(255, 255, 255, 0.1);
   animation: chromaticText 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes chromaticText {
   0% {
      text-shadow: 
         -2px 0 0 rgba(255, 60, 60, 0.6),
         2px 0 0 rgba(60, 200, 255, 0.6),
         0 0 8px rgba(255, 255, 255, 0.2);
   }
   40% {
      text-shadow: 
         -1px 0 0 rgba(255, 60, 60, 0.5),
         1px 0 0 rgba(60, 200, 255, 0.5),
         0 0 4px rgba(255, 255, 255, 0.15);
   }
   100% {
      text-shadow: 
         -0.5px 0 0 rgba(255, 60, 60, 0.4),
         0.5px 0 0 rgba(60, 200, 255, 0.4),
         0 0 2px rgba(255, 255, 255, 0.1);
   }
}

.hero_box:hover .hero_img img:not([src$=".gif"]),
.service_hat:hover img:not([src$=".gif"]) {
   filter: 
      drop-shadow(-1px 0 0 rgba(255, 60, 60, 0.25)) 
      drop-shadow(1px 0 0 rgba(60, 200, 255, 0.25))
      brightness(1.02);
   animation: chromaticImage 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes chromaticImage {
   0% {
      filter: 
         drop-shadow(-3px 0 0 rgba(255, 60, 60, 0.4)) 
         drop-shadow(3px 0 0 rgba(60, 200, 255, 0.4))
         brightness(1.05);
   }
   50% {
      filter: 
         drop-shadow(-1.5px 0 0 rgba(255, 60, 60, 0.3)) 
         drop-shadow(1.5px 0 0 rgba(60, 200, 255, 0.3))
         brightness(1.03);
   }
   100% {
      filter: 
         drop-shadow(-1px 0 0 rgba(255, 60, 60, 0.25)) 
         drop-shadow(1px 0 0 rgba(60, 200, 255, 0.25))
         brightness(1.02);
   }
}

#result code:active {
   text-shadow: 
      -1px 0 0 rgba(255, 60, 60, 0.5),
      1px 0 0 rgba(60, 200, 255, 0.5),
      0 0 4px rgba(30, 46, 105, 0.3);
}

.btn:active {
   animation: glitchBtn 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes glitchBtn {
   0% { 
      transform: translateX(-1px);
      text-shadow: 
         1.5px 0 rgba(255, 60, 60, 0.5), 
         -1.5px 0 rgba(60, 200, 255, 0.5);
   }
   30% { 
      transform: translateX(1px);
      text-shadow: 
         -1px 0 rgba(255, 60, 60, 0.4), 
         1px 0 rgba(60, 200, 255, 0.4);
   }
   60% { 
      transform: translateX(-0.5px);
      text-shadow: 
         0.5px 0 rgba(255, 60, 60, 0.3), 
         -0.5px 0 rgba(60, 200, 255, 0.3);
   }
   100% { 
      transform: translateX(0);
      text-shadow: none;
   }
}

@media (max-width: 768px) {
   .crt-scanlines {
      background: 
         repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.025) 2px,
            rgba(0, 0, 0, 0.025) 3px
         );
      background-size: 100% 4px;
   }
   .crt-overlay {
      background: radial-gradient(
         ellipse at center,
         transparent 0%,
         transparent 60%,
         rgba(0, 0, 0, 0.05) 85%,
         rgba(0, 0, 0, 0.12) 100%
      );
   }
   .crt-scanlines::before {
      opacity: 0.3;
   }
}

* {
   margin: 0;
   padding: 0;
   outline: none;
   border: none;
   text-decoration: none;
   box-sizing: border-box;
   font-family: "Handjet", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 16px;
   line-height: 1;
   list-style: none;
   font-weight: 500;
   letter-spacing: 1.5px;
   color: inherit;
   transition: var(--transition-fast);
}

img {
   -webkit-user-drag: none;
   -khtml-user-drag: none;
   -moz-user-drag: none;
   -o-user-drag: none;
   user-drag: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
}

a img,
button img {
   pointer-events: auto;
}

html {
   height: 100%;
}

body {
   height: 100%;
   width: 100%;
   display: grid;
   grid-template-rows: auto 1fr auto;
   background: #fff;
   color: #000;
}

.container {
   margin: 0 auto;
   margin-bottom: 80px;
   padding: 0 10px;
   width: 100%;
   max-width: 1440px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}

a,
button,
input,
textarea,
select {
   cursor: pointer;
   background: none;
}

.btn {
   position: relative;
   width: 200px;
   height: fit-content;
   padding: 20px;
   text-align: center;
   text-transform: lowercase;
   background: var(--black);
   color: var(--white);
   overflow: hidden;
}

.btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
   transition: left 0.4s ease;
}

.btn:hover {
   background: #1a1a1a;
}

.btn:hover::before {
   left: 100%;
}

.btn:active {
   background: #333;
}

header {
   padding: 20px 0;
}

header .container {
   margin-bottom: 40px;
   gap: 20px;
}

header .logos {
   width: 100%;
   height: 90px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.logos a {
   height: 100%;
}

.header_logo {
   object-fit: contain;
   width: auto;
   height: 100%;
}

a:has(.main_logo) {
   object-fit: contain;
   width: auto;
   height: 58px;
}

.home_link {
   display: none;
   font-size: 24px;
   font-weight: 600;
   text-decoration: underline;
}

nav {
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 30px 10px;
   color: var(--accent);
}

nav a {
   text-align: center;
   font-size: 24px;
   font-weight: 700;
   text-transform: uppercase;
}

nav a span {
   text-align: center;
   font-size: 24px;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
}

nav a:hover {
   color: var(--accent-hover);
}

.hero.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px 80px;
}

h2 {
   padding-bottom: 10px;
   font-size: 24px;
   text-transform: lowercase;
}

.hero_box {
   display: flex;
   flex-direction: column;
   min-width: 270px;
   width: 100%;
   max-width: 380px;
   overflow: hidden;
}

.hero_box:hover {
   transform: translateY(-4px);
}

.hero_box:active {
   transform: translateY(-1px);
}

.hero_img {
   padding: 10px;
   width: 100%;
   height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--black);
   position: relative;
   user-select: none;
   overflow: hidden;
}

.hero_img::after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0);
   transition: background var(--transition-medium);
}

.hero_box:hover .hero_img::after {
   background: rgba(255, 255, 255, 0.05);
}

.hero_img img {
   width: 100%;
   height: auto;
   max-height: 100%;
   object-fit: contain;
   transition: transform var(--transition-medium);
}

.hero_box:hover .hero_img img {
   transform: scale(1.05);
}

.hero_box p {
   padding: 10px;
   height: 110px;
   width: 100%;
   display: flex;
   align-items: center;
   line-height: 130%;
   color: var(--white);
   background: var(--accent);
   transition: background var(--transition-fast);
}

.hero_box:hover p {
   background: var(--accent-hover);
}

.service.container {
   align-items: start;
}

.service_hat {
   margin-bottom: 30px;
   padding: 15px;
   width: 100%;
   height: 160px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   background-color: var(--black);
   overflow: hidden;
}

.service_hat img {
   height: 100%;
   width: auto;
   object-fit: contain;
   transition: transform var(--transition-medium);
}

.service_hat:hover img {
   transform: scale(1.03);
}

.service_hat p {
   font-size: 24px;
   text-align: right;
   color: var(--white);
   line-height: 1.3;
}

.service_content {
   display: grid;
   grid-template-columns: minmax(auto, 400px) minmax(auto, 500px);
   gap: 30px;
}

.service_preview {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   background: var(--black);
}

.service_preview video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.circle-mask {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.3);
   border-radius: 50%;
   pointer-events: none;
}

.service_fileload {
   width: 100%;
   max-height: 100px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   text-align: center;
   background: var(--black);
   color: var(--white);
   border: 2px dashed transparent;
}

.service_fileload:hover {
   background: #1a1a1a;
   border-color: var(--accent);
}

.service_fileload:active {
   background: #333;
}

.service_fileload.dragover {
   background: var(--accent);
   border-color: var(--white);
}

.service_fileload b {
   font-size: 24px;
   font-weight: 800;
   text-transform: lowercase;
}

.service_fileload p {
   opacity: 0.7;
   transition: opacity var(--transition-fast);
}

.service_fileload:hover p {
   opacity: 1;
}

.service_settings {
   display: flex;
   flex-direction: column;
   gap: 16px;
   color: var(--accent);
}

.service_settings h6 {
   font-size: 24px;
   font-weight: 700;
   text-transform: uppercase;
}

input[type="range"] {
   width: 100%;
   height: 26px;
   appearance: none;
   -webkit-appearance: none;
   background: linear-gradient(
      to right,
      var(--accent) 0%,
      var(--accent) 50%,
      #fff 50%,
      #fff 100%
   );
   border: 1px solid var(--accent);
}

#scale {
   background: linear-gradient(
      to right,
      var(--accent) 0%,
      var(--accent) 0%,
      #fff 0%,
      #fff 100%
   );
}

input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 5px;
   height: 26px;
   cursor: pointer;
}

.range_field {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.range_header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}

.range_header label {
   font-weight: 600;
}

.range_value {
   font-weight: 700;
   font-size: 18px;
   color: var(--accent);
}

.row {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   place-items: center;
   gap: 16px 30px;
}

.row > input,
select {
   padding: 10px;
   width: 100%;
   background: none;
   border: 1px solid var(--accent);
   color: var(--accent);
}

.checkbox {
   display: flex;
   align-items: center;
}

.checkbox:hover label {
   color: var(--accent-hover);
}

option {
   color: var(--black);
   background: none;
}

input[type="checkbox"] {
   margin-right: 8px;
   position: relative;
   width: 22px;
   height: 22px;
   border: 2px solid var(--accent);
   appearance: none;
}

input[type="checkbox"]:hover {
   border-color: var(--accent-hover);
   transform: scale(1.05);
}

input[type="checkbox"]:checked {
   background-color: var(--accent);
   animation: checkBounce 0.2s ease-out;
}

input[type="checkbox"]:checked::before {
   content: "";
   position: absolute;
   top: 2px;
   left: 6px;
   width: 5px;
   height: 10px;
   border: solid var(--white);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

@keyframes checkBounce {
   0% { transform: scale(1); }
   50% { transform: scale(1.15); }
   100% { transform: scale(1); }
}

select {
   cursor: pointer;
}

select:hover {
   border-color: var(--accent-hover);
   background: rgba(30, 46, 105, 0.05);
}

select:focus {
   border-color: var(--accent);
}

.service_btns {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
}

#result {
   position: relative;
}

#result a {
   display: block;
   width: 200px;
   height: fit-content;
   padding: 20px;
   text-align: center;
   text-transform: lowercase;
   background: var(--black);
   color: var(--white);
}

#result a:hover {
   background: #1a1a1a;
}

#result a:active {
   background: #333;
}

#result div {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

#result code {
   font-weight: 800;
   font-size: 20px;
   color: var(--accent);
   cursor: pointer;
   padding: 8px 12px;
   background: rgba(30, 46, 105, 0.08);
   display: inline-block;
   position: relative;
   user-select: all;
}

#result code:hover {
   background: rgba(30, 46, 105, 0.15);
}

#result code:active {
   transform: scale(0.98);
}

#result code.copied {
   animation: copyPulse 0.4s ease-out;
}

#result code.copied::after {
   content: '✓ скопировано';
   position: absolute;
   top: -30px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--accent);
   color: var(--white);
   padding: 4px 10px;
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   animation: copyTooltip 0.4s ease-out;
}

@keyframes copyPulse {
   0% { transform: scale(1); background: rgba(30, 46, 105, 0.15); }
   50% { transform: scale(1.05); background: rgba(30, 46, 105, 0.3); }
   100% { transform: scale(1); background: rgba(30, 46, 105, 0.15); }
}

@keyframes copyTooltip {
   0% { opacity: 0; top: -20px; }
   20% { opacity: 1; top: -30px; }
   80% { opacity: 1; top: -30px; }
   100% { opacity: 0; top: -35px; }
}

.webm_logo {
   height: 80% !important;
}

footer .container {
   gap: 10px;
   align-items: start;
   margin-bottom: 80px;
}

footer p {
   font-weight: 600;
   font-size: 24px;
}

footer a {
   font-weight: 700;
   font-size: 24px;
   text-decoration: underline;
   color: var(--accent);
}

footer .logo_imgs {
   height: 80px;
   padding-top: 10px;
   display: flex;
   align-items: end;
   gap: 20px;
}

footer .logo_imgs img {
   max-height: 80px;
   object-fit: contain;
}

@media (max-width: 1000px) {
   header .logos {
      flex-direction: column;
   }
   .header_logo {
      display: none;
   }
   .main_logo {
      display: block;
   }
   .home_link {
      display: block;
   }
   .hero.container {
      grid-template-columns: repeat(2, 1fr);
   }
   .row {
      grid-template-columns: 1fr;
      place-items: start;
   }
}

@media (max-width: 900px) {
   nav {
      flex-direction: column;
   }
}

@media (max-width: 750px) {
   .service_hat {
      flex-direction: column;
      align-items: start;
      height: auto;
   }
   .hero.container {
      grid-template-columns: 1fr;
   }
   .hero_box {
      max-width: 100%;
   }
   .service.container {
      align-items: center;
   }
   .service_content,
   .service_btns {
      grid-template-columns: 1fr;
   }
   .service_btns .btn {
      width: 100%;
   }
   #result a {
      width: 100%;
   }
}

@media (max-width: 600px) {
   header {
      padding: 20px 0;
      height: auto;
   }
   header .container {
      flex-direction: column;
   }
   .main_logo {
      max-width: 100%;
   }

   .service_content,
   .service_btns {
      flex-direction: column;
   }
   .atv .service_content,
   .webm .service_content {
      width: 100%;
   }
   .service_btns .btn {
      width: 100%;
   }

   footer .logo_imgs img {
      max-width: 120px;
      width: 100%;
      object-fit: contain;
   }
   footer .logo_imgs {
      margin-bottom: 20px;
   }
}

.canvas_hint,
.hint-text {
   text-align: center;
   color: #888;
   font-size: 14px;
   margin-top: 10px;
   font-style: italic;
}

.btn.loading {
   pointer-events: none;
   opacity: 0.7;
   position: relative;
}

.btn.loading::after {
   content: '';
   position: absolute;
   width: 16px;
   height: 16px;
   top: 50%;
   right: 15px;
   margin-top: -8px;
   border: 2px solid var(--white);
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

.result-log p {
   padding: 6px 0;
   line-height: 1.4;
   transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.result-log p.fading {
   opacity: 0;
   transform: translateY(-5px);
}

.result-log p:last-child {
   font-weight: 600;
}

footer a:hover {
   color: var(--accent-hover);
}

footer .logo_imgs a {
   transition: transform var(--transition-fast), opacity var(--transition-fast);
}

footer .logo_imgs a:hover {
   transform: translateY(-3px);
   opacity: 0.9;
}

.service_preview {
   cursor: pointer;
}

.service_preview:hover .circle-mask {
   box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.2);
}

input[type="range"]:hover {
   border-color: var(--accent-hover);
}

input[type="range"]:active::-webkit-slider-thumb {
   transform: scaleY(1.2);
}

.row > input[type="text"],
.row > input[type="number"] {
   transition: all var(--transition-fast);
}

.row > input[type="text"]:hover,
.row > input[type="number"]:hover {
   border-color: var(--accent-hover);
}

.row > input[type="text"]:focus,
.row > input[type="number"]:focus {
   border-color: var(--accent);
}

@keyframes fadeIn {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
}

.service_content,
.hero.container {
   animation: fadeIn 0.4s ease-out;
}

.preset-btn {
   transition: all var(--transition-fast);
   transform: scale(1);
}

.preset-btn:hover {
   transform: scale(1.03);
   opacity: 0.9;
}

.preset-btn:active {
   transform: scale(0.97);
}