:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#0f172a;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f3f7ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.6}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:#f3f7ff;margin:0}button,input{font:inherit}img{max-width:100%;display:block}p{margin:0}h1,h2,p{color:#0f172a}button{cursor:pointer}.app-shell{background:radial-gradient(circle at top,#bde6ffb3,#0000 32%),linear-gradient(#f8fbff 0%,#fff 100%);min-height:100vh;padding:2rem 1rem 3rem}.app-container{flex-direction:column;gap:1.75rem;width:min(100%,900px);margin:0 auto;display:flex}.hero-section{background:#ffffffeb;border:1px solid #94a3b82e;border-radius:28px;gap:1.5rem;padding:2rem 2.25rem;display:grid;box-shadow:0 24px 70px #94a3b81f}.hero-copy{text-align:left;max-width:560px}.eyebrow{color:#2563eb;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.85rem;font-size:.85rem;font-weight:700;display:inline-block}.hero-section h1{color:#0f172a;margin:0;font-size:clamp(2.5rem,3.5vw,4rem);line-height:1.02}.hero-text{color:#475569;max-width:34rem;margin:.85rem 0 0;font-size:1rem;line-height:1.85}.search-bar{flex-wrap:wrap;align-items:center;gap:.85rem;display:flex}.search-input{color:#0f172a;background:#f8fbff;border:1px solid #dbeafe;border-radius:18px;flex:1;min-width:220px;padding:1rem 1.25rem;font-size:1rem;box-shadow:inset 0 1px 2px #0f172a14}.search-input:focus{outline-offset:2px;outline:2px solid #93c5fd}.search-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4f46e5,#2563eb);border:none;border-radius:18px;padding:1rem 1.6rem;font-weight:700;transition:transform .2s,box-shadow .2s}.search-button:hover{transform:translateY(-1px);box-shadow:0 18px 30px #2563eb38}.weather-card{background:#fffffff5;border:1px solid #94a3b82e;border-radius:32px;gap:1.5rem;padding:2rem;display:grid;box-shadow:0 30px 65px #94a3b81f}.weather-card__header{align-items:center;gap:1.25rem;display:flex}.weather-card__icon{background:#eef6ff;border-radius:24px;width:96px;height:96px;padding:1rem;box-shadow:inset 0 0 0 1px #2563eb1f}.weather-location{color:#0f172a;margin:0;font-size:1.85rem;font-weight:700}.weather-description{color:#475569;text-transform:capitalize;margin:.45rem 0 0;font-size:1rem}.weather-card__body{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;display:flex}.weather-temp{color:#0f172a;margin:0;font-size:clamp(3.25rem,5vw,4.5rem);font-weight:800}.weather-metrics{flex-wrap:wrap;gap:1rem;display:flex}.metric-item{background:#f8fbff;border:1px solid #dbeafe;border-radius:20px;min-width:140px;padding:1rem 1.2rem}.metric-item span{color:#64748b;margin-bottom:.4rem;font-size:.95rem;display:block}.metric-item strong{color:#0f172a;font-size:1.15rem;display:block}.message{border:1px solid #0000;border-radius:22px;padding:1rem 1.25rem;font-weight:600}.message.error{color:#b91c1c;background:#fef2f2;border-color:#fecaca}@media (width<=768px){.app-shell{padding:1.5rem .85rem 2.5rem}.hero-section{padding:1.6rem 1.4rem}.search-bar{flex-direction:column;align-items:stretch}.weather-card__body{align-items:flex-start}.weather-card__icon{width:78px;height:78px}}