:root{color-scheme:light;--shadow-color: 220 3% 15%;--shadow-strength: 1%;--text-1: #030507;--text-2: #495057;--surface-1: #f8f9fa;--surface-2: #e9ecef;--surface-3: #dee2e6;--grape-4: #e599f7}*,*:after,*:before{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif,system-ui;background:#7950f2}.pokeselect{--transition: .2s;--trigger-media: 64px;anchor-name:--menu;position:relative}[data-type=grass],[data-group=grass]{--accent: #69db7c}[data-type=poison],[data-group=poison]{--accent: #9775fa}[data-type=normal],[data-group=normal]{--accent: #e9ecef}[data-type=flying],[data-group=flying]{--accent: #f783ac}[data-type=electric],[data-group=electric]{--accent: #ffd43b}[data-type=ground],[data-group=ground]{--accent: #868e96}[data-type=fire],[data-group=fire]{--accent: #ffa94d}[data-type=water],[data-group=water]{--accent: #4dabf7}[data-type=bug],[data-group=bug]{--accent: #40c057}[data-type=fairy],[data-group=fairy]{--accent: #f783ac}[data-type=fighting],[data-group=fighting]{--accent: #ff8787}[data-type=psychic],[data-group=psychic]{--accent: #748ffc}[data-type=rock],[data-group=rock]{--accent: #868e96}[data-type=steel],[data-group=steel]{--accent: #e9ecef}[data-type=ice],[data-group=ice]{--accent: #a5d8ff}[data-type=ghost],[data-group=ghost]{--accent: var(--grape-4)}[data-type=dragon],[data-group=dragon]{--accent: #a9e34b}[behavior=button]{padding:.75rem;font-family:inherit;font-size:1.125rem;display:grid;grid-template-columns:auto 1fr auto;justify-content:space-between;border-radius:5px;border:0;box-shadow:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));background:var(--surface-1);align-items:center;gap:.75rem;text-align:left;width:280px}[behavior=button]:focus-visible{outline-color:var(--accent)}:where(.pokeselect__avatar,.pokeselect__ball,.pokeselect__choose){width:var(--trigger-media)}[title=angle-down]{width:1rem;fill:var(--text-2)}.pokeselect [popover]{overflow:auto;border-radius:5px;margin:0;position:fixed;top:anchor(--menu bottom);left:anchor(--menu left);width:anchor-size(--menu width);opacity:var(--open, 0);translate:0 calc(var(--open, 0) * .5rem);box-shadow:0 -1px 2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));height:30vh;border:0;padding:.5rem;background:var(--surface-1);transition:opacity var(--transition),translate var(--transition),display var(--transition) allow-discrete,overlay var(--transition) allow-discrete}.pokeselect__image-placeholder{height:var(--trigger-media);aspect-ratio:1}.pokeselect__ball{animation:load .65s infinite;display:inline-block}@keyframes load{50%{translate:0 -50%}to{rotate:-360deg}}[behavior=button][disabled] :is(.pokeselect__placeholder,svg){opacity:.2}.pokeselect [popover] [role=option] img{grid-column:1;grid-row:1 / -1}.option-group{margin:.5rem 0;color:var(--text-2)}@property --open{syntax: "<number>"; inherits: true; initial-value: 0;}.pokeselect [popover]:popover-open{--open: 1}@starting-style{.pokeselect [popover]:popover-open{--open: 0}}.pokeselect [popover] [role=option]+[role=option]{border-top:solid 1px #e9ecef}.pokeselect__details{display:grid;gap:.5rem}.pokeselect__stats{display:flex;gap:.5rem}.pokeselect__title{font-weight:900}.legend{background:var(--accent);width:100%;padding:.5rem 1.25rem;position:sticky;top:0;font-weight:900}.pokeselect [role=option]{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;cursor:pointer;border:0;outline-width:0;text-align:left;background:transparent;width:100%;color:var(--text-1);display:grid;align-items:center;gap:.25rem;padding:.5rem;grid-template-columns:auto 1fr;justify-content:center;outline-offset:-2px}.pokeselect [role=option]:focus-visible{outline-color:var(--accent)}.pokeselect [role=option]:is(:hover,.active){background-color:var(--surface-2)}.pokeselect [role=option][aria-selected=true]:not(:hover){background:var(--surface-3)}