@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
.portrait.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;z-index:1}.portrait.has-photo:after{z-index:2;pointer-events:none}.photo-credit{font-size:10px!important;line-height:1.6!important;border-top:1px solid #d4dccc;padding-top:12px}.card .card-bottom p{max-width:90%;line-height:1.5;min-height:30px}.grid .card{width:100%}
/* Rarity is encoded by colour, frame, symbol and texture. */
.card.rarity-common{background:#344a41;border:2px solid #91a69a;box-shadow:0 8px 20px #24362720}
.card.rarity-rare{background:linear-gradient(145deg,#153c66,#244c74);border:2px solid #74b8ff;box-shadow:0 0 0 3px #74b8ff18,0 12px 26px #234d762b}
.card.rarity-epic{background:linear-gradient(145deg,#4d256d,#6c3c82);border:3px double #d4a1ff;box-shadow:0 0 0 3px #bd7df029,0 10px 30px #7d43a940}
.card.rarity-legendary{background:linear-gradient(135deg,#423614,#79622a 45%,#3c3010);border:3px double #ffe398;box-shadow:0 0 0 3px #e9be5c35,0 0 32px #d6a64155,0 16px 28px #5f4b1830}
.card.rarity-legendary:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#fff2b522 40%,transparent 55%);pointer-events:none;z-index:2}
.card.rarity-epic .portrait:after{background:repeating-linear-gradient(135deg,transparent,transparent 13px,#e8b9ff16 14px,#e8b9ff16 15px)}
.card.rarity-legendary .portrait:after{background:radial-gradient(circle at 20% 25%,#fff5b3 0 1px,transparent 2px),radial-gradient(circle at 80% 65%,#fff5b3 0 1px,transparent 2px),radial-gradient(circle at 65% 15%,#fff5b3 0 2px,transparent 3px),repeating-linear-gradient(135deg,transparent,transparent 25px,#ffecaa18 26px,#ffecaa18 27px)}
.card .card-top{gap:4px;font-size:7px;letter-spacing:.5px;align-items:center;min-height:35px}.card .card-top span{white-space:nowrap;padding:5px 6px;border-radius:4px;font-weight:700;letter-spacing:.5px}
.rarity-common .card-top span{background:#c7d4ca;color:#253b30}.rarity-rare .card-top span{background:#abd8ff;color:#12385e}.rarity-epic .card-top span{background:#e0b6ff;color:#4a2064}.rarity-legendary .card-top span{background:linear-gradient(110deg,#b98a27,#ffedb2,#d9ad44);color:#42300d}
.card.rarity-rare .card-bottom small,.card.rarity-rare p{color:#c4dfff}.card.rarity-epic .card-bottom small,.card.rarity-epic p{color:#e3c6f4}.card.rarity-legendary .card-bottom small,.card.rarity-legendary p{color:#f6df9f}
.card.locked{opacity:.78;filter:saturate(.85)}.card.locked .portrait{opacity:.65}.card:focus-visible{outline:3px solid #28472e;outline-offset:5px}
.rarity-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.rarity-legend span{padding:7px 9px;border-radius:5px;font-size:9px;font-weight:700;border:1px solid}.rarity-legend .common{color:#4c6557;background:#e0e7e1;border-color:#a6b9ac}.rarity-legend .rare{color:#23598b;background:#e1efff;border-color:#8fbde9}.rarity-legend .epic{color:#7c439d;background:#eee0f7;border-color:#c3a0dc}.rarity-legend .legendary{color:#795b19;background:#f7edce;border-color:#d6b659}
@media(max-width:900px){.strip{flex-wrap:wrap;gap:16px}.rarity-legend{width:100%;justify-content:flex-start}}@media(prefers-reduced-motion:reduce){#reveal .card{animation:none}*{scroll-behavior:auto!important}}
:root{--bg:#f5f4ef;--ink:#21382e;--green:#244b38;--lime:#d9ed8c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #87a63b;outline-offset:4px}header{height:100px;max-width:1360px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 55px;border-bottom:1px solid #d8ddd1}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--green);font-size:32px}.brand>span{font-size:17px;letter-spacing:-.7px;font-weight:800}.muted{font-weight:400}nav{display:flex;gap:30px}nav button,footer button{border:0;background:none;color:#6b776d;font-size:13px}nav button.active{color:var(--ink);font-weight:700}nav small{background:#e4e8dc;border-radius:5px;padding:3px 7px;margin-left:5px}.profile{border:1px solid #d1d8ca;border-radius:50%;padding:12px;font-size:12px}main{max-width:1250px;margin:auto;padding:55px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;min-height:460px}.eyebrow,.section-title small{font-size:11px;letter-spacing:2px;font-weight:700;color:#62755b}h1{font-family:Manrope,sans-serif;font-size:65px;letter-spacing:-3px;line-height:1.12;margin:22px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#64803e}p{line-height:1.8;color:#748073;font-size:14px}.actions{display:flex;gap:12px;margin-top:28px}.primary{background:var(--green);color:white;border:0;border-radius:7px;padding:16px 22px;font-weight:600;font-size:13px}.primary span{margin-left:25px}.secondary{background:none;border:1px solid #ccd4c5;border-radius:7px;padding:14px;font-size:12px;color:var(--green)}.hero-meta{display:flex;gap:19px;margin-top:26px;font-size:10px;color:#7d8976}.showcase{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center;padding-bottom:30px}.orbit{position:absolute;width:400px;height:400px;border:1px solid #dce0cc;border-radius:50%;background:radial-gradient(ellipse,#e5e9d2,transparent 70%)}.card{position:relative;background:#294637;color:#fff;border-radius:14px;padding:10px;width:220px;min-width:0;box-shadow:0 12px 30px #24362720;border:1px solid #67775d;overflow:hidden}.tilt{position:absolute;width:220px}.left{transform:rotate(-12deg);left:20px;top:63px;background:#46695f}.right{transform:rotate(10deg);right:0;top:27px;background:#353e29;border:1px solid #b4a46a}.card-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;padding:7px 3px 12px}.card-top span{color:#dce8aa}.portrait{height:210px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 40% 30%,#bacbb4,#657e66);font-family:Georgia;font-size:75px;color:#f3f3de;position:relative;overflow:hidden}.portrait:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#ffffff04 4px)}.mandela{background:radial-gradient(ellipse at 40% 30%,#b9af7b,#6d6747)}.portrait img{width:100%;height:100%;object-fit:cover}.card-bottom{padding:16px 6px 8px}.card-bottom small{font-size:7px;letter-spacing:1px;color:#c2cba6}.card h3{font-family:Georgia;font-weight:400;font-size:24px;margin:9px 0}.card p{font-size:10px;color:#c1cbb7;margin:0}.floating{position:absolute;bottom:0;right:30px;font-size:11px;line-height:1.7;color:#758667}.strip{border-top:1px solid #d4dccc;border-bottom:1px solid #d4dccc;display:flex;justify-content:space-between;align-items:center;padding:24px 0;margin:35px 0 55px}.strip>span{font-size:9px;letter-spacing:1px;color:#7a876e}.strip strong{font-family:Georgia;font-size:23px;font-weight:400}.strip i{display:inline-block;width:4px;height:4px;background:#a8b49b;border-radius:50%;margin:0 10px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h2{font-family:Georgia;font-size:30px;font-weight:400;margin:10px 0 30px}.section-title>span{font-size:11px;color:#7c8972}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.features>div{border-top:1px solid #d5ddce;padding:20px 0}.features b{font-size:9px;color:#849176;letter-spacing:1px}.features h3{font-family:Georgia;font-weight:400;font-size:21px}.features p{font-size:12px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.grid .card{width:100%;cursor:pointer}.grid .portrait{height:195px}.filters{display:flex;gap:12px;margin:10px 0 30px}input,select,.filters button{background:white;border:1px solid #d1d9c9;border-radius:6px;padding:13px;color:var(--ink);font:inherit;font-size:12px}input{flex:1}.badge{position:absolute;right:12px;bottom:12px;font-size:10px;background:#d9ed8c;color:#244b38;padding:3px 7px;border-radius:4px}.locked{opacity:.45}.quizbox{max-width:700px;background:#e9ecdf;padding:35px;border-radius:14px;margin-top:35px}.quizbox h2{font-family:Georgia;font-weight:400;font-size:28px;line-height:1.5}#answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}#answers button{padding:17px;background:#f9faf3;border:1px solid #d1d9c9;border-radius:7px;text-align:left;color:var(--green)}#answers button.correct{background:#d9ed8c}#answers button.wrong{background:#efc9b9}#reveal{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}#reveal .card{animation:reveal .5s ease-out;cursor:pointer}#reveal:not(:empty){margin-bottom:45px}@keyframes reveal{from{transform:translateY(30px) rotateY(90deg);opacity:0}to{transform:none;opacity:1}}footer{max-width:1250px;margin:auto;padding:30px 55px;border-top:1px solid #d4dccc;display:flex;justify-content:space-between;font-size:10px;color:#829078}dialog{border:1px solid #d1d9c9;border-radius:15px;padding:35px;background:var(--bg);color:var(--ink);max-width:500px;width:90%}dialog::backdrop{background:#152a20aa}.close{float:right;border:0;background:none;font-size:24px;color:var(--ink)}dialog a{color:var(--green)}.empty{padding:50px 0;color:#7c8972}.toast{text-align:center;width:100%;font-size:12px}body:has(dialog[open]){overflow:hidden}@media(max-width:900px){header{padding:0 25px}main{padding:30px}h1{font-size:49px}.hero{grid-template-columns:1fr 1fr}.tilt{width:175px}.portrait{height:180px}.left{left:0}.hero-meta{flex-wrap:wrap}.grid{grid-template-columns:repeat(3,1fr)}.strip>span:last-child{display:none}}@media(max-width:650px){header{height:auto;padding:20px;flex-wrap:wrap;gap:20px}.brand>span{font-size:15px}.profile{display:none}nav{gap:20px;width:100%;justify-content:space-between}main{padding:30px 20px}.hero{grid-template-columns:1fr}h1{font-size:48px}.showcase{min-height:390px;max-width:390px;width:100%;margin:auto}.tilt{width:195px}.left{left:15px}.right{right:15px}.features{grid-template-columns:1fr;gap:5px}.strip{gap:15px}.strip strong{font-size:19px}.strip>span{font-size:8px;max-width:95px}.section-title{gap:15px}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.grid .portrait{height:170px}.card h3{font-size:20px}.filters{flex-wrap:wrap}input{width:100%;flex:auto}#answers{grid-template-columns:1fr}.quizbox{padding:22px}footer{padding:25px 20px;gap:20px;flex-wrap:wrap}.hero-meta{font-size:9px}.orbit{width:320px;height:320px}}