:root{color-scheme:light dark;--light-background-panel:white;--dark-background-panel:var(--color-slate-950);--light-background-page:var(--color-slate-100);--dark-background-page:var(--color-slate-900);--light-foreground-primary:var(--color-slate-900);--dark-foreground-primary:var(--color-slate-100);--background-panel:light-dark(var(--light-background-panel),var(--dark-background-panel));--background-page:light-dark(var(--light-background-page),var(--dark-background-page));--foreground-primary:light-dark(var(--light-foreground-primary),var(--dark-foreground-primary));--foreground-secondary:light-dark(var(--color-slate-500),var(--color-slate-400));--foreground-tertiary:light-dark(var(--color-slate-400),var(--color-slate-600));--foreground-quaternary:light-dark(var(--color-slate-300),var(--color-slate-700));--foreground-accent:var(--color-sky-500);--error-background:light-dark(color-mix(in oklab,var(--color-red-600)10%,var(--background-panel)),oklch(7.8% .092 26.042));--error-foreground:var(--color-red-700);--error-border:var(--color-red-500);--focus-ring:light-dark(color-mix(in oklab,var(--color-sky-500)40%,transparent),color-mix(in oklab,var(--color-sky-400)40%,transparent));--focus-ring-error:light-dark(color-mix(in oklab,var(--color-red-500)40%,transparent),color-mix(in oklab,var(--color-red-400)40%,transparent));--color-shadow:light-dark(color-mix(in oklab,var(--color-slate-900)10%,transparent),oklab(0% none none/.3));--shadow-hover:0 10px 15px -3px var(--color-shadow),0 4px 6px -4px var(--color-shadow);--font-normal:"Roboto","Noto Sans",Arial,sans-serif;--font-heading:"Roboto Slab","Roboto","Noto Sans",Arial,sans-serif;--font-monospace:"Berkeley Mono","Roboto Mono",monospace;--duration-very-fast:75ms;--duration-fast:.15s;--duration-medium:.3s;--header-height:3rem;--user-panel-width:200px;--page-width:800px;--rounding:4px;--padding-right:calc((100dvh - var(--page-width))/2);--border-color:light-dark(var(--color-slate-300),var(--color-slate-700));--border:1px solid var(--border-color)}body{font-family:var(--font-normal);background-color:var(--background-page);color:var(--foreground-primary);max-width:100dvw;min-height:100dvh;margin-top:calc(var(--header-height) + 20px);flex-direction:column;display:flex;overflow-x:hidden;&>*{max-width:var(--page-width);margin:0 auto}&:has(#sitewide-banner){padding-bottom:2.5rem}}@media (width<=616px){:root{--page-width:calc(100dvw - 2rem)}body,header{padding:0 1rem}}a:focus-visible,a.button:focus-visible,button:focus-visible{outline:2px solid var(--focus-ring);border-radius:var(--rounding)}header{height:var(--header-height);background-color:var(--background-page);box-shadow:0 20px 25px -5px var(--background-page);z-index:100;max-width:initial;flex-direction:row;justify-content:center;align-items:center;margin:0;display:flex;position:fixed;top:0;left:0;right:0;& .inner{width:var(--page-width);isolation:isolate;justify-content:space-between;align-items:center;display:flex}& .left,& .right{align-items:center;display:flex}& .left{gap:.5rem;& a.breadcrumb{text-overflow:ellipsis;white-space:nowrap;max-width:60vw;overflow:hidden;&:hover{text-decoration:underline}}}& .right{justify-content:right}& .separator{user-select:none;color:var(--foreground-secondary)}& a#logomark{font-family:var(--font-heading);color:inherit;align-items:center;text-decoration:none;display:flex;& svg{height:1.25rem;margin-right:.5rem}& span{display:none;@media (width>=600px){display:inline}}}}img.pfp{width:var(--size);height:var(--size);border-radius:100%;&.small{--size:1.25rem;width:var(--size);height:var(--size)}&.medium{--size:1.75rem;width:var(--size);height:var(--size)}&.large{--size:3.5rem;width:var(--size);height:var(--size)}}#icon-store{display:none}svg.icon{width:1.25rem;height:1.25rem;color:var(--foreground-secondary)}#safety-triangle{--height:3rem;--pfp-width:1.75rem;--width:calc(var(--user-panel-width));right:calc(-1*var(--height));width:var(--width);height:var(--height);clip-path:polygon(0 var(--height),var(--width)var(--height),var(--width)0,calc(var(--width) - var(--pfp-width))0);user-select:none;display:inline-flex;position:relative}#current-user{cursor:pointer;z-index:100}.user-panel{top:calc(var(--header-height));border-radius:var(--rounding);border:var(--border);background-color:var(--background-panel);width:200px;box-shadow:0 4px 6px -1px var(--color-shadow),0 2px 4px -2px var(--color-shadow);z-index:1000;visibility:hidden;opacity:0;--curve:cubic-bezier(.3,0,.8,.15);transition:opacity var(--duration-fast)var(--curve),visibility var(--duration-fast)var(--curve),transform var(--duration-fast)var(--curve);padding:.325rem;font-size:.9rem;position:fixed;transform:scale(.8)translateY(-20px)translate(20px);&.active{visibility:visible;opacity:1;transform:scale(1)translateY(0)translate(0)}& .user-card{border-bottom:var(--border);flex-direction:row;gap:.5rem;padding:.325rem .5rem .5rem;display:flex;& .pfp-container{justify-content:center;align-items:center;display:flex}& .user-info{flex-direction:column;justify-content:center;gap:.25rem;display:flex;& .display-name{font-weight:700}}}& ul{flex-direction:column;margin-top:.25rem;display:flex;& a{border-radius:var(--rounding);transition:background-color var(--duration-very-fast)var(--curve);flex-direction:row;align-items:center;padding:.325rem .5rem;display:flex;&:hover{background-color:var(--background-page)}& svg.icon{margin-right:.5rem;position:relative;top:-1px}}}}@starting-style{.user-panel{opacity:0}}main{width:var(--page-width);flex:1;& h1{font-family:var(--font-heading);margin-bottom:1rem;font-size:2rem}& h2{font-family:var(--font-heading);margin-top:2rem;margin-bottom:1rem;font-size:1.5rem}& p:not(:last-child){margin-bottom:1rem}& p{max-width:70ch;line-height:1.5}& a{color:var(--foreground-primary);text-decoration:underline}& ul{margin-top:0;margin-bottom:1rem;padding-left:1.5rem;& li{margin-bottom:.5rem;list-style:outside}}}#sitewide-banner{text-align:center;z-index:9999;padding:.5rem;font-size:.9rem;font-weight:600;position:fixed;bottom:0;left:0;right:0;&.error{background-color:var(--error-background);color:var(--error-foreground);border-bottom:1px solid var(--error-border)}}a.button,form.default button[type=submit]{font-family:var(--font-heading);border-radius:var(--rounding);background-color:var(--foreground-primary);color:var(--background-page);cursor:pointer;transition:background-color var(--duration-fast)cubic-bezier(.3,0,.8,.15);border:none;padding:.75rem;font-size:.875rem;text-decoration:none;&.secondary{border:1px solid var(--foreground-primary);color:var(--foreground-primary);background-color:#0000;&:hover{background-color:color-mix(in oklab,var(--foreground-primary)10%,transparent)}}&:not(.icon):hover{background-color:var(--foreground-secondary)}}a.button{margin-bottom:.5rem;display:inline-block}a.button-secondary,form.default button[type=reset],button.clear{font-family:var(--font-heading);border-radius:var(--rounding);color:var(--foreground-primary);background-color:#0000;background-color:light-dark(--background-panel);border:none;border:1px solid var(--foreground-primary);cursor:pointer;transition:background-color var(--duration-fast)cubic-bezier(.3,0,.8,.15);padding:.75rem;font-size:1rem;text-decoration:none;&:hover{background-color:color-mix(in oklab,var(--foreground-primary)10%,transparent)}}.badge{flex-direction:row;align-items:center;gap:.375rem;text-decoration:none;display:inline-flex}.display-name.gendered{color:var(--color);font-weight:600}footer{width:var(--page-width);margin-top:3rem;margin-bottom:3rem;& ul.sections{flex-direction:row;gap:1rem;padding:0;list-style:none;display:flex;& li h2{font-weight:600;font-family:var(--font-heading);margin-bottom:.5rem}& a{color:var(--foreground-secondary);margin-top:.5rem;&:hover{color:var(--foreground-primary);text-decoration:underline}}}& ul.last,& ul.socials{flex-direction:row;gap:1rem;margin-top:1rem;padding:0;font-size:.9rem;list-style:none;display:flex;& li{margin-bottom:0}& a{color:var(--foreground-secondary);&:hover{color:var(--foreground-primary);text-decoration:underline}}}& ul.socials{margin-top:2rem;& li a{flex-direction:row;align-items:center;gap:.25rem;display:flex;& .bluesky{width:1.125rem;height:1.125rem;margin-right:.125rem}}}}:is(.language-card,.translatable-card) .likes{position:relative;top:-.325rem}.likes{color:var(--foreground-secondary);cursor:pointer;flex-direction:column;justify-content:flex-start;align-items:center;margin-right:.25rem;font-size:.875rem;display:flex;& svg{transition:transform var(--duration-fast)ease-in-out}& .when-liked{transition:color var(--duration-very-fast)ease-in-out;display:none}& .like-count{font-family:var(--font-monospace)}&.liked{& svg{animation-name:like;animation-duration:.4s}& .when-liked{color:var(--color-amber-400);display:inline}& .when-unliked{display:none}}}@keyframes like{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.card{background-color:var(--background-panel);border:var(--border);border-radius:var(--rounding);margin-bottom:1rem;padding:1rem;&:has(.header-with-actions:first-child){padding-top:0}&:has(.contributors) .header-with-actions{margin-bottom:0}& .contributors{margin-bottom:.5rem}&:first-child{margin-top:1rem}& h2{margin-top:0}& div.actions{flex-direction:row;gap:.5rem;margin-bottom:.5rem;display:flex;& a.button,& button{margin-bottom:0}}}.preview-card{& a{color:inherit;border:var(--border);border-radius:var(--rounding);background-color:var(--background-panel);transition:border-color var(--duration-very-fast)ease-in-out,box-shadow var(--duration-very-fast)ease-in-out;flex-direction:row;align-items:center;gap:.5rem;padding:1rem;text-decoration:none;display:flex;&:hover{border-color:var(--foreground-secondary)}}& .left{flex-direction:column;flex-grow:1;justify-content:space-between;gap:.5rem;display:flex;& .title{color:var(--foreground-primary);font-weight:600}& .summary{color:var(--foreground-secondary);font-size:.875rem;&.empty-description{font-style:italic}}}& .actions{align-items:center;gap:.5rem;display:flex}& .creator{color:var(--foreground-secondary);flex-direction:row;align-items:center;gap:.25rem;font-size:.875rem;display:flex}& ul.contributor-list{flex-direction:row;margin:0;padding:0;display:flex;& li{list-style:none}}& li.compressed-pfps{margin-bottom:0;&:not(:first-child){margin-left:-8px;position:relative;&:before{content:" ";background-color:var(--background-panel);border-radius:100%;width:22px;height:22px;display:inline-block;position:absolute;top:-.5px;left:-12px}}&:first-child{z-index:5}&:nth-child(2){z-index:4}&:nth-child(3){z-index:3}&:nth-child(4){z-index:2}&:nth-child(5){z-index:1}}}ul.card-list{margin:0;padding:0;list-style:none;& li{list-style:none}}.contributors{color:var(--foreground-secondary);flex-direction:row;align-items:center;gap:.25rem;display:flex}.empty-description{color:var(--foreground-secondary);font-style:italic}.card>.header-with-actions:first-child:has(.icons){margin-top:.5rem}main>:is(.header-with-actions,h1,h2){--side-spacing:.125rem;padding-left:var(--side-spacing);padding-right:var(--side-spacing)}.header-with-actions{flex-direction:row;justify-content:space-between;align-items:center;margin:1rem 0;display:flex;& .with-subtitle{flex-direction:column;gap:.25rem;display:flex}& h1,& h2{margin:0;line-height:1.5rem}&:has(ul.icons){align-items:flex-start;& h1,& h2{line-height:initial;margin-top:.125rem}}& ul{flex-direction:row;align-items:end;gap:.5rem;padding:0;display:flex}& ul.icons{align-items:flex-start}& ul:not(.icons){& li{flex-direction:row;align-items:center;display:inline-flex}& li:not(:last-child):after{content:"·";user-select:none;pointer-events:none;color:var(--foreground-secondary);margin-left:.5rem}& a{color:var(--foreground-secondary);transition:color var(--duration-very-fast)ease-in-out;text-decoration:none;&:hover{color:var(--foreground-primary);text-decoration:underline}}}& ul,& li{margin:0;list-style:none}}a.icon.button,button.icon,.icon-button-container{cursor:pointer;min-width:32px;min-height:32px;color:var(--foreground-secondary);transition:background-color var(--duration-very-fast)ease-in-out,color var(--duration-very-fast)ease-in-out;background-color:#0000;border:1px solid #0000;border-radius:100%;flex-direction:column;justify-content:center;align-items:center;padding:.75rem;font-size:.875rem;display:inline-flex;& svg{width:24px;height:24px;color:inherit}&.yellow:hover{background-color:color-mix(in oklab,var(--color-amber-400)10%,transparent 90%);color:var(--color-amber-400)}&.gray:hover{background-color:color-mix(in oklab,var(--foreground-secondary)10%,transparent 90%);color:var(--foreground-secondary)}}.ellipse{text-overflow:ellipsis;white-space:nowrap;max-width:calc(var(--page-width) - 8rem);overflow:hidden}a.with-icon,button.with-icon{color:var(--foreground-secondary);cursor:pointer;flex-direction:row;align-items:center;gap:.25rem;display:inline-flex;& svg.icon{z-index:0;position:relative;top:.5px}&:hover{color:var(--foreground-primary);text-decoration:underline}&:hover svg.icon{color:var(--foreground-primary)}@media (width<=500px){& svg.icon{display:none}}}.pagination{color:var(--foreground-secondary);flex-direction:column;display:flex;& .pages,& .meta{flex-direction:row;justify-content:center;align-items:center;gap:.5rem;display:flex}& .meta{font-size:.875rem}& .empty-pagination-button{text-align:center;user-select:none;width:32px;height:32px;line-height:32px;display:inline-block}}.context-cards{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.context-card{flex-direction:column;flex:1;gap:.5rem;display:flex}.context-label,label.small{text-transform:uppercase;letter-spacing:.05em;color:var(--foreground-secondary);font-size:.75rem;font-weight:600}.context-card-link{border:var(--border);border-radius:var(--rounding);background-color:var(--background-panel);transition:border-color var(--duration-very-fast)ease-in-out;flex-direction:column;gap:.5rem;padding:1rem;text-decoration:none;display:flex;&a:hover{border-color:var(--foreground-secondary)}}.context-title{color:var(--foreground-primary);font-weight:600}.context-text{color:var(--foreground-secondary);line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:.875rem;display:-webkit-box;overflow:hidden}.context-card .language-summary{color:var(--foreground-secondary);font-size:.875rem}.standalone-card{margin:0;padding:0;list-style:none;& li{margin:0;list-style:none}}code{font-family:var(--font-monospace)}.back-link{color:var(--foreground-secondary);transition:color var(--duration-very-fast)ease-in-out;flex-direction:row;align-items:center;gap:.25rem;margin-bottom:1.75rem;text-decoration:none;display:inline-flex;& svg.icon{transition:color var(--duration-very-fast)ease-in-out;position:relative;top:.5px}&:hover{color:var(--foreground-primary);text-decoration:underline;& svg.icon{color:var(--foreground-primary)}}}.first-interaction-card{margin-top:2rem}