/* v0.11 materials: code-drawn surfaces and procedural textures (data: SVG, allowed by the page CSP). Same palette as CardMaterials.java. */
.card{--card-ink:#1f3566;--card-muted:#4a5263;--glass-alpha:.55;--logo-scale:1}
.card[data-base=A]{--card-ink:#fff;--card-muted:#d9d9d9}
.card:not([data-finish=original]) .face>img{visibility:hidden}
.card:not([data-finish=original]) .face{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.card[data-finish=gold]{--card-ink:#3a2a0e;--card-muted:color-mix(in srgb,#3a2a0e 80%,transparent)}
.card[data-finish=gold] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0015 .8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.1 0 0 0 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#7d5a24,#d9b867 22%,#f6e7b4 40%,#b88d3e 62%,#e8cf8c 82%,#8c672c)}
.card[data-finish=rose]{--card-ink:#4a2a22;--card-muted:color-mix(in srgb,#4a2a22 80%,transparent)}
.card[data-finish=rose] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0015 .8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.1 0 0 0 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#8a5a4e,#e2b1a0 22%,#f7dccf 40%,#c08876 62%,#ecc2b2 82%,#93604f)}
.card[data-finish=silver]{--card-ink:#1d2533;--card-muted:color-mix(in srgb,#1d2533 80%,transparent)}
.card[data-finish=silver] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0015 .8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.1 0 0 0 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#6f7682,#cfd5dd 22%,#f5f7f9 40%,#9aa3ae 62%,#e1e5ea 82%,#7a828d)}
.card[data-finish=titan]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=titan] .face{background:linear-gradient(rgba(10,11,14,.45),rgba(10,11,14,.45)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0015 .8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.1 0 0 0 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#3a3d44,#7c818b 22%,#a9adb5 40%,#5c6068 62%,#8e939b 82%,#3d4047)}
.card[data-finish=onyx]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=onyx] .face{background:linear-gradient(rgba(10,11,14,.45),rgba(10,11,14,.45)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0015 .8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.1 0 0 0 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#0d0e11,#2a2c31 22%,#3b3e44 40%,#16171a 62%,#26282d 82%,#111215)}
.card[data-finish=carbon]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=carbon] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpattern id='p' width='8' height='8' patternUnits='userSpaceOnUse'%3E%3Crect width='4' height='4' fill='%23ffffff14'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ffffff14'/%3E%3Crect x='4' width='4' height='4' fill='%2300000055'/%3E%3Crect y='4' width='4' height='4' fill='%2300000055'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url%28%23p%29'/%3E%3C/svg%3E"),linear-gradient(125deg,#121317,#22242a 50%,#121317)}
.card[data-finish=wood]{--card-ink:#3a2716;--card-muted:color-mix(in srgb,#3a2716 80%,transparent)}
.card[data-finish=wood] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .12' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .27  0 0 0 0 .13  4 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(110deg,#b78a57,#d9b27c 40%,#c49a64 70%,#e0bd8a)}
.card[data-finish=walnut]{--card-ink:#f3e6d3;--card-muted:color-mix(in srgb,#f3e6d3 80%,transparent)}
.card[data-finish=walnut] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .12' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .12  0 0 0 0 .07  0 0 0 0 .03  4 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(110deg,#4a2f1c,#6e4528 40%,#5a3820 70%,#7a4f2e)}
.card[data-finish=bamboo]{--card-ink:#3d2f15;--card-muted:color-mix(in srgb,#3d2f15 80%,transparent)}
.card[data-finish=bamboo] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .2' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .15  6 0 0 0 -2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(90deg,#d8c08b,#e8d4a2 30%,#cfb47c 32%,#e6d09c 60%,#d4ba84)}
.card[data-finish=marble]{--card-ink:#1f2430;--card-muted:color-mix(in srgb,#1f2430 80%,transparent)}
.card[data-finish=marble] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.008 .016' numOctaves='5' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .45  0 0 0 0 .5  -5 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#f4f3f0,#e9e7e2 50%,#f7f6f3)}
.card[data-finish=glass]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=glass] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(120deg,rgba(255,255,255,var(--glass-alpha)),rgba(200,215,240,calc(var(--glass-alpha)*.6)))}
.card[data-finish=clear]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=clear] .face{background:linear-gradient(120deg,rgba(255,255,255,calc(var(--glass-alpha)*.5)),rgba(255,255,255,calc(var(--glass-alpha)*.2)))}
.card[data-finish=smoke]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=smoke] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(120deg,rgba(20,24,34,calc(var(--glass-alpha) + .15)),rgba(40,46,64,calc(var(--glass-alpha)*.7)))}
.card[data-finish=fgses]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=fgses] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#1f3566,#2e4c8f 55%,#22396f)}
.card[data-finish=black]{--card-ink:#f6f4ee;--card-muted:color-mix(in srgb,#f6f4ee 80%,transparent)}
.card[data-finish=black] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#101114,#1a1b1f)}
.card[data-finish=white]{--card-ink:#1f3566;--card-muted:color-mix(in srgb,#1f3566 80%,transparent)}
.card[data-finish=white] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#fbfaf6,#ecebe5)}
.card[data-finish=forest]{--card-ink:#f1ead8;--card-muted:color-mix(in srgb,#f1ead8 80%,transparent)}
.card[data-finish=forest] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#14302a,#1f4a3f)}
.card[data-finish=bordeaux]{--card-ink:#f6e9e2;--card-muted:color-mix(in srgb,#f6e9e2 80%,transparent)}
.card[data-finish=bordeaux] .face{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='856' height='540'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E") center/cover,linear-gradient(125deg,#4a1424,#7a2a40)}
.card[data-finish=glass] .face,.card[data-finish=clear] .face,.card[data-finish=smoke] .face{border:1px solid #ffffff88;-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
.card:not([data-finish=original]) .face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%);mix-blend-mode:screen;border-radius:inherit}
.card[data-family=color] .face::after,.card[data-family=nature] .face::after,.card[data-surface=matte] .face::after{opacity:.35}
.card .face svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--card-muted);font:17px Poppins,sans-serif}
.card .face .card-name{font:700 48px Playfair,serif;fill:var(--card-ink)}
.card[data-font=sans] .face .card-name{font-family:Poppins,sans-serif;font-weight:600}
.card[data-font=classic] .face .card-name,.card[data-font=classic] .face .card-role{font-family:Georgia,"Times New Roman",serif}
.card[data-font=mono] .face .card-name,.card[data-font=mono] .face .card-role{font-family:ui-monospace,Menlo,Consolas,monospace}
.card .face .card-role{font:400 24px Playfair,serif;fill:var(--card-muted)}
.card[data-font=sans] .face .card-role{font-family:Poppins,sans-serif}
.card .face .brand-mark{font:600 22px Poppins,sans-serif;letter-spacing:4px;fill:var(--card-ink)}
.card[data-ink=goldfoil] .face .card-name,.card[data-ink=goldfoil] .face .brand-mark{fill:url(#foil-gold)}
.card[data-ink=silverfoil] .face .card-name,.card[data-ink=silverfoil] .face .brand-mark{fill:url(#foil-silver)}
.card[data-ink=rosefoil] .face .card-name,.card[data-ink=rosefoil] .face .brand-mark{fill:url(#foil-rose)}
.card[data-ink=engrave] .face .card-name,.card[data-ink=engrave] .face .brand-mark{fill:color-mix(in srgb,var(--card-ink) 72%,transparent);stroke:rgba(255,255,255,.35);stroke-width:.6px;paint-order:stroke}
/* v0.17: laser-etched engraving on light materials (near-black, as on real metal cards) */
:is(.card[data-finish=gold],.card[data-finish=silver],.card[data-finish=aluminium],.card[data-finish=circular],.card[data-finish=rose],.card[data-finish=wood],.card[data-finish=bamboo],.card[data-finish=marble],.card[data-finish=white])[data-ink=engrave] .face svg text{fill:#171411!important;stroke:rgba(255,255,255,.18);stroke-width:.5px;paint-order:stroke}
.card[data-finish=original] .brand-mark,.card[data-finish=original] .nfc-mark{display:none}
.card .front-overlay .identity-plaque{display:none;fill:#fafafa}
.card[data-base=A] .front-overlay .identity-plaque{fill:#111}
.card[data-finish=original][data-front-identity=true] .identity-plaque{display:block;opacity:.94}
.card[data-front-identity=false] .front-overlay [data-field=name],.card[data-front-identity=false] .front-overlay [data-field=role],.card[data-front-identity=false] .front-overlay [data-field=company]{display:none}
.card[data-layout=minimal]:not([data-finish=original]) .front-overlay [data-field=company]{display:none}
.card[data-layout=center]:not([data-finish=original]) .front-overlay .nfc-mark,.card[data-layout=minimal]:not([data-finish=original]) .front-overlay .nfc-mark{display:none}
.imported-logo{display:none;transform:scale(var(--logo-scale));transform-origin:64px 57px}
.logo-mask{display:none;fill:#fff}
.card[data-base=A] .logo-mask{fill:#111}
.card[data-finish=original][data-custom-logo=true] .logo-mask,.card[data-finish=original][data-logo-visible=false] .logo-mask{display:block}
.card[data-logo-visible=false] .brand-mark{display:none}
.card .face .nfc-mark{font:16px Poppins,sans-serif;fill:var(--card-muted)}
@media (prefers-reduced-motion:no-preference){.card:not([data-finish=original]) .face::after{animation:sheen 6s ease-in-out infinite}@keyframes sheen{0%,100%{transform:translateX(-18%)}50%{transform:translateX(18%)}}}
.card[data-finish=passport]{--card-ink:#fcb769;--card-muted:color-mix(in srgb,#fcb769 82%,transparent)}
.card[data-finish=passport] .face{background:#395036}
.card[data-finish=passport] .face::after{display:none}
.card[data-finish=passport] .back{background:url("./assets/passport_back.svg") 0 0/100% 100% no-repeat,#395036}
.card[data-finish=passport] .back svg{display:none}
.card[data-finish=passport] .front .info-overlay .card-name{fill:var(--card-ink)}

/* Approved Moroccan artwork. Profile text and QR stay live above empty front backgrounds. */
.morocco-overlay{display:none}
.card[data-finish=morocco],.card[data-finish=moroccogold]{--card-ink:#e7c674;--card-muted:#e7c674}
.card[data-finish=morocco] .front{background:#062518 url('./assets/card_morocco_front.png') center/100% 100% no-repeat}
.card[data-finish=morocco] .back{background:#062518 url('./assets/card_morocco_back.png') center/100% 100% no-repeat}
.card[data-finish=moroccogold] .front{background:#062518 url('./assets/card_moroccogold_front.png') center/100% 100% no-repeat}
.card[data-finish=moroccogold] .back{background:#062518 url('./assets/card_moroccogold_back.png') center/100% 100% no-repeat}
.card:is([data-finish=morocco],[data-finish=moroccogold]) .face::after{display:none}
.card:is([data-finish=morocco],[data-finish=moroccogold]) .front-overlay,
.card:is([data-finish=morocco],[data-finish=moroccogold]) .info-overlay,
.card:is([data-finish=morocco],[data-finish=moroccogold]) .back svg{display:none!important}
.card:is([data-finish=morocco],[data-finish=moroccogold]) .front .morocco-overlay{display:block!important}
.card .morocco-overlay text{fill:#e7c674!important;font-family:Poppins,sans-serif;font-size:18px}
.card .morocco-overlay .card-name{font-family:Playfair,serif;font-weight:700;font-size:53px}
.card .morocco-overlay .card-role{font-family:Playfair,serif;font-size:25px}
.card .morocco-overlay .brand-mark{font-size:22px;letter-spacing:0}
.card[data-font=sans] .morocco-overlay .card-name{font-family:Poppins,sans-serif}
.card[data-font=sans] .morocco-overlay .card-role{font-family:Poppins,sans-serif}
.card[data-font=classic] .morocco-overlay .card-name,.card[data-font=classic] .morocco-overlay .card-role{font-family:serif}
.card[data-font=mono] .morocco-overlay .card-name,.card[data-font=mono] .morocco-overlay .card-role{font-family:monospace}
.card .morocco-default-logo{transform:scale(var(--logo-scale,1));transform-origin:64px 58px}

.card[data-finish=moroccogold] .face{box-shadow:none}

/* v0.14: painted high-definition surfaces (same files as the Android app). Morocco, passport and original FGSES designs are untouched. */
.card[data-finish=gold] .face{background:url("./assets/mat_gold_brushed.webp") center/cover}
.card[data-finish=gold][data-surface=polished] .face{background:url("./assets/mat_gold_polished.webp") center/cover}
.card[data-finish=gold][data-surface=matte] .face{background:url("./assets/mat_gold_matte.webp") center/cover}
.card[data-finish=silver] .face{background:url("./assets/mat_silver_brushed.webp") center/cover}
.card[data-finish=silver][data-surface=polished] .face{background:url("./assets/mat_silver_polished.webp") center/cover}
.card[data-finish=silver][data-surface=matte] .face{background:url("./assets/mat_silver_matte.webp") center/cover}
.card[data-finish=rose] .face{background:url("./assets/mat_rose_brushed.webp") center/cover}
.card[data-finish=rose][data-surface=polished] .face{background:url("./assets/mat_rose_polished.webp") center/cover}
.card[data-finish=rose][data-surface=matte] .face{background:url("./assets/mat_rose_matte.webp") center/cover}
.card[data-finish=titan] .face{background:url("./assets/mat_titan_brushed.webp") center/cover}
.card[data-finish=titan][data-surface=polished] .face{background:url("./assets/mat_titan_polished.webp") center/cover}
.card[data-finish=titan][data-surface=matte] .face{background:url("./assets/mat_titan_matte.webp") center/cover}
.card[data-finish=onyx] .face{background:url("./assets/mat_onyx_brushed.webp") center/cover}
.card[data-finish=onyx][data-surface=polished] .face{background:url("./assets/mat_onyx_polished.webp") center/cover}
.card[data-finish=onyx][data-surface=matte] .face{background:url("./assets/mat_onyx_matte.webp") center/cover}
.card[data-finish=carbon] .face{background:url("./assets/mat_carbon.webp") center/cover}
.card[data-finish=wood] .face{background:url("./assets/mat_wood.webp") center/cover}
.card[data-finish=walnut] .face{background:url("./assets/mat_walnut.webp") center/cover}
.card[data-finish=bamboo] .face{background:url("./assets/mat_bamboo.webp") center/cover}
.card[data-finish=marble] .face{background:url("./assets/mat_marble.webp") center/cover}
.card[data-finish=glass] .face{background:url("./assets/mat_glass.webp") center/cover}
.card[data-finish=clear] .face{background:url("./assets/mat_clear.webp") center/cover}
.card[data-finish=smoke] .face{background:url("./assets/mat_smoke.webp") center/cover}
.card[data-finish=fgses] .face{background:url("./assets/mat_fgses.webp") center/cover}
.card[data-finish=black] .face{background:url("./assets/mat_black.webp") center/cover}
.card[data-finish=white] .face{background:url("./assets/mat_white.webp") center/cover}
.card[data-finish=forest] .face{background:url("./assets/mat_forest.webp") center/cover}
.card[data-finish=bordeaux] .face{background:url("./assets/mat_bordeaux.webp") center/cover}
.card[data-finish=glass] .face,.card[data-finish=clear] .face,.card[data-finish=smoke] .face{opacity:calc(.35 + var(--glass-alpha))}
.card[data-family=metal] .face::after,.card[data-family=nature] .face::after,.card[data-family=color] .face::after{opacity:.35}

/* v0.20: real textures from the v0.14 pack (ambientCG / Poly Haven, CC0) and three extra finishes */
.card[data-finish=aluminium] .face{background:url("./assets/mat_aluminium.webp") center/cover}
.card[data-finish=circular] .face{background:url("./assets/mat_circular.webp") center/cover}
.card[data-finish=pvcgloss] .face{background:url("./assets/mat_pvcgloss.webp") center/cover}
.card[data-finish=aluminium],.card[data-finish=circular]{--card-ink:#1d2533;--card-muted:rgba(29,37,51,.78)}
.card[data-finish=pvcgloss]{--card-ink:#f6f4ee;--card-muted:rgba(246,244,238,.78)}