keyrune/docs/docs/index.html

367 lines
27 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keyrune</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="generator" content="Hand crafted">
<script src='/assets/js/first.js'></script>
<link rel="stylesheet" type="text/css" href='/assets/css/docs.css'>
<link rel="stylesheet" type="text/css" href='/assets/css/keyrune.css'>
<script src='/assets/js/zepto.js'></script>
<script src='/assets/js/zepto.fx.js'></script>
<script src='/assets/js/glitz.js'></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<header>
<mark class="flex flex-row flex-align-center flex-justify-start">
<a href="/" class="flex flex-row flex-align-center flex-justify-start mr-1">
<i class="ss ss-leg relative mr-2"></i>
<span>Keyrune</span>
</a>
<a href="https://github.com/andrewgioia/keyrune/archive/refs/heads/master.zip" target="blank">
<b>4.0.0</b>
</a>
</mark>
<a href="javascript:;" data-nav="mobile" id="toggle-nav">
<svg id="toggle-nav-svg" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="6" x2="20" y2="6" class="line top"></line>
<line x1="4" y1="12" x2="20" y2="12" class="line mid"></line>
<line x1="4" y1="18" x2="20" y2="18" class="line bot"></line>
</svg>
</a>
<nav>
<a href="sets">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
<span>
Sets
</span>
</a>
<a href="docs">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span>
Documentation
</span>
</a>
<a href="examples">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 4V2"></path>
<path d="M15 16v-2"></path>
<path d="M8 9h2"></path>
<path d="M20 9h2"></path>
<path d="M17.8 11.8 19 13"></path>
<path d="M15 9h0"></path>
<path d="M17.8 6.2 19 5"></path>
<path d="m3 21 9-9"></path>
<path d="M12.2 6.2 11 5"></path>
</svg>
<span>
Examples
</span>
</a>
<a href="https://github.com/andrewgioia/keyrune" target="blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
<span>
GitHub
</span>
</a>
<div id="mode" class="ml-2">
<input class="toggle" type="checkbox" id="switch">
<label class="toggle" for="switch"></label>
</div>
</nav>
</header>
<main>
<section id="docs" class="border-t-light pt-8 pb-16 flex flex-col flex-align-center">
Documentation
</section>
</main>
<footer>
<div class="w-wide flex flex-col sm:flex-row">
<div class="w-full sm:w-1/5 flex flex-col">
<h4 class="mt-0 mb-4">
Keyrune.css
</h4>
<p class="mt-1 mb-6 pr-12 relative top-px">
An MTG icon font built with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a>.
</p>
<a href="https://www.jsdelivr.com/package/npm/keyrune" class="mb-4">
<img src="https://data.jsdelivr.com/v1/package/npm/keyrune/badge" alt="jsDeliver CDN badge">
</a>
<a class="github-button mb-8" href="https://github.com/andrewgioia/keyrune" data-icon="octicon-star" data-show-count="true" aria-label="Star andrewgioia/keyrune on GitHub">
Star
</a>
</div>
<div class="w-full sm:w-1/5 flex flex-col">
<h5 class="mt-1 mb-4">
Project
</h5>
<menu class="flex flex-row flex-wrap sm:list mb-8 mt-1">
<li class="flex flex-row flex-align-center flex-justify-start">
<i class="ss ss-leg ss-white w-4 mr-2"></i>
<a href="/" class="mr-4">Overview</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
<a href="/sets" class="mr-4">Set symbols</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<a href="/docs" class="mr-4">Documentation</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M15 4V2"></path>
<path d="M15 16v-2"></path>
<path d="M8 9h2"></path>
<path d="M20 9h2"></path>
<path d="M17.8 11.8 19 13"></path>
<path d="M15 9h0"></path>
<path d="M17.8 6.2 19 5"></path>
<path d="m3 21 9-9"></path>
<path d="M12.2 6.2 11 5"></path>
</svg>
<a href="https://andrewgioia.keyrune.com/examples" class="mr-4">Examples</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M6 20h4"></path>
<path d="M14 10h4"></path>
<path d="M6 14h2v6"></path>
<path d="M14 4h2v6"></path>
<rect x="6" y="4" width="4" height="6"></rect>
<rect x="14" y="14" width="4" height="6"></rect>
</svg>
<a href="/cheatsheet" class="mr-4">Cheatsheet</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
<a href="https://github.com/andrewgioia/keyrune" target="blank" class="mr-4">GitHub project</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="m5.784 5.309-.956-.001c-2.112 0-3.825 1.68-3.825 3.754-.001 2.073 1.711 3.754 3.823 3.754l.956.001zm17.211 8.252c-.459 3.456-3.625 5.131-5.738 5.131l-5.737-.002c-2.112 0-4.681-1.581-5.736-5.133l.002-8.248 17.211.003zm-8.833-5.155V5.308zm-.638.134a1 1 0 0 0-1.366.366l-1.928 3.34a1 1 0 0 0 .366 1.366l3.34 1.928a1 1 0 0 0 1.366-.366l1.928-3.34a1 1 0 0 0-.366-1.366l-3.34-1.928z"></path>
</svg>
<a href="https://git.gioia.cloud/andrew/keyrune" target="blank" class="mr-4">Gitea mirror</a>
</li>
</menu>
</div>
<div class="w-full sm:w-3/5">
<h5 class="mt-1">
Licensing and terms of use
</h5>
<p>
Keyrune is free, unofficial "Fan Content" permitted under the Wizards of the Coast <a href="https://company.wizards.com/en/legal/fancontentpolicy" target="blank">Fan Content Policy</a>. The Magic: the Gathering&trade; set symbols themselves are copyright Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc. Keyrune is not produced by, endorsed by, supported by, or affiliated with Wizards of the Coast, and I develop and distribute this project solely as a resource to enable other Fan Content.
</p>
<p>
The Keyrune font is licensed under the <a href="http://scripts.sil.org/OFL" target="blank">SIL OFL 1.1</a>. Please review the terms of that license for attribution, distribution, incorporation, and bundling requirements.
</p>
<p>
The source code and other project files, including CSS, SCSS, and his website, are licensed separately under the <a href="https://opensource.org/licenses/GPL-3.0" target="blank">GPL 3.0 License</a>. You're free to share or modify any of the source code or this website's design so long as you also distribute your project under the same license.
</p>
</div>
</div>
</footer>
<object id="icon">
<details open>
<summary tabindex="-1">
<span class="name">Set name</span>
</summary>
<div class="details">
<a href="sets" class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</a>
<div class="table flex flex-col p-8 w-full">
<div class="flex flex-col justify-start">
<h2 class="name mt-0 mb-4">
Set name
</h2>
<h3 class="class mt-0 mb-6">
Set code
</h3>
<div class="grid grid-cols-12">
<div class="grid-span-4 flex flex-col mb-6">
<label>Added</label>
<span class="version"></span>
</div>
<div class="grid-span-5 flex flex-col mb-6">
<label>Group</label>
<span class="group"></span>
</div>
<div class="grid-span-3 flex flex-col mb-6">
<label>Status</label>
<span class="official" data-official="true">
Official
</span>
</div>
<div class="grid-span-4 flex flex-col mb-4">
<label>Glyphs</label>
<ul class="glyphs m-0">
<li class="rarity">
<i></i>
<span class="ml-2"></span>
</li>
<li class="border">
<i></i>
<span class="ml-2"></span>
</li>
<li class="inner">
<i></i>
<span class="ml-2"></span>
</li>
</ul>
</div>
<div class="grid-span-8 flex flex-col mb-4">
<label class="aliases">Aliases</label>
<span class="aliases"></span>
</div>
</div>
<div class="actions flex flex-row flex-align-center flex-justify-start mt-2 mb-4">
<a href="javascript:;" id="copy-unicode" class="action-button unicode mr-6 flex-inline flex-align-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span class="text-sm ml-2">Copy unicode</span>
<sup class="tooltip">Unicode copied!</sup>
</a>
<a href="javascript:;" id="copy-glyph" class="action-button glyph mr-6 flex-inline flex-align-center" data-tooltip="SVG copied!">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
<span class="text-sm ml-2">Copy glyph</span>
<sup class="tooltip">Glyph copied!</sup>
</a>
<a href="javascript:;" id="download-svg" class="action-button download flex-inline flex-align-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span class="text-sm ml-2">Download</span>
<sup class="tooltip">SVG downloaded!</sup>
</a>
</div>
</div>
<div class="tags">
Tags
</div>
</div>
<div class="icon checkerboard flex flex-col flex-shrink-0">
<i class="ss ss-border ss-inner"></i>
<div id="icon-controls" class="icon-controls flex flex-row flex-align-center flex-justify-center flex-shrink-0">
<menu id="icon-rarity-modal" class="flex flex-row group mr-2">
<li>
<label for="rarity_common" class="small left checked">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24" fill="#000">
<path d="M0 16.33a8.86 8.86 0 0 1 4.3-.02c.78.81 1.3 1.85 2.16 2.6.84.84 1.98 1.22 3.05 1.66-2.55.1-5.26-.31-7.37-1.86A8.2 8.2 0 0 1 0 16.33Zm24-.08c-.65 1.48-2.02 2.52-3.42 3.25a13.64 13.64 0 0 1-6.14 1.12c1.27-.58 2.64-1.08 3.56-2.19.66-.67 1.03-1.63 1.83-2.16 1.36-.35 2.8-.2 4.17-.02ZM3.8 11.68c1.64.03 3.3.49 4.55 1.6 1.95 1.64 2.85 4.24 2.97 6.73A6.4 6.4 0 0 1 6 17.37a12.17 12.17 0 0 1-2.2-5.7Zm5.98-6.76c.37 3.82.5 4.3.6 4.76.03.2.08.39.15.58l.63-.05a6 6 0 0 0 .3-1.25c.47-3.85.55-5.68.56-5.59.46 5.66.7 6.4.87 6.84l.62.05c.1-.27.08-.3.2-.83.28-1.15.52-4.3.56-4.5.2 1.53.3 2.5.44 3.45.06.44.13.88.23 1.32.06.28.13.57.24.84.2.05.39.1.57.18.06-.12.1-.24.15-.37.1-.32.17-.64.24-.97.36-2.3.36-2.47.42-2.63.38 3.21.46 4.06.53 4.91a6.9 6.9 0 0 0-3.17 2.2 7.31 7.31 0 0 0-1.12 1.9c-.33.86-.52 1.75-.63 2.65l-.08.83c-.01.07-.02.15-.06.22h-.02a.33.33 0 0 1-.04-.17c-.03-.18-.04-.37-.06-.55-.05-.5-.12-.99-.22-1.48a8.43 8.43 0 0 0-.84-2.31 7.17 7.17 0 0 0-3.9-3.29c.11-1.18.54-4.9.54-4.9.18 1 .24 1.54.33 2.09.07.44.15.88.27 1.31.05.2.12.38.2.56l.57-.18c.07-.02.08 0 .17-.52.25-1.32.73-5.04.75-5.1Zm5.96 8.26a6.78 6.78 0 0 1 4.44-1.47c-.37 2.76-1.54 5.6-3.87 7.27A5.64 5.64 0 0 1 12.67 20c.1-2.54 1.01-5.2 3.07-6.82Z"/>
</svg>
</label>
</li>
<li>
<label for="rarity_uncommon" class="small center">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24" fill="#707883">
<path d="M0 16.33a8.86 8.86 0 0 1 4.3-.02c.78.81 1.3 1.85 2.16 2.6.84.84 1.98 1.22 3.05 1.66-2.55.1-5.26-.31-7.37-1.86A8.2 8.2 0 0 1 0 16.33Zm24-.08c-.65 1.48-2.02 2.52-3.42 3.25a13.64 13.64 0 0 1-6.14 1.12c1.27-.58 2.64-1.08 3.56-2.19.66-.67 1.03-1.63 1.83-2.16 1.36-.35 2.8-.2 4.17-.02ZM3.8 11.68c1.64.03 3.3.49 4.55 1.6 1.95 1.64 2.85 4.24 2.97 6.73A6.4 6.4 0 0 1 6 17.37a12.17 12.17 0 0 1-2.2-5.7Zm5.98-6.76c.37 3.82.5 4.3.6 4.76.03.2.08.39.15.58l.63-.05a6 6 0 0 0 .3-1.25c.47-3.85.55-5.68.56-5.59.46 5.66.7 6.4.87 6.84l.62.05c.1-.27.08-.3.2-.83.28-1.15.52-4.3.56-4.5.2 1.53.3 2.5.44 3.45.06.44.13.88.23 1.32.06.28.13.57.24.84.2.05.39.1.57.18.06-.12.1-.24.15-.37.1-.32.17-.64.24-.97.36-2.3.36-2.47.42-2.63.38 3.21.46 4.06.53 4.91a6.9 6.9 0 0 0-3.17 2.2 7.31 7.31 0 0 0-1.12 1.9c-.33.86-.52 1.75-.63 2.65l-.08.83c-.01.07-.02.15-.06.22h-.02a.33.33 0 0 1-.04-.17c-.03-.18-.04-.37-.06-.55-.05-.5-.12-.99-.22-1.48a8.43 8.43 0 0 0-.84-2.31 7.17 7.17 0 0 0-3.9-3.29c.11-1.18.54-4.9.54-4.9.18 1 .24 1.54.33 2.09.07.44.15.88.27 1.31.05.2.12.38.2.56l.57-.18c.07-.02.08 0 .17-.52.25-1.32.73-5.04.75-5.1Zm5.96 8.26a6.78 6.78 0 0 1 4.44-1.47c-.37 2.76-1.54 5.6-3.87 7.27A5.64 5.64 0 0 1 12.67 20c.1-2.54 1.01-5.2 3.07-6.82Z"/>
</svg>
</label>
</li>
<li>
<label for="rarity_rare" class="small center">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24" fill="#b7a066">
<path d="M0 16.33a8.86 8.86 0 0 1 4.3-.02c.78.81 1.3 1.85 2.16 2.6.84.84 1.98 1.22 3.05 1.66-2.55.1-5.26-.31-7.37-1.86A8.2 8.2 0 0 1 0 16.33Zm24-.08c-.65 1.48-2.02 2.52-3.42 3.25a13.64 13.64 0 0 1-6.14 1.12c1.27-.58 2.64-1.08 3.56-2.19.66-.67 1.03-1.63 1.83-2.16 1.36-.35 2.8-.2 4.17-.02ZM3.8 11.68c1.64.03 3.3.49 4.55 1.6 1.95 1.64 2.85 4.24 2.97 6.73A6.4 6.4 0 0 1 6 17.37a12.17 12.17 0 0 1-2.2-5.7Zm5.98-6.76c.37 3.82.5 4.3.6 4.76.03.2.08.39.15.58l.63-.05a6 6 0 0 0 .3-1.25c.47-3.85.55-5.68.56-5.59.46 5.66.7 6.4.87 6.84l.62.05c.1-.27.08-.3.2-.83.28-1.15.52-4.3.56-4.5.2 1.53.3 2.5.44 3.45.06.44.13.88.23 1.32.06.28.13.57.24.84.2.05.39.1.57.18.06-.12.1-.24.15-.37.1-.32.17-.64.24-.97.36-2.3.36-2.47.42-2.63.38 3.21.46 4.06.53 4.91a6.9 6.9 0 0 0-3.17 2.2 7.31 7.31 0 0 0-1.12 1.9c-.33.86-.52 1.75-.63 2.65l-.08.83c-.01.07-.02.15-.06.22h-.02a.33.33 0 0 1-.04-.17c-.03-.18-.04-.37-.06-.55-.05-.5-.12-.99-.22-1.48a8.43 8.43 0 0 0-.84-2.31 7.17 7.17 0 0 0-3.9-3.29c.11-1.18.54-4.9.54-4.9.18 1 .24 1.54.33 2.09.07.44.15.88.27 1.31.05.2.12.38.2.56l.57-.18c.07-.02.08 0 .17-.52.25-1.32.73-5.04.75-5.1Zm5.96 8.26a6.78 6.78 0 0 1 4.44-1.47c-.37 2.76-1.54 5.6-3.87 7.27A5.64 5.64 0 0 1 12.67 20c.1-2.54 1.01-5.2 3.07-6.82Z"/>
</svg>
</label>
</li>
<li>
<label for="rarity_mythic" class="small center">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24" fill="#bf4427">
<path d="M0 16.33a8.86 8.86 0 0 1 4.3-.02c.78.81 1.3 1.85 2.16 2.6.84.84 1.98 1.22 3.05 1.66-2.55.1-5.26-.31-7.37-1.86A8.2 8.2 0 0 1 0 16.33Zm24-.08c-.65 1.48-2.02 2.52-3.42 3.25a13.64 13.64 0 0 1-6.14 1.12c1.27-.58 2.64-1.08 3.56-2.19.66-.67 1.03-1.63 1.83-2.16 1.36-.35 2.8-.2 4.17-.02ZM3.8 11.68c1.64.03 3.3.49 4.55 1.6 1.95 1.64 2.85 4.24 2.97 6.73A6.4 6.4 0 0 1 6 17.37a12.17 12.17 0 0 1-2.2-5.7Zm5.98-6.76c.37 3.82.5 4.3.6 4.76.03.2.08.39.15.58l.63-.05a6 6 0 0 0 .3-1.25c.47-3.85.55-5.68.56-5.59.46 5.66.7 6.4.87 6.84l.62.05c.1-.27.08-.3.2-.83.28-1.15.52-4.3.56-4.5.2 1.53.3 2.5.44 3.45.06.44.13.88.23 1.32.06.28.13.57.24.84.2.05.39.1.57.18.06-.12.1-.24.15-.37.1-.32.17-.64.24-.97.36-2.3.36-2.47.42-2.63.38 3.21.46 4.06.53 4.91a6.9 6.9 0 0 0-3.17 2.2 7.31 7.31 0 0 0-1.12 1.9c-.33.86-.52 1.75-.63 2.65l-.08.83c-.01.07-.02.15-.06.22h-.02a.33.33 0 0 1-.04-.17c-.03-.18-.04-.37-.06-.55-.05-.5-.12-.99-.22-1.48a8.43 8.43 0 0 0-.84-2.31 7.17 7.17 0 0 0-3.9-3.29c.11-1.18.54-4.9.54-4.9.18 1 .24 1.54.33 2.09.07.44.15.88.27 1.31.05.2.12.38.2.56l.57-.18c.07-.02.08 0 .17-.52.25-1.32.73-5.04.75-5.1Zm5.96 8.26a6.78 6.78 0 0 1 4.44-1.47c-.37 2.76-1.54 5.6-3.87 7.27A5.64 5.64 0 0 1 12.67 20c.1-2.54 1.01-5.2 3.07-6.82Z"/>
</svg>
</label>
<label for="rarity_foil" class="small right">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24" fill="#00afc9">
<path d="M0 16.33a8.86 8.86 0 0 1 4.3-.02c.78.81 1.3 1.85 2.16 2.6.84.84 1.98 1.22 3.05 1.66-2.55.1-5.26-.31-7.37-1.86A8.2 8.2 0 0 1 0 16.33Zm24-.08c-.65 1.48-2.02 2.52-3.42 3.25a13.64 13.64 0 0 1-6.14 1.12c1.27-.58 2.64-1.08 3.56-2.19.66-.67 1.03-1.63 1.83-2.16 1.36-.35 2.8-.2 4.17-.02ZM3.8 11.68c1.64.03 3.3.49 4.55 1.6 1.95 1.64 2.85 4.24 2.97 6.73A6.4 6.4 0 0 1 6 17.37a12.17 12.17 0 0 1-2.2-5.7Zm5.98-6.76c.37 3.82.5 4.3.6 4.76.03.2.08.39.15.58l.63-.05a6 6 0 0 0 .3-1.25c.47-3.85.55-5.68.56-5.59.46 5.66.7 6.4.87 6.84l.62.05c.1-.27.08-.3.2-.83.28-1.15.52-4.3.56-4.5.2 1.53.3 2.5.44 3.45.06.44.13.88.23 1.32.06.28.13.57.24.84.2.05.39.1.57.18.06-.12.1-.24.15-.37.1-.32.17-.64.24-.97.36-2.3.36-2.47.42-2.63.38 3.21.46 4.06.53 4.91a6.9 6.9 0 0 0-3.17 2.2 7.31 7.31 0 0 0-1.12 1.9c-.33.86-.52 1.75-.63 2.65l-.08.83c-.01.07-.02.15-.06.22h-.02a.33.33 0 0 1-.04-.17c-.03-.18-.04-.37-.06-.55-.05-.5-.12-.99-.22-1.48a8.43 8.43 0 0 0-.84-2.31 7.17 7.17 0 0 0-3.9-3.29c.11-1.18.54-4.9.54-4.9.18 1 .24 1.54.33 2.09.07.44.15.88.27 1.31.05.2.12.38.2.56l.57-.18c.07-.02.08 0 .17-.52.25-1.32.73-5.04.75-5.1Zm5.96 8.26a6.78 6.78 0 0 1 4.44-1.47c-.37 2.76-1.54 5.6-3.87 7.27A5.64 5.64 0 0 1 12.67 20c.1-2.54 1.01-5.2 3.07-6.82Z"/>
</svg>
</label>
</li>
</menu>
<menu id="preview-extras-modal" class="flex flex-row">
<li>
<label for="extras_border" class="small mr-1 checked">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
</svg>
</label>
</li>
<li>
<label for="extras_inner" class="small mr-1 checked">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"></circle>
</svg>
</label>
</li>
<li>
<label for="extras_gradient" class="small disabled">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5.5,3.5 L19.5,3.5 C20.605,3.5 21.5,4.395 21.5,5.5 L21.5,19.5 C21.5,20.605 20.605,21.5 19.5,21.5 L5.5,21.5 C4.395,21.5 3.5,20.605 3.5,19.5 L3.5,5.5 C3.5,4.395 4.395,3.5 5.5,3.5 z"></path>
<path d="M16.344,21.5 L21.5,16.344"></path>
<path d="M12.344,21.5 L21.5,12.344"></path>
<path d="M7.344,21.5 L21.5,7.344"></path>
<path d="M3.656,18.188 L18.344,3.5"></path>
</svg>
</label>
</li>
</menu>
</div>
</div>
</div>
</details>
</object>
</body>
</html>