@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./archivo-vietnamese-wdth-normal-rJmnGBSt.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./archivo-latin-ext-wdth-normal-7khWdh9v.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(./archivo-latin-wdth-normal-DY7AcnAa.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg:#f1f1f3;--surface:#fff;--sunken:#e8e8ec;--ink:#17171c;--muted:#5d5e6b;--line:#d9d9e0;--brand:#c8246b;--brand-deep:#9c1a52;--brand-ink:#fff;--brand-soft:#fae3ed;--radius:10px;--font:"Archivo Variable", "Archivo", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#141418;--surface:#1e1e24;--sunken:#26262e;--ink:#ececf1;--muted:#9c9cab;--line:#31313a;--brand:#e2447f;--brand-deep:#b12a5e;--brand-soft:#3b1929;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;flex-direction:column;margin:0;display:flex}#app{display:contents}a{color:inherit}button,input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}p{margin:0}.top{z-index:2;align-items:center;width:100%;max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;position:relative}.brand{color:var(--brand);align-items:center;gap:8px;font-size:1.2rem;font-weight:800;font-stretch:125%;text-decoration:none;display:flex}.tools{gap:2px;margin-left:auto;display:flex}.tools a,.tools button{isolation:isolate;width:40px;height:40px;color:var(--muted);cursor:pointer;background:0 0;border:0;place-items:center;display:grid;position:relative}.tools a:before,.tools button:before{content:"";z-index:-1;border-radius:8px;position:absolute;inset:2px}.tools a:hover,.tools button:hover{color:var(--ink)}.tools a:hover:before,.tools button:hover:before{background:var(--sunken)}.tools :focus-visible{outline:none}.tools :focus-visible:before{box-shadow:0 0 0 2px var(--brand)}.page{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:start;gap:64px;width:100%;max-width:1120px;margin:0 auto;padding:24px 24px 56px;display:grid}.intro{max-width:40rem;margin-bottom:40px}.intro h1{letter-spacing:-.015em;text-wrap:balance;margin:0 0 12px;font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;font-stretch:112%;line-height:1.04}.intro p{color:var(--muted);font-size:1.08rem}.intro .totals{font-variant-numeric:tabular-nums;margin-top:14px;font-size:.95rem}.totals strong{color:var(--ink);font-weight:700}.settings{flex-direction:column;gap:26px;display:flex}.field{border:0;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;display:flex}.field>span,.field legend{padding:0;font-weight:650}.field em{color:var(--muted);font-style:normal;font-weight:400}.field small{color:var(--muted);font-size:.87rem}.field small a{align-items:center;gap:2px;display:inline-flex}input:not([type]){border:1px solid var(--line);background:var(--surface);border-radius:8px;width:100%;padding:10px 12px}input:not([type]):focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:0}.swatches{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.swatch{cursor:pointer;border:0;border-radius:50%;width:30px;height:30px;box-shadow:inset 0 0 0 1px #00000026}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink)}.custom-colour{align-items:center;gap:14px;display:flex}.hue{appearance:none;cursor:pointer;background:linear-gradient(90deg,#c32222,#c3c322,#22c322,#22c3c3,#2222c3,#c322c3,#c32225);border-radius:6px;flex:1;height:12px;margin:0}.hue::-webkit-slider-thumb{appearance:none;background:0 0;border:3px solid #fff;border-radius:50%;width:22px;height:22px;box-shadow:0 0 0 1px #0000004d,0 1px 3px #0000004d}.hue::-moz-range-thumb{background:0 0;border:3px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 1px #0000004d,0 1px 3px #0000004d}.hex-field{border:1px solid var(--line);background:var(--surface);border-radius:8px;align-items:center;gap:8px;width:9rem;padding:0 10px;display:flex}.hex-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.hex-field i{border-radius:50%;flex:none;width:16px;height:16px;box-shadow:inset 0 0 0 1px #0003}.hex-field input{font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0;width:100%;padding:9px 0}.styles{flex-wrap:wrap;gap:8px;display:flex}.style-option{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:8px;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;display:flex}.style-option input{opacity:0;pointer-events:none;position:absolute}.style-option span{color:var(--muted);font-size:.85rem}.style-option:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}.style-option:has(input:checked) span{color:var(--ink)}.style-option:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}.output{flex-direction:column;gap:28px;margin-top:-92px;display:flex;position:sticky;top:0}.hanger{flex-direction:column;align-items:center;display:flex}.lanyard{z-index:1;width:140px;margin-bottom:-14px;display:block;position:relative}.card{background:var(--surface);border-radius:16px;width:min(100%,340px);overflow:hidden;transform:rotate(-1.5deg);box-shadow:0 1px 2px #00000014,0 18px 40px -18px #00000059}.card-band{background:var(--brand);color:var(--brand-ink);padding:30px 20px 12px;font-weight:700;font-stretch:118%;position:relative}.slot{background:var(--bg);border-radius:4px;width:36px;height:8px;margin-left:-18px;position:absolute;top:10px;left:50%}.card-body{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 22px;display:flex}.card-name{overflow-wrap:anywhere;max-width:100%;font-size:1.7rem;font-weight:800;font-stretch:118%;line-height:1.1}.card-badge{max-width:100%;height:28px}.card-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.93rem}.snippets{flex-direction:column;gap:8px;display:flex}.snippet{border:1px solid var(--line);background:var(--surface);border-radius:8px;grid-template-columns:5.5rem minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 6px 6px 12px;display:grid}.snippet-name{color:var(--muted);font-size:.85rem;font-weight:650}.snippet code{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.snippet button{background:var(--sunken);cursor:pointer;border:0;border-radius:6px;place-items:center;width:34px;height:34px;display:grid}.snippet button:hover{background:var(--brand-soft);color:var(--brand)}.snippet button.is-done{background:var(--brand);color:var(--brand-ink)}.snippets-empty{color:var(--muted);text-align:center}.bottom{border-top:1px solid var(--line);width:100%;max-width:1120px;color:var(--muted);flex-wrap:wrap;gap:4px 20px;margin:0 auto;padding:16px 24px 20px;font-size:.88rem;display:flex}.bottom .spacer{flex:1}.bottom a{text-decoration:none}.bottom a:hover{color:var(--ink);text-decoration:underline}.left{min-width:0}@media (width<=860px){.page{grid-template-columns:1fr;gap:40px}.output{margin-top:0;position:static}.lanyard{display:none}.card{transform:none}}@media (width<=520px){.top,.page,.bottom{padding-left:16px;padding-right:16px}.snippet{grid-template-columns:minmax(0,1fr) auto}.snippet-name{grid-column:1/-1}}.hex-field input:not([type]):focus{box-shadow:none}