:focus-visible{outline-color:var(--brand)}::selection,::target-text{background:var(--lightningcss-light,#000)var(--lightningcss-dark,var(--brand));color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000)}html,header,h1,h2,h3,h4,h5,h6,th{font-weight:400}html,h5,h6{line-height:2}html{--border:var(--lightningcss-light,#bbb)var(--lightningcss-dark,#777);--brand:var(--lightningcss-light,#e71d36)var(--lightningcss-dark,#fe5d72);--leading:2rem;--leading-half:1rem;--leading-half-negative:-1rem;accent-color:var(--brand);color:var(--lightningcss-light,#444)var(--lightningcss-dark,#ddd);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scrollbar-gutter:stable;text-wrap:pretty;zoom:1.1;background:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);max-width:73ch;margin:auto;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial}}body,header,details p:first-of-type,header :is(h1,ul),footer :is(p,ul),p:has(#time){margin:0}body{padding:1rem 1rem var(--leading)}header,header ul{display:flex}header,footer ul,p#status,div.note em,form+p em:only-child,th,a[href="https://j9t.gumroad.com/l/fd"] em,ul#tags :is(a[href$="/topics/accessibility/"],a[href$="/topics/ai/"],a[href$="/topics/career/"],a[href$="/topics/css/"],a[href$="/topics/design/"],a[href$="/topics/dxsrc/"],a[href$="/topics/frontend-dogma/"],a[href$="/topics/guest-posts/"],a[href$="/topics/history/"],a[href$="/topics/html/"],a[href$="/topics/javascript/"],a[href$="/topics/legal/"],a[href$="/topics/performance/"],a[href$="/topics/security/"],a[href$="/topics/sustainability/"],a[href$="/topics/testing/"],a[href$="/topics/user-experience/"]),table#entries tr:nth-child(2n) td:has(a):first-child:before{color:var(--brand)!important}header{align-items:center}header:is(:hover,:has(a:focus)) ul li:last-child a{color:var(--lightningcss-light,#222)var(--lightningcss-dark,#eee)}header nav img,main,div.note,span.extra{position:relative}header nav img{width:1em;height:1em;bottom:-2px}header h1,input,button{font-size:inherit}header h1{line-height:inherit;margin-right:.65rem}header h1 img,div.feature :is(img,a){display:block}header ul,h2[id]+ol,ul#tags{list-style:none}header ul{flex-wrap:wrap;max-width:56ch}header ul li{padding:0 .5rem}header ul li:last-child a{color:#999}:focus-visible,header a{border-bottom:0}header a:is(:focus,:hover,:active){color:var(--brand)!important}footer,p#meta,details,table#entries tr:nth-child(odd) td:last-child,:is(ul#tags,table#entries) a:visited{color:var(--lightningcss-light,#666)var(--lightningcss-dark,#bbb)}footer ul li,h2[id]+ol li,ul.nav li:not(:last-child),ul#tags li:not(:last-child){padding-right:1rem}footer{clear:both;margin-top:var(--leading)}footer ul li,h2[id]+ol li,ul.nav li,span.extra{display:inline-block}main{border-top:1px solid;margin-top:.75rem;padding-top:3px}p,blockquote,h2[id]+ol,form,table{margin:var(--leading-half) 0}p#meta,details{margin:.1rem 0 var(--leading-half)}p#meta~p img{margin:auto;display:block}p#meta~table,div.note,p:has(#time){line-height:1.75rem;font-size:.875rem}p#meta~table{-webkit-hyphens:auto;hyphens:auto;table-layout:fixed;width:100%}p#meta~table td{white-space:normal!important}sup,sub,p:has(img){line-height:1}p:has(#time){text-align:right;line-height:1.29;position:absolute;top:1px;right:0}pre,h5,h6{font-size:1rem}pre,table#entries tbody tr:nth-child(4n+1),table#entries tbody tr:nth-child(4n+2){background:var(--lightningcss-light,#f7f7f7)var(--lightningcss-dark,#141414)}pre,code,var,kbd{font-size-adjust:.45;font-family:ui-monospace,monospace}pre{white-space:pre-wrap;margin:-1px -3px;padding:1px 3px}pre+pre{margin-top:calc(1rem - 1px)}blockquote{border-left:1px solid var(--border);padding-left:calc(var(--leading-half) - 1px)}summary,label,button,input[type=submit]{cursor:pointer}div.note,div.promo,div.feature img{border:1px solid var(--border)}div.note,div.promo{border-radius:3px;padding:3px 6px}div.note,div.feature{float:right}div.note,h2,ul.nav,ul#tags,table#entries{clear:right}div.note{max-width:max(25%,140px);margin:1.25rem 0 1rem 1.25rem;top:-4px}div.note+div.note{margin-top:0}div.note em{font-style:inherit}div.promo{margin:calc(var(--leading-half) - 4px) 0}div.promo+div.promo,h2+div.feature{margin-top:var(--leading-half)}div.feature{max-width:max(20%,105px);padding:0 0 1rem 1.25rem}div.feature img{width:calc(100% - 4px);padding:1px;line-height:0}div.feature a{border:0}pre code,table#entries cite,:is(h1,h2,h3,h4,h5,h6) *{font-style:normal}h1{margin:1.5rem 0 0;font-size:1.6875rem;line-height:1.481}h2,h3,h4{margin:var(--leading) 0 0}h2,h4{line-height:1.5}h2{margin-top:2rem;font-size:1.5rem}h3{font-size:1.3125rem;line-height:1.4286}h4{font-size:1.25rem}h5,h6{margin:var(--leading) 0 var(--leading-half-negative);font-size:1.125rem;line-height:1.67}ul,ol,tr:has(td:empty) td{padding:0}ul,ol{margin:var(--leading-half) 0 var(--leading-half) var(--leading)}ul.nav{margin:var(--leading) 0}ul.nav li,table:not(#entries) td:first-child,table#entries tr:nth-child(odd) td:not(:first-child){white-space:nowrap}ul.nav li:not(:has(a+a)){color:var(--brand)}ul#tags{margin-inline:-3px;padding:0 3px}ul#tags li{float:left}ul ul{margin-block:0}main img{max-width:100%}form p label{display:inline}form+p em:only-child{overflow-wrap:anywhere}input,button{font-family:inherit}input{padding:2px}button{padding:2px 6px}table{border-collapse:collapse;border-spacing:0}table:not(#entries) :is(th,td){border-right:1px solid var(--border);padding:0 calc(var(--leading-half) - 1px)}table:not(#entries) :is(th,td):first-child{padding-left:0}table:not(#entries) :is(th,td):last-child{border-right:0;padding-right:0}table#entries :is(th,td):not(:last-child){padding-right:1ch}table#entries td:has(cite){width:100%}strong,b,table#entries td :is(a[href^=http],a[href^="/posts/"]):first-child{font-weight:600}table#entries a[href^="/topics/"]{color:inherit}th{text-align:left;vertical-align:bottom}td{vertical-align:top}a,ins{text-decoration:none}a:not(:has(img)){border-bottom:1px solid var(--border);color:var(--lightningcss-light,#222)var(--lightningcss-dark,#eee)}a:is(:focus,:hover,:active){border-color:var(--brand)}del{text-decoration-thickness:1px}code{overflow-wrap:break-word;font-size:1em!important;line-height:inherit!important}span.extra{border:1px solid #0000;border-color:currentColor #0000 #0000 currentColor;border-radius:50%;width:16px;height:16px;transition:all .5s ease-in;animation-name:loader;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;bottom:-3px}span.extra-result{border:0;width:auto;height:auto;animation:none;display:inline;position:static}div#awagam{border:1px solid var(--border);border-radius:3px;margin:0 0 1.25rem;padding:3px 6px;font-size:.875rem;line-height:1.75rem}pre,ul#tags,div#awagam{overflow:auto}div#awagam em:first-child{color:var(--brand)}div#awagam span{float:right;padding-left:1ch}@keyframes loader{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@view-transition{navigation:auto}@media screen and (max-width:550px){body{padding-top:1rem}table#entries tr:nth-child(odd) td:not(:first-child){white-space:normal}}@media screen and (max-width:460px){header ul li:last-child,header ul li:nth-child(5),div#awagam{display:none}}@media screen and (max-width:400px){header ul li:nth-child(6){display:none}}@media (prefers-color-scheme:dark){header img{filter:invert()}}@media print{*,::marker{color:#000!important;filter:none!important}header ul,footer,details,div.note,div#awagam,h2[id]+ol,ul.nav,p:has(#time){display:none}main{border:0}}