@layer components{.details{position:relative;padding-block:var(--space-2xl);padding-inline:var(--space-l);background-color:transparent;overflow:hidden;& .details__container{max-width:1200px;margin-inline:auto;position:relative;z-index:2}& .details__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl);justify-content:center}& .details__item{position:relative;padding:var(--space-2xl)var(--space-l);display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .8s var(--ease-zen);overflow:hidden;background:rgba(255,255,255,3%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:2rem 5rem 2rem 4rem;&:hover, &.is-active{transform:translateY(-12px);background:rgba(255,255,255,8%);border-color:rgba(255,255,255,.2);box-shadow:0 30px 60px rgba(0,0,0,.1);& .details__topo-bg{opacity:.3;transform:scale(1.1)rotate(2deg)}& .details__icon{color:var(--color-accent);transform:scale(1.1)}}&::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,255,255,5%),transparent);pointer-events:none}}& .details__topo-bg{position:absolute;inset:0;z-index:-1;opacity:.1;transition:all 1.5s var(--ease-zen);pointer-events:none;& svg{width:100%;height:100%;color:var(--color-text)}}& .details__icon{margin-bottom:var(--space-m);color:var(--color-text-muted);transition:all .6s var(--ease-zen);display:flex;justify-content:center}& .details__label{font-size:var(--size-step-1);font-weight:700;margin-bottom:var(--space-s);color:var(--color-text);letter-spacing:.05em;text-transform:uppercase;background:0 0!important}& .details__description{font-size:var(--size-step-0);color:var(--color-text-muted);line-height:1.8;max-width:16rem;margin-inline:auto;background:0 0!important}& .details__item--code{& .details__description{transition:opacity .3s ease;&[data-matrix=true]{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-kerning:none;color:var(--color-accent);opacity:.8}}}& .details__dynamic-value{font-weight:700;color:var(--color-accent);font-variant-numeric:tabular-nums}& .details__climber{filter:drop-shadow(0 0 4px var(--color-accent))}& .pulse-animate{stroke-dasharray:20,2;animation:pulse-flow 2s linear infinite}@keyframes pulse-flow{0%{stroke-dashoffset:22}100%{stroke-dashoffset:0}}@media(max-width:768px){padding-inline: var(--space-m); padding-block: var(--space-xl); & .details__grid{grid-template-columns:1fr;gap:var(--space-l)}& .details__item{padding:var(--space-xl)var(--space-m);border-radius:2rem 3rem 2rem 3rem}& .details__description{max-width:100%}}}@media(prefers-color-scheme:dark){.details .details__item{background:rgba(15,23,42,.3);border:1px solid rgba(255,255,255,5%);&:hover, &.is-active{background:rgba(15,23,42,.5)}}}}