[data-t1=normal]{--ca: #a8a77a}[data-t2=normal]{--cb: #a8a77a}[data-t1=fire]{--ca: #ee8130}[data-t2=fire]{--cb: #ee8130}[data-t1=water]{--ca: #6390f0}[data-t2=water]{--cb: #6390f0}[data-t1=electric]{--ca: #f7d02c}[data-t2=electric]{--cb: #f7d02c}[data-t1=grass]{--ca: #7ac74c}[data-t2=grass]{--cb: #7ac74c}[data-t1=ice]{--ca: #96d9d6}[data-t2=ice]{--cb: #96d9d6}[data-t1=fighting]{--ca: #c22e28}[data-t2=fighting]{--cb: #c22e28}[data-t1=poison]{--ca: #a33ea1}[data-t2=poison]{--cb: #a33ea1}[data-t1=ground]{--ca: #e2bf65}[data-t2=ground]{--cb: #e2bf65}[data-t1=flying]{--ca: #a98ff3}[data-t2=flying]{--cb: #a98ff3}[data-t1=psychic]{--ca: #f95587}[data-t2=psychic]{--cb: #f95587}[data-t1=bug]{--ca: #a6b91a}[data-t2=bug]{--cb: #a6b91a}[data-t1=rock]{--ca: #b6a136}[data-t2=rock]{--cb: #b6a136}[data-t1=ghost]{--ca: #735797}[data-t2=ghost]{--cb: #735797}[data-t1=dragon]{--ca: #6f35fc}[data-t2=dragon]{--cb: #6f35fc}[data-t1=dark]{--ca: #705746}[data-t2=dark]{--cb: #705746}[data-t1=steel]{--ca: #b7b7ce}[data-t2=steel]{--cb: #b7b7ce}[data-t1=fairy]{--ca: #d685ad}[data-t2=fairy]{--cb: #d685ad}header.site-header{padding-inline:var(--wrapper-padding);padding-block:.75rem;margin:auto;background:var(--color-yellow);a{text-decoration:none;color:#000;font-weight:700}img{height:2rem}}header.page-header{display:flex;flex-direction:column;gap:.25rem;&:has(+table.list){h1{padding:0 0 .5rem}padding:2rem 0 1rem}span.stats{color:#999;display:block}}nav.breadcrumbs{padding:1rem 0 0;color:light-dark(#ccc,#999);font-size:.875rem;ol{margin:0;padding:0;display:flex}li{display:flex}a{display:inline-block}li:after{content:"/";margin:0 .25rem}li:last-child:after{content:""}}ul.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));margin:0;padding:0;gap:1.5rem;li a{background:light-dark(#eee,#333);display:flex;padding:1rem;border:1px solid light-dark(var(--color-blue),#666);border-radius:4px;text-decoration:none;font-size:2rem;align-items:center;justify-content:center;line-height:1;transition:all .1s ease-out;font-weight:700}li a:hover{border-color:light-dark(var(--color-navy),#999);transform:scale(1.05)}li a:active{transform:scale(.95)}&.small li a{font-size:1rem}}table.list{width:calc(100% + 2rem);table-layout:fixed;border-collapse:separate;border-spacing:0;margin:0 -1rem 20rem;font-size:clamp(.75rem,3vw,1rem);thead{position:sticky;backdrop-filter:blur(10px);z-index:3;top:0}thead tr th{padding:1rem;text-align:left;border-bottom:1px solid light-dark(#bbb,#444);text-underline-offset:2px;font-size:1rem;&:first-child{white-space:nowrap;width:4em}&:nth-child(2){width:5rem}&:last-child{width:6em;@media (min-width: 22.5rem){width:8rem}}&:after{font-size:.75rem;margin-left:.5rem;display:inline-block;transform:translateY(-1px)}button{background:0;padding:0;margin:0;border:0;display:flex;gap:.25rem;font-weight:700;font-size:1rem;color:light-dark(#333,#eee)}button>*{pointer-events:none}button[data-sort]:hover{cursor:pointer;span{text-decoration:underline}}button[data-dir=asc]:after{content:"↑";text-decoration:none;margin-left:4px}button[data-dir=desc]:after{content:"↓";text-decoration:none;margin-left:4px}}tbody tr:hover{background:light-dark(white,#191919)}tbody tr td{overflow:hidden;transition:background .1s ease-out;position:relative;padding:.5rem 1rem;border-bottom:1px solid light-dark(#ddd,#333)}tbody tr td a[data-action]{height:100%;display:block;padding:1em 0;margin:-1em 0;text-decoration:none;color:light-dark(#333,#eee);&:hover{text-decoration:underline}}tbody tr td a>span{pointer-events:none}tbody td img{height:3rem}.pokemon-name{display:block}.form-name{font-size:.75rem;color:#999}}ul.types{margin:0;padding:0;display:flex;flex-direction:row;gap:.25rem;font-size:.75rem;@media (min-width: 22.5rem){flex-direction:column}li{display:flex;align-items:center;gap:.5rem}figure{margin:0;display:inline-block;aspect-ratio:1 / 1;width:.75rem;border-radius:100%;transform:translateY(1px)}figure[data-t1]{background:var(--ca)}span{display:none;@media (min-width: 22.5rem){display:block}}}dialog.lightbox{border-radius:12px;box-shadow:0 10px 20px #0000001a;outline:0;opacity:0;border:0;overflow:visible;padding:6px;background:linear-gradient(45deg,var(--cb),var(--ca));transform:scale(1.1);width:fit-content;max-width:calc(100% - 3rem);transition:transform .2s ease-out,--cb .5s,--ca .5s;&[open]{opacity:1;transform:none;@starting-style{opacity:0;transform:scale(1.1)}}&[data-t1] header{color:var(--swatch-foreground)}div.lightbox-container{border-radius:6px;overflow:hidden;background-color:light-dark(#eee,#222)}header{display:flex;flex-direction:column;gap:.25rem;transition:color .25s ease-out;.form-name{font-size:clamp(.625rem,3vw,1rem)}}h2{margin:0;padding:1rem 1rem 0;font-size:inherit;font-size:clamp(1rem,4vw,2rem);width:100%;display:flex;justify-content:space-between}div.stats{width:100%;display:flex;justify-content:space-between;gap:2rem;padding:0 1rem 1rem}picture{display:flex;align-items:center;justify-content:center;flex-direction:column;aspect-ratio:1 / 1;padding:2rem}img{height:90vw;max-height:28rem;max-width:28rem;aspect-ratio:1 / 1}button{aspect-ratio:1 / 1;border-radius:100%;border:0;padding:0;margin:0;outline:0;outline-offset:3px;overflow:hidden;background:#222;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--ca);transition:border .5s ease-out;cursor:pointer;transition:color .2s ease-out,border .5s ease-out,transform .2s ease-out;font-family:sans-serif;&:active{transform:scale(.9)}&:focus-visible{outline:2px solid white}}nav{padding:2rem;width:100%;display:flex;gap:2rem;align-items:center;justify-content:center;button{border-color:var(--cb);width:3rem;border-radius:100%;font-size:1.5rem;background:#333}}button.close{position:absolute;top:calc(-1rem + 4px);right:calc(-1rem + 4px);width:2rem;>svg{width:24px;height:24px;stroke:#fff;pointer-events:none}}}html:has(dialog[open]){body{overflow:hidden!important;position:relative}::backdrop{animation:fade .2s ease-out forwards;background:#000000bf;backdrop-filter:blur(2px)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes press{0%{transform:scale(1)}to{transform:scale(.9)}}@property --ca{syntax: "<color>"; initial-value: #222; inherits: true;}@property --cb{syntax: "<color>"; initial-value: #222; inherits: true;}:root{--color-yellow: #ffcb05;--color-blue: #3d7dca;--color-navy: #003a70;--wrapper-padding: max( calc((100% - 30rem)/2) , 1rem);--font-stack: monospace;color-scheme:light dark}*,*:after,*:before{box-sizing:border-box}body{background-color:light-dark(#f3f3f3,#222);border:0;padding:0;margin:0;min-width:320px;overflow-x:hidden}body,input,button{font-family:var(--font-stack)}body,dialog{color:light-dark(#333,#ddd)}main{padding-inline:var(--wrapper-padding)}ul,ol{list-style:none;padding:0}h1{font-size:1.5rem;padding:2rem 0}h1,h2{margin:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}a{color:light-dark(var(--color-blue),var(--color-yellow));text-underline-offset:2px;&:hover{color:light-dark(var(--color-navy),white)}}[data-t1]{--swatch-foreground: light-dark(oklch(from var(--ca) calc(l - .2) c h), oklch(from var(--ca) calc(l + .3) c h))}.align-right{text-align:right}