*{padding: 0; margin: 0; }
*, *::before, *::after {
    box-sizing: border-box;
}
body{
	color: white;
	background-color: #0f0f0f;
	font-family: "IBM Plex Mono";
	font-size: 23px !important;
}
.selectionp{
	font-size: 17px;margin-top: 13px; width: 87%;
}
a{
	color: white;
}

#main-content{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background: linear-gradient(36deg,rgba(173, 44, 35, 1) 0%, rgba(15, 15, 15, 1) 100%);
	margin-top: 50px;
	margin-bottom: 20px;
	padding: 70px 50px;
	width: 92%;
	border-radius: 20px;
	animation: float 0.7s linear;
}

@keyframes float {
  0% {
   transform: translateY(-15px);
   opacity: 80%;
   }
   100% { transform: translateY(0px); }
}

#label{
	margin-top: 20px;
	font-size: 55px;
	font-family: "WDXL Lubrifont JP N";
	display: block;
}

#label > span:nth-child(2) {
	color: #DA1E10;
	font-style: italic;
	font-weight: bold;
}
#label > span:nth-child(3) {
	font-size: 20px;
	font-weight: bold;
	display: block;
	letter-spacing: 2px;
}
#left-part{
	width: 40%;
}

#lp-label{
	font-weight: 600;
	font-size: 55px !important;
	font-family: "WDXL Lubrifont JP N";
	font-size: 45px;
	margin: 0px 0px 35px 0px;
}

#selection{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 80px;
	margin-top: 35px;

}

.tpui{
	background-color: rgba(0, 0, 0, 0);
	border: 1px solid;
	border-color: #fafafa;
	border-radius: 14px;
	color: #efefef;
	font-size: 22px;
	font-family: "IBM Plex Mono";
}
textarea.tpui {
    width: 87%;
    height: 85px; /* <--- ADDED: Give it a fixed height if not already */
    padding: 10px 15px; /* <--- EDITED: More balanced padding (as previously suggested) */
    resize: none;
    
    white-space: nowrap;  /* <--- CRUCIAL: Prevents text from wrapping */
    overflow-x: auto;     /* <--- CRUCIAL: Enables horizontal scrollbar */
    overflow-y: hidden;   /* <--- CRUCIAL: Hides the vertical scrollbar */
    word-break: normal;   /* <--- EDITED: Reset to normal so nowrap works as intended */

    line-height: 63px;

}
/* Custom Scrollbar Styling for Webkit Browsers (Chrome, Edge, Safari) */
textarea::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* CORRECTED: This rule should be separate, not nested */
textarea::-webkit-scrollbar-button {
    display: none !important; /* <--- This is now a standalone rule */
}

textarea::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    border: 1px solid transparent;
}

textarea::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}
#svgshka{
	visibility: hidden;
}

#mamuebal{
	font-size: 15px;
	position: fixed;
	bottom: 25px;
	transform: translateX(-50%);
	left: 50%;
	font-weight: lighter;

}
button.tpui{
	cursor: pointer;
	width: 11%;
	background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>');
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: center;
	color: rgba(0, 0, 0, 0);
	font-size: 0px;
}

button.tpui:hover{
	background-color: rgba(255, 255, 255, 0.15);
}
button.tpui:active{
	background-color: rgba(255, 255, 255, 0.3);
}

#right-part{
	width: 50%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:20px;
}
.features {
	padding: 20px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid;
	border-color: white;
	border-radius: 20px;
	font-size: 17px;
}

.list-ps {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
}

.svgs {
	margin: 0 auto;
	margin-left: 5%;
	background-size: 30px;
	fill: white;
	background-repeat: no-repeat;
	background-position: center;
	width: 40px;
	height: 40px;
	border: 1px solid;
	border-color: white;
	padding: 40px;
	border-radius: 100px;
}

#svg1 {
	/*Lock*/
	background-size: 30px;
	background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/></svg>');
}

#svg3 {
	/*Xfinity*/
	background-size: 34px;
	background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M0 241.1C0 161 65 96 145.1 96c38.5 0 75.4 15.3 102.6 42.5L320 210.7l72.2-72.2C419.5 111.3 456.4 96 494.9 96C575 96 640 161 640 241.1l0 29.7C640 351 575 416 494.9 416c-38.5 0-75.4-15.3-102.6-42.5L320 301.3l-72.2 72.2C220.5 400.7 183.6 416 145.1 416C65 416 0 351 0 270.9l0-29.7zM274.7 256l-72.2-72.2c-15.2-15.2-35.9-23.8-57.4-23.8C100.3 160 64 196.3 64 241.1l0 29.7c0 44.8 36.3 81.1 81.1 81.1c21.5 0 42.2-8.5 57.4-23.8L274.7 256zm90.5 0l72.2 72.2c15.2 15.2 35.9 23.8 57.4 23.8c44.8 0 81.1-36.3 81.1-81.1l0-29.7c0-44.8-36.3-81.1-81.1-81.1c-21.5 0-42.2 8.5-57.4 23.8L365.3 256z"/></svg>');
}

#svg2 {
	/*Lightning*/
	background-size: 31px;
	background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z"/></svg>');
}

#svg4 {
	/*Free*/
	background-size: 32px;
	background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M190.5 68.8L225.3 128l-1.3 0-72 0c-22.1 0-40-17.9-40-40s17.9-40 40-40l2.2 0c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40L32 128c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32l448 0c17.7 0 32-14.3 32-32l0-64c0-17.7-14.3-32-32-32l-41.6 0c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88l-2.2 0c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0L152 0C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40l-72 0-1.3 0 34.8-59.2C329.1 55.9 342.9 48 357.8 48l2.2 0c22.1 0 40 17.9 40 40zM32 288l0 176c0 26.5 21.5 48 48 48l144 0 0-224L32 288zM288 512l144 0c26.5 0 48-21.5 48-48l0-176-192 0 0 224z"/></svg>');
}

.features-right{
	display: flex;
	flex-direction: column;
	width: 75%;
	padding: 0% 5%;
}

.inputs:focus {
  outline: none;
  box-shadow: none;
}
