body{margin:0;font-family:Arial,sans-serif}:root{color:#24372b;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--forest:#245b40;--forest-dark:#19432f;--leaf:#e7f0df;--cream:#f6f8f1;--white:#fff;--muted:#68766b;--border:#dfe7d9;--shadow:0 12px 35px #244b3014;background:#f6f8f1;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cream);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #90b99a}#root{min-height:100vh}.app{background:radial-gradient(ellipse at top right, #cfe3bf4d, transparent 35%), var(--cream);color:#24372b;flex-direction:column;min-height:100vh;display:flex;overflow:hidden}.header{text-align:center;border-bottom:1px solid var(--border);background:#ffffffeb;padding:28px 20px;position:relative}.header h1{color:var(--forest);letter-spacing:-1.2px;margin:0;font-size:clamp(27px,4vw,38px);font-weight:800}.header p{color:var(--muted);margin:9px 0 0;font-size:15px;line-height:1.6}.container{flex:1;width:100%;max-width:1050px;margin:0 auto;padding:48px 24px 60px}.hero{text-align:center}.hero h2{color:var(--forest-dark);letter-spacing:-1.3px;margin:0 0 14px;font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.2}.hero>p{max-width:680px;color:var(--muted);margin:0 auto;font-size:16px;line-height:1.8}.upload-box{background:var(--white);border:1px solid var(--border);width:100%;max-width:620px;box-shadow:var(--shadow);border-radius:24px;margin:32px auto 0;padding:32px}.camera-icon{background:var(--leaf);border-radius:22px;place-items:center;width:76px;height:76px;margin:0 auto 18px;font-size:36px;display:grid}.upload-box h3{color:var(--forest-dark);margin:0 0 10px;font-size:22px;font-weight:750}.upload-box>p{color:var(--muted);margin:0 0 22px;font-size:14px;line-height:1.6}.upload-box input[type=file]{width:100%;max-width:390px;color:var(--muted);border:1px solid var(--border);background:#f8faf6;border-radius:12px;margin:0 auto;padding:12px;font-size:13px;display:block}.preview{border-top:1px solid var(--border);margin-top:28px;padding-top:24px}.preview h3{margin-bottom:18px}.preview img{object-fit:contain;border:1px solid var(--border);background:#f3f5ef;border-radius:16px;width:100%;max-width:460px;max-height:420px;margin:0 auto;display:block}.identify-button{color:#fff;background:var(--forest);text-align:center;cursor:pointer;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;width:auto;max-width:100%;min-height:48px;margin-top:22px;padding:13px 24px;font-size:15px;font-weight:700;line-height:1.4;transition:background .18s,transform .18s,box-shadow .18s;display:inline-flex}.identify-button:hover:not(:disabled){background:var(--forest-dark);transform:translateY(-2px);box-shadow:0 7px 18px #245b402e}.identify-button:active:not(:disabled){transform:translateY(0)}.identify-button:disabled{opacity:.6;cursor:not-allowed}.result{text-align:left;overflow-wrap:anywhere;background:#f3f8ee;border:1px solid #dce9d4;border-radius:16px;margin-top:26px;padding:24px}.result h3{margin:0 0 18px;font-size:21px}.result p{color:#425648;margin:10px 0;font-size:15px;line-height:1.7}.result strong{color:var(--forest-dark)}.mission{background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow);text-align:center;border-radius:22px;margin-top:36px;padding:32px}.mission h2{color:var(--forest-dark);letter-spacing:-.5px;margin:0 0 18px;font-size:clamp(23px,3vw,29px)}.mission>p{color:var(--muted);font-size:15px;line-height:1.8}.mission>p strong{color:var(--forest)}.mission-text{color:#31553c;background:#eef5e8;border:1px solid #dce9d4;border-radius:15px;max-width:650px;margin:18px auto 0;padding:20px;font-size:16px;line-height:1.8}.mission-success{color:#245b40;background:#e8f5e8;border:1px solid #cfe6cf;border-radius:14px;max-width:650px;margin:20px auto 0;padding:18px;font-size:15px;font-weight:700;line-height:1.8}.why-section{text-align:center;background:#eaf1e3;border:1px solid #dce7d4;border-radius:22px;margin-top:36px;padding:30px 24px}.why-section h2{color:var(--forest-dark);margin:0 0 12px;font-size:24px}.why-section p{color:#536858;max-width:650px;margin:0 auto;font-size:15px;line-height:1.8}footer{border-top:1px solid var(--border);text-align:center;background:#fff;margin-top:auto;padding:24px 20px}footer p{color:var(--forest);margin:0;font-size:14px;font-weight:650}@media (width<=768px){.container{padding:34px 18px 44px}.upload-box{border-radius:20px;padding:26px 20px}.mission{padding:26px 20px}.why-section{padding:26px 18px}}@media (width<=480px){.header{padding:24px 14px}.header h1{letter-spacing:-.6px}.header p{font-size:14px}.container{padding:28px 14px 36px}.hero h2{font-size:29px}.hero>p{font-size:14px}.upload-box{margin-top:24px;padding:24px 15px}.upload-box h3{font-size:20px}.upload-box input[type=file]{font-size:12px}.identify-button{width:100%;padding:13px 16px}.result{padding:18px 14px}.mission{padding:24px 16px}.mission-text{padding:16px;font-size:15px}.mission-success{padding:15px}.why-section h2{font-size:22px}footer{padding:20px 14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}