.block-skin-visual{
  --cube-a:#64748b;--cube-b:#334155;--cube-c:#0f172a;--cube-d:#cbd5e1;
  position:relative;display:grid;box-sizing:border-box;flex:none;place-items:stretch;
  filter:drop-shadow(0 8px 10px rgba(15,23,42,.16));
}
.block-skin-visual--single{width:48px;height:48px;padding:5px}
.block-skin-visual--quad{width:112px;height:112px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:6px;padding:8px}
.block-skin-visual>i{--cube-color:var(--cube-a);position:relative;display:block;min-width:0;min-height:0;border:1px solid rgba(255,255,255,.48);border-radius:24%;background:var(--cube-color);background:linear-gradient(145deg,color-mix(in srgb,var(--cube-color),white 42%) 0%,var(--cube-color) 46%,color-mix(in srgb,var(--cube-color),black 28%) 100%);box-shadow:inset 2px 2px 2px rgba(255,255,255,.34),inset -3px -4px 5px rgba(15,23,42,.25),0 3px 6px rgba(15,23,42,.22);overflow:hidden}
.block-skin-visual>i:before{position:absolute;inset:9% 12% auto;height:28%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));content:"";transform:rotate(-7deg)}
.block-skin-visual>i:after{position:absolute;right:8%;bottom:8%;width:24%;height:24%;border-radius:50%;background:rgba(255,255,255,.16);content:"";filter:blur(1px)}
.block-skin-visual>i:nth-child(2){--cube-color:var(--cube-b)}
.block-skin-visual>i:nth-child(3){--cube-color:var(--cube-c)}
.block-skin-visual>i:nth-child(4){--cube-color:var(--cube-d)}
.block-skin-visual.aurora{--cube-a:#38bdf8;--cube-b:#8b5cf6;--cube-c:#22d3ee;--cube-d:#c084fc}
.block-skin-visual.candy{--cube-a:#f472b6;--cube-b:#fb923c;--cube-c:#facc15;--cube-d:#a78bfa}
.block-skin-visual.neon{--cube-a:#22d3ee;--cube-b:#14b8a6;--cube-c:#38bdf8;--cube-d:#34d399}
.block-skin-visual.lagoon{--cube-a:#0ea5e9;--cube-b:#10b981;--cube-c:#06b6d4;--cube-d:#2dd4bf}
.block-skin-visual.starlight{--cube-a:#facc15;--cube-b:#6366f1;--cube-c:#38bdf8;--cube-d:#c4b5fd}
.block-skin-visual.void{--cube-a:#312e81;--cube-b:#a855f7;--cube-c:#111827;--cube-d:#7e22ce}
.block-skin-visual.phoenix{--cube-a:#f97316;--cube-b:#dc2626;--cube-c:#fbbf24;--cube-d:#fb7185}
.block-skin-visual.galaxy{--cube-a:#3b82f6;--cube-b:#ec4899;--cube-c:#8b5cf6;--cube-d:#22d3ee}
.block-skin-visual.picnic{--cube-a:#9bcf78;--cube-b:#ffb58d;--cube-c:#f9d976;--cube-d:#79c7b4}
.block-skin-visual.lemon_soda{--cube-a:#f4df4e;--cube-b:#65ddd0;--cube-c:#a7f3d0;--cube-d:#7dd3fc}
.block-skin-visual.stained_glass{--cube-a:#f472b6;--cube-b:#facc15;--cube-c:#22d3ee;--cube-d:#8b5cf6}
.block-skin-visual.magic_library{--cube-a:#1e3a67;--cube-b:#8b5e3c;--cube-c:#e1b85a;--cube-d:#6d4ca4}
.block-skin-visual.toriland{--cube-a:#fee500;--cube-b:#ff9178;--cube-c:#62d6c6;--cube-d:#8b5cf6}
.block-skin-visual.star_whale{--cube-a:#60a5fa;--cube-b:#312e81;--cube-c:#d8b4fe;--cube-d:#67e8f9}
.block-skin-visual.red{--cube-a:#ef4444;--cube-b:#dc2626;--cube-c:#f87171;--cube-d:#b91c1c}
.block-skin-visual.orange{--cube-a:#f97316;--cube-b:#ea580c;--cube-c:#fb923c;--cube-d:#c2410c}
.block-skin-visual.yellow{--cube-a:#eab308;--cube-b:#ca8a04;--cube-c:#facc15;--cube-d:#a16207}
.block-skin-visual.green{--cube-a:#22c55e;--cube-b:#16a34a;--cube-c:#4ade80;--cube-d:#15803d}
.block-skin-visual.blue{--cube-a:#3b82f6;--cube-b:#2563eb;--cube-c:#60a5fa;--cube-d:#1d4ed8}
.block-skin-visual.indigo{--cube-a:#4f46e5;--cube-b:#4338ca;--cube-c:#818cf8;--cube-d:#3730a3}
.block-skin-visual.violet{--cube-a:#8b5cf6;--cube-b:#7c3aed;--cube-c:#a78bfa;--cube-d:#6d28d9}
@media(prefers-reduced-motion:reduce){.block-skin-visual{filter:none}}