header{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:50;background:#f7efe3d1;border-block-end:1px solid #ead8bfcc;position:sticky;inset-block-start:0}header>section{max-inline-size:var(--content-max-inline-size);justify-content:space-between;align-items:center;gap:1.5rem;margin:0 auto;padding:1rem;display:flex;position:relative}.logo{letter-spacing:-.04em;align-items:center;gap:1rem;font-size:1.75rem;font-weight:900;display:flex}section.grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));grid-auto-rows:1fr;align-items:stretch;gap:1rem;display:grid}.search{border:1px solid var(--color-border);background:#ffffff8c;border-radius:2rem;margin-block-end:1rem;padding:1rem;box-shadow:0 1rem 2rem #0000000a;container:tools-search/inline-size}.search>label{border:1px solid var(--color-border);background:#fff;border-radius:22px;align-items:center;gap:14px;padding:8px 8px 8px 18px;display:flex}.search>label input{color:var(--color-text);font:inherit;background:0 0;border:0;outline:none;flex:1;font-weight:750}.search>label kbd{background:var(--color-page);border:1px solid var(--color-border);color:var(--color-muted);border-radius:.75rem;padding:.5rem .75rem;font-weight:900;display:none}.categories{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.categories button{border:1px solid var(--color-border);color:var(--color-muted);cursor:pointer;font:inherit;background:#ffffff8f;border-radius:.75rem;padding:.5rem .75rem;font-size:.812rem;font-weight:850}.categories button.active,.categories button:hover{background:var(--color-text);border-color:var(--color-text);color:#fff}@container tools-search (width>640px){.search label kbd{display:block}}:root{--color-border:#ead8bf;--color-dark:#a95f12;--color-muted:#7a6a58;--color-page:#f7efe3;--color-soft:#f1d3a8;--color-text:#1f1b16;--content-max-inline-size:2200px;--font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top left, #d989282e, transparent 34rem), radial-gradient(circle at bottom right, #35c7591f, transparent 30rem), var(--color-page);color:var(--color-text);font-family:var(--font), sans-serif;grid-template-rows:1fr auto;min-block-size:100dvh;margin:0;display:grid}a{color:inherit;text-decoration:none}main{max-inline-size:var(--content-max-inline-size);margin:0 auto;padding:4rem min(5rem,2vw) 0}a.small,a.small+span,small{color:var(--color-dark);letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;font-weight:950}:is(a.small,a.small+span,small)+span{color:var(--color-muted);padding:0 .25rem}:is(a.small,a.small+span,small)+textarea{margin-block-start:1rem}h1{letter-spacing:-.07em;max-inline-size:48rem;margin:1rem 0 0;font-size:clamp(2.75rem,7vw,5rem);line-height:.92}.intro{color:var(--color-muted);max-inline-size:40rem;margin:1.5rem 0 2rem;font-size:1.125rem;line-height:1.7}.intro strong{color:var(--color-text);overflow-wrap:anywhere}p{color:var(--color-muted);margin:0;font-size:.875rem;line-height:1.55}input,textarea{background:0 0;border:0;border-radius:.5rem;outline:none;width:100%;padding:.625rem}:is(input,textarea):not(:focus){appearance:textfield}textarea,input:focus{box-shadow:0 0 .5rem var(--color-soft)}article{border:1px solid var(--color-soft);background:#ffffff9e;border-radius:2rem;flex-direction:column;block-size:100%;padding:1.125rem;transition:all .15s;display:flex;box-shadow:0 1rem 2rem #0000000a}article:hover{background:#fff;transform:translateY(-3px)}article h3,article input{font-family:var(--font), sans-serif;letter-spacing:-.05em;margin:1rem 0 .5rem;font-size:clamp(22px,3vw,34px);font-weight:950}article input.monospace{font-family:monospace;font-size:1.5rem}article input.monospace:focus-within{box-shadow:none}footer{inline-size:100%;max-inline-size:var(--content-max-inline-size);text-align:end;margin:0 auto;padding-inline:1rem}footer p{margin:.825rem;font-size:.825rem}footer p a{color:var(--color-dark)}footer p a:hover{text-decoration:underline}