:root { --teal: #32A6AB; --purple: #AE10B2; }
body { font-family: 'Inter', sans-serif; margin:0; background:#f8f9fa; }
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
header { background:white; padding:1rem; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.1); }
h1 { color:var(--teal); }
h1 span { color:var(--purple); }
.hero { background:linear-gradient(135deg, var(--teal), var(--purple)); color:white; text-align:center; padding:80px 20px; }
.section { padding:60px 0; }
label { display:block; margin:15px 0 5px; font-weight:600; }
input, textarea { width:100%; max-width:800px; padding:14px; margin-bottom:20px; border:2px solid #ddd; border-radius:8px; }
.btn { background:var(--purple); color:white; border:none; padding:16px 40px; border-radius:50px; font-size:1.2rem; cursor:pointer; }
.hidden { display:none; }
#resultContent { background:white; padding:30px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); white-space:pre-wrap; line-height:1.6; }
pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;
    padding: 20px;
    background: #f0f9f9;
    border-radius: 12px;
    line-height: 1.6;
}