.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:40px 0 36px}:global(html[data-theme="dark"]) .cmp-hero{background:linear-gradient(135deg, #0f9f870f 0%, var(--color-canvas) 100%)}.cmp-hero-content{flex-direction:column;gap:8px;max-width:580px;margin-bottom:28px;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-hero-stats{flex-wrap:wrap;align-items:center;gap:20px;margin-top:6px;display:flex}.cmp-stat{flex-direction:column;gap:2px;display:flex}.cmp-stat-value{color:var(--color-ink);letter-spacing:-.02em;font-size:20px;font-weight:800;line-height:1.1}.cmp-stat-label{color:var(--color-muted);text-transform:uppercase;letter-spacing:.03em;font-size:11px;font-weight:500}.cmp-stat-divider{background:var(--color-hairline);flex-shrink:0;width:1px;height:28px}@media (width<=500px){.cmp-stat-divider{display:none}.cmp-hero-stats{gap:14px}}.cmp-selector-card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);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-presets-section{padding:24px 0 8px}.cmp-presets-header{margin-bottom:12px}.cmp-presets-label{text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted);font-size:12px;font-weight:700}.cmp-presets-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;display:grid}.cmp-preset-card{border-radius:var(--radius-md);border:1px solid var(--color-hairline);background:var(--color-canvas);transition:all var(--transition-fast);align-items:center;gap:10px;padding:12px 14px;text-decoration:none;display:flex}.cmp-preset-card:hover{border-color:var(--color-primary);background:var(--color-primary-light);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.cmp-preset-emoji{flex-shrink:0;font-size:22px;line-height:1}.cmp-preset-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.cmp-preset-name{color:var(--color-ink);font-size:13px;font-weight:600;line-height:1.3}.cmp-preset-detail{color:var(--color-muted);font-size:11px;font-weight:500}.cmp-preset-card:hover .cmp-preset-name,.cmp-preset-card:hover .cmp-preset-detail{color:var(--color-primary)}.cmp-preset-arrow{color:var(--color-muted);transition:transform var(--transition-fast), color var(--transition-fast);flex-shrink:0}.cmp-preset-card:hover .cmp-preset-arrow{color:var(--color-primary);transform:translate(3px)}.cmp-visual-hero{grid-template-columns:1fr;align-items:stretch;gap:16px;margin-top:24px;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 (prefers-reduced-motion:reduce){.cmp-vs-badge{animation:none}.cmp-fade-in{opacity:1;animation:none}}.cmp-action-bar{flex-wrap:wrap;gap:8px;padding:16px 0 8px;display:flex}@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}}