:root{--yellow:#ffd93d;--yellow-dark:#f4a92a;--yellow-light:#fff9d6;--blue-deep:#1e7fc6;--blue-mid:#4bb3e6;--white:#fffef7;--black:#1a1200;--outline:3px solid var(--black);--shadow:5px 5px 0px var(--black);--radius:18px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle,#9bdcff 0%,#4bb3e6 40%,#1e7fc6 100%);min-height:100vh;font-family:Comic Neue,cursive;overflow-x:hidden}#app{z-index:1;flex-direction:column;align-items:center;max-width:700px;min-height:100vh;margin:0 auto;padding:2.5rem 1.25rem 3.5rem;display:flex;position:relative}.app-main{flex-direction:column;align-items:center;width:100%;display:flex}.app-header{text-align:center;margin-bottom:2.75rem;animation:.65s cubic-bezier(.34,1.56,.64,1) both dropIn}.app-title{color:var(--yellow);text-shadow:3px 3px 0 var(--black), -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black), 1px 1px 0 var(--black);font-family:Fredoka One,cursive;font-size:clamp(2rem,9vw,3rem);line-height:1.05}.input-card,.preview-card{border-radius:var(--radius);border:var(--outline);width:100%;box-shadow:var(--shadow);padding:1.625rem 1.75rem}.input-card{background:var(--yellow);animation:.55s cubic-bezier(.34,1.56,.64,1) .1s both slideUp}.preview-card{background:var(--white);animation:.55s cubic-bezier(.34,1.56,.64,1) .22s both slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}.input-label{color:var(--black);letter-spacing:.4px;margin-bottom:.75rem;font-family:Fredoka One,cursive;font-size:1rem;display:block}.text-input{border:2px solid var(--black);background:var(--yellow-light);width:100%;color:var(--black);resize:vertical;border-radius:10px;outline:none;min-height:80px;padding:.875rem 1rem;font-family:Comic Neue,cursive;font-size:1.2rem;font-weight:600;transition:box-shadow .15s;box-shadow:inset 2px 2px #00000014}.text-input:focus{box-shadow:inset 2px 2px #00000014,0 0 0 3px #1e7fc659}.text-input::placeholder{color:#9a7a2e;font-weight:400}.arrow-divider{color:var(--white);text-shadow:1px 1px 0 var(--black), 2px 2px 0 var(--black), 3px 3px 0 var(--black);margin:1rem 0 1.5rem;font-size:3rem;animation:3s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(7px)}}.preview-label{letter-spacing:2px;color:var(--blue-deep);margin-bottom:.875rem;font-family:Fredoka One,cursive;font-size:.9rem}.preview-text{letter-spacing:.5px;color:var(--black);word-break:break-word;min-height:64px;font-family:Comic Neue,Comic Sans MS,cursive;font-size:clamp(1.25rem,3.5vw,1.75rem);font-weight:700;line-height:1.45}.app-footer{color:#ffffffa6;margin-top:2.25rem;font-family:Comic Neue,cursive;font-size:.85rem}@media (width<=480px){#app{padding:1.75rem 1rem 2.5rem}.input-card,.preview-card{padding:1.25rem}}