/* Hallmark · macrostructure: Catalogue · tone: utilitarian · anchor hue: cobalt
 * genre: modern-minimal · theme: Cobalt · nav: N13 · footer: Ft2 · enrichment: none
 * audience: designers and developers · use: find, customize, copy and download SVGs
 * pre-emit critique: P4 H5 E4 S5 R5 V4 */
@import url('/tokens.css');
  
*{
  box-sizing:border-box}
html,body{
  overflow-x:clip}
html{
  scroll-padding-top:24px}
body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink);
  font:400 var(--text-base)/1.6 var(--font-body)}
button,input,select{
  font:inherit}
button,a,input,select{
  -webkit-tap-highlight-color:var(--color-transparent)}
button,a{
  touch-action:manipulation}
button{
  cursor:pointer}
a{
  color:inherit;
  text-decoration:none}
a:hover{
  text-decoration:underline;
  text-underline-offset:4px}
button{
  color:inherit}
h1,h2,h3{
  font-family:var(--font-display);
  font-style:normal;
  line-height:1.18;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
  min-width:0}
h1,h2,h3,p{
  margin:0}
h1{
  font-size:var(--text-display);
  font-weight:500}
h2{
  font-size:var(--text-lg);
  font-weight:500}
h3{
  font-size:1.05rem}
p{
  max-width:65ch}
svg{
  display:block;
  flex-shrink:0}
button svg,a svg{
  width:18px;
  height:18px}
button,a.btn,nav a,footer a{
  white-space:nowrap}
button:active,.btn:active{
  transform:translateY(1px)}
button:disabled{
  cursor:wait;
  opacity:.5}
button[aria-busy=true]{
  cursor:progress}
button[data-state=success]{
  color:var(--color-success)}
button[data-state=error]{
  color:var(--color-error)}
:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:4px}
input[aria-invalid=true]{
  outline:2px solid var(--color-error)}
[hidden]{
  display:none!important}
.skip{
  position:fixed;
  top:-100px;
  left:16px;
  background:var(--color-surface);
  padding:var(--space-sm);
  z-index:var(--z-modal)}
.skip:focus{
  top:12px}
.shell{
  width:min(1480px,100%);
  margin:auto;
  padding-inline:var(--space-lg)}
.topbar{
  border-bottom:var(--rule);
  background:var(--color-surface)}
.topbar-inner{
  min-height:80px;
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  flex-wrap:wrap;
  padding-block:var(--space-md)}
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  font:600 1.12rem var(--font-display);
  letter-spacing:-.045em;
  white-space:nowrap}
.brand svg{
  width:27px;
  height:27px;
  color:var(--color-accent)}
.brand .dotcom{
  color:var(--color-muted);
  font-weight:400}
.nav-links{
  display:flex;
  gap:var(--space-lg);
  align-items:center;
  font-size:var(--text-sm);
  margin-left:auto}
.nav-links a[aria-current=page]{
  color:var(--color-accent)}
.search-trigger{
  display:flex;
  gap:var(--space-sm);
  align-items:center;
  background:var(--color-paper);
  color:var(--color-muted);
  border:var(--rule);
  border-radius:var(--radius-sm);
  padding:var(--space-xs) var(--space-sm);
  font-size:var(--text-sm);
  margin-left:auto}
.search-trigger:hover{
  border-color:var(--color-control)}
kbd{
  font:var(--text-xs) var(--font-mono);
  background:var(--color-surface);
  border:var(--rule);
  border-radius:4px;
  padding:var(--space-2xs) var(--space-xs)}
.intro{
  padding-block:var(--space-2xl);
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:var(--space-lg)}
.intro p{
  margin-top:var(--space-sm);
  color:var(--color-muted);
  font-size:var(--text-sm)}
.collection-note{
  text-align:right;
  flex-shrink:0;
  color:var(--color-muted);
  font-size:var(--text-sm)}
.collection-note strong{
  color:var(--color-ink);
  font-weight:500;
  display:block}
.workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-xl);
  align-items:start}
.sidebar{
  min-width:0}
.sidebar-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-md);
  font-size:var(--text-sm);
  font-weight:500}
.category-nav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs)}
.category-nav a{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  white-space:nowrap;
  color:var(--color-muted)}
.category-nav a:hover{
  background:var(--color-soft);
  color:var(--color-ink);
  text-decoration:none}
.category-nav a.active{
  background:var(--color-selected);
  color:var(--color-accent)}
.category-nav .count{
  margin-left:auto;
  font-size:var(--text-xs);
  font-variant-numeric:tabular-nums}
.category-nav svg{
  width:17px;
  height:17px}
.sidebar-bottom{
  display:none}
.catalogue{
  min-width:0}
.search-box{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-control);
  border-radius:var(--radius-sm);
  background:var(--color-surface)}
.search-box svg{
  width:19px;
  height:19px;
  color:var(--color-muted)}
.search-box input{
  border:0;
  outline:0;
  min-width:0;
  width:100%;
  background:var(--color-transparent);
  color:var(--color-ink);
  font-size:var(--text-sm)}
.search-box:focus-within{
  outline:2px solid var(--color-accent);
  outline-offset:2px}
input::placeholder{
  color:var(--color-muted)}
.clear-search{
  border:0;
  background:var(--color-transparent);
  padding:0;
  line-height:1}
.results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-sm);
  padding-block:var(--space-lg) var(--space-md);
  font-size:var(--text-sm)}
.results-head h2{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:500;
  letter-spacing:0}
.results-head span{
  color:var(--color-muted);
  font-size:var(--text-xs)}
select{
  max-width:130px;
  background:var(--color-transparent);
  border:0;
  color:var(--color-muted);
  font-size:var(--text-xs);
  padding:var(--space-xs) 0;
  cursor:pointer}
.icon-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-xs)}
.icon-card{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-md);
  min-height:115px;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-ink);
  padding:var(--space-md) var(--space-xs)}
.icon-card:hover{
  border-color:var(--color-control);
  text-decoration:none}
.icon-card.selected{
  border-color:var(--color-accent);
  background:var(--color-selected);
  color:var(--color-accent)}
.icon-card.selected::after{
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--color-accent);
  position:absolute;
  top:9px;
  right:9px}
.icon-card svg{
  width:29px;
  height:29px}
.icon-card span{
  font-size:var(--text-xs);
  color:var(--color-muted);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.icon-card.selected span{
  color:var(--color-accent)}
.catalogue-foot{
  font-size:var(--text-xs);
  color:var(--color-muted);
  display:flex;
  justify-content:space-between;
  gap:var(--space-md);
  padding-block:var(--space-lg)}
.empty-state{
  padding:var(--space-3xl) var(--space-md);
  text-align:center;
  background:var(--color-soft);
  border-radius:var(--radius-sm)}
.empty-state h2{
  margin-bottom:var(--space-sm)}
.empty-state p{
  color:var(--color-muted);
  margin:auto}
.empty-state button{
  margin:var(--space-lg) auto 0}
.inspector{
  background:var(--color-surface);
  border:var(--rule);
  border-radius:var(--radius-md);
  overflow:clip;
  min-width:0}
.inspector-top{
  padding:var(--space-lg);
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:var(--space-xs)}
.inspector-top h2{
  font-size:1.1rem}
.inspector-top p{
  font-size:var(--text-xs);
  color:var(--color-muted);
  margin-top:var(--space-2xs)}
.icon-button{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:var(--rule);
  border-radius:var(--radius-sm);
  background:var(--color-surface)}
.icon-button:hover{
  background:var(--color-soft)}
.preview-stage{
  height:188px;
  display:grid;
  place-items:center;
  background:var(--color-soft);
  margin:0 var(--space-lg);
  border-radius:var(--radius-sm);
  position:relative}
.preview-stage::before,.preview-stage::after{
  content:'';
  position:absolute;
  background:var(--color-rule);
  pointer-events:none}
.preview-stage::before{
  height:1px;
  width:calc(100% - 32px);
  top:50%}
.preview-stage::after{
  width:1px;
  height:calc(100% - 32px);
  left:50%}
.preview-stage svg{
  z-index:1;
  width:80px;
  height:80px}
.preview-meta{
  display:flex;
  justify-content:space-between;
  gap:var(--space-xs);
  margin:var(--space-sm) var(--space-lg);
  color:var(--color-muted);
  font-size:var(--text-xs)}
.controls{
  padding:var(--space-md) var(--space-lg) var(--space-lg);
  display:grid;
  gap:var(--space-lg)}
.field-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--text-sm);
  margin-bottom:var(--space-sm)}
output{
  font-size:var(--text-xs);
  font-variant-numeric:tabular-nums;
  color:var(--color-muted)}
.color-field{
  display:flex;
  gap:var(--space-xs);
  align-items:center}
.color-field input[type=color]{
  width:34px;
  height:34px;
  border:var(--rule);
  padding:var(--space-2xs);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  cursor:pointer;
  flex-shrink:0}
.hex-field{
  width:100%;
  min-width:0;
  background:var(--color-surface);
  border:var(--rule);
  padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius-sm);
  color:var(--color-ink);
  font-size:var(--text-sm)}
.swatches{
  display:flex;
  gap:var(--space-xs);
  margin-left:var(--space-2xs)}
.swatch{
  width:20px;
  height:20px;
  border:var(--rule);
  border-radius:50%;
  background:var(--swatch)}
input[type=range]{
  width:100%;
  margin:0;
  accent-color:var(--color-accent);
  cursor:pointer}
.range-labels{
  display:flex;
  justify-content:space-between;
  font-size:var(--text-xs);
  color:var(--color-muted)}
.check-label{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  font-size:var(--text-xs);
  color:var(--color-muted);
  margin-top:var(--space-sm)}
input[type=checkbox]{
  accent-color:var(--color-accent);
  width:15px;
  height:15px}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:var(--space-xs);
  min-height:40px;
  padding:var(--space-xs) var(--space-sm);
  border:var(--rule);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-ink);
  font-size:var(--text-sm);
  font-weight:500;
  transition:transform var(--dur-micro) var(--ease-out)}
.btn:hover{
  background:var(--color-soft);
  text-decoration:none}
.btn.primary{
  background:var(--color-accent);
  color:var(--color-accent-ink);
  border-color:var(--color-accent)}
.btn.primary:hover{
  opacity:.9}
.actions{
  display:grid;
  gap:var(--space-xs)}
.action-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-xs)}
.text-button{
  border:0;
  background:var(--color-transparent);
  color:var(--color-muted);
  font-size:var(--text-xs);
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px}
.direct-link{
  display:block;
  text-align:center;
  font-size:var(--text-xs);
  color:var(--color-muted);
  padding:var(--space-xs)}
.status{
  min-height:18px;
  font-size:var(--text-xs);
  color:var(--color-muted);
  line-height:1.5;
  white-space:normal}
.status[data-state=error]{
  color:var(--color-error)}
.inspector-foot{
  border-top:var(--rule);
  padding:var(--space-sm) var(--space-lg);
  font-size:var(--text-xs);
  color:var(--color-muted);
  display:flex;
  justify-content:space-between}
.inspector-foot a{
  color:var(--color-accent)}
.use-strip{
  display:grid;
  gap:var(--space-xl);
  padding:var(--space-2xl);
  margin-block:var(--space-3xl);
  background:var(--color-graphite);
  color:var(--color-on-dark);
  border-radius:var(--radius-md)}
.use-strip p{
  color:var(--color-dark-muted);
  font-size:var(--text-sm);
  margin-top:var(--space-sm)}
.use-strip a{
  color:var(--color-on-dark);
  display:inline-block;
  margin-top:var(--space-lg);
  font-size:var(--text-sm)}
.use-strip pre{
  padding:0;
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:var(--text-sm)/1.9 var(--font-mono);
  align-self:center;
  color:var(--color-on-dark)}
footer{
  border-top:var(--rule);
  font-size:var(--text-xs);
  color:var(--color-muted);
  padding-block:var(--space-lg);
  display:flex;
  gap:var(--space-md);
  justify-content:space-between;
  flex-wrap:wrap}
footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-lg)}
dialog{
  border:var(--rule);
  border-radius:var(--radius-md);
  padding:var(--space-lg);
  width:min(560px,calc(100% - 32px));
  max-height:80dvh;
  background:var(--color-surface);
  color:var(--color-ink)}
dialog::backdrop{
  background:var(--color-backdrop)}
.dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-md)}
.command-results{
  display:grid;
  gap:var(--space-2xs);
  margin-top:var(--space-md)}
.command-results a{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-sm);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm)}
.command-results a:hover,.command-results a:focus{
  background:var(--color-selected);
  color:var(--color-accent);
  text-decoration:none}
.command-results a span:last-child{
  margin-left:auto;
  font-size:var(--text-xs);
  color:var(--color-muted)}
.dialog-hint{
  margin-top:var(--space-md);
  color:var(--color-muted);
  font-size:var(--text-xs)}
.prose{
  max-width:880px;
  margin:var(--space-2xl) auto var(--space-3xl);
  padding-inline:var(--space-lg)}
.prose h1{
  margin-bottom:var(--space-lg)}
.prose h2{
  margin:var(--space-2xl) 0 var(--space-md)}
.prose p,.prose ul,.prose ol{
  margin-block:var(--space-md);
  color:var(--color-muted)}
.prose a{
  color:var(--color-accent);
  text-decoration:underline}
.prose pre{
  background:var(--color-soft);
  padding:var(--space-lg);
  border:var(--rule);
  border-radius:var(--radius-sm);
  overflow:auto;
  font:var(--text-sm)/1.8 var(--font-mono)}
code{
  font-family:var(--font-mono);
  font-size:.85em}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  font-size:var(--text-sm);
  color:var(--color-muted);
  margin-block:var(--space-lg)}
.detail-layout{
  display:grid;
  gap:var(--space-2xl);
  margin-block:var(--space-lg) var(--space-3xl)}
.detail-description{
  font-size:1.05rem;
  color:var(--color-muted);
  margin-block:var(--space-lg);
  max-width:55ch}
.spec-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-md);
  padding-block:var(--space-lg);
  border-top:var(--rule);
  border-bottom:var(--rule);
  margin-block:var(--space-lg);
  font-size:var(--text-sm)}
.spec-list dt{
  color:var(--color-muted)}
.spec-list dd{
  margin:0;
  font-weight:500}
.detail-preview{
  background:var(--color-soft);
  display:grid;
  place-items:center;
  min-height:240px;
  border-radius:var(--radius-md);
  margin-top:var(--space-xl)}
.detail-preview img{
  width:120px;
  height:120px}
.related{
  margin-block:var(--space-xl) var(--space-3xl)}
.related h2{
  margin-bottom:var(--space-lg)}
.tags{
  display:flex;
  gap:var(--space-xs);
  flex-wrap:wrap;
  font-size:var(--text-xs);
  color:var(--color-muted);
  margin-block:var(--space-lg)}
.tags a{
  padding:var(--space-xs) var(--space-sm);
  background:var(--color-soft);
  border-radius:4px}
.roadmap-category{
  padding-block:var(--space-lg);
  border-bottom:var(--rule)}
.roadmap-category summary{
  font-weight:500;
  cursor:pointer;
  padding-block:var(--space-sm)}
.roadmap-items{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs)}
.roadmap-items span,.roadmap-items a{
  font-size:var(--text-xs);
  padding:var(--space-2xs) var(--space-xs);
  background:var(--color-soft);
  border-radius:4px}
.roadmap-items a{
  background:var(--color-selected);
  color:var(--color-accent)}
.no-js{
  margin-bottom:var(--space-md);
  padding:var(--space-sm);
  background:var(--color-soft);
  font-size:var(--text-sm)}

@media(min-width:40rem){
  .shell{
  padding-inline:var(--space-xl)}
.icon-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))}
.use-strip{
  grid-template-columns:1fr 1fr}
.detail-layout{
  grid-template-columns:minmax(0,1fr) 300px}
.detail-preview{
  min-height:300px}
.spec-list{
  grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(min-width:64rem){
  .workspace{
  grid-template-columns:170px minmax(0,1fr) 284px;
  gap:var(--space-xl)}
.sidebar{
  padding-top:4px}
.category-nav{
  display:grid;
  gap:var(--space-2xs)}
.category-nav a{
  padding:var(--space-xs) var(--space-sm)}
.sidebar-bottom{
  display:block;
  border-top:var(--rule);
  margin-top:var(--space-lg);
  padding-top:var(--space-lg);
  font-size:var(--text-xs);
  color:var(--color-muted)}
.sidebar-bottom a{
  display:block;
  margin-bottom:var(--space-sm)}
.sidebar-bottom p{
  font-size:var(--text-xs);
  line-height:1.8;
  margin-top:var(--space-lg)}
.inspector{
  position:sticky;
  top:24px}
.icon-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))}
.nav-links{
  margin-left:0}
.search-trigger{
  width:260px;
  justify-content:space-between}
.search-trigger span{
  margin-right:auto}
.detail-layout{
  grid-template-columns:minmax(0,1fr) 340px;
  gap:var(--space-3xl)}
.detail-preview{
  min-height:340px}
}

@media(min-width:82rem){
  .icon-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))}
.icon-card{
  min-height:124px}
.workspace{
  grid-template-columns:182px minmax(0,1fr) 300px;
  gap:var(--space-xl)}
}

@media(max-width:39.99rem){
  .topbar-inner{
  gap:var(--space-sm)}
.brand{
  font-size:1rem}
.brand svg{
  width:23px;
  height:23px}
.search-trigger{
  padding:var(--space-xs);
  margin-left:auto}
.search-trigger span,.search-trigger kbd{
  display:none}
.nav-links{
  width:100%;
  justify-content:flex-start;
  gap:var(--space-lg);
  font-size:var(--text-xs)}
.intro{
  padding-block:var(--space-xl);
  display:block}
.collection-note{
  display:none}
.category-nav{
  gap:var(--space-2xs)}
.category-nav a{
  padding:var(--space-xs) var(--space-xs);
  font-size:var(--text-xs)}
.category-nav svg,.category-nav .count{
  display:none}
.sidebar-title{
  margin-bottom:var(--space-xs)}
.workspace{
  gap:var(--space-lg)}
.inspector{
  position:relative}
.use-strip{
  padding:var(--space-lg);
  margin-block:var(--space-2xl)}
.catalogue-foot{
  flex-direction:column;
  gap:var(--space-2xs)}
.results-head{
  padding-block:var(--space-md)}
.inspector-top{
  scroll-margin-top:var(--space-md)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}


/* Responsive editor navigation and input state refinements. */
.back-to-icons{
  display:block;
  margin:var(--space-md) var(--space-lg) 0;
  padding:var(--space-xs) 0}
.hex-field:hover{
  border-color:var(--color-control)}
input:disabled{
  opacity:.55;
  cursor:not-allowed}
button:disabled{
  cursor:not-allowed}
button[aria-busy=true]{
  cursor:progress}
footer,footer nav{
  align-items:center}
.breadcrumbs a{
  white-space:nowrap}
.intro{
  padding-block:var(--space-xl) var(--space-2xl)}

@media(min-width:64rem){
  .inspector{
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain}
.back-to-icons{
  display:none}
}


.swatch{
  width:24px;
  height:24px}
.color-field input[type=color],.hex-field{
  min-height:40px}
.swatches{
  gap:var(--space-2xs)}


.size-entry{display:flex;align-items:center;gap:var(--space-xs);color:var(--color-muted);font-size:var(--text-xs)}
.size-number{width:84px;text-align:right;font-variant-numeric:tabular-nums}
.category-nav a{min-width:0}
.category-nav a>span:not(.count){min-width:0;overflow:hidden;text-overflow:ellipsis}
.category-nav .count{flex-shrink:0}

.embed-controls{display:grid;gap:var(--space-sm);margin-top:var(--space-sm)}
.direct-url{width:100%;min-width:0;font-size:11px}
.embed-note{font-size:var(--text-xs);color:var(--color-muted);line-height:1.5;margin:0}