@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";:root{--primary-blue:#2f67ff;--light-blue:#86bbfd;--deep-navy:#082b5f;--mint-green:#7fe2cb;--soft-lavender:#cdb7ff;--warm-yellow:#ffd23f;--coral-pink:#ff6f7d;--cream-bg:#fffdf8;--white:#fff;--light-gray:#f1f3f5;--muted-gray:#6b7280;--border-gray:#e5e7eb;--shadow-sm:0 4px 14px #082b5f14;--shadow-md:0 10px 28px #082b5f1f;--radius-sm:12px;--radius-md:18px;--radius-lg:24px;--transition:all .24s ease;--uib-size:35px;--uib-color:var(--coral-pink);--uib-speed:1s;--uib-stroke:3px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--deep-navy);background:radial-gradient(circle at 12% 6%, #cdb7ff61 0%, #cdb7ff00 40%), radial-gradient(circle at 88% 14%, #7fe2cb57 0%, #7fe2cb00 40%), var(--cream-bg);padding:16px;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}h1,h2,h3,p{margin:0}a{color:var(--primary-blue);transition:var(--transition);font-weight:700;text-decoration:none}a:hover{color:#1f4fda;text-decoration:underline}button{border-radius:var(--radius-sm);font:inherit;cursor:pointer;transition:var(--transition);border:none;padding:.78rem 1.15rem;font-weight:800}button:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--soft-lavender);outline-offset:2px}label{color:var(--deep-navy);margin-bottom:.45rem;font-weight:700;display:inline-block}textarea,select{border:1px solid var(--border-gray);border-radius:var(--radius-sm);background-color:var(--white);width:100%;color:var(--deep-navy);font:inherit;transition:var(--transition);padding:.8rem .9rem}textarea::placeholder{color:var(--muted-gray)}textarea:hover,select:hover{border-color:#c7cbd1}textarea:focus,select:focus{border-color:var(--primary-blue);box-shadow:0 0 0 4px #2f67ff24}.welcome-screen,.container{background:var(--white);border:1px solid var(--border-gray);border-radius:var(--radius-lg);width:min(100%,960px);box-shadow:var(--shadow-md);margin:clamp(16px,5vw,42px) auto}.welcome-screen{text-align:center;gap:1.2rem;padding:clamp(1.4rem,4.3vw,3rem);display:grid}.image-text-container{border-radius:var(--radius-md);border:1px solid var(--border-gray);background:linear-gradient(160deg,#2f67ff0f,#7fe2cb2e);place-items:center;min-height:220px;padding:.8rem;display:grid;position:relative}.logo-image{cursor:pointer;filter:drop-shadow(0 6px 14px #082b5f29);-webkit-user-select:none;-webkit-user-drag:none;width:clamp(21px,15vw,85px);height:auto;margin:5rem}.spanish-hello,.english-hello,.japanese-hello,.french-hello{background:var(--light-gray);border:1px solid var(--border-gray);width:fit-content;box-shadow:var(--shadow-sm);border-radius:999px;margin:auto;padding:.35rem .7rem;font-weight:800;position:relative}.spanish-hello{color:var(--deep-navy);background-color:var(--warm-yellow);top:12%;left:30%}.english-hello{color:var(--deep-navy);background-color:var(--coral-pink);top:14%;right:30%}.japanese-hello{color:var(--deep-navy);background-color:var(--soft-lavender);bottom:12%;left:32%}.french-hello{color:var(--deep-navy);background-color:var(--mint-green);bottom:11%;right:32%}.logo-text{letter-spacing:.02em;font-size:clamp(2rem,6vw,3rem);line-height:1.1}.body-text{color:var(--muted-gray);font-size:clamp(1rem,2.7vw,1.25rem)}.welcome-screen button{background:linear-gradient(135deg, var(--primary-blue), #5888ff);min-width:180px;color:var(--white);box-shadow:var(--shadow-sm);justify-self:center}.welcome-screen button:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.welcome-screen button:active{filter:brightness(.97);transform:translateY(0)}.container{gap:1rem;padding:clamp(1rem,3.5vw,2rem);display:grid}.heading{font-size:clamp(1.5rem,4.3vw,2.35rem);font-weight:900;line-height:1.18}.message-group{gap:.6rem;display:grid}.scroll-box{border:1px solid var(--border-gray);border-radius:var(--radius-sm);width:100%;height:200px;color:var(--deep-navy);box-shadow:var(--shadow-sm);font:inherit;transition:var(--transition);background:linear-gradient(160deg,#2f67ff0f,#7fe2cb2e);padding:.8rem .9rem;overflow:auto}.home{min-height:2.75rem;color:var(--deep-navy);border-radius:var(--radius-md);border:1px solid var(--border-gray);box-shadow:var(--shadow-sm);background:linear-gradient(155deg,#7fe2cb61,#cdb7ff4d);padding:.85rem 1rem}.home:hover{background:linear-gradient(155deg,#7fe2cb6b,#cdb7ff5e);transform:translateY(-1.5px)}.user-message,.translation-message{border-radius:var(--radius-md);border:1px solid var(--border-gray);box-shadow:var(--shadow-sm);padding:.85rem 1rem}.user-message{background:var(--light-gray);color:var(--deep-navy);align-self:end;margin-top:.6rem;margin-left:auto}.translation-message{color:var(--deep-navy);background:linear-gradient(155deg,#7fe2cb61,#cdb7ff4d);align-self:end;min-height:2.75rem;margin-right:auto}form{border:1px solid var(--border-gray);border-radius:var(--radius-md);background:#fcfcff;gap:.9rem;padding:clamp(.95rem,3vw,1.3rem);display:grid}.main-button{background:var(--primary-blue);color:var(--white);width:fit-content;min-width:150px}.main-button:hover{background:#2555dc;transform:translateY(-1px)}.main-button:active{transform:translateY(0)}.motion-parent{width:100%}.hello{cursor:pointer}.error-message{color:#9b2130;border-radius:var(--radius-sm);background:#ff6f7d1f;border:1px solid #ff6f7d59;padding:.75rem .9rem}.loader-container{width:var(--uib-size);height:calc(var(--uib-size) * .9);justify-content:space-between;align-items:center;display:flex}.bar{width:var(--uib-stroke);background-color:var(--uib-color);height:100%;transition:background-color .3s}.bar:first-child{animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.45) infinite}.bar:nth-child(2){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.3) infinite}.bar:nth-child(3){animation:grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -.15) infinite}.bar:nth-child(4){animation:grow var(--uib-speed) ease-in-out infinite}@keyframes grow{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@media (width>=768px){.container{gap:1.2rem}form{grid-template-columns:1fr 220px;align-items:end;gap:1rem}.input-text{grid-column:1/-1}.main-button{grid-column:2;justify-self:end}}@media (width<=600px){body{padding:10px}.spanish-hello,.english-hello,.chinese-hello,.french-hello{padding:.3rem .55rem;font-size:.82rem}.welcome-screen,.container{border-radius:var(--radius-md)}.main-button,.welcome-screen button{width:100%}}