:root{--page-background: #f8fafc;--page-text: #0f172a;--page-muted: #475569;--surface: rgba(255, 255, 255, 0.85);--surface-border: rgba(15, 23, 42, 0.08)}*{box-sizing:border-box}body.card-page{margin:0;min-height:100vh;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:var(--page-text);background:radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 32%),linear-gradient(180deg, #fff, var(--page-background))}.page-shell{width:min(1100px,100% - 2rem);margin:0 auto;padding:3rem 0 4rem}.page-header{max-width:56rem;margin-bottom:2rem}.eyebrow,.demo-label{margin:0 0 .6rem;color:#1d4ed8;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1,h2,p,span{margin:0}h1{font-size:clamp(2.4rem,5vw,4rem);line-height:.95}h2{font-size:1.45rem}.page-copy,.demo-copy{margin-top:.9rem;color:var(--page-muted);line-height:1.7}.demo-grid{display:grid;gap:1.25rem}.demo-card{display:grid;gap:1.2rem;padding:1.5rem;border:1px solid var(--surface-border);border-radius:1.25rem;background:var(--surface);box-shadow:0 20px 35px rgba(15,23,42,.08)}.card{box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;overflow:hidden;width:350px;font-family:"Roboto",sans-serif}.card img{max-width:100%}.card-header{height:200px}.card-header img{object-fit:cover;height:100%;width:100%}.card-content{background-color:#fff;padding:30px}.card-title{height:20px;margin:0}.card-excerpt{color:#777;margin:10px 0 20px}.author{display:flex}.profile-img{border-radius:50%;overflow:hidden;height:40px;width:40px}.author-info{display:flex;flex-direction:column;justify-content:space-around;margin-left:10px;width:100px}.author-info small{color:#aaa;margin-top:5px}.animated-bg{background-image:linear-gradient(to right, #f6f7f8 0%, #edeef1 10%, #f6f7f8 20%, #f6f7f8 100%);background-size:200% 100%;animation:bgPos 1s linear infinite}.animated-bg-text{border-radius:50px;display:inline-block;margin:0;height:10px;width:100%}@keyframes bgPos{0%{background-position:50% 0}100%{background-position:-150% 0}}:root{--color-white: hsl(0, 0%, 100%);--color-grayish-blue: hsl(220, 15%, 55%);--color-light-gray: hsl(212, 45%, 89%);--color-dark-blue: hsl(218, 44%, 22%);--container-background-color: var(--color-white);--text-description-color: var(--color-grayish-blue);--title-color: var(--color-dark-blue);--container-shadow-color: var(--color-light-gray);--container-border-radius: 20px;--container-box-shadow: 0px 20px 35px 0px hsl(212deg 26% 82%)}body{display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:"Outfit",sans-serif;background-color:var(--color-light-gray);min-height:100vh;font-size:1rem}.qr-code-card__base{background-color:var(--container-background-color);border-radius:var(--container-border-radius);padding-inline:1.125rem;padding-block:1rem 2.5rem;max-width:20rem;box-shadow:var(--container-box-shadow)}.qr-code-card__base *+*{margin-top:1.25rem}.qr-code-card :root{--color-white: hsl(0, 0%, 100%);--color-grayish-blue: hsl(220, 15%, 55%);--color-light-gray: hsl(212, 45%, 89%);--color-dark-blue: hsl(218, 44%, 22%);--container-background-color: var(--color-white);--text-description-color: var(--color-grayish-blue);--title-color: var(--color-dark-blue);--container-shadow-color: var(--color-light-gray);--container-border-radius: 20px;--container-box-shadow: 0px 20px 35px 0px hsl(212deg 26% 82%)}.qr-code-card body{display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:"Outfit",sans-serif;background-color:var(--color-light-gray);min-height:100vh;font-size:1rem}.qr-code-card .qr-code-card__base{background-color:var(--container-background-color);border-radius:var(--container-border-radius);padding-inline:1.125rem;padding-block:1rem 2.5rem;max-width:20rem;box-shadow:var(--container-box-shadow)}.qr-code-card .qr-code-card__base *+*{margin-top:1.25rem}.qr-code-card .qr-code-card__image{width:100%;height:100%;border-radius:.625rem;aspect-ratio:1/1;object-fit:cover}.qr-code-card .qr-code-card__content{padding-inline:.625rem}.qr-code-card .qr-code-card__content *+*{margin-top:1rem}.qr-code-card .qr-code-card__title{font-size:1.375rem;text-align:center;font-weight:700;color:var(--title-color)}.qr-code-card .qr-code-card__description{font-size:.9375rem;color:var(--text-description-color);text-align:center;font-weight:400}.qr-code-card__image{width:100%;height:100%;border-radius:.625rem;aspect-ratio:1/1;object-fit:cover}.qr-code-card__content{padding-inline:.625rem}.qr-code-card__content *+*{margin-top:1rem}.qr-code-card__title{font-size:1.375rem;text-align:center;font-weight:700;color:var(--title-color)}.qr-code-card__description{font-size:.9375rem;color:var(--text-description-color);text-align:center;font-weight:400}