@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--ink:#e7eaf0;--muted:#a3adbc;--green:#9baee0;--paper:#151922}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}header{padding:27px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e7e8e2}.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:21px}.logo{background:var(--green);border-radius:10px;padding:3px 9px;font-size:30px}.beta{font-size:9px;letter-spacing:2px;border-left:1px solid #ccc;padding-left:15px;margin-left:10px}nav{display:flex;gap:30px;font-size:14px}button{border:0;background:none;color:inherit}main{max-width:1500px;margin:auto;padding:0 5%}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;padding:65px 0 70px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700}h1{font-family:Manrope,sans-serif;font-size:clamp(42px,5.5vw,80px);letter-spacing:-4px;line-height:1.09;margin:22px 0}h1 em{font-style:normal;background:var(--green);border-radius:12px;padding:0 12px}p{color:var(--muted);line-height:1.8;font-size:15px}.primary{display:inline-flex;gap:45px;align-items:center;justify-content:space-between;background:var(--ink);color:white;padding:17px 23px;border-radius:10px;font-weight:600;font-size:14px;margin:16px 0}.note{font-size:11px;color:var(--muted);margin-top:9px}.note i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#68a754;margin-right:6px}.hero-art{height:400px;border-radius:32px;background:#eeeae3;position:relative;overflow:hidden}.hero-art img{width:100%;height:100%;object-fit:cover}.floating{position:absolute;bottom:24px;left:24px;background:#ffffffdf;backdrop-filter:blur(8px);border-radius:12px;padding:16px 20px;font-size:12px;line-height:1.7}.spark{position:absolute;right:25px;top:10px;color:var(--green);font-size:85px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-title h2{font:700 26px Manrope;letter-spacing:-1px}.section-title>span{font-size:12px;color:var(--muted)}#total{font:500 12px 'DM Sans';background:#e9ebe2;padding:6px 9px;border-radius:20px;margin-left:12px;vertical-align:middle}.toolbar{display:flex;gap:12px;margin:20px 0}.search{display:flex;align-items:center;flex:1;background:white;border:1px solid #dddeda;border-radius:12px;padding:0 16px;gap:10px}.search span{font-size:27px}.search input{width:100%;border:0;padding:17px 0;outline:none;background:none}select{border:1px solid #dddeda;border-radius:12px;padding:12px;background:white;color:var(--ink)}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.chips button{padding:9px 18px;border:1px solid #dedfd8;border-radius:30px;font-size:12px}.chips .active{background:var(--ink);color:white;border-color:var(--ink)}.results{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:22px 0}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px 18px}.card{min-width:0}.image-box{position:relative;background:#edece7;border-radius:18px;overflow:hidden;aspect-ratio:1.12}.open-piece{width:100%;height:100%;padding:0;display:block}.image-box img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.card:hover img{transform:scale(1.07)}.save{position:absolute;right:12px;top:12px;border-radius:50%;background:#ffffffda;width:31px;height:31px;font-size:18px}.free{position:absolute;left:12px;bottom:12px;background:#ffffffd9;padding:5px 9px;border-radius:6px;font-size:10px}.card h3{font-size:14px;line-height:1.4;margin:13px 0 5px}.meta{display:flex;justify-content:space-between;gap:6px;font-size:10px;color:var(--muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;border:1px solid #0002}.load{display:block;border:1px solid #d8dacf;padding:14px 35px;border-radius:10px;margin:40px auto}.closing{display:grid;grid-template-columns:.3fr 1fr 1fr;align-items:center;margin-top:70px;padding:45px;background:#ecefe4;border-radius:24px;gap:30px}.closing>span{font-size:80px}.closing h2{font:700 30px Manrope;letter-spacing:-1px}.closing p{font-size:14px}footer{display:flex;justify-content:space-between;gap:20px;margin:65px 5% 30px;font-size:11px;color:var(--muted)}footer b{color:var(--ink)}dialog{border:0;border-radius:24px;padding:40px;width:min(1100px,95vw);max-height:92vh;color:var(--ink)}dialog::backdrop{background:#17202799;backdrop-filter:blur(6px)}.close{position:absolute;right:15px;top:10px;font-size:30px;z-index:5}.detail-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:35px}#viewer{height:440px;position:relative;border-radius:18px;overflow:hidden;background:#eeeae3}#viewer img{width:100%;height:100%;object-fit:cover}#viewer canvas{display:block;width:100%;height:100%}#viewerStatus{position:absolute;bottom:20px;left:20px;font-size:12px}.view-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:15px;font-size:12px}.view-controls button{border:1px solid #ddd;border-radius:8px;padding:10px}.view-controls label{display:flex;align-items:center;gap:6px}.piece-info h2{font:700 30px Manrope}.piece-info hr{border:0;border-top:1px solid #eee;margin:25px 0}.fine{font-size:11px}.piece-info h3{font-size:14px}#sets{font-size:12px;line-height:1.9;max-height:140px;overflow:auto}#aboutDialog{max-width:600px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #87b435;outline-offset:3px}@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}.beta{display:none}.hero{gap:20px}.hero-art{height:330px}.detail-layout{grid-template-columns:1fr}#viewer{height:350px}}@media(max-width:600px){header{padding:20px 5%}nav{display:none}.brand{font-size:18px}.hero{grid-template-columns:1fr;padding:40px 0}.hero-art{height:270px}h1{letter-spacing:-2px;font-size:48px}.section-title>span{display:none}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}select{flex:1;min-width:0}.grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}.closing{grid-template-columns:1fr;padding:25px;gap:0}.closing>span{font-size:45px}footer{flex-direction:column}.card h3{font-size:12px}dialog{padding:35px 18px}.meta{flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Refine the existing library layout with a charcoal theme. */
:root{color-scheme:dark}header{border-color:#303744}.logo{background:none;color:var(--green);font:800 22px Manrope;padding:5px 0;letter-spacing:-2px}.beta{border-color:#434b59}h1{font-size:clamp(40px,4.6vw,67px);letter-spacing:-3px}h1 em{background:#34405d;color:#dce5ff;box-decoration-break:clone}.primary,.chips .active{background:var(--green);color:#151922}.note i{background:var(--green)}.hero-art,.image-box,#viewer{background:#202631}.floating,.save,.free{background:#222936ed;color:var(--ink)}#total{background:#303848}.search,select{background:#202631;border-color:#3b4454}.search input{color:var(--ink)}.search input::placeholder{color:#9ca6b5}.chips button,.load,.view-controls button{border-color:#455064}.closing{background:#232b3a}dialog{background:#1c222d}.piece-info hr{border-color:#3b4454}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-color:var(--green)}.material-palette{margin-top:20px}.palette-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12px}.palette-heading span{color:var(--green)}#materialColors{display:grid;grid-template-columns:repeat(auto-fill,minmax(25px,1fr));gap:8px;padding:25px 5px 10px;max-height:230px;overflow:auto}.color-swatch{position:relative;height:26px;border-radius:5px;background:var(--swatch);border:1px solid #ffffff50;box-shadow:inset 0 0 0 1px #0002}.color-swatch[aria-pressed=true]{outline:2px solid var(--green);outline-offset:2px}.color-tooltip{display:none;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#080c14;color:#fff;padding:5px 8px;border-radius:4px;font-size:10px;white-space:nowrap;z-index:10;pointer-events:none}.color-swatch:hover .color-tooltip,.color-swatch:focus-visible .color-tooltip{display:block}.color-swatch:nth-child(14n+1) .color-tooltip{left:0;transform:none}.color-swatch:nth-child(14n) .color-tooltip{left:auto;right:0;transform:none}.palette-note{font-size:10px;margin:5px 0}@media(max-width:600px){h1{font-size:42px;letter-spacing:-2px}}

h1{line-height:1.3}h1 em{display:inline-block;margin-top:12px}
.image-box{aspect-ratio:900/506}.image-box img,.hero-art img,#viewer img{object-fit:contain}
.chips button{display:inline-flex;align-items:center;gap:7px}.chips svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.hero-art .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;object-fit:contain}.hero-art .hero-slide.visible{opacity:1}.hero-gallery-controls{position:absolute;bottom:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:3}.hero-gallery-dots{display:flex;gap:8px;padding:10px;border-radius:20px;background:#151922ba}.hero-gallery-dots button{padding:0;width:8px;height:8px;border-radius:50%;background:#ffffff70}.hero-gallery-dots button[aria-pressed=true]{background:#fff}.hero-pause{width:32px;height:32px;background:#151922ba;border-radius:50%;color:white}.hero-art .spark{display:none}@media(prefers-reduced-motion:reduce){.hero-art .hero-slide{transition:none}}

.color-swatch:disabled{opacity:.32;cursor:default}.color-swatch:disabled .color-tooltip{display:none}.view-controls button:disabled{opacity:.45;cursor:default}

.material-palette[hidden]{display:none}
#detailImage{cursor:zoom-in}.enlarged-preview{width:96vw;max-width:none;height:94vh;max-height:94vh;padding:12px;background:#171b23;cursor:zoom-out}.enlarged-preview img{width:100%;height:100%;object-fit:contain;display:block}.enlarged-preview::backdrop{background:#080b10ed}
#detail{cursor:default}#detail .piece-info,#detail .piece-info p,#detail .piece-info h2,#detail .piece-info h3,#sets,#pieceColor{cursor:default}#detail button,#detail a{cursor:pointer}

#color[hidden]{display:none}.new-badge{position:absolute;top:12px;left:12px;background:#9baee0;color:#151922;padding:5px 9px;border-radius:6px;font-size:11px;font-weight:700}
h1{letter-spacing:normal}
.subscribe-button{border:1px solid #9baee0;border-radius:9px;padding:10px 14px;font-size:12px}.subscribe-dialog{width:min(620px,95vw);padding:42px 16px 16px;background:#fff}@media(max-width:600px){.section-title{flex-wrap:wrap}}
.donate-button{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #616b80;border-radius:8px;color:var(--ink);white-space:nowrap}.donate-button:hover{border-color:var(--green);background:#263047}.donate-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}footer{flex-wrap:wrap;align-items:center}
.community-actions{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 38px}.community-actions .community-action{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;min-width:240px;padding:18px 24px;border:1px solid #7084ba;border-radius:14px;background:#27334e;color:#f1f4ff;font-size:16px;font-weight:700;box-shadow:0 5px 18px #0002;transition:background .2s,transform .2s}.community-actions .community-action:hover{background:#344466;transform:translateY(-2px);border-color:#abbbe6}.community-actions .community-action svg{width:32px;height:32px;flex-shrink:0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}@media(max-width:600px){.community-actions{gap:12px}.community-actions .community-action{min-width:100%;font-size:15px;padding:15px 18px}}

.community-actions{margin-bottom:20px}.browse-action{display:flex;justify-content:center;margin-bottom:48px}.browse-action .primary{display:flex;align-items:center;gap:24px}.community-actions .community-action svg{width:38px;height:38px}