@charset "UTF-8";:root{--body-bg:light-dark(hsl(0deg 0% 100%), hsl(200deg 20% 10%));--theme-color:light-dark(hsl(24deg 95% 60%), hsl(24deg 95% 60%));--complementary-color:light-dark(hsl(204deg 95% 60%), hsl(204deg 95% 60%);
  );--light-bg-color:light-dark(hsl(225deg 35% 95%), hsl(204deg 15% 15%));--text-color-normal:light-dark(hsl(220deg 15% 30%), hsl(228deg 15% 75%));--text-color-dark:light-dark(hsl(219deg 25% 20%), hsl(240deg 25% 90%));--text-color-light:light-dark(hsl(221deg 10% 40%), hsl(231deg 10% 65%));--border-color:light-dark(hsl(220deg 10% 90%), hsl(233deg 15% 25%));--link:light-dark(hsl(220deg 80% 35%), hsl(220deg 80% 75%));--white:hsl(0deg 0% 100%);--black:hsl(0deg 0% 0%);--brand:hsl(220deg 20% 25%);--error:hsl(348deg 100% 50%);--success:hsl(134deg 60% 40%);--notice:hsl(214deg 0% 47%);--warning:hsl(54deg 100% 50%);--info:hsl(214deg 100% 50%);--summary:hsl(260deg 60% 50%);--error-bg:hsla(348deg 100% 50% / 0.1);--success-bg:hsla(134deg 60% 40% / 0.1);--notice-bg:hsla(214deg 0% 47% / 0.1);--warning-bg:hsla(54deg 100% 50% / 0.1);--info-bg:hsla(214deg 100% 50% / 0.1);--summary-bg:hsla(260deg 60% 50% / 0.1);color-scheme:light dark;font-size:clamp(14px, .43vw + 12.7px, 21px);--fs-h1:clamp(2rem,1rem + 4vw,3.5rem);--fs-h2:round(1.802rem, 1px);--fs-h3:round(1.602rem, 1px);--fs-h4:round(1.424rem, 1px);--fs-h5:round(1.266rem, 1px);--fs-h6:round(1.125rem, 1px);--fs-small:round(0.889rem, 1px);--fs-xs:round(0.79rem, 1px)}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}@media (prefers-color-scheme:light){:root{color-scheme:light}}@media (prefers-color-scheme:dark){:root{color-scheme:dark}}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}body{background-color:var(--body-bg);border:0;color:var(--text-color-normal);font-family:"Google Sans","Segoe UI",system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.7;margin:0;padding:0;vertical-align:baseline;transition:color .2s,background-color .2s}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:normal;hyphens:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance;max-width:65ch}h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}h5{font-size:var(--fs-h5)}h6{font-size:var(--fs-h6)}a{border-bottom:1px solid transparent;color:var(--link);text-decoration:none}a:hover{border-color:var(--theme-color)}p{text-indent:1ch;word-break:normal;overflow-wrap:anywhere}.small,small{font-size:var(--fs-small)}.xs{font-size:var(--fs-xs)}pre{overflow:auto;padding:1em;margin:.5em 0;font-size:.694rem;font-family:"Fira Code",Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace}.code,code{background-color:var(--border-color);padding:.125em .25em;border-radius:3px;white-space:normal;overflow-wrap:break-word}.kbd,kbd{font-size:.9em;padding:.0625rem .5rem;border-radius:.125rem;border:1px solid var(--text-color-normal);box-shadow:1px 1px 0 var(--text-color-normal),2px 2px 0 var(--text-color-normal);margin:0 .25rem;color:var(--text-color-normal);font-family:monospace}blockquote{background-color:var(--light-bg-color);border-left:solid var(--border-color) 1rem;font-style:italic;margin-left:0;padding:.5rem 1rem}blockquote p{display:inline-block;margin:.5rem 0;word-break:normal;overflow-wrap:anywhere;text-indent:0}blockquote p:first-child::before{color:var(--text-color-light);content:"“";font-size:3em;line-height:.1em;margin-right:.2em;vertical-align:-.4em}blockquote p:last-child::after{color:var(--text-color-light);content:"”";font-size:3em;line-height:.1em;vertical-align:-.45em}abbr::after{content:" (" attr(title) ")"}.container{margin-inline:0.5rem}.visually-hidden{border:0;clip-path:rect(0 0 0 0);clip-path:inset(100%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@view-transition{navigation:auto}.header .container{display:flex;justify-content:flex-start;align-items:baseline}.footer{background-color:var(--light-bg-color);font-size:.875rem;margin-top:2rem;padding-top:1rem}.footer-sections{display:grid;grid-template:"f-links" "f-social" "f-tags" "f-add"/1fr}.footer-block{align-items:start;margin-bottom:.5rem}.footer-block__title{color:var(--text-color-light);font-family:"Google Sans","Segoe UI",system-ui,-apple-system,sans-serif;font-size:1rem;margin-bottom:1rem;margin-top:0}.footer-links{grid-area:f-links}.footer-social{grid-area:f-social}.footer-tags{grid-area:f-tags}.footer-add{grid-area:f-add}.footer-copyright{color:var(--text-color-light);font-size:.8rem;min-width:100%;text-align:center;padding:1rem}.footer p{text-indent:0}.footer a{color:var(--text-color-normal);transition:color .25s}.footer a:hover{color:var(--theme-color);transition:color .25s}.header-logo__text{display:block;font-weight:600;margin:1.2rem 0;padding:0 1rem}.header-logo__link{color:var(--text-color-normal)}.header-navbar{margin-left:auto;position:relative;display:flex}.header-navbar__menu{display:none}.header-navbar__label{cursor:pointer;background:var(--text-color-normal);width:20px;height:20px;margin-right:.5rem;-webkit-mask-image:url("/assets/img/menu.svg");mask-image:url("/assets/img/menu.svg");-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.header-navbar__toggle{display:none}.header-navbar__toggle:checked~.header-navbar__menu{display:flex}.header-navbar__toggle:checked~.header-navbar__label{-webkit-mask-image:url("/assets/img/menu-close.svg");mask-image:url("/assets/img/menu-close.svg");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.header-menu{display:none;background-color:var(--body-bg);flex-direction:column;list-style:none;white-space:nowrap;margin:1rem 0;padding:0 .5rem;position:absolute;right:0;z-index:999}.header-menu__item{font-size:1rem;margin:0 .5rem}.header-menu [aria-current=page] a,.header-menu__item--active a{color:var(--text-color-dark);position:relative}.header-menu [aria-current=page] a::before,.header-menu__item--active a::before{background-color:var(--theme-color);opacity:1;transform:scaleX(1);visibility:visible}.header-menu__link{padding-bottom:.2rem;color:var(--text-color-normal);line-height:2;position:relative;text-transform:capitalize}.header-menu__link::before{will-change:auto;background-color:var(--text-color-dark);bottom:0;content:"";height:2px;opacity:0;position:absolute;transform:scaleX(0);transform-origin:left;transition:all .3s;visibility:hidden;width:100%}.header-menu__link:hover{border-color:transparent;color:var(--text-color-dark)}.header-menu__link:hover::before{will-change:auto;opacity:1;transform:scaleX(1);visibility:visible}.theme-toggle{margin:0 0 0 .5rem}.theme-toggle__button{background:var(--text-color-normal);border:0 transparent;cursor:pointer;display:inline-flex;line-height:2;-webkit-mask:url("../img/dark.svg");mask:url("../img/dark.svg");-webkit-mask-size:cover;mask-size:cover;height:20px;width:20px}@media (prefers-color-scheme:dark){.theme-toggle__button{background:var(--text-color-normal);-webkit-mask:url("../img/light.svg");mask:url("../img/light.svg")}}:root[data-theme=light] .theme-toggle__button{background:var(--text-color-normal);-webkit-mask:url("../img/dark.svg");mask:url("../img/dark.svg")}:root[data-theme=dark] .theme-toggle__button{background:var(--text-color-normal);-webkit-mask:url("../img/light.svg");mask:url("../img/light.svg")}.offer{display:grid;grid-template-columns:1fr;gap:0;margin-inline:auto;padding:20px;min-height:360px;width:100%;background-position:center;background-repeat:no-repeat;background-image:url("/assets/img/offer@768.jpg");background-image:-webkit-image-set(url("/assets/img/offer@768.webp") 1x, url("/assets/img/offer@768.avif") 1x);background-image:image-set(url("/assets/img/offer@768.webp") 1x, url("/assets/img/offer@768.avif") 1x);background-size:cover;backdrop-filter:blur(10px)}.offer__text{margin:auto auto .5rem;padding:.5rem 1rem;position:relative}.offer__text::before{background-color:var(--body-bg);border-radius:1rem;content:"";background-size:cover;position:absolute;inset:0;opacity:.75}.offer__text h1{font-size:2rem;line-height:1.5}.offer__text p{text-indent:0}.offer__text *{position:relative}.articles{margin:1.5rem auto}.draft{opacity:.75}.articles-item{border-bottom:1px solid var(--border-color);padding:48px 0}.articles-item__info{color:var(--text-color-light);font-size:1rem;overflow-x:auto}.articles-item__tag{display:inline;color:inherit}.articles-item__tag:hover{color:var(--theme-color)}.articles-item__tag:not(:first-child){margin-left:.5rem}.articles-item__datetime{margin-left:.5rem}.articles-item__datetime::before{content:"/";margin-right:.5rem}.articles-item__title{font-family:"Google Sans","Segoe UI",system-ui,-apple-system,sans-serif;line-height:2.5rem;margin:1rem 0;hyphens:auto}.articles-item__title a{color:var(--text-color-dark)}.articles-item__text{color:var(--text-color-normal);hyphens:auto}.articles-item__text:hover{border-color:transparent}.article a[rel*=external]::after{content:"";width:1em;display:inline-block;aspect-ratio:1;filter:invert(50%);background:url("/assets/img/icons/external.svg") no-repeat center;margin:0 0 -3px 5px}.article>:not(.article-header) a[href*="codepen.io/"]::after{background:url("/assets/img/icons/codepen.svg") no-repeat center}.article>:not(.article-header) a[href*="facebook.com/"]::after{background:url("/assets/img/icons/facebook.svg") no-repeat center}.article>:not(.article-header) a[href*="github.com/"]::after{background:url("/assets/img/icons/github.svg") no-repeat center}.article>:not(.article-header) a[href*="github.io/"]::after{background:url("/assets/img/icons/github.svg") no-repeat center}.article>:not(.article-header) a[href*="bitbucket.org/"]::after{background:url("/assets/img/icons/bitbucket.svg") no-repeat center}.article>:not(.article-header) a[href*="gitlab.com/"]::after{background:url("/assets/img/icons/gitlab.svg") no-repeat center}.article>:not(.article-header) a[href*="developer.mozilla.org/"]::after{background:url("/assets/img/icons/mdnwebdocs.svg") no-repeat center}.article>:not(.article-header) a[href*="www.smashingmagazine.com/"]::after{background:url("/assets/img/icons/smashingmagazine.svg") no-repeat center}.article>:not(.article-header) a[href*="vimeo.com/"]::after{background:url("/assets/img/icons/vimeo.svg") no-repeat center}.article>:not(.article-header) a[href*="vk.com/"]::after{background:url("/assets/img/icons/vk.svg") no-repeat center}.article>:not(.article-header) a[href*="/symfony.com/"]::after{background:url("/assets/img/icons/symfony.svg") no-repeat center}.article>:not(.article-header) a[href*="t.me/"]::after{background:url("/assets/img/icons/telegram.svg") no-repeat center}.article>:not(.article-header) a[href*="twitch.com/"]::after{background:url("/assets/img/icons/twitch.svg") no-repeat center}.article>:not(.article-header) a[href*="twitter.com/"]::after{background:url("/assets/img/icons/twitter.svg") no-repeat center}.article>:not(.article-header) a[href*="t.co/"]::after{background:url("/assets/img/icons/twitter.svg") no-repeat center}.article>:not(.article-header) a[href*="www.youtube.com/"]::after{background:url("/assets/img/icons/youtube.svg") no-repeat center}.article>:not(.article-header) a[href*=".wikipedia.org/"]::after{background:url("/assets/img/icons/wikipedia.svg") no-repeat center}.article>:not(.article-header) a[href*="/nodejs.org/"]::after{background:url("/assets/img/icons/nodedotjs.svg") no-repeat center}.article>:not(.article-header) a[href*="/nodejs.dev/"]::after{background:url("/assets/img/icons/nodedotjs.svg") no-repeat center}.article>:not(.article-header) a[href*="/css-tricks.com/"]::after{background:url("/assets/img/icons/csstricks.svg") no-repeat center}.article>:not(.article-header) a[href*="/laravel.com/"]::after{background:url("/assets/img/icons/laravel.svg") no-repeat center}.article-header{container:dates/inline-size}.article-header__image img{max-width:100%;max-height:240px;-o-object-fit:cover;object-fit:cover}.article-header__title{background-color:transparent}.article-date{display:flex;flex-flow:row wrap;gap:.25rem .5rem;margin-block-end:0.5rem}@container dates (width < 640px){.article-date{flex-flow:column}.article-date>.separator{display:none}}.article-date>.separator,.article-modified,.article-published{color:var(--text-color-normal);font-size:var(--fs-xs);white-space:nowrap}.article-title{margin:.5rem 0;hyphens:auto}.article-tags__list{margin:0 0 .5rem;padding:0;list-style:none}.article-tags__link{display:inline}.article-tags__item{display:inline-block}.article-tags__item:not(:first-child)::before{content:"/";color:var(--text-color-normal);padding:0 .5rem}.article-source{font-size:var(--fs-small)}.article-source__link a{color:var(--text-color-normal)}.article-description{font-size:var(--fs-h6);line-height:normal;padding:0 0 0 .5rem;border-left:.5rem solid var(--border-color);margin:1rem 0}.pagination{display:flex;flex-wrap:wrap;font-size:.9rem;justify-content:space-between;margin:2rem auto 0;width:100%}.pagination svg{fill:var(--text-color-normal)}.pagination span{color:var(--text-color-light)}.pagination span svg{fill:var(--text-color-light)}.pagination .older{text-align:right}.pagination .pages{text-align:center}.pagination .newer{text-align:left}.pagination .newer svg,.pagination .older svg{height:16px;vertical-align:middle;width:16px}.pagination a{border-bottom:1px solid transparent;color:var(--text-color-normal);transition:all .3s}.pagination a:hover{color:var(--theme-color)}.pagination a:hover svg{fill:var(--theme-color)}.menu-links{list-style:none;margin:0;padding:0}.menu-links__item{margin-bottom:.875rem}.menu-tags{list-style:none;margin:0;padding:0}.menu-tags__item{display:inline-block;margin-bottom:.875rem;margin-right:1rem}.donation input[type=text]{background-color:var(--body-bg);border:1px solid var(--border-color);box-shadow:none;color:var(--text-color-normal);font-size:.875rem;height:2rem;line-height:1.5;margin-bottom:.5rem;padding:0 .5rem;width:4rem}.donation input[type=text]:focus{border-color:var(--theme-color);box-shadow:none;color:var(--text-color-normal);outline:0}.donation p.small{font-size:.7rem}.donation button[type=submit]{background-color:var(--theme-color);border:1px solid var(--theme-color);color:var(--brand);cursor:pointer;display:inline-block;font-size:.875rem;height:2rem;line-height:2rem;margin:0;padding:0 1.5rem;text-align:center;transition:color .25s ease-in-out,background-color .25s ease-in-out,border-color .25s ease-in-out,box-shadow .25s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.donation button[type=submit]:hover{background-color:var(--text-color-dark);border-color:var(--text-color-dark);color:var(--body-bg)}.donation label:not(:first-of-type){cursor:pointer;display:block;margin-bottom:.5rem}.donation input[type=radio]{margin:.2rem .5rem .2rem 0}iframe.yoomoney{border:0;background-color:transparent;overflow:hidden}.tags-list{container-type:inline-size;display:flex;flex-wrap:wrap;list-style:none;justify-content:center;gap:5px;margin:0;padding:0}.tags-list__item{display:block;background-color:var(--light-bg-color);width:16ch;padding:.5em 0}.tags-list__header{text-align:center}.tags-list__text{text-align:center;padding:2px;font-size:.8rem;color:var(--text-color-light)}@container (width < 34ch){.tags-list__item{width:100%;padding:.5em 0;text-align:center}.tags-list__header{display:inline}.tags-list__text{display:inline;padding-inline:0.5em;font-size:1rem}.tags-list__text::before{content:"("}.tags-list__text::after{content:")"}}.video{position:relative;aspect-ratio:16/9;width:min(75ch,100%);margin-inline:auto;margin-bottom:1rem}.video iframe{border:0;position:absolute;top:0;left:0;width:100%;height:100%}@media only screen and (471px <= width <= 749px){.footer-sections{grid-template:"f-links f-social" "f-tags  f-tags" "f-add f-add"/1fr 1fr}}@media only screen and (width >= 750px){.header-navbar__menu{position:relative;flex-direction:row}.header-navbar__label{display:none}.header-navbar__toggle{display:none}.header-navbar__toggle~.header-navbar__menu{display:flex}.pagination .newer a::after{content:" Новые статьи"}.pagination .newer span::after{content:" Новые статьи"}.pagination .older a::before{content:"Старые статьи "}.pagination .older span::before{content:"Старые статьи "}.footer{margin-top:5rem;padding-top:3rem}}@media only screen and (750px <= width <= 1024px){.offer{grid-template-columns:2fr 1fr}.footer-sections{grid-template:"f-links f-social f-add" "f-tags  f-tags f-tags"/1fr 1fr 1fr}}@media only screen and (1025px <= width){.container{margin-inline:4rem}.offer{grid-template-columns:1fr 1fr}.footer-sections{grid-template:"f-links f-social f-tags f-add"/1fr 1fr 2fr 1fr}}@media only screen and (1810px <= width){.container{width:1640px;margin-inline:auto}.offer{min-height:520px}}.ya-share2{margin:1.5rem 0}.ya-share2__link:hover{border-color:transparent}baseline-status{margin-inline:auto}.bluesky-embed{margin-inline:auto}aside[role=note],aside[role=notice]{border-radius:.5rem;color:inherit;background-color:var(--notice-bg);padding:.5rem 1rem;margin-block:0.5rem;border:solid 1px light-dark(hsl(from var(--border-color) h s 30),hsl(from var(--border-color) h s 70))}aside[role=note].notice,aside[role=notice].notice{background-color:var(--notice-bg);border-color:light-dark(hsl(from var(--notice-bg) h s 30),hsl(from var(--notice-bg) h s 70));border-left:round(.25rem,1px) solid var(--notice-bg)}aside[role=note].success,aside[role=notice].success{background-color:var(--success-bg);border-color:light-dark(hsl(from var(--success-bg) h s 30),hsl(from var(--success-bg) h s 70));border-left:round(.25rem,1px) solid var(--success-bg)}aside[role=note].info,aside[role=notice].info{background-color:var(--info-bg);border-color:light-dark(hsl(from var(--info-bg) h s 30),hsl(from var(--info-bg) h s 70));border-left:round(.25rem,1px) solid var(--info-bg)}aside[role=note].warning,aside[role=notice].warning{background-color:var(--warning-bg);border-color:light-dark(hsl(from var(--warning-bg) h s 30),hsl(from var(--warning-bg) h s 70));border-left:round(.25rem,1px) solid var(--warning-bg)}aside[role=note].error,aside[role=notice].error{background-color:var(--error-bg);border-color:light-dark(hsl(from var(--error-bg) h s 30),hsl(from var(--error-bg) h s 70));border-left:round(.25rem,1px) solid var(--error-bg)}aside[role=note].summary,aside[role=notice].summary{background-color:var(--summary-bg);border-color:light-dark(hsl(from var(--summary-bg) h s 30),hsl(from var(--summary-bg) h s 70));border-left:round(.25rem,1px) solid var(--summary-bg)}[data-color]{color:attr(data-color type(<color>))}.breadcrumbs{flex:auto}.breadcrumbs ol{container-type:inline-size;container-name:crumbs;margin-block:0;padding-inline-start:0;font-size:var(--fs-xs)}.breadcrumbs ol li{display:inline-block;list-style-type:none;margin-inline:0}.breadcrumbs ol li:not(:last-child)::after{margin-inline:0.2rem;color:color-mix(in srgb,var(--text-color-light),transparent 40%);content:"/"}.breadcrumbs ol [aria-current=page]{color:var(--theme-color)}@container crumbs (width < 60ch){.breadcrumbs li:last-child{display:list-item}}.codepen-resizable{overflow:hidden;resize:both;background:var(--bg-color);padding-bottom:10px}.codepen-resizable iframe{height:100%!important}.article img{max-width:100%}.article img.light-bg{background-color:#fff}.article figure{margin:0;inline-size:-moz-fit-content;inline-size:fit-content;margin-inline:auto}.article figcaption{contain:inline-size;margin-block-start:0.5em;display:flex;font-size:.9em;font-style:italic;margin-inline:auto}.article figcaption::before{content:url("/assets/img/icons/image.svg");height:1em;min-width:1.5em;padding-right:.6em;vertical-align:baseline;position:relative;top:.05em}.article figcaption.fullwidth{width:100%}.article figcaption.center{text-align:center}.article mark{color:inherit;background-color:var(--notice-bg)}.article a{color:var(--link);display:inline;border-bottom-width:0;text-decoration:underline;text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}.article a:not(:is(:hover,:focus)){text-decoration-color:color-mix(in srgb,currentcolor,transparent 80%)}.article a:hover{color:var(--theme-color)}.article :is(h2,h3,h4,h5,h6):has(a[aria-hidden=true]){position:relative}.article :is(h2,h3,h4,h5,h6):has(a[aria-hidden=true]) a[aria-hidden=true]{position:absolute;right:100%;top:0}.article :is(h2,h3,h4){margin:1.5em 0 .5em}.article li p{margin-block:0}.article div.columns{-moz-columns:auto 35ch;columns:auto 35ch}.article div.columns ol,.article div.columns ul{margin-block:0}.article div.columns[data-column-width]{-moz-columns:auto attr(data-column-width type(<length>),28ch);columns:auto attr(data-column-width type(<length>),28ch)}.article details{padding:.2rem .5rem 0;border:1px solid var(--light-bg-color)}.article details summary{cursor:pointer;font-weight:400;background-color:var(--light-bg-color);margin:-.2rem -.5rem 0;padding:.5rem}.article-more{background:var(--light-bg-color);border-radius:.2rem;margin-top:2rem;padding:.5rem}.article-more :is(h2,h3){margin:0}.article-more h3{font-size:1.2rem;margin:0}.article-nav{display:flex;flex-wrap:wrap;justify-content:space-between}.article-nav_prev{text-align:left}.article-nav_next{text-align:left}.hscroll{overflow-x:auto}table{border-collapse:collapse;white-space:nowrap;margin-inline:auto}th{background-color:var(--light-bg-color)}td,th{padding:.2em .5em;font-size:.85rem;text-wrap:balance;white-space:normal}td.center,th.center{text-align:center}td.text-left,th.text-left{text-align:left}td.text-center,th.text-center{text-align:center}td.text-right,th.text-right{text-align:right}td.align-left,th.align-left{text-align:left}td.align-center,th.align-center{text-align:center}td.align-right,th.align-right{text-align:right}td.align-start,th.align-start{text-align:start}td.align-end,th.align-end{text-align:end}tr{border-bottom:1px solid var(--border-color)}tr:hover>td{background-color:var(--light-bg-color);opacity:.9}