/* V5: large concept illustrations in the index; exact working examples in detail. */
:root{--art-purple:#5c4bfa;--art-lavender:#d7cdfc;--art-coral:#ffcfc4;--art-green:#0e6932;--art-lime:#d8f20c;--art-sky:#9fddf3;--art-magenta:#e37bed}
.catalog .card-art{background:#f5f1ff;border:0;aspect-ratio:1.55}
.catalog .card-art>svg{display:block;width:100%;height:100%;max-width:100%;margin:0;transform:none;object-fit:cover;filter:none}
.term-card:hover .card-art>*{opacity:1;transform:none}
.catalog .card-art .editorial-art{padding:0;min-height:0;aspect-ratio:auto}
.card-art :is(button,input,select,textarea){pointer-events:none}
.card-art .color-example-v5.cev5-compact{padding:24px}
.card-art .cev5-compact.cev5-opacity,.card-art .cev5-compact.cev5-profile{background:#ffcfc4}
.card-art .cev5-compact.cev5-space,.card-art .cev5-compact.cev5-srgb{background:#c9e7f6}
.card-art .cev5-compact.cev5-gamut,.card-art .cev5-compact.cev5-alpha{background:#d7cdfc}
.card-art .cev5-compact.cev5-p3,.card-art .cev5-compact.cev5-gradient{background:#ffe89e}
.card-art .cev5-compact.cev5-management,.card-art .cev5-compact.cev5-tint{background:#d7ebcf}
.card-art .cev5-compact.cev5-proof,.card-art .cev5-compact.cev5-contrast{background:#f4d6e9}
.card-art .cev5-compact .cev5-color-block{height:140px;max-height:none;aspect-ratio:auto}
.card-art .cev5-compact .cev5-checker{height:140px;padding:15px}
.card-art .cev5-compact .cev5-opacity-object span{font-size:38px}
.card-art .cev5-compact .cev5-opacity-object i{height:12px}
.card-art .cev5-compact .cev5-primary-family>div>i{height:140px}
.card-art .cev5-compact .cev5-p3-family>div>i{width:130px}
.card-art .cev5-compact .cev5-gamut-outer{max-height:172px}
.card-art .cev5-compact .cev5-gradient{height:138px}
.card-art .cev5-compact .cev5-contrast-type{font-size:50px}
.card-art .cev5-compact .cev5-contrast-sample{padding:18px 6px}
.example-stage{background:transparent}
.example-stage .ui-example{--uie-line:#d6cee9;--uie-ink:#242033;--uie-muted:#645d73;background:#f7f4ff;border:0;padding:32px;font-size:15px}
.example-stage .uie-title{font-size:23px!important;margin:20px 0 30px!important}
.example-stage .uie-demo{max-width:480px}
.example-stage :is(.uie-input,.uie-button,.uie-disclosure){font-size:14px;min-height:48px}
.example-stage .uie-label{font-size:13px}
.example-stage .uie-button{border-radius:8px;border-color:#bfb3dc;padding:10px 18px}
.example-stage .uie-button:hover{background:#eee6ff}
.example-stage .uie-disclosure{background:transparent;border-color:#cbbfe3;padding:14px 4px}
.example-stage .uie-panel p{font-size:15px}
.example-stage .uie-choice{font-size:14px;min-height:46px}
.example-stage .uie-choice input{width:20px;height:20px;accent-color:var(--art-purple)}
.example-stage .uie-switch-label{font-size:15px;min-height:60px}
.example-stage .uie-switch{width:68px;height:38px;min-height:38px;border-color:#b7a9d1;background:#fff}
.example-stage .uie-switch::after{width:26px;height:26px;top:5px;left:5px;border:0;background:#a495c1}
.example-stage .uie-switch:checked{background:var(--art-purple);border-color:var(--art-purple)}
.example-stage .uie-switch:checked::after{left:35px;background:#fff}
.example-stage .uie-popover{position:relative;top:auto;left:auto;margin-top:6px;width:min(420px,100%);border-color:#c0b2dc;border-radius:8px;padding:22px}
.example-stage .uie-popover-anchor:has(.uie-popover:not([hidden])){min-height:0}
.example-stage .uie-popover::before{border-color:#c0b2dc}
.example-stage .uie-input:focus-visible,.example-stage .uie-button:focus-visible,.example-stage .uie-switch:focus-visible{outline-color:var(--art-purple)}
.example-stage .uie-input[readonly]{background:#fff}
.example-stage .uie-scope{border-color:#d9d0ec}
.example-stage .uie-options [aria-selected=true]{background:#e8e0ff;color:#2b2053}
@media(max-width:760px){
 .catalog .card-art{aspect-ratio:1;height:108px}
 .catalog .card-art>svg{width:100%;height:100%;margin:0;max-width:100%;transform:none;filter:none}
 .card-art .color-example-v5.cev5-compact{padding:10px}
 .card-art .cev5-compact .cev5-color-block,.card-art .cev5-compact .cev5-checker,.card-art .cev5-compact .cev5-primary-family>div>i{height:70px}
 .card-art .cev5-compact .cev5-checker{padding:5px}
 .card-art .cev5-compact .cev5-opacity-object span{font-size:18px}
 .card-art .cev5-compact .cev5-opacity-object i{height:6px}
 .card-art .cev5-compact .cev5-p3-family>div>i{width:38px}
 .card-art .cev5-compact .cev5-gradient{height:78px}
 .card-art .cev5-compact .cev5-contrast-type{font-size:24px}
 .card-art .cev5-compact .cev5-contrast-sample{padding:10px 2px}
 .example-stage .ui-example{padding:24px 18px}
 .example-stage .uie-title{font-size:21px!important;margin-bottom:24px!important}
 .example-stage .uie-popover{padding:18px}
}
@media(prefers-reduced-motion:reduce){.card-art *, .example-stage *{animation:none!important;transition:none!important}}