:root{color-scheme:light dark;--gray-0: #ffffff;--gray-50: #f7f7f8;--gray-100: #ececef;--gray-200: #dadde1;--gray-300: #b0b5bd;--gray-400: #7a8088;--gray-500: #525866;--gray-600: #3a3f45;--gray-700: #2a2e33;--gray-800: #1c1f23;--gray-900: #111315;--primary: #4f46e5;--primary-hover: #4338ca;--primary-light: #eef2ff;--success: #16a34a;--warning: #f59e0b;--error: #dc2626;--text-xs: 12px;--text-sm: 13px;--text-md: 14px;--text-lg: 16px;--text-xl: 18px;--text-2xl: 24px;--text-3xl: 32px;--leading-tight: 1.3;--leading-normal: 1.5;--leading-loose: 1.7;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-pill: 999px;--shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);--shadow-md: 0 4px 12px rgb(0 0 0 / 8%);--bg: var(--gray-50);--surface: var(--gray-0);--surface-subtle: var(--gray-50);--ink: var(--gray-900);--muted: var(--gray-500);--faint: var(--gray-400);--line: var(--gray-200);--line-strong: var(--gray-300);--hover: var(--gray-100);--shadow: var(--shadow-md);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,sans-serif}@media(prefers-color-scheme:dark){:root{--bg: var(--gray-900);--surface: var(--gray-800);--surface-subtle: var(--gray-700);--ink: var(--gray-50);--muted: var(--gray-300);--faint: var(--gray-400);--line: var(--gray-700);--line-strong: var(--gray-600);--hover: color-mix(in srgb, var(--gray-700) 78%, var(--gray-600));--primary-light: color-mix(in srgb, var(--primary) 24%, var(--gray-800));--shadow: 0 4px 12px rgb(0 0 0 / 24%)}}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}input{font:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.site-frame{display:grid;min-height:100vh;grid-template-rows:auto 1fr auto}.site-header{position:sticky;z-index:20;top:0;display:grid;grid-template-columns:minmax(140px,1fr) auto minmax(180px,1fr);align-items:center;gap:var(--space-5);background:color-mix(in srgb,var(--bg) 92%,transparent);padding:var(--space-3) clamp(var(--space-5),4vw,var(--space-10));backdrop-filter:blur(16px)}.brand{display:inline-flex;align-items:center;gap:var(--space-2);width:max-content;font-size:var(--text-md);font-weight:720}.brand-logo{display:block;width:30px;height:30px;border-radius:6px;object-fit:contain}.top-nav{display:inline-flex;align-items:center;justify-self:center;gap:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);padding:var(--space-1)}.top-nav-link{min-width:68px;border-radius:var(--radius-pill);padding:7px var(--space-3);color:var(--muted);font-size:var(--text-md);text-align:center}.top-nav-link:hover,.ghost-button:hover,.filter-chip:hover,.filter-chip.is-active,.section-tab:hover,.case-card:hover{background:var(--hover)}.top-nav-link.is-active{background:var(--primary);color:var(--gray-0)}.site-search{justify-self:end;width:min(100%,260px)}.site-search input{width:100%;height:40px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);padding:0 var(--space-3);outline:none}.site-search input::placeholder{color:var(--faint)}.site-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}.site-main{width:min(1200px,calc(100% - 48px));margin:0 auto;padding:var(--space-8) 0 var(--space-12)}.database-page,.case-detail{display:grid;gap:var(--space-6)}.database-page--compact{gap:var(--space-4)}.page-heading{display:grid;gap:var(--space-3);padding:var(--space-5) 0 0}.breadcrumb{color:var(--faint);font-size:var(--text-sm)}.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.title-row h1{margin:0;font-size:clamp(var(--text-3xl),6vw,64px);font-weight:760;line-height:1;letter-spacing:0}.title-row p{max-width:660px;margin:var(--space-3) 0 0;color:var(--muted);font-size:var(--text-lg);line-height:var(--leading-loose)}.ghost-button{flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);padding:var(--space-2) var(--space-3);color:var(--muted);font-size:var(--text-md)}.database-panel{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}.content-list,.icon-list{display:grid;gap:var(--space-4)}.section-tabs{display:flex;align-items:center;gap:var(--space-1);border-bottom:1px solid var(--line);padding:var(--space-2)}.section-tab{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);color:var(--muted);font-size:var(--text-md)}.section-tab.is-active{background:var(--hover);color:var(--ink);font-weight:650}.section-tab small{color:var(--faint);font-size:var(--text-xs)}.filter-bar{display:grid;gap:var(--space-2);background:transparent;padding:0}.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.filter-label{width:54px;color:var(--faint);font-size:var(--text-xs);font-weight:650}.filter-chip,.property-pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);padding:0 var(--space-2);color:var(--muted);font-size:var(--text-xs);line-height:var(--leading-tight)}.filter-chip:hover,.filter-chip.is-active,a.property-pill:hover{border-color:var(--line-strong);background:var(--hover);color:var(--ink)}.filter-empty{color:var(--faint);font-size:13px}.filter-clear{color:var(--muted);font-size:var(--text-sm)}.filter-clear:hover{color:var(--ink)}.database-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0;color:var(--faint);font-size:13px}.empty-database{display:grid;gap:8px;padding:var(--space-12) 0;text-align:center}.empty-database h2{margin:0;font-size:18px;letter-spacing:0}.empty-database p{max-width:420px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.6}.icon-page{display:grid;gap:22px}.icon-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:20px 0 4px}.icon-hero h1{margin:6px 0 0;font-size:clamp(34px,5vw,56px);line-height:1;letter-spacing:0}.icon-count{display:grid;min-width:104px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px 14px;text-align:right}.icon-count strong{font-size:28px;line-height:1}.icon-count span{margin-top:4px;color:var(--muted);font-size:13px}.icon-filter-panel{display:grid;gap:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px}.icon-filter-row{display:flex;flex-wrap:wrap;gap:8px}.icon-filter-row--colors{align-items:center}.icon-color-filter{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-subtle);padding:5px 8px 5px 6px;color:var(--muted);font-size:12px}.icon-color-filter:hover,.icon-category-filter:hover,.icon-pagination a:hover{background:var(--hover)}.icon-color-filter span{display:block;width:22px;height:22px;border:1px solid rgb(0 0 0 / 13%);border-radius:var(--radius-pill)}.icon-color-filter em{font-style:normal}.icon-category-filter{border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);padding:7px 10px;color:var(--muted);font-size:13px}.icon-category-filter.is-active,.icon-pagination a.is-active{background:var(--ink);color:var(--surface)}.icon-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);padding:0}.icon-card{display:grid;gap:var(--space-3);justify-items:center;min-height:260px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-6) var(--space-4) var(--space-4);text-align:center;transition:border-color .18s ease-out,box-shadow .18s ease-out,transform .18s ease-out}.icon-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.icon-card__image{display:grid;place-items:center;width:100%;padding:var(--space-4);border-radius:var(--radius-md)}.icon-card img{width:min(160px,100%);height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:34px;background:var(--surface);object-fit:cover;box-shadow:var(--shadow-md)}.icon-card strong{width:100%;overflow:hidden;margin:0;color:var(--ink);font-size:var(--text-lg);font-weight:650;line-height:var(--leading-tight);letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.icon-card__title{width:100%}.icon-card__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);min-height:24px}.icon-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.icon-pagination a{min-width:34px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);padding:7px 9px;color:var(--muted);font-size:13px;text-align:center}.icon-detail{display:grid;gap:22px}.icon-detail-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}.icon-detail-main{display:grid;gap:18px}.icon-showcase{display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:linear-gradient(45deg,var(--surface-subtle) 25%,transparent 25%),linear-gradient(-45deg,var(--surface-subtle) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--surface-subtle) 75%),linear-gradient(-45deg,transparent 75%,var(--surface-subtle) 75%),var(--surface);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;padding:clamp(34px,7vw,76px);box-shadow:var(--shadow)}.icon-showcase img{width:min(512px,100%);height:auto;border:1px solid var(--line);border-radius:110px;box-shadow:0 28px 70px #0000002e}.related-icons{display:grid;gap:14px}.related-icons h2{margin:0;color:var(--muted);font-size:18px;font-weight:620;letter-spacing:0;text-align:center}.related-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.related-icon-card{display:grid;min-height:278px;justify-items:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:36px 18px 16px;text-align:center}.related-icon-card img{width:180px;height:180px;border:1px solid var(--line);border-radius:40px;background:var(--surface-subtle);object-fit:cover;box-shadow:0 18px 38px #0000001a}.related-icon-card h3{width:100%;overflow:hidden;margin:16px 0 8px;font-size:16px;font-weight:560;line-height:1.25;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.related-icon-link{color:var(--faint);font-size:12px}.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0}.case-card{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.case-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-1px)}.case-card__image{display:block;width:100%;aspect-ratio:3 / 2;background:var(--surface-subtle);object-fit:cover}.case-card__media{display:block}.case-card__body{display:grid;gap:10px;padding:12px}.card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.card-title-row h2{margin:0;font-size:16px;line-height:1.25;letter-spacing:0}.card-title-link{color:var(--ink)}.card-title-row span,.case-card time{color:var(--faint);font-size:12px}.case-card p{display:-webkit-box;overflow:hidden;min-height:42px;margin:0;color:var(--muted);font-size:13px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.property-row{display:flex;flex-wrap:wrap;gap:6px}.color-dot{width:9px;height:9px;border:1px solid rgb(0 0 0 / 12%);border-radius:999px;background:#b8b2aa}.color-red{background:#d95d59}.color-neutral{background:#b8b2aa}.color-blue{background:#5486c8}.color-green{background:#5f9f78}.color-yellow{background:#d6aa3f}.color-black{background:#2f2f2f}.color-brown{background:#7b512a}.color-gray,.color-grey{background:#909090}.color-orange{background:#f59e0b}.color-purple{background:#7c3aed}.color-white{background:#fff}.color-multicolored{background:linear-gradient(90deg,red,orange,#ff0,#0be500,#0072de)}.detail-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}.properties-panel{position:sticky;top:88px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:14px}.properties-panel dl{display:grid;gap:14px;margin:0}.properties-panel div{display:grid;gap:6px}.properties-panel dt{color:var(--faint);font-size:12px;font-weight:650}.properties-panel dd{margin:0;color:var(--muted);font-size:14px}.detail-main{display:grid;gap:18px}.case-detail__cover,.screenshot-grid img{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow)}.case-detail__cover img{width:100%;aspect-ratio:16 / 10;object-fit:cover}.case-body{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:18px;color:var(--muted);font-size:16px;line-height:1.8}.case-body p{margin:0}.screenshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.screenshot-grid img{width:100%}.site-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:26px clamp(18px,4vw,40px) 34px;color:var(--faint);font-size:13px}.site-footer strong{display:block;margin-bottom:6px;color:var(--ink);font-size:14px}.site-footer p{margin:0}.site-footer nav{display:flex;flex-wrap:wrap;gap:12px}.site-footer a{color:var(--muted)}.site-footer a:hover{color:var(--ink)}@media(min-width:981px)and (max-width:1200px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.icon-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:980px){.site-header{grid-template-columns:1fr auto}.top-nav{justify-self:end}.site-search{grid-column:1 / -1;justify-self:stretch;width:100%}.site-main{width:min(100% - 28px,1180px);padding-top:22px}.case-grid,.icon-gallery,.icon-detail-layout,.related-icon-grid,.detail-layout,.screenshot-grid{grid-template-columns:1fr}.icon-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.properties-panel{position:static}}@media(max-width:640px){.site-header{gap:12px}.brand span:last-child{display:none}.top-nav-link{min-width:auto;padding-inline:10px}.title-row,.icon-hero,.site-footer{display:grid}.icon-count{text-align:left}.title-row h1{font-size:42px}.section-tabs{overflow-x:auto}.filter-label{width:100%}.icon-gallery{grid-template-columns:1fr}}