:root{--ink:#2d2723;--muted:#9d9188;--line:#e8ded5;--blue:#9b6258;--coral:#b96f60;--lime:#d8c8b2}
html,body{background:#fbf8f3;color:var(--ink)}
header{height:72px;border-color:var(--line);background:rgba(251,248,243,.9)}.brand span{background:#3a312c}.back:hover{color:var(--blue)}
main{max-width:820px;padding:72px 26px 90px}.heading{min-height:125px;border-color:#4a3e37}.heading p{margin-bottom:13px;color:#a66d61;font-size:7px}.heading h1{font-size:clamp(34px,5vw,48px);letter-spacing:-.045em}.heading>span{bottom:18px;font-size:8px}
.favorites{padding-top:7px}.favorite{grid-template-columns:58px 1fr 34px;min-height:68px;border-color:var(--line)}.favorite:hover{padding-inline:9px;background:rgba(255,253,249,.7)}.level{font-size:7px}.favorite-link{gap:13px}.favorite strong{font-size:clamp(15px,1.7vw,20px)}.favorite small{font-size:7px}.favorite button{width:27px;height:27px;border-color:var(--line);background:#fffdfa}.favorite button:hover{border-color:var(--coral);background:var(--coral)}
.empty{min-height:210px}.empty b{font-size:17px}.empty span{font-size:9px}.empty a{color:var(--blue);font-size:8px}
@media(max-width:560px){main{padding:52px 21px 70px}.heading{min-height:110px}.heading h1{font-size:34px}.favorite{grid-template-columns:36px 1fr 31px;min-height:63px}.favorite strong{font-size:16px}.favorite-link{gap:4px}}