.converter {display: flex;flex-wrap: wrap;justify-content: center;max-width: 1140px;margin: 20px auto;padding: 0 10px;gap: 20px;font-size: 16px;}.draw_block {width: 160px;}.img_block {width: 480px;}.type_block {width: 220px;}@media (max-width: 768px) {.img_block {width: 100%;max-width: 500px;}}.shape_row {display: flex;align-items: center;margin: 13px 0 0 0;}.shape_row p {display: flex;justify-content: center;align-items: center;width: 24px;margin: 0 15px 0 0;}.shape_row p.unchecked {color: #AF212E;font-weight: bold;}.shape_row label {display: flex;justify-content: center;align-items: center;margin: 0 15px 0 0;}.shape_row .circle {width: 40px;height: 40px;border-radius: 50%;background-color: #999;cursor: pointer;transition: background-color 0.3s;}.shape_row .triangle {width: 0;height: 0;border-left: 22px solid transparent;border-right: 22px solid transparent;border-bottom: calc(22px * 1.732) solid #999;cursor: pointer;transition: border-bottom-color 0.3s;position: relative;}.shape_row input[type="radio"] {display: none;}input[type="radio"]:checked + .circle {background-color: #333;}input[type="radio"]:checked + .triangle {border-bottom-color: #333;}.svg_container {width: 100%;height: auto;border: 1px solid #e2e2e2;background-color: #f9f9f9;border-radius: 3px;transform: rotate(180deg);}.dark-mode-toggle {text-align: center;margin: 20px 0;}.dark-mode-toggle label {padding: 12px 10px;cursor: pointer;}#mySVG {width: 100%;height: 100%;display: block;padding: 20px;}#mySVG circle.matrix, #mySVG polygon.matrix {stroke: #e9e9e9;stroke-width: 1;fill: none;}#mySVG circle.active, #mySVG polygon.active {stroke: #000;stroke-width: 3;fill: none;filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.9));transition: all 0.3s ease;}#mySVG.dark-mode circle.matrix, #mySVG.dark-mode polygon.matrix {stroke: #333;stroke-width: 1;fill: none;}#mySVG.dark-mode {background-color: black;}#mySVG.dark-mode circle.active, #mySVG.dark-mode polygon.active {stroke: white;filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.9));}#mySVG.hide-matrix circle.matrix, #mySVG.hide-matrix polygon.matrix {stroke: none;}.type_block {display: flex;flex-direction: column;justify-content: space-between;}.type_block_selector {margin: 10px 0 0 0;position: relative;}.type_block input {width: 100%;padding: 10px 14px;margin: 0 0 10px 0;font-weight: bold;font-size: 16px;border-radius: 3px;border: 2px solid #999;}.type_block input:focus {border: 2px solid #AF212E;}.type_block input::placeholder {font-weight: normal;font-size: 15px;color: #777;}#characterName {font-weight: bold;}.buttons {display: flex;margin: 0 0 60px 0;}.button_2 {min-width: 100px;padding: 16px 22px;font-size: 16px;border: none;cursor: pointer;color: #fff;background-color: #000;border-radius: 3px;transition: all 0.4s ease;}.button_2:hover {background-color: #555;}.notification {color: #AF212E;display: none;font-size: 14px;}.notification.visible {display: inline-block;}