Purrsonality Match<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --cream: #FAF7F2;\n --warm-white: #FFF9F4;\n --dusty-rose: #E8B4A0;\n --muted-sage: #8FAF8A;\n --soft-terracotta: #C8714A;\n --deep-clay: #7A3E28;\n --charcoal: #2C2420;\n --mid-gray: #8A7E78;\n --light-border: #EAE0D8;\n --accent-gold: #C9973A;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--cream);\n color: var(--charcoal);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 SCREENS \u2500\u2500 *\/\n .screen { display: none; min-height: 100vh; }\n .screen.active { display: flex; flex-direction: column; }\n\n \/* \u2500\u2500 LANDING \u2500\u2500 *\/\n #screen-landing {\n background: var(--warm-white);\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 2rem;\n position: relative;\n overflow: hidden;\n }\n #screen-landing::before {\n content: '';\n position: absolute;\n top: -80px; right: -80px;\n width: 320px; height: 320px;\n background: radial-gradient(circle, #F2D4C4 0%, transparent 70%);\n pointer-events: none;\n }\n #screen-landing::after {\n content: '';\n position: absolute;\n bottom: -60px; left: -60px;\n width: 260px; height: 260px;\n background: radial-gradient(circle, #D4E8D0 0%, transparent 70%);\n pointer-events: none;\n }\n .landing-paw {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n display: block;\n animation: bounce 2s ease-in-out infinite;\n }\n @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }\n\n .landing-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2.4rem, 6vw, 3.8rem);\n color: var(--deep-clay);\n line-height: 1.1;\n margin-bottom: 0.5rem;\n }\n .landing-title em { font-style: italic; color: var(--soft-terracotta); }\n .landing-subtitle {\n font-size: 1.05rem;\n color: var(--mid-gray);\n font-weight: 300;\n max-width: 340px;\n margin: 0 auto 2.5rem;\n line-height: 1.6;\n }\n .btn-primary {\n background: var(--soft-terracotta);\n color: #fff;\n border: none;\n padding: 0.9rem 2.5rem;\n border-radius: 50px;\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n transition: transform 0.15s, background 0.15s;\n letter-spacing: 0.02em;\n }\n .btn-primary:hover { background: var(--deep-clay); transform: translateY(-1px); }\n\n .cats-preview {\n display: flex;\n gap: 0.75rem;\n justify-content: center;\n margin-top: 2.5rem;\n flex-wrap: wrap;\n }\n .cat-chip {\n background: #fff;\n border: 1.5px solid var(--light-border);\n border-radius: 50px;\n padding: 0.4rem 1rem;\n font-size: 0.8rem;\n color: var(--mid-gray);\n }\n\n \/* \u2500\u2500 QUIZ \u2500\u2500 *\/\n #screen-quiz {\n background: var(--cream);\n padding: 1.5rem 1.5rem 2rem;\n align-items: center;\n }\n .quiz-header {\n width: 100%; max-width: 480px;\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 1.5rem;\n }\n .quiz-logo {\n font-family: 'Playfair Display', serif;\n font-size: 1.1rem;\n color: var(--deep-clay);\n font-style: italic;\n }\n .progress-track {\n flex: 1; margin: 0 1rem;\n height: 4px;\n background: var(--light-border);\n border-radius: 2px;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: var(--soft-terracotta);\n border-radius: 2px;\n transition: width 0.4s ease;\n }\n .progress-label {\n font-size: 0.8rem;\n color: var(--mid-gray);\n white-space: nowrap;\n }\n\n .question-card {\n background: #fff;\n border-radius: 20px;\n padding: 2rem 1.75rem;\n width: 100%; max-width: 480px;\n border: 1.5px solid var(--light-border);\n animation: cardIn 0.3s ease;\n }\n @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }\n\n .question-tag {\n display: inline-block;\n background: #FDF0EA;\n color: var(--soft-terracotta);\n font-size: 0.72rem;\n font-weight: 500;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n padding: 0.25rem 0.7rem;\n border-radius: 50px;\n margin-bottom: 1rem;\n }\n .question-text {\n font-family: 'Playfair Display', serif;\n font-size: 1.35rem;\n line-height: 1.45;\n color: var(--charcoal);\n margin-bottom: 1.75rem;\n }\n .options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.75rem;\n }\n .option-btn {\n background: var(--cream);\n border: 1.5px solid var(--light-border);\n border-radius: 14px;\n padding: 0.9rem 0.75rem;\n text-align: center;\n cursor: pointer;\n transition: all 0.15s;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.9rem;\n color: var(--charcoal);\n line-height: 1.35;\n }\n .option-btn:hover { border-color: var(--dusty-rose); background: #FEF5F0; }\n .option-btn.selected { border-color: var(--soft-terracotta); background: #FDF0EA; color: var(--deep-clay); font-weight: 500; }\n .option-emoji { font-size: 1.4rem; display: block; margin-bottom: 0.35rem; }\n\n .quiz-nav {\n display: flex; gap: 0.75rem; margin-top: 1.5rem;\n width: 100%; max-width: 480px;\n }\n .btn-back {\n flex: 0 0 auto;\n background: transparent;\n border: 1.5px solid var(--light-border);\n border-radius: 50px;\n padding: 0.8rem 1.4rem;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.95rem;\n color: var(--mid-gray);\n cursor: pointer;\n transition: all 0.15s;\n }\n .btn-back:hover { border-color: var(--mid-gray); color: var(--charcoal); }\n .btn-next {\n flex: 1;\n background: var(--charcoal);\n color: #fff;\n border: none;\n border-radius: 50px;\n padding: 0.8rem 1.4rem;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s;\n opacity: 0.4;\n pointer-events: none;\n }\n .btn-next.enabled { opacity: 1; pointer-events: all; }\n .btn-next.enabled:hover { background: var(--soft-terracotta); }\n\n \/* \u2500\u2500 LOADING \u2500\u2500 *\/\n #screen-loading {\n background: var(--warm-white);\n align-items: center; justify-content: center;\n text-align: center; padding: 2rem; flex-direction: column; gap: 1.5rem;\n }\n .loading-cat {\n font-size: 3rem;\n animation: wiggle 0.6s ease-in-out infinite alternate;\n }\n @keyframes wiggle { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }\n .loading-text {\n font-family: 'Playfair Display', serif;\n font-size: 1.5rem;\n color: var(--deep-clay);\n }\n .loading-sub {\n font-size: 0.9rem; color: var(--mid-gray); max-width: 260px; line-height: 1.6;\n }\n .loading-dots { display: flex; gap: 6px; justify-content: center; margin-top: 0.5rem; }\n .dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: var(--dusty-rose);\n animation: pulse 1.2s ease-in-out infinite;\n }\n .dot:nth-child(2) { animation-delay: 0.2s; }\n .dot:nth-child(3) { animation-delay: 0.4s; }\n @keyframes pulse { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }\n\n \/* \u2500\u2500 RESULTS \u2500\u2500 *\/\n #screen-results {\n background: var(--cream);\n padding: 1.5rem 1.5rem 3rem;\n align-items: center;\n }\n .results-header {\n text-align: center; width: 100%; max-width: 520px; margin-bottom: 1.75rem;\n }\n .results-eyebrow {\n font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--soft-terracotta); font-weight: 500; margin-bottom: 0.5rem;\n }\n .results-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(1.8rem, 5vw, 2.5rem);\n color: var(--deep-clay); line-height: 1.2; margin-bottom: 0.5rem;\n }\n .results-title em { font-style: italic; }\n .results-subtitle { font-size: 0.9rem; color: var(--mid-gray); line-height: 1.6; }\n\n .cat-cards-list {\n display: flex; flex-direction: column; gap: 1.25rem;\n width: 100%; max-width: 520px;\n }\n .cat-card {\n background: #fff;\n border: 1.5px solid var(--light-border);\n border-radius: 20px;\n overflow: hidden;\n animation: cardIn 0.4s ease both;\n transition: transform 0.15s, box-shadow 0.15s;\n }\n .cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(120,60,30,0.08); }\n .cat-card.top-match { border-color: var(--dusty-rose); border-width: 2px; }\n\n .cat-card-top {\n display: flex;\n gap: 0;\n }\n .cat-photo-wrap {\n width: 140px; flex-shrink: 0;\n background: var(--cream);\n position: relative; overflow: hidden;\n }\n .cat-photo-wrap img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n }\n .cat-photo-placeholder {\n width: 100%; height: 160px;\n display: flex; align-items: center; justify-content: center;\n font-size: 3.5rem;\n background: linear-gradient(135deg, #FDF0EA 0%, #FAEEE5 100%);\n }\n\n .cat-info { padding: 1.2rem 1.25rem; flex: 1; }\n .cat-badge {\n display: inline-flex; align-items: center; gap: 0.3rem;\n background: #FEF5F0; border: 1px solid #F2C9B8;\n border-radius: 50px; padding: 0.2rem 0.65rem;\n font-size: 0.7rem; font-weight: 500; color: var(--soft-terracotta);\n margin-bottom: 0.6rem; letter-spacing: 0.04em;\n }\n .top-match .cat-badge { background: #FFF0E8; border-color: var(--dusty-rose); }\n .cat-name {\n font-family: 'Playfair Display', serif;\n font-size: 1.4rem; color: var(--charcoal); margin-bottom: 0.2rem;\n }\n .cat-meta { font-size: 0.8rem; color: var(--mid-gray); margin-bottom: 0.65rem; }\n .cat-traits {\n display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem;\n }\n .trait-chip {\n background: var(--cream); border: 1px solid var(--light-border);\n border-radius: 50px; padding: 0.2rem 0.6rem;\n font-size: 0.72rem; color: var(--mid-gray);\n }\n\n .match-bar-wrap { margin-bottom: 0.75rem; }\n .match-bar-label {\n display: flex; justify-content: space-between; align-items: center;\n font-size: 0.78rem; color: var(--mid-gray); margin-bottom: 0.3rem;\n }\n .match-pct { font-weight: 500; color: var(--soft-terracotta); }\n .match-bar-track {\n height: 5px; background: var(--light-border);\n border-radius: 3px; overflow: hidden;\n }\n .match-bar-fill {\n height: 100%; border-radius: 3px;\n background: linear-gradient(90deg, var(--dusty-rose), var(--soft-terracotta));\n transition: width 1s ease 0.3s;\n width: 0%;\n }\n\n .cat-reason {\n font-size: 0.83rem; line-height: 1.6;\n color: var(--mid-gray);\n border-top: 1px solid var(--light-border);\n padding-top: 0.85rem; margin-top: 0.1rem;\n }\n\n .cat-link {\n display: inline-block; margin-top: 0.75rem;\n background: var(--soft-terracotta); color: #fff;\n border-radius: 50px; padding: 0.5rem 1.2rem;\n font-size: 0.82rem; font-weight: 500; text-decoration: none;\n transition: background 0.15s;\n }\n .cat-link:hover { background: var(--deep-clay); }\n\n .restart-btn {\n margin-top: 2rem;\n background: transparent;\n border: 1.5px solid var(--light-border);\n border-radius: 50px;\n padding: 0.75rem 2rem;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.9rem; color: var(--mid-gray);\n cursor: pointer; transition: all 0.15s;\n }\n .restart-btn:hover { border-color: var(--mid-gray); color: var(--charcoal); }\n\n .error-box {\n background: #FEF0EE; border: 1px solid #F2C5BE;\n border-radius: 12px; padding: 1rem 1.25rem;\n font-size: 0.875rem; color: #A03020; line-height: 1.5;\n max-width: 480px; width: 100%; text-align: left;\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div id=\"screen-landing\" class=\"screen active\">\n <span class=\"landing-paw\">\ud83d\udc3e<\/span>\n <h1 class=\"landing-title\">Find your<br><em>Purrfect<\/em> Match<\/h1>\n <p class=\"landing-subtitle\">Answer a few questions about your lifestyle \u2014 we’ll find the adoptable cat in Escondido who fits you best.<\/p>\n <button class=\"btn-primary\" onclick=\"startQuiz()\">Find My Match \u2192<\/button>\n <div class=\"cats-preview\">\n <span class=\"cat-chip\">\ud83d\udda4 Bennington<\/span>\n <span class=\"cat-chip\">\ud83d\udc2f Cookie<\/span>\n <span class=\"cat-chip\">\ud83c\udf38 Kiki<\/span>\n <span class=\"cat-chip\">\ud83e\ude76 Lemur<\/span>\n <span class=\"cat-chip\">\ud83e\udd0d Pearl<\/span>\n <span class=\"cat-chip\">\ud83d\udda4 Rain<\/span>\n <\/div>\n<\/div>\n\n\n<div id=\"screen-quiz\" class=\"screen\">\n <div class=\"quiz-header\">\n <span class=\"quiz-logo\">Purrsonality<\/span>\n <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progress-fill\"><\/div><\/div>\n <span class=\"progress-label\" id=\"progress-label\">1 \/ 7<\/span>\n <\/div>\n <div class=\"question-card\" id=\"question-card\">\n \n <\/div>\n <div class=\"quiz-nav\">\n <button class=\"btn-back\" id=\"btn-back\" onclick=\"prevQuestion()\">\u2190 Back<\/button>\n <button class=\"btn-next\" id=\"btn-next\" onclick=\"nextQuestion()\">Continue \u2192<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"screen-apikey\" class=\"screen\">\n <div style=\"max-width:440px;width:100%;margin:auto;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem;\">\n <div style=\"text-align:center;\">\n <span style=\"font-size:2.5rem\">\ud83d\udd11<\/span>\n <h2 style=\"font-family:'Playfair Display',serif;font-size:1.7rem;color:#7A3E28;margin:0.5rem 0 0.4rem;line-height:1.2;\">One quick step<\/h2>\n <p style=\"font-size:0.9rem;color:#8A7E78;line-height:1.6;\">To power the matching engine, paste your Anthropic API key below. It’s stored only in your browser and never sent anywhere except the Anthropic API.<\/p>\n <\/div>\n <div style=\"background:#fff;border:1.5px solid #EAE0D8;border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;\">\n <div>\n <label style=\"font-size:0.8rem;font-weight:500;color:#8A7E78;display:block;margin-bottom:0.4rem;\">Anthropic API Key<\/label>\n <input id=\"apikey-input\" type=\"password\" placeholder=\"sk-ant-...\" style=\"width:100%;padding:0.7rem 0.9rem;border:1.5px solid #EAE0D8;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:0.9rem;color:#2C2420;background:#FAF7F2;outline:none;\">\n <\/div>\n <button class=\"btn-primary\" style=\"width:100%;\" onclick=\"saveApiKey()\">Save & find my matches \u2192<\/button>\n <p id=\"apikey-error\" style=\"font-size:0.8rem;color:#C8714A;display:none;text-align:center;\"><\/p>\n <\/div>\n <div style=\"background:#F5F8F2;border:1px solid #D8E8D0;border-radius:12px;padding:1rem 1.1rem;\">\n <p style=\"font-size:0.78rem;color:#5A7A55;line-height:1.6;\"><strong>How to get a key:<\/strong> Visit <a href=\"https:\/\/console.anthropic.com\" target=\"_blank\" style=\"color:#5A7A55;\" rel=\"noopener\">console.anthropic.com<\/a> \u2192 API Keys \u2192 Create Key. Usage is pay-as-you-go and each match costs a fraction of a cent.<\/p>\n <\/div>\n <button style=\"background:transparent;border:none;color:#8A7E78;font-size:0.85rem;cursor:pointer;text-decoration:underline;\" onclick=\"showScreen('landing')\">\u2190 Go back<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"screen-loading\" class=\"screen\">\n <span class=\"loading-cat\">\ud83d\ude3a<\/span>\n <p class=\"loading-text\">Reading your personality\u2026<\/p>\n <p class=\"loading-sub\" id=\"loading-msg\">Consulting the cats about their thoughts on nap schedules.<\/p>\n <div class=\"loading-dots\"><div class=\"dot\"><\/div><div class=\"dot\"><\/div><div class=\"dot\"><\/div><\/div>\n<\/div>\n\n\n<div id=\"screen-results\" class=\"screen\">\n <div class=\"results-header\">\n <p class=\"results-eyebrow\">Your matches are in<\/p>\n <h2 class=\"results-title\">These cats <em>chose you<\/em> \ud83d\udc3e<\/h2>\n <p class=\"results-subtitle\" id=\"results-subtitle\">Based on your answers, here are your best personality matches.<\/p>\n <\/div>\n <div class=\"cat-cards-list\" id=\"cat-cards-list\"><\/div>\n <div id=\"error-display\"><\/div>\n <button class=\"restart-btn\" onclick=\"restart()\">\u21a9 Start over<\/button>\n<\/div>\n\n<script>\nconst CATS = [\n {\n id: 1, name: \"Bennington\", age: \"2 years 4 months\", gender: \"Male\", breed: \"Domestic Shorthair\",\n color: \"Black\",\n traits: [\"Affectionate\", \"Snuggly\", \"Playful\", \"Curious\", \"Communicative\", \"Gentle\"],\n description: \"Bennington is a sweet, resilient black cat with a big personality and a bigger heart. He's affectionate, communicative, and loves to snuggle. He gets along well with other cats and has special needs \u2014 making him an especially rewarding companion for a patient, loving home. Cared for by Kitten Rescue Life in Escondido.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/46166619-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1282069623\",\n emoji: \"\ud83d\udda4\",\n specialNeeds: true,\n goodWith: [\"Cats\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 2, name: \"Cookie\", age: \"1 year 8 months\", gender: \"Female\", breed: \"Tabby\",\n color: \"Tiger Striped\",\n traits: [\"Affectionate\", \"Athletic\", \"Playful\", \"Confident\", \"Communicative\", \"Snuggly\"],\n description: \"Cookie is a spirited young tiger-striped tabby bursting with energy and confidence. She's communicative, athletic, and loves interactive play followed by snuggle sessions. She's great with kids but needs a dog-free home where she can truly shine.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/46974471-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1281712451\",\n emoji: \"\ud83d\udc2f\",\n goodWith: [\"Kids\"],\n notGoodWith: [\"Dogs\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 3, name: \"Kiki\", age: \"1 year 7 months\", gender: \"Female\", breed: \"Calico\",\n color: \"Calico\",\n traits: [\"Affectionate\", \"Chill\", \"Independent\", \"Confident\", \"Curious\", \"Quiet\"],\n description: \"Kiki is a self-possessed calico with a quiet confidence and a selective heart. She's food-motivated, curious on her own terms, and bonds deeply once she trusts you. She needs an experienced adopter and a home without kids, dogs, or other cats \u2014 a patient solo companion will bring out her best.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/45430046-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1245135306\",\n emoji: \"\ud83c\udf38\",\n notGoodWith: [\"Kids\", \"Dogs\", \"Cats\"],\n experiencedAdopter: true,\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 4, name: \"Lemur\", age: \"2 years 8 months\", gender: \"Female\", breed: \"Maine Coon\",\n color: \"Gray\/Silver Tabby\",\n traits: [\"Affectionate\", \"Chill\", \"Snuggly\", \"Gentle\", \"Curious\", \"Quiet\"],\n description: \"Lemur is a gorgeous long-haired Maine Coon with a calm, gentle soul. She's food-motivated and communicative in the softest way \u2014 a natural lap cat who loves quiet homes. She gets along fine without dogs but is otherwise wonderfully easygoing and deeply snuggly.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/46974454-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1280949574\",\n emoji: \"\ud83e\ude76\",\n notGoodWith: [\"Dogs\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 5, name: \"Pearl\", age: \"7 months\", gender: \"Female\", breed: \"Domestic Shorthair\",\n color: \"White\",\n traits: [\"Curious\", \"Gentle\", \"Playful\", \"Shy\"],\n description: \"Pearl is a sweet, mostly-white kitten who takes a little time to open up but blossoms into a playful, gentle companion once she feels safe. She's good with other cats and would thrive with a patient adopter who enjoys watching a shy soul come into their own.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/47521588-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1293796051\",\n emoji: \"\ud83e\udd0d\",\n goodWith: [\"Cats\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 6, name: \"Rain\", age: \"4 months\", gender: \"Male\", breed: \"Domestic Shorthair\",\n color: \"Black\",\n traits: [\"Athletic\", \"Extroverted\", \"Playful\"],\n description: \"Rain is a sleek all-black kitten with a huge personality packed into a tiny frame. He's extroverted, athletic, and loves other cats \u2014 a social little daredevil who needs stimulation, play, and ideally a feline buddy to keep him company. Perfect for an active household ready for a ball of energy.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/47375362-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1290218081\",\n emoji: \"\ud83d\udda4\",\n goodWith: [\"Cats\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n }\n];\n\nconst QUESTIONS = [\n {\n tag: \"Your lifestyle\",\n text: \"How would you describe your typical day at home?\",\n options: [\n { emoji: \"\ud83c\udfe0\", label: \"Mostly home, love a quiet atmosphere\" },\n { emoji: \"\ud83c\udf89\", label: \"Home often, but it's lively & social\" },\n { emoji: \"\ud83d\udcbc\", label: \"Out most of the day, busy schedule\" },\n { emoji: \"\ud83c\udf3f\", label: \"Mix of both \u2014 steady but calm\" }\n ]\n },\n {\n tag: \"Energy level\",\n text: \"What energy level are you hoping for in a cat?\",\n options: [\n { emoji: \"\ud83d\ude34\", label: \"Low key \u2014 a mellow, chill companion\" },\n { emoji: \"\u26a1\", label: \"High energy \u2014 bring on the chaos!\" },\n { emoji: \"\ud83c\udfaf\", label: \"Playful but settles down at night\" },\n { emoji: \"\ud83c\udf19\", label: \"Independent and self-entertaining\" }\n ]\n },\n {\n tag: \"Affection\",\n text: \"How much physical affection are you looking for?\",\n options: [\n { emoji: \"\ud83e\udd17\", label: \"Constant cuddles \u2014 lap cat please\" },\n { emoji: \"\ud83e\udd1d\", label: \"Affectionate on their own terms\" },\n { emoji: \"\ud83d\udc40\", label: \"Present but not clingy\" },\n { emoji: \"\ud83d\udca4\", label: \"Peaceful roommate vibes\" }\n ]\n },\n {\n tag: \"Household\",\n text: \"What does your home look like?\",\n options: [\n { emoji: \"\ud83e\uddcd\", label: \"Just me \u2014 solo household\" },\n { emoji: \"\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\", label: \"Family with kids\" },\n { emoji: \"\ud83d\udc15\", label: \"Other pets already at home\" },\n { emoji: \"\ud83d\udc6b\", label: \"Two adults, no kids or pets\" }\n ]\n },\n {\n tag: \"Experience\",\n text: \"What's your cat experience level?\",\n options: [\n { emoji: \"\ud83d\udc23\", label: \"First-time cat owner\" },\n { emoji: \"\ud83d\udc08\", label: \"Had cats before, comfortable\" },\n { emoji: \"\ud83c\udfc6\", label: \"Very experienced with cats\" },\n { emoji: \"\ud83c\udf93\", label: \"I've fostered or volunteered with cats\" }\n ]\n },\n {\n tag: \"Personality\",\n text: \"Which best describes your own personality?\",\n options: [\n { emoji: \"\ud83d\udcda\", label: \"Calm, introverted, homebodied\" },\n { emoji: \"\ud83c\udf0a\", label: \"Spontaneous and adventurous\" },\n { emoji: \"\ud83c\udfa8\", label: \"Creative, sensitive, emotional\" },\n { emoji: \"\ud83d\udde3\ufe0f\", label: \"Social, outgoing, love company\" }\n ]\n },\n {\n tag: \"Commitment\",\n text: \"What matters most to you in this adoption?\",\n options: [\n { emoji: \"\ud83d\udc9b\", label: \"Giving a senior or shy cat a home\" },\n { emoji: \"\ud83c\udf8a\", label: \"A fun, entertaining companion\" },\n { emoji: \"\ud83e\udd32\", label: \"A deep, bonded relationship\" },\n { emoji: \"\ud83c\udf31\", label: \"Watching a kitten grow up\" }\n ]\n }\n];\n\nlet current = 0;\nconst answers = {};\n\nfunction showScreen(id) {\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById('screen-' + id).classList.add('active');\n}\n\nfunction showApiKeyScreen() {\n showScreen('apikey');\n}\n\nfunction saveApiKey() {\n const val = document.getElementById('apikey-input').value.trim();\n const errEl = document.getElementById('apikey-error');\n if (!val.startsWith('sk-ant-')) {\n errEl.textContent = 'That doesn\\'t look like a valid Anthropic key (should start with sk-ant-).';\n errEl.style.display = 'block';\n return;\n }\n errEl.style.display = 'none';\n localStorage.setItem('anthropic_api_key', val);\n runMatching();\n}\n\nfunction startQuiz() {\n current = 0;\n Object.keys(answers).forEach(k => delete answers[k]);\n renderQuestion();\n showScreen('quiz');\n}\n\nfunction renderQuestion() {\n const q = QUESTIONS[current];\n const total = QUESTIONS.length;\n document.getElementById('progress-fill').style.width = ((current \/ total) * 100) + '%';\n document.getElementById('progress-label').textContent = (current + 1) + ' \/ ' + total;\n document.getElementById('btn-back').style.visibility = current === 0 ? 'hidden' : 'visible';\n\n const selected = answers[current];\n const card = document.getElementById('question-card');\n card.innerHTML = `\n <span class=\"question-tag\">${q.tag}<\/span>\n <p class=\"question-text\">${q.text}<\/p>\n <div class=\"options-grid\">\n ${q.options.map((o, i) => `\n <button class=\"option-btn ${selected === i ? 'selected' : ''}\" onclick=\"selectOption(${i})\">\n <span class=\"option-emoji\">${o.emoji}<\/span>\n ${o.label}\n <\/button>\n `).join('')}\n <\/div>\n `;\n updateNextBtn();\n}\n\nfunction selectOption(idx) {\n answers[current] = idx;\n document.querySelectorAll('.option-btn').forEach((b, i) => {\n b.classList.toggle('selected', i === idx);\n });\n updateNextBtn();\n if (current < QUESTIONS.length - 1) {\n setTimeout(() => nextQuestion(), 400);\n }\n}\n\nfunction updateNextBtn() {\n const btn = document.getElementById('btn-next');\n const isLast = current === QUESTIONS.length - 1;\n btn.textContent = isLast ? 'Find My Matches \u2728' : 'Continue \u2192';\n btn.classList.toggle('enabled', answers[current] !== undefined);\n}\n\nfunction nextQuestion() {\n if (answers[current] === undefined) return;\n if (current < QUESTIONS.length - 1) {\n current++;\n renderQuestion();\n } else {\n runMatching();\n }\n}\n\nfunction prevQuestion() {\n if (current > 0) { current--; renderQuestion(); }\n}\n\nconst loadingMessages = [\n \"Consulting the cats about nap preferences\u2026\",\n \"Cross-referencing purr frequencies\u2026\",\n \"Analyzing whisker compatibility\u2026\",\n \"Checking zoomies schedules\u2026\",\n \"Asking Mango, Ziggy, and friends who chose you\u2026\"\n];\n\nasync function runMatching() {\n showScreen('loading');\n let msgIdx = 0;\n const msgEl = document.getElementById('loading-msg');\n const interval = setInterval(() => {\n msgIdx = (msgIdx + 1) % loadingMessages.length;\n msgEl.textContent = loadingMessages[msgIdx];\n }, 2200);\n\n const answerSummary = QUESTIONS.map((q, i) => {\n const chosen = answers[i] !== undefined ? q.options[answers[i]].label : 'No answer';\n return `Q${i+1}: ${q.text}\\nAnswer: ${chosen}`;\n }).join('\\n\\n');\n\n const catProfiles = CATS.map(c => {\n const goodWith = c.goodWith ? `Good with: ${c.goodWith.join(', ')}. ` : '';\n const notGoodWith = c.notGoodWith ? `NOT good with: ${c.notGoodWith.join(', ')}. ` : '';\n const expNeeded = c.experiencedAdopter ? 'Needs experienced adopter. ' : '';\n const special = c.specialNeeds ? 'Has special needs. ' : '';\n return `Cat: ${c.name} | Age: ${c.age} | Gender: ${c.gender} | Breed: ${c.breed} | Traits: ${c.traits.join(', ')} | ${goodWith}${notGoodWith}${expNeeded}${special}Bio: ${c.description}`;\n }).join('\\n');\n\n const prompt = `You are a cat adoption matchmaker. Based on the person's quiz answers, rank all 6 cats from best to worst match and explain why each one does or doesn't fit.\n\nPERSON'S QUIZ ANSWERS:\n${answerSummary}\n\nCAT PROFILES:\n${catProfiles}\n\nRespond ONLY with valid JSON (no markdown, no backticks, no preamble) in this exact format:\n{\n \"matches\": [\n { \"name\": \"CatName\", \"score\": 92, \"reason\": \"Two-sentence explanation of why this cat fits.\" },\n ...all 6 cats ranked...\n ]\n}\nScores should be realistic (40\u201398 range). Be specific and warm in the reasons.`;\n\n const apiKey = localStorage.getItem('anthropic_api_key');\n if (!apiKey) { clearInterval(interval); showApiKeyScreen(); return; }\n\n try {\n const response = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'x-api-key': apiKey,\n 'anthropic-version': '2023-06-01',\n 'anthropic-dangerous-direct-browser-access': 'true'\n },\n body: JSON.stringify({\n model: 'claude-sonnet-4-20250514',\n max_tokens: 1000,\n messages: [{ role: 'user', content: prompt }]\n })\n });\n\n const data = await response.json();\n clearInterval(interval);\n if (response.status === 401) {\n localStorage.removeItem('anthropic_api_key');\n showResults(null, 'Invalid API key \u2014 please check your key and try again.');\n return;\n }\n const text = data.content.map(b => b.text || '').join('');\n const clean = text.replace(\/```json|```\/g, '').trim();\n const parsed = JSON.parse(clean);\n showResults(parsed.matches);\n } catch (e) {\n clearInterval(interval);\n showResults(null, e.message);\n }\n}\n\nfunction showResults(matches, error) {\n showScreen('results');\n const list = document.getElementById('cat-cards-list');\n const errEl = document.getElementById('error-display');\n\n if (error || !matches) {\n errEl.innerHTML = `<div class=\"error-box\">${error || 'Unknown error'}<br><br><button onclick=\"localStorage.removeItem('anthropic_api_key');showApiKeyScreen()\" style=\"margin-top:0.5rem;background:#C8714A;color:#fff;border:none;padding:0.5rem 1.2rem;border-radius:50px;cursor:pointer;font-size:0.85rem;\">Update API key \u2192<\/button><\/div>`;\n list.innerHTML = '';\n return;\n }\n errEl.innerHTML = '';\n\n const ranked = matches.map(m => {\n const cat = CATS.find(c => c.name.toLowerCase() === m.name.toLowerCase());\n return { ...m, cat };\n }).filter(m => m.cat);\n\n const top = ranked[0];\n document.getElementById('results-subtitle').textContent =\n `${top?.cat?.name} is your #1 match \u2014 but all six have something special to offer.`;\n\n list.innerHTML = ranked.map((m, idx) => {\n const c = m.cat;\n const isTop = idx === 0;\n const delay = idx * 0.1;\n return `\n <div class=\"cat-card ${isTop ? 'top-match' : ''}\" style=\"animation-delay:${delay}s\">\n <div class=\"cat-card-top\">\n <div class=\"cat-photo-wrap\">\n ${c.photo\n ? `<img decoding=\"async\" src=\"${c.photo}\" alt=\"${c.name}\" style=\"width:100%;height:100%;min-height:160px;object-fit:cover;display:block\" onerror=\"this.parentElement.innerHTML='<div class=\\\\'cat-photo-placeholder\\\\'><span style=\\\\'font-size:3rem\\\\'>${c.emoji}<\/span><\/div>'\">`\n : `<div class=\"cat-photo-placeholder\" style=\"height:100%;min-height:160px\"><span style=\"font-size:3rem\">${c.emoji}<\/span><\/div>`\n }\n <\/div>\n <div class=\"cat-info\">\n <span class=\"cat-badge\">${isTop ? '\u2b50 Best match' : '#' + (idx+1) + ' match'}<\/span>\n ${c.specialNeeds ? '<span style=\"display:inline-block;margin-left:6px;background:#FDF5E0;border:1px solid #F0D080;border-radius:50px;padding:0.2rem 0.65rem;font-size:0.7rem;font-weight:500;color:#8A6A10;\">Special needs<\/span>' : ''}\n ${c.experiencedAdopter ? '<span style=\"display:inline-block;margin-left:6px;background:#EEF0FD;border:1px solid #C0C8F0;border-radius:50px;padding:0.2rem 0.65rem;font-size:0.7rem;font-weight:500;color:#3A4499;\">Experienced adopter<\/span>' : ''}\n <h3 class=\"cat-name\">${c.name}<\/h3>\n <p class=\"cat-meta\">${c.age} \u00b7 ${c.gender} \u00b7 ${c.breed}${c.shelter ? ' \u00b7 <em>' + c.shelter + '<\/em>' : ''}<\/p>\n <div class=\"cat-traits\">\n ${c.traits.map(t => `<span class=\"trait-chip\">${t}<\/span>`).join('')}\n <\/div>\n <div class=\"match-bar-wrap\">\n <div class=\"match-bar-label\">\n <span>Compatibility<\/span>\n <span class=\"match-pct\">${m.score}%<\/span>\n <\/div>\n <div class=\"match-bar-track\">\n <div class=\"match-bar-fill\" id=\"bar-${c.id}\" data-pct=\"${m.score}\"><\/div>\n <\/div>\n <\/div>\n <p class=\"cat-reason\">${m.reason}<\/p>\n <a class=\"cat-link\" href=\"${c.url}\" target=\"_blank\">Meet ${c.name} \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>`;\n }).join('');\n\n \/\/ Animate bars after render\n setTimeout(() => {\n document.querySelectorAll('.match-bar-fill').forEach(el => {\n el.style.width = el.dataset.pct + '%';\n });\n }, 100);\n}\n\nfunction restart() {\n Object.keys(answers).forEach(k => delete answers[k]);\n startQuiz();\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Purrsonality Match \ud83d\udc3e Find yourPurrfect Match Answer a few questions about your lifestyle \u2014 we’ll find the adoptable cat in Escondido who fits you best. Find My Match \u2192 \ud83d\udda4 Bennington \ud83d\udc2f Cookie \ud83c\udf38 Kiki \ud83e\ude76 Lemur \ud83e\udd0d Pearl \ud83d\udda4 Rain Purrsonality 1 \/ 7 \u2190 Back Continue \u2192 \ud83d\udd11 One quick step To power […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages\/7"}],"collection":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":2,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7,"date":"2026-03-20T23:06:32","date_gmt":"2026-03-20T23:06:32","guid":{"rendered":"https:\/\/shibuyarollcall.com\/?page_id=7"},"modified":"2026-03-20T23:20:06","modified_gmt":"2026-03-20T23:20:06","slug":"7-2","status":"publish","type":"page","link":"https:\/\/shibuyarollcall.com\/index.php\/7-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\n\nPurrsonality Match<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --cream: #FAF7F2;\n --warm-white: #FFF9F4;\n --dusty-rose: #E8B4A0;\n --muted-sage: #8FAF8A;\n --soft-terracotta: #C8714A;\n --deep-clay: #7A3E28;\n --charcoal: #2C2420;\n --mid-gray: #8A7E78;\n --light-border: #EAE0D8;\n --accent-gold: #C9973A;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--cream);\n color: var(--charcoal);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 SCREENS \u2500\u2500 *\/\n .screen { display: none; min-height: 100vh; }\n .screen.active { display: flex; flex-direction: column; }\n\n \/* \u2500\u2500 LANDING \u2500\u2500 *\/\n #screen-landing {\n background: var(--warm-white);\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 2rem;\n position: relative;\n overflow: hidden;\n }\n #screen-landing::before {\n content: '';\n position: absolute;\n top: -80px; right: -80px;\n width: 320px; height: 320px;\n background: radial-gradient(circle, #F2D4C4 0%, transparent 70%);\n pointer-events: none;\n }\n #screen-landing::after {\n content: '';\n position: absolute;\n bottom: -60px; left: -60px;\n width: 260px; height: 260px;\n background: radial-gradient(circle, #D4E8D0 0%, transparent 70%);\n pointer-events: none;\n }\n .landing-paw {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n display: block;\n animation: bounce 2s ease-in-out infinite;\n }\n @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }\n\n .landing-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2.4rem, 6vw, 3.8rem);\n color: var(--deep-clay);\n line-height: 1.1;\n margin-bottom: 0.5rem;\n }\n .landing-title em { font-style: italic; color: var(--soft-terracotta); }\n .landing-subtitle {\n font-size: 1.05rem;\n color: var(--mid-gray);\n font-weight: 300;\n max-width: 340px;\n margin: 0 auto 2.5rem;\n line-height: 1.6;\n }\n .btn-primary {\n background: var(--soft-terracotta);\n color: #fff;\n border: none;\n padding: 0.9rem 2.5rem;\n border-radius: 50px;\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n transition: transform 0.15s, background 0.15s;\n letter-spacing: 0.02em;\n }\n .btn-primary:hover { background: var(--deep-clay); transform: translateY(-1px); }\n\n .cats-preview {\n display: flex;\n gap: 0.75rem;\n justify-content: center;\n margin-top: 2.5rem;\n flex-wrap: wrap;\n }\n .cat-chip {\n background: #fff;\n border: 1.5px solid var(--light-border);\n border-radius: 50px;\n padding: 0.4rem 1rem;\n font-size: 0.8rem;\n color: var(--mid-gray);\n }\n\n \/* \u2500\u2500 QUIZ \u2500\u2500 *\/\n #screen-quiz {\n background: var(--cream);\n padding: 1.5rem 1.5rem 2rem;\n align-items: center;\n }\n .quiz-header {\n width: 100%; max-width: 480px;\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 1.5rem;\n }\n .quiz-logo {\n font-family: 'Playfair Display', serif;\n font-size: 1.1rem;\n color: var(--deep-clay);\n font-style: italic;\n }\n .progress-track {\n flex: 1; margin: 0 1rem;\n height: 4px;\n background: var(--light-border);\n border-radius: 2px;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: var(--soft-terracotta);\n border-radius: 2px;\n transition: width 0.4s ease;\n }\n .progress-label {\n font-size: 0.8rem;\n color: var(--mid-gray);\n white-space: nowrap;\n }\n\n .question-card {\n background: #fff;\n border-radius: 20px;\n padding: 2rem 1.75rem;\n width: 100%; max-width: 480px;\n border: 1.5px solid var(--light-border);\n animation: cardIn 0.3s ease;\n }\n @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }\n\n .question-tag {\n display: inline-block;\n background: #FDF0EA;\n color: var(--soft-terracotta);\n font-size: 0.72rem;\n font-weight: 500;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n padding: 0.25rem 0.7rem;\n border-radius: 50px;\n margin-bottom: 1rem;\n }\n .question-text {\n font-family: 'Playfair Display', serif;\n font-size: 1.35rem;\n line-height: 1.45;\n color: var(--charcoal);\n margin-bottom: 1.75rem;\n }\n .options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.75rem;\n }\n .option-btn {\n background: var(--cream);\n border: 1.5px solid var(--light-border);\n border-radius: 14px;\n padding: 0.9rem 0.75rem;\n text-align: center;\n cursor: pointer;\n transition: all 0.15s;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.9rem;\n color: var(--charcoal);\n line-height: 1.35;\n }\n .option-btn:hover { border-color: var(--dusty-rose); background: #FEF5F0; }\n .option-btn.selected { border-color: var(--soft-terracotta); background: #FDF0EA; color: var(--deep-clay); font-weight: 500; }\n .option-emoji { font-size: 1.4rem; display: block; margin-bottom: 0.35rem; }\n\n .quiz-nav {\n display: flex; gap: 0.75rem; margin-top: 1.5rem;\n width: 100%; max-width: 480px;\n }\n .btn-back {\n flex: 0 0 auto;\n background: transparent;\n border: 1.5px solid var(--light-border);\n border-radius: 50px;\n padding: 0.8rem 1.4rem;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.95rem;\n color: var(--mid-gray);\n cursor: pointer;\n transition: all 0.15s;\n }\n .btn-back:hover { border-color: var(--mid-gray); color: var(--charcoal); }\n .btn-next {\n flex: 1;\n background: var(--charcoal);\n color: #fff;\n border: none;\n border-radius: 50px;\n padding: 0.8rem 1.4rem;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s;\n opacity: 0.4;\n pointer-events: none;\n }\n .btn-next.enabled { opacity: 1; pointer-events: all; }\n .btn-next.enabled:hover { background: var(--soft-terracotta); }\n\n \/* \u2500\u2500 LOADING \u2500\u2500 *\/\n #screen-loading {\n background: var(--warm-white);\n align-items: center; justify-content: center;\n text-align: center; padding: 2rem; flex-direction: column; gap: 1.5rem;\n }\n .loading-cat {\n font-size: 3rem;\n animation: wiggle 0.6s ease-in-out infinite alternate;\n }\n @keyframes wiggle { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }\n .loading-text {\n font-family: 'Playfair Display', serif;\n font-size: 1.5rem;\n color: var(--deep-clay);\n }\n .loading-sub {\n font-size: 0.9rem; color: var(--mid-gray); max-width: 260px; line-height: 1.6;\n }\n .loading-dots { display: flex; gap: 6px; justify-content: center; margin-top: 0.5rem; }\n .dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: var(--dusty-rose);\n animation: pulse 1.2s ease-in-out infinite;\n }\n .dot:nth-child(2) { animation-delay: 0.2s; }\n .dot:nth-child(3) { animation-delay: 0.4s; }\n @keyframes pulse { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }\n\n \/* \u2500\u2500 RESULTS \u2500\u2500 *\/\n #screen-results {\n background: var(--cream);\n padding: 1.5rem 1.5rem 3rem;\n align-items: center;\n }\n .results-header {\n text-align: center; width: 100%; max-width: 520px; margin-bottom: 1.75rem;\n }\n .results-eyebrow {\n font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;\n color: var(--soft-terracotta); font-weight: 500; margin-bottom: 0.5rem;\n }\n .results-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(1.8rem, 5vw, 2.5rem);\n color: var(--deep-clay); line-height: 1.2; margin-bottom: 0.5rem;\n }\n .results-title em { font-style: italic; }\n .results-subtitle { font-size: 0.9rem; color: var(--mid-gray); line-height: 1.6; }\n\n .cat-cards-list {\n display: flex; flex-direction: column; gap: 1.25rem;\n width: 100%; max-width: 520px;\n }\n .cat-card {\n background: #fff;\n border: 1.5px solid var(--light-border);\n border-radius: 20px;\n overflow: hidden;\n animation: cardIn 0.4s ease both;\n transition: transform 0.15s, box-shadow 0.15s;\n }\n .cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(120,60,30,0.08); }\n .cat-card.top-match { border-color: var(--dusty-rose); border-width: 2px; }\n\n .cat-card-top {\n display: flex;\n gap: 0;\n }\n .cat-photo-wrap {\n width: 140px; flex-shrink: 0;\n background: var(--cream);\n position: relative; overflow: hidden;\n }\n .cat-photo-wrap img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n }\n .cat-photo-placeholder {\n width: 100%; height: 160px;\n display: flex; align-items: center; justify-content: center;\n font-size: 3.5rem;\n background: linear-gradient(135deg, #FDF0EA 0%, #FAEEE5 100%);\n }\n\n .cat-info { padding: 1.2rem 1.25rem; flex: 1; }\n .cat-badge {\n display: inline-flex; align-items: center; gap: 0.3rem;\n background: #FEF5F0; border: 1px solid #F2C9B8;\n border-radius: 50px; padding: 0.2rem 0.65rem;\n font-size: 0.7rem; font-weight: 500; color: var(--soft-terracotta);\n margin-bottom: 0.6rem; letter-spacing: 0.04em;\n }\n .top-match .cat-badge { background: #FFF0E8; border-color: var(--dusty-rose); }\n .cat-name {\n font-family: 'Playfair Display', serif;\n font-size: 1.4rem; color: var(--charcoal); margin-bottom: 0.2rem;\n }\n .cat-meta { font-size: 0.8rem; color: var(--mid-gray); margin-bottom: 0.65rem; }\n .cat-traits {\n display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem;\n }\n .trait-chip {\n background: var(--cream); border: 1px solid var(--light-border);\n border-radius: 50px; padding: 0.2rem 0.6rem;\n font-size: 0.72rem; color: var(--mid-gray);\n }\n\n .match-bar-wrap { margin-bottom: 0.75rem; }\n .match-bar-label {\n display: flex; justify-content: space-between; align-items: center;\n font-size: 0.78rem; color: var(--mid-gray); margin-bottom: 0.3rem;\n }\n .match-pct { font-weight: 500; color: var(--soft-terracotta); }\n .match-bar-track {\n height: 5px; background: var(--light-border);\n border-radius: 3px; overflow: hidden;\n }\n .match-bar-fill {\n height: 100%; border-radius: 3px;\n background: linear-gradient(90deg, var(--dusty-rose), var(--soft-terracotta));\n transition: width 1s ease 0.3s;\n width: 0%;\n }\n\n .cat-reason {\n font-size: 0.83rem; line-height: 1.6;\n color: var(--mid-gray);\n border-top: 1px solid var(--light-border);\n padding-top: 0.85rem; margin-top: 0.1rem;\n }\n\n .cat-link {\n display: inline-block; margin-top: 0.75rem;\n background: var(--soft-terracotta); color: #fff;\n border-radius: 50px; padding: 0.5rem 1.2rem;\n font-size: 0.82rem; font-weight: 500; text-decoration: none;\n transition: background 0.15s;\n }\n .cat-link:hover { background: var(--deep-clay); }\n\n .restart-btn {\n margin-top: 2rem;\n background: transparent;\n border: 1.5px solid var(--light-border);\n border-radius: 50px;\n padding: 0.75rem 2rem;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.9rem; color: var(--mid-gray);\n cursor: pointer; transition: all 0.15s;\n }\n .restart-btn:hover { border-color: var(--mid-gray); color: var(--charcoal); }\n\n .error-box {\n background: #FEF0EE; border: 1px solid #F2C5BE;\n border-radius: 12px; padding: 1rem 1.25rem;\n font-size: 0.875rem; color: #A03020; line-height: 1.5;\n max-width: 480px; width: 100%; text-align: left;\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div id=\"screen-landing\" class=\"screen active\">\n <span class=\"landing-paw\">\ud83d\udc3e<\/span>\n <h1 class=\"landing-title\">Find your<br><em>Purrfect<\/em> Match<\/h1>\n <p class=\"landing-subtitle\">Answer a few questions about your lifestyle \u2014 we’ll find the adoptable cat in Escondido who fits you best.<\/p>\n <button class=\"btn-primary\" onclick=\"startQuiz()\">Find My Match \u2192<\/button>\n <div class=\"cats-preview\">\n <span class=\"cat-chip\">\ud83d\udda4 Bennington<\/span>\n <span class=\"cat-chip\">\ud83d\udc2f Cookie<\/span>\n <span class=\"cat-chip\">\ud83c\udf38 Kiki<\/span>\n <span class=\"cat-chip\">\ud83e\ude76 Lemur<\/span>\n <span class=\"cat-chip\">\ud83e\udd0d Pearl<\/span>\n <span class=\"cat-chip\">\ud83d\udda4 Rain<\/span>\n <\/div>\n<\/div>\n\n\n<div id=\"screen-quiz\" class=\"screen\">\n <div class=\"quiz-header\">\n <span class=\"quiz-logo\">Purrsonality<\/span>\n <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progress-fill\"><\/div><\/div>\n <span class=\"progress-label\" id=\"progress-label\">1 \/ 7<\/span>\n <\/div>\n <div class=\"question-card\" id=\"question-card\">\n \n <\/div>\n <div class=\"quiz-nav\">\n <button class=\"btn-back\" id=\"btn-back\" onclick=\"prevQuestion()\">\u2190 Back<\/button>\n <button class=\"btn-next\" id=\"btn-next\" onclick=\"nextQuestion()\">Continue \u2192<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"screen-apikey\" class=\"screen\">\n <div style=\"max-width:440px;width:100%;margin:auto;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem;\">\n <div style=\"text-align:center;\">\n <span style=\"font-size:2.5rem\">\ud83d\udd11<\/span>\n <h2 style=\"font-family:'Playfair Display',serif;font-size:1.7rem;color:#7A3E28;margin:0.5rem 0 0.4rem;line-height:1.2;\">One quick step<\/h2>\n <p style=\"font-size:0.9rem;color:#8A7E78;line-height:1.6;\">To power the matching engine, paste your Anthropic API key below. It’s stored only in your browser and never sent anywhere except the Anthropic API.<\/p>\n <\/div>\n <div style=\"background:#fff;border:1.5px solid #EAE0D8;border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;\">\n <div>\n <label style=\"font-size:0.8rem;font-weight:500;color:#8A7E78;display:block;margin-bottom:0.4rem;\">Anthropic API Key<\/label>\n <input id=\"apikey-input\" type=\"password\" placeholder=\"sk-ant-...\" style=\"width:100%;padding:0.7rem 0.9rem;border:1.5px solid #EAE0D8;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:0.9rem;color:#2C2420;background:#FAF7F2;outline:none;\">\n <\/div>\n <button class=\"btn-primary\" style=\"width:100%;\" onclick=\"saveApiKey()\">Save & find my matches \u2192<\/button>\n <p id=\"apikey-error\" style=\"font-size:0.8rem;color:#C8714A;display:none;text-align:center;\"><\/p>\n <\/div>\n <div style=\"background:#F5F8F2;border:1px solid #D8E8D0;border-radius:12px;padding:1rem 1.1rem;\">\n <p style=\"font-size:0.78rem;color:#5A7A55;line-height:1.6;\"><strong>How to get a key:<\/strong> Visit <a href=\"https:\/\/console.anthropic.com\" target=\"_blank\" style=\"color:#5A7A55;\" rel=\"noopener\">console.anthropic.com<\/a> \u2192 API Keys \u2192 Create Key. Usage is pay-as-you-go and each match costs a fraction of a cent.<\/p>\n <\/div>\n <button style=\"background:transparent;border:none;color:#8A7E78;font-size:0.85rem;cursor:pointer;text-decoration:underline;\" onclick=\"showScreen('landing')\">\u2190 Go back<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"screen-loading\" class=\"screen\">\n <span class=\"loading-cat\">\ud83d\ude3a<\/span>\n <p class=\"loading-text\">Reading your personality\u2026<\/p>\n <p class=\"loading-sub\" id=\"loading-msg\">Consulting the cats about their thoughts on nap schedules.<\/p>\n <div class=\"loading-dots\"><div class=\"dot\"><\/div><div class=\"dot\"><\/div><div class=\"dot\"><\/div><\/div>\n<\/div>\n\n\n<div id=\"screen-results\" class=\"screen\">\n <div class=\"results-header\">\n <p class=\"results-eyebrow\">Your matches are in<\/p>\n <h2 class=\"results-title\">These cats <em>chose you<\/em> \ud83d\udc3e<\/h2>\n <p class=\"results-subtitle\" id=\"results-subtitle\">Based on your answers, here are your best personality matches.<\/p>\n <\/div>\n <div class=\"cat-cards-list\" id=\"cat-cards-list\"><\/div>\n <div id=\"error-display\"><\/div>\n <button class=\"restart-btn\" onclick=\"restart()\">\u21a9 Start over<\/button>\n<\/div>\n\n<script>\nconst CATS = [\n {\n id: 1, name: \"Bennington\", age: \"2 years 4 months\", gender: \"Male\", breed: \"Domestic Shorthair\",\n color: \"Black\",\n traits: [\"Affectionate\", \"Snuggly\", \"Playful\", \"Curious\", \"Communicative\", \"Gentle\"],\n description: \"Bennington is a sweet, resilient black cat with a big personality and a bigger heart. He's affectionate, communicative, and loves to snuggle. He gets along well with other cats and has special needs \u2014 making him an especially rewarding companion for a patient, loving home. Cared for by Kitten Rescue Life in Escondido.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/46166619-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1282069623\",\n emoji: \"\ud83d\udda4\",\n specialNeeds: true,\n goodWith: [\"Cats\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 2, name: \"Cookie\", age: \"1 year 8 months\", gender: \"Female\", breed: \"Tabby\",\n color: \"Tiger Striped\",\n traits: [\"Affectionate\", \"Athletic\", \"Playful\", \"Confident\", \"Communicative\", \"Snuggly\"],\n description: \"Cookie is a spirited young tiger-striped tabby bursting with energy and confidence. She's communicative, athletic, and loves interactive play followed by snuggle sessions. She's great with kids but needs a dog-free home where she can truly shine.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/46974471-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1281712451\",\n emoji: \"\ud83d\udc2f\",\n goodWith: [\"Kids\"],\n notGoodWith: [\"Dogs\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 3, name: \"Kiki\", age: \"1 year 7 months\", gender: \"Female\", breed: \"Calico\",\n color: \"Calico\",\n traits: [\"Affectionate\", \"Chill\", \"Independent\", \"Confident\", \"Curious\", \"Quiet\"],\n description: \"Kiki is a self-possessed calico with a quiet confidence and a selective heart. She's food-motivated, curious on her own terms, and bonds deeply once she trusts you. She needs an experienced adopter and a home without kids, dogs, or other cats \u2014 a patient solo companion will bring out her best.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/45430046-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1245135306\",\n emoji: \"\ud83c\udf38\",\n notGoodWith: [\"Kids\", \"Dogs\", \"Cats\"],\n experiencedAdopter: true,\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 4, name: \"Lemur\", age: \"2 years 8 months\", gender: \"Female\", breed: \"Maine Coon\",\n color: \"Gray\/Silver Tabby\",\n traits: [\"Affectionate\", \"Chill\", \"Snuggly\", \"Gentle\", \"Curious\", \"Quiet\"],\n description: \"Lemur is a gorgeous long-haired Maine Coon with a calm, gentle soul. She's food-motivated and communicative in the softest way \u2014 a natural lap cat who loves quiet homes. She gets along fine without dogs but is otherwise wonderfully easygoing and deeply snuggly.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/46974454-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1280949574\",\n emoji: \"\ud83e\ude76\",\n notGoodWith: [\"Dogs\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 5, name: \"Pearl\", age: \"7 months\", gender: \"Female\", breed: \"Domestic Shorthair\",\n color: \"White\",\n traits: [\"Curious\", \"Gentle\", \"Playful\", \"Shy\"],\n description: \"Pearl is a sweet, mostly-white kitten who takes a little time to open up but blossoms into a playful, gentle companion once she feels safe. She's good with other cats and would thrive with a patient adopter who enjoys watching a shy soul come into their own.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/47521588-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1293796051\",\n emoji: \"\ud83e\udd0d\",\n goodWith: [\"Cats\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n },\n {\n id: 6, name: \"Rain\", age: \"4 months\", gender: \"Male\", breed: \"Domestic Shorthair\",\n color: \"Black\",\n traits: [\"Athletic\", \"Extroverted\", \"Playful\"],\n description: \"Rain is a sleek all-black kitten with a huge personality packed into a tiny frame. He's extroverted, athletic, and loves other cats \u2014 a social little daredevil who needs stimulation, play, and ideally a feline buddy to keep him company. Perfect for an active household ready for a ball of energy.\",\n url: \"https:\/\/www.adoptapet.com\/pet\/47375362-escondido-california-cat\",\n photo: \"https:\/\/media.adoptapet.com\/image\/upload\/d_Fallback-Photo_Cat-v3.png\/c_fit,h_350,dpr_2\/f_auto,q_auto\/1290218081\",\n emoji: \"\ud83d\udda4\",\n goodWith: [\"Cats\"],\n shelter: \"Kitten Rescue Life\",\n shelterEmail: \"kittenrescuelife@gmail.com\",\n shelterUrl: \"https:\/\/kittenrescuelife.org\/\"\n }\n];\n\nconst QUESTIONS = [\n {\n tag: \"Your lifestyle\",\n text: \"How would you describe your typical day at home?\",\n options: [\n { emoji: \"\ud83c\udfe0\", label: \"Mostly home, love a quiet atmosphere\" },\n { emoji: \"\ud83c\udf89\", label: \"Home often, but it's lively & social\" },\n { emoji: \"\ud83d\udcbc\", label: \"Out most of the day, busy schedule\" },\n { emoji: \"\ud83c\udf3f\", label: \"Mix of both \u2014 steady but calm\" }\n ]\n },\n {\n tag: \"Energy level\",\n text: \"What energy level are you hoping for in a cat?\",\n options: [\n { emoji: \"\ud83d\ude34\", label: \"Low key \u2014 a mellow, chill companion\" },\n { emoji: \"\u26a1\", label: \"High energy \u2014 bring on the chaos!\" },\n { emoji: \"\ud83c\udfaf\", label: \"Playful but settles down at night\" },\n { emoji: \"\ud83c\udf19\", label: \"Independent and self-entertaining\" }\n ]\n },\n {\n tag: \"Affection\",\n text: \"How much physical affection are you looking for?\",\n options: [\n { emoji: \"\ud83e\udd17\", label: \"Constant cuddles \u2014 lap cat please\" },\n { emoji: \"\ud83e\udd1d\", label: \"Affectionate on their own terms\" },\n { emoji: \"\ud83d\udc40\", label: \"Present but not clingy\" },\n { emoji: \"\ud83d\udca4\", label: \"Peaceful roommate vibes\" }\n ]\n },\n {\n tag: \"Household\",\n text: \"What does your home look like?\",\n options: [\n { emoji: \"\ud83e\uddcd\", label: \"Just me \u2014 solo household\" },\n { emoji: \"\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\", label: \"Family with kids\" },\n { emoji: \"\ud83d\udc15\", label: \"Other pets already at home\" },\n { emoji: \"\ud83d\udc6b\", label: \"Two adults, no kids or pets\" }\n ]\n },\n {\n tag: \"Experience\",\n text: \"What's your cat experience level?\",\n options: [\n { emoji: \"\ud83d\udc23\", label: \"First-time cat owner\" },\n { emoji: \"\ud83d\udc08\", label: \"Had cats before, comfortable\" },\n { emoji: \"\ud83c\udfc6\", label: \"Very experienced with cats\" },\n { emoji: \"\ud83c\udf93\", label: \"I've fostered or volunteered with cats\" }\n ]\n },\n {\n tag: \"Personality\",\n text: \"Which best describes your own personality?\",\n options: [\n { emoji: \"\ud83d\udcda\", label: \"Calm, introverted, homebodied\" },\n { emoji: \"\ud83c\udf0a\", label: \"Spontaneous and adventurous\" },\n { emoji: \"\ud83c\udfa8\", label: \"Creative, sensitive, emotional\" },\n { emoji: \"\ud83d\udde3\ufe0f\", label: \"Social, outgoing, love company\" }\n ]\n },\n {\n tag: \"Commitment\",\n text: \"What matters most to you in this adoption?\",\n options: [\n { emoji: \"\ud83d\udc9b\", label: \"Giving a senior or shy cat a home\" },\n { emoji: \"\ud83c\udf8a\", label: \"A fun, entertaining companion\" },\n { emoji: \"\ud83e\udd32\", label: \"A deep, bonded relationship\" },\n { emoji: \"\ud83c\udf31\", label: \"Watching a kitten grow up\" }\n ]\n }\n];\n\nlet current = 0;\nconst answers = {};\n\nfunction showScreen(id) {\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById('screen-' + id).classList.add('active');\n}\n\nfunction showApiKeyScreen() {\n showScreen('apikey');\n}\n\nfunction saveApiKey() {\n const val = document.getElementById('apikey-input').value.trim();\n const errEl = document.getElementById('apikey-error');\n if (!val.startsWith('sk-ant-')) {\n errEl.textContent = 'That doesn\\'t look like a valid Anthropic key (should start with sk-ant-).';\n errEl.style.display = 'block';\n return;\n }\n errEl.style.display = 'none';\n localStorage.setItem('anthropic_api_key', val);\n runMatching();\n}\n\nfunction startQuiz() {\n current = 0;\n Object.keys(answers).forEach(k => delete answers[k]);\n renderQuestion();\n showScreen('quiz');\n}\n\nfunction renderQuestion() {\n const q = QUESTIONS[current];\n const total = QUESTIONS.length;\n document.getElementById('progress-fill').style.width = ((current \/ total) * 100) + '%';\n document.getElementById('progress-label').textContent = (current + 1) + ' \/ ' + total;\n document.getElementById('btn-back').style.visibility = current === 0 ? 'hidden' : 'visible';\n\n const selected = answers[current];\n const card = document.getElementById('question-card');\n card.innerHTML = `\n <span class=\"question-tag\">${q.tag}<\/span>\n <p class=\"question-text\">${q.text}<\/p>\n <div class=\"options-grid\">\n ${q.options.map((o, i) => `\n <button class=\"option-btn ${selected === i ? 'selected' : ''}\" onclick=\"selectOption(${i})\">\n <span class=\"option-emoji\">${o.emoji}<\/span>\n ${o.label}\n <\/button>\n `).join('')}\n <\/div>\n `;\n updateNextBtn();\n}\n\nfunction selectOption(idx) {\n answers[current] = idx;\n document.querySelectorAll('.option-btn').forEach((b, i) => {\n b.classList.toggle('selected', i === idx);\n });\n updateNextBtn();\n if (current < QUESTIONS.length - 1) {\n setTimeout(() => nextQuestion(), 400);\n }\n}\n\nfunction updateNextBtn() {\n const btn = document.getElementById('btn-next');\n const isLast = current === QUESTIONS.length - 1;\n btn.textContent = isLast ? 'Find My Matches \u2728' : 'Continue \u2192';\n btn.classList.toggle('enabled', answers[current] !== undefined);\n}\n\nfunction nextQuestion() {\n if (answers[current] === undefined) return;\n if (current < QUESTIONS.length - 1) {\n current++;\n renderQuestion();\n } else {\n runMatching();\n }\n}\n\nfunction prevQuestion() {\n if (current > 0) { current--; renderQuestion(); }\n}\n\nconst loadingMessages = [\n \"Consulting the cats about nap preferences\u2026\",\n \"Cross-referencing purr frequencies\u2026\",\n \"Analyzing whisker compatibility\u2026\",\n \"Checking zoomies schedules\u2026\",\n \"Asking Mango, Ziggy, and friends who chose you\u2026\"\n];\n\nasync function runMatching() {\n showScreen('loading');\n let msgIdx = 0;\n const msgEl = document.getElementById('loading-msg');\n const interval = setInterval(() => {\n msgIdx = (msgIdx + 1) % loadingMessages.length;\n msgEl.textContent = loadingMessages[msgIdx];\n }, 2200);\n\n const answerSummary = QUESTIONS.map((q, i) => {\n const chosen = answers[i] !== undefined ? q.options[answers[i]].label : 'No answer';\n return `Q${i+1}: ${q.text}\\nAnswer: ${chosen}`;\n }).join('\\n\\n');\n\n const catProfiles = CATS.map(c => {\n const goodWith = c.goodWith ? `Good with: ${c.goodWith.join(', ')}. ` : '';\n const notGoodWith = c.notGoodWith ? `NOT good with: ${c.notGoodWith.join(', ')}. ` : '';\n const expNeeded = c.experiencedAdopter ? 'Needs experienced adopter. ' : '';\n const special = c.specialNeeds ? 'Has special needs. ' : '';\n return `Cat: ${c.name} | Age: ${c.age} | Gender: ${c.gender} | Breed: ${c.breed} | Traits: ${c.traits.join(', ')} | ${goodWith}${notGoodWith}${expNeeded}${special}Bio: ${c.description}`;\n }).join('\\n');\n\n const prompt = `You are a cat adoption matchmaker. Based on the person's quiz answers, rank all 6 cats from best to worst match and explain why each one does or doesn't fit.\n\nPERSON'S QUIZ ANSWERS:\n${answerSummary}\n\nCAT PROFILES:\n${catProfiles}\n\nRespond ONLY with valid JSON (no markdown, no backticks, no preamble) in this exact format:\n{\n \"matches\": [\n { \"name\": \"CatName\", \"score\": 92, \"reason\": \"Two-sentence explanation of why this cat fits.\" },\n ...all 6 cats ranked...\n ]\n}\nScores should be realistic (40\u201398 range). Be specific and warm in the reasons.`;\n\n const apiKey = localStorage.getItem('anthropic_api_key');\n if (!apiKey) { clearInterval(interval); showApiKeyScreen(); return; }\n\n try {\n const response = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'x-api-key': apiKey,\n 'anthropic-version': '2023-06-01',\n 'anthropic-dangerous-direct-browser-access': 'true'\n },\n body: JSON.stringify({\n model: 'claude-sonnet-4-20250514',\n max_tokens: 1000,\n messages: [{ role: 'user', content: prompt }]\n })\n });\n\n const data = await response.json();\n clearInterval(interval);\n if (response.status === 401) {\n localStorage.removeItem('anthropic_api_key');\n showResults(null, 'Invalid API key \u2014 please check your key and try again.');\n return;\n }\n const text = data.content.map(b => b.text || '').join('');\n const clean = text.replace(\/```json|```\/g, '').trim();\n const parsed = JSON.parse(clean);\n showResults(parsed.matches);\n } catch (e) {\n clearInterval(interval);\n showResults(null, e.message);\n }\n}\n\nfunction showResults(matches, error) {\n showScreen('results');\n const list = document.getElementById('cat-cards-list');\n const errEl = document.getElementById('error-display');\n\n if (error || !matches) {\n errEl.innerHTML = `<div class=\"error-box\">${error || 'Unknown error'}<br><br><button onclick=\"localStorage.removeItem('anthropic_api_key');showApiKeyScreen()\" style=\"margin-top:0.5rem;background:#C8714A;color:#fff;border:none;padding:0.5rem 1.2rem;border-radius:50px;cursor:pointer;font-size:0.85rem;\">Update API key \u2192<\/button><\/div>`;\n list.innerHTML = '';\n return;\n }\n errEl.innerHTML = '';\n\n const ranked = matches.map(m => {\n const cat = CATS.find(c => c.name.toLowerCase() === m.name.toLowerCase());\n return { ...m, cat };\n }).filter(m => m.cat);\n\n const top = ranked[0];\n document.getElementById('results-subtitle').textContent =\n `${top?.cat?.name} is your #1 match \u2014 but all six have something special to offer.`;\n\n list.innerHTML = ranked.map((m, idx) => {\n const c = m.cat;\n const isTop = idx === 0;\n const delay = idx * 0.1;\n return `\n <div class=\"cat-card ${isTop ? 'top-match' : ''}\" style=\"animation-delay:${delay}s\">\n <div class=\"cat-card-top\">\n <div class=\"cat-photo-wrap\">\n ${c.photo\n ? `<img decoding=\"async\" src=\"${c.photo}\" alt=\"${c.name}\" style=\"width:100%;height:100%;min-height:160px;object-fit:cover;display:block\" onerror=\"this.parentElement.innerHTML='<div class=\\\\'cat-photo-placeholder\\\\'><span style=\\\\'font-size:3rem\\\\'>${c.emoji}<\/span><\/div>'\">`\n : `<div class=\"cat-photo-placeholder\" style=\"height:100%;min-height:160px\"><span style=\"font-size:3rem\">${c.emoji}<\/span><\/div>`\n }\n <\/div>\n <div class=\"cat-info\">\n <span class=\"cat-badge\">${isTop ? '\u2b50 Best match' : '#' + (idx+1) + ' match'}<\/span>\n ${c.specialNeeds ? '<span style=\"display:inline-block;margin-left:6px;background:#FDF5E0;border:1px solid #F0D080;border-radius:50px;padding:0.2rem 0.65rem;font-size:0.7rem;font-weight:500;color:#8A6A10;\">Special needs<\/span>' : ''}\n ${c.experiencedAdopter ? '<span style=\"display:inline-block;margin-left:6px;background:#EEF0FD;border:1px solid #C0C8F0;border-radius:50px;padding:0.2rem 0.65rem;font-size:0.7rem;font-weight:500;color:#3A4499;\">Experienced adopter<\/span>' : ''}\n <h3 class=\"cat-name\">${c.name}<\/h3>\n <p class=\"cat-meta\">${c.age} \u00b7 ${c.gender} \u00b7 ${c.breed}${c.shelter ? ' \u00b7 <em>' + c.shelter + '<\/em>' : ''}<\/p>\n <div class=\"cat-traits\">\n ${c.traits.map(t => `<span class=\"trait-chip\">${t}<\/span>`).join('')}\n <\/div>\n <div class=\"match-bar-wrap\">\n <div class=\"match-bar-label\">\n <span>Compatibility<\/span>\n <span class=\"match-pct\">${m.score}%<\/span>\n <\/div>\n <div class=\"match-bar-track\">\n <div class=\"match-bar-fill\" id=\"bar-${c.id}\" data-pct=\"${m.score}\"><\/div>\n <\/div>\n <\/div>\n <p class=\"cat-reason\">${m.reason}<\/p>\n <a class=\"cat-link\" href=\"${c.url}\" target=\"_blank\">Meet ${c.name} \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>`;\n }).join('');\n\n \/\/ Animate bars after render\n setTimeout(() => {\n document.querySelectorAll('.match-bar-fill').forEach(el => {\n el.style.width = el.dataset.pct + '%';\n });\n }, 100);\n}\n\nfunction restart() {\n Object.keys(answers).forEach(k => delete answers[k]);\n startQuiz();\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Purrsonality Match \ud83d\udc3e Find yourPurrfect Match Answer a few questions about your lifestyle \u2014 we’ll find the adoptable cat in Escondido who fits you best. Find My Match \u2192 \ud83d\udda4 Bennington \ud83d\udc2f Cookie \ud83c\udf38 Kiki \ud83e\ude76 Lemur \ud83e\udd0d Pearl \ud83d\udda4 Rain Purrsonality 1 \/ 7 \u2190 Back Continue \u2192 \ud83d\udd11 One quick step To power […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages\/7"}],"collection":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":2,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/shibuyarollcall.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}