@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root { color-scheme: light; --ink:#16242c; --muted:#65747b; --line:rgba(22,36,44,.13); --paper:#eef4f6; --accent:#edb93f; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); font-family:Manrope,Arial,sans-serif; background:#d7e7f2; }
button,input { font:inherit; }
button { color:inherit; }
.shell { width:min(1180px,calc(100% - 32px)); margin:16px auto; min-height:calc(100vh - 32px); padding:0 42px; overflow:hidden; background:var(--paper); border:1px solid rgba(255,255,255,.7); border-radius:28px; box-shadow:0 24px 70px rgba(31,68,88,.15); }
.topbar { height:94px; display:grid; grid-template-columns:1fr minmax(280px,390px) 1fr; gap:24px; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.18em; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:13px; letter-spacing:0; }
.search { display:flex; align-items:center; padding:4px 6px 4px 20px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.4); }
.search:focus-within { border-color:rgba(22,36,44,.45); box-shadow:0 0 0 3px rgba(22,36,44,.06); }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }
.search button { width:38px; height:38px; border:0; border-radius:50%; background:var(--ink); color:white; cursor:pointer; }
.location { justify-self:end; padding:10px 0; border:0; border-bottom:1px solid var(--ink); background:none; font-size:12px; cursor:pointer; }
.hero { position:relative; min-height:390px; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.hero-copy { position:relative; z-index:2; padding:50px 0; }
.eyebrow { margin:0 0 7px; color:var(--muted); font-size:13px; }
h1 { margin:0; font-size:clamp(42px,6vw,82px); line-height:1; letter-spacing:-.06em; font-weight:500; }
.temperature-row { display:flex; align-items:flex-end; gap:28px; margin-top:28px; }
.temperature { font-size:clamp(70px,10vw,126px); line-height:.82; letter-spacing:-.08em; font-weight:500; }
.condition { display:flex; gap:10px; align-items:center; padding-bottom:8px; font-size:16px; }
.weather-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#f5cf68; font-size:21px; }
.feels { margin:23px 0 0; color:var(--muted); font-size:13px; }
.sun-scene { position:absolute; right:3%; top:50%; width:min(42vw,430px); height:300px; transform:translateY(-50%); }
.sun { position:absolute; right:38px; top:26px; width:205px; height:205px; border-radius:50%; background:radial-gradient(circle at 40% 38%,#ffe294 0,#f2c34e 56%,#e8ad2f 100%); box-shadow:0 0 70px rgba(239,184,54,.2); }
.cloud { position:absolute; width:230px; height:70px; border-radius:70px; background:rgba(255,255,255,.78); filter:drop-shadow(0 18px 20px rgba(76,100,111,.09)); }
.cloud:before,.cloud:after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }
.cloud:before { left:38px; width:100px; height:100px; }
.cloud:after { right:35px; width:128px; height:128px; }
.cloud-one { right:110px; bottom:42px; }
.cloud-two { right:-48px; bottom:105px; transform:scale(.68); opacity:.7; }
.details { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.details article { display:flex; flex-direction:column; gap:10px; padding:27px 24px; border-right:1px solid var(--line); }
.details article:first-child { padding-left:0; }
.details article:last-child { border:0; }
.details span { color:var(--muted); font-size:12px; }
.details strong { font-size:19px; font-weight:500; }
.forecast-section { padding:46px 0 35px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; }
h2 { margin:0; font-size:25px; font-weight:500; letter-spacing:-.03em; }
.section-heading p { margin:0; color:var(--muted); font-size:11px; }
.forecast { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.day { min-width:0; padding:20px 17px; border-right:1px solid var(--line); }
.day:last-child { border:0; }
.day-name { display:block; margin-bottom:27px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.day-icon { display:block; margin-bottom:18px; font-size:26px; }
.day-temp { display:flex; gap:7px; font-size:15px; }
.day-temp span:last-child { color:#95a0a5; }
.status { min-height:20px; margin:-20px 0 20px; color:#9b513c; font-size:12px; }
footer { display:flex; justify-content:space-between; padding:24px 0 28px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:760px) { .shell{width:100%;min-height:100vh;margin:0;padding:0 20px;border-radius:0}.topbar{height:auto;padding:20px 0;grid-template-columns:1fr auto}.search{grid-column:1/-1;grid-row:2}.location{font-size:0}.location:after{content:'Рядом';font-size:12px}.hero{min-height:420px;align-items:flex-start}.hero-copy{padding-top:48px}.sun-scene{width:260px;height:210px;right:-30px;top:65%;opacity:.78}.sun{width:145px;height:145px}.cloud{transform:scale(.7)}.details{grid-template-columns:1fr 1fr}.details article:nth-child(2){border-right:0}.details article:first-child,.details article{padding:22px 12px}.forecast{overflow-x:auto;grid-template-columns:repeat(7,118px)}.section-heading p{display:none}footer{gap:20px}.temperature-row{gap:14px}.condition{font-size:13px}}
@media (prefers-reduced-motion:no-preference){.sun{animation:float 6s ease-in-out infinite}.cloud-one{animation:drift 8s ease-in-out infinite}@keyframes float{50%{transform:translateY(-7px)}}@keyframes drift{50%{transform:translateX(10px)}}}