.ltr .ColorContainer .ColorBlock p{font-family:var(--app-font-display)}.ColorContainer{margin:auto;margin-inline:10px;padding-block:50px}.ColorContainer .c-container{flex-wrap:nowrap;justify-content:center;gap:20px;max-width:1280px;margin:auto;display:flex}.ColorContainer .Divider{display:none}@media screen and (width<=1000px){.ColorContainer{padding-block:32px}.ColorContainer .c-container{flex-direction:column;align-items:center;gap:16px}}.ColorBlock{text-align:start;cursor:pointer;width:325px;min-width:0;min-height:215px;color:var(--lens-ink);background:radial-gradient(120% 90% at 0% 0%, #ffffff4d, transparent 55%), var(--lens-bg);border:1px solid var(--lens-border);border-bottom:4px solid var(--lens-edge);border-radius:16px;flex:1 1 0;margin:0;padding:26px 24px 24px;transition:transform .25s,box-shadow .25s,filter .25s;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff59,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.ColorBlock.red{--lens-bg:#f65f5f;--lens-ink:#460000;--lens-border:#d85454;--lens-edge:#c04a4a}.ColorBlock.yellow{--lens-bg:#fef48c;--lens-ink:#5c5600;--lens-border:#e0d77b;--lens-edge:#c6be6d}.ColorBlock.green{--lens-bg:#9bfbac;--lens-ink:#014001;--lens-border:#88dd97;--lens-edge:#79c486}.ColorBlock.hide{--lens-bg:#79c5ff;--lens-ink:#00044f;--lens-border:#6aade0;--lens-edge:#5e9ac7}.ColorBlock:before{content:"";pointer-events:none;border:26px solid #ffffff2e;border-radius:50%;width:190px;height:190px;position:absolute;inset:auto -54px -64px auto}.ColorBlock .content{flex-direction:column;height:100%;display:flex;position:relative}.ColorBlock .shuni{align-items:center;gap:12px;margin-bottom:14px;display:flex}.ColorBlock .bi{width:44px;height:44px;color:inherit;background:#ffffff73;border-radius:12px;flex:none;justify-content:center;align-items:center;font-size:20px;transition:transform .25s;display:inline-flex;box-shadow:inset 0 0 0 1px #fff9}.ColorBlock h4{color:inherit;margin:0;font-size:18px;font-weight:700;display:inline}.ColorBlock p{color:inherit;opacity:.88;margin:0;font-size:.95rem;line-height:1.65}.ColorBlock:hover{filter:saturate(1.05);transform:translateY(-6px)}.ColorBlock:hover .bi{transform:scale(1.08)}.ColorBlock:focus-visible{outline-offset:2px;outline:3px solid #ffffffe6}.ColorBlock:disabled{cursor:default}.ColorBlock:disabled:hover{filter:none;transform:none}.ColorBlock:disabled:hover .bi{transform:none}@media screen and (width<=1000px){.ColorBlock{flex:none;width:90%;max-width:420px;min-height:0;padding:22px 20px}.ColorBlock .bi{width:40px;height:40px;font-size:19px}}.rtl .ColorBlock:before{inset:auto auto -64px -54px}