.shades-page{padding-bottom:var(--space-4xl)}.shades-hero{padding:var(--space-3xl) 0;text-align:center;background:linear-gradient(180deg, var(--color-espresso) 0%, var(--color-smoke) 100%);border-bottom:1px solid #f7f1e814}.shades-hero-content{max-width:700px;margin:0 auto}.shades-hero-overline{font-family:var(--font-body);letter-spacing:.14em;color:var(--color-copper);text-transform:uppercase;margin-bottom:var(--space-xs);font-size:.8125rem;font-weight:700;display:block}.shades-hero-title{font-family:var(--font-display);color:var(--color-ivory);margin-bottom:var(--space-md);font-size:clamp(2rem,4vw,3.25rem);line-height:1.2}.shades-hero-subtitle{font-family:var(--font-body);color:#f7f1e8d9;margin:0;font-size:1.125rem;line-height:1.65}.shades-filter-bar{justify-content:center;gap:var(--space-sm);margin-top:var(--space-xl);margin-bottom:var(--space-2xl);flex-wrap:wrap;display:flex}.shades-filter-pill{font-family:var(--font-body);color:var(--color-espresso);cursor:pointer;background:#1a13100d;border:1px solid #1a13101f;border-radius:999px;padding:.6rem 1.25rem;font-size:.875rem;font-weight:600;transition:all .25s}.shades-filter-pill:hover{border-color:var(--color-copper);color:var(--color-copper);background:#c7622a1a}.shades-filter-pill.is-active{background:var(--color-espresso);color:var(--color-ivory);border-color:var(--color-espresso);box-shadow:0 4px 12px #1a131026}.shades-grid{gap:var(--space-xl);margin-bottom:var(--space-3xl);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.shade-card{padding:var(--space-xl);cursor:pointer;background:#fff;border:1px solid #1a131014;border-radius:16px;flex-direction:column;align-items:center;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s;display:flex;position:relative;overflow:hidden}.shade-card:hover,.shade-card.is-selected{border-color:var(--color-copper);transform:translateY(-6px);box-shadow:0 16px 32px #1a13101f}.shade-swatch-container{margin-bottom:var(--space-md);flex-direction:column;align-items:center;display:flex;position:relative}.shade-swatch{border:4px solid #fff;border-radius:50%;width:110px;height:110px;transition:transform .35s,box-shadow .35s;position:relative;overflow:hidden;box-shadow:inset 0 3px 8px #0000004d,0 8px 20px #0000001f}.shade-card:hover .shade-swatch{transform:scale(1.06);box-shadow:inset 0 3px 8px #0000004d,0 12px 28px #c7622a40}.shade-swatch-sheen{pointer-events:none;background:radial-gradient(circle at 35% 30%,#ffffff59 0%,#0000 60%);position:absolute;inset:0}.shade-copy-btn{cursor:pointer;background:#1a13100f;border:1px solid #1a13101a;border-radius:999px;margin-top:.75rem;padding:.25rem .75rem;transition:background .2s,border-color .2s}.shade-copy-btn:hover{background:var(--color-copper);border-color:var(--color-copper)}.shade-copy-btn:hover .shade-code{color:var(--color-ivory)}.shade-code{font-family:var(--font-body);color:var(--color-espresso);letter-spacing:.05em;font-size:.8125rem;font-weight:700;transition:color .2s}.copied-text{font-family:var(--font-body);color:#27ae60;font-size:.8125rem;font-weight:700}.shade-details{text-align:center;flex-direction:column;gap:.25rem;display:flex}.shade-name{font-family:var(--font-display);color:var(--color-espresso);margin:0;font-size:1.125rem;line-height:1.3}.shade-hex-tag{font-family:var(--font-body);color:#888;letter-spacing:.05em;font-size:.75rem}.shade-inspector-banner{background:var(--color-espresso);color:var(--color-ivory);padding:var(--space-lg) var(--space-xl);align-items:center;gap:var(--space-lg);margin-bottom:var(--space-2xl);border:1px solid var(--color-copper);border-radius:12px;animation:.3s fadeIn;display:flex;box-shadow:0 12px 32px #1a131040}.shade-inspector-swatch{border:2px solid #fff;border-radius:50%;flex-shrink:0;width:48px;height:48px}.shade-inspector-info{flex:1}.shade-inspector-info h4{font-family:var(--font-display);color:var(--color-ivory);margin:0 0 .25rem;font-size:1.25rem}.shade-inspector-info p{font-family:var(--font-body);opacity:.85;margin:0;font-size:.9375rem}.shade-inspector-close{color:var(--color-ivory);cursor:pointer;font-family:var(--font-body);background:0 0;border:1px solid #f7f1e84d;border-radius:4px;padding:.4rem .85rem;font-size:.875rem;transition:all .2s}.shade-inspector-close:hover{background:#f7f1e826}.shades-action-card{padding:var(--space-2xl);justify-content:space-between;align-items:center;gap:var(--space-lg);text-align:center;background:linear-gradient(135deg,#c7622a14 0%,#6e1f2b0d 100%);border:1px solid #c7622a33;border-radius:16px;flex-direction:column;display:flex}@media (min-width:768px){.shades-action-card{text-align:left;flex-direction:row}}.shades-action-text h3{font-family:var(--font-display);color:var(--color-espresso);margin:0 0 .5rem;font-size:1.5rem}.shades-action-text p{font-family:var(--font-body);color:var(--color-smoke);margin:0;font-size:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}