@import 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap';:root{--rsmp-bg-color:white;--rsmp-bubble-right-color:rgb(242, 243, 246);--rsmp-content-color:black;--rsmp-faint-bg:color-mix(in hsl, var(--rsmp-bg-color) 90%, var(--rsmp-content-color));--rsmp-faint-content:color-mix(in hsl, var(--rsmp-bg-color) 12.5%, var(--rsmp-content-color));--rsmp-fainter-content:color-mix(in hsl, var(--rsmp-bg-color) 20%, var(--rsmp-content-color));--rsmp-overlay-bg:color-mix(in hsl, transparent 50%, var(--rsmp-bg-color))}@media(prefers-color-scheme:dark){:root{--rsmp-bg-color:black;--rsmp-bubble-right-color:rgb(17, 17, 17);--rsmp-content-color:white}}body{color:var(--rsmp-faint-content);font-family:space grotesk,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:400;line-height:1.5;max-width:768px;margin:1rem auto;padding:0 2.5rem 0 2.2rem;background-color:var(--rsmp-faint-bg)}header{max-width:25rem;margin:0 auto;margin-bottom:3rem;font-size:large}main{position:relative;& h2, & h3, & h4, & h5, & p { margin: .5rem 0; } & h1 { font-weight: 800; font-size: xx-large; text-align: center; } & h2 { font-size: x-large; font-weight: 700; } & h3 { font-size: large; font-weight: 600; } & section.aside { transform: translateX(100%); position: absolute; border-top: 1px solid var(--rsmp-content-color); margin-bottom: 2rem; right: -2rem; width: 20rem; margin-left: 14rem; } & blockquote { background-color: var(--rsmp-overlay-bg); padding: .8rem 1.5rem .8rem 1.25rem; position: relative; margin-bottom: 1rem; --avatar-size: 32.5px; --avatar-gap: var(--avatar-size) * 1.1; --speech-triangle: 2%; &.left-bubble, &.right-bubble { background-color: var(--rsmp-bg-color); width: 97%; &::before { content: ''; width: var(--speech-triangle); height: 100%; position: absolute; top: 0; background-color: inherit; } &::after { background-image: var(--avatar); width: var(--avatar-size); aspect-ratio: 1; position: absolute; top: 0; border-radius: 100%; background-size: cover; } &[style*='--avatar'] { width: calc(100% - var(--speech-triangle) - var(--avatar-gap)); &::after { content: ''; } } } &.left-bubble { left: 2%; &::before { clip-path: polygon(0 0, 100% 0, 100% 2rem); left: 0; transform: translateX(-100%); } &[style*='--avatar'] { left: calc(var(--speech-triangle) + var(--avatar-gap)); &::before { clip-path: polygon(25% calc(var(--avatar-size) / 2), 100% 0, 100% var(--avatar-size)); } &::after { left: calc(-1 * var(--avatar-gap) - var(--speech-triangle)); } } } &.right-bubble { background-color: var(--rsmp-bubble-right-color); &::before { clip-path: polygon(0 0, 100% 0, 0 2rem); right: 0; transform: translateX(100%); } &[style*='--avatar'] { &::before { clip-path: polygon(0 0, 75% calc(var(--avatar-size) / 2), 0 var(--avatar-size)); } &::after { right: calc(-1 * var(--avatar-size) * 1.1 - var(--speech-triangle)); } } } } & ol { list-style-type: decimal; & li { margin-left: 1rem; } } & ul:not(.terms-list) { list-style-type: circle; & li { margin-left: 1rem; } & li li { list-style: disc; } & li li li { list-style: square; } } & details { background-color: var(--rsmp-bg-color); padding: .5rem 1rem; &> summary { font-size: large; font-weight: 600; } &[open] > summary { border-bottom: 1px solid var(--rsmp-content-color);; } }}footer{border-top:1px solid var(--rsmp-faint-content);margin-top:1rem;padding-top:1rem}a{color:var(--rsmp-content-color);text-decoration:none}#articleContent a{text-decoration:underline 1px var(--rsmp-content-color)}a:hover{color:var(--rsmp-fainter-content)}img{pointer-events:none;user-select:none}header ul{display:flex;gap:2.1rem;flex-direction:row;margin:0 auto;max-width:fit-content}nav li{font-weight:500}#TableOfContents{position:sticky;top:2rem;bottom:0;transform:translateX(calc(-43rem - 2rem));height:calc(100vh - 2rem);overflow-y:auto;float:right;shape-outside:inset(50%);max-width:20rem;&> ul { &::before { content: "On this page:"; float: right; border-bottom: 1px var(--rsmp-content-color) solid; } &> li { clear: both; border-bottom: 1px dotted; } }}@media(max-width:1350px){main section.aside{transform:unset;position:relative;border-top:none;border-bottom:1px solid var(--rsmp-content-color);margin-left:unset;background-color:var(--rsmp-bg-color);padding:.5rem 2rem 1.5rem;font-size:small;right:0;width:100%}#TableOfContents{display:none}body{padding:0 1rem 0 .8rem}header ul{gap:1.2rem}}