:root { --vision-mint: #08765c; }
[data-md-color-scheme="default"] { --md-primary-fg-color: #12352e; --md-accent-fg-color: #08765c; }
[data-md-color-scheme="slate"] { --md-primary-fg-color: #10251f; --md-accent-fg-color: #75efc0; --vision-mint: #75efc0; }
.md-typeset .vision-hero { padding: 2.6rem 0 1.6rem; max-width: 47rem; }
.md-typeset .eyebrow { color: var(--vision-mint); font-size: .65rem; letter-spacing: .15em; font-weight: 700; }
.md-typeset .vision-hero h1 { margin: .7rem 0 1.1rem; font-size: clamp(2.8rem, 6vw, 4.7rem); line-height: 1.03; font-weight: 800; letter-spacing: -.055em; color: var(--md-default-fg-color); }
.md-typeset .vision-hero > p { max-width: 37rem; font-size: .95rem; line-height: 1.75; }
.md-typeset .vision-hero > p:first-of-type { font-size: 1.18rem; line-height: 1.55; }
.md-typeset .md-button { border-radius: .35rem; font-size: .78rem; margin: .2rem .35rem .2rem 0; }
.md-typeset .hero-meta { font-size: .68rem; color: var(--md-default-fg-color--light); }
.md-typeset .vision-showcase { margin: 0 0 2.8rem; max-width: 100%; }
.md-typeset .vision-showcase img { display: block; width: 100%; border-radius: .8rem; }
.md-typeset figcaption { font-size: .7rem; max-width: 36rem; font-style: normal; color: var(--md-default-fg-color--light); }
.md-typeset h2 { font-weight: 700; letter-spacing: -.025em; margin-top: 2.8rem; }
.md-typeset .grid.cards > ul > li { border-radius: .6rem; padding: 1.2rem; }
.md-typeset .grid.cards > ul > li > p:first-child { color: var(--vision-mint); }
.md-typeset .vision-demo { padding: 1.3rem; border-radius: .8rem; background: var(--md-code-bg-color); }
.md-typeset .vision-demo img { display: block; max-height: 36rem; width: auto; margin: auto; border-radius: .5rem; }
.md-typeset .vision-demo > p:last-child { font-size: .7rem; }
.md-typeset .vision-cta { margin-top: 2.6rem; padding: 1.6rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .8rem; }
.md-typeset .vision-cta h3 { margin-top: 0; font-size: 1.3rem; }
.md-typeset .animation { margin-top: 1rem; }
@media(prefers-reduced-motion: reduce) { .md-typeset .animation { display: none; } }
@media(max-width: 600px) { .md-typeset .vision-hero { padding-top: 1rem; } .md-typeset .vision-hero h1 { font-size: 2.9rem; } .md-typeset .vision-demo { padding: .65rem; } }

.md-typeset img.guide-preview { display: block; max-height: 38rem; width: auto; margin: 1.2rem auto; border-radius: .6rem; }
[data-md-color-scheme="slate"] { --md-typeset-a-color: #75efc0; }
[data-md-color-scheme="slate"] .md-typeset .md-button { color: #75efc0; border-color: #75efc0; }
[data-md-color-scheme="slate"] .md-typeset .md-button--primary { background: #75efc0; color: #0d1823; }
@media(max-width: 600px) { .md-typeset .vision-hero h1 { font-size: 2.4rem; } }

.md-typeset img.camera-feature-preview { display: block; height: 22rem; width: auto; max-width: 100%; object-fit: contain; margin: 1rem auto; border-radius: .5rem; }

/* Shared outline icons: decorative, with adjacent readable feature labels. */
.vision-icon { display: inline-block; width: 1.3em; height: 1.3em; flex: 0 0 auto; vertical-align: -.25em; margin-right: .3em; color: var(--vision-mint); background-color: currentColor; -webkit-mask: var(--vision-icon-image) center / contain no-repeat; mask: var(--vision-icon-image) center / contain no-repeat; }
.md-typeset .vision-feature-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0 0 2.3rem; }
.md-typeset .vision-feature-nav a { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .6rem; color: var(--md-default-fg-color); font-size: .72rem; font-weight: 600; }
.md-typeset .vision-feature-nav .vision-icon { width: 1.8rem; height: 1.8rem; margin: 0; }
.md-typeset .vision-feature-nav a:hover { border-color: var(--vision-mint); background: var(--md-code-bg-color); }
.md-typeset .vision-feature-nav a:focus-visible { outline: 2px solid var(--vision-mint); outline-offset: 3px; }
.md-typeset td .vision-icon { width: 1.2em; height: 1.2em; }
@media(max-width: 760px) { .md-typeset .vision-feature-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.icon-camera { --vision-icon-image: url("../images/icons/camera.svg"); }
.icon-capture { --vision-icon-image: url("../images/icons/capture.svg"); }
.icon-controls { --vision-icon-image: url("../images/icons/controls.svg"); }
.icon-picker { --vision-icon-image: url("../images/icons/picker.svg"); }
.icon-adjust { --vision-icon-image: url("../images/icons/adjust.svg"); }
.icon-overlay { --vision-icon-image: url("../images/icons/overlay.svg"); }
.icon-ocr { --vision-icon-image: url("../images/icons/ocr.svg"); }
.icon-inference { --vision-icon-image: url("../images/icons/inference.svg"); }
.icon-shared { --vision-icon-image: url("../images/icons/shared.svg"); }
.icon-modules { --vision-icon-image: url("../images/icons/modules.svg"); }
.icon-scan { --vision-icon-image: url("../images/icons/scan.svg"); }
.icon-respond { --vision-icon-image: url("../images/icons/respond.svg"); }
