:root{--bg: #f7f2e9;--paper: #fffdf8;--ink: #2b2620;--ink-soft: #6b6156;--accent: #c96f2f;--accent-dark: #a4571f;--line: #e5dccc;--danger: #a43b2a;--good: #3d7a4f}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;line-height:1.8}.app{max-width:480px;margin:0 auto;min-height:100dvh;padding:20px 20px 48px}.screen{animation:fadein .35s ease both}@keyframes fadein{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.top-screen{min-height:calc(100dvh - 68px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px}.top-paws{font-size:40px}.top-lead{font-size:14px;letter-spacing:.14em;color:var(--accent-dark);font-weight:700}.top-title{font-size:34px;line-height:1.4;letter-spacing:.06em;font-weight:800}.top-sub{font-size:14px;color:var(--ink-soft)}.top-note{font-size:12px;color:var(--ink-soft)}.btn-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:var(--accent);color:#fff;font-size:17px;font-weight:700;letter-spacing:.08em;padding:16px 44px;border-radius:999px;cursor:pointer;box-shadow:0 4px 0 var(--accent-dark);transition:transform .08s ease,box-shadow .08s ease}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-dark)}.btn-secondary{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:2px solid var(--ink);color:var(--ink);font-size:15px;font-weight:700;padding:12px 32px;border-radius:999px;cursor:pointer}.btn-back{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;font-size:20px;color:var(--ink-soft);cursor:pointer;padding:4px 8px}.quiz-screen{padding-top:8px}.quiz-header{display:flex;align-items:center;gap:10px;margin-bottom:28px}.progress-track{flex:1;height:8px;background:var(--line);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .25s ease}.quiz-count{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.quiz-q{font-size:20px;font-weight:800;line-height:1.6;margin-bottom:24px}.quiz-qnum{display:block;font-size:13px;color:var(--accent-dark);letter-spacing:.1em;margin-bottom:6px}.quiz-options{display:flex;flex-direction:column;gap:12px}.quiz-option{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-size:15px;line-height:1.6;padding:15px 18px;background:var(--paper);border:2px solid var(--line);border-radius:14px;color:var(--ink);cursor:pointer;transition:border-color .12s ease,transform .08s ease}.quiz-option:active{transform:scale(.98)}.quiz-option.is-selected{border-color:var(--accent);background:#fdf3e7}@media (hover: hover){.quiz-option:hover{border-color:var(--accent)}}.loading-screen{min-height:calc(100dvh - 68px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.paw-walk{display:flex;gap:14px;font-size:30px}.paw-walk span{opacity:0;animation:paw 1.4s infinite}.paw-walk span:nth-child(2){animation-delay:.25s}.paw-walk span:nth-child(3){animation-delay:.5s}.paw-walk span:nth-child(4){animation-delay:.75s}@keyframes paw{0%{opacity:0;transform:translateY(4px)}30%{opacity:1;transform:none}70%{opacity:1}to{opacity:0}}.loading-text{color:var(--ink-soft);font-size:14px;letter-spacing:.1em}.result-screen{text-align:center}.result-label{font-size:14px;color:var(--ink-soft);letter-spacing:.12em;margin-bottom:14px}.result-hero{display:flex;justify-content:center;margin-bottom:14px}.result-hero svg{filter:drop-shadow(0 6px 14px rgba(43,38,32,.14))}.result-name{font-size:28px;font-weight:800;letter-spacing:.04em}.result-style{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--accent-dark);border:1.5px solid var(--accent-dark);border-radius:999px;padding:3px 14px;letter-spacing:.1em}.result-catch{font-size:19px;font-weight:800;line-height:1.6;margin:20px 0 24px}.result-body{text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:22px 20px;font-size:15px;display:flex;flex-direction:column;gap:14px}.result-block{text-align:left;margin-top:22px}.result-block h3{font-size:14px;letter-spacing:.12em;color:var(--ink-soft);border-left:4px solid var(--accent);padding-left:10px;margin-bottom:10px}.result-block p{font-size:15px}.result-strength p{color:var(--good);font-weight:700}.result-danger h3{border-left-color:var(--danger)}.result-danger p{color:var(--danger)}.compat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compat-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--line);background:var(--paper);border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-family:inherit;color:var(--ink)}.compat-card svg{border-radius:14px}.compat-good{border-color:#bcd6c4}.compat-bad{border-color:#e0bdb5}.compat-tag{font-size:11px;font-weight:800;letter-spacing:.1em;padding:2px 10px;border-radius:999px;color:#fff}.compat-good .compat-tag{background:var(--good)}.compat-bad .compat-tag{background:var(--danger)}.compat-name{font-size:13px;font-weight:800}.compat-comment{font-size:11.5px;line-height:1.6;color:var(--ink-soft)}.compat-hint{margin-top:8px;font-size:11.5px;color:var(--ink-soft);text-align:center}.encyclopedia{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:18px}.encyclopedia h3{border-left:none;padding-left:0;margin-bottom:14px;color:var(--ink);font-size:15px}.breed-photo{margin:0 0 16px}.breed-photo img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:12px;display:block}.breed-photo-loading{width:100%;aspect-ratio:4 / 3;border-radius:12px;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:28px;animation:photo-pulse 1.2s ease-in-out infinite}@keyframes photo-pulse{0%,to{opacity:.55}50%{opacity:1}}.breed-photo figcaption{margin-top:6px;font-size:11px;color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between}.breed-photo-reload{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:1.5px solid var(--line);border-radius:999px;padding:3px 12px;font-size:11px;font-weight:700;color:var(--accent-dark);cursor:pointer;font-family:inherit}.enc-list{display:flex;flex-direction:column;gap:12px}.enc-list>div{display:grid;grid-template-columns:92px 1fr;gap:10px;font-size:13.5px}.enc-list dt{color:var(--ink-soft);font-weight:700;flex-shrink:0}.enc-list dd{line-height:1.7}.breed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.breed-cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--line);background:var(--paper);border-radius:14px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .12s ease,transform .08s ease}.breed-cell:active{transform:scale(.96)}@media (hover: hover){.breed-cell:hover{border-color:var(--accent)}}.breed-cell svg{border-radius:12px}.breed-cell-name{font-size:11px;font-weight:700;line-height:1.4;text-align:center}.result-actions{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:14px}.btn-x{display:inline-block;text-decoration:none;background:#0f1419;box-shadow:0 4px #000}.btn-x:active{box-shadow:0 1px #000}.detail-screen{text-align:center;padding-top:8px}.detail-back{display:block;text-align:left;font-size:14px;margin-bottom:18px}.detail-concept{margin-top:8px;font-size:14px;color:var(--ink-soft)}