:root {
    --ink: #26334b; --muted: #65708a; --paper: rgba(255,255,255,.82);
    --purple: #8174e8; --mint: #54cbb0; --pink: #f59bbb; --yellow: #f7cd68;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink); background: #f8f8ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: linear-gradient(135deg, #faf8ff 0%, #f1fbf7 52%, #fff5ef 100%); }
body::before, body::after { content: ""; position: fixed; z-index: -1; width: 42vw; height: 42vw; max-width: 520px; max-height: 520px; border-radius: 50%; filter: blur(60px); opacity: .48; pointer-events: none; animation: float 14s ease-in-out infinite alternate; }
body::before { top: -15vw; left: -12vw; background: #e6d9ff; } body::after { right: -12vw; bottom: -16vw; background: #c8f4e3; animation-delay: -6s; }
.falling-mushrooms { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .falling-mushroom { position:absolute; top:-3rem; display:block; font-size:var(--size); line-height:1; opacity:var(--opacity); animation:mushroomFall var(--duration) linear forwards; } .falling-mushroom.is-brown { filter:sepia(.85) saturate(.65) hue-rotate(325deg) brightness(.82); }
button { font: inherit; } .explorer-shell { position:relative; z-index:1; width: min(100% - 32px, 920px); margin: auto; padding: 22px 0 60px; }
.loading-screen { min-height: 88vh; display: grid; place-content: center; justify-items: center; text-align: center; transition: opacity .35s, transform .35s; }
.loading-screen.is-leaving { opacity: 0; transform: translateY(-10px); } .loading-screen h1 { margin: 8px 0; font-size: clamp(1.7rem, 6vw, 2.6rem); }
.loading-screen p:last-child { color: var(--muted); } .eyebrow { color: var(--purple); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.loader-mushroom { width: 86px; height: 76px; position: relative; margin-bottom: 18px; animation: bob 1.8s ease-in-out infinite; }
.loader-mushroom::before { content: ""; position: absolute; inset: 0 0 22px; border-radius: 54% 54% 36% 36%; background: linear-gradient(135deg, #ffb8d2, #a999f3); box-shadow: 0 10px 25px #9888df55; }
.loader-mushroom::after { content: ""; position: absolute; width: 28px; height: 33px; left: 29px; bottom: 0; border-radius: 10px 10px 15px 15px; background: #fff0d2; }
.loader-mushroom span::before, .loader-mushroom span::after { content: ""; position: absolute; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: #fff6fb; top: 19px; } .loader-mushroom span::before { left: 25px; } .loader-mushroom span::after { right: 23px; }
.app-content { animation: appear .45s ease both; } [hidden] { display: none !important; }
.hero-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px 25px; }
.hero-header h1 { margin: 2px 0 8px; font-size: clamp(2rem, 8vw, 3.4rem); line-height: .98; letter-spacing: -.055em; }
.hero-copy { max-width: 550px; color: var(--muted); line-height: 1.55; margin: 0; } .hero-tools { display: flex; flex-direction: column; align-items: center; gap: 12px; } .hero-orb { display: grid; place-items: center; width: 70px; height: 70px; flex: 0 0 auto; border-radius: 25px; font-size: 2.5rem; background: linear-gradient(145deg,#fff,#ffe0ec); box-shadow: 0 14px 35px #a187d633; transform: rotate(7deg); }
.reset-button { position: absolute; top: 14px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #d7d9ea; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.78); cursor: pointer; font-size: 1.45rem; line-height: 1; font-weight: 800; transition: transform .2s, border-color .2s, color .2s, box-shadow .2s; } .reset-button:hover, .reset-button:focus-visible { transform: translateY(-2px) rotate(-12deg); border-color: var(--purple); color: var(--purple); box-shadow: 0 6px 16px #8174e833; outline: none; } .reset-button:focus-visible { outline: 3px solid #8174e855; outline-offset: 3px; }
.progress-nav { display: grid; grid-template-columns: repeat(var(--progress-count, 1), minmax(0, 1fr)); gap: 6px; min-width: 0; padding: 5px 0 20px; scroll-margin-top: 16px; }
.progress-item { min-width: 0; height: 11px; padding: 0; border: 0; border-radius: 99px; background: #dfe4f1; cursor: pointer; transition: transform .2s, background .25s, box-shadow .25s; position: relative; }
.progress-item::after { content: attr(data-tooltip); position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: min(220px, 70vw); padding: 8px 11px; border: 1px solid rgba(255,255,255,.9); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.96); box-shadow: 0 9px 22px rgba(76,78,125,.18); font-size: .78rem; font-weight: 800; line-height: 1.2; pointer-events: none; opacity: 0; transform: translate(-50%, 5px); transition: opacity .18s, transform .18s; }
.progress-item::before { content: ""; position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 5px); border: 5px solid transparent; border-top-color: rgba(255,255,255,.96); pointer-events: none; opacity: 0; transform: translate(-50%, 5px); transition: opacity .18s, transform .18s; }
.progress-item:hover::after, .progress-item:hover::before, .progress-item:focus-visible::after, .progress-item:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
.progress-item:first-child::after { left: 0; transform: translate(0, 5px); }
.progress-item:first-child::before { left: 9px; transform: translate(0, 5px); }
.progress-item:first-child:hover::after, .progress-item:first-child:focus-visible::after { transform: translate(0, 0); }
.progress-item:first-child:hover::before, .progress-item:first-child:focus-visible::before { transform: translate(0, 0); }
.progress-item:last-child::after { left: auto; right: 0; transform: translate(0, 5px); }
.progress-item:last-child::before { left: auto; right: 9px; transform: translate(0, 5px); }
.progress-item:last-child:hover::after, .progress-item:last-child:focus-visible::after { transform: translate(0, 0); }
.progress-item:last-child:hover::before, .progress-item:last-child:focus-visible::before { transform: translate(0, 0); }
.progress-item:hover, .progress-item:focus-visible { transform: translateY(-2px); outline: 3px solid #8174e855; outline-offset: 3px; z-index: 22;} .progress-item.current { background: linear-gradient(90deg,#8174e8,#b49cf6); box-shadow: 0 0 0 4px #8174e822, 0 5px 15px #8174e866; }
.progress-item.real { background: linear-gradient(90deg,#51cbb0,#78d9b5); box-shadow: 0 4px 13px #54cbb066; } .progress-item.unknown { background: #aeb7cb; }
.wizard-card, .answer-summary, .results-panel { background: var(--paper); border: 1px solid #fff; border-radius: 30px; box-shadow: 0 20px 55px #6e75a518; backdrop-filter: blur(10px); }
.results-panel { margin-top: 18px; }
.edibility-badge { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; padding: 15px 18px; border: 2px solid currentColor; border-radius: 18px; font-size: 1.1rem; }
.edibility-badge .edibility-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.edibility-badge.edible { color: #237b58; background: #e5f8ee; } .edibility-badge.conditional { color: #946d17; background: #fff5d7; } .edibility-badge.not-edible, .edibility-badge.dangerous { color: #ad3d55; background: #fff0f2; } .edibility-badge.unknown { color: #626b82; background: #f0f2f7; }
.feature-details { display: grid; gap: 9px; } .feature-detail { padding: 12px 14px; border-left: 5px solid #aeb7cb; border-radius: 12px; background: #f3f4f8; } .feature-detail.matched { border-left-color: #54cbb0; background: #effaf5; } .feature-detail.mismatched { border-left-color: #ee8b9d; background: #fff3f4; } .feature-detail-heading { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; } .feature-detail-heading span { color: var(--muted); font-size: .76rem; font-weight: 800; } .feature-detail-values { margin-top: 5px; color: var(--muted); font-size: .84rem; }
.panel-fade-in { animation: panelFadeIn .35s ease both; }
.panel-fade-out { animation: panelFadeOut .25s ease both; pointer-events: none; }
.wizard-card { position: relative; padding: clamp(20px, 5vw, 44px); min-height: 380px; } .step-content { transition: opacity .24s, transform .24s; } .step-content.is-changing { opacity: 0; transform: translateX(-18px); } .step-content.is-changing.is-going-back { transform: translateX(18px); }
.wizard-card-shell { position: relative; } .swipe-hint { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; border-radius:30px; background:rgba(52,58,76,.28); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); -webkit-mask-image:radial-gradient(ellipse at center, #000 58%, rgba(0,0,0,.82) 78%, transparent 100%); mask-image:radial-gradient(ellipse at center, #000 58%, rgba(0,0,0,.82) 78%, transparent 100%); cursor:pointer; opacity:1; touch-action:pan-y; } .swipe-hint img { width:min(42vw,180px); max-height:180px; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(25,29,52,.28)); animation:swipeHintFloat 3.8s ease-in-out infinite; } .swipe-hint:focus-visible { outline:4px solid #8174e8; outline-offset:4px; } .swipe-hint.is-hiding { animation: swipeHintFadeOut .35s ease forwards; pointer-events:none; }
.step-kicker { color: var(--purple); font-size: .85rem; font-weight: 800; margin: 0 0 8px; } .step-heading { margin: 0; font-size: clamp(1.7rem, 6vw, 2.6rem); letter-spacing: -.04em; } .step-description { color: var(--muted); line-height: 1.5; margin: 10px 0 22px; }
.step-content.is-entering { opacity: 0; transform: translateX(18px); } .step-content.is-entering.is-going-back { transform: translateX(-18px); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } .choice-card { min-height: 132px; border: 2px solid transparent; border-radius: 22px; padding: 18px 14px; text-align: center; cursor: pointer; color: var(--ink); background: linear-gradient(145deg,#fff,#f3f4ff); box-shadow: 0 8px 18px #777bb012; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; }
.choice-card:hover, .choice-card:focus-visible { transform: translateY(-4px); box-shadow: 0 13px 24px #777bb022; outline: none; } .choice-card:focus-visible { outline: 3px solid #8174e877; outline-offset: 2px; } .choice-card.is-selected { border-color: var(--purple); transform: scale(1.025); box-shadow: 0 10px 25px #8174e855; background: linear-gradient(145deg,#fff,#eeeaff); }
.choice-visual { margin-left: auto; margin-right: auto; }
.choice-card { transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease; will-change: transform, box-shadow; }
.choice-card:hover, .choice-card:focus-visible { transform: translateY(-4px) !important; box-shadow: 0 13px 24px #777bb022 !important; }
.choice-card.is-selected:hover, .choice-card.is-selected:focus-visible { transform: translateY(-4px) scale(1.025) !important; }
.choice-card.is-selected::after { content: "✓"; position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: var(--purple); font-weight: 800; } .choice-visual { width: 92px; height: 78px; padding: 7px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.94); box-shadow: 0 7px 17px rgba(121,127,169,.12); overflow: hidden; } .choice-visual img { width: 100%; height: 100%; border-radius: 14px; object-fit: contain; } .choice-visual .icon-fallback { color: #a5a9c4; font-size: 1.7rem; }
.choice-title { display: block; font-weight: 800; font-size: 1rem; } .choice-description { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 5px; } .unknown-choice { background: linear-gradient(145deg,#f4f5fa,#e9edf6); border-style: dashed; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; } .button { min-height: 50px; padding: 12px 18px; border: 0; border-radius: 16px; cursor: pointer; font-weight: 800; transition: transform .2s, opacity .2s; } .button:hover:not(:disabled) { transform: translateY(-2px); } .button:focus-visible, .primary-cta:focus-visible { outline: 4px solid #8174e855; outline-offset: 3px; } .button-back { background: #edf0f7; color: var(--muted); } .button-next { color: #fff; background: linear-gradient(100deg,#8174e8,#a67dec); box-shadow: 0 8px 18px #8174e844; } .button:disabled { opacity: .4; cursor: not-allowed; }
.answer-summary { margin-top: 18px; padding: 19px 22px; } .answer-summary h2 { margin: 0 0 12px; font-size: 1rem; } .summary-list { display: flex; flex-wrap: wrap; gap: 8px; } .summary-chip { border: 1px solid #dce0ef; border-radius: 99px; background: #fff; padding: 9px 13px; color: var(--ink); cursor: pointer; font-size: .82rem; } .summary-chip:hover, .summary-chip:focus-visible { border-color: var(--purple); outline: none; }
.cta-wrap { position: sticky; z-index: 10; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; } .primary-cta { min-height: 64px; width: min(100%, 440px); border: 3px solid rgba(255,255,255,.82); border-bottom: 0; border-radius: 28px 28px 0 0; padding: 16px 25px; color: #fff; font-weight: 900; font-size: 1.05rem; letter-spacing: .03em; cursor: pointer; pointer-events: auto; background: linear-gradient(105deg,#c0c8d8,#aeb8cd); transition: transform .5s ease, box-shadow .5s ease, background-position 1s ease, opacity .35s ease; } .primary-cta:not(:disabled) { background: linear-gradient(105deg,#8174e8,#dd79b3,#f19d78,#8174e8); background-size: 250% 100%; box-shadow: 0 12px 28px #cf79b455; animation: ctaSlideIn .45s ease both, gradient 7s ease infinite; } .primary-cta:not(:disabled):hover { transform: translateY(-3px) scale(1.015); } .primary-cta:disabled { cursor: not-allowed; opacity: 0; pointer-events: none; transform: translateY(110%); animation: none; } .cta-sparkle { margin-left: 10px; }
.results-panel { padding: clamp(20px,5vw,38px); } .results-panel h2 { margin: 0 0 4px; font-size: clamp(1.6rem,5vw,2.3rem); } .result-lead { color: var(--muted); margin: 0 0 22px; } .result-card { border-radius: 24px; background: #fff; padding: 16px; } .result-card.top-result { background: linear-gradient(145deg,#fff,#f0ecff); border: 2px solid #c4b9ff; } .result-image { width: 100%; height: 190px; object-fit: cover; border-radius: 18px; background: linear-gradient(135deg,#f6e7f2,#e0f6ee); } .result-placeholder { display: grid; place-items: center; font-size: 4rem; } .result-card h3 { margin: 15px 0 3px; font-size: 1.35rem; } .scientific { color: var(--muted); font-style: italic; } .score-row { display:flex; align-items:center; gap: 13px; margin: 17px 0; } .score { display:grid; place-items:center; width: 70px; height:70px; border-radius:50%; color:#fff; font-weight:900; background: conic-gradient(#8174e8 var(--score),#e3e6f0 0); position:relative; } .score::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; } .score strong { position:relative; z-index:1; color:var(--ink); } .score-label { font-weight:800; } .coverage { color:var(--muted); font-size:.85rem; } .detail-heading { margin: 24px 0 8px; font-size: 1rem; } .detail-pills { display:flex; flex-wrap:wrap; gap:7px; } .detail-pill { border-radius:99px; padding:7px 10px; font-size:.78rem; background:#eef9f4; } .detail-pill.mismatched { background:#fff0f0; } .detail-pill.no-data { background:#f0f1f6; } .other-results { display:grid; gap:12px; margin-top:16px; } .mini-result { display:flex; gap:12px; align-items:center; padding:10px; border-radius:17px; background:#fff; } .mini-result img, .mini-result .result-placeholder { width:64px; height:64px; flex:0 0 64px; border-radius:13px; font-size:2rem; object-fit:cover; } .mini-result h3 { margin:0 0 3px; font-size:1rem; } .mini-score { color:var(--purple); font-weight:900; } .safety-note { margin-top:22px; padding:15px 17px; border-radius:17px; background:#fff8dd; color:#6f5b25; line-height:1.45; font-size:.86rem; } .retry-button { margin-top:18px; background:#8174e8; color:#fff; } .app-error { text-align:center; color:#a74663; font-weight:700; }
@keyframes bob { 50% { transform: translateY(-9px) rotate(3deg); } } @keyframes appear { from { opacity:0; transform:translateY(12px); } } @keyframes panelFadeIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes panelFadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.985); } } @keyframes gradient { 50% { background-position:100% 0; } } @keyframes float { to { transform:translate(20px, 15px) scale(1.06); } }
@keyframes swipeHintFadeOut { from { opacity:1; } to { opacity:0; visibility:hidden; } }
@keyframes swipeHintFloat { 0%, 100% { transform:translateX(-10px) rotate(-2deg); } 50% { transform:translateX(10px) rotate(2deg); } }
@keyframes mushroomFall { 0% { transform:translate3d(0,-8vh,0) rotate(var(--rotation)); } 30% { transform:translate3d(calc(var(--wind) * -.25),30vh,0) rotate(calc(var(--rotation) - 12deg)); } 62% { transform:translate3d(calc(var(--wind) * .45),64vh,0) rotate(calc(var(--rotation) + 15deg)); } 100% { transform:translate3d(var(--wind),115vh,0) rotate(calc(var(--rotation) + 35deg)); } }
@keyframes ctaSlideIn { from { opacity:0; transform:translateY(110%); } to { opacity:1; transform:translateY(0); } }
@media (min-width: 650px) { .choice-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .result-image { height: 280px; } .other-results { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 649px) { .progress-item::before, .progress-item::after { display: none; } }
@media (max-width: 649px) { .edibility-banner { align-items: flex-start; flex-direction: column; gap: 8px; } }
@media (min-width: 650px) { .swipe-hint { display:none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: reduce) { .falling-mushrooms { display:none; } }
.explorer-shell { padding-bottom: 132px; }
.cta-wrap { position: fixed; }
.primary-cta { transition: transform .5s ease, box-shadow .5s ease, background-position 1s ease, opacity .35s ease; }
.result-card, .mini-result { color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; } .result-card.top-result { display:flex; flex-direction:column; } .result-card:hover, .mini-result:hover { box-shadow:0 12px 26px rgba(71, 54, 139, .14); transform:translateY(-2px); }
.mushroom-search { position:relative; max-width:520px; margin:0px auto 24px; padding:18px; z-index:21; border:1px solid rgba(255,255,255,.78); border-radius:24px; background:linear-gradient(135deg,#fff4d8 0%,#f3eaff 48%,#dff7ef 100%); box-shadow:0 10px 26px rgba(92,70,150,.1); } .mushroom-search label { display:block; margin-bottom:8px; font-weight:800; color:#4d3d80; } .mushroom-search input { width:100%; box-sizing:border-box; border:2px solid rgba(129,116,232,.28); border-radius:14px; padding:12px 14px; font:inherit; background:rgba(255,255,255,.9); } .mushroom-search input:focus { border-color:#8174e8; outline:3px solid rgba(129,116,232,.16); } .mushroom-search-results { position:absolute; left:18px; right:18px; top:90%; padding:6px; border-radius:14px; background:#fff; box-shadow:0 12px 30px #382b6b22; } .mushroom-search-result { display:flex; align-items:center; gap:10px; padding:9px; border-radius:10px; color:inherit; text-decoration:none; } .mushroom-search-result:hover,.mushroom-search-result.is-active { background:#f0ecff; } .mushroom-search-result strong,.mushroom-search-result em,.mushroom-search-result small { display:block; } .mushroom-search-result em,.mushroom-search-result small { color:var(--muted); font-size:.8rem; } .search-result-image { display:grid; place-items:center; width:42px; height:42px; overflow:hidden; border-radius:9px; background:#f0ecff; } .search-result-image img { width:100%; height:100%; object-fit:cover; } .search-status { padding:12px; color:var(--muted); }
.mushroom-page { max-width:900px; margin:0 auto; padding:20px; } .back-link { color:inherit; } .mushroom-intro { margin:35px 0 20px; } .mushroom-intro h1 { margin:0; font-size:clamp(2rem,6vw,4rem); } .edibility-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 20px; padding:16px 20px; border:1px solid #ead7a0; border-radius:18px; background:linear-gradient(135deg,#fff8df,#fff2c4); color:#654f1c; } .edibility-banner > div { flex:0 0 auto; } .edibility-label { display:block; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.75; } .edibility-banner strong { display:block; margin-top:2px; font-size:1.35rem; } .edibility-banner p { max-width:590px; margin:0; line-height:1.45; font-size:.9rem; } .edibility-edible { border-color:#b9dcc1; background:linear-gradient(135deg,#effaf1,#e1f3e6); color:#245a34; } .edibility-poisonous, .edibility-deadly_poisonous, .edibility-inedible { border-color:#e9b8b8; background:linear-gradient(135deg,#fff0ef,#ffe4e1); color:#7b2d2d; } .mushroom-main-image { display:block; width:100%; max-height:520px; object-fit:cover; border-radius:25px; } .mushroom-gallery { display:flex; gap:10px; overflow:auto; margin-top:12px; } .mushroom-gallery img { width:100px; height:80px; object-fit:cover; border-radius:12px; } .mushroom-section { margin-top:28px; } .mushroom-section h2 { margin-bottom:8px; } .public-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; } .public-features > div { padding:14px; border-radius:16px; background:#fff; } .public-features h3 { margin:0 0 8px; } .public-features ul { list-style:none; padding:0; margin:0; } .public-features li { display:flex; align-items:center; gap:8px; margin:7px 0; } .public-features li img { width:28px; height:28px; object-fit:contain; }