.about{text-align:center;background:#fff;padding:clamp(14px,2vw,44px)}.about-title{text-transform:uppercase;margin-bottom:8px;font-size:clamp(16px,2vw,24px)}.about-text{max-width:1200px;font-size:clamp(14px,2vw,20px);font-family:var(--font-inter);margin:0 auto}.main{flex:1;display:flex}.main section{width:50%}@media (max-width:1230px){.main{flex-direction:column}.main section{width:100%}}
.input{flex-direction:column;flex:1;display:flex}.input-box{justify-content:space-between;align-items:center;padding:8px;display:flex}.button-panel{gap:8px;display:flex}.textarea-box{flex:1;padding:0 10px 20px;display:flex}#input-textarea{resize:none;scrollbar-width:none;border:none;outline:none;flex:1;width:100%}.input-button{background:var(--blue);color:#fff;border-radius:4px;padding:8px}.input-button input{display:none}.input-button:hover{background:var(--blue-hover)}@media (max-width:1230px){.input{flex:0}#input-textarea{height:400px}.stats{gap:4px}}@media (max-width:540px){.input-name{display:none}}
.start{flex:1;justify-content:center;align-items:center;height:800px;display:flex}.start .input-button{margin-bottom:15px}.start-box{flex-direction:column;align-items:center;display:flex}.start-box span{margin-top:12px}.start-button{background:var(--blue);color:#fff;border-radius:8px;padding:15px;font-size:20px}.start-button:hover{background:var(--blue-hover)}.start-button input{display:none}
.output{flex-direction:column;display:flex}.output button{background:var(--blue);cursor:pointer;border:none;padding:8px}.output select{text-transform:uppercase;cursor:pointer;border:none;font-family:inherit}.output button,.output input,.output select{font-size:16px;font-family:var(--font-inter);background:var(--blue);color:var(--bg);border:none;border-radius:4px;padding:8px}.output button:hover,.output input:hover,.output select:hover{background:var(--blue-hover)}.output input{border:1px solid var(--grey-lines);background:var(--bg);color:var(--text);width:130px}.output input::placeholder{color:var(--text);font-style:italic}.output input:hover{background:0 0}.select-box{flex-direction:column;display:flex}.select-box span{text-transform:uppercase;font-size:14px;font-family:var(--font-inter)}.output .output-accept{color:#fff;background:#ff5722;justify-content:center;align-items:center;transition:all .2s;animation:1s linear infinite bounce;display:flex;position:absolute;top:-45px;left:10px}.output .output-accept:hover{background:#e64a19}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.output-content{flex:1;padding:0 10px 20px;display:flex;position:relative}.output-box{flex-wrap:wrap;align-items:center;gap:12px;padding:8px;display:flex}.output-buttons{justify-content:end;gap:8px;padding:8px;display:flex}.output-buttons .copy-btn.success{color:#fff;background:#10b981;border-color:#10b981}.output-buttons .copy-btn.success:hover{background:#10b981}.output-textarea{resize:none;border:none;outline:none;flex:1;width:100%}.output-stats{justify-content:end;align-items:center;padding:8px;display:flex}.processing-indicator{color:#6b7280;justify-content:center;align-items:center;gap:8px;height:200px;display:flex}.spinner{border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:1230px){.output{flex:0}#output{height:400px}}@media (max-width:560px){.output-stats span:first-child{display:none}}
.status-widget{z-index:1000;background:var(--red-hover);border-radius:2px;padding:8px 16px;animation:.2s ease-out slideIn;position:fixed;top:90px;left:50%;transform:translate(-50%)}.status-widget-error{color:#fff;text-transform:uppercase;height:70px;font-size:14px;font-weight:500;font-family:var(--font-inter);border-radius:4px;justify-content:space-between;align-items:center;gap:12px;display:flex}.status-widget-close{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:2px;justify-content:center;align-items:center;width:24px;height:24px;margin-left:32px;transition:all .2s;display:flex}.status-widget-close:hover{background:#ffffff4d;transform:scale(1.1)}@keyframes slideIn{0%{opacity:0;top:0}to{opacity:1;top:90px}}