:root { color-scheme: light; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .7rem 1rem; background: #fff; color: #000; }
.skip-link:focus { top: 1rem; }
.chrome { position: sticky; top: 0; z-index: 20; min-height: 74px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3vw; padding: 0 3vw; backdrop-filter: blur(16px); }
.identity { display: inline-flex; align-items: center; gap: .7rem; }
.identity > b { display: grid; place-items: center; width: 40px; height: 40px; font-size: .76rem; }
.identity strong, .identity small { display: block; }
.identity strong { font-size: .86rem; }
.identity small { margin-top: .2rem; font-family: Consolas, monospace; font-size: .56rem; letter-spacing: .08em; }
.chrome nav { display: flex; justify-content: center; gap: clamp(.8rem, 2vw, 2rem); }
.chrome nav a, .chrome-actions { font-size: .68rem; }
.chrome-actions { display: flex; align-items: center; gap: 1.2rem; }
.chrome-actions a { text-decoration: underline; text-underline-offset: 4px; }
.canvas { width: min(1500px, 100%); margin: 0 auto; padding: 5rem clamp(1.25rem, 4vw, 4.5rem) 6rem; }
.hero { min-height: 490px; position: relative; }
.hero-kicker { display: flex; align-items: center; gap: .8rem; font: 600 .65rem/1 Consolas, monospace; letter-spacing: .12em; }
.hero-kicker i { width: 42px; height: 1px; background: currentColor; }
.hero h1 { max-width: 1050px; margin: 2rem 0 1.3rem; font-size: clamp(3.6rem, 7.5vw, 8.8rem); line-height: .86; letter-spacing: -.075em; text-wrap: balance; }
.hero h1 em { font-style: normal; }
.hero > p { max-width: 52rem; margin: 0; font-size: .88rem; line-height: 1.8; }
.hero-actions { display: flex; gap: .7rem; margin-top: 2rem; }
.hero-actions a, .hero-actions button { min-height: 44px; display: inline-grid; place-items: center; padding: .7rem 1rem; cursor: pointer; }
.hero-actions button.selected { font-weight: 700; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); }
.metrics article { padding: 1.4rem; min-width: 0; }
.metrics span, .metrics small, .metrics strong { display: block; }
.metrics span, .metrics small { font-size: .65rem; }
.metrics strong { margin: .35rem 0; font-size: clamp(1.8rem, 3.2vw, 3.2rem); font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.module { margin-top: 1.5rem; padding: 1.7rem; }
.module-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.module-heading span { font: 600 .6rem/1 Consolas, monospace; letter-spacing: .13em; }
.module-heading h2 { margin: .55rem 0 0; font-size: 1.25rem; letter-spacing: -.035em; }
.module-heading > b, .module-heading > a { font-size: .67rem; }
.workflow ol { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); margin: 2rem 0 0; padding: 0; }
.workflow li { position: relative; display: flex; gap: .65rem; min-width: 0; padding-right: 1rem; }
.workflow li::after { content: ""; position: absolute; top: 14px; left: 35px; right: 6px; height: 1px; background: currentColor; opacity: .2; }
.workflow li:last-child::after { display: none; }
.workflow li > b { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 29px; height: 29px; border: 1px solid currentColor; border-radius: 50%; font: .6rem Consolas, monospace; background: inherit; }
.workflow strong, .workflow small { display: block; }
.workflow strong { font-size: .73rem; }
.workflow small { margin-top: .25rem; font-size: .61rem; opacity: .62; }
.ontology-stage { display: grid; grid-template-columns: 1fr 250px; margin-top: 1.2rem; min-height: 440px; }
.ontology-stage svg { width: 100%; height: 440px; }
.relation { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .42; marker-end: url(#variant-arrow); }
#variant-arrow path { fill: currentColor; opacity: .6; }
.graph-node rect { fill: var(--node-bg); stroke: currentColor; stroke-width: 1; }
.graph-node text { fill: var(--text); font-size: 13px; font-weight: 650; }
.graph-node .node-type { font-size: 9px; font-weight: 400; opacity: .62; }
.graph-node.selected rect { fill: var(--selected-bg); stroke: var(--selected-bg); }
.graph-node.selected text { fill: var(--selected-text); }
.relation-label { fill: currentColor; font-size: 9px; opacity: .7; }
.ontology-stage aside { align-self: center; padding: 1.2rem; }
.ontology-stage aside > span { font: .6rem Consolas, monospace; letter-spacing: .1em; }
.ontology-stage aside h3 { margin: .7rem 0 1.3rem; font-size: 1.4rem; }
.ontology-stage dl { margin: 0; }
.ontology-stage dl div { display: grid; grid-template-columns: 60px 1fr; gap: .7rem; padding: .62rem 0; border-top: 1px solid currentColor; font-size: .64rem; }
.ontology-stage dt { opacity: .58; }
.ontology-stage dd { margin: 0; }
.bottom-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem; }
.task-list { margin-top: 1rem; }
.task-list a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: .7rem; padding: .9rem 0; border-top: 1px solid currentColor; }
.task-list a > b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.task-list strong, .task-list small { display: block; }
.task-list strong { font-size: .7rem; }
.task-list small { margin-top: .2rem; font-size: .6rem; opacity: .62; }
.task-list i { font-style: normal; }
.compute-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .6rem; margin-top: 1.2rem; }
.compute-chain > div { padding: .85rem; }
.compute-chain span, .compute-chain strong, .compute-chain small { display: block; }
.compute-chain span, .compute-chain small { font-size: .58rem; opacity: .62; }
.compute-chain strong { margin: .3rem 0; font-size: .71rem; }
.compute-chain > i { font-style: normal; opacity: .5; }
.compute > p { margin: 1rem 0 0; font-size: .62rem; opacity: .65; }
.healthy { display: inline-flex; align-items: center; }
.page-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 4vw 3rem; font-size: .62rem; }
.page-footer a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 980px) { .chrome nav { display: none; } .chrome { grid-template-columns: 1fr auto; } .hero { min-height: 410px; } .metrics { grid-template-columns: repeat(3, 1fr); } .workflow ol { grid-template-columns: repeat(3, 1fr); gap: 1.4rem 0; } .ontology-stage { grid-template-columns: 1fr; } .ontology-stage aside { display: none; } .bottom-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .identity small, .chrome-actions span { display: none; } .canvas { padding-top: 3rem; } .hero h1 { font-size: clamp(3.2rem, 17vw, 5.2rem); } .metrics { grid-template-columns: 1fr 1fr; } .workflow ol { grid-template-columns: 1fr 1fr; } .ontology-stage { overflow-x: auto; } .ontology-stage svg { min-width: 740px; } .compute-chain { grid-template-columns: 1fr; } .compute-chain > i { justify-self: center; transform: rotate(90deg); } .page-footer { display: block; } .page-footer > * { display: block; margin-top: .5rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }