.pet-view .feature{animation-iteration-count:infinite;animation-timing-function:ease-in-out}@keyframes bob1{0%{transform:translateY(0)}5%{transform:translateY(0)}20%{transform:translateY(-0.25em)}40%{transform:translateY(0.5em)}65%{transform:translateY(0)}100%{transform:translateY(0)}}.bob1{animation-name:bob1;animation-duration:17s}@keyframes shiver1{0%{transform:translateX(0)}1%{transform:translateX(0.25em)}2%{transform:translateX(-0.25em)}3%{transform:translateX(0.25em)}4%{transform:translateX(-0.25em)}5%{transform:translateX(0.25em)}6%{transform:translateX(-0.25em)}7%{transform:translateX(0)}100%{transform:translateX(0)}}.shiver1{animation-name:shiver1;animation-duration:9s}@keyframes wander1{0%{transform:translate(0, 0)}25%{transform:translate(0.25em, 0.25em)}50%{transform:translate(0, 0)}75%{transform:translate(-0.25em, -0.25em)}100%{transform:translate(0, 0)}}.wander1{animation-name:wander1;animation-duration:7s}.wander5{animation-name:wander1;animation-duration:14s}@keyframes wander2{0%{transform:translate(0, 0)}25%{transform:translate(-0.25em, -0.25em)}50%{transform:translate(0, 0)}75%{transform:translate(0.25em, 0.25em)}100%{transform:translate(0, 0)}}.wander2{animation-name:wander2;animation-duration:9s}.wander6{animation-name:wander2;animation-duration:15s}@keyframes wander3{0%{transform:translate(0, 0)}25%{transform:translate(0.25em, -0.25em)}50%{transform:translate(0, 0)}75%{transform:translate(-0.25em, 0.25em)}100%{transform:translate(0, 0)}}.wander3{animation-name:wander3;animation-duration:11s}.wander7{animation-name:wander3;animation-duration:16s}@keyframes wander4{0%{transform:translate(0, 0)}25%{transform:translate(-0.25em, 0.25em)}50%{transform:translate(0, 0)}75%{transform:translate(0.25em, -0.25em)}100%{transform:translate(0, 0)}}.wander4{animation-name:wander4;animation-duration:13s}.wander8{animation-name:wander4;animation-duration:17s}@keyframes hop1{0%{transform:translateY(0)}59%{transform:translateY(0)}61%{transform:translateY(-0.25em)}63%{transform:translateY(0)}90%{transform:translateY(0)}92%{transform:translateY(-0.25em)}94%{transform:translateY(0)}96%{transform:translateY(0)}98%{transform:translateY(-0.25em)}100%{transform:translateY(0)}}.hop1{animation-name:hop1;animation-duration:7s}@keyframes hop2{0%{transform:translateY(0)}25%{transform:translateY(0)}27%{transform:translateY(-0.25em)}29%{transform:translateY(0)}70%{transform:translateY(0)}72%{transform:translateY(-0.25em)}74%{transform:translateY(0)}100%{transform:translateY(0)}}.hop2{animation-name:hop2;animation-duration:6s}@keyframes hop3{0%{transform:translateY(0)}10%{transform:translateY(0)}11%{transform:translateY(-0.25em)}12%{transform:translateY(0)}13%{transform:translateY(0)}14%{transform:translateY(-0.25em)}15%{transform:translateY(0)}17%{transform:translateY(0)}18%{transform:translateY(-0.25em)}19%{transform:translateY(0)}62%{transform:translateY(0)}63%{transform:translateY(-0.25em)}64%{transform:translateY(0)}100%{transform:translateY(0)}}.hop3{animation:hop3;animation-duration:11s}.wind1,.wind2,.wind3{transform-origin:bottom center}@keyframes wind1{0%{transform:skewX(0)}20%{transform:skewX(7deg)}60%{transform:skewX(0)}100%{transform:skewX(0)}}.wind1{animation:wind1;animation-duration:20s}@keyframes wind2{0%{transform:skewX(0)}20%{transform:skewX(5deg)}60%{transform:skewX(0)}100%{transform:skewX(0)}}.wind2{animation:wind2;animation-duration:20s}@keyframes wind3{0%{transform:skewX(0)}20%{transform:skewX(3deg)}60%{transform:skewX(0)}100%{transform:skewX(0)}}.wind3{animation:wind3;animation-duration:20s}.delay-1{animation-delay:calc(1s/4)}.delay-2{animation-delay:calc(2s/4)}.delay-3{animation-delay:calc(3s/4)}.delay-4{animation-delay:calc(4s/4)}.delay-5{animation-delay:calc(5s/4)}.delay-6{animation-delay:calc(6s/4)}.delay-7{animation-delay:calc(7s/4)}.delay-8{animation-delay:calc(8s/4)}.delay-9{animation-delay:calc(9s/4)}:root{--white: #fff;--cossack-green: #4a6c3e;--cream-yellow: #f4ce97;--salvia-blue: #a7c0d6;--sulphur-yellow: #ece5c0;--eosine-pink: #ff7292;--diamine-green: #1b9a31;--burnt-sienna: #8c2b00;--black: #0c0c0c;--laelia-pink: #cc85d1;--corinthian-pink: #ffb3f0;--olive: #6b7f00;--pinkish-cinnamon: #f4c6a4;--apricot-yellow: #ffd913;--turquoise-green: #b6eac8;--citron-yellow: #96ae2a;--raw-sienna: #ac652c;--benzol-green: #0c9295;--deep-lyons-blue: #1a2d8a;--apricot-yellow: #ffd913;--red: #970242;--slate-color: #2f4a57;--yellow: #ffeb0b;--calamine-blue: #5ccbc4;--pyrite-yellow: #c0b857;--orange: #f1691a;--vinaceous-cinnamon: #f1c6c6;--dull-viridian-green: #006e47;--green-blue: #188a8f;--warm-grey: #b0aaa1;--lemon-yellow: #e6ed3a;--helvetia-blue: #00499c;--eugenia-red: #dd2844;--sea-green: #009c7a;--dusky-green: #005552;--dull-violet-black: #002b5d;--violet-blue: #394280;--light-green-yellow: #bfdb06;--calamine-blue: #88dfd9;--cobalt-green: #a9dca9;--red-orange: #e81900;--dark-medici-blue: #285c5c;--pale-lemon-yellow: #fff59e;--isabella-color: #ccb16f}.palette-1{--color-background: var(--white);--color-foreground: var(--cossack-green);--color-primary: var(--salvia-blue);--color-secondary: var(--sulphur-yellow);--color-tertiary: var(--cream-yellow)}.palette-2{--color-background: var(--white);--color-foreground: var(--black);--color-primary: var(--eosine-pink);--color-secondary: var(--diamine-green);--color-tertiary: var(--burnt-sienna)}.palette-3{--color-background: var(--white);--color-foreground: var(--olive);--color-primary: var(--corinthian-pink);--color-secondary: var(--sulphur-yellow);--color-tertiary: var(--laelia-pink)}.palette-4{--color-background: var(--white);--color-foreground: var(--citron-yellow);--color-primary: var(--apricot-yellow);--color-secondary: var(--turquoise-green);--color-tertiary: var(--pinkish-cinnamon)}.palette-5{--color-background: var(--white);--color-foreground: var(--deep-lyons-blue);--color-primary: var(--apricot-yellow);--color-secondary: var(--benzol-green);--color-tertiary: var(--raw-sienna)}.palette-6{--color-background: var(--white);--color-foreground: var(--slate-color);--color-primary: var(--yellow);--color-secondary: var(--diamine-green);--color-tertiary: var(--red)}.palette-7{--color-background: var(--white);--color-foreground: var(--black);--color-primary: var(--pyrite-yellow);--color-secondary: var(--calamine-blue);--color-tertiary: var(--raw-sienna)}.palette-8{--color-background: var(--white);--color-foreground: var(--black);--color-primary: var(--orange);--color-secondary: var(--vinaceous-cinnamon);--color-tertiary: var(--dull-viridian-green)}.palette-9{--color-background: var(--white);--color-foreground: var(--helvetia-blue);--color-primary: var(--lemon-yellow);--color-secondary: var(--warm-grey);--color-tertiary: var(--green-blue)}.palette-10{--color-background: var(--white);--color-foreground: var(--dusky-green);--color-primary: var(--apricot-yellow);--color-secondary: var(--sea-green);--color-tertiary: var(--eugenia-red)}.palette-11{--color-background: var(--white);--color-foreground: var(--violet-blue);--color-primary: var(--lemon-yellow);--color-secondary: var(--light-green-yellow);--color-tertiary: var(--dull-violet-black)}.palette-12{--color-background: var(--white);--color-foreground: var(--sea-green);--color-primary: var(--light-green-yellow);--color-secondary: var(--cobalt-green);--color-tertiary: var(--calamine-blue)}.palette-13{--color-background: var(--white);--color-foreground: var(--dark-medici-blue);--color-primary: var(--pale-lemon-yellow);--color-secondary: var(--isabella-color);--color-tertiary: var(--red-orange)}*{margin:0;padding:0;line-height:1.5;box-sizing:border-box}html{font-size:100%;font-family:sans-serif}body{height:99svh;color:var(--color-foreground);background-color:var(--color-secondary)}main{background-color:var(--color-background)}h1,h2,h3,h4,h5,h6{margin:0 auto .5rem;font-weight:700;line-height:1.2}p,ul,ol{margin:.5rem auto 1rem}p.margin-small,ul.margin-small,ol.margin-small{margin:0 0 .5rem}ul,menu{list-style:none}ul li:not(:last-child),menu li:not(:last-child){margin-bottom:.5rem}menu{display:flex;gap:.5rem;flex-direction:column}figure{padding:1rem 0}figcaption{margin:.5rem auto 0;font-size:.625rem;font-style:italic}small{font-size:.875rem;line-height:1.2}hr{margin:1rem auto;border:none;border-bottom:1px solid var(--color-secondary)}a,a:visited,button,.mock-button{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-underline-offset:.3em}a,a:visited{color:var(--color-primary)}button,.mock-button{appearance:none;padding:.5rem .75rem;color:var(--color-foreground);background-color:var(--color-primary);font-size:1rem;text-align:center;border:none;border-radius:0;transition:.2s opacity}button:disabled,.mock-button:disabled{color:var(--color-foreground);opacity:38%}.mock-button{padding:.375rem .625rem;font-size:.75rem;cursor:default;white-space:nowrap}@media(hover: hover){button{cursor:pointer}}input[type=text]{appearance:none;width:100%;margin:0 auto 1rem;padding:.5rem .75rem;color:var(--color-foreground);background-color:var(--color-secondary);font-size:1rem;border:none;border-bottom:2px dotted var(--color-foreground);border-radius:0}input[type=text]:focus-visible{outline:var(--color-primary) auto 1px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;margin:0 auto;background-color:rgba(0,0,0,0);cursor:pointer;vertical-align:bottom}input[type=range]::-webkit-slider-container{appearance:none;-webkit-appearance:none;background-color:rgba(0,0,0,0)}input[type=range]::-webkit-slider-runnable-track{appearance:none;-webkit-appearance:none;height:1.75rem;padding:.25rem;background-color:var(--color-secondary)}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:1.25rem;width:1.25rem;background-color:var(--color-primary);border:none;border-bottom:2px dotted var(--color-foreground);border-radius:0;box-shadow:none}datalist{display:flex;justify-content:space-between;padding:.25rem .875rem 0}datalist option{min-height:.5rem;border-right:1px solid var(--color-secondary)}label{font-size:1rem}::selection{background-color:var(--color-tertiary)}.text-center{text-align:center}.btn-small{padding:.325rem .625rem;font-size:.875rem}.badge{margin-left:.375rem;padding:.25rem .5rem;background-color:var(--color-secondary);font-size:.75rem;font-weight:400;text-transform:uppercase;border-radius:.5rem;vertical-align:.25em}.badge.flush{margin-left:0}.badge.debug{background-color:var(--color-background);font-size:.5rem;font-weight:700;letter-spacing:.2em;z-index:100}.container{position:relative;margin:0 auto;padding:1rem;max-width:32rem}.flex-row{display:flex;gap:2rem;align-items:center}.flex-row.flex-row-vertical{flex-direction:column}.flex-row.flex-start{align-items:flex-start}.flex-row.gap-small{gap:1rem}.flex-50{flex-basis:50%}menu.flex-row{gap:.5rem;flex-direction:row}menu.flex-row>*{width:100%}.top-bar,.bottom-bar{background-color:var(--color-secondary)}.top-bar{display:flex;justify-content:space-between;align-items:center;margin:0 auto;padding:.5rem 1rem}.top-bar h1,.top-bar span{margin:0;font-size:.75rem}.bottom-bar{padding:.5rem}.drawer{position:fixed;top:1rem;bottom:1rem;left:-50%;width:calc(100% - 1rem - 1rem);max-width:32rem;background-color:var(--color-background);border:.5rem solid var(--color-secondary);border-radius:1rem;box-shadow:0 0 2px var(--color-tertiary);opacity:0%;overflow-y:auto;overflow-x:hidden;transform:translate(-50%, 0%);transition:.2s transform ease-in-out,.2s left ease-in-out,.2s opacity ease-in-out}.drawer.drawer-half{top:21.5rem;border-color:var(--color-tertiary)}.drawer>.container{min-height:calc(100% - 41px);opacity:0%;transition:.2s opacity ease-in-out}.drawer.open{left:50%;opacity:100%;transform:translate(-50%, 0%)}.drawer.open>.container{opacity:100%}.drawer header .flex-row h1,.drawer header .flex-row h2,.drawer footer .flex-row h1,.drawer footer .flex-row h2{margin:0}.drawer header h2{margin:0 auto 1rem}.drawer header .flex-row{margin-bottom:.5rem}.btn-drawer-close{position:sticky;right:0;bottom:0;left:0;width:100%;border-top:1px solid var(--color-background)}.heading-small{margin:0 auto .25rem;font-size:.875rem;text-transform:uppercase}.pet-view,.genotype-view{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;background-color:var(--color-secondary);aspect-ratio:1/1}.pet-view{gap:.125rem;margin:0 auto;padding:2.5rem}.pet-view .feature{display:flex;justify-content:center;align-items:center;font-size:1rem;text-align:center}.pet-view .feature svg{height:100%;width:100%}.pet-view.pet-view-medium{padding:1.25rem}.pet-view.pet-view-medium .feature{font-size:.5rem}.pet-view.pet-view-small{height:5rem;width:5rem;padding:.625rem}.pet-view.pet-view-small .feature{font-size:.25rem}.pet-view.pet-view-current{margin:0 auto 1rem}.pet-view#pet-view-mock-home{margin:0 auto .5rem}.genotype-view{height:4.5rem;width:4.5rem;margin:1rem 0;padding:.25rem}.genotype-view .genes{display:flex;gap:.125rem;justify-content:center;align-items:center}.genotype-view .genes .gene{display:inline-block;height:.375rem;width:.375rem;background-color:rgba(0,0,0,0);border:1px solid var(--color-foreground);border-radius:.5rem}.genotype-view .genes .gene.dominant{background-color:var(--color-foreground)}.gene-slot-row{align-items:flex-start;margin:0 auto 1rem;border-bottom:1px solid var(--color-secondary)}.gene-slot-row .gene-slot-background{position:relative;height:3rem;width:3rem;background-color:var(--color-secondary)}.gene-slot-row .gene-slot-background .gene-slot-indicator{position:absolute;top:0;left:0;height:1rem;width:1rem;background-color:var(--color-foreground)}.gene-slot-row .gene-slot-background .gene-slot-indicator.cheek1,.gene-slot-row .gene-slot-background .gene-slot-indicator.nose,.gene-slot-row .gene-slot-background .gene-slot-indicator.cheek2{top:1rem}.gene-slot-row .gene-slot-background .gene-slot-indicator.jaw1,.gene-slot-row .gene-slot-background .gene-slot-indicator.mouth,.gene-slot-row .gene-slot-background .gene-slot-indicator.jaw2{top:2rem}.gene-slot-row .gene-slot-background .gene-slot-indicator.forehead,.gene-slot-row .gene-slot-background .gene-slot-indicator.nose,.gene-slot-row .gene-slot-background .gene-slot-indicator.mouth{left:1rem}.gene-slot-row .gene-slot-background .gene-slot-indicator.eye2,.gene-slot-row .gene-slot-background .gene-slot-indicator.cheek2,.gene-slot-row .gene-slot-background .gene-slot-indicator.jaw2{left:2rem}.gene-slot-row .gene-row{align-items:flex-start;margin:0 auto 1rem}.gene-slot-row .gene-row .gene-type{width:100%;margin:0 auto;padding:.375rem;color:var(--color-foreground);background-color:var(--color-secondary);font-weight:700;text-align:center;text-transform:uppercase;border-radius:.5rem}.gene-slot-row .gene-row .gene-type.dominant{color:var(--color-background);background-color:var(--color-foreground)}.feature svg *{stroke:var(--color-foreground);stroke-width:2px}.feature svg *[fill]{fill:var(--color-foreground)}.pet-view-medium .feature svg *{stroke-width:3px}.pet-view-small .feature svg *{stroke-width:4px}.gene-slot-row>div:last-child,.gene-row>div:last-child{width:100%}#pet-view-baby{margin-bottom:1rem;transform:scale(0, 0);transition:5s transform cubic-bezier(0.95, 0.1, 1, 0.25)}#pet-view-baby.active{transform:scale(1, 1)}#drawer-pet-info,#drawer-find-mate{z-index:10}#drawer-confirm-mate,#drawer-genotype-details,#drawer-ancestry{z-index:15}#drawer-baby{z-index:20}#drawer-edit-name{z-index:25}#pet-info-name{margin:0 auto .5rem;font-size:1.25rem}#pet-info-birthdate{margin:0 auto .25rem}#pet-info-generation{margin:0 auto .5rem}#find-mate-name,#find-mate-option-name{margin:0 auto .5rem}#column-find-mate-option{transition:transform .5s ease-in-out;transform:translateX(100vw)}#column-find-mate-option.active{transform:translateX(0vw)}#drawer-baby-content{text-align:center;opacity:0;pointer-events:none;transition:1s opacity}#drawer-baby-content.active{pointer-events:all;opacity:1}#drawer-baby-content .badge{margin-left:0}#ancestry-view{margin-bottom:1rem;overflow-x:auto}#ancestry-view .ancestry-node{margin-left:.5rem;border:2px solid var(--color-primary);border-top:none;border-right:none}#ancestry-view .ancestry-node summary{padding:.25rem 0;cursor:pointer}#ancestry-view .ancestry-node details{padding:.375rem 0 .375rem .5rem}#ancestry-view .ancestry-node .ancestry-name{font-size:1rem}#ancestry-view .ancestry-node .pet-view{margin:0 auto .5rem 0}.toggle-row{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.toggle-row h3,.toggle-row h4{margin-bottom:0}.toggle-row input{display:none}.toggle-row .toggle-switch{width:3rem;padding:.25rem;background-color:var(--color-primary);transition:.1s background-color}.toggle-row .toggle-switch .toggle-indicator{position:relative;left:0;height:1.25rem;width:1.25rem;background-color:var(--color-background);border-bottom:2px dotted var(--color-foreground);transition:.1s background-color linear,.1s left linear}.toggle-row .toggle-switch.on .toggle-indicator{left:1.25rem;background-color:var(--color-tertiary)}.toggle-row-sfx{margin-bottom:.5rem}.volume-min-max{justify-content:space-between;margin-bottom:.25rem}#menu-color-palettes li{display:flex;gap:.5rem}.palette-preview{position:relative;height:2.5rem;width:6.5rem;background:linear-gradient(to right, var(--color-background) 0%, var(--color-background) 20%, var(--color-foreground) 20%, var(--color-foreground) 40%, var(--color-primary) 40%, var(--color-primary) 60%, var(--color-tertiary) 60%, var(--color-tertiary) 80%, var(--color-secondary) 80%, var(--color-secondary) 100%);border:.25rem solid var(--color-secondary);border-radius:.5rem}.palette-preview.active:after{content:"✓";position:absolute;right:.125rem;top:.25rem;color:var(--color-foreground);font-size:1rem}#drawer-help ul{list-style:disc;list-style-position:outside;padding:0 0 0 2rem}.mock-home-screen{max-width:256px;background-color:var(--white)}#mock-gene-row .gene-slot-row{border:none}#mock-genotype-view{margin-top:0}#site-footer{padding:2rem 1rem 1rem;font-size:.75rem;text-align:center}.stippling main,.stippling .drawer{background-color:var(--color-background);opacity:1;background-image:radial-gradient(var(--color-background) 0.8px, var(--white) 0.8px);background-size:2px 2px}.stippling .gene-slot-row .gene-row .gene-type.dominant{background-color:var(--color-foreground);opacity:1;background-image:radial-gradient(var(--color-foreground) 0.8px, var(--white) 0.8px);background-size:2px 2px}.stippling body,.stippling .pet-view,.stippling .genotype-view,.stippling input[type=text],.stippling input[type=range]::-webkit-slider-runnable-track,.stippling .badge,.stippling .top-bar,.stippling .bottom-bar,.stippling .gene-slot-row .gene-slot-background,.stippling .gene-slot-row .gene-row .gene-type{background-color:var(--color-secondary);opacity:1;background-image:radial-gradient(var(--color-secondary) 0.8px, var(--white) 0.8px);background-size:2px 2px}body.stippling{background-color:var(--color-secondary);opacity:1;background-image:radial-gradient(var(--color-secondary) 0.8px, var(--white) 0.8px);background-size:2px 2px}/*# sourceMappingURL=styles.css.map */