.t1lr8xu9.t1lr8xu9 { font-size: var(--overline-font-size, var(--default-font-size)); line-height: var(--overline-line-height, var(--default-line-height)); letter-spacing: var(--overline-letter-spacing, var(--default-letter-spacing)); font-weight: var(--overline-font-weight, var(--default-font-weight)); font-style: var(--overline-font-style, var(--default-font-style)); text-transform: var(--overline-text-transform, var(--default-text-transform)); font-family: var(--overline-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--overline-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--overline-icon-size, var(--default-icon-size)); }
.t1sjj4ks.t1sjj4ks { display: flex; gap: 16px; flex-flow: row; }
.tbvu0jz.tbvu0jz { align-items: center; }
.tlglgzs.tlglgzs { view-transition-name: meta-why-i-spent-years-trying-to-make-css-states-predictable; }
.t1wknrh6.t1wknrh6 { color: var(--text-color); --current-color: var(--text-color); }
.tzsugfa.tzsugfa { font-size: var(--h1-font-size, var(--default-font-size)); line-height: var(--h1-line-height, var(--default-line-height)); letter-spacing: var(--h1-letter-spacing, var(--default-letter-spacing)); font-weight: var(--h1-font-weight, var(--default-font-weight)); font-style: var(--h1-font-style, var(--default-font-style)); text-transform: var(--h1-text-transform, var(--default-text-transform)); font-family: var(--h1-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--h1-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--h1-icon-size, var(--default-icon-size)); }
.t17g6cl3.t17g6cl3 { margin: 0; }
.t1ytf10j.t1ytf10j { view-transition-name: title-why-i-spent-years-trying-to-make-css-states-predictable; }
.te7si7q.te7si7q { font-size: var(--prose-font-size, var(--default-font-size)); line-height: var(--prose-line-height, var(--default-line-height)); letter-spacing: var(--prose-letter-spacing, var(--default-letter-spacing)); font-weight: var(--prose-font-weight, var(--default-font-weight)); font-style: var(--prose-font-style, var(--default-font-style)); text-transform: var(--prose-text-transform, var(--default-text-transform)); font-family: var(--prose-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--prose-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--prose-icon-size, var(--default-icon-size)); }
.t18quqf7.t18quqf7 { width: 100%; min-width: initial; max-width: var(--prose-width); }
.to80q2q.to80q2q { display: flex; flex-flow: column; }
.t1usn9ym.t1usn9ym a { color: var(--accent-text-color); --current-color: var(--accent-text-color); }
.t1usn9ym.t1usn9ym a:where(:not(:hover)) { text-decoration: none; }
.t1usn9ym.t1usn9ym blockquote:where(:not(:last-child)) { margin: 0 0 20px 0; }
.t1usn9ym.t1usn9ym blockquote { padding: 0 0 0 16px; border-top: 0 solid var(--border-color); border-right: 0 solid var(--border-color); border-bottom: 0 solid var(--border-color); border-left: 3px solid var(--border-color); font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; font-style: italic; text-transform: inherit; font-family: inherit; --bold-font-weight: inherit; --icon-size: inherit; color: var(--text-soft-color); --current-color: var(--text-soft-color); }
.t1usn9ym.t1usn9ym p > code { font-size: var(--code-font-size, var(--default-font-size)); line-height: var(--code-line-height, var(--default-line-height)); letter-spacing: var(--code-letter-spacing, var(--default-letter-spacing)); font-weight: var(--code-font-weight, var(--default-font-weight)); font-style: var(--code-font-style, var(--default-font-style)); text-transform: var(--code-text-transform, var(--default-text-transform)); font-family: var(--code-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--code-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--code-icon-size, var(--default-icon-size)); background-color: var(--surface-color); padding: 0.15em 0.4em; border: 1px solid var(--border-color); border-radius: 6px; }
.t1usn9ym.t1usn9ym li > code { font-size: var(--code-font-size, var(--default-font-size)); line-height: var(--code-line-height, var(--default-line-height)); letter-spacing: var(--code-letter-spacing, var(--default-letter-spacing)); font-weight: var(--code-font-weight, var(--default-font-weight)); font-style: var(--code-font-style, var(--default-font-style)); text-transform: var(--code-text-transform, var(--default-text-transform)); font-family: var(--code-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--code-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--code-icon-size, var(--default-icon-size)); background-color: var(--surface-color); padding: 0.15em 0.4em; border: 1px solid var(--border-color); border-radius: 6px; }
.t1usn9ym.t1usn9ym details { border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 16px; }
.t1usn9ym.t1usn9ym details:where(:not(:last-child)) { margin: 0 0 20px 0; }
.t1usn9ym.t1usn9ym h2 { font-size: var(--h2-font-size, var(--default-font-size)); line-height: var(--h2-line-height, var(--default-line-height)); letter-spacing: var(--h2-letter-spacing, var(--default-letter-spacing)); font-weight: var(--h2-font-weight, var(--default-font-weight)); font-style: var(--h2-font-style, var(--default-font-style)); text-transform: var(--h2-text-transform, var(--default-text-transform)); font-family: var(--h2-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--h2-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--h2-icon-size, var(--default-icon-size)); color: var(--text-color); --current-color: var(--text-color); }
.t1usn9ym.t1usn9ym h2:where(:not(:first-child):not(:last-child)) { margin: 40px 0 16px 0; }
.t1usn9ym.t1usn9ym h3 { font-size: var(--h3-font-size, var(--default-font-size)); line-height: var(--h3-line-height, var(--default-line-height)); letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing)); font-weight: var(--h3-font-weight, var(--default-font-weight)); font-style: var(--h3-font-style, var(--default-font-style)); text-transform: var(--h3-text-transform, var(--default-text-transform)); font-family: var(--h3-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--h3-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--h3-icon-size, var(--default-icon-size)); color: var(--text-color); --current-color: var(--text-color); }
.t1usn9ym.t1usn9ym h3:where(:not(:first-child):not(:last-child)) { margin: 32px 0 12px 0; }
.t1usn9ym.t1usn9ym hr { border: 1px none var(--border-color); height: 1px; min-height: initial; max-height: initial; background-color: var(--border-color); }
.t1usn9ym.t1usn9ym hr:where(:not(:first-child):not(:last-child)) { margin: 24px 0; }
.t1usn9ym.t1usn9ym li { margin: 0 0 8px 0; }
.t1usn9ym.t1usn9ym ol:where(:not(:last-child)) { margin: 0 0 20px 0; }
.t1usn9ym.t1usn9ym ol { padding: 0 0 0 24px; }
.t1usn9ym.t1usn9ym p:where(:not(:last-child)), .t1usn9ym.t1usn9ym p:where(:is(summary + *):last-child) { margin: 0 0 20px 0; }
.t1usn9ym.t1usn9ym pre { background-color: var(--syntax-bg-color); color: var(--syntax-text-color); --current-color: var(--syntax-text-color); padding: 8px 16px; border-radius: 14px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color, transparent); font-size: var(--code-font-size, var(--default-font-size)); line-height: var(--code-line-height, var(--default-line-height)); letter-spacing: var(--code-letter-spacing, var(--default-letter-spacing)); font-weight: var(--code-font-weight, var(--default-font-weight)); font-style: var(--code-font-style, var(--default-font-style)); text-transform: var(--code-text-transform, var(--default-text-transform)); font-family: var(--code-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--code-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--code-icon-size, var(--default-icon-size)); border: 1px solid var(--border-color); }
.t1usn9ym.t1usn9ym pre:where(:not(:last-child)) { margin: 0 0 20px 0; }
.t1usn9ym.t1usn9ym pre code { background-color: transparent; padding: 0; white-space: pre; }
.t1usn9ym.t1usn9ym img:not([src$=".svg"]) { width: auto; min-width: initial; max-width: 100%; height: auto; min-height: initial; max-height: initial; margin: 0 auto; border: 1px solid var(--border-color); border-radius: 6px; }
.t1usn9ym.t1usn9ym summary { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: var(--bold-font-weight); font-style: inherit; text-transform: inherit; font-family: inherit; --bold-font-weight: inherit; --icon-size: inherit; cursor: pointer; color: var(--accent-text-color); --current-color: var(--accent-text-color); list-style-type: none; display: flex; gap: 8px; flex-flow: row; align-items: center; align-content: center; }
.t1usn9ym.t1usn9ym summary::before { content: ""; display: inline-block; width: .4em; min-width: initial; max-width: initial; height: .4em; min-height: initial; max-height: initial; border-top: 2px solid var(--accent-text-color); border-right: 2px solid var(--accent-text-color); border-bottom: 0 solid var(--accent-text-color); border-left: 0 solid var(--accent-text-color); transform: rotate(45deg); transition: transform .2s, translate .2s; flex-shrink: 0; }
.t1usn9ym.t1usn9ym details[open] > summary::before { transform: rotate(135deg); }
.t1usn9ym.t1usn9ym summary::marker { display: none; }
.t1usn9ym.t1usn9ym summary::-webkit-details-marker { display: none; }
.t1usn9ym.t1usn9ym table { width: 100%; min-width: initial; max-width: initial; border-collapse: collapse; font-size: var(--code-font-size, var(--default-font-size)); line-height: var(--code-line-height, var(--default-line-height)); letter-spacing: var(--code-letter-spacing, var(--default-letter-spacing)); font-weight: var(--code-font-weight, var(--default-font-weight)); font-style: var(--code-font-style, var(--default-font-style)); text-transform: var(--code-text-transform, var(--default-text-transform)); font-family: var(--code-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--code-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--code-icon-size, var(--default-icon-size)); }
.t1usn9ym.t1usn9ym table:where(:not(:last-child)) { margin: 0 0 20px 0; }
.t1usn9ym.t1usn9ym td { padding: 8px 16px; border-top: 0 solid var(--border-color); border-right: 0 solid var(--border-color); border-bottom: 1px solid var(--border-color); border-left: 0 solid var(--border-color); }
.t1usn9ym.t1usn9ym th { text-align: left; padding: 8px 16px; border-top: 0 solid var(--border-color); border-right: 0 solid var(--border-color); border-bottom: 2px solid var(--border-color); border-left: 0 solid var(--border-color); font-size: var(--code-font-size, var(--default-font-size)); line-height: var(--code-line-height, var(--default-line-height)); letter-spacing: var(--code-letter-spacing, var(--default-letter-spacing)); font-weight: var(--bold-font-weight); font-style: var(--code-font-style, var(--default-font-style)); text-transform: var(--code-text-transform, var(--default-text-transform)); font-family: var(--code-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--code-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--code-icon-size, var(--default-icon-size)); }
.t1usn9ym.t1usn9ym ul:where(:not(:last-child)) { margin: 0 0 20px 0; }
.t1usn9ym.t1usn9ym ul { padding: 0 0 0 24px; }
.t1usn9ym.t1usn9ym a:where(:hover) { text-decoration: underline; }
.t1usn9ym.t1usn9ym blockquote:where(:last-child) { margin: 0; }
.t1usn9ym.t1usn9ym details:where(:last-child) { margin: 0; }
.t1usn9ym.t1usn9ym h2:where(:not(:last-child):first-child) { margin: 0 0 16px 0; }
.t1usn9ym.t1usn9ym h3:where(:not(:last-child):first-child) { margin: 0 0 12px 0; }
.t1usn9ym.t1usn9ym hr:where(:not(:last-child):first-child) { margin: 0 0 24px 0; }
.t1usn9ym.t1usn9ym ol:where(:last-child) { margin: 0; }
.t1usn9ym.t1usn9ym p:where(:not(:is(summary + *)):last-child) { margin: 0; }
.t1usn9ym.t1usn9ym pre:where(:last-child) { margin: 0; }
.t1usn9ym.t1usn9ym table:where(:last-child) { margin: 0; }
.t1usn9ym.t1usn9ym ul:where(:last-child) { margin: 0; }
.t1usn9ym.t1usn9ym h2:where(:last-child) { margin: 40px 0 0 0; }
.t1usn9ym.t1usn9ym h3:where(:last-child) { margin: 32px 0 0 0; }
.t1usn9ym.t1usn9ym hr:where(:last-child) { margin: 24px 0 0 0; }
.te9ir09.te9ir09:where(:not(:hover)) { color: var(--accent-text-color); --current-color: var(--accent-text-color); }
.te9ir09.te9ir09:where(:hover) { color: var(--accent-text-2-color); --current-color: var(--accent-text-2-color); }
.t89upu9.t89upu9 { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: var(--bold-font-weight); font-style: inherit; text-transform: inherit; font-family: inherit; --bold-font-weight: inherit; --icon-size: inherit; }
.t89upu9.t89upu9:where(:not(:hover)) { text-decoration: none; }
.t89upu9.t89upu9:where(:hover) { text-decoration: underline; }
.t28coft.t28coft { transition: color 0.15s; }
.t1hoyhgl.t1hoyhgl { border-top: 1px solid var(--border-color); border-right: 0 solid var(--border-color); border-bottom: 0 solid var(--border-color); border-left: 0 solid var(--border-color); }
.t15kn00r.t15kn00r { padding: 24px 0; }
.tub2dae.tub2dae { display: flex; gap: 16px; flex-flow: row wrap; }
.tf73b9v.tf73b9v [data-element="Follow"] { position: relative; --glass-edge-color: var(--glass-fill-color); background-color: var(--glass-fill-color); background-image: linear-gradient(oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h), oklch(from var(--glass-fill-color) l c h / 0) 35%, oklch(from var(--glass-fill-color) l c h / 0) 65%, oklch(from var(--glass-fill-color) calc(l - var(--glass-fill-shade)) c h)); box-shadow:  0 0 1.5px var(--glass-fill-color); white-space: nowrap; display: flex; gap: 6px; flex-flow: row; align-items: center; font-size: var(--label-font-size, var(--default-font-size)); line-height: var(--label-line-height, var(--default-line-height)); letter-spacing: var(--label-letter-spacing, var(--default-letter-spacing)); font-weight: var(--label-font-weight, var(--default-font-weight)); font-style: var(--label-font-style, var(--default-font-style)); text-transform: var(--label-text-transform, var(--default-text-transform)); font-family: var(--label-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--label-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--label-icon-size, var(--default-icon-size)); padding: 6px 12px; border-radius: 9999rem; color: var(--accent-surface-text-color); --current-color: var(--accent-surface-text-color); text-decoration: none; transition: --glass-fill-color 0.15s, transform 0.15s ease-out, scale 0.15s ease-out; }
.tf73b9v.tf73b9v [data-element="Follow"]:where(:not(:hover)) { --glass-fill-color: var(--accent-surface-color); }
@media (prefers-reduced-motion: reduce) { .tf73b9v.tf73b9v [data-element="Follow"] { scale: 1; } }
@media (not (prefers-reduced-motion: reduce)) { .tf73b9v.tf73b9v [data-element="Follow"]:where(:not(:active)) { scale: 1; } }
.tf73b9v.tf73b9v [data-element="Follow"]::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background-image: linear-gradient(oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h), oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 35%, oklch(from var(--glass-edge-color) calc(l - var(--glass-edge-shade)) c h) 65%, oklch(from var(--glass-edge-color) calc(l + var(--glass-edge-lift)) c h)); mask: linear-gradient(white, white) content-box exclude, linear-gradient(white, white); }
.tf73b9v.tf73b9v [data-element="Spacer"] { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }
.tf73b9v.tf73b9v [data-element="Stat"] { display: flex; gap: 6px; flex-flow: row; align-items: center; font-size: var(--t3-font-size, var(--default-font-size)); line-height: var(--t3-line-height, var(--default-line-height)); letter-spacing: var(--t3-letter-spacing, var(--default-letter-spacing)); font-weight: var(--t3-font-weight, var(--default-font-weight)); font-style: var(--t3-font-style, var(--default-font-style)); text-transform: var(--t3-text-transform, var(--default-text-transform)); font-family: var(--t3-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--t3-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--t3-icon-size, var(--default-icon-size)); text-decoration: none; transition: color 0.15s; }
.tf73b9v.tf73b9v [data-element="Stat"]:where(:not(:hover)) { color: var(--text-soft-color); --current-color: var(--text-soft-color); }
.tf73b9v.tf73b9v [data-element="Follow"]:where(:hover) { --glass-fill-color: var(--accent-surface-hover-color); }
@media (not (prefers-reduced-motion: reduce)) { .tf73b9v.tf73b9v [data-element="Follow"]:where(:active) { scale: 1.04; } }
.tf73b9v.tf73b9v [data-element="Stat"]:where(:hover) { color: var(--accent-text-color); --current-color: var(--accent-text-color); }
.tnp3pxf.tnp3pxf { display: flex; gap: 24px; flex-flow: column; }
.t7e6a5r.t7e6a5r [data-element="Empty"] { font-size: var(--t3-font-size, var(--default-font-size)); line-height: var(--t3-line-height, var(--default-line-height)); letter-spacing: var(--t3-letter-spacing, var(--default-letter-spacing)); font-weight: var(--t3-font-weight, var(--default-font-weight)); font-style: var(--t3-font-style, var(--default-font-style)); text-transform: var(--t3-text-transform, var(--default-text-transform)); font-family: var(--t3-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--t3-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--t3-icon-size, var(--default-icon-size)); color: var(--text-soft-color); --current-color: var(--text-soft-color); margin: 0; }
.t7e6a5r.t7e6a5r [data-element="Header"] { display: flex; gap: 8px; flex-flow: row wrap; align-items: baseline; justify-content: space-between; }
.t7e6a5r.t7e6a5r [data-element="List"] { display: flex; gap: 16px; flex-flow: column; padding: 0; margin: 0; list-style: none; }
.t7e6a5r.t7e6a5r [data-element="ReplyLink"] { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: var(--bold-font-weight); font-style: inherit; text-transform: inherit; font-family: inherit; --bold-font-weight: inherit; --icon-size: inherit; transition: color 0.15s; }
.t7e6a5r.t7e6a5r:where(:not(:hover)) [data-element="ReplyLink"] { color: var(--accent-text-color); --current-color: var(--accent-text-color); text-decoration: none; }
.t7e6a5r.t7e6a5r [data-element="Title"] { font-size: var(--h3-font-size, var(--default-font-size)); line-height: var(--h3-line-height, var(--default-line-height)); letter-spacing: var(--h3-letter-spacing, var(--default-letter-spacing)); font-weight: var(--h3-font-weight, var(--default-font-weight)); font-style: var(--h3-font-style, var(--default-font-style)); text-transform: var(--h3-text-transform, var(--default-text-transform)); font-family: var(--h3-font-family, var(--default-font-family, var(--font-sans, var(--font-sans-fallback)))), var(--font-sans, var(--font-sans-fallback)); --bold-font-weight: var(--h3-bold-font-weight, var(--default-bold-font-weight)); --icon-size: var(--h3-icon-size, var(--default-icon-size)); color: var(--text-color); --current-color: var(--text-color); margin: 0; }
.t7e6a5r.t7e6a5r:where(:hover) [data-element="ReplyLink"] { color: var(--accent-text-2-color); --current-color: var(--accent-text-2-color); text-decoration: underline; }
.tjomj72.tjomj72 { padding: 48px 0 0 0; }
.t4zuqji.t4zuqji { justify-items: space-between; justify-content: space-between; align-items: center; }
.tnp3qro.tnp3qro { display: flex; gap: 32px; flex-flow: column; }
.tub2cg5.tub2cg5 { display: flex; gap: 8px; flex-flow: row wrap; }
.tn05p3k.tn05p3k { view-transition-name: tags-why-i-spent-years-trying-to-make-css-states-predictable; }
.tnp3p36.tnp3p36 { display: flex; gap: 16px; flex-flow: column; }
.tl9260c.tl9260c { padding: 32px 0 64px 0; }
.tsp75s8.tsp75s8 { display: flex; gap: 0; flex-flow: column; }