/* Match the reference page: Geist for Latin and numbers, PingFang SC / Microsoft YaHei for Chinese. */
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Shared semantic colors; full CSS values for Basecoat and later shadcn adaptation. */
:root{--background:#fcfcf7;--foreground:#223d35;--card:#fff;--card-foreground:#223d35;--popover:#fff;--popover-foreground:#223d35;--primary:#286344;--primary-foreground:#fff;--secondary:#f0f3eb;--secondary-foreground:#2e4d3b;--muted:#f0f2ed;--muted-foreground:#627065;--accent:#e5eddd;--accent-foreground:#254f35;--destructive:#ae3434;--destructive-foreground:#fff;--border:#dce2d7;--input:#d0d9cd;--ring:#39794d;--radius:.65rem;--chart-1:#496fc4;--chart-2:#a4b6a1;--chart-3:#b78322;--sidebar:#f0f3eb;--sidebar-foreground:#223d35;--sidebar-primary:#286344;--sidebar-primary-foreground:#fff;--sidebar-accent:#e5eddd;--sidebar-accent-foreground:#254f35;--sidebar-border:#dce2d7;--sidebar-ring:#39794d;--blue:#315ba7;--blue-soft:#edf3ff;--unknown:#93600b;--unknown-soft:#fbf2dc;--font-sans:Geist,"PingFang SC","Microsoft YaHei",sans-serif}
@theme inline{--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-border:var(--border)}
html{scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}button,a,input,select{touch-action:manipulation}button,a{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ring);outline-offset:3px}i[data-lucide],svg.lucide{flex-shrink:0;stroke-width:1.7}.skip-link{position:fixed;top:-60px;left:16px;z-index:50;background:var(--primary);color:white;padding:12px}.skip-link:focus{top:10px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--primary);color:var(--primary-foreground);border-radius:11px}.brand-mark svg{width:25px;height:25px}.wordmark{font-size:22px;letter-spacing:-1px;font-weight:750;line-height:1.2}.wordmark>span{font-weight:400}.wordmark small{display:block;font-size:9px;letter-spacing:1.8px;font-weight:400;margin-top:5px;color:var(--muted-foreground)}.nav-current{font-weight:600;color:var(--primary)}.nav-link{display:flex;align-items:center;gap:5px;color:var(--muted-foreground)}nav a:hover,.nav-link:hover{color:var(--primary)}.design-pill{border:1px solid var(--border);border-radius:50px;font-size:11px;padding:7px 10px;display:flex;align-items:center;gap:6px;color:var(--muted-foreground)}.design-pill>span,.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--primary)}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:600;color:var(--primary)}.dropzone{width:min(100%,600px);border:1.5px dashed #91a985;background:#f3f6ed;border-radius:15px;transition:background .18s,border-color .18s;z-index:2}.dropzone.dragging{background:var(--accent);border-color:var(--primary);outline:4px solid var(--accent)}.upload-icon{position:relative;width:59px;height:54px;display:grid;place-items:center;color:var(--primary);background:#e4ebda;border:1px solid #d2dec7;border-radius:15px;transform:rotate(-5deg)}.upload-plus{position:absolute;bottom:-3px;right:-5px;background:var(--primary);color:white;border:3px solid #f3f6ed;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:16px;line-height:16px}.text-link{color:var(--primary);font-weight:600;display:inline-flex;align-items:center;gap:4px;border-bottom:1px solid #97af95}.text-link:hover{color:#173f29;border-color:currentColor}.hero-orbit{position:absolute;pointer-events:none}.orbit-left{left:2%;top:35px;width:155px;color:#91a180;transform:rotate(-12deg)}.orbit-note{display:block;text-align:center;font-family:var(--font-sans);font-size:15px;font-style:normal;letter-spacing:1px;line-height:1.4;margin-top:10px;color:#68785f}.orbit-right{right:1.5%;top:56px;width:170px;transform:rotate(7deg)}.floating-result{border:1px solid #d7dfd0;border-radius:14px;padding:18px;background:#fffef7;box-shadow:0 8px 24px #34492d08;color:#405537}.floating-result b{font-size:38px;font-weight:500;line-height:1}.little-star{position:absolute;top:-45px;right:3px;font-size:43px;font-family:serif;color:#a5b59a}.tiny-dot{position:absolute;width:11px;height:11px;background:#b4c5a2;border-radius:50%;left:25px;bottom:-29px}.microbe{position:absolute;border-radius:50%;background:#e4ebda}.microbe-one{width:15px;height:15px;top:-10px;right:30px}.microbe-two{width:8px;height:8px;bottom:45px;left:-15px}.bench{box-shadow:0 8px 30px #293e2605}.file-icon{background:var(--secondary);color:var(--primary);padding:9px;border-radius:9px}.badge{background:var(--secondary);color:var(--secondary-foreground);border:1px solid var(--border);padding:1px 6px}.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:6px 8px;border-radius:6px;font-size:11px;color:var(--muted-foreground);border:1px solid transparent;white-space:nowrap;transition:background .15s,color .15s}.tool-btn svg{width:14px;height:14px}.tool-btn:hover{background:var(--secondary);color:var(--foreground)}.tool-btn[aria-pressed=true],.tool-btn[aria-pressed=true]:hover{background:var(--accent);color:var(--accent-foreground);border-color:#bacdb0}.image-viewport{height:455px;background-color:#edf0e9;background-image:radial-gradient(#b6c0ad 0.6px,transparent 0.6px);background-size:12px 12px;isolation:isolate}.image-stage{width:430px;height:430px;max-width:none;margin-top:12px;margin-bottom:12px}.image-stage canvas{width:100%;height:100%;display:block}.view-label{background:#fcfcf0d9;border:1px solid #dbe1d1;padding:5px 8px;border-radius:5px;color:#596552;pointer-events:none}.zoom-control{background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 5px #00000005}.zoom-control button{padding:0 9px;min-width:32px;height:32px}.zoom-control svg{width:14px;height:14px}.total-panel{color:var(--primary-foreground);background:var(--primary)}.count-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}.count-row>span{display:flex;align-items:center;gap:8px}.count-row b{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}.legend-dot{width:9px;height:9px;display:inline-block;border-radius:50%;border:1.5px solid}.legend-dot.blue{background:var(--blue);border-color:var(--blue)}.legend-dot.white{background:white;border-color:#73866a}.legend-dot.unknown{background:var(--unknown-soft);border-color:var(--unknown)}.review-note{background:var(--unknown-soft);color:#795014}.step-number{display:grid;place-items:center;width:34px;height:34px;border:1px solid #b6c6ac;border-radius:50%;font-size:11px;color:var(--primary);font-family:monospace}.marker{position:absolute;padding:0;border-radius:50%;border:1.5px solid;min-width:14px;min-height:14px;transform:translate(-50%,-50%);background:transparent;box-shadow:0 0 0 1px #ffffff88;font-size:0}.marker[data-type=blue]{border-color:#2b61ce}.marker[data-type=white]{border-color:#365e32}.marker[data-type=unknown]{border-color:#ab6a00;border-style:dashed}.marker:hover,.marker.selected{box-shadow:0 0 0 3px white,0 0 0 5px var(--primary);z-index:2}.marker:focus-visible{outline:3px solid #142c1b;outline-offset:3px}.marker.selected:after{content:attr(data-id);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:10px;background:var(--foreground);color:white;padding:2px 5px;border-radius:4px}.toast-message{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;max-width:min(560px,90vw);padding:14px 20px;border-radius:10px;background:var(--foreground);color:white;font-size:13px;box-shadow:0 10px 35px #0002}.dialog::backdrop{background:#20332966;backdrop-filter:blur(3px)}.dialog{border:1px solid var(--border);color:var(--foreground);background:var(--card)}.dialog>div{padding:26px}.dialog section{margin:20px 0}.dialog footer{display:flex;justify-content:flex-end}
/* Petri artwork, dotted inspection surface and image-coordinate markers are bespoke to this tool. */
@media(max-width:1050px){.hero-orbit{display:none}.hero h1{font-size:44px}}@media(max-width:640px){.hero{padding-top:32px}.hero h1{font-size:33px}.eyebrow{font-size:9px}.wordmark{font-size:19px}.wordmark small{font-size:8px;letter-spacing:1px}.design-pill{font-size:9px;padding:6px 8px}.image-viewport{height:370px}.image-stage{width:340px;height:340px;margin-top:15px}.tool-btn{min-height:40px;font-size:10px}.image-viewport .view-label{font-size:10px;top:9px;left:9px}.btn{min-height:40px}.zoom-control button{min-height:36px}.dropzone{padding:24px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.motion-toggle{display:inline-flex;align-items:center;gap:5px;color:var(--muted-foreground);font-size:11px;min-height:32px;padding:4px 6px;border-radius:5px}.motion-toggle:hover{background:var(--secondary);color:var(--foreground)}@media(max-width:640px){.motion-toggle{display:none}}

/* Typography follows the reference's medium-weight, tightly set headline without changing the tool's scale. */
.hero h1{font-weight:500;letter-spacing:-.055em;line-height:1.18}
h2,h3{font-weight:500}.wordmark{font-weight:500;letter-spacing:-.04em}.wordmark>span{font-weight:500}
button,input,select,textarea{font-family:inherit}