.csdl{--txt:#14141b;--muted:rgba(20,20,27,.62);--tile-bg:rgba(255,255,255,.10);--tile-border:rgba(255,255,255,.14);--shadow:0 18px 55px rgba(0,0,0,.12);--ring-bg:rgba(0,0,0,.14);--g1:#e6c9a8;--g2:#f3e0c8;max-width:980px;margin:0 auto;text-align:center}
.csdl-headline{margin:0 0 10px;font-size:clamp(16px,2.1vw,26px);letter-spacing:.02em;color:var(--txt)}
.csdl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;transition:transform .42s cubic-bezier(.2,.9,.2,1)}
.csdl.csdl-ended .csdl-grid{transform:translateY(-8px)}
.csdl-tile{width:148px;height:150px;border-radius:22px;background:var(--tile-bg);border:1px solid var(--tile-border);box-shadow:var(--shadow);backdrop-filter:blur(10px);position:relative;overflow:hidden}
.csdl-tile:before{content:"";position:absolute;inset:-2px;background:radial-gradient(120% 95% at 30% 15%, rgba(255,255,255,.18), transparent 58%);pointer-events:none}
.csdl-ring-wrap{position:absolute;inset:14px 12px 40px 12px;display:grid;place-items:center;z-index:1}
.csdl-ring{width:116px;height:116px}
.csdl-ring-bg{fill:none;stroke:var(--ring-bg);stroke-width:10}
.csdl-ring-fg{fill:none;stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px;stroke-dasharray:289.0265;stroke-dashoffset:0;transition:stroke-dashoffset .65s cubic-bezier(.2,.9,.2,1);filter:drop-shadow(0 10px 24px rgba(0,0,0,.16))}
.csdl-num{position:absolute;left:50%;top:58px;transform:translate(-50%,-50%);z-index:4;font-size:56px;line-height:1;color:var(--txt);text-shadow:0 10px 30px rgba(0,0,0,.20),0 0 1px rgba(0,0,0,.20)}
.csdl-label{position:absolute;left:0;right:0;bottom:14px;z-index:4;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.csdl-end{min-height:24px;margin-top:10px;font-size:18px;color:var(--txt)}

/* themes */
.csdl-theme-transparent{--tile-bg:rgba(255,255,255,.08);--tile-border:rgba(255,255,255,.12);--shadow:none}
.csdl-theme-transparent .csdl-tile{box-shadow:none}
.csdl-theme-dark{--txt:#f5f2ee;--muted:rgba(245,242,238,.72);--tile-bg:rgba(12,12,20,.52);--tile-border:rgba(255,255,255,.12);--shadow:0 24px 80px rgba(0,0,0,.50);--ring-bg:rgba(255,255,255,.12)}
.csdl-theme-dark .csdl-tile:before{background:radial-gradient(120% 95% at 30% 15%, rgba(255,255,255,.10), transparent 60%)}
.csdl-theme-dark .csdl-ring-fg{filter:drop-shadow(0 12px 28px rgba(0,0,0,.35))}
.csdl-theme-dark .csdl-num{text-shadow:0 12px 38px rgba(0,0,0,.55),0 0 1px rgba(255,255,255,.10)}
.csdl-theme-light{--txt:#14141b;--muted:rgba(20,20,27,.62);--tile-bg:rgba(255,255,255,.72);--tile-border:rgba(0,0,0,.08);--shadow:0 16px 55px rgba(0,0,0,.10);--ring-bg:rgba(0,0,0,.10)}

/* variants */
.csdl-variant-classic{--g1:#e6c9a8;--g2:#f3e0c8}
.csdl-variant-duotone{--g1:#c9a3ff;--g2:#ffd39b}
.csdl-variant-duotone .csdl-ring-fg{filter:drop-shadow(0 12px 26px rgba(201,163,255,.22)) drop-shadow(0 10px 22px rgba(255,211,155,.18))}
.csdl-variant-minimal{--g1:#b58a5c;--g2:#b58a5c}
.csdl-variant-minimal .csdl-ring-fg{stroke-linecap:butt;filter:none}
.csdl-variant-minimal .csdl-tile{box-shadow:none;backdrop-filter:none;border-radius:18px}
.csdl-variant-minimal .csdl-tile:before{display:none}

.csdl-g1{stop-color:var(--g1)}
.csdl-g2{stop-color:var(--g2)}

/* fonts */
.csdl-font-elegant_1{font-family:Georgia,"Times New Roman",serif}
.csdl-font-elegant_2{font-family:"Times New Roman",Times,serif}
.csdl-font-elegant_3{font-family:Palatino,"Palatino Linotype",serif}
.csdl-font-normal_1{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.csdl-font-normal_2{font-family:Arial,Helvetica,sans-serif}
.csdl-font-normal_3{font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}

/* sizes */
.csdl-size-sm .csdl-tile{width:112px;height:118px;border-radius:18px}
.csdl-size-sm .csdl-ring-wrap{inset:10px 10px 34px 10px}
.csdl-size-sm .csdl-ring{width:86px;height:86px}
.csdl-size-sm .csdl-num{top:44px;font-size:40px}
.csdl-size-sm .csdl-label{bottom:10px;font-size:10px;letter-spacing:.18em}
.csdl-size-sm .csdl-headline{font-size:18px;margin-bottom:10px}
.csdl-size-lg .csdl-tile{width:172px;height:170px}
.csdl-size-lg .csdl-ring{width:128px;height:128px}
.csdl-size-lg .csdl-num{top:66px;font-size:64px}

@media (prefers-reduced-motion: reduce){.csdl-grid{transition:none}.csdl-ring-fg{transition:none}}