*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f4f3f1;--panel:#fff;--ink:#1a1a1a;--muted:#6b6b6b;--faint:#a8a8a8;--border:#e6e4e1;--accent:#0d97a6;--accent-light:#e8f6f8;--radius:16px;--radius-sm:10px;--radius-xs:6px;--shadow-card:0 2px 12px #0000000f;--shadow-hover:0 8px 28px #0000001a;--shadow-modal:0 24px 64px #0000002e;--font:"Avenir Next", "Helvetica Neue", system-ui, -apple-system, sans-serif;--transition:.22s ease}html,body{background:var(--bg)}body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}img{max-width:100%;display:block}.gallery-root{flex-direction:column;max-width:1400px;margin:0 auto;padding:0 24px;display:flex;position:relative}.gallery-root.is-compact{max-height:2000px;overflow-y:auto}.gallery-root.is-embedded{padding:0 16px}.gallery-loader{justify-content:center;padding-top:clamp(32px,8vh,96px);display:flex}.loader-pill{background:var(--panel);box-shadow:var(--shadow-card);color:var(--muted);border-radius:999px;align-items:center;gap:12px;padding:14px 20px;display:inline-flex}.loader-dot{background:var(--muted);border-radius:999px;width:12px;height:12px;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 #6b6b6b4d}50%{transform:scale(1.15);box-shadow:0 0 0 10px #6b6b6b00}}.gallery-error{text-align:center;color:var(--muted);padding:80px 24px}.gallery-error h2{margin-bottom:8px;font-size:20px}.browse{flex-direction:column;flex:1;min-height:0;display:flex}.browse-header{flex-shrink:0;padding-top:28px}.browse-header-top{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px;display:flex}.browse-hero{flex:1;min-width:0}.browse-kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;font-size:12px;font-weight:600}.browse-title{letter-spacing:-.02em;margin-bottom:6px;font-size:clamp(22px,3vw,32px);font-weight:700;line-height:1.15}.browse-subtitle{color:var(--muted);max-width:440px;font-size:14px;line-height:1.5}.browse-search-wrap{flex-shrink:0;width:clamp(200px,30vw,340px);padding-top:8px}.browse-search{border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--border);transition:border-color var(--transition), box-shadow var(--transition);align-items:center;gap:8px;padding:10px 14px;display:flex}.browse-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.search-icon{color:var(--faint);flex-shrink:0;display:flex}.browse-search input{font:inherit;width:100%;color:var(--ink);background:0 0;border:none;outline:none;font-size:14px}.browse-search input::placeholder{color:var(--faint)}.browse-chips{align-items:center;gap:12px;margin-bottom:16px;display:flex}.browse-chiprow{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1;gap:8px;padding:2px 0;display:flex;overflow-x:auto}.browse-chiprow::-webkit-scrollbar{display:none}.chip{background:var(--panel);border:1px solid var(--border);transition:all var(--transition);white-space:nowrap;border-radius:999px;flex-shrink:0;padding:7px 16px;font-size:13px;font-weight:500}.chip:hover{border-color:var(--accent);color:var(--accent)}.chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}.hue-picker-section{margin-bottom:16px}.hue-picker-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.hue-picker-label{color:var(--muted);font-size:13px;font-weight:600}.hue-bar{border-radius:var(--radius-xs);cursor:crosshair;touch-action:none;background:linear-gradient(#ffffffeb 0%,#0000 35% 65%,#000000e0 100%),linear-gradient(90deg,#888 0% 14%,#ff3f33 14%,#ffb648 28%,#f2eb5d 38%,#57dc66 52%,#2fd3cb 62%,#4d8cff 74%,#7d5cff 86%,#ff3f33 100%);height:48px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000014}.hue-bar-core{border-radius:inherit;display:block;position:absolute;inset:0}.hue-indicator{pointer-events:none;z-index:2;background:#fff;border:2.5px solid #fff;border-radius:999px;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d,inset 0 0 0 1px #0000001a}.browse-summary{color:var(--muted);margin-bottom:16px;font-size:13px}.browse-grid{flex:1;grid-template-columns:repeat(4,1fr);align-content:start;gap:16px;min-height:0;display:grid}.browse-empty{text-align:center;color:var(--muted);grid-column:1/-1;padding:48px 24px}.browse-empty h2{margin-bottom:8px;font-size:18px}.browse-empty p{font-size:14px}.color-card{border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-card);transition:transform var(--transition), box-shadow var(--transition);overflow:hidden}.color-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}.card-button{text-align:left;flex-direction:column;width:100%;display:flex}.card-media{aspect-ratio:1;background:linear-gradient(135deg,#e8e8e8 0%,#d8d8d8 100%);position:relative;overflow:hidden}.card-media:after{content:"";opacity:1;background:linear-gradient(90deg,#e8e8e8 25%,#f0f0f0 50%,#e8e8e8 75%) 0 0/200% 100%;transition:opacity .3s;animation:1.5s ease-in-out infinite shimmer;position:absolute;inset:0}.card-media.is-loaded:after{opacity:0}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.card-cover{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .4s}.card-media.is-loaded .card-cover{opacity:1}.card-hover{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .3s;position:absolute;inset:0}@media (hover:hover){.card-button:hover .card-hover.is-loaded{opacity:1}}.card-copy{padding:12px 14px 14px}.card-family{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:2px;font-size:11px;font-weight:600}.card-title{color:var(--ink);font-size:14px;font-weight:600;line-height:1.3}.browse-pagination,.detail-pagination{flex-shrink:0;justify-content:center;align-items:center;gap:16px;padding:16px 0 20px;display:flex}.pagination-status{color:var(--muted);text-align:center;min-width:100px;font-size:13px}.btn-subtle{border-radius:var(--radius-xs);color:var(--accent);transition:background var(--transition), opacity var(--transition);padding:8px 16px;font-size:13px;font-weight:500}.btn-subtle:hover:not(:disabled){background:var(--accent-light)}.btn-subtle:disabled{opacity:.35;cursor:default}.clear-all{white-space:nowrap;flex-shrink:0}.btn-back{border-radius:var(--radius-xs);color:var(--accent);transition:background var(--transition);align-items:center;gap:6px;margin-bottom:12px;padding:8px 14px 8px 10px;font-size:13px;font-weight:500;display:inline-flex}.btn-back:hover{background:var(--accent-light)}.detail-overlay{z-index:100;-webkit-backdrop-filter:blur(8px);background:#00000073;justify-content:center;align-items:flex-start;padding:24px;animation:.2s fadeIn;display:flex;position:fixed;inset:0;overflow-y:auto}.is-embedded .detail-overlay{position:absolute;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.detail-panel{background:var(--panel);border-radius:var(--radius);width:100%;max-width:960px;max-height:1952px;box-shadow:var(--shadow-modal);padding:28px;animation:.25s slideUp;overflow-y:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.detail-top{gap:28px;margin-bottom:24px;display:flex}.detail-copy{flex:1;min-width:0}.detail-family{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:4px;font-size:12px;font-weight:600}.detail-title{letter-spacing:-.01em;margin-bottom:6px;font-size:clamp(22px,3vw,28px);font-weight:700;line-height:1.15}.detail-meta{color:var(--muted);margin-bottom:10px;font-size:13px}.detail-description{color:var(--muted);font-size:14px;line-height:1.6}.detail-cover{aspect-ratio:4/3;border-radius:var(--radius-sm);background:linear-gradient(135deg,#e8e8e8 0%,#d8d8d8 100%);flex-shrink:0;width:clamp(180px,28vw,320px);overflow:hidden}.detail-cover-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .4s}.detail-cover.is-loaded .detail-cover-img{opacity:1}.detail-examples{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px;display:grid}.example-btn{text-align:left;border-radius:var(--radius-sm);background:var(--bg);width:100%;transition:transform var(--transition), box-shadow var(--transition);flex-direction:column;display:flex;overflow:hidden}.example-btn:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}.example-media{aspect-ratio:4/3;background:linear-gradient(135deg,#e8e8e8 0%,#d8d8d8 100%);position:relative;overflow:hidden}.example-media:after{content:"";background:linear-gradient(90deg,#e8e8e8 25%,#f0f0f0 50%,#e8e8e8 75%) 0 0/200% 100%;transition:opacity .3s;animation:1.5s ease-in-out infinite shimmer;position:absolute;inset:0}.example-media.is-loaded:after{opacity:0}.example-img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .4s}.example-media.is-loaded .example-img{opacity:1}.example-copy{padding:8px 10px 10px}.example-index{color:var(--faint);margin-bottom:1px;font-size:11px;font-weight:600}.example-caption{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.35;display:-webkit-box;overflow:hidden}.image-viewer{flex-direction:column;height:100%;display:flex}.image-toolbar{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.image-nav{align-items:center;gap:12px;display:flex}.image-stage{border-radius:var(--radius-sm);background:#f0efed;flex:1;justify-content:center;align-items:center;min-height:300px;max-height:600px;margin-bottom:12px;display:flex;overflow:hidden}.focused-img{object-fit:contain;opacity:0;max-width:100%;max-height:100%;transition:opacity .4s}.image-stage.is-loaded .focused-img{opacity:1}.image-caption{color:var(--muted);text-align:center;font-size:13px}@media (width<=1100px){.browse-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=800px){.browse-grid,.detail-examples{grid-template-columns:repeat(2,1fr)}.detail-top{flex-direction:column}.detail-cover{width:100%;max-width:none}.browse-header-top{flex-direction:column;gap:12px}.browse-search-wrap{width:100%}}@media (width<=480px){.gallery-root{padding:0 12px}.browse-header{padding-top:16px}.browse-title{font-size:20px}.browse-subtitle{font-size:13px}.browse-grid{gap:10px}.card-copy{padding:10px 10px 12px}.card-title{font-size:13px}.detail-panel{padding:16px}.detail-examples{grid-template-columns:1fr}}.is-compact .browse-header{padding-top:16px}.is-compact .browse-title{font-size:20px}.is-compact .browse-subtitle{display:none}.is-compact .hue-bar{height:36px}.is-compact .browse-grid{gap:12px}