.asset-title { margin-right: auto; color: #787f7b; font-size: 13px; }
.brand-library { padding-top: 52px; padding-bottom: 45px; }
.library-heading { margin-bottom: 35px; }
.library-heading h1 { font-size: 36px; font-weight: 500; }
.library-heading p { margin-top: 12px; font: 11px var(--mono); color: #7b847e; }
.palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.palette-item { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.palette-preview { height: 180px; display: grid; place-items: center; }
.palette-preview .opaya-icon { --opaya-size: 125px; }
.palette-label { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 12px; }
.palette-label span:last-child { font: 9px var(--mono); color: #7b847e; }
.dark-surface { background: #262c29; color: #fff; }
.dark-surface .palette-label span:last-child { color: #b7c3bb; }
.control-section { margin-top: 42px; border-top: 1px solid var(--line); padding-top: 25px; }
.control-section h2 { font-size: 20px; margin: 0 0 18px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.checkbox-grid label { padding: 4px 10px; border-radius: 5px; font-size: 13px; }
.checkbox-grid label input { inset-inline-start: 10px; }
.state-list { display: flex; flex-wrap: wrap; gap: 20px 45px; font-size: 13px; }
.size-list { display: flex; gap: 35px; align-items: end; }
.size-list>div { display: flex; flex-direction: column; align-items: center; gap: 12px; font: 10px var(--mono); color: #828982; }
.library-links { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 42px; font-size: 12px; }
.library-links a { text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:800px) { .palette-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .checkbox-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:580px) { .asset-title { display: none; } .brand-library { padding-top: 30px; } .library-heading h1 { font-size: 27px; } .palette-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .palette-preview { height: 140px; } .palette-preview .opaya-icon { --opaya-size: 100px; } .palette-label { padding: 12px; font-size: 11px; } .checkbox-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .size-list { gap: 19px; } }