奥多制药-农科版式

欢迎来到奥多制药-农科主页的版式！我们旨在解决你们的饥饿问题。

Table of Contents

基本样式
自定义 Div 与 Span
通知与旗标
文档
根变量
字体
源代码

要在你的页面中使用此版式，请在页面的任意位置写入以下语句：

[[include :scp-wiki-cn:theme:bedrock]]
[[include :scp-wiki-cn:theme:ordopharm]]

要启用内网模式，需写入以下参数：

{{@@[[include :scp-wiki-cn:theme:ordopharm intranet=a]]@@}} //[http://scpdsandbox.wikidot.com/ordopharm-intranet-test 在此查看实际效果！]//

要启用复古模式，需写入以下参数：

{{@@[[include :scp-wiki-cn:theme:ordopharm legacy=a]]@@}} //[http://scpdsandbox.wikidot.com/ordopharm-legacy-test 在此查看实际效果！]//

基本样式

各级标题

查看各级标题关闭

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

分页卡一般的选项卡如下所示：

概览

治理

公示

乱数假文 lorem ipsum

不过，你也可以添加颜色类来改变分页卡的外观，或是使用一些独特的修饰类（参见分页修饰类）。

概览

治理

公示

乱数假文 lorem ipsum

将 tabview 包裹在 mapview 中，即可获得交互式节点地图，它支持最多 12 个可通过坐标系定位的“分页卡”（参见根变量），并可使用上述修饰类进行自定义。

概览

治理

公示

点击节点后，相关文本便会显示。

引用块

这是一个引用块。
更多文本
上方是一条水平分隔线。
嵌套引用块
继续嵌套。

表格

地区	签约公顷数	产量指数
北美洲	41,200,000	118
南美洲	38,700,000	124
欧洲、中东及非洲	22,900,000	1091

Footnotes

1.不包括在站点监控下处于隔离状态的地区。
2.公开信息。

自定义 Div 与 Span

首屏核心区（Heros）首屏核心区 hero 类似于吸引眼球的标题块，或者醒目的横幅。

作物科学
供养一个需求永无止境的世界。
到 2050 年，地球将承载一百亿人口，而可耕作土地面积仍与今日相同。面对这道数字难题，我们的种子与作物保护产品组合应运而生——也是为了每个季节都不得不反复求解的农业者。

否则，后果自负。

代码- hide block

[[div class="hero navy crest"]]
[[span class="eyebrow"]]作物科学[[/span]]
[[span class="headline"]]供养一个需求永无止境的世界。[[/span]]
[[div class="cta"]]
[[/div]]
[[/div]]

种子系统
一粒种子。九十年的精密计算。

_{阅读我们的完整报告。}

代码- hide block

[[div class="hero leaf"]]
[[span class="eyebrow"]]种子系统[[/span]]
[[span class="headline heavy"]]一粒种子。九十年的精密计算。[[/span]]
[[div class="cta solid"]]
[[/div]]
[[/div]]

横幅横幅 band 使用封闭方块容纳一小块文本，或使用彩色分割线（rule）另起一段文本。

我们的承诺
band mist

band rule azure

band teal bleed

面板组面板组 panes 是一个响应式子元素容器网格；每个 pane 子元素都可以使用自己的颜色类和尺寸，并保持等距排列。为网格添加 duo 或 quad 可改变列密度，为面板添加 filled 则可反转其配色。

作物科学

业务遍及四十一个地区，涵盖种子遗传、作物保护与数字农业。

消费者健康

非处方治疗产品、营养品，以及你早已拥有的零售品牌。

制药

最初的业务。如今仍在为其他一切买单。

投资者关系

pane filled navy，反色以突出重点。

可持续发展

pane wheat，带有彩色顶边的标准样式。

一

panes quad

二

在宽屏上可并排排列四块。

三

乱数假文 lorem ipsum

四

乱数假文 lorem ipsum

醒目引语块pullquote 是一种短而抓眼的引语块；它使用独立的块以进行强调。

我们出售安心，并按公顷计价。
首席执行官，年度报告

行情条行情条 ticker 是一种采用等宽字体、带有投资者关系风格的信息条。将各条目包裹在 up、down 或 flat 类中即可显示对应箭头。

ORDO 214.55 +1.24%
种子期货 88.10 -0.42%
成交量 4.1M

代码- hide block

[[div class="ticker navy"]]
[[span class="up"]]ORDO 214.55 +1.24%[[/span]]
[[span class="down"]]种子期货 88.10 -0.42%[[/span]]
[[span class="flat"]]成交量 4.1M[[/span]]
[[/div]]

为行情条 ticker 添加 scroll 类来实现滚动显示。其速度由 --ticker-speed 控制，单位为秒。

ORDO 214.55 +1.24%
种子期货 88.10 -0.42%
成交量 4.1M
作物科学 41.02 +0.88%

分栏与侧边框split 是一个双栏网格，在窄屏上它会叠放为单栏。使用 weighted 类来使首栏更宽。

左栏

两栏等宽。两个子元素都是普通 div 块，可以在内部放置任何东西。

右栏

宽度小于 17rem 时，会折为单栏。

split weighted 使本栏变为 1.6fr，而侧边栏为 1fr。这跟 pane 搭配起来恰到好处。

侧边栏

与 pane 搭配得恰到好处。

sidebox 是一个浮动面板，默认处于屏幕右侧。文本会将其包裹，除非另有指定。

概览

成立年份	1912
总部	未公开
员工	109,000
科室	32

数角究治以并两家，利车热如工值，铁马否品新。流自青极张消步率低据指治历十，头者号个程活蠢史省专程。低象维天史便人周，细县全前也利术，委雨作折岗。积即又众根前百，置场色没走，感不利私。想满商能位格因转京议二指，下速七等号称科打量位，毛设状杠越回对构精。动山心去满省队后，动支相火解工得，元单更理造作，罐心属强。结九改理干山信那，听且任养见期，才主江权。多果引受美情却山经己区会历身适，自车任求住近定极治租老斗。

耕地备忘

场地	C-14
播种时间	四月
状态	已隔离

为 sidebox 添加 left 类使其在左侧悬浮。除车研同直北传动，没引她育过社，高弦火住技位。万亲把权适农但社金，上元究料于总育先，天织照百只。置个步时参形深形花置适，千是整给这结育几与原，性入物看火呀覆专。十队基中都团究全增，山须决反则权由线取，家豆响山何歼选。设记就查人龙所克新群证习素，只龙基信电越弦阶毛起想边。

数字组（Metrics）数字组 metrics 是一组标题数字组成的响应式网格，在此类网页中十分常见。每个子元素都需要一个数字 figrue、一个标签 label，以及自己的着色类。--stat-min 用于设定触发重排的最小宽度。

使用 counter-element 来实现从一个数字跳动到另一个数字。

尝试一下隐藏

2
本行中数字的数目。

1
本片段中出现的数字的数目。

2 / 4
本片段中已经出现过的数字的数目。

3
序列中的数字值。

第 4
本序列的最后一个数字。

流程图（Pipeline）流程图 pipeline 对项目周期内的各个阶段进行标号，自动进行。可将任意阶段标记为 done（已完成）、now（进行中）或 halted（已中止）。--stat-min 用于设定触发重排的最小宽度。

温室筛选

已收容耕地测试

申报监管资料

开放环境释放

商业化运营

时间线（Updates）updates 是一种纵向时间线。每个子元素都需要一个 date（日期）及其着色类；记号、日期会被着色。

三月 12
最近的阶段。

三月 04
之前的阶段。

二月 27
最久之前的阶段。

资料表factsheet 集中展示一系列彼此相关的细节。

注册名称	奥多制药农科公司 N.V.
股票代码	ORDO
业务板块	作物科学、消费者健康、制药
异常资产	奉命删去

磁贴组磁贴组 tiles 是一组导航卡组成的网格，每张卡片右下角都有一枚箭头。--tile-min 用于设定触发重排的最小宽度。

投资者关系

季度业绩、备案文件及年度报告。

作物科学

育种、作物保护、数字农业。

制药

药物开发流程、授权咨询。

巨幅横幅（Jumbotron）Jumbotron 是一种“全宽”图像横幅，用作页面顶部“引人注目”的视觉印象，其他元素可以叠放在其上，充当标题区域之类的东西。大概吧。该组件复刻自拜耳–孟山都网站中的真实页面元素

查看尺寸选项关闭

调用类：jumbo short

调用类：jumbo

调用类：jumbo ratio

调用类：jumbo tall

调用类：jumbo bleed

调用类：jumbo contain

调用类：jumbo top

调用类：jumbo middle

调用类：jumbo centered

调用类：jumbo tint leaf

调用类：jumbo crest

关闭

通知与旗标

通知通知 notice 是带有背景色的提示框，使用 --notice-word 来更改横幅文本。

产品供应情况因地区而异。请查阅您当地的注册信息。

请勿在静水体 3 公里范围内施用。

您会死。

徽章徽章 badge 是一种行内贴片。使用 hollow 类来添加外边框。状态：已结案审查中已撤回已归档胶条胶条 tape 是一条警告色条纹分割线。使用 thick 类来使其高度增加一倍。

进度条

展开以测试收起以测试

代码- hide block

[[div class="growth-wrap"]]
[[div class="growth-track leaf"]]
[[div class="growth-fill" style="--fill-to: 78%;"]]
[[/div]]
[[/div]]
[[/div]]

加载条

第四季度收益预览第四季度收益预览

数据暂缓披露，等待审核

产品标签

ORDOSAN-9

选择性苗后除草剂。

product_label amber medium

文档

备忘录

memo

compliance_memo

legal_memo

custom_memo teal

memo stamped

着色类精心调配了以下色彩组合以求最佳视觉享受。

查看着色选项关闭

色组 1

frost

mist

line

slate

graphite

navy

azure

sky

teal

sprout

leaf

moss

wheat :c

amber

rust

loam

bloom

hazard

void

色组 2（内网）

frost

mist

line

slate

graphite

navy

azure

sky

teal

sprout

leaf

moss

wheat :c

amber

rust

loam

bloom

hazard

void

色组 3（复古）

frost

mist

line

slate

graphite

navy

azure

sky

teal

sprout

leaf

moss

wheat :c

amber

rust

loam

bloom

hazard

void

色组 4（未使用）

frost

mist

line

slate

graphite

navy

azure

sky

teal

sprout

leaf

moss

wheat :c

amber

rust

loam

bloom

hazard

void

与本征机器一样，你可以通过调用 color# 来借用其他模式中的色调，其中 color 是颜色名称，# 是色组编号。

字体排印工具

eyebrow	位于大标题上方的引题小字，西文部分为大写
headline	字距紧凑的大号展示文字；添加 heavy 可加粗
lede	字号略大的介绍段落
attrib	`pullquote`（醒目引语块）下方的署名行
smallprint	使用等宽字体的法律细则小字
s-title	小节标签，如本页各处所示
mono / ui / display	强制使用指定的字体族
caps	字距宽松的文字，西文部分为大写
inkcolor	使用当前激活颜色为文本着色

修饰类

`tiny` / `medium` / `large` / `full`	限制区块宽度
`left` / `center` / `right`	使区块向左或向右浮动
`align-l` / `align-r` / `align-c`	文本对齐
`bleed`	将 `hero` / `band` / `jumbo` 延伸至浏览范围的边缘
`flattened` / `raised`	移除或添加悬浮层次效果
`round`	将区块边角设为圆角
`opaque`	使用当前激活颜色填充
`gridlines`	叠加浅淡的技术范网格
`stamped`	添加斜向印章

分页修饰类将 tabview 包裹在以下任一 div 修饰类中，即可改变分页的表现方式。

`tabs-flush`	移除分页的边框和背景，仅保留分页卡
`tabs-underline`	在当前分页卡下方显示强调线
`tabs-small`	分页卡的内边距减小

查看实际效果收起示例

tabs-flush

tabs-underline。

可与 tabs-flush 良好搭配。

使用 tabs-small 类，则分页卡会变小。

地图修饰类

`reveal-rise`	分页内文本向上移动并淡入至目标位置
`reveal-wipe`	分页内文本从左向右逐步显现
`reveal-slide`	分页内文本从左侧滑入
`reveal-pulse`	分页内文本闪烁一次后稳定显示
`reveal-none`	不使用显现动画
`panelled`	为文本分页添加底面、边框和强调线
`labelled`	在每个节点下方显示分页卡名称
`map-left`	将地图置于左侧，分页置于右侧
`wide`	以全宽形式将地图堆叠在分页上方

查看实际效果收起示例

区域 A

区域 B

区域 C

reveal-rise 与 panelled、labelled 搭配使用。

map-left

reveal-wipe 从左向右揭示文本。

wide

reveal-slide 从左侧进入。

hazard 颜色类会改变节点的颜色。

reveal-none 会完全禁用显现动画，只留显示/隐藏的快速切换。

根变量

要修改根变量，请像下面这样在文章中添加一个 CSS 模块。

[[module CSS]]
[[/module]]

然后添加 :root 伪类，并在其中写入所需的变量和值。

[[module CSS]]
:root {
--variable-name: value;
}
[[/module]]

最紧要的根变量：

变量	默认值	单位
`--header-title`	"奥多制药"	"文本"
字标的前半部分，使用标题颜色
`--header-subtitle`	"农科"	"文本"
Second half of the wordmark, in the division color
字标的后半部分，使用科室颜色
`--header-tagline`	"解决饥饿。难题各个击破。"	"文本"
字标下方的口号
`--mobile-title` / `--mobile-subtitle`	"ORDOPHARM" / "农科"	"文本"
窄屏上使用的字标，此时口号会被隐藏
`--header-logo`	内置标志	url("地址")
左上角的企业标志
`--header-title-color`	11, 43, 57	RGB 值
字标前半部分的颜色
`--header-subtitle-color`	8, 121, 190	RGB 值
字标后半部分的颜色
`--brand-weight` / `--division-weight`	800 / 400	字重
字标两部分各自的字重
`--surface`	255, 255, 255	RGB 值
面板、备忘录和标签的背景色
`--ink`	45, 55, 61	RGB 值
底面上的默认文本颜色
`--on-dark`	255, 255, 255	RGB 值
填色面板上的文本颜色
`--rule-weight`	.25	rem
面板、横幅和标题上强调线的粗细
`--corner`	0	rem
整个版式的圆角半径。企业版默认为直角
`--band-pad`	2.25	rem
`band`（横幅）内部的纵向内边距
`--pane-min`	15	rem
可触发网格重排的最小面板宽度
`--hero-image`	none	url("地址")
`hero` 的背景图像；可与 `tint` 类搭配使用
`--backdrop`	none	url("地址") 或渐变
页面背景纹理
`--watermark`	内置标志	url("地址")
`crest` 类所使用的水印
`--custom-header`	"内部通讯"	"文本"
`custom_memo` 的标题
`--custom-logo`	内置标志	url("地址")
显示在备忘录标题右侧的标志
`--custom-color`	11, 43, 57	RGB 值
`custom_memo` 的强调色；也可通过颜色类设置
`--stamp-text`	"机密"	"文本"
`stamped` 类所添加斜向印章的文字
`--signal-word`	"注意"	"文本"
`product_label` 上的横幅文本
`--fill-time`	2.5	秒 (s)
进度条加载所需的时间
`--fill-to`	100%	百分比
进度条填充到的位置
`--track-height`	.5	rem
进度条高度
`--scale1` / `--scale2` / `--scale3`	1.2 / 1 / 1.6	秒 (s)
每组动画的持续时间
`--delay1` / `--delay2` / `--delay3`	0 / 1 / 2	秒 (s)
每组动画开始前的延迟
`--loop1` / `--loop2` / `--loop3`	1	次数（可设为 infinite）
每组动画的重复次数
`--link-volume`	none	任意 text-transform 值
链接的大小写转换
`--link-decor`	none	任意 text-decoration 值
链接的下划线样式
`--abstractor`	visible	可设为 `visible`、`hidden`
页面标题的显示状态
`--main-content-width`	70	rem
内容栏宽度
`--node-icon`	带圆环的叶片/火焰符号。	url("地址")
`mapview` 节点使用的图标。
`--symbol-dna`	赋值前不生效。	url("地址")
双色双螺旋标志。可赋给 `--header-logo` 或 `--node-icon`。
`--symbol-dna-mono`	（赋值前不生效）	url("地址")
同一标志的单色版本，供 `--watermark`/`crest` 使用。

完整列表请见源代码。

字体

字体	应用	自定类
Archivo / MiSans	字标、标题、大标题、用户界面	`display`, `ui`
Inter / OPPO Sans	正文，默认字体
IBM Plex Mono / IBM Plex Sans SC	行情条、细则小字、内网模式	`mono`
带字距的大写文本	引题与标签	`caps`

源代码

查看源代码关闭

css

@import url('https://fonts.bunny.net/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Thin.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-ExtraLight.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Light.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Normal.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Regular.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Medium.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Demibold.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Semibold.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Bold.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/misans@main/lib/Normal/MiSans-Heavy.min.css');
@import url('https://cdn.jsdelivr.net/gh/WinterholdPrime/webfont_sans@main/OPPOSans4.0.min.css');
@import url("https://cdn.jsdelivr.net/gh/IBM/plex@master/packages/plex-sans-sc/fonts/split/woff2/hinted/IBMPlexSansSC-Regular.css");
@import url("https://cdn.jsdelivr.net/gh/IBM/plex@master/packages/plex-sans-sc/fonts/split/woff2/hinted/IBMPlexSansSC-Text.css");
@import url("https://cdn.jsdelivr.net/gh/IBM/plex@master/packages/plex-sans-sc/fonts/split/woff2/hinted/IBMPlexSansSC-Medium.css");
@import url("https://cdn.jsdelivr.net/gh/IBM/plex@master/packages/plex-sans-sc/fonts/split/woff2/hinted/IBMPlexSansSC-SemiBold.css");
@import url("https://cdn.jsdelivr.net/gh/IBM/plex@master/packages/plex-sans-sc/fonts/split/woff2/hinted/IBMPlexSansSC-Bold.css");
@font-face {
    font-family: 'Punctuation';
    src: url('https://cdn.jsdelivr.net/gh/WinterholdPrime/CDN@main/NotoSansSC_Punc_VF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'OPPO Sans Punctuation';
    src: url('https://cdn.jsdelivr.net/gh/WinterholdPrime/webfont_sans@main/OPPOSans_Punc_VF.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
}

:root {

/*------- Palette------*/

    --ordo-frost: 255, 255, 255;
    --ordo-mist: 240, 245, 248;
    --ordo-line: 213, 222, 228;
    --ordo-slate: 106, 120, 128;
    --ordo-graphite: 45, 55, 61;
    --ordo-navy: 11, 43, 57;
    --ordo-azure: 8, 121, 190;
    --ordo-sky: 0, 145, 223;
    --ordo-teal: 0, 133, 125;
    --ordo-sprout: 137, 211, 41;
    --ordo-leaf: 102, 181, 18;
    --ordo-moss: 61, 107, 41;
    --ordo-wheat: 217, 180, 74;
    --ordo-amber: 232, 163, 61;
    --ordo-rust: 180, 83, 31;
    --ordo-loam: 74, 55, 40;
    --ordo-bloom: 198, 49, 142;
    --ordo-hazard: 200, 16, 46;
    --ordo-void: 10, 13, 15;

/*------- Set 2------*/

    --ordo2-frost: 226, 232, 236;
    --ordo2-mist: 38, 48, 56;
    --ordo2-line: 52, 66, 76;
    --ordo2-slate: 131, 148, 158;
    --ordo2-graphite: 27, 35, 41;
    --ordo2-navy: 7, 26, 35;
    --ordo2-azure: 61, 165, 226;
    --ordo2-sky: 106, 199, 243;
    --ordo2-teal: 32, 168, 158;
    --ordo2-sprout: 155, 219, 76;
    --ordo2-leaf: 118, 191, 44;
    --ordo2-moss: 79, 130, 56;
    --ordo2-wheat: 226, 194, 104;
    --ordo2-amber: 240, 178, 88;
    --ordo2-rust: 199, 105, 54;
    --ordo2-loam: 97, 76, 58;
    --ordo2-bloom: 218, 88, 168;
    --ordo2-hazard: 226, 60, 84;
    --ordo2-void: 3, 8, 11;

/*------- Set 3  -------*/

    --ordo3-frost: 246, 240, 226;
    --ordo3-mist: 234, 224, 202;
    --ordo3-line: 198, 184, 156;
    --ordo3-slate: 132, 118, 96;
    --ordo3-graphite: 74, 64, 50;
    --ordo3-navy: 46, 38, 28;
    --ordo3-azure: 39, 86, 122;
    --ordo3-sky: 86, 133, 163;
    --ordo3-teal: 52, 120, 108;
    --ordo3-sprout: 158, 176, 78;
    --ordo3-leaf: 122, 143, 56;
    --ordo3-moss: 84, 98, 44;
    --ordo3-wheat: 198, 156, 66;
    --ordo3-amber: 204, 132, 40;
    --ordo3-rust: 162, 74, 34;
    --ordo3-loam: 92, 68, 44;
    --ordo3-bloom: 166, 76, 96;
    --ordo3-hazard: 172, 44, 34;
    --ordo3-void: 26, 22, 16;

/*------- Set 4-------*/

    --ordo4-frost: 214, 214, 196;
    --ordo4-mist: 46, 48, 38;
    --ordo4-line: 74, 76, 58;
    --ordo4-slate: 128, 130, 108;
    --ordo4-graphite: 34, 36, 28;
    --ordo4-navy: 18, 20, 15;
    --ordo4-azure: 108, 128, 96;
    --ordo4-sky: 152, 168, 112;
    --ordo4-teal: 94, 122, 92;
    --ordo4-sprout: 186, 196, 78;
    --ordo4-leaf: 152, 158, 54;
    --ordo4-moss: 96, 100, 40;
    --ordo4-wheat: 202, 176, 72;
    --ordo4-amber: 214, 150, 44;
    --ordo4-rust: 158, 88, 30;
    --ordo4-loam: 68, 58, 36;
    --ordo4-bloom: 146, 96, 108;
    --ordo4-hazard: 190, 52, 34;
    --ordo4-void: 6, 7, 4;

    --jumbo-image: url('http://scpdsandbox.wikidot.com/local--files/theme:ordopharm/banner.png');
    --surface: var(--ordo-frost);
    --surface-alt: var(--ordo-mist);
    --ink: var(--ordo-graphite);
    --ink-soft: var(--ordo-slate);
    --on-dark: var(--ordo-frost);
    --shadow-color: var(--ordo-navy);

    --basalt-primary-color: var(--ordo-frost);
    --basalt-secondary-color: var(--ordo-mist);
    --basalt-tertiary-color: var(--ordo-line);
    --basalt-main-text-color: var(--ordo-void);
    --basalt-overtone: var(--ordo-navy);
    --basalt-undertone: var(--ordo-azure);
    --basalt-bright-element-color: var(--ordo-sky);
    --basalt-dark-element-color: var(--ordo-navy);
    --basalt-alternate-color: var(--ordo-leaf);
    --basalt-positive-color: var(--ordo-leaf);
    --basalt-negative-color: var(--ordo-hazard);
    --basalt-sub-text-color: var(--ordo-slate);
    --basalt-light-text-color: var(--ordo-frost);
    --basalt-UI-dark-palette: var(--ordo-navy);
    --basalt-UI-opacity: .97;
    --basalt-focus-color: var(--ordo-azure);
    --basalt-background-color: var(--ordo-frost);

    --link-color: var(--ordo-azure);
    --link-visited-color: var(--ordo-navy);
    --link-newpage-color: var(--ordo-rust);
    --link-weight: 600;
    --link-volume: none;
    --link-decor: none;

/*------- 字体 -------*/

    --header-font-primary: 'Archivo', 'MiSans';
    --UI-font-primary: 'Archivo', 'MiSans';
    --body-font-primary: 'Punctuation', 'InterVariable', 'OPPO Sans';
    --mono-font-primary: 'IBM Plex Mono', 'IBM Plex Sans SC';
    --display-font: var(--header-font);
    -webkit-locale: 'zh-CN';
    text-spacing-trim: trim-start;

    --tab-accent: var(--ordo-navy);
    --tab-face: var(--surface);
    --tab-pad: .6rem 1.15rem;

    --jumbo-mat: 247, 248, 240;
    --jumbo-height: clamp(10rem, 30vw, 26rem);
    --jumbo-fit: cover;
    --jumbo-focus: center;
    --map-mat: var(--ordo-moss);
    --map-ratio: 2 / 1;
    --map-fit: cover;
    --node-size: 2rem;
    --node-color: var(--ordo-frost);
    --reveal-time: var(--scale2);
    --reveal-delay: 0;  
    --reveal-ease: ease-out;

    --header-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%230879be' stroke-width='5'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38 11-9 11-27 0-38z' fill='%2366b512'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38V13z' fill='%230b2b39'/%3E%3C/svg%3E");
    --header-logo-size: contain;
    --node-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%230879be' stroke-width='2'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38 11-9 11-27 0-38z' fill='%2366b512'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38V13z' fill='%230b2b39'/%3E%3C/svg%3E");
    --symbol-dna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Cg transform='translate(0,700) scale(.1,-.1)' stroke='none'%3E%3Cpath fill='%230879be' d='M2257 5942 c-29 -31 -19 -59 47 -141 107 -132 165 -277 181 -454 5 -63 11 -80 28 -92 51 -36 97 -1 97 73 0 189 -97 429 -231 576 -56 61 -91 72 -122 38z'/%3E%3Cpath fill='%230b2b39' d='M2780 5004 c-213 -38 -357 -109 -516 -253 -183 -168 -341 -233 -564 -233 -193 0 -349 55 -501 178 -84 67 -114 77 -142 46 -31 -35 -21 -66 39 -121 156 -143 387 -231 604 -231 231 0 444 86 631 255 191 173 350 239 574 238 170 -1 336 -55 459 -149 l48 -37 -553 -554 -554 -554 -28 33 c-78 91 -140 248 -158 404 -7 58 -18 106 -27 117 -20 23 -57 22 -83 -4 -20 -20 -21 -29 -16 -105 11 -159 61 -302 151 -439 166 -249 457 -405 756 -405 231 0 444 86 631 255 191 173 350 239 574 238 170 -1 336 -55 459 -149 l48 -37 -553 -554 -554 -554 -28 33 c-79 92 -140 249 -158 404 -12 106 -26 134 -66 134 -39 0 -63 -34 -63 -87 0 -129 54 -312 128 -438 63 -107 210 -254 317 -317 137 -80 309 -128 465 -128 231 0 444 86 631 255 191 173 350 239 574 238 188 -1 347 -58 496 -179 84 -67 114 -77 142 -46 30 33 21 66 -32 115 -102 95 -246 173 -397 213 -97 26 -331 26 -428 0 -162 -43 -288 -113 -422 -235 -183 -168 -341 -233 -564 -233 -175 0 -339 52 -464 148 l-48 37 553 554 554 554 28 -33 c79 -92 140 -249 158 -404 12 -108 26 -134 69 -134 58 0 72 57 49 200 -58 360 -324 650 -685 746 -52 14 -105 18 -214 18 -109 0 -162 -4 -214 -18 -162 -43 -288 -113 -422 -235 -183 -168 -341 -233 -564 -233 -175 0 -339 52 -464 148 l-48 37 553 554 554 554 28 -33 c79 -92 140 -250 158 -404 8 -78 15 -103 31 -116 48 -42 98 -6 98 70 0 131 -57 320 -133 443 -124 202 -318 347 -552 411 -68 19 -286 33 -345 22z'/%3E%3Cpath fill='%230879be' d='M4410 1740 c-54 -54 9 -343 111 -509 68 -111 143 -191 178 -191 33 0 61 27 61 58 0 12 -26 55 -59 95 -109 133 -162 260 -182 433 -7 61 -17 106 -27 117 -20 23 -57 22 -82 -3z'/%3E%3C/g%3E%3C/svg%3E");
     --symbol-dna-mono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Cg transform='translate(0,700) scale(.1,-.1)' stroke='none'%3E%3Cpath fill='%23ffffff' d='M2257 5942 c-29 -31 -19 -59 47 -141 107 -132 165 -277 181 -454 5 -63 11 -80 28 -92 51 -36 97 -1 97 73 0 189 -97 429 -231 576 -56 61 -91 72 -122 38z'/%3E%3Cpath fill='%23ffffff' d='M2780 5004 c-213 -38 -357 -109 -516 -253 -183 -168 -341 -233 -564 -233 -193 0 -349 55 -501 178 -84 67 -114 77 -142 46 -31 -35 -21 -66 39 -121 156 -143 387 -231 604 -231 231 0 444 86 631 255 191 173 350 239 574 238 170 -1 336 -55 459 -149 l48 -37 -553 -554 -554 -554 -28 33 c-78 91 -140 248 -158 404 -7 58 -18 106 -27 117 -20 23 -57 22 -83 -4 -20 -20 -21 -29 -16 -105 11 -159 61 -302 151 -439 166 -249 457 -405 756 -405 231 0 444 86 631 255 191 173 350 239 574 238 170 -1 336 -55 459 -149 l48 -37 -553 -554 -554 -554 -28 33 c-79 92 -140 249 -158 404 -12 106 -26 134 -66 134 -39 0 -63 -34 -63 -87 0 -129 54 -312 128 -438 63 -107 210 -254 317 -317 137 -80 309 -128 465 -128 231 0 444 86 631 255 191 173 350 239 574 238 188 -1 347 -58 496 -179 84 -67 114 -77 142 -46 30 33 21 66 -32 115 -102 95 -246 173 -397 213 -97 26 -331 26 -428 0 -162 -43 -288 -113 -422 -235 -183 -168 -341 -233 -564 -233 -175 0 -339 52 -464 148 l-48 37 553 554 554 554 28 -33 c79 -92 140 -249 158 -404 12 -108 26 -134 69 -134 58 0 72 57 49 200 -58 360 -324 650 -685 746 -52 14 -105 18 -214 18 -109 0 -162 -4 -214 -18 -162 -43 -288 -113 -422 -235 -183 -168 -341 -233 -564 -233 -175 0 -339 52 -464 148 l-48 37 553 554 554 554 28 -33 c79 -92 140 -250 158 -404 8 -78 15 -103 31 -116 48 -42 98 -6 98 70 0 131 -57 320 -133 443 -124 202 -318 347 -552 411 -68 19 -286 33 -345 22z'/%3E%3Cpath fill='%23ffffff' d='M4410 1740 c-54 -54 9 -343 111 -509 68 -111 143 -191 178 -191 33 0 61 27 61 58 0 12 -26 55 -59 95 -109 133 -162 260 -182 433 -7 61 -17 106 -27 117 -20 23 -57 22 -82 -3z'/%3E%3C/g%3E%3C/svg%3E");

    --header-title: "奥多制药";
    --header-subtitle: "农科";
    --header-tagline: "解决饥饿。难题各个击破。";
    --header-title-color: var(--ordo-navy);
    --header-subtitle-color: var(--ordo-azure);
    --header-tagline-color: var(--ordo-slate);
    --mobile-title: "奥多制药";
    --mobile-subtitle: "农科";
    --title-size: 1.5rem;
    --subtitle-size: 1.5rem;
    --tagline-size: .8rem;
    --brand-weight: 800;
    --division-weight: 400;

    --header-background-color: var(--ordo-frost);
    --header-border-color: var(--ordo-line);
    --header-border-width: .0625rem;
    --top-bar-link-color: var(--ordo-navy);
    --top-bar-link-color-hover: var(--ordo-azure);
    --top-bar-link-background-hover: var(--ordo-frost);
    --top-bar-link-background-hover-alt: var(--ordo-mist);
    --top-bar-dropdown-background: var(--ordo-frost);
    --top-bar-dropdown-background-hover: var(--ordo-navy);
    --top-bar-dropdown-link-color: var(--ordo-navy);
    --top-bar-dropdown-link-color-hover: var(--ordo-frost);
    --search-icon-color: var(--ordo-navy);
    --login-status-background-color: var(--ordo-navy);
    --user-icon-button-color: var(--ordo-navy);
    --side-bar-background-color: var(--ordo-frost);
    --side-bar-link-color: var(--ordo-navy);
    --side-bar-heading-background-color: var(--ordo-navy);
    --side-bar-media-background-color: var(--ordo-azure), .1;
    --side-bar-resources-background-color: var(--ordo-leaf), .1;
    --side-bar-button-color: var(--ordo-navy);
    --login-status-text-color-hover: var(--ordo-navy);
    --general-border-color: var(--ordo-line);
    --title-border-color: var(--ordo-azure);
    --hr-color: var(--ordo-line);
    --blockquote-background-color: var(--ordo-mist);
    --blockquote-border-color: var(--ordo-line);
    --blockquote-border-width: .0625rem;
    --code-background-color: var(--ordo-mist);
    --toc-background-color: var(--ordo-mist);
    --tab-background-color: var(--ordo-mist);
    --tab-hover-background-color: var(--ordo-line);
    --tab-selected-background-color: var(--ordo-navy);
    --tab-focus-text-color: var(--ordo-frost);
    --image-caption-background-color: var(--ordo-mist);
    --image-block-border-color: var(--ordo-line);
    --footnote-background-color: var(--ordo-mist);
    --tag-background-color: var(--ordo-mist);
    --bottom-area-background-color: var(--ordo-navy);
    --bottom-area-text-color: var(--ordo-frost);
    --footer-link-color: var(--ordo-mist);
    --footer-divider-color: var(--ordo-azure);
    --license-area-divider-color: var(--ordo-line);
    --scrollbar-track-color: var(--ordo-mist);
    --scrollbar-thumb-color: var(--ordo-azure);
    --selection-background-color: var(--ordo-azure);
    --selection-text-color: var(--ordo-frost);
    --button-background-color: var(--ordo-frost);
    --button-border-color: var(--ordo-navy);
    --button-text-color: var(--ordo-navy);
    --button-hover-background-color: var(--ordo-navy);
    --button-hover-border-color: var(--ordo-navy);
    --button-hover-text-color: var(--ordo-frost);
    --rate-module-background-color: var(--ordo-mist);

    --main-content-width: 70rem;
    --base-font-size: 1rem;
    --header-UI-font-size: calc(var(--true-font-size) *.8);
    --corner: 0rem;
    --rule-weight: .25rem;
    --band-pad: 2.25rem;
    --pane-min: 15rem;
    --abstractor: visible;

    --backdrop: none;
    --backdrop-size: auto;
    --backdrop-position: center;
    --backdrop-attachment: scroll;
    --watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%23ffffff' stroke-width='5'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38 11-9 11-27 0-38z' fill='%23ffffff'/%3E%3C/svg%3E");

    --custom-header: "内部通讯";
    --custom-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%230b2b39' stroke-width='5'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38 11-9 11-27 0-38z' fill='%230b2b39'/%3E%3C/svg%3E");
    --custom-color: var(--ordo-navy);
    --stamp-text: "机密";

    --scale1: 1.2;
    --scale2: 1;
    --scale3: 1.6;
    --delay1: 0;
    --delay2: 1;
    --delay3: 2;
    --loop1: 1;
    --loop2: 1;
    --loop3: 1;
    --fill-time: 2.5;
    --track-height: .5rem;
    --ticker-speed: 32;
}

body {
    background-color: rgb(var(--basalt-background-color));
    background-image: var(--backdrop);
    background-size: var(--backdrop-size);
    background-position: var(--backdrop-position);
    background-attachment: var(--backdrop-attachment);
}

#page-content {
    font-size: 1.0125em;
    line-height: 1.65;
}

#main-content, body.print-body #main-content {
    max-width: calc(100% - var(--main-content-side-margin) *2.5);
}

a:any-link {
    text-transform: var(--link-volume, none);
    text-decoration: var(--link-decor, none);
    font-weight: var(--link-weight, 600);
}

#page-content a:any-link:not(.collapsible-block-link, .btn):is(:hover, :focus) {
    text-decoration: underline;
    text-underline-offset: .2em;
}

hr {
    height: .0625rem;
    background-color: rgb(var(--hr-color));
}

#header h1 a {
    display: grid;
    grid-template-areas: "mark brand" "mark tagline";
    grid-template-columns: max-content max-content;
    grid-template-rows: max-content max-content;
    align-content: center;
    column-gap: .625rem;
    row-gap: .1rem;
    padding-left: .75rem;
    padding-right: 1rem;
    letter-spacing: normal;
    width: max-content;
}

#header h1 a::before {
    grid-area: mark;
    align-self: center;
    height: calc(var(--base-header-height) *.5);
    width: calc(var(--base-header-height) *.5);
    min-width: unset;
}

#header h1 a span {
    grid-area: brand;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    column-gap: .38rem;
    height: auto;
    text-align: left;
    line-height: 1;
}

#header h1 a span::before {
    content: var(--header-title, "奥多制药");
    color: rgb(var(--header-title-color));
    font-family: var(--header-font);
    font-size: var(--title-size);
    font-weight: var(--brand-weight, 800);
    letter-spacing: -.015em;
}

#header h1 a span::after {
    content: var(--header-subtitle, "农科");
    color: rgb(var(--header-subtitle-color));
    font-family: var(--header-font);
    font-size: var(--subtitle-size);
    font-weight: var(--division-weight, 400);
    letter-spacing: -.015em;
}

#header h1 a::after {
    grid-area: tagline;
    content: var(--header-tagline, "");
    color: rgb(var(--header-tagline-color));
    font-family: var(--body-font);
    font-size: var(--tagline-size);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
}

#top-bar div[class*='top-bar'] > ul > li > a {
    text-transform: none;
    font-family: var(--UI-font);
    font-weight: 700;
    letter-spacing: -.005em;
    transition: color .12s ease-out, box-shadow .12s ease-out;
}

#top-bar div[class*='top-bar'] > ul > li > a:is(:hover, :focus),
#top-bar div[class*='top-bar'] > ul > li:is(:hover, :focus-within) > a {
    background-color: transparent;
    color: rgb(var(--ordo-azure));
    box-shadow: inset 0 calc(var(--rule-weight) *-1) 0 rgb(var(--ordo-azure));
}

#top-bar div[class*='top-bar'] ul li ul {
    border: solid .0625rem rgb(var(--general-border-color));
    box-shadow: 0 .5rem 1.25rem rgb(var(--shadow-color), .12);
    box-sizing: border-box;
}

#top-bar div[class*='top-bar'] ul li ul li a {
    font-weight: 500;
}

#side-bar {
    border-right: solid .0625rem rgb(var(--general-border-color));
}

:is(#side-bar, #interwiki) .heading {
    font-family: var(--UI-font);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .7rem;
}

#page-title, .meta-title {
    visibility: var(--abstractor, visible);
    font-family: var(--display-font);
    font-weight: 500;
    font-size: 2.5em;
    line-height: 1.1;
    letter-spacing: -.025em;
    border-bottom: none;
    margin-bottom: .5rem;
    padding-bottom: 0;
}

#page-title::before {
    content: "";
    display: block;
    width: 3.25rem;
    border-top: solid var(--rule-weight) rgb(var(--title-border-color));
    margin-bottom: .75rem;
}

#breadcrumbs, .pseudocrumbs {
    font-family: var(--UI-font);
    font-size: .8em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgb(var(--basalt-sub-text-color));
}

#page-content :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--display-font);
    letter-spacing: -.02em;
    display: flow-root;
}

#page-content :is(h1, h2) {
    font-weight: 500;
    border-bottom: solid .0625rem rgb(var(--general-border-color));
    padding-bottom: .25rem;
}

#page-content :is(h3, h4, h5, h6) {
    font-weight: 700;
    border-bottom: none;
}

#main-content > .page-tags {
    border-top: solid .0625rem rgb(var(--general-border-color));
    padding-top: .5rem;
}

#main-content > .page-tags > span a {
    border-radius: var(--corner);
    font-family: var(--UI-font);
    font-size: .75em;
    font-weight: 600;
}

div.page-rate-widget-box, div.rate-box-with-credit-button {
    border: solid .0625rem rgb(var(--general-border-color));
    border-radius: var(--corner);
}

blockquote, div.blockquote {
    border-width: 0;
    border-left: solid var(--rule-weight) rgb(var(--ordo-azure));
    border-radius: 0;
    padding: .75rem 1.25rem;
}

.image-block, .scp-image-block {
    border: solid .0625rem rgb(var(--general-border-color));
    border-radius: var(--corner);
    padding: .25rem;
}

:is(.image-block, .scp-image-block) :is(.image-caption, .scp-image-caption) {
    font-family: var(--UI-font);
    font-size: .78rem;
    line-height: 1.4;
    text-align: left;
    padding: .5rem;
    color: rgb(var(--basalt-sub-text-color));
}

:is(#page-content table:not(.form), table.wiki-content-table) th {
    background-color: rgb(var(--ordo-navy));
    color: rgb(var(--on-dark));
    font-family: var(--UI-font);
    font-weight: 600;
    text-align: left;
    border-color: rgb(var(--ordo-navy));
}

:is(#page-content table:not(.form), table.wiki-content-table) td {
    border-color: rgb(var(--general-border-color));
}

#page-content div.yui-navset {
    --tab-ink: var(--active-color, var(--tab-accent), black);
    margin: 1.5rem 0;
    position: relative;
}

#page-content div.yui-navset > ul.yui-nav {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 0 0 -.0625rem;
    padding: 0;
    border-top: none !important;
    background: none;
    list-style: none;
}

.yui-navset.yui-navset-top > ul.yui-nav li a em {
    font-family: var(--UI-font);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
}

#page-content div.yui-navset > ul.yui-nav > li {
    padding: 0;
    border: none;
    list-style: none;

}

#page-content div.yui-navset {
    --tab-ink: var(--active-color, var(--tab-accent, var(--ordo-navy)));
}

#page-content div.yui-navset.yui-navset-top>ul.yui-nav li.selected {
background:inherit;
}

#page-content div.yui-navset.yui-navset-top>ul.yui-nav li:not(.selected) {
color: rgb(var(--tab-ink)) ;
}

#page-content div.yui-navset.yui-navset-top>ul.yui-nav li {
background: rgb(var(--tab-ink)) ;
}

#page-content div.yui-navset > ul.yui-nav > li > a:is(:hover, :focus) {
    text-decoration: underline;
    text-underline-offset: .25em;
}

#page-content div.yui-navset > ul.yui-nav > li > a {
    color: rgb(var(--tab-face));
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: var(--tab-pad);
    background-color: rgb(var(--tab-ink)) ;
    background-image: none;
    box-shadow: none;
    border: solid .0625rem rgb(var(--tab-ink));
    border-radius: var(--corner) var(--corner) 0 0;
    text-decoration: none;
    transition: background-color .12s ease-out, color .12s ease-out;
}
#page-content div.yui-navset > ul.yui-nav > li > a em {
    font-family: var(--UI-font);
    font-size: .92rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    border: none;
}

#page-content div.yui-navset.yui-navset-top>ul.yui-nav li.selected a {
color: rgb(var(--tab-ink)) !important;
}

#page-content div.yui-navset > ul.yui-nav > li::before,
#page-content div.yui-navset > ul.yui-nav > li::after,
#page-content div.yui-navset > ul.yui-nav > li > a::before,
#page-content div.yui-navset > ul.yui-nav > li > a::after {
    content: none;
    display: none;
}

#page-content div.yui-navset > div.yui-content {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    padding: clamp(1rem, 3vw, 1.65rem);
    background-color: rgb(var(--surface));
    border: solid .0625rem rgb(var(--tab-ink));
    border-radius: 0 var(--corner) var(--corner) var(--corner);
    border-top: none !important;
}

#page-content div.yui-navset > div.yui-content > div > :first-child { margin-top: 0; }
#page-content div.yui-navset > div.yui-content > div > :last-child { margin-bottom: 0; }

#page-content a.collapsible-block-link {
    font-family: var(--UI-font);
    font-weight: 700;
    text-transform: none;
}

.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { border-bottom: none !important; }

#page-content .tabs-flush div.yui-navset > div.yui-content {
    padding: 1.1rem 0 0;
    background: none;
    border: none;
}

#page-content .tabs-underline div.yui-navset > ul.yui-nav {
    border-bottom-color: rgb(var(--general-border-color));
}

#page-content .tabs-underline div.yui-navset > ul.yui-nav > li > a {
    background: none;
    border: none;
    box-shadow: inset 0 calc(var(--rule-weight) * -1) 0 transparent;

}

#page-content .tabs-underline div.yui-navset > ul.yui-nav > li.selected > a {
    background: none;
    box-shadow: inset 0 calc(var(--rule-weight) * -1) 0 rgb(var(--tab-ink));

}

.tabs-small div.yui-navset > ul.yui-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-small div.yui-navset > ul.yui-nav > li { flex: none; }

@media only screen and (max-width: 40rem) {
    :root { --tab-pad: .5rem .8rem; }
    #page-content div.yui-navset > ul.yui-nav > li > a em { font-size: .82rem; }
}

#page-content .mapview div.yui-navset {
    display: grid;
    grid-template-areas: "map" "panel";
    gap: 1rem;
    margin: 1.5rem 0;
}

#page-content .mapview div.yui-navset > ul.yui-nav {
    grid-area: map;
    display: block;
    position: relative;
    box-sizing: border-box;
    aspect-ratio: var(--map-ratio);
    margin: 0;
    padding: 0;
    background-color: rgb(var(--map-mat));
    background-image: var(--map-image, none);
    background-size: var(--map-fit);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: var(--corner);
    overflow: clip;
    overflow-clip-margin: 2.5rem;
}

#page-content .mapview div.yui-navset > ul.yui-nav > li {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

#page-content .mapview div.yui-navset > ul.yui-nav > li > a {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: var(--node-size);
    height: var(--node-size);
    padding: 0;
    background-image: var(--node-icon) !important;
    border-radius: 50%;
    transition: transform .18s ease-out, background-color .18s ease-out;
    background-color:rgb(var(--surface));
    background-blend-mode: luminosity;
}

#page-content .mapview div.yui-navset > ul.yui-nav > li > a::before {
    content: "";
    position: absolute;
    inset: calc((2.75rem - var(--node-size)) / -2);
    border-radius: 50%;
}

#page-content .mapview div.yui-navset > ul.yui-nav > li > a:hover,
#page-content .mapview div.yui-navset > ul.yui-nav > li > a:focus {
    transform: scale(1.2);

}

#page-content .mapview div.yui-navset > ul.yui-nav > li.selected > a {
    background-color: rgb(var(--active-color, var(--ordo-void))) !important;
    border-color: rgb(var(--node-color));
    transform: scale(1.45);
}

#page-content .mapview div.yui-navset > ul.yui-nav > li > a em {
    position: absolute;
    width: .0625rem;
    height: .0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#page-content .mapview.labelled div.yui-navset > ul.yui-nav > li > a em {
    position: absolute;
    left: 50%;
    top: calc(100% + .45rem);
    width: auto;
    height: auto;
    clip-path: none;
    transform: translateX(-50%);
    font-family: var(--UI-font);
    font-size: .62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(var(--on-dark));
    text-shadow: 0 .0625rem .1875rem rgb(var(--ordo-void), .85);
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(1) { left: var(--x1, 50%);  top: var(--y1, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(2) { left: var(--x2, 50%); top: var(--y2, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(3) { left: var(--x3, 50%); top: var(--y3, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(4) { left: var(--x4, 50%); top: var(--y4, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(5) { left: var(--x5, 50%); top: var(--y5, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(6) { left: var(--x6, 50%); top: var(--y6, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(7) { left: var(--x7, 50%); top: var(--y7, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(8) { left: var(--x8, 50%); top: var(--y8, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(9) { left: var(--x9, 50%); top: var(--y9, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(10) { left: var(--x10, 50%); top: var(--y10, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(11) { left: var(--x11, 50%); top: var(--y11, 50%); }
#page-content .mapview div.yui-navset > ul.yui-nav > li:nth-child(12) { left: var(--x12, 50%); top: var(--y12, 50%); }

#page-content .mapview div.yui-navset > div.yui-content {
    grid-area: panel;
    padding: 1rem 0 0;
    background: none;
    border: none;
    border-top: solid var(--rule-weight) rgb(var(--active-color, var(--ordo-azure)));
}

#page-content .mapview.panelled div.yui-navset > div.yui-content {
    padding: 1.15rem 1.25rem !important;
    background-color: rgb(var(--surface)) !important;
    border: solid .0625rem rgb(var(--general-border-color)) !important;
    border-top: solid var(--rule-weight) rgb(var(--active-color, var(--ordo-azure))) !important;
}

@media only screen and (min-width: 48rem) {
    #page-content .mapview div.yui-navset {
        grid-template-areas: "panel map";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
        gap: clamp(1rem, 3vw, 2.25rem);
        align-items: start;
    }
    #page-content .mapview.map-left div.yui-navset {
        grid-template-areas: "map panel";
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    }
    #page-content .mapview.wide div.yui-navset {
        grid-template-areas: "map" "panel";
        grid-template-columns: 1fr;
    }
}

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--stat-min, 8.5rem), 1fr));
    gap: .65rem;
    margin: 1.5rem 0;
}

#page-content .metrics > div {
    box-sizing: border-box;
    padding: .85rem 1rem;
    background-color: rgb(var(--surface));
    border: solid .0625rem rgb(var(--general-border-color));
    border-left: solid var(--rule-weight) rgb(var(--active-color, var(--ordo-azure)));
    border-radius: var(--corner);
}

#page-content .metrics > div .figure { font-size: clamp(1.5rem, 5vw, 2.25rem); }

.label {
    display: block;
    margin-top: .2rem;
    font-family: var(--UI-font);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(var(--ink-soft));
}

.pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--stage-min, 7.5rem), 1fr));
    gap: .3rem;
    margin: 1.5rem 0;
    counter-reset: stage;
}

#page-content .pipeline > div {
    box-sizing: border-box;
    padding: .65rem .8rem .7rem;
    background-color: rgb(var(--surface-alt));
    border-top: solid var(--rule-weight) rgb(var(--general-border-color));
    border-radius: var(--corner);
    font-family: var(--UI-font);
    font-size: .8rem;
    line-height: 1.25;
}

#page-content .pipeline > div::before {
    counter-increment: stage;
    content: counter(stage, decimal-leading-zero);
    display: block;
    margin-bottom: .2rem;
    font-family: var(--mono-font);
    font-size: .62rem;
    letter-spacing: .1em;
    color: rgb(var(--ink-soft));
}

#page-content .pipeline > div.done {
    border-top-color: rgb(var(--active-color, var(--ordo-leaf)));
    opacity: .72;
}

#page-content .pipeline > div.now {
    background-color: rgb(var(--active-color, var(--ordo-azure)));
    border-top-color: rgb(var(--active-color, var(--ordo-azure)));
    color: rgb(var(--on-dark));
    font-weight: 700;
}
#page-content .pipeline > div.now::before { color: inherit; opacity: .75; }

#page-content .pipeline > div.halted {
    border-top-color: rgb(var(--ordo-hazard));
    color: rgb(var(--ordo-hazard));
}

.updates {
    margin: 1.5rem 0;
    padding-left: 1.15rem;
    border-left: solid .0625rem rgb(var(--general-border-color));
}

#page-content .updates > div {
    position: relative;
    padding-bottom: 1.1rem;
}
#page-content .updates > div:last-child { padding-bottom: 0; }

#page-content .updates > div::before {
    content: "";
    position: absolute;
    left: -1.475rem;
    top: .5rem;
    width: .5rem;
    height: .5rem;
    background-color: rgb(var(--active-color, var(--ordo-hazard)));
    border-radius: 50%;
    box-shadow: 0 0 0 .2rem rgb(var(--basalt-background-color));
}

.date {
    display: block;
    font-family: var(--mono-font);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(var(--active-color, var(--ordo-hazard)));
}

#page-content div.notice {
    box-sizing: border-box;
    margin: 1.25rem 0;
    padding: .8rem 1rem;
    background-color: rgb(var(--active-color, var(--ordo-amber)), .1);
    border-left: solid var(--rule-weight) rgb(var(--active-color, var(--ordo-amber)));
    border-radius: var(--corner);
    font-size: .94em;
}

#page-content div.notice::before {
    content: var(--notice-word, "注意");
    display: block;
    margin-bottom: .25rem;
    font-family: var(--UI-font);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgb(var(--active-color, var(--ordo-amber)));
}

#page-content div.notice > :last-child { margin-bottom: 0; }

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--tile-min, 13rem), 1fr));
    gap: .7rem;
    margin: 1.5rem 0;
}

#page-content .tiles > div {
    position: relative;
    box-sizing: border-box;
    padding: 1rem 1.1rem 2.4rem;
    background-color: rgb(var(--surface));
    border: solid .0625rem rgb(var(--general-border-color));
    border-radius: var(--corner);
    transition: box-shadow .15s ease-out, border-color .15s ease-out;
}

#page-content .tiles > div h1,
#page-content .tiles > div h2,
#page-content .tiles > div h3,
#page-content .tiles > div h4,
#page-content .tiles > div h5,
#page-content .tiles > div h6 {
    margin-top: 0;
    font-size: 1.05em;
    border-bottom: none;
}

#page-content .tiles > div::after {
    content: "\2192";
    position: absolute;
    right: 1.1rem;
    bottom: .8rem;
    color: rgb(var(--active-color, var(--ordo-azure)));
    font-size: 1.1rem;
    transition: transform .15s ease-out;
}

#page-content .tiles > div:hover,
#page-content .tiles > div:focus-within {
    border-color: rgb(var(--active-color, var(--ordo-azure)));
    box-shadow: 0 .4rem 1.25rem rgb(var(--shadow-color), .12);
}

#page-content .tiles > div:hover::after,
#page-content .tiles > div:focus-within::after { transform: translateX(.25rem); }

.ticker.scroll {
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

#page-content .ticker.scroll p {
    display: inline-block;
    margin: 0;
    padding-left: 100%;
    animation: ordo-crawl calc(var(--ticker-speed) * 1s) linear infinite;
}

#page-content .ticker.scroll br { display: none; }
#page-content .ticker.scroll span { margin-right: 1.75rem; }

@keyframes ordo-crawl {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

.tape {
    height: var(--tape-height, .6rem);
    margin: 1.35rem 0;
    background: repeating-linear-gradient(135deg,
        rgb(var(--active-color, var(--ordo-hazard))) 0 .55rem,
        transparent .55rem 1.1rem);
}

.tape.thick { --tape-height: 1.1rem; }

.badge {
    display: inline-block;
    padding: .1rem .5rem;
    background-color: rgb(var(--active-color, var(--ordo-navy)));
    border-radius: var(--corner);
    color: rgb(var(--on-dark));
    font-family: var(--UI-font);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    vertical-align: .1em;
}
.badge.hollow {
    background: none;
    border: solid .0625rem rgb(var(--active-color, var(--ordo-navy)));
    color: rgb(var(--active-color, var(--ordo-navy)));
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.counter-element {
  animation: countUp var(--counterTime, 5s) forwards ease-out;
  counter-reset: score var(--num);
}

.counter-element::before {
  content: counter(score);
}

@keyframes countUp {
  from {
    --num: 0;
  }
  to {
    --num: 75;
  }
}

/*------- Default Corpo Webpage Elements -------*/

.hero, .factsheet, .ticker { --active-color: var(--ordo-navy); }
.band { --active-color: var(--ordo-mist); }
.pane, .pullquote, .sidebox, .growth-track { --active-color: var(--ordo-azure); }
.product_label { --active-color: var(--ordo-leaf); }
.hero, .pane.filled { --cta-ink: var(--on-dark); --cta-on: var(--active-color); }

.hero {
    position: relative;
    box-sizing: border-box;
    margin: 1.5rem auto 2rem;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    background-color: rgb(var(--active-color));
    background-image: var(--hero-image, none);
    background-size: cover;
    background-position: center;
    border-radius: var(--corner);
    color: rgb(var(--on-dark));
    overflow: hidden;
}

#page-content div.hero :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    border-bottom: none;
}

#page-content div.hero a:any-link {
    color: inherit;
}

.hero.bleed {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

.hero.tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(var(--active-color), .78);
    z-index: 0;
}

.hero.tint > * { position: relative; z-index: 1; }

.hero.crest::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -6rem;
    width: 22rem;
    height: 22rem;
    background-image: var(--watermark);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .05;
    pointer-events: none;
}

.eyebrow {
    display: block;
    font-family: var(--UI-font);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgb(var(--active-color, var(--ordo-azure)));
    margin-bottom: .65rem;
}

.hero .eyebrow, .band .eyebrow { color: inherit; }

.headline {
    display: block;
    font-family: var(--display-font);
    font-weight: 400;
    font-size: clamp(1.75rem, 4.25vw, 3rem);
    line-height: 1.06;
    letter-spacing: -.03em;
    margin: 0 0 .85rem;
    text-wrap: balance;
}

.headline.heavy { font-weight: 700; }

.lede {
    display: block;
    font-size: 1.1em;
    line-height: 1.55;
    max-width: 46rem;
    margin-bottom: 1rem;
}

.smallprint {
    display: block;
    font-family: var(--mono-font);
    font-size: .7rem;
    line-height: 1.5;
    color: rgb(var(--basalt-sub-text-color));
    letter-spacing: -.01em;
}

.figure {
    display: block;
    font-family: var(--display-font);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: rgb(var(--active-color, var(--ordo-azure)));
}

.cta a:any-link, a.cta {
    display: inline-block;
    font-family: var(--UI-font);
    font-weight: 700;
    text-decoration: none !important;
    text-transform: none;
    padding: .55rem 1.4rem;
    margin: .25rem .35rem .25rem 0;
    color: rgb(var(--cta-ink, var(--ordo-navy)));
    border: solid .125rem rgb(var(--cta-ink, var(--ordo-navy)));
    border-radius: var(--corner);
    transition: background-color .12s ease-out, color .12s ease-out;
}

.cta a:any-link:is(:hover, :focus), a.cta:is(:hover, :focus) {
    background-color: rgb(var(--cta-ink, var(--ordo-navy)));
    color: rgb(var(--cta-on, var(--surface))) !important;
}

.cta.solid a:any-link {
    background-color: rgb(var(--cta-ink, var(--ordo-navy)));
    border-color: rgb(var(--cta-ink, var(--ordo-navy)));
    color: rgb(var(--cta-on, var(--surface)));
}

.cta.solid a:any-link:is(:hover, :focus) {
    filter: brightness(.88);
}

.band {
    box-sizing: border-box;
    color: rgb(var(--on-dark));
    margin: 1.5rem auto;
    padding: var(--band-pad) clamp(1rem, 3vw, 2.25rem);
    background-color: rgb(var(--active-color));
    border-radius: var(--corner);
}

.band.bleed {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

#page-content div.band:not(.rule) :is(a:any-link, h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

.band.rule {
    color: inherit;
    background-color: transparent;
    border-top: solid var(--rule-weight) rgb(var(--active-color));
    padding-top: 1.25rem;
    padding-bottom: 0;
}

.panes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--pane-min), 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    align-items: stretch;
}

.panes.duo { --pane-min: 20rem; }
.panes.quad { --pane-min: 11rem; }

#page-content div.pane {
    box-sizing: border-box;
    padding: 1.15rem 1.35rem 1.35rem;
    background-color: rgb(var(--surface));
    border: solid .0625rem rgb(var(--general-border-color));
    border-top: solid var(--rule-weight) rgb(var(--active-color));
    border-radius: var(--corner);
    transition: box-shadow .15s ease-out, transform .15s ease-out;
}

#page-content div.pane:is(:hover, :focus-within) {
    box-shadow: 0 .5rem 1.5rem rgb(var(--shadow-color), .13);
    transform: translateY(-.15rem);
}

#page-content div.pane :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    border-bottom: none;
    font-size: 1.15em;
}

#page-content div.pane.filled {
    background-color: rgb(var(--active-color));
    border-color: rgb(var(--active-color));
    color: rgb(var(--on-dark));
}

#page-content div.pane.filled :is(a:any-link, h1, h2, h3, h4, h5, h6) { color: inherit; }

.s-title {
    font-size: 1.15em;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0.4rem 0;
    letter-spacing: 0.09rem;
}
.pullquote {
    box-sizing: border-box;
    margin: 1.75rem auto;
    padding: .25rem 0 .25rem 1.5rem;
    border-left: solid var(--rule-weight) rgb(var(--active-color));
    font-family: var(--display-font);
    font-size: 1.4em;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.02em;
    max-width: 48rem;
}

.attrib {
    display: block;
    margin-top: .75rem;
    font-family: var(--UI-font);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(var(--basalt-sub-text-color));
}

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    margin: 1.5rem 0;
}

.split.weighted { grid-template-columns: 1.6fr 1fr; }

@media only screen and (max-width: 46rem) {
    .split.weighted { grid-template-columns: 1fr; }
}

/*------- Sidebox -------*/

.sidebox {
    float: right;
    clear: right;
    width: 17.5rem;
    max-width: 100%;
    box-sizing: border-box;
    margin: .5rem 0 1rem 1.5rem;
    padding: .875rem 1rem;
    background-color: rgb(var(--surface-alt));
    border-top: solid var(--rule-weight) rgb(var(--active-color));
    border-radius: var(--corner);
    font-size: .875em;
    line-height: 1.5;
}

.sidebox.left { float: left; clear: left; margin: .5rem 1.5rem 1rem 0; }

.sidebox table { width: 100%; margin: 0; }

.sidebox table td {
    border: none;
    border-bottom: solid .0625rem rgb(var(--general-border-color));
    padding: .3em .2em;
    background-color: transparent;
}

@media only screen and (max-width: 36rem) {
    .sidebox, .sidebox.left { float: none; margin-inline: auto; width: 100%; }
}

/*-------Bayer JUMBOTRON Recreation-------*/

#page-content div.jumbo {
    --cta-ink: var(--on-dark);
    --cta-on: var(--jumbo-mat);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: var(--jumbo-align, flex-end);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--jumbo-height);
    margin: 1.5rem auto 2rem;
    padding: clamp(1.1rem, 3.5vw, 3rem);
    background-color: rgb(var(--jumbo-mat));
    background-image: var(--jumbo-image, none);
    background-size: var(--jumbo-fit);
    background-position: var(--jumbo-focus);
    background-repeat: no-repeat;
    border-radius: var(--corner);
    color: rgb(var(--on-dark));
    overflow: hidden;
}

#page-content div.jumbo h1,
#page-content div.jumbo h2,
#page-content div.jumbo h3,
#page-content div.jumbo h4,
#page-content div.jumbo h5,
#page-content div.jumbo h6,
#page-content div.jumbo a:any-link,
#page-content div.jumbo .eyebrow,
#page-content div.jumbo .lede {
    color: inherit;
    border-bottom: none;
}

.jumbo.ratio { min-height: 0; aspect-ratio: var(--jumbo-ratio, 21 / 9); }
.jumbo.short { --jumbo-height: clamp(7rem, 20vw, 15rem); }
.jumbo.tall { --jumbo-height: clamp(15rem, 55vw, 40rem); }

.jumbo.contain {
    --jumbo-fit: contain;
    --cta-ink: var(--ordo-navy);
    --cta-on: var(--jumbo-mat);
    padding-block: clamp(.6rem, 2vw, 1.4rem);
    color: rgb(var(--ink));
}

.jumbo.top { --jumbo-align: flex-start; }
.jumbo.middle { --jumbo-align: center; }
.jumbo.centered { text-align: center; align-items: center; }

.jumbo.tint::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgb(var(--active-color, var(--ordo-navy)), var(--tint-strength, .82)) 0%,
        rgb(var(--active-color, var(--ordo-navy)), 0) 78%);
}
.jumbo.tint > * { position: relative; }

.jumbo.rule { border-bottom: solid var(--rule-weight) rgb(var(--active-color, var(--ordo-leaf))); }

.jumbo.bleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

.jumbo.crest::after {
    content: "";
    position: absolute;
    right: -3rem;
    bottom: -5rem;
    width: 20rem;
    height: 20rem;
    background-image: var(--watermark);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .06;
    pointer-events: none;
}

.factsheet {
    margin: 1.5rem 0;
    border-top: solid var(--rule-weight) rgb(var(--active-color));
}

.factsheet table { width: 100%; margin: 0; }

.factsheet table :is(td, th) {
    border: none;
    border-bottom: solid .0625rem rgb(var(--general-border-color));
    padding: .55em .65em;
    background-color: transparent;
    color: inherit;
}

.factsheet table th {
    font-family: var(--UI-font);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgb(var(--basalt-sub-text-color));
    background-color: transparent;
    width: 34%;
}

.ticker {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
    box-sizing: border-box;
    margin: 1rem 0;
    padding: .55rem .9rem;
    background-color: rgb(var(--active-color));
    color: rgb(var(--on-dark));
    border-radius: var(--corner);
    font-family: var(--mono-font);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .02em;
    overflow: hidden;
}

.ticker .up::before { content: "\25B2\00A0"; color: rgb(var(--ordo-sprout)); }
.ticker .down::before { content: "\25BC\00A0"; color: rgb(var(--ordo-hazard)); }
.ticker .flat::before { content: "\2014\00A0 "; color: rgb(var(--ordo-slate)); }

.growth-wrap { position: relative; margin: .75rem 0; }

.growth-track {
    width: 100%;
    height: var(--track-height);
    box-sizing: border-box;
    overflow: hidden;
    background-color: rgb(var(--active-color), .15);
    border-radius: var(--corner);
}

div.memo, div.custom_memo, div.compliance_memo, div.legal_memo {
    --active-color: var(--custom-color);
    --memo-heading: var(--custom-header, "内部通讯");
    --memo-logo: var(--custom-logo);
    box-sizing: border-box;
    margin: 1.75rem auto;
    padding: 0 0 1.1rem;
    background-color: rgb(var(--on-dark));
    border: solid .0625rem rgb(var(--general-border-color));
    border-top: solid var(--rule-weight) rgb(var(--active-color));
    border-radius: var(--corner);
    box-shadow: 0 .35rem 1.25rem rgb(var(--shadow-color), .08);
}

div.memo::before, div.custom_memo::before, div.compliance_memo::before, div.legal_memo::before {
    content: var(--memo-heading);
    display: flex;
    align-items: center;
    gap: .55rem;
    box-sizing: border-box;
    padding: .7rem 1.1rem;
    margin-bottom: .9rem;
    background-color: rgb(var(--active-color), .08);
    border-bottom: solid .0625rem rgb(var(--general-border-color));
    background-image: var(--memo-logo);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
    font-family: var(--UI-font);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgb(var(--active-color));
}

div.memo > *, div.custom_memo > *, div.compliance_memo > *, div.legal_memo > * {
    margin-left: 1.1rem;
    margin-right: 1.1rem;
}

div.memo {
    --custom-header: "奥多制药农科公司 - 内部备忘录";
    --custom-color: var(--ordo-navy);
}

div.compliance_memo {
    --custom-header: "监管与合规通知";
    --custom-color: var(--ordo-amber);
}

div.legal_memo {
    --custom-header: "总法律顾问办公室 - 特许文件";
    --custom-color: var(--ordo-hazard);
    font-family: var(--mono-font);
    font-size: .82rem;
}

.stamped { position: relative; overflow: hidden; }

.stamped::after {
    content: var(--stamp-text, "机密");
    position: absolute;
    top: 1.75rem;
    right: -3.25rem;
    width: 14rem;
    text-align: center;
    transform: rotate(38deg);
    background-color: rgb(var(--ordo-hazard), .9);
    color: rgb(var(--on-dark));
    font-family: var(--UI-font);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    padding: .2rem 0;
    pointer-events: none;
}

.product_label {
    --signal-word: "注意";
    box-sizing: border-box;
    max-width: 30rem;
    margin: 1.5rem auto;
    padding: 0 0 1rem;
    background-color: rgb(var(--on-dark));
    border: solid .1875rem rgb(var(--active-color));
    border-radius: var(--corner);
    color: rgb(var(--ink));
    text-align: center;
}

.product_label::before {
    content: var(--signal-word);
    display: block;
    padding: .45rem;
    margin-bottom: .9rem;
    background-color: rgb(var(--active-color));
    color: rgb(var(--on-dark));
    font-family: var(--UI-font);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .3em;
}

.product_label > * { margin-left: 1rem; margin-right: 1rem; }

.product_label::after {
    content: "";
    display: block;
    height: .55rem;
    margin: 1rem 1rem -1rem;
    background: repeating-linear-gradient(135deg, rgb(var(--active-color)) 0 .5rem, transparent .5rem 1rem);
}

.redact {
    background-color: rgb(var(--ink));
    color: rgb(var(--ink));
    padding: 0 .15em;
    user-select: none;
}

.redact:is(:hover, :focus) { color: rgb(var(--surface)); }

#page-content div:is(.tiny) { max-width: 16rem; }
#page-content div:is(.medium) { max-width: 28rem; }
#page-content div:is(.large) { max-width: 46rem; }
#page-content div:is(.full) { max-width: 100%; }
div.center { margin: 1.5rem auto; }
div.left { float: left; margin-right: 1.5rem; clear: left; }
div.right { float: right; margin-left: 1.5rem; clear: right; }
div.align-l { text-align: left; }
div.align-r { text-align: right; }
div.align-c { text-align: center; }

.flattened { box-shadow: none; }

.raised { box-shadow: 0 .5rem 1.75rem rgb(var(--shadow-color), .14); }

.round { --corner: .375rem; border-radius: .375rem; }

.opaque { background-color: rgb(var(--active-color)); color: rgb(var(--on-dark)); }

.gridlines {
    background-image:
        linear-gradient(rgb(var(--ordo-line), .55) .0625rem, transparent .0625rem),
        linear-gradient(90deg, rgb(var(--ordo-line), .55) .0625rem, transparent .0625rem);
    background-size: 2rem 2rem;
}

.mono { font-family: var(--mono-font); }
.ui { font-family: var(--UI-font); }
.display { font-family: var(--display-font); letter-spacing: -.02em; }
.caps { text-transform: uppercase; letter-spacing: .14em; }
.tight { line-height: 1.15; }

.inkcolor { color: rgb(var(--active-color, var(--ordo-azure))); font-weight: 600; }

/*---- Animations & Keyframes ----*/

.fade-in1 { opacity: 0; animation: ordo-in calc(1s * var(--scale1)) ease-out calc(1s * var(--delay1)) var(--loop1) forwards; }
.fade-in2 { opacity: 0; animation: ordo-in calc(1s * var(--scale2)) ease-out calc(1s * var(--delay2)) var(--loop2) forwards; }
.fade-in3 { opacity: 0; animation: ordo-in calc(1s * var(--scale3)) ease-out calc(1s * var(--delay3)) var(--loop3) forwards; }
.fade-out1 { opacity: 1; animation: ordo-out calc(1s * var(--scale1)) ease-out calc(1s * var(--delay1)) var(--loop1) forwards; }
.fade-out2 { opacity: 1; animation: ordo-out calc(1s * var(--scale2)) ease-out calc(1s * var(--delay2)) var(--loop2) forwards; }
.fade-out3 { opacity: 1; animation: ordo-out calc(1s * var(--scale3)) ease-out calc(1s * var(--delay3)) var(--loop3) forwards; }

.rise1 { opacity: 0; animation: ordo-rise calc(1s * var(--scale1)) ease-out calc(1s * var(--delay1)) 1 forwards; }
.rise2 { opacity: 0; animation: ordo-rise calc(1s * var(--scale2)) ease-out calc(1s * var(--delay2)) 1 forwards; }
.rise3 { opacity: 0; animation: ordo-rise calc(1s * var(--scale3)) ease-out calc(1s * var(--delay3)) 1 forwards; }

.pulse { animation: ordo-pulse calc(1s * var(--scale1)) ease-in-out infinite alternate; }

.growth-fill {
    height: 100%;
    width: 0%;
    background-color: rgb(var(--active-color, var(--ordo-azure)));
    animation: ordo-fill calc(var(--fill-time) *1s) ease-in-out forwards;
}

#page-content .mapview div.yui-content > div {
    animation: ordo-in calc(var(--reveal-time) * 1s) var(--reveal-ease)
               calc(var(--reveal-delay) * 1s) 1 both;
}

#page-content .mapview.reveal-rise  div.yui-content > div { animation-name: ordo-rise; }
#page-content .mapview.reveal-wipe  div.yui-content > div { animation-name: ordo-wipe; }
#page-content .mapview.reveal-slide div.yui-content > div { animation-name: ordo-slide; }
#page-content .mapview.reveal-none  div.yui-content > div { animation: none; }

#page-content .mapview.reveal-pulse div.yui-content > div { animation-name: ordo-flash; }

@keyframes ordo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ordo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ordo-rise {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ordo-pulse { from { opacity: 1; } to { opacity: .35; } }
@keyframes ordo-fill {
    from { width: 0%; }
    to { width: var(--fill-to, 100%); }
}
@keyframes ordo-wipe {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes ordo-slide {
    from { opacity: 0; transform: translateX(-1.25rem); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes ordo-flash {
    0% { opacity: 0; }
    45% { opacity: 1; }
    70% { opacity: .5; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pulse, .rise1, .rise2, .rise3, .growth-fill {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .growth-fill { width: var(--fill-to, 100%); }
    #page-content div.pane:is(:hover, :focus-within) { transform: none; }

    #page-content .mapview div.yui-content > div,
    .ticker.scroll > span {
        animation: none !important;
        opacity: 1 !important;
    }
    .ticker.scroll > span { transform: none !important; }
    #page-content .mapview div.yui-navset > ul.yui-nav > li > a { transition: none; }

}

@media print {
    .jumbo { background-image: none !important; color: rgb(var(--ink)) !important; }
    .ticker.scroll > span { animation: none; transform: none; }
    #page-content .mapview div.yui-navset > ul.yui-nav { display: none; }
}

.frost { --active-color: var(--ordo-frost); }
.mist { --active-color: var(--ordo-mist); }
.line { --active-color: var(--ordo-line); }
.slate { --active-color: var(--ordo-slate); }
.graphite { --active-color: var(--ordo-graphite); }
.navy { --active-color: var(--ordo-navy); }
.azure { --active-color: var(--ordo-azure); }
.sky { --active-color: var(--ordo-sky); }
.teal { --active-color: var(--ordo-teal); }
.sprout { --active-color: var(--ordo-sprout); }
.leaf { --active-color: var(--ordo-leaf); }
.moss { --active-color: var(--ordo-moss); }
.wheat { --active-color: var(--ordo-wheat); }
.amber { --active-color: var(--ordo-amber); }
.rust { --active-color: var(--ordo-rust); }
.loam { --active-color: var(--ordo-loam); }
.bloom { --active-color: var(--ordo-bloom); }
.hazard { --active-color: var(--ordo-hazard); }
.void { --active-color: var(--ordo-void); }

.frost2 { --active-color: var(--ordo2-frost); }
.mist2 { --active-color: var(--ordo2-mist); }
.line2 { --active-color: var(--ordo2-line); }
.slate2 { --active-color: var(--ordo2-slate); }
.graphite2 { --active-color: var(--ordo2-graphite); }
.navy2 { --active-color: var(--ordo2-navy); }
.azure2 { --active-color: var(--ordo2-azure); }
.sky2 { --active-color: var(--ordo2-sky); }
.teal2 { --active-color: var(--ordo2-teal); }
.sprout2 { --active-color: var(--ordo2-sprout); }
.leaf2 { --active-color: var(--ordo2-leaf); }
.moss2 { --active-color: var(--ordo2-moss); }
.wheat2 { --active-color: var(--ordo2-wheat); }
.amber2 { --active-color: var(--ordo2-amber); }
.rust2 { --active-color: var(--ordo2-rust); }
.loam2 { --active-color: var(--ordo2-loam); }
.bloom2 { --active-color: var(--ordo2-bloom); }
.hazard2 { --active-color: var(--ordo2-hazard); }
.void2 { --active-color: var(--ordo2-void); }

.frost3 { --active-color: var(--ordo3-frost); }
.mist3 { --active-color: var(--ordo3-mist); }
.line3 { --active-color: var(--ordo3-line); }
.slate3 { --active-color: var(--ordo3-slate); }
.graphite3 { --active-color: var(--ordo3-graphite); }
.navy3 { --active-color: var(--ordo3-navy); }
.azure3 { --active-color: var(--ordo3-azure); }
.sky3 { --active-color: var(--ordo3-sky); }
.teal3 { --active-color: var(--ordo3-teal); }
.sprout3 { --active-color: var(--ordo3-sprout); }
.leaf3 { --active-color: var(--ordo3-leaf); }
.moss3 { --active-color: var(--ordo3-moss); }
.wheat3 { --active-color: var(--ordo3-wheat); }
.amber3 { --active-color: var(--ordo3-amber); }
.rust3 { --active-color: var(--ordo3-rust); }
.loam3 { --active-color: var(--ordo3-loam); }
.bloom3 { --active-color: var(--ordo3-bloom); }
.hazard3 { --active-color: var(--ordo3-hazard); }
.void3 { --active-color: var(--ordo3-void); }

.frost4 { --active-color: var(--ordo4-frost); }
.mist4 { --active-color: var(--ordo4-mist); }
.line4 { --active-color: var(--ordo4-line); }
.slate4 { --active-color: var(--ordo4-slate); }
.graphite4 { --active-color: var(--ordo4-graphite); }
.navy4 { --active-color: var(--ordo4-navy); }
.azure4 { --active-color: var(--ordo4-azure); }
.sky4 { --active-color: var(--ordo4-sky); }
.teal4 { --active-color: var(--ordo4-teal); }
.sprout4 { --active-color: var(--ordo4-sprout); }
.leaf4 { --active-color: var(--ordo4-leaf); }
.moss4 { --active-color: var(--ordo4-moss); }
.wheat4 { --active-color: var(--ordo4-wheat); }
.amber4 { --active-color: var(--ordo4-amber); }
.rust4 { --active-color: var(--ordo4-rust); }
.loam4 { --active-color: var(--ordo4-loam); }
.bloom4 { --active-color: var(--ordo4-bloom); }
.hazard4 { --active-color: var(--ordo4-hazard); }
.void4 { --active-color: var(--ordo4-void); }

#page-content div:is(.hero, .band, .pane.filled, .ticker, .opaque):is(.frost, .mist, .line, .sprout, .wheat, .amber, .frost2, .mist3, .frost3, .frost4), div.yui-navset > ul.yui-nav > li > a:is(.frost, .mist, .line, .sprout, .wheat, .amber, .frost2, .mist3, .frost3, .frost4) {
    color: rgb(var(--ink));
}

@media only screen and (max-width: 40rem) {
    :root {
        --title-size: 1.15rem;
        --subtitle-size: 1.15rem;
        --band-pad: 1.35rem;
    }

    #header h1 a span::before { content: var(--mobile-title, "奥多制药"); }
    #header h1 a span::after { content: var(--mobile-subtitle, "农科"); }
    #header h1 a::after { content: ""; display: none; }
    #header h1 a { grid-template-areas: "mark brand"; }
}

@media print {
    .hero, .band { background-color: transparent !important; color: rgb(var(--ink)) !important; }
    .stamped::after { display: none; }
}

css



:root {

    --tab-accent: var(--ordo-azure);
    --map-mat: var(--ordo-void);
    --node-color: var(--ordo-sky);
    --ordo-frost: 226, 232, 236;
    --ordo-mist: 38, 48, 56;
    --ordo-line: 52, 66, 76;
    --ordo-slate: 131, 148, 158;
    --ordo-graphite: 27, 35, 41;
    --ordo-navy: 7, 26, 35;
    --ordo-azure: 61, 165, 226;
    --ordo-sky: 106, 199, 243;
    --ordo-teal: 32, 168, 158;
    --ordo-sprout: 155, 219, 76;
    --ordo-leaf: 118, 191, 44;
    --ordo-moss: 79, 130, 56;
    --ordo-wheat: 226, 194, 104;
    --ordo-amber: 240, 178, 88;
    --ordo-rust: 199, 105, 54;
    --ordo-loam: 97, 76, 58;
    --ordo-bloom: 218, 88, 168;
    --ordo-hazard: 226, 60, 84;
    --ordo-void: 3, 8, 11;

    --surface: 31, 41, 48;
    --surface-alt: 24, 33, 39;
    --ink: 226, 232, 236;
    --ink-soft: var(--ordo-slate);
    --on-dark: 226, 232, 236;
    --shadow-color: 0, 0, 0;

    --basalt-primary-color: 20, 28, 34;
    --basalt-secondary-color: var(--surface-alt);
    --basalt-tertiary-color: var(--ordo-line);
    --basalt-main-text-color: var(--on-dark);
    --basalt-background-color: 20, 28, 34;
    --basalt-sub-text-color: var(--ordo-slate);
    --basalt-light-text-color: var(--ink);
    --basalt-UI-dark-palette: var(--ordo-void);
    --basalt-overtone: var(--ordo-void);
    --basalt-undertone: var(--ordo-azure);
    --basalt-bright-element-color: var(--ordo-sky);
    --basalt-focus-color: var(--ordo-azure);
    --basalt-UI-opacity: .985;

    --link-color: var(--ordo-sky);
    --link-visited-color: var(--ordo-teal);
    --link-newpage-color: var(--ordo-amber);

    --header-background-color: var(--ordo-navy);
    --header-border-color: var(--ordo-azure);
    --header-border-width: .125rem;
    --header-title-color: var(--ink);
    --header-subtitle-color: var(--ordo-sky);
    --header-tagline-color: var(--ordo-slate);
    --header-title: "奥多内网";
    --header-subtitle: "\2571 内部";
    --header-tagline: "仅限授权人员。会话记录中。";
    --mobile-title: "奥多内网";
    --mobile-subtitle: "\2571";

    --header-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%233da5e2' stroke-width='5'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38 11-9 11-27 0-38z' fill='%2376bf2c'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38V13z' fill='%23e2e8ec'/%3E%3C/svg%3E");

    --top-bar-link-color: var(--ink);
    --top-bar-link-color-hover: var(--ordo-sky);
    --top-bar-link-background-hover: transparent;
    --top-bar-link-background-hover-alt: var(--ordo-void);
    --top-bar-dropdown-background: var(--surface);
    --top-bar-dropdown-link-color: var(--ink);
    --top-bar-dropdown-background-hover: var(--ordo-azure);
    --search-icon-color: var(--ordo-sky);
    --user-icon-button-color: var(--ink);
    --side-bar-background-color: var(--surface-alt);
    --side-bar-link-color: var(--ordo-sky);
    --side-bar-button-color: var(--ink);
    --side-bar-heading-background-color: var(--ordo-void);
    --login-status-background-color: var(--ordo-void);

    --general-border-color: var(--ordo-line);
    --title-border-color: var(--ordo-azure);
    --hr-color: var(--ordo-line);
    --blockquote-background-color: var(--surface-alt);
    --code-background-color: var(--ordo-void);
    --toc-background-color: var(--surface-alt);
    --tab-background-color: var(--surface-alt);
    --tab-hover-background-color: var(--ordo-line);
    --tab-selected-background-color: var(--ordo-azure);
    --tab-focus-text-color: var(--ordo-void) !important;
    --image-caption-background-color: var(--surface-alt);
    --footnote-background-color: var(--surface-alt);
    --tag-background-color: var(--surface-alt);
    --bottom-area-background-color: var(--ordo-void);
    --bottom-area-text-color: var(--ordo-slate);
    --footer-link-color: var(--ordo-sky);
    --footer-divider-color: var(--ordo-line);
    --license-area-divider-color: var(--ordo-line);
    --scrollbar-track-color: var(--surface-alt);
    --scrollbar-thumb-color: var(--ordo-azure);
    --selection-background-color: var(--ordo-azure);
    --selection-text-color: var(--ordo-void);
    --button-background-color: var(--surface);
    --button-border-color: var(--ordo-line);
    --button-text-color: var(--ink);
    --button-hover-background-color: var(--ordo-azure);
    --button-hover-border-color: var(--ordo-azure);
    --button-hover-text-color: var(--ordo-void);
    --rate-module-background-color: var(--surface-alt);

    --UI-font-primary: 'IBM Plex Mono', 'IBM Plex Sans SC';
    --brand-weight: 700;
    --division-weight: 500;
    --title-size: 1.35rem;
    --subtitle-size: 1.35rem;
    --custom-color: var(--ordo-azure);
    --custom-header: "奥多内网 - 内部通讯";
    --custom-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%233da5e2' stroke-width='5'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38 11-9 11-27 0-38z' fill='%233da5e2'/%3E%3C/svg%3E");
    --stamp-text: "仅限内部使用";
    --backdrop: linear-gradient(rgb(255, 255, 255, .022) .0625rem, transparent .0625rem), linear-gradient(90deg, rgb(255, 255, 255, .022) .0625rem, transparent .0625rem);
    --backdrop-size: 2.5rem 2.5rem;
    --backdrop-attachment: fixed;
    --watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%23ffffff' stroke-width='5'/%3E%3Cpath d='M32 13c-11 11-11 29 0 38 11-9 11-27 0-38z' fill='%23ffffff'/%3E%3C/svg%3E");
}

#page-content div.pane {
    background-color: rgb(var(--surface));
    border-color: rgb(var(--general-border-color));
}

#page-content div.pane:is(:hover, :focus-within) {
    box-shadow: 0 0 0 .0625rem rgb(var(--active-color), .5);
}

#top-bar div[class*='top-bar'] > ul > li > a {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .1em;
}

#page-title, .meta-title {
    font-family: var(--mono-font);
    font-weight: 500;
    font-size: 1.9em;
    letter-spacing: -.01em;
}

#page-content :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--mono-font);
    font-weight: 500;
}

.eyebrow, .attrib, #breadcrumbs, .pseudocrumbs {
    font-family: var(--mono-font);
}

.sidebox, .factsheet table th { background-color: transparent; }

.sidebox {
    background-color: rgb(var(--surface-alt));
    border: solid .0625rem rgb(var(--general-border-color));
    border-top: solid var(--rule-weight) rgb(var(--active-color));
}

div.memo, div.custom_memo, div.compliance_memo, div.legal_memo {
    background-color: rgb(var(--surface));
    box-shadow: none;
}

.product_label { background-color: rgb(var(--surface)); }

div.memo {
    --custom-header: "奥多制药农科公司 - 内部备忘录";
    --custom-color: var(--ordo-sky);
}

.redact { background-color: rgb(var(--ordo-void)); color: rgb(var(--ordo-void)); }
.redact:is(:hover, :focus) { color: rgb(var(--ordo-hazard)); }

.gridlines {
    background-image:
        linear-gradient(rgb(var(--ordo-line), .5) .0625rem, transparent .0625rem),
        linear-gradient(90deg, rgb(var(--ordo-line), .5) .0625rem, transparent .0625rem);
}

@media only screen and (max-width: 40rem) {
    :root { --title-size: 1.05rem; --subtitle-size: 1.05rem; }
}

css



@import url('https://fonts.bunny.net/css2?family=Abhaya-Libre:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');

:root {

      --tab-accent: var(--ordo-rust);
      --jumbo-mat: var(--ordo-mist);
      --map-mat: var(--ordo-loam);
      --node-color: var(--ordo-frost);

    --ordo-frost: 246, 240, 226;
    --ordo-mist: 234, 224, 202;
    --ordo-line: 198, 184, 156;
    --ordo-slate: 132, 118, 96;
    --ordo-graphite: 74, 64, 50;
    --ordo-navy: 46, 38, 28;
    --ordo-azure: 39, 86, 122;
    --ordo-sky: 86, 133, 163;
    --ordo-teal: 52, 120, 108;
    --ordo-sprout: 158, 176, 78;
    --ordo-leaf: 122, 143, 56;
    --ordo-moss: 84, 98, 44;
    --ordo-wheat: 198, 156, 66;
    --ordo-amber: 204, 132, 40;
    --ordo-rust: 162, 74, 34;
    --ordo-loam: 92, 68, 44;
    --ordo-bloom: 166, 76, 96;
    --ordo-hazard: 172, 44, 34;
    --ordo-void: 26, 22, 16;

    --surface: 250, 246, 234;
    --surface-alt: var(--ordo-mist);
    --ink: var(--ordo-graphite);
    --ink-soft: var(--ordo-slate);
    --on-dark: 250, 246, 234;
    --shadow-color: var(--ordo-loam);

    --basalt-primary-color: var(--surface);
    --basalt-secondary-color: var(--ordo-mist);
    --basalt-tertiary-color: var(--ordo-line);
    --basalt-main-text-color: var(--ordo-void);
    --basalt-background-color: var(--ordo-frost);
    --basalt-sub-text-color: var(--ordo-slate);
    --basalt-light-text-color: var(--surface);
    --basalt-UI-dark-palette: var(--ordo-navy);
    --basalt-overtone: var(--ordo-navy);
    --basalt-undertone: var(--ordo-rust);
    --basalt-bright-element-color: var(--ordo-rust);
    --basalt-alternate-color: var(--ordo-moss);
    --basalt-focus-color: var(--ordo-rust);

    --link-color: var(--ordo-rust);
    --link-visited-color: var(--ordo-loam);
    --link-newpage-color: var(--ordo-hazard);
    --link-decor: underline;
    --link-weight: 600;

    --header-background-color: var(--surface);
    --header-border-color: var(--ordo-loam);
    --header-border-width: .1875rem;
    --header-title-color: var(--ordo-navy);
    --header-subtitle-color: var(--ordo-rust);
    --header-tagline-color: var(--ordo-slate);
    --header-title: "奥多制药";
    --header-subtitle: "实验室";
    --header-tagline: "舍密之业 - 创立于 1912 年";
    --mobile-title: "奥多制药";
    --mobile-subtitle: "实验室";

    --header-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%232e261c' stroke-width='4'/%3E%3Ccircle cx='32' cy='32' r='22' fill='none' stroke='%232e261c' stroke-width='1.5'/%3E%3Cpath d='M32 15c-9 10-9 26 0 34 9-8 9-24 0-34z' fill='%23a24a22'/%3E%3C/svg%3E");

    --top-bar-link-color: var(--ordo-navy);
    --top-bar-link-color-hover: var(--surface);
    --top-bar-link-background-hover: var(--ordo-rust);
    --top-bar-link-background-hover-alt: var(--ordo-loam);
    --top-bar-dropdown-background: var(--surface);
    --top-bar-dropdown-link-color: var(--ordo-navy);
    --top-bar-dropdown-background-hover: var(--ordo-rust);
    --search-icon-color: var(--ordo-loam);
    --side-bar-background-color: var(--surface);
    --side-bar-link-color: var(--ordo-rust);
    --side-bar-heading-background-color: var(--ordo-loam);
    --login-status-background-color: var(--ordo-loam);

    --general-border-color: var(--ordo-line);
    --title-border-color: var(--ordo-rust);
    --hr-color: var(--ordo-line);
    --blockquote-background-color: var(--ordo-mist);
    --code-background-color: var(--ordo-mist);
    --tab-selected-background-color: var(--ordo-loam);
    --tab-focus-text-color: var(--surface);
    --image-caption-background-color: var(--ordo-mist);
    --bottom-area-background-color: var(--ordo-mist);
    --bottom-area-text-color: var(--ordo-graphite);
    --footer-link-color: var(--ordo-loam);
    --scrollbar-track-color: var(--ordo-mist);
    --scrollbar-thumb-color: var(--ordo-loam);
    --selection-background-color: var(--ordo-rust);
    --selection-text-color: var(--surface);
    --button-border-color: var(--ordo-loam);
    --button-text-color: var(--ordo-navy);
    --button-background-color: var(--surface);
    --button-hover-background-color: var(--ordo-loam);
    --button-hover-border-color: var(--ordo-loam);
    --button-hover-text-color: var(--surface);
    --rate-module-background-color: var(--ordo-mist);

    --header-font-primary: 'Bitter';
    --UI-font-primary: 'Bitter';
    --body-font-primary: 'Bitter';
    --brand-weight: 700;
    --division-weight: 400;
    --rule-weight: .1875rem;
    --corner: 0rem;
    --custom-color: var(--ordo-loam);
    --custom-header: "奥多制药实验室 - 跨办公室备忘录";
    --custom-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%235c442c' stroke-width='4'/%3E%3Cpath d='M32 15c-9 10-9 26 0 34 9-8 9-24 0-34z' fill='%235c442c'/%3E%3C/svg%3E");
    --stamp-text: "公司自留";
    --backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%235c442c' fill-opacity='0.045'%3E%3Ccircle cx='12' cy='18' r='1.4'/%3E%3Ccircle cx='58' cy='42' r='1.1'/%3E%3Ccircle cx='94' cy='14' r='1.6'/%3E%3Ccircle cx='30' cy='78' r='1.2'/%3E%3Ccircle cx='76' cy='96' r='1.5'/%3E%3Ccircle cx='108' cy='68' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    --backdrop-size: 120px 120px;
    --watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M32 15c-9 10-9 26 0 34 9-8 9-24 0-34z' fill='%23ffffff'/%3E%3C/svg%3E");
}

#page-title, .meta-title {
    font-family: var(--header-font);
    font-weight: 700;
    font-size: 2.1em;
    letter-spacing: -.005em;
}

#page-content :is(h1, h2, h3, h4, h5, h6) { letter-spacing: 0; }

.headline {
    font-weight: 400;
    letter-spacing: -.01em;
    font-size: clamp(1.6rem, 3.6vw, 2.5rem);
}

.eyebrow { letter-spacing: .28em; }

#top-bar div[class*='top-bar'] > ul > li > a {
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .12em;
    font-weight: 600;
}

#top-bar div[class*='top-bar'] > ul > li > a:is(:hover, :focus),
#top-bar div[class*='top-bar'] > ul > li:is(:hover, :focus-within) > a {
    background-color: rgb(var(--ordo-rust));
    color: rgb(var(--surface));
    box-shadow: none;
}

#page-content div.pane {
    background-color: rgb(var(--surface));
    border: solid .0625rem rgb(var(--ordo-line));
    border-top: solid var(--rule-weight) rgb(var(--active-color));
}

#page-content div.pane:is(:hover, :focus-within) {
    transform: none;
    box-shadow: .25rem .25rem 0 rgb(var(--ordo-line));
}

.hero, .band { box-shadow: inset 0 0 0 .1875rem rgb(var(--surface), .12); }

.pullquote { font-style: italic; font-weight: 400; }

.ticker { font-family: var(--mono-font); letter-spacing: .06em; }

div.memo, div.custom_memo, div.compliance_memo, div.legal_memo {
    background-color: rgb(var(--surface));
    box-shadow: .3rem .3rem 0 rgb(var(--ordo-line), .7);
}

@media only screen and (max-width: 40rem) {
    :root { --title-size: 1.15rem; --subtitle-size: 1.15rem; }
}

[[embed]]
<iframe src="//interwiki.scpwikicn.com/styleFrame.html?priority=3
&type=sidebar
&override={$override}&theme=https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aordopharm/1
&css={$css}" style="display: none"></iframe>
[[/embed]]

[[ift{$intranet}gs -版式]][[iftags]]

[[embed]]
<iframe src="//interwiki.scpwikicn.com/styleFrame.html?priority=4
&type=sidebar
&override={$override}&theme=https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aordopharm/2
&css={$css}" style="display: none"></iframe>
[[/embed]]

[[/iftags]]
[[/ift{$intranet}gs]]

[[ift{$legacy}gs -版式]][[iftags]]

[[embed]]
<iframe src="//interwiki.scpwikicn.com/styleFrame.html?priority=5
&type=sidebar
&override={$override}&theme=https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aordopharm/3
&css={$css}" style="display: none"></iframe>
[[/embed]]

[[/iftags]]
[[/ift{$legacy}gs]]

版式

页面版本：⁨0⁩, 最后编辑于: ⁨2026/8/30 21:00:11⁩ (⁨⁨16⁩ 日前⁩), 现时评分: 14

历史附件 + 选项

SCP基金会中文分部

基本样式

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

自定义 Div 与 Span

作物科学

消费者健康

制药

投资者关系

可持续发展

一

二

三

四

左栏

右栏

侧边栏

投资者关系

作物科学

制药

通知与旗标

文档

根变量

字体

源代码