.color-concept{background:hsl(var(--card));color:hsl(var(--foreground));font-family:var(--font-inter);padding:clamp(1.25rem,4vw,4rem)}.color-concept p{color:hsl(var(--muted-foreground));line-height:1.75}.color-concept h1,.color-concept h2,.color-concept h3{color:hsl(var(--foreground))}.color-concept .color-kicker{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:hsl(var(--foreground))}.color-concept a:focus-visible,.color-concept select:focus-visible,.color-concept summary:focus-visible{outline:3px solid hsl(var(--ring));outline-offset:5px}.color-concept .color-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center;padding:1rem 0 3rem}.color-concept .color-hero h1{font-size:clamp(2.7rem,5.3vw,5.8rem);font-weight:800;line-height:1.01;letter-spacing:-.06em;margin:1.5rem 0}.color-concept .color-hero-copy{max-width:34rem;font-size:1.05rem}.color-concept .color-hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.color-concept .color-primary-link{display:inline-flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1.3rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-size:.8rem;font-weight:700;min-height:44px}.color-concept .color-text-link{display:inline-flex;align-items:center;gap:.5rem;color:hsl(var(--foreground));text-decoration:underline;text-underline-offset:.3em;font-size:.85rem;padding:.6rem 0}.color-concept .color-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:6px}.color-concept .color-mosaic-world{display:flex;flex-direction:column;justify-content:space-between;min-height:145px;background:var(--category-color);color:hsl(var(--player-paper));padding:1.25rem}.color-concept .color-mosaic-world span{font-size:.65rem;letter-spacing:.09em}.color-concept .color-mosaic-world strong{font-size:1.15rem;line-height:1.25;font-weight:650}.color-concept .color-mosaic-world:hover strong{text-decoration:underline;text-underline-offset:.2em}.color-concept .color-spectrum{display:flex;height:10px;gap:2px;margin-top:6px}.color-concept .color-spectrum span{flex:1;background:var(--category-color)}.color-concept .color-mosaic-caption{display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem;font-size:.65rem;color:hsl(var(--muted-foreground))}.color-concept .color-manifesto{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;padding:3rem 0;border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border))}.color-concept .color-manifesto h2{font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.04em;line-height:1.15}.color-concept .color-manifesto p{font-size:.95rem}.color-concept .color-atlas-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;padding:4rem 0 2.25rem}.color-concept .color-atlas-heading h2{font-size:clamp(2rem,3.4vw,3.3rem);line-height:1.15;letter-spacing:-.04em;margin-top:.6rem}.color-concept .color-atlas-heading>p{max-width:28rem;font-size:.85rem}.color-concept .color-world{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);gap:2rem;padding:2.5rem 0;border-top:1px solid hsl(var(--border));scroll-margin-top:2rem}.color-concept .color-world-heading{display:flex;align-items:center;gap:.7rem;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.color-concept .color-world-dot{width:1.15rem;height:1.15rem;flex-shrink:0;background:var(--category-color)}.color-concept .color-world h3{margin:1rem 0;font-size:1.75rem;line-height:1.15;letter-spacing:-.035em}.color-concept .color-world-intro p{font-size:.8rem}.color-concept .color-world-intro .color-world-meaning{font-size:.75rem;color:hsl(var(--foreground));margin-top:1rem;font-weight:600}.color-concept .color-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-content:start}.color-concept .color-swatch{min-width:0;display:flex;flex-direction:column;border:1px solid hsl(var(--border))}.color-concept .color-swatch-face{min-height:115px;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;background:var(--category-color);color:hsl(var(--player-paper))}.color-concept .color-swatch-face strong{font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}.color-concept .color-swatch-code{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.65rem;font-family:ui-monospace,monospace}.color-concept .color-swatch-note{display:flex;flex-direction:column;flex:1;gap:.65rem;padding:1rem}.color-concept .color-swatch-note p{font-size:.75rem;line-height:1.55}.color-concept .color-swatch-note span{font-size:.65rem;font-weight:700;margin-top:auto}.color-concept .color-swatch:hover .color-swatch-note span{text-decoration:underline;text-underline-offset:.25em}.color-concept .color-demo{padding:2.5rem;margin-top:2rem;background:hsl(var(--muted));border:1px solid hsl(var(--border))}.color-concept .color-demo-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem}.color-concept .color-demo h2{font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.15;letter-spacing:-.035em;margin:.7rem 0 1rem}.color-concept .color-demo label{font-size:.7rem;font-weight:700}.color-concept .color-demo select{display:block;margin-top:.6rem;border:1px solid hsl(var(--input));padding:.8rem;background:hsl(var(--card));color:hsl(var(--foreground));min-width:220px}.color-concept .color-demo-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}.color-concept .color-demo-card{background:hsl(var(--card));border:1px solid hsl(var(--border));min-width:0}.color-concept .color-demo-card header{background:var(--category-color);color:hsl(var(--player-paper));padding:1rem;font-size:.85rem;font-weight:700}.color-concept .color-demo-card div{padding:1.5rem}.color-concept .color-demo-card strong{display:block;font-size:.9rem;margin-bottom:.8rem}.color-concept .color-demo-card p{font-size:.8rem}.color-concept .color-demo-caption{margin-top:1rem;font-size:.65rem}.color-concept .color-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding:4rem 0}.color-concept .color-principles article{padding-top:1rem;border-top:2px solid hsl(var(--foreground))}.color-concept .color-principles h3{font-size:1.2rem;margin:1rem 0}.color-concept .color-principles p{font-size:.85rem}.color-concept .color-faq{border-top:1px solid hsl(var(--border));padding:2rem 0}.color-concept .color-faq h2{font-size:1.75rem;margin-bottom:1.5rem}.color-concept details{border-bottom:1px solid hsl(var(--border))}.color-concept summary{cursor:pointer;padding:1.25rem .25rem;font-size:.9rem;font-weight:650}.color-concept details p{max-width:65rem;padding:0 .25rem 1.25rem;font-size:.85rem}.color-concept .color-sources{margin-top:1rem;padding-bottom:1rem}.color-concept .color-sources summary{font-size:.75rem}.color-concept .color-sources ol{padding:0 1.25rem 1rem;list-style:decimal;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 3rem}.color-concept .color-sources a{font-size:.8rem;font-weight:700;text-decoration:underline;text-underline-offset:.2em}.color-concept .color-sources li p{padding:.4rem 0 0;font-size:.75rem}.color-concept .color-end{padding:3rem 0 1rem;display:flex;justify-content:space-between;align-items:center;gap:2rem}.color-concept .color-end h2{font-size:clamp(1.75rem,3vw,2.8rem);letter-spacing:-.04em}.color-concept .color-end p{margin-top:.6rem;font-size:.9rem}.color-concept svg.keep-color,.color-concept svg.keep-color *{color:inherit;stroke:currentColor}@media(max-width:1100px){.color-concept .color-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.color-concept .color-world{grid-template-columns:minmax(180px,1fr) minmax(0,2fr)}}@media(max-width:767px){.color-concept .color-hero,.color-concept .color-manifesto,.color-concept .color-world{grid-template-columns:1fr;gap:1.5rem}.color-concept .color-atlas-heading,.color-concept .color-demo-heading,.color-concept .color-end{display:block}.color-concept .color-atlas-heading>p{margin-top:1rem}.color-concept .color-demo{padding:1.25rem}.color-concept .color-demo select{width:100%}.color-concept .color-demo-flow,.color-concept .color-principles,.color-concept .color-sources ol{grid-template-columns:1fr}.color-concept .color-end>a{margin-top:1.5rem}}@media(max-width:400px){.color-concept .color-swatches{grid-template-columns:1fr}.color-concept .color-mosaic-world{padding:1rem;min-height:130px}}