@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
:root{--primary:#f98006;--primary-light:#ffa94d;--primary-lighter:#fbbf6b;--primary-faint:#fff3e4;--cream:#fff7ed;--cream-mid:#ffe4b5;--cream-dark:#fcd9a0;--text:#1f2937;--text-muted:#4b5563;--text-light:#6b7280;--text-placeholder:#a08060;--card-bg:#ffffffeb;--card-border:#f980061f;--card-shadow:0 18px 45px #92400e24;--card-shadow-hover:0 22px 50px #92400e2e;--radius-sm:8px;--radius:14px;--radius-lg:22px;--radius-xl:28px;--radius-full:999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--transition:.18s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{color:var(--text);background-color:var(--cream);-webkit-font-smoothing:antialiased;font-family:Plus Jakarta Sans,sans-serif}html[data-scroll-behavior=smooth]{scroll-behavior:smooth}body{min-height:100vh;line-height:1.6}h1{letter-spacing:-.02em;color:var(--text);font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15}h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.25}h3{font-size:1.1rem;font-weight:700}p{color:var(--text-muted);line-height:1.75}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:.4s forwards fadeIn}.fade-in-up{animation:.5s forwards fadeInUp}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--cream)}::-webkit-scrollbar-thumb{background:var(--primary-lighter);border-radius:3px}.topPage{background:var(--cream);place-items:center;min-height:100vh;padding:24px;display:grid}.topHeroCard{border-radius:var(--radius-xl);background:var(--card-bg);width:min(760px,92vw);box-shadow:var(--card-shadow);text-align:center;padding:56px 40px}.topHeroCard h1{color:var(--text);letter-spacing:-.04em;margin:0 0 20px;font-size:clamp(40px,6vw,64px);line-height:1.15}.topHeroCard>p{color:var(--text-muted);margin:0 0 36px;font-size:clamp(18px,2.2vw,22px);font-weight:700}.topButtonRow{flex-wrap:wrap;justify-content:center;gap:18px;display:flex}.topPrimaryButton,.topSecondaryButton{border-radius:var(--radius-full);cursor:pointer;min-width:230px;padding:16px 28px;font-size:16px;font-weight:900;transition:transform .15s,box-shadow .15s,background .15s}.topPrimaryButton{background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#fff;border:0;box-shadow:0 10px 22px #f9800647}.topPrimaryButton:hover{transform:translateY(-1px);box-shadow:0 14px 28px #f9800657}.topSecondaryButton{color:var(--primary);background:#fff;border:2px solid #f9800659}.topSecondaryButton:hover{background:var(--cream);transform:translateY(-1px)}@media (max-width:560px){.topHeroCard{padding:44px 24px}.topPrimaryButton,.topSecondaryButton{width:100%}}.topLoginUserCard{border-radius:var(--radius-full);background:var(--cream);border:1px solid var(--card-border);align-items:center;gap:14px;margin-bottom:28px;padding:14px 22px 14px 14px;display:inline-flex}.topLoginAvatar{background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:48px;height:48px;font-size:18px;font-weight:900;display:grid;overflow:hidden}.topLoginAvatar img{object-fit:cover;width:100%;height:100%}.topLoginUserInfo{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.topLoginUserName{color:var(--text);font-size:15px;font-weight:800}.topLoginBadge{border-radius:var(--radius-full);color:#15803d;background:#22c55e1f;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:800;display:inline-flex}.topLoginBadgeDot{background:#22c55e;border-radius:50%;width:6px;height:6px}.topLogoutButton{color:#dc2626;border-color:#dc262640}.topLogoutButton:hover{background:#fef2f2;border-color:#dc262666}.loginCard{max-width:620px}.loginBenefitBox{border-radius:var(--radius-lg);background:var(--cream);border:1px solid var(--card-border);flex-direction:column;gap:12px;margin:0 0 24px;padding:20px;display:flex}.loginBenefitItem{color:var(--text-muted);align-items:center;gap:12px;font-size:15px;font-weight:700;display:flex}.loginBenefitIcon{font-size:20px}.loginDevNotice{border-radius:var(--radius);color:#92400e;text-align:left;background:#fbbf241f;border:1px solid #fbbf244d;margin:0 0 28px;padding:14px 18px;font-size:14px;font-weight:700;line-height:1.6}.loginButtonRow{flex-direction:column;align-items:center}.inputPage{background:var(--cream);min-height:100vh;padding:48px 24px}.inputHeader{grid-template-columns:110px 1fr 82px;align-items:center;gap:16px;width:min(1120px,94vw);margin:0 auto 28px;display:grid}.inputTitle{text-align:center;color:var(--text);letter-spacing:-.04em;margin:0;font-size:clamp(30px,4.8vw,48px);line-height:1.2}.inputLead{text-align:center;color:var(--text-muted);margin:10px 0 0;font-size:clamp(15px,2vw,18px);font-weight:700;line-height:1.7}.backButton{color:var(--primary);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition);background:#ffffffe6;border:2px solid #f9800638;padding:12px 16px;font-weight:900;box-shadow:0 8px 18px #92400e14}.backButton:hover{background:#fff;transform:translateY(-1px)}.inputProgress{border-radius:var(--radius-full);width:62px;height:62px;color:var(--primary);background:#fff;border:2px solid #f9800629;justify-self:end;place-items:center;font-weight:900;display:grid;box-shadow:0 8px 18px #92400e1a}.inputGrid{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:26px;width:min(1120px,94vw);margin:0 auto;display:grid}.inputCard,.hintCard{background:var(--card-bg);border-radius:var(--radius-xl);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}.inputCard{padding:30px}.hintCard{padding:26px;position:sticky;top:24px}.inputCardHeader{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px;display:flex}.inputCardHeader h2,.hintCard h2{color:var(--text);letter-spacing:-.02em;margin:0 0 8px;font-size:24px}.inputCardHeader p,.hintCard p{color:var(--text-light);margin:0;font-weight:700;line-height:1.7}.scaleGrid{gap:18px;display:grid}.inputItem{border-radius:var(--radius-lg);background:#fffaf4;border:1px solid #f9800624;padding:18px}.inputItemTop{justify-content:space-between;gap:14px;margin-bottom:12px;display:flex}.inputLabel{color:var(--text);align-items:center;gap:8px;font-size:19px;display:flex}.inputItemTop p{color:var(--text-light);margin:6px 0 0;font-size:14px;font-weight:700;line-height:1.6}.selectedBadge{border-radius:var(--radius-full);color:#9a3412;background:#f980061f;flex-shrink:0;place-items:center;min-width:72px;height:36px;font-weight:900;display:grid}.scaleHintRow{color:#8a6a4a;justify-content:space-between;margin-bottom:10px;font-size:13px;font-weight:900;display:flex}.scaleButtons{grid-template-columns:repeat(6,minmax(44px,1fr));gap:10px;display:grid}.scaleButton{color:#7c2d12;cursor:pointer;background:#fff;border:2px solid #f9800633;border-radius:16px;min-height:48px;font-size:17px;font-weight:900;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s}.scaleButton:hover{border-color:#f980066b;transform:translateY(-1px);box-shadow:0 8px 16px #92400e1a}.scaleButtonActive{background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#fff;border-color:var(--primary);box-shadow:0 8px 18px #f980063d}.hintButtons{gap:10px;margin-top:18px;display:grid}.hintButton{border-radius:var(--radius);color:#6b5b4e;cursor:pointer;text-align:left;width:100%;min-height:44px;transition:all var(--transition);background:#fffaf4;border:2px solid #f9800624;padding:10px 14px;font-weight:900}.hintButton:hover{border-color:#f980064d}.hintButtonActive{color:#9a3412;background:#f980062e;border-color:#f9800673}.hintText{background:var(--cream);color:#4b3b2b;border-radius:18px;margin-top:16px;padding:16px;font-size:14px;font-weight:800;line-height:1.8}.currentSelection{border-top:1px solid #f980062e;margin-top:22px;padding-top:18px}.currentSelection h3{color:var(--text);margin:0 0 12px;font-size:15px}.currentSelectionRow{color:#6b5b4e;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;font-weight:800;display:flex}.currentSelectionRow strong{color:var(--primary)}.formError{color:#991b1b;background:#fee2e2;border-radius:16px;margin-top:18px;padding:14px 16px;font-weight:900;line-height:1.6}.submitArea{width:min(1120px,94vw);margin:28px auto 0}.fullButton{border-radius:18px;width:100%;min-height:60px}.primaryButton{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#fff;cursor:pointer;border:0;justify-content:center;align-items:center;padding:16px 28px;font-size:16px;font-weight:900;transition:transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 10px 22px #f9800647}.primaryButton:hover{transform:translateY(-1px);box-shadow:0 14px 28px #f9800657}@media (max-width:920px){.inputGrid{grid-template-columns:1fr}.hintCard{position:static}}@media (max-width:640px){.inputPage{padding:28px 16px}.inputHeader{text-align:center;grid-template-columns:1fr;margin-bottom:22px}.backButton,.inputProgress{justify-self:center}.inputCard,.hintCard{border-radius:24px;padding:22px}.inputCardHeader,.inputItemTop{flex-direction:column}.selectedBadge{align-self:flex-start}.scaleButtons{gap:7px}.scaleButton{border-radius:13px;min-height:44px}}.resultPage{background:var(--cream);min-height:100vh;padding:48px 24px}.resultPageCenter{place-items:center;display:grid}.resultLoadingCard{text-align:center;background:var(--card-bg);border-radius:var(--radius-xl);box-shadow:var(--card-shadow);padding:60px 40px}.resultLoadingEmoji{margin-bottom:20px;font-size:64px}.resultLoadingCard h1{color:var(--text);font-size:28px}.resultHeader{text-align:center;grid-template-columns:120px 1fr 120px;align-items:center;gap:16px;width:min(1120px,94vw);margin:0 auto 28px;display:grid}.resultTitle{color:var(--text);letter-spacing:-.04em;margin:0;font-size:clamp(30px,4.8vw,48px);line-height:1.2}.resultLead{color:var(--text-muted);margin:10px 0 0;font-size:clamp(15px,2vw,18px);font-weight:700;line-height:1.7}.secondarySmallButton{color:var(--primary);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition);background:#fff;border:2px solid #f9800647;padding:12px 16px;font-weight:900;box-shadow:0 8px 18px #92400e14}.secondarySmallButton:hover{background:var(--cream);transform:translateY(-1px)}.resultStack{gap:22px;width:min(1120px,94vw);margin:0 auto;display:grid}.resultCard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-xl);box-shadow:var(--card-shadow);padding:26px;position:relative}.rankBadgeLarge{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#fff;justify-content:center;align-items:center;min-width:76px;margin-bottom:18px;padding:9px 16px;font-weight:900;display:inline-flex;box-shadow:0 10px 22px #f980063d}.resultGrid{grid-template-columns:220px minmax(0,1fr) 230px 210px;align-items:start;gap:24px;display:grid}.resultImageWrap{flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;display:flex}.resultImage{aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);background:var(--cream);border:1px solid var(--card-border);width:100%;max-width:220px}.citrusImagePlaceholder{aspect-ratio:1;border-radius:var(--radius-lg);background:radial-gradient(circle at 35% 30%,#ffedd5f5,#fff7edeb),#fff7ed;border:1px dashed #f9800652;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:100%;max-width:220px;display:flex}.citrusImagePlaceholderFruit{background:radial-gradient(circle at 35% 28%,#fff1c2 0%,#fbbf24 30%,#f97316 78%);border-radius:50%;flex-shrink:0;width:58px;height:58px;box-shadow:inset -8px -8px 18px #c2410c29,0 10px 20px #f973161f}.citrusImagePlaceholderText{color:#c2410c;font-size:.9rem;font-weight:900}.varietyInfoLink{color:#c2410c;border-bottom:1px solid #c2410c59;font-size:.82rem;font-weight:900;line-height:1.5;text-decoration:none;transition:color .15s,border-color .15s;display:inline-block}.varietyInfoLink:hover{color:#9a3412;border-bottom-color:#9a3412}.resultInfo h2{color:var(--text);letter-spacing:-.03em;margin:0 0 12px;font-size:clamp(24px,3vw,32px)}.resultDescription{color:var(--text-muted);margin:0;font-weight:700;line-height:1.9}.featurePanel{border-radius:var(--radius-lg);background:#fffaf4;border:1px solid #f9800624;padding:18px}.featurePanel h3{color:var(--text);margin:0 0 12px;font-size:18px}.radarBox{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.radarItem{border-radius:var(--radius);color:#7c2d12;text-align:center;background:#fff;border:1px solid #f980061f;padding:10px 8px;font-weight:900}.linkColumn{gap:10px;display:grid}.ecButton{border-radius:var(--radius);text-align:center;width:100%;min-height:46px;transition:all var(--transition);border:0;justify-content:center;align-items:center;padding:12px 14px;font-size:14px;font-weight:900;text-decoration:none;display:inline-flex}.ecButton:hover{filter:brightness(1.05);transform:translateY(-1px)}.ecAmazon{color:#fff;background:#232f3e}.ecRakuten{color:#fff;background:#bf0000}.ecSatofuru{color:#fff;background:#d2691e}.disabledButton{border-radius:var(--radius);text-align:center;color:#9ca3af;cursor:not-allowed;background:#e5e7eb;border:0;justify-content:center;align-items:center;width:100%;min-height:46px;padding:12px 14px;font-size:14px;font-weight:900;display:inline-flex}.loginBenefitNote{border-radius:var(--radius);background:var(--cream);color:#92400e;text-align:center;margin:8px 0 0;padding:12px;font-size:13px;font-weight:800;line-height:1.6}.resultFooter{border-radius:var(--radius-xl);background:var(--card-bg);border:1px solid var(--card-border);flex-wrap:wrap;justify-content:center;gap:16px;width:min(760px,94vw);margin:34px auto 0;padding:22px;display:flex;box-shadow:0 14px 34px #92400e1a}@media (max-width:1050px){.resultGrid{grid-template-columns:180px minmax(0,1fr)}.featurePanel,.linkColumn{grid-column:span 1}}@media (max-width:720px){.resultPage{padding:28px 16px}.resultHeader,.resultGrid{grid-template-columns:1fr}.resultImage{max-width:260px}.resultFooter{padding:16px}.resultFooter .topPrimaryButton,.resultFooter .topSecondaryButton{width:100%}}.pageShell{background:var(--cream);min-height:100vh;padding:24px}.centerShell{place-items:center;display:grid}.heroCard{border-radius:var(--radius-xl);background:var(--card-bg);width:min(760px,92vw);box-shadow:var(--card-shadow);text-align:center;padding:56px 40px}.heroEmoji{margin-bottom:14px;font-size:72px;line-height:1}.heroTitle{color:var(--text);letter-spacing:-.04em;margin:0 0 20px;font-size:clamp(40px,6vw,64px);line-height:1.15}.heroLead{color:var(--text-muted);margin:0 0 36px;font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.6}.buttonRow{flex-wrap:wrap;justify-content:center;gap:18px;display:flex}.secondaryButton{border-radius:var(--radius-full);cursor:pointer;min-width:230px;color:var(--primary);background:#fff;border:2px solid #f9800659;padding:16px 28px;font-size:16px;font-weight:900;transition:transform .15s,box-shadow .15s,background .15s}.secondaryButton:hover{background:var(--cream);transform:translateY(-1px)}.dangerButton{border-radius:var(--radius-full);cursor:pointer;color:#dc2626;background:#fff;border:2px solid #dc262659;min-width:230px;padding:16px 28px;font-size:16px;font-weight:900;transition:transform .15s,box-shadow .15s,background .15s}.dangerButton:hover{background:#fef2f2;transform:translateY(-1px)}.loginCard{width:min(920px,92vw);max-width:none}.loginBenefitBox,.loginDevNotice{width:min(760px,100%);margin-left:auto;margin-right:auto}@media (max-width:640px){.loginCard{width:min(100%,92vw)}}.tasteRadarChart{width:100%;max-width:230px;margin-top:10px}.tasteRadarChart svg{width:100%;height:auto;display:block}.tasteRadarGrid{fill:none;stroke:#fed7aa;stroke-width:1px}.tasteRadarAxis{stroke:#fdba74;stroke-width:1px}.tasteRadarArea{fill:#f973163d;stroke:#f97316;stroke-width:2px;stroke-linejoin:round}.tasteRadarLabel{fill:#9a3412;font-size:10px;font-weight:700}.tasteRadarValueLabel{fill:#c2410c;font-size:10px;font-weight:700}.tasteRadarChart{justify-content:center;align-items:center;width:100%;max-width:290px;margin:2px auto 0;display:flex}.tasteRadarChart svg{width:100%;max-width:260px;height:auto;display:block}.tasteRadarLabel,.tasteRadarValueLabel{font-size:11px}.secondaryRecommendationButton{color:#9a3412;cursor:pointer;background:#fff7ed;border:1px solid #fed7aa;font-weight:700}.secondaryRecommendationButton:hover{background:#ffedd5}.currentSelectionLead{color:#92400e;margin:4px 0 10px;font-size:.85rem}.currentSelection .tasteRadarChart{max-width:260px;margin:4px auto 12px}@media (max-width:640px){.currentSelection .tasteRadarChart{max-width:230px}.currentSelectionGrid{grid-template-columns:1fr}}@media (min-width:900px){.hintCard{align-self:start;max-height:calc(100vh - 48px);position:sticky;top:24px;overflow-y:auto}}.currentSelectionLead{color:#92400e;margin:4px 0 10px;font-size:.85rem;line-height:1.6}.inputTasteRadarChart{width:min(100%,260px);margin:8px auto 12px}.inputTasteRadarChart svg{width:100%;height:auto;display:block;overflow:visible}.inputRadarGrid{fill:none;stroke:#fed7aa;stroke-width:1.2px}.inputRadarAxis{stroke:#fed7aa;stroke-width:1px}.inputRadarArea{fill:#f9800633;stroke:#f97316;stroke-width:2.4px;stroke-linejoin:round}.inputRadarPoint{fill:#f97316;stroke:#fff;stroke-width:2px}.inputRadarLabel{fill:#7c2d12;font-size:11px;font-weight:800}.inputRadarValue{fill:#ea580c;font-size:12px;font-weight:900}.currentSelectionGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;display:grid}.currentSelectionChip{color:#7c2d12;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;font-size:.84rem;display:flex}.currentSelectionChip strong{color:#c2410c;font-size:.9rem}@media (max-width:640px){.inputTasteRadarChart{width:min(100%,230px)}.currentSelectionGrid{grid-template-columns:1fr}}.recommendSubmitArea{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;display:grid}.recommendActionButton{cursor:pointer;text-align:left;border:2px solid #0000;border-radius:28px;flex-direction:column;justify-content:center;gap:8px;min-height:132px;padding:22px 24px;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;display:flex}.recommendActionButton:hover{transform:translateY(-2px)}.recommendActionPrimary{color:#fff;background:linear-gradient(135deg,#ffa83d,#f97316);box-shadow:0 18px 34px #f9731647}.recommendActionPrimary:hover{box-shadow:0 22px 42px #f9731657}.recommendActionSecondary{color:#7c2d12;background:#fff;border-color:#fb923c;box-shadow:0 14px 30px #7c2d121a}.recommendActionSecondary:hover{background:#fff7ed;border-color:#f97316;box-shadow:0 18px 36px #7c2d1224}.recommendActionEyebrow{letter-spacing:.02em;border-radius:999px;width:fit-content;padding:5px 10px;font-size:.78rem;font-weight:800}.recommendActionPrimary .recommendActionEyebrow{color:#fff;background:#ffffff38}.recommendActionSecondary .recommendActionEyebrow{color:#c2410c;background:#ffedd5}.recommendActionTitle{font-size:1.12rem;font-weight:900;line-height:1.45}.recommendActionText{opacity:.9;font-size:.9rem;font-weight:700;line-height:1.6}.recommendActionPrimary .recommendActionText{color:#ffffffeb}.recommendActionSecondary .recommendActionText{color:#9a3412}@media (max-width:760px){.recommendSubmitArea{grid-template-columns:1fr;gap:12px}.recommendActionButton{border-radius:22px;min-height:auto;padding:18px 20px}.recommendActionTitle{font-size:1rem}.recommendActionText{font-size:.84rem}}.hintButtons{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.hintButtons .hintButton{text-align:left;width:100%;min-height:44px;padding:10px 12px}.hintButtons .hintButton:last-child:nth-child(odd){grid-column:1/-1}@media (max-width:640px){.hintButtons{grid-template-columns:1fr}}.topSampleShowcase{max-width:920px;margin:8px auto 0}.topSampleFeaturedCard{border-radius:var(--radius-lg);border:1px solid #f980062e;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:0;animation:.5s both topCardReveal;display:grid;overflow:hidden;box-shadow:0 14px 34px #92400e1f}.topSampleFeaturedImageWrap{background:#f3e8d4;min-height:360px;overflow:hidden}.topSampleFeaturedImage{object-fit:cover;width:100%;height:100%;min-height:360px;display:block}.topSampleFeaturedBody{flex-direction:column;justify-content:center;gap:12px;padding:32px 32px 34px;display:flex}.topSampleFeatureArea{grid-template-columns:150px minmax(0,1fr);align-items:center;gap:20px;margin-top:8px;display:grid}.topSampleExplainBox{background:#ffffff94;border:1px solid #f980062e;border-radius:20px;padding:16px 18px}.topSampleExplainBox strong{color:#9a3412;margin-bottom:6px;font-size:.9rem;font-weight:900;display:block}.topSampleExplainBox p{color:var(--text-muted);margin:0;font-size:.88rem;font-weight:650;line-height:1.75}@media (max-width:768px){.topSampleFeaturedCard{grid-template-columns:1fr}.topSampleFeaturedImageWrap,.topSampleFeaturedImage{min-height:240px}.topSampleFeaturedBody{padding:24px 22px 28px}.topSampleFeatureArea{grid-template-columns:1fr;justify-items:center;gap:14px}.topSampleExplainBox{width:100%}}@keyframes topFloatA{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-18px)rotate(6deg)}}@keyframes topFloatB{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-12px)rotate(-5deg)}}@keyframes topFloatC{0%,to{transform:translateY(0)}50%{transform:translateY(-22px)}}@keyframes topOrbFloat{0%,to{transform:translate(0)scale(1)}33%{transform:translate(20px,-30px)scale(1.05)}66%{transform:translate(-15px,20px)scale(.97)}}@keyframes topHeroFadeIn{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes topCardReveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.topLanding{background:var(--cream);color:var(--text);min-height:100vh;position:relative;overflow:hidden}.topOrb{pointer-events:none;z-index:0;border-radius:50%;animation:linear infinite topOrbFloat;position:fixed}.topOrb1{background:radial-gradient(circle,#ffa94d2e 0%,#0000 70%);width:480px;height:480px;animation-duration:18s;top:-120px;right:-100px}.topOrb2{background:radial-gradient(circle,#fde68a38 0%,#0000 70%);width:360px;height:360px;animation-duration:24s;animation-delay:-8s;bottom:200px;left:-80px}.topOrb3{background:radial-gradient(circle,#f980061a 0%,#0000 70%);width:280px;height:280px;animation-duration:20s;animation-delay:-4s;top:40%;right:10%}.topHero{z-index:1;padding:80px 24px 72px;position:relative}.topHeroInner{grid-template-columns:1fr 1fr;align-items:center;gap:48px;max-width:1100px;margin:0 auto;animation:.7s both topHeroFadeIn;display:grid}.topHeroContent{flex-direction:column;gap:20px;display:flex}.topHeroBadge{border-radius:var(--radius-full);color:#c2410c;letter-spacing:.02em;background:#f980061f;border:1px solid #f9800640;align-items:center;gap:8px;width:fit-content;padding:8px 18px;font-size:.88rem;font-weight:800;display:inline-flex}.topHeroTitle{letter-spacing:-.03em;color:var(--text);margin:0;font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.2}.topHeroAccent{background:linear-gradient(120deg, var(--primary-light), var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.topHeroLead{color:var(--text-muted);margin:0;font-size:clamp(1rem,2vw,1.15rem);font-weight:600;line-height:1.8}.topHeroActions{flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px;display:flex}.topHeroNote{color:var(--text-light);margin:0;font-size:.85rem;font-weight:700;line-height:1.4}.topHeroVisual{justify-content:center;align-items:center;min-height:440px;display:flex}.topHeroScene{perspective:1500px;width:min(600px,94vw);height:420px;transform-style:preserve-3d;position:relative}.topHeroGlow{background:radial-gradient(circle,#ffc45e6b 0%,#fff7ed1f 55%,#0000 72%);border-radius:50%;width:220px;height:220px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 0 0 26px #f980060d,0 0 0 56px #f9800606}.topHeroCarousel{width:100%;height:100%;transform-style:preserve-3d;animation:32s linear infinite topHeroCarouselSpin;position:relative}.topHeroFruitCard{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:144px;transform-style:preserve-3d;transform:translate(-50%, -50%) rotateY(var(--hero-angle)) translateZ(250px) rotateX(8deg);cursor:pointer;background:#ffffffd1;border:1px solid #f980062e;border-radius:24px;outline:none;padding:10px;animation:6s ease-in-out infinite topHeroFruitTilt;position:absolute;top:50%;left:50%;box-shadow:0 22px 44px #92400e2e,inset 0 1px #fffc}.topHeroFruitImageWrap{aspect-ratio:1;background:linear-gradient(#fff7edf2,#ffedd5b8);border-radius:20px;width:100%;overflow:hidden}.topHeroFruitImage{object-fit:cover;width:100%;height:100%;display:block}.topHeroFruitName{z-index:2;border-radius:var(--radius-full);min-width:max-content;color:var(--text);opacity:0;pointer-events:none;background:#ffffffeb;border:1px solid #f980063d;margin:0;padding:7px 14px;font-size:.82rem;font-weight:800;transition:opacity .18s,transform .18s;position:absolute;top:50%;left:50%;transform:translate(-50%,calc(6px - 50%));box-shadow:0 12px 24px #92400e33}.topHeroFruitCard:hover .topHeroFruitName,.topHeroFruitCard:focus-visible .topHeroFruitName{opacity:1;transform:translate(-50%,-50%)}@keyframes topHeroCarouselSpin{0%{transform:rotateX(-12deg)rotateY(0)}to{transform:rotateX(-12deg)rotateY(360deg)}}@keyframes topHeroFruitTilt{0%,to{margin-top:-8px}50%{margin-top:8px}}.topCtaButton{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#fff;cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;padding:16px 32px;font-size:1rem;font-weight:900;transition:transform .18s,box-shadow .18s;display:inline-flex;box-shadow:0 12px 28px #f980064d}.topCtaButton:hover{transform:translateY(-2px);box-shadow:0 16px 36px #f9800661}.topCtaButtonLarge{padding:20px 48px;font-size:1.1rem}.topSection{z-index:1;padding:80px 24px;position:relative}.topSectionAlt{background:linear-gradient(#fff7ed00 0%,#ffedd566 50%,#fff7ed00 100%)}.topSectionInner{max-width:1100px;margin:0 auto}.topSectionTitle{text-align:center;color:var(--text);letter-spacing:-.02em;margin-bottom:12px;font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800}.topSectionLead{text-align:center;color:var(--text-muted);margin-bottom:48px;font-size:1rem;font-weight:600}.topStepGrid,.topFeatureGrid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;display:grid}.topStepCard,.topFeatureCard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:32px 24px;transition:transform .2s,box-shadow .2s;animation:.5s both topCardReveal;box-shadow:0 8px 24px #92400e14}.topStepCard{text-align:center}.topStepCard:hover,.topFeatureCard:hover{transform:translateY(-4px);box-shadow:0 16px 36px #92400e21}.topStepNumber{letter-spacing:.1em;color:var(--primary);opacity:.8;margin-bottom:12px;font-size:.78rem;font-weight:900}.topStepEmoji{margin-bottom:14px;font-size:2.6rem;line-height:1}.topStepTitle,.topFeatureTitle{color:var(--text);margin-bottom:10px;font-size:1.05rem;font-weight:800}.topStepDesc,.topFeatureDesc{color:var(--text-muted);margin:0;font-size:.9rem;line-height:1.75}.topFeatureEmoji{margin-bottom:14px;font-size:2.2rem;line-height:1}.topSampleRank{letter-spacing:.06em;font-size:.8rem;font-weight:900}.topSampleName{color:var(--text);font-size:1.2rem;font-weight:800}.topSampleDesc{color:var(--text-muted);margin:0;font-size:.88rem;line-height:1.7}.topSampleTags{flex-wrap:wrap;gap:6px;margin-top:2px;display:flex}.topSampleTag{border-radius:var(--radius-full);background:#ffffffa6;border:1px solid;padding:4px 10px;font-size:.76rem;font-weight:800}.topSampleRadar{flex-direction:column;align-items:center;gap:4px;margin-top:10px;display:flex}.topSampleRadarLabel{color:var(--text-light);margin:0;font-size:.76rem;font-weight:700;line-height:1.4}.topCtaSection{z-index:1;background:linear-gradient(135deg,#ffa94d26,#f9800614);border-top:1px solid #f980061a;padding:80px 24px 100px;position:relative}.topCtaInner{text-align:center;flex-direction:column;align-items:center;gap:18px;max-width:640px;margin:0 auto;animation:.6s both topHeroFadeIn;display:flex}.topCtaEyebrow{margin:0;font-size:3rem;line-height:1;animation:4s ease-in-out infinite topFloatA;display:block}.topCtaTitle{color:var(--text);letter-spacing:-.02em;margin:0;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;line-height:1.3}.topCtaLead{color:var(--text-muted);margin:0;font-size:1rem;font-weight:600;line-height:1.7}@media (prefers-color-scheme:dark){.topLanding{color:#1f2937;background:#fff7ed}.topStepCard,.topFeatureCard{background:#ffffffeb}.topHeroTitle,.topSectionTitle,.topCtaTitle,.topStepTitle,.topSampleName,.topFeatureTitle{color:#1f2937}.topHeroLead,.topSectionLead,.topStepDesc,.topSampleDesc,.topFeatureDesc,.topCtaLead,.topHeroNote{color:#4b5563}.topCtaButton{color:#fff}.topSampleTag{background:#ffffffbf}}@media (max-width:768px){.topHero{padding:60px 20px 56px}.topHeroInner{text-align:center;grid-template-columns:1fr;gap:40px}.topHeroBadge{margin:0 auto}.topHeroActions{justify-content:center}.topHeroVisual{min-height:320px}.topHeroScene{width:min(360px,94vw);height:300px}.topHeroGlow{width:180px;height:180px}.topHeroFruitCard{width:108px;transform:translate(-50%, -50%) rotateY(var(--hero-angle)) translateZ(175px) rotateX(8deg);border-radius:22px}.topHeroFruitName{font-size:.72rem}.topStepGrid,.topFeatureGrid{grid-template-columns:1fr;gap:16px}.topSection{padding:60px 20px}.topCtaSection{padding:60px 20px 80px}.topCtaButtonLarge{width:100%;padding:18px 36px;font-size:1rem}.topSectionLead{margin-bottom:32px}}@media (max-width:480px){.topBreakSm{display:none}}.topOutputPreview{max-width:1100px;margin:8px auto 0}.topOutputPreview .resultCard{margin:0}.topOutputPreviewNote{text-align:center;color:var(--text-muted);margin:18px 0 0;font-size:.92rem;font-weight:700;line-height:1.7}.topPreviewEcButton{cursor:default}.topPreviewEcButton:hover{filter:none;transform:none}.topStepIconWrap,.topFeatureIconWrap{justify-content:center;align-items:center;display:flex}.topStepIcon{object-fit:contain;width:72px;height:72px;margin:0 auto 1.25rem;display:block}.topFeatureIcon{object-fit:contain;width:64px;height:64px;margin:0 0 1.1rem;display:block}@media (max-width:768px){.topStepIcon{width:60px;height:60px}.topFeatureIcon{width:56px;height:56px}}.topStepCard{flex-direction:column;align-items:center;display:flex}.topStepNumber{margin-bottom:1.1rem}.topStepIconWrap{justify-content:center;align-items:center;width:112px;height:112px;margin:0 auto 1.1rem;display:flex;overflow:hidden}.topStepIcon{object-fit:contain;transform-origin:50%;width:112px;height:112px;margin:0;display:block;transform:scale(1.55)}.topStepTitle{margin-top:.2rem}.topFeatureCard{flex-direction:column;align-items:flex-start;display:flex}.topFeatureIconWrap{justify-content:center;align-items:center;width:92px;height:92px;margin:0 0 1.25rem;display:flex;overflow:hidden}.topFeatureIcon{object-fit:contain;transform-origin:50%;width:92px;height:92px;margin:0;display:block;transform:scale(1.5)}.topFeatureTitle{margin-top:0}@media (max-width:768px){.topStepIconWrap{width:92px;height:92px;margin-bottom:.9rem}.topStepIcon{width:92px;height:92px;transform:scale(1.45)}.topFeatureIconWrap{width:78px;height:78px;margin-bottom:1rem}.topFeatureIcon{width:78px;height:78px;transform:scale(1.4)}}.topFeatureIconWrap{overflow:visible}.topFeatureIcon{transform:scale(1.12)}.topFeatureIconRadar{transform:scale(.95)}@media (max-width:768px){.topFeatureIcon{transform:scale(1.08)}.topFeatureIconRadar{transform:scale(.9)}}@media (max-width:720px){.resultShareCard{padding:24px 18px}.xShareButton{width:100%}}.resultShareCard{border-radius:var(--radius-xl);background:var(--card-bg);border:1px solid var(--card-border);text-align:center;width:min(760px,94vw);margin:34px auto 0;padding:28px 24px;box-shadow:0 14px 34px #92400e1a}.resultShareEyebrow{color:var(--primary);letter-spacing:.08em;margin:0 0 8px;font-size:.82rem;font-weight:900}.resultShareTitle{color:var(--text);letter-spacing:-.02em;margin:0;font-size:clamp(1.25rem,3vw,1.8rem);line-height:1.45}.resultShareTitle span{color:#c2410c}.resultShareText{color:var(--text-muted);margin:12px 0 20px;font-size:.95rem;font-weight:700}.xShareButton{border-radius:var(--radius-full);color:#fff;background:#111827;justify-content:center;align-items:center;min-height:48px;padding:12px 24px;font-weight:900;text-decoration:none;transition:transform .15s,filter .15s,box-shadow .15s;display:inline-flex;box-shadow:0 10px 22px #1118272e}.xShareButton:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 14px 28px #11182738}@media (max-width:720px){.resultShareCard{padding:24px 18px}.xShareButton{width:100%}}