:root{color-scheme:dark;--bg:#0c0b10;--muted:#99949f;--line:#ffffff15;--pink:#f48aa9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 28% 48%,#29203688,transparent 52%),var(--bg);color:#f5f0ed;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid var(--pink);outline-offset:5px}header{max-width:1280px;margin:auto;padding:24px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:1.8px;text-decoration:none;color:inherit}.brand>span:last-child{font-weight:400;color:var(--muted)}.mark{display:grid;place-items:center;width:34px;height:34px;background:#f28aa6;border-radius:10px;color:#21121b;font-size:23px;letter-spacing:-3px;padding-right:3px}.private{font-size:10px;letter-spacing:1.6px;color:#b5aeb7;display:flex;align-items:center;gap:10px}i{display:inline-block}.private i,.live i{width:5px;height:5px;border-radius:50%;background:#bbd3a7}.intro{padding:40px 0 24px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#b9a8b7}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(36px,4.2vw,58px);line-height:1.04;letter-spacing:-1.7px;margin:16px 0}h1 em{font-weight:400;color:#dda8bb}.intro p{font-size:13px;color:var(--muted)}main{max-width:1160px;margin:auto;padding:0 32px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:44px;align-items:start}.viewer{border:1px solid #ffffff14;border-radius:22px;background:radial-gradient(ellipse at 50% 48%,#3d2b4855,transparent 65%),linear-gradient(145deg,#1c1721,#111015);overflow:hidden}.viewer-head,.viewer-foot{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;gap:10px}.viewer-head{font-size:10px;letter-spacing:1.6px;color:#d4b6c5}.live{color:var(--muted);font-size:9px;letter-spacing:.5px;display:flex;gap:7px;align-items:center}.canvas-wrap{position:relative;width:100%;height:650px;max-height:75vh}canvas{width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}canvas:active{cursor:grabbing}.viewer-foot{color:#b4a9b4;font-size:11px;border-top:1px solid var(--line)}.text-btn{border:0;color:#d7c1cf;background:none;font-size:11px;padding:7px 0}#fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:88%;max-width:94%;object-fit:contain;border-radius:18px}#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;color:#b7a0b1;background:#18131c;font-size:12px}#loading span{width:22px;height:22px;border:1px solid #66505d;border-top-color:#fac1d3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}aside{padding-top:4px}.section-title{display:flex;align-items:center;gap:10px;margin:0 0 18px}.section-title>span{font-size:9px;color:#b58a9e;border:1px solid #ffffff20;border-radius:50%;width:23px;height:23px;display:grid;place-items:center}h2{font-weight:500;font-size:14px;margin:0}.rarities{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:30px}.rarities button{border:1px solid #ffffff17;background:#ffffff03;color:#e0d6de;display:flex;text-align:left;align-items:center;gap:9px;padding:14px 11px;border-radius:11px;position:relative;min-height:72px}.rarities button[aria-pressed=true]{border-color:#c392a8;background:#b56d8d14;box-shadow:inset 0 0 0 1px #ca8ba51a}.rarities button span{font-size:12px;font-weight:600}.rarities small{display:block;color:#a79aa6;font-size:9px;font-weight:400;margin-top:5px}.rarities b{position:absolute;right:9px;top:7px;font-size:8px;color:#7e6b79;font-weight:400}.dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;transform:rotate(45deg)}.common{background:#b7bac0}.rare{background:#8bc9e5}.epic{background:#c493ef}.legendary{background:#e5bb6e}.range-label{display:flex;justify-content:space-between;font-size:12px;color:#c7bbc6;margin:20px 0 10px}output{font-size:11px;color:#dfb1c5}input[type=range]{width:100%;height:4px;accent-color:#e4abc0;margin:8px 0 16px;cursor:pointer}.switch-row{border-top:1px solid var(--line);padding:15px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#c7bbc6}.switch-row input{accent-color:#d299b1;width:17px;height:17px;flex-shrink:0}.quality{display:flex;align-items:center;justify-content:space-between;font-size:11px;border-top:1px solid var(--line);padding:16px 0;color:#c7bbc6}select{background:#211a24;border:1px solid #ffffff20;color:#d9c9d5;padding:7px;border-radius:6px;font-size:11px}details{border-top:1px solid var(--line);padding:15px 0;font-size:11px;color:#bfb1bd}summary{cursor:pointer}.layer-list{display:grid;gap:12px;margin:18px 0}.layer-list label{display:flex;gap:8px;align-items:center}.layer-list input{accent-color:#d299b1}details p,.note{font-size:10px;line-height:1.6;color:#948591}.note{border-left:2px solid #775363;padding-left:12px}footer{display:flex;justify-content:space-between;gap:15px;padding:28px 0;font-size:9px;color:#81727e;letter-spacing:1.2px}@media(min-width:1000px){.intro{padding-top:42px}.canvas-wrap{height:650px}}@media(max-width:760px){header{padding:18px 20px}.brand{font-size:10px;gap:7px;letter-spacing:1.3px}.private{font-size:8px;letter-spacing:1px}main{padding:0 16px}.intro{padding:28px 6px 16px}.workspace{grid-template-columns:1fr;gap:28px}.canvas-wrap{height:min(145vw,650px);max-height:none}.viewer-head,.viewer-foot{padding:16px}.viewer-foot{font-size:10px}.rarities{grid-template-columns:repeat(4,1fr);gap:6px}.rarities button{padding:14px 8px;min-height:76px;display:block}.rarities button .dot{margin-bottom:7px}.rarities button span{display:block;font-size:11px}.rarities small{font-size:8px}.section-title{margin-bottom:14px}aside{padding:0 7px}footer{font-size:8px;line-height:1.7;flex-direction:column;gap:4px}}@media(prefers-reduced-motion:reduce){#loading span{animation:none}}
/* Fallback uses real separate artwork planes. The 3D parent has no flattening filters or clipping. */
.canvas-wrap{perspective:1200px}.css-card{position:absolute;width:min(72%,390px);aspect-ratio:1014/1551;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;pointer-events:none}.css-plane{position:absolute;inset:0;border-radius:24px;pointer-events:none}.css-plane img{width:100%;height:100%;object-fit:contain;border-radius:24px;display:block}.css-bg{transform:translateZ(var(--back,0px)) scale(1.04)}.css-tako{transform:translateZ(var(--front,0px))}.css-frame{transform:translateZ(var(--frame,0px))}.css-foil{transform:translateZ(calc(var(--back,0px) + 1px));background:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff9,transparent 45%),repeating-linear-gradient(125deg,#40e3ff77 0%,#ad70ff66 15%,#ff9fc877 30%,#e9d57555 45%,#40e3ff77 60%);background-size:100% 100%,220% 220%;background-position:center,var(--lx,50%) var(--ly,50%);mix-blend-mode:screen;opacity:var(--foil,0)}.css-varnish{transform:translateZ(calc(var(--front,0px) + 1px));background:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#f1e9ffbb,transparent 38%);mask-image:var(--tako-mask, url(assets/tako.png));-webkit-mask-image:var(--tako-mask, url(assets/tako.png));mask-size:100% 100%;-webkit-mask-size:100% 100%;mix-blend-mode:screen;opacity:var(--gloss,0)}.css-metal{transform:translateZ(calc(var(--frame,0px) + 1px));background:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff2c4,transparent 58%);mask-image:url(assets/frame.png);-webkit-mask-image:url(assets/frame.png);mask-size:100% 100%;-webkit-mask-size:100% 100%;mix-blend-mode:screen;opacity:var(--metal,0)}.input-overlay{position:absolute;inset:0;z-index:5;opacity:0}@media(max-width:760px){.css-card{width:77%}}
.css-bg{transform:translateZ(var(--back,0px))}
.css-card[data-effect=cyan] .css-foil{background-image:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#bdefffcc,transparent 45%),repeating-linear-gradient(125deg,#27c9ff66 0%,#90cfff44 20%,#f1e6ca66 36%,#b092ff55 50%,#27c9ff66 65%)}.css-card[data-effect=prism] .css-foil{background-image:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff9,transparent 40%),repeating-conic-gradient(from 35deg at var(--lx,50%) var(--ly,50%),#e984ff88 0deg,#67eaff66 15deg,#eddc8b66 30deg,#e984ff88 45deg)}.css-card[data-effect=gold] .css-foil{background-image:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#ffebbaaa,transparent 40%),repeating-linear-gradient(125deg,#f9d77888 0%,#fff6cc66 15%,#c9975f55 30%,#b58ad044 45%,#f9d77888 60%)}
/* Stronger, angle-driven surface identities; preserve the central face. */
.css-foil{background-size:100% 100%,160% 160%;background-position:var(--lx) var(--ly),var(--grainx) var(--grainy);mix-blend-mode:color-dodge}
.css-laminate{transform:translateZ(calc(var(--front,0px) + 2px));opacity:var(--surface,0);mix-blend-mode:screen;background-size:220% 220%;background-position:var(--grainx,50%) var(--grainy,50%);mask-image:radial-gradient(ellipse at 55% 49%,#0003 0%,#0006 25%,#000 62%);-webkit-mask-image:radial-gradient(ellipse at 55% 49%,#0003 0%,#0006 25%,#000 62%)}
.css-card[data-effect=cyan] .css-laminate{background-image:repeating-linear-gradient(var(--sweep,115deg),transparent 0%,#1487bd44 12%,#4cecff 20%,#c3f9ff 23%,#5f9cf5 29%,transparent 39%,transparent 53%)}
.css-card[data-effect=prism] .css-laminate{background-image:repeating-linear-gradient(var(--sweep,115deg),#fd56e6 0%,#7859ff 11%,#40dcff 22%,#6ef2b8 33%,#ffdf62 44%,#ff7d9e 55%,#fd56e6 66%);background-blend-mode:screen}
.css-card[data-effect=gold] .css-laminate{background-image:repeating-linear-gradient(var(--sweep,115deg),transparent 0%,#d6872588 11%,#ffe48c 21%,#fff2c7 24%,#edb04d 29%,#ad80ef66 37%,transparent 49%)}
.css-card[data-effect=prism] .css-foil{background-image:repeating-conic-gradient(from var(--sweep,115deg) at var(--lx,50%) var(--ly,50%),#f656ffbb 0deg,#6849ff88 12deg,#58e7ffbb 24deg,#ffe58888 36deg,#f656ffbb 48deg)}
.css-card[data-effect=gold] .css-foil{background-image:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff4cdcc,transparent 48%),repeating-linear-gradient(var(--sweep,115deg),#eeae4277 0%,#ffe9aacc 12%,#b96c2477 24%,#7bb6e477 36%,#eeae4277 48%)}
.css-metal{background-image:linear-gradient(var(--sweep,115deg),transparent 8%,#7a4a1644 23%,#fff9da 38%,#e6a142 47%,transparent 61%,#fff2bf 78%,transparent 93%);background-size:180% 180%;background-position:var(--grainx) var(--grainy);mix-blend-mode:color-dodge}
.css-stars{transform:translateZ(calc(var(--frame,0px) + 2px));opacity:var(--spark,0);mix-blend-mode:screen;background-image:radial-gradient(ellipse 2px 8px at 18% 21%,#fffbea 10%,transparent 100%),radial-gradient(ellipse 8px 2px at 18% 21%,#fffbea 10%,transparent 100%),radial-gradient(ellipse 2px 7px at 82% 32%,#fffbea 10%,transparent 100%),radial-gradient(ellipse 7px 2px at 82% 32%,#fffbea 10%,transparent 100%),radial-gradient(ellipse 2px 9px at 23% 75%,white 10%,transparent 100%),radial-gradient(ellipse 9px 2px at 23% 75%,white 10%,transparent 100%),radial-gradient(ellipse 2px 6px at 77% 86%,#fffbea 10%,transparent 100%),radial-gradient(ellipse 6px 2px at 77% 86%,#fffbea 10%,transparent 100%),radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff2 0%,transparent 60%)}
.css-card[data-effect=cyan] .css-stars{display:none}
.css-card[data-effect=cyan] .css-foil:after,.css-card[data-effect=prism] .css-foil:after,.css-card[data-effect=gold] .css-foil:after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(128deg,#fff6 0 1px,transparent 1px 5px),repeating-linear-gradient(38deg,#03162c55 0 1px,transparent 1px 11px);background-position:var(--grainx,50%) var(--grainy,50%);opacity:.4}.css-card[data-effect=cyan] .css-foil:after{opacity:.18}

.css-metal{mask-image:var(--frame-mask,url(assets/frame.png));-webkit-mask-image:var(--frame-mask,url(assets/frame.png))}.rarities{grid-template-columns:repeat(3,minmax(0,1fr))}.rarities button{display:block;padding:14px 9px}.rarities button .dot{margin-bottom:7px}.rarities button span{display:block}.rare{background:#c493ef}.common{background:#8bc9e5}@media(max-width:760px){.rarities{grid-template-columns:repeat(3,minmax(0,1fr))}}
[hidden]{display:none!important}.chromatic-panel{margin:0 0 26px;padding:16px;border:1px solid #a891bc55;background:linear-gradient(130deg,#8b6ca612,#67ded80c);border-radius:12px}.chromatic-title{font-size:9px;letter-spacing:1.3px;color:#d5c0df;display:flex;align-items:center;justify-content:space-between;gap:8px}.chromatic-title span{font-size:8px;border:1px solid #a991b755;padding:3px 5px;border-radius:4px}.chromatic-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.chromatic-grid button{display:flex;align-items:center;gap:7px;padding:10px 7px;background:#ffffff04;border:1px solid #ffffff20;color:#d8cedc;font-size:11px;border-radius:8px}.chromatic-grid button[aria-pressed=true]{border-color:#c1a4d5;background:#c1a4d515}.chromatic-grid i{width:11px;height:11px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff55}.chromatic-panel p{font-size:10px;line-height:1.6;color:#c5b8ce;margin:12px 0}.original-skin{display:flex;align-items:center;gap:7px;font-size:10px;color:#d3c4d9}.original-skin input{accent-color:#bfa0d3}.chromatic-panel .chroma-note{font-size:9px;color:#92859c;margin-bottom:0}.common{background:#dfb660}.epic{background:#bd8ee9}.legendary{background:linear-gradient(135deg,#cef9ef,#b79af2,#f2b7de)}
.css-card[data-effect=chromatic] .css-foil{background-image:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),var(--chroma-tint),transparent 55%),repeating-conic-gradient(from var(--sweep,115deg) at var(--lx,50%) var(--ly,50%),#c2fff9aa 0deg,#ac92eebb 20deg,#f4a7d788 40deg,#b0ecfaaa 60deg,#c2fff9aa 80deg);mix-blend-mode:screen}
.css-card[data-effect=chromatic] .css-laminate{background-image:repeating-linear-gradient(var(--sweep,115deg),#9becec 0%,#b3a0f3 15%,#ffd5ed 30%,var(--chroma-tint) 45%,#9becec 60%);mix-blend-mode:screen;mask-image:radial-gradient(ellipse at 55% 49%,#0002 0%,#0005 25%,#000 65%);-webkit-mask-image:radial-gradient(ellipse at 55% 49%,#0002 0%,#0005 25%,#000 65%)}
.css-card[data-effect=chromatic] .css-varnish{background:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff9eecc,var(--chroma-tint) 20%,transparent 55%)}
.foil-title{font-size:9px;letter-spacing:1.3px;color:#c8b5d5;margin:18px 0 10px}.foil-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.foil-grid button{padding:9px 3px;border:1px solid #ffffff25;border-radius:7px;background:#ffffff04;color:#d2c4dc;font-size:10px}.foil-grid button[aria-pressed=true]{border-color:#b99fce;background:#b99fce20}
/* Chromatic surface finishes only sample the character silhouette: the room stays untouched. */
.css-card[data-effect=chromatic] .css-foil{display:none}
.css-card[data-effect=chromatic] .css-laminate,.css-card[data-effect=chromatic] .css-stars{mask-image:var(--tako-mask, url(assets/tako.png));-webkit-mask-image:var(--tako-mask, url(assets/tako.png));mask-size:100% 100%;-webkit-mask-size:100% 100%}
.css-card[data-effect=chromatic] .css-laminate{opacity:var(--chroma-power,0);background-blend-mode:normal;mix-blend-mode:screen}
.css-card[data-effect=chromatic][data-chroma-foil=chameleon] .css-laminate{background-image:repeating-linear-gradient(var(--sweep,115deg),transparent 0%,transparent 14%,#58ddff66 22%,#c0a4ffbb 27%,#ffd9f588 32%,#ffdf8d44 38%,transparent 47%,transparent 65%);background-size:210% 210%;background-position:var(--grainx,50%) var(--grainy,50%)}
.css-card[data-effect=chromatic][data-chroma-foil=crystal] .css-laminate{opacity:calc(var(--chroma-power,0)*.55);background-image:repeating-conic-gradient(from var(--sweep,115deg),#9ce8ff99 0deg,transparent 50deg,#d6b4ff88 90deg,transparent 140deg,#ffe3f599 180deg,transparent 230deg,#b9fff888 270deg,transparent 320deg,#9ce8ff99 360deg),repeating-linear-gradient(135deg,transparent 0 16px,#fff9 16px 17px,transparent 17px 34px);background-size:32px 42px,34px 34px;background-position:0 0,var(--grainx,50%) var(--grainy,50%)}
.css-card[data-effect=chromatic][data-chroma-foil=cosmos] .css-laminate{opacity:calc(var(--chroma-power,0)*.28);background-image:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff9,transparent 24%),repeating-linear-gradient(var(--sweep,115deg),transparent 0 30%,#9dbaff88 40%,transparent 50%);background-size:100% 100%,220% 220%}
.css-card[data-effect=chromatic] .css-stars{transform:translateZ(calc(var(--front,0px) + 3px));opacity:calc(var(--spark,0)*var(--star-light,1));background-image:radial-gradient(ellipse 1px 4px at 9px 12px,#fff 0%,transparent 100%),radial-gradient(ellipse 4px 1px at 9px 12px,#fff 0%,transparent 100%),radial-gradient(circle at 27px 39px,#c9f6ff 0 .6px,transparent 1.4px),radial-gradient(circle at 38px 22px,#f2d6ff 0 .7px,transparent 1.5px);background-size:47px 61px,47px 61px,43px 53px,59px 67px}
.css-card[data-effect=chromatic] .css-varnish{background:radial-gradient(ellipse at var(--lx,50%) var(--ly,50%),#fff9f2aa,transparent 27%);opacity:calc(var(--chroma-power,0)*.22)}
.css-card[data-effect=chromatic][data-chroma-foil=chameleon] .css-laminate,.css-card[data-effect=chromatic][data-chroma-foil=crystal] .css-laminate{mix-blend-mode:normal}
.cosmos-scope{display:flex;align-items:flex-start;gap:7px;font-size:10px;line-height:1.6;color:#e5d6ef;margin:10px 0 14px}.cosmos-scope input{accent-color:#d3bddf;flex-shrink:0;margin-top:2px}.css-cosmos-back,.css-cosmos-front{display:none}
/* Cosmos exterior: a real layer behind Tako plus a frame-only layer; no foil ever crosses the character. */
.css-card[data-cosmos-exterior=true] .css-laminate,.css-card[data-cosmos-exterior=true] .css-stars,.css-card[data-cosmos-exterior=true] .css-varnish{display:none}
.css-card[data-cosmos-exterior=true] .css-cosmos-back,.css-card[data-cosmos-exterior=true] .css-cosmos-front{display:block;mix-blend-mode:screen;opacity:calc(var(--chroma-power,0)*(.55 + var(--star-light,1)*.45));background-image:radial-gradient(ellipse 1.1px 5px at 9px 12px,#fffbe5 0%,transparent 100%),radial-gradient(ellipse 5px 1.1px at 9px 12px,#fffbe5 0%,transparent 100%),radial-gradient(circle at 28px 38px,#bee9ff 0 .8px,transparent 1.7px),radial-gradient(circle at 40px 21px,#f3c9ff 0 .6px,transparent 1.4px),radial-gradient(ellipse 1px 8px at 76% 19%,white 0%,transparent 100%),radial-gradient(ellipse 8px 1px at 76% 19%,white 0%,transparent 100%);background-size:59px 73px,59px 73px,47px 61px,71px 83px,100% 100%,100% 100%}
.css-card[data-cosmos-exterior=true] .css-cosmos-back{transform:translateZ(calc(var(--back,0px) + 2px));opacity:calc(var(--chroma-power,0)*(.55 + var(--star-light,1)*.45)*var(--back-visible,1))}
.css-card[data-cosmos-exterior=true] .css-cosmos-front{transform:translateZ(calc(var(--frame,0px) + 3px));mask-image:url(assets/frame.png);-webkit-mask-image:url(assets/frame.png);mask-size:100% 100%;-webkit-mask-size:100% 100%;opacity:calc(var(--chroma-power,0)*(.55 + var(--star-light,1)*.45)*var(--frame-visible,1))}
.fixed-finish{display:flex;justify-content:space-between;gap:8px;padding:12px;border:1px solid #c6a5db66;border-radius:8px;background:#c6a5db12;color:#e7d5f0;font-size:10px;letter-spacing:.5px}.fixed-finish span{font-size:8px;color:#b8cfa9}
/* Legendary has no animated wash, moving shadow or metal sweep: only small fixed holo motifs. */
.css-card[data-cosmos-exterior=true] .css-metal{display:none}
.css-card[data-cosmos-exterior=true] .css-cosmos-back,.css-card[data-cosmos-exterior=true] .css-cosmos-front{background-image:var(--cosmos-texture);background-size:100% 100%;background-repeat:no-repeat;background-position:0 0;filter:hue-rotate(var(--cosmos-hue,0deg));mix-blend-mode:screen}
.css-card[data-cosmos-exterior=true] .css-cosmos-back{opacity:calc(var(--chroma-power,0)*var(--back-visible,1))}
.css-card[data-cosmos-exterior=true] .css-cosmos-front{opacity:calc(var(--chroma-power,0)*var(--frame-visible,1))}
/* High-rarity material: saturated spectral colour replaces light locally instead of whitening the scene. */
.css-card[data-cosmos-exterior=true] .css-cosmos-back,.css-card[data-cosmos-exterior=true] .css-cosmos-front{mix-blend-mode:normal;filter:hue-rotate(var(--cosmos-hue,0deg)) saturate(1.22)}

/* Keep each finish attached to its artwork plane, as with Cosmos. */
.css-card:is([data-effect=gold],[data-effect=prism]) :is(.css-laminate,.css-varnish,.css-stars){display:none}
.css-card:is([data-effect=gold],[data-effect=prism]) .css-foil{
  mix-blend-mode:normal;
  background-size:100% 100%;
  background-position:center;
  transform:translateZ(calc(var(--back,0px) + 2px)) scale(1.04);
}
.css-card[data-effect=gold] .css-foil{
  background-image:repeating-linear-gradient(125deg,#eeae4255 0%,#ffe9aa88 12%,#b96c2433 24%,#7bb6e455 36%,#eeae4255 48%);
}
.css-card[data-effect=prism] .css-foil{
  background-image:repeating-conic-gradient(from 115deg at 50% 50%,#f656ff88 0deg,#6849ff55 12deg,#58e7ff88 24deg,#ffe58855 36deg,#f656ff88 48deg);
}
.css-card:is([data-effect=gold],[data-effect=prism]) .css-foil::after{background-position:center}
.css-card:is([data-effect=gold],[data-effect=prism]) .css-metal{
  mix-blend-mode:normal;
  opacity:calc(var(--metal,0)*.45);
}

.archive { margin: 36px 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #16121b; }
.archive-actions, .archive-fields, .archive li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.archive-fields label { display: grid; gap: 6px; min-width: 0; }
.archive-fields .archive-toggle { display: flex; align-items: center; }
.archive input:not([type=checkbox]), .archive button { color: inherit; background: #201a27; border: 1px solid #ffffff30; border-radius: 8px; padding: 9px 12px; max-width: 100%; }
.archive button:disabled { opacity: .55; cursor: wait; }
.archive .archive-primary { background: var(--pink); color: #20131b; font-weight: 700; }
.archive form { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.archive details { margin: 14px 0; }
.archive details button { margin-top: 12px; }
.archive ul { padding: 0; list-style: none; }
.archive li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.archive li strong { margin-right: auto; overflow-wrap: anywhere; }
#archiveStatus { min-height: 1.4em; color: #efabc0; }