*,*::before,*::after{box-sizing:border-box}html,body,h1,h2,h3,h4,h5,h6,p,ul,ol{margin:0;padding:0}ul,ol{list-style:none}img{display:block;max-width:100%}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root{--color-primary:#fcb614;--color-slate:#222222;--color-slate-light:#6d6d6d;--color-slate-lightest:#d3d3d3;--color-eggshell:#f9f9f9;--color-code-bg:#e5e7eb;--color-code-text:#f97316;--font-sans:'Noto Sans HK', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
    sans-serif;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px}@font-face{font-family:noto sans hk;src:url(/fonts/noto-sans-hk-var.woff2)format('woff2');font-weight:100 900;font-style:normal;font-display:optional}html{color:var(--color-slate)}body{font-family:var(--font-sans);background:var(--color-eggshell)}a{color:inherit;text-decoration:none}p a{text-decoration:underline;text-underline-offset:4px;transition:color 150ms ease}p a:hover{color:#4b5563}.page-shell{max-width:90rem;margin-inline:auto;display:flex;flex-direction:column;justify-content:space-between;padding:8rem 1rem}@media(min-width:768px){.page-shell{padding-inline:3rem}}@media(min-width:1024px){.page-shell{padding-inline:15rem}}.hero{display:flex;flex-direction:column;gap:3rem;padding-top:2rem}@media(min-width:768px){.hero{padding-top:6rem}}.hero h1{font-size:4rem;font-weight:900;padding-bottom:3rem;line-height:1.05}@media(min-width:768px){.hero h1{font-size:5rem}}.hero p{max-width:48rem;font-size:1.125rem;line-height:2rem}.home-sections{display:flex;flex-direction:column;gap:7rem;padding-top:7rem}.collection-header{display:flex;justify-content:space-between;padding-bottom:2rem}.collection-header h2{font-size:1.875rem;font-weight:900;transition:opacity 150ms ease}.collection-header a:hover h2{opacity:.7}.card-list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}.card-list>li{flex:1;min-width:150px}.card-list--work>li:last-child{display:block}@media(min-width:768px) and (max-width:1023.98px){.card-list--work>li:last-child{display:none}}@media(min-width:1024px){.card-list--feature{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.card-list--feature>li:first-child{grid-column:span 2/span 2;grid-row:span 2/span 2}}.article-card{display:flex;flex-direction:column;gap:1rem;min-width:150px;container-type:inline-size}.article-card__image-link{display:block;transition:opacity 150ms ease}.article-card__image-link:hover{opacity:.7}.article-card img{border-radius:.125rem;width:100%;height:auto}.article-card__title-link{display:block;transition:opacity 150ms ease}.article-card__title-link:hover{opacity:.7}.article-card__title{font-size:1.125rem;font-weight:700}@container(min-width:24rem){.article-card__title {
    font-size: 1.5rem;
  }
}@media(min-width:768px){.article-card__title{font-size:1.25rem}}.article-card__extra{display:none}@container(min-width:24rem){.article-card__extra {
    display: block;
  }
}.article-card__snippet{line-height:2rem;margin-bottom:1rem}.breadcrumbs{display:flex;gap:2rem;font-size:1.125rem}.breadcrumbs a{transition:opacity 150ms ease}.breadcrumbs a:hover{opacity:.7}.link-button{display:inline-flex;align-items:center;gap:.5rem;transition:opacity 150ms ease}.link-button:hover{opacity:.7}.link-button svg{width:1.1em;height:1.1em;margin-top:2px;transition:transform 150ms ease}.link-button:hover svg{transform:translateX(.25rem)}.index-view{display:flex;flex-direction:column;gap:3rem;padding-top:1.5rem}.index-view h1{font-size:3rem;font-weight:900;padding-bottom:3rem}@media(min-width:768px){.index-view h1{font-size:5rem}}.article-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}.article-grid>li{flex:1;min-width:220px}@media(min-width:768px){.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(150px,(100% - 3rem)/4),1fr));gap:1rem}.article-grid>li{min-width:0}}.article-grid--wide{gap:2rem}.article-view{display:flex;flex-direction:column;gap:3rem;padding-top:1.5rem}.article-view__body{display:flex;flex-direction:column;gap:3rem;max-width:56rem}.article-view__body h1{font-size:3rem;font-weight:900}@media(min-width:768px){.article-view__body h1{font-size:5rem}}.article-view__hero-image{width:100%;height:auto;border-radius:.125rem}.prose{display:flex;flex-direction:column;gap:1rem;padding-bottom:6rem;font-size:1.125rem;line-height:2rem}.prose :is(h1,h2,h3){margin-bottom:1rem;margin-top:5rem;font-size:1.875rem;font-weight:700}.prose :is(h4,h5,h6){margin-top:1rem;font-size:1.125rem;font-weight:700}.prose p{line-height:2rem}.prose .highlight{position:relative}.prose pre{position:relative;margin:-.5rem;border-radius:.25rem;padding:1rem;overflow-x:auto}.prose p code{border-radius:.125rem;background:var(--color-code-bg);padding:2px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--color-code-text)}.prose ol{list-style:decimal inside}.prose ol,.prose ul{display:flex;flex-direction:column;gap:.5rem}.prose ul{list-style:disc inside}.prose img{border:1px solid var(--color-slate-lightest)}.prose figcaption{margin-top:-.5rem;font-size:.75rem;color:var(--color-slate-light)}.copy-code-button{position:absolute;right:.25rem;top:.25rem;padding:.5rem;color:var(--color-slate-lightest);background:0 0;border:none;cursor:pointer;line-height:1}.copy-code-button:hover{color:var(--color-primary)}.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2rem;padding-top:9rem}.site-footer__links{display:flex;flex-direction:column;gap:1rem}.site-footer ul{display:flex;gap:1rem}.site-footer__meta{font-size:.875rem;color:var(--color-slate-light)}.bg{color:#f8f8f2;background-color:#282a36}.chroma{color:#f8f8f2;background-color:#282a36;-webkit-text-size-adjust:none}.chroma .x{color:#f8f8f2}.chroma .err{color:#f8f8f2}.chroma .lnlinks{outline:none;text-decoration:none;color:inherit}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .hl{background-color:#3d3f4a}.chroma .lnt{white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .ln{white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f}.chroma .line{display:flex}.chroma .k{color:#ff79c6}.chroma .kc{color:#ff79c6}.chroma .kd{color:#8be9fd;font-style:italic}.chroma .kn{color:#ff79c6}.chroma .kp{color:#ff79c6}.chroma .kr{color:#ff79c6}.chroma .kt{color:#8be9fd}.chroma .na{color:#50fa7b}.chroma .nc{color:#50fa7b}.chroma .no{color:#f8f8f2}.chroma .nd{color:#f8f8f2}.chroma .ni{color:#f8f8f2}.chroma .ne{color:#f8f8f2}.chroma .nl{color:#8be9fd;font-style:italic}.chroma .nn{color:#f8f8f2}.chroma .nx{color:#f8f8f2}.chroma .nt{color:#ff79c6}.chroma .nb{color:#8be9fd;font-style:italic}.chroma .bp{font-style:italic}.chroma .nv{color:#8be9fd;font-style:italic}.chroma .vc{color:#8be9fd;font-style:italic}.chroma .vg{color:#8be9fd;font-style:italic}.chroma .vi{color:#8be9fd;font-style:italic}.chroma .vm{color:#8be9fd;font-style:italic}.chroma .nf{color:#50fa7b}.chroma .fm{color:#50fa7b}.chroma .ld{color:#f8f8f2}.chroma .s{color:#f1fa8c}.chroma .sa{color:#f1fa8c}.chroma .sb{color:#f1fa8c}.chroma .sc{color:#f1fa8c}.chroma .dl{color:#f1fa8c}.chroma .sd{color:#f1fa8c}.chroma .s2{color:#f1fa8c}.chroma .se{color:#f1fa8c}.chroma .sh{color:#f1fa8c}.chroma .si{color:#f1fa8c}.chroma .sx{color:#f1fa8c}.chroma .sr{color:#f1fa8c}.chroma .s1{color:#f1fa8c}.chroma .ss{color:#f1fa8c}.chroma .m{color:#bd93f9}.chroma .mb{color:#bd93f9}.chroma .mf{color:#bd93f9}.chroma .mh{color:#bd93f9}.chroma .mi{color:#bd93f9}.chroma .il{color:#bd93f9}.chroma .mo{color:#bd93f9}.chroma .o{color:#ff79c6}.chroma .ow{color:#ff79c6}.chroma .or{color:#ff79c6}.chroma .p{color:#f8f8f2}.chroma .c{color:#6272a4}.chroma .ch{color:#6272a4}.chroma .cm{color:#6272a4}.chroma .c1{color:#6272a4}.chroma .cs{color:#6272a4}.chroma .cp{color:#ff79c6}.chroma .cpf{color:#ff79c6}.chroma .gd{color:#f55}.chroma .ge{text-decoration:underline}.chroma .gr{color:#f8f8f2}.chroma .gh{font-weight:700}.chroma .gi{color:#50fa7b;font-weight:700}.chroma .go{color:#44475a}.chroma .gp{color:#f8f8f2}.chroma .gs{color:#f8f8f2}.chroma .gu{font-weight:700}.chroma .gt{color:#f8f8f2}.chroma .gl{text-decoration:underline}.chroma .w{color:#f8f8f2}