.cmp-fade-in{animation:.5s cubic-bezier(.2,0,0,1) both cmpFadeInUp}@keyframes cmpFadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.cmp-hero{background:linear-gradient(135deg, var(--color-surface-soft) 0%, var(--color-canvas) 100%);border-bottom:1px solid var(--color-hairline-soft);padding:24px 0 32px}html[data-theme=dark] .cmp-hero{background:linear-gradient(135deg, #0f9f870f 0%, var(--color-canvas) 100%)}.cmp-breadcrumb{font-size:var(--text-body-sm);color:var(--color-muted);align-items:center;gap:8px;margin-bottom:16px;display:flex}.cmp-breadcrumb a:hover{color:var(--color-ink);text-decoration:underline}.cmp-crumb-sep{color:var(--color-hairline)}.cmp-crumb-current{color:var(--color-ink);font-weight:600}.cmp-hero-content{flex-direction:column;gap:8px;max-width:580px;margin-bottom:20px;display:flex}.cmp-hero-badge{text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);align-items:center;gap:6px;font-size:12px;font-weight:700;display:inline-flex}.cmp-hero-badge svg{flex-shrink:0}.cmp-hero-title{color:var(--color-ink);letter-spacing:-.03em;font-size:clamp(26px,4vw,36px);font-weight:800;line-height:1.1}.cmp-hero-desc{color:var(--color-muted);font-size:15px;line-height:1.55}.cmp-action-bar{flex-wrap:wrap;gap:8px;padding:8px 0;display:flex}.cmp-selector-card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);margin-bottom:8px;padding:20px 24px;box-shadow:0 1px 3px #0000000a}.cmp-select-form{grid-template-columns:1fr;align-items:center;gap:12px;display:grid}@media (width>=744px){.cmp-select-form{grid-template-columns:1fr auto 1fr auto;gap:16px}}.cmp-select-col{flex-direction:column;gap:4px;display:flex}.cmp-select-label{color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:700}.cmp-food-dropdown{cursor:pointer;width:100%}.cmp-swap-btn{background-color:var(--color-surface-soft);border:1px solid var(--color-hairline);border-radius:var(--radius-full);width:44px;height:44px;color:var(--color-ink);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;margin-top:16px;display:inline-flex}.cmp-swap-btn:hover{background-color:var(--color-surface-strong);border-color:var(--color-border-strong);transform:rotate(15deg)}.cmp-swap-btn:active{transform:rotate(180deg)scale(.95)}.cmp-swap-spin{animation:.4s cubic-bezier(.34,1.56,.64,1) cmpSwapRotate}@keyframes cmpSwapRotate{0%{transform:rotate(0)}to{transform:rotate(180deg)}}.cmp-compare-btn{white-space:nowrap;align-items:center;gap:6px;margin-top:16px;display:inline-flex}@media (width<=743px){.cmp-swap-btn{align-self:center;margin-top:0}.cmp-compare-btn{justify-content:center;width:100%;margin-top:0}}.cmp-visual-hero{grid-template-columns:1fr;align-items:stretch;gap:16px;display:grid}@media (width>=640px){.cmp-visual-hero{grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}}.cmp-visual-card{background-color:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);transition:box-shadow var(--transition-normal), border-color var(--transition-fast), transform var(--transition-fast);overflow:hidden}.cmp-visual-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-strong);transform:translateY(-2px)}.cmp-visual-img-wrap{aspect-ratio:4/3;background-color:var(--color-surface-soft);width:100%;overflow:hidden}.cmp-visual-img{object-fit:cover;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,0,0,1)}.cmp-visual-card:hover .cmp-visual-img{transform:scale(1.05)}.cmp-visual-meta{flex-direction:column;gap:5px;padding:16px 18px 18px;display:flex}.cmp-visual-tag{text-transform:uppercase;letter-spacing:.04em;color:var(--color-primary);font-size:11px;font-weight:700}.cmp-visual-title{color:var(--color-ink);margin:0;font-size:20px;font-weight:700;line-height:1.2}.cmp-visual-chips{flex-wrap:wrap;gap:6px;margin:6px 0 10px;display:flex}.cmp-chip{background-color:var(--color-surface-soft);border:1px solid var(--color-hairline-soft);border-radius:var(--radius-full);align-items:baseline;gap:4px;padding:4px 10px;display:flex}.cmp-chip-val{color:var(--color-ink);font-size:13px;font-weight:700}.cmp-chip-lbl{color:var(--color-muted);text-transform:uppercase;letter-spacing:.02em;font-size:10px;font-weight:500}.cmp-details-btn{justify-content:center;width:100%}.cmp-vs-wrap{justify-content:center;align-items:center;padding:8px 0;display:flex}.cmp-vs-badge{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);color:#fff;letter-spacing:.05em;width:56px;height:56px;box-shadow:0 0 0 4px var(--color-primary-light), 0 4px 16px #0f9f8740;justify-content:center;align-items:center;font-size:1rem;font-weight:800;animation:2.5s ease-in-out infinite cmpVsPulse;display:flex}@keyframes cmpVsPulse{0%,to{box-shadow:0 0 0 4px var(--color-primary-light), 0 4px 16px #0f9f8733}50%{box-shadow:0 0 0 8px var(--color-primary-light), 0 4px 24px #0f9f8759}}@media (width<=480px){.cmp-selector-card{padding:16px 14px}.cmp-visual-meta{padding:14px 14px 16px}.cmp-visual-title{font-size:18px}.cmp-chip{padding:3px 8px}.cmp-vs-badge{width:46px;height:46px;font-size:.9rem}}@media (prefers-reduced-motion:reduce){.cmp-vs-badge{animation:none}.cmp-fade-in{opacity:1;animation:none}}