@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap');

:root { --ink: #101010; --muted: #666; --line: #e4e4e4; --card: #f2f2f2; --accent: linear-gradient(90deg, #39b98a, #55b6ce, #f28b45); }
html, body.v2-page { height: auto; min-height: 100%; min-width: 1200px; overflow-x: auto; overflow-y: auto !important; }
.v2-page { min-width: 1200px; margin: 0; color: var(--ink); background: #fff; font-family: Inter, "Noto Sans SC", Arial, sans-serif; }
.site-header { position: relative; width: 100%; height: 78px; margin: 0; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; }
.wordmark { margin-left: 42px; color: #0a0a0a; font-size: 25px; font-weight: 400; letter-spacing: -.025em; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.legacy-link { display: none; }
.mode-switch { position: absolute; left: 48.5%; top: 10px; width: 427px; height: 54px; display: grid; grid-template-columns: 218px 209px; align-items: stretch; padding: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 27px; background: #f2f2f2; box-sizing: border-box; transform: translateX(-50%); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.mode-switch__item { min-width: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 18px; border-radius: 26.5px; color: #777; font-size: 25px; font-weight: 400; text-align: center; text-decoration: none; }
.mode-switch__item.is-active { color: #171717; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 2px 5px rgba(0,0,0,.14); }
.hero { padding: 62px 24px 0; text-align: center; }
.hero h1 { margin: 0; font-size: clamp(44px, 4vw, 58px); font-weight: 500; letter-spacing: -.065em; line-height: 1.12; }
.hero-subtitle { max-width: 1040px; margin: 42px auto 0; font-size: clamp(24px, 2.15vw, 34px); font-weight: 400; letter-spacing: -.055em; line-height: 1.42; }
.outline-button { min-width: 145px; height: 48px; padding: 0 26px; border: 1px solid #222; border-radius: 25px; color: #222; background: #fff; cursor: pointer; font: 500 14px Inter, "Noto Sans SC", sans-serif; transition: background .2s, color .2s; }
.outline-button:hover { color: #fff; background: #111; }
.capability-cards { width: min(100% - 100px, 1380px); margin: 84px auto 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.capability-card { min-height: 720px; padding: 31px 32px 18px; border-radius: 9px; background: var(--card); box-sizing: border-box; display: flex; flex-direction: column; }
.capability-card h3 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -.055em; line-height: 1.25; }
.capability-card p { margin: 12px 0 0; color: #333; font-size: 14px; line-height: 1.65; }
.card-media { position: relative; width: 100%; height: 430px; margin-top: 6px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; }
.image-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.image-button:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.image-button img { width: 100%; height: 100%; object-fit: contain; object-position: center top; transition: transform .2s ease, filter .2s ease; }
.image-button:hover img { transform: scale(1.025); filter: drop-shadow(0 8px 8px rgba(0,0,0,.08)); }
.card-media-stack { height: 500px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; }
.card-media-stack .image-button { position: relative; inset: auto; width: 100%; height: 246px; flex: 0 0 246px; }
.card-media-stack .image-button-back,
.card-media-stack .image-button-front { top: auto; right: auto; bottom: auto; left: auto; }
.card-media-stack .image-button-back img,
.card-media-stack .image-button-front img { object-position: center center; }
.card-grid .capability-card:nth-child(2) .card-media,
.card-grid .capability-card:nth-child(3) .card-media { margin-top: 18px; }
.card-media-wiki { height: 650px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; }
.card-media-wiki .image-button-wiki { width: 108%; height: 300px; flex: 0 0 300px; margin-left: -4%; }
.card-media-wiki .image-button-evidence { width: 100%; height: 330px; flex: 0 0 330px; margin-top: -12px; }
.image-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 42px; background: rgba(0,0,0,.78); cursor: zoom-out; }
.image-lightbox[hidden] { display: none; }
.image-lightbox img { max-width: min(94vw, 1500px); max-height: 90vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 18px 60px rgba(0,0,0,.35); cursor: default; }
.image-lightbox-close { position: absolute; top: 18px; right: 24px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: rgba(0,0,0,.35); cursor: pointer; font-size: 27px; line-height: 1; }
.demo-section { width: calc(100% - 112px); margin: 178px 34px 0 78px; display: grid; grid-template-columns: 295px minmax(0, 1fr); gap: 151px; align-items: stretch; }
.demo-menu { min-height: 100%; display: flex; flex-direction: column; padding-top: 2px; border-top: 1px solid #ddd; }
.demo-tab { position: relative; width: 100%; flex: 1 1 0; display: block; padding: 28px 0 28px 22px; border: 0; border-bottom: 1px solid #ddd; color: #111; background: transparent; cursor: pointer; text-align: left; }
.demo-tab::before { content: ""; position: absolute; top: 28px; bottom: 28px; left: 0; width: 4px; border-radius: 2px; background: #111; opacity: 0; transform: scaleY(.35); transform-origin: center; transition: opacity .2s ease, transform .25s ease; }
.demo-tab.is-active::before { opacity: 1; transform: scaleY(1); }
.demo-tab-title { display: block; font: 500 27px/1.2 "Noto Sans SC", sans-serif; }
.demo-tab-copy { display: block; max-height: 0; overflow: hidden; margin: 0; color: #666; opacity: 0; font: 400 15px/1.75 "Noto Sans SC", sans-serif; transition: max-height .3s ease, margin .3s ease, opacity .2s ease; }
.demo-tab-copy[hidden] { display: none; }
.demo-tab.is-active .demo-tab-title { font-weight: 600; }
.demo-tab.is-active .demo-tab-copy:not(:empty) { max-height: 280px; margin-top: 22px; opacity: 1; }
.demo-tab:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.video-frame { position: relative; width: 100%; overflow: hidden; border: 1px solid #d7d7d7; border-radius: 18px; background: #fff; box-shadow: 0 18px 38px rgba(0,0,0,.1); }
.video-browser-chrome { position: relative; height: 106px; background: #f3f3f3; }
.video-browser-dots { position: absolute; top: 29px; left: 20px; width: 11px; height: 11px; border-radius: 50%; background: #eb6a5c; box-shadow: 19px 0 #f0c35d, 38px 0 #62c45d; }
.video-browser-tab { position: absolute; top: 17px; left: 88px; width: 258px; height: 51px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-radius: 16px 16px 0 0; color: #333; background: #fff; box-sizing: border-box; font: 400 15px/1 "Noto Sans SC", sans-serif; }
.video-browser-tab b { color: #555; font-size: 18px; font-weight: 300; }
.video-browser-new-tab { position: absolute; top: 19px; left: 370px; color: #111; font: 300 34px/1 Arial, sans-serif; }
.video-browser-address { position: absolute; right: 10px; bottom: 12px; left: 10px; height: 32px; overflow: hidden; padding: 0 18px; border-radius: 16px; color: #555; background: #fff; box-sizing: border-box; font: 400 13px/32px Inter, sans-serif; text-align: left; white-space: nowrap; }
.video-viewport { position: relative; width: calc(100% - 20px); aspect-ratio: 1.738 / 1; margin: 0 10px 20px; overflow: hidden; background: #f7f7f7; }
.video-frame video { width: 100%; height: auto; aspect-ratio: 3420 / 2146; display: block; transform: translateY(-8.3%); background: #f7f7f7; }
.video-progress { position: absolute; right: 18px; bottom: 13px; left: 18px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.15); pointer-events: none; }
.video-progress span { display: block; width: 0; height: 100%; background: #111; transition: width .1s linear; }
.video-caption { display: none; }
.contact-section { width: min(100% - 160px, 1160px); margin: 82px auto 0; display: flex; justify-content: flex-end; }