.cs-wrap{--blue:#077eac;--green:#41c84a;--ink:#1d2a33;--muted:#5b6b76;--line:#e1edf3;max-width:1240px;color:var(--ink);box-sizing:border-box;background:radial-gradient(520px 320px at 100% 0,#41c84a1f,#0000 70%),radial-gradient(560px 360px at 0 0,#077eac1a,#0000 70%);margin:auto;padding:48px 24px 72px}.cs-wrap *{box-sizing:border-box}.cs-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px;display:flex}.cs-heading{letter-spacing:-.03em;margin:0;font-size:clamp(32px,4vw,48px);font-weight:750;line-height:1.15}.cs-heading span{color:var(--blue)}.cs-sub{color:var(--muted);max-width:560px;margin:8px 0 0}.cs-all{color:#fff;cursor:pointer;background:linear-gradient(105deg,#087da6,#36c653);border:0;border-radius:999px;align-items:center;gap:10px;padding:13px 24px;font:700 15px inherit;text-decoration:none;transition:filter .2s,transform .2s;display:inline-flex}.cs-all:hover{filter:brightness(.92);transform:translateY(-2px)}.cs-all svg{width:18px;height:18px}.cs-filters{flex-wrap:wrap;gap:10px;margin:0 0 30px;display:flex}.cs-chip{color:#0b5f82;cursor:pointer;background:#fff;border:1px solid #9fd0e2;border-radius:999px;padding:8px 18px;font:700 13.5px inherit;transition:all .2s}.cs-chip:hover{background:#eef7fb}.cs-chip.on{color:#fff;background:linear-gradient(105deg,#087da6,#36c653);border-color:#0000}.cs-chip small{opacity:.75;margin-left:4px;font-weight:600}.cs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.cs-card{border:1px solid var(--line);background:#fff;border-radius:22px;flex-direction:column;min-width:0;transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;overflow:hidden;box-shadow:0 10px 30px -18px #077eac59}.cs-card[hidden]{display:none}.cs-card:hover{border-color:#9fd0e2;transform:translateY(-6px);box-shadow:0 26px 50px -20px #077eac73}.cs-preview{background:#e9edf2;width:100%;height:190px;display:block;position:relative;overflow:hidden}.cs-preview img{object-fit:cover;object-position:top;width:100%;height:100%;transition:transform .5s;display:block}.cs-card:hover .cs-preview img{transform:scale(1.04)}.cs-preview:before{content:"";background:var(--blue);z-index:2;width:38%;height:4px;position:absolute;top:0;left:0}.cs-preview:after{content:"";opacity:0;background:linear-gradient(#fff0 45%,#044b6ce0);transition:opacity .3s;position:absolute;inset:0}.cs-card:hover .cs-preview:after,.cs-preview:focus-visible:after{opacity:1}.cs-count{z-index:3;border:1px solid var(--line);color:#3d4b56;letter-spacing:.2em;background:#ffffffeb;border-radius:999px;padding:5px 14px;font:12px/1.4 ui-monospace,Consolas,monospace;position:absolute;top:16px;left:16px}.cs-read{z-index:3;color:#fff;letter-spacing:.24em;opacity:0;align-items:center;gap:10px;font-size:13px;font-weight:700;transition:opacity .3s,transform .3s;display:flex;position:absolute;bottom:16px;left:18px;transform:translateY(8px)}.cs-card:hover .cs-read,.cs-preview:focus-visible .cs-read{opacity:1;transform:none}.cs-read svg{width:18px;height:18px}.cs-body{flex-direction:column;flex:1;padding:22px 24px 26px;display:flex}.cs-top{justify-content:flex-end;margin:-6px 0 12px;display:flex}.cs-dl{height:42px;color:var(--blue);cursor:pointer;background:#fff;border:1px solid #bfdcea;border-radius:999px;align-items:center;gap:8px;padding:0 18px 0 14px;font:700 14px inherit;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s;display:inline-flex}.cs-dl:hover{color:#fff;background:linear-gradient(135deg,#087da6,#36c653);border-color:#0000;transform:translateY(-2px)}.cs-dl svg{width:18px;height:18px}.cs-body h2{letter-spacing:-.01em;text-align:left;margin:0 0 10px;font-size:18px;line-height:1.35;transition:color .25s}.cs-card:hover .cs-body h2{color:var(--blue)}.cs-body p{color:var(--muted);margin:0;line-height:1.65}.cs-dl:focus-visible,.cs-all:focus-visible,.cs-preview:focus-visible,.cs-chip:focus-visible{outline:2px solid var(--blue);outline-offset:3px}@media (max-width:1000px){.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:620px){.cs-grid{grid-template-columns:1fr}.cs-preview{height:210px}}@media (prefers-reduced-motion:reduce){.cs-wrap *{transition:none!important}}
