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}.header-nav{justify-content:flex-end;margin-inline-start:auto;display:flex}.tools-menu-toggle{block-size:2.5rem;color:var(--color-text);background:#ffffffd6;border-radius:999px;align-items:center;gap:.45rem;padding:0 1rem;font-size:.875rem;display:inline-flex}.tools-menu-toggle[aria-expanded=true]{border-color:var(--color-dark);color:var(--color-dark);background:#fff}.tools-menu-toggle svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;inline-size:1rem;transition:transform .15s}.tools-menu-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.tools-menu{border:1px solid var(--color-border);background:#fffffff5;border-radius:1.5rem;max-block-size:min(72dvh,46rem);padding:.75rem;position:absolute;inset-block-start:calc(100% - .25rem);inset-inline:1rem;overflow:auto;box-shadow:0 1.5rem 4rem #55371229}.tools-menu-all{background:#f1d3a83d;border:1px solid #ead8bfdb;border-radius:1rem;justify-content:space-between;align-items:center;margin-block-end:.75rem;padding:.85rem 1rem;display:flex}.tools-menu-all:hover,.tools-menu-all:focus-visible{background:#f1d3a86b}.tools-menu-all strong{font-size:1rem;display:block}.tools-menu-all small{margin-block-start:.2rem;display:block}.tools-menu-grid{column-width:13rem;column-gap:.75rem}.tools-menu-group{break-inside:avoid;border:1px solid #ead8bfb8;border-radius:1rem;inline-size:100%;margin-block-end:.75rem;padding:.85rem;display:inline-block}.tools-menu-category,.tools-menu-link{border-radius:.75rem;display:block}.tools-menu-category{color:var(--color-dark);letter-spacing:.12em;text-transform:uppercase;margin-block-end:.35rem;padding:.45rem .5rem;font-size:.75rem;font-weight:950}.tools-menu-link{color:var(--color-text);padding:.45rem .5rem;font-size:.95rem;font-weight:780;line-height:1.25}.tools-menu-category:hover,.tools-menu-category:focus-visible,.tools-menu-link:hover,.tools-menu-link:focus-visible,.tools-menu-category.active,.tools-menu-link.active{background:#f1d3a85c}.tools-menu-enter-active,.tools-menu-leave-active{transition:opacity .12s,transform .12s}.tools-menu-enter-from,.tools-menu-leave-to{opacity:0;transform:translateY(-.4rem)}@media (width<=760px){header>section{padding:.75rem}.logo{gap:.65rem;font-size:1.45rem}.logo svg{inline-size:2rem}.tools-menu{inset-block-start:calc(100% + .25rem);inset-inline:.75rem}}@media (width<=560px){header>section{justify-content:space-between}.header-nav{justify-content:flex-end}.tools-menu-grid{column-count:1}}section.grid{--target-width:330px;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fill, minmax(var(--target-width), 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}.tool-controls{gap:.75rem;margin-top:1rem;display:grid}.control-group{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.control-group small{min-inline-size:3.5rem;padding-inline-start:.25rem}.control-group 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}.control-group button.active{background:var(--color-text);border-color:var(--color-text);color:#fff}.control-group button:hover:not(.active){border-color:var(--color-dark);color:var(--color-dark)}.control-group button .tool-count{color:color-mix(in oklab, var(--color-text), var(--color-border) 80%);font-weight:500}.order-hint{color:var(--color-muted);margin-inline-start:.25rem;font-size:.812rem;font-weight:750}.tools-grid{overflow-anchor:none;position:relative}.tools-grid.is-custom-order>article{cursor:grab}.tools-grid.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.tools-grid.is-dragging>article,.tools-grid.is-dragging .tool-card-link{cursor:grabbing}.tools-grid>article{min-inline-size:0;position:relative}.tools-grid>article.favourite{border-color:var(--color-dark)}.tools-grid>article.dragging{border:2px dashed var(--color-dark);box-shadow:none;color:var(--color-dark);opacity:1;background:#ffffff47;transform:none}.tools-grid>article.dragging:hover{background:#ffffff47;transform:none}.tools-grid>article.dragging>*{visibility:hidden}.tools-grid>article.dragging:after{content:"Drop here";letter-spacing:.12em;text-transform:uppercase;place-items:center;font-size:.75rem;font-weight:950;display:grid;position:absolute;inset:0}.tool-card-link{flex-direction:column;flex:1;min-inline-size:0;padding-inline-end:2.5rem;display:flex}.tool-card-link:after{content:"";z-index:0;position:absolute;inset:0}.tool-card-link>*{z-index:1;position:relative}.tool-card-favourite{z-index:3;background:#ffffffb8;border-radius:50%;justify-content:center;align-items:center;inline-size:2rem;padding:0;display:flex;position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.tool-card-favourite[aria-pressed=true]{background:var(--color-dark);border-color:var(--color-dark);color:#fff}.tool-card-favourite[aria-pressed=true] svg{fill:currentColor}.tool-card-favourite svg{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:1.8px;inline-size:1.1rem}.tool-card-drag{border:1px solid var(--color-border);block-size:2rem;color:var(--color-muted);touch-action:none;border-radius:.5rem;justify-content:center;align-items:center;inline-size:2rem;display:flex;bottom:1rem;right:1rem;z-index:2!important;position:absolute!important}.tool-card-drag svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;inline-size:1rem}.tools-empty{border:1px dashed var(--color-border);text-align:center;background:#ffffff8c;border-radius:2rem;margin:0;padding:2rem}.tool-list-move,.tool-list-enter-active,.tool-list-leave-active{transition:opacity .28s,transform .55s cubic-bezier(.22,1,.36,1)}.tool-list-enter-from,.tool-list-leave-to{opacity:0;transform:translateY(1rem)scale(.96)}.tool-list-leave-active{position:absolute}@media (prefers-reduced-motion:no-preference){:root{view-transition-name:none}::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}::view-transition-old(*){animation:.18s ease-in both tool-fade-out}::view-transition-new(*){animation:.28s ease-out 90ms both tool-fade-in}}@keyframes tool-fade-out{to{opacity:0;scale:.96}}@keyframes tool-fade-in{0%{opacity:0;scale:.96}}@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}#app{min-inline-size:0}a{color:inherit;text-decoration:none}main{inline-size:100%;max-inline-size:var(--content-max-inline-size);min-inline-size:0;margin:0 auto;padding:1rem 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:0;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}article input.monospace:focus-within{box-shadow:none}button{border:1px solid var(--color-border);block-size:2rem;color:var(--color-muted);cursor:pointer;background:#fff;border-radius:.5rem;font-weight:850}button:hover{border-color:currentColor}.notes{color:var(--color-muted);background:#f1d3a85c;border-radius:24px;margin-block:1.5rem;padding:1rem;font-size:.875rem;line-height:1.6}.notes a:hover{text-decoration:underline}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}