@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url("fonts/serif-normal-200-900-latin.2a24bad466.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url("fonts/serif-normal-200-900-latin-ext.c9299a7160.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Source Serif 4";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url("fonts/serif-italic-200-900-latin.011e0ca2bd.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url("fonts/serif-italic-200-900-latin-ext.d802c9d189.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url("fonts/sans-normal-100-700-latin.1995c471cc.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url("fonts/sans-normal-100-700-latin-ext.5f65d29028.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 100 700;
font-display: swap;
src: url("fonts/sans-italic-100-700-latin.302a6e6772.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 100 700;
font-display: swap;
src: url("fonts/sans-italic-100-700-latin-ext.7d60e381a4.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/mono-normal-400-latin.c36f509c0a.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/mono-normal-400-latin-ext.f1050dc531.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/mono-normal-500-latin.a76f53ca66.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/mono-normal-500-latin-ext.77f03e26f9.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/mono-normal-600-latin.ad4580d8cb.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/mono-normal-600-latin-ext.1b6b18fd0f.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/mono-italic-400-latin.2665f5fbbb.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Ksana Serif SC";
font-style: normal;
font-weight: 500 900;
font-display: swap;
src: url("fonts/ksana-serif-sc.5e5330a450.woff2") format("woff2");
unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
font-family: "Ksana CJK Punct";
font-style: normal;
font-weight: 100 900;
src: local("PingFang SC"), local("PingFangSC-Regular"), local("Hiragino Sans GB"), local("Microsoft YaHei"), local("Noto Sans CJK SC"), local("Noto Sans SC"), local("Source Han Sans SC");
unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026, U+00B7;
}
:root {
--bg: #f1f4f3;
--bg-2: #e9eeec;
--surface: #fbfcfc;
--surface-2: #e8edeb;
--hover: #e4eae8;
--line: #d4dcda;
--line-soft: #e0e6e4;
--line-strong: #b2bebb;
--ink: #16201f;
--text: #27322f;
--ink-2: #47534f;
--ink-3: #5f6b67;
--ink-4: #a1aca8;
--on-ink: #f6f8f7;
--qing: #12708c;
--qing-soft: #d9ebf0;
--qing-line: #8cc0cf;
--mo: #16201f;
--mo-soft: #dde3e1;
--zhu: #c03a22;
--zhu-soft: #f8e9e4;
--on-zhu: #fff8f5;
--warn: #93600a;
--warn-soft: #f7eedb;
--danger: #a3277a;
--danger-soft: #f5e0ec;
--link: #0f6680;
--focus: #12708c;
--selection: #cfe5ec;
--code-bg: #162021;
--code-fg: #d9e2df;
--code-head: #1d292a;
--code-line: #2a3839;
--code-muted: #8e9d98;
--shadow: 0 1px 0 rgb(22 32 31 / 0.04), 0 6px 24px -12px rgb(22 32 31 / 0.18);
--shadow-pop: 0 18px 50px -18px rgb(22 32 31 / 0.4);
--scrim: rgb(13 19 20 / 0.42);
--grain-opacity: 0.05;
--grain-blend: multiply;
--font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
--font-label: var(--font-mono);
--gutter: 16px;
--wrap: 1200px;
--wrap-text: 46rem;
--topbar-h: 60px;
--r-seal: 2px;
--r-ctl: 6px;
--r-panel: 10px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0d1314;
--bg-2: #0a1011;
--surface: #121a1b;
--surface-2: #0a1011;
--hover: #1a2526;
--line: #233133;
--line-soft: #1a2527;
--line-strong: #375055;
--ink: #e2ebe8;
--text: #c9d5d1;
--ink-2: #a9b6b2;
--ink-3: #7d8b87;
--ink-4: #4d5b59;
--on-ink: #0d1314;
--qing: #58bed7;
--qing-soft: #11313b;
--qing-line: #2b6d7e;
--mo: #9aa9a5;
--mo-soft: #263133;
--zhu: #ee6a4d;
--zhu-soft: #3b1b14;
--on-zhu: #1a0b07;
--warn: #e1a640;
--warn-soft: #34270d;
--danger: #e27bc8;
--danger-soft: #37162e;
--link: #6cc8de;
--focus: #58bed7;
--selection: #1d4a57;
--code-bg: #091011;
--code-fg: #d9e2df;
--code-head: #0f1819;
--code-line: #1c2a2c;
--code-muted: #7d8b87;
--shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 8px 28px -12px rgb(0 0 0 / 0.6);
--shadow-pop: 0 18px 50px -16px rgb(0 0 0 / 0.75);
--scrim: rgb(0 0 0 / 0.55);
--grain-opacity: 0.07;
--grain-blend: screen;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0d1314;
--bg-2: #0a1011;
--surface: #121a1b;
--surface-2: #0a1011;
--hover: #1a2526;
--line: #233133;
--line-soft: #1a2527;
--line-strong: #375055;
--ink: #e2ebe8;
--text: #c9d5d1;
--ink-2: #a9b6b2;
--ink-3: #7d8b87;
--ink-4: #4d5b59;
--on-ink: #0d1314;
--qing: #58bed7;
--qing-soft: #11313b;
--qing-line: #2b6d7e;
--mo: #9aa9a5;
--mo-soft: #263133;
--zhu: #ee6a4d;
--zhu-soft: #3b1b14;
--on-zhu: #1a0b07;
--warn: #e1a640;
--warn-soft: #34270d;
--danger: #e27bc8;
--danger-soft: #37162e;
--link: #6cc8de;
--focus: #58bed7;
--selection: #1d4a57;
--code-bg: #091011;
--code-fg: #d9e2df;
--code-head: #0f1819;
--code-line: #1c2a2c;
--code-muted: #7d8b87;
--shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 8px 28px -12px rgb(0 0 0 / 0.6);
--shadow-pop: 0 18px 50px -16px rgb(0 0 0 / 0.75);
--scrim: rgb(0 0 0 / 0.55);
--grain-opacity: 0.07;
--grain-blend: screen;
color-scheme: dark;
}
@media (min-width: 720px) {
:root {
--gutter: 28px;
}
}
@media (min-width: 1100px) {
:root {
--gutter: 40px;
}
}
:lang(zh) {
--font-label: var(--font-sans);
--font-serif: "Ksana Serif SC", "Source Serif 4", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
--font-sans: "Ksana CJK Punct", "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 20px);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.65;
font-feature-settings: "kern", "liga";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
:lang(zh) body,
body:lang(zh) {
line-height: 1.8;
}
:lang(zh) em,
:lang(zh) i:not([lang]) {
font-style: normal;
}
:lang(zh) .prose em {
font-weight: 600;
color: var(--ink);
}
::selection {
background: var(--selection);
color: var(--ink);
}
img,
svg {
max-width: 100%;
}
h1,
h2,
h3,
h4 {
color: var(--ink);
text-wrap: balance;
margin: 0;
}
p,
ul,
ol,
dl,
figure {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
}
code,
kbd,
pre,
samp {
font-family: var(--font-mono);
}
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: 3px;
}
[hidden] {
display: none !important;
}
.wrap {
width: 100%;
max-width: calc(var(--wrap) + 2 * var(--gutter));
margin-inline: auto;
padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip {
position: absolute;
left: 12px;
top: -60px;
z-index: 100;
padding: 10px 14px;
border-radius: var(--r-ctl);
background: var(--ink);
color: var(--on-ink);
font-weight: 600;
}
.skip:focus {
top: calc(12px + env(safe-area-inset-top, 0px));
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.icon {
width: 20px;
height: 20px;
flex: none;
}
.icon-sm {
width: 16px;
height: 16px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 22px;
border-radius: var(--r-ctl);
font-weight: 550;
font-size: 1rem;
letter-spacing: 0.005em;
line-height: 1.2;
border: 1px solid transparent;
transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
-webkit-tap-highlight-color: transparent;
}
.btn .icon {
transition: transform 0.25s var(--ease);
}
.btn--ink {
background: var(--ink);
color: var(--on-ink);
}
.btn--line {
border-color: var(--line-strong);
color: var(--ink);
background: color-mix(in srgb, var(--surface) 60%, transparent);
}
@media (hover: hover) {
.btn--ink:hover {
background: color-mix(in srgb, var(--ink) 86%, var(--qing));
}
.btn--ink:hover .icon {
transform: translateX(3px);
}
.btn--line:hover {
border-color: var(--ink);
background: var(--surface);
}
}
.btn:active {
transform: translateY(1px);
}
.icon-btn {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--r-ctl);
background: transparent;
color: var(--ink-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.icon-btn:hover {
background: var(--hover);
color: var(--ink);
}
}
.label,
.eyebrow,
.sec-label {
font-family: var(--font-label);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
:lang(zh) .label,
:lang(zh) .eyebrow,
:lang(zh) .sec-label {
letter-spacing: 0.08em;
}
.grain {
display: none;
}
@media (min-width: 720px) {
.grain {
display: block;
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: var(--grain-opacity);
mix-blend-mode: var(--grain-blend);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
}
.ext::after {
content: "↗";
display: inline-block;
margin-left: 0.15em;
font-size: 0.8em;
color: var(--ink-3);
text-decoration: none;
}
.topbar {
position: sticky;
top: 0;
z-index: 50;
padding-top: env(safe-area-inset-top, 0px);
background: color-mix(in srgb, var(--bg) 82%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.topbar-inner {
display: flex;
align-items: center;
gap: 8px;
height: var(--topbar-h);
max-width: calc(var(--wrap) + 2 * var(--gutter));
margin-inline: auto;
padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
padding-right: max(calc(var(--gutter) - 8px), env(safe-area-inset-right, 0px));
}
.page-docs .topbar-inner {
max-width: none;
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink);
font-family: var(--font-serif);
font-size: 1.32rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1;
margin-right: auto;
}
.wordmark .enso-mark {
flex: none;
}
.topnav {
display: none;
align-items: center;
gap: 4px;
margin-right: 8px;
}
.topnav-link {
padding: 8px 12px;
border-radius: var(--r-ctl);
color: var(--ink-2);
font-size: 0.95rem;
font-weight: 500;
}
.topnav-link[aria-current] {
color: var(--ink);
}
@media (hover: hover) {
.topnav-link:hover {
color: var(--ink);
background: var(--hover);
}
}
.topbar-tools {
display: flex;
align-items: center;
gap: 2px;
}
.search-open {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 10px;
border: 0;
border-radius: var(--r-ctl);
background: transparent;
color: var(--ink-2);
cursor: pointer;
}
.search-open-label,
.search-open kbd {
display: none;
}
.search-open kbd {
font-size: 0.75rem;
padding: 1px 6px;
border: 1px solid var(--line-strong);
border-radius: 4px;
color: var(--ink-3);
background: var(--surface);
}
@media (hover: hover) {
.search-open:hover {
background: var(--hover);
color: var(--ink);
}
}
.lang-switch {
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 10px;
border-radius: var(--r-ctl);
color: var(--ink-2);
font-family: var(--font-label);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.04em;
}
@media (hover: hover) {
.lang-switch:hover {
background: var(--hover);
color: var(--ink);
}
}
@media (max-width: 359px) {
.topbar-discord {
display: none;
}
}
.theme-toggle .icon-sun {
display: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .icon-sun {
display: block;
}
:root:not([data-theme="light"]) .theme-toggle .icon-moon {
display: none;
}
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
display: block;
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
display: none;
}
@media (min-width: 860px) {
.topnav {
display: flex;
}
.menu-toggle {
display: none;
}
.search-open {
border: 1px solid var(--line);
background: var(--surface);
padding: 0 8px 0 12px;
min-width: 200px;
margin-right: 6px;
}
.search-open-label {
display: inline;
margin-right: auto;
font-size: 0.92rem;
color: var(--ink-3);
}
.search-open kbd {
display: inline;
}
}
@media (min-width: 860px) and (max-width: 1040px) {
.search-open {
min-width: 0;
}
.search-open-label {
display: none;
}
}
.drawer {
position: fixed;
inset: 0;
z-index: 80;
}
.drawer-scrim,
.search-scrim {
position: absolute;
inset: 0;
background: var(--scrim);
animation: fade-in 0.2s var(--ease);
}
.drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(360px, 88vw);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg);
border-left: 1px solid var(--line);
box-shadow: var(--shadow-pop);
padding: calc(env(safe-area-inset-top, 0px) + 10px) max(18px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) 18px;
animation: drawer-in 0.32s var(--ease);
}
.drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
margin-bottom: 8px;
}
.drawer-head .wordmark {
font-size: 1.2rem;
}
.drawer-links {
display: grid;
gap: 2px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.drawer-links a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px;
border-radius: var(--r-ctl);
color: var(--ink);
font-weight: 500;
font-size: 1.05rem;
}
.drawer-links a .icon {
color: var(--ink-3);
}
@keyframes drawer-in {
from {
transform: translateX(24px);
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.drawer-panel,
.drawer-scrim,
.search-scrim,
.search-panel {
animation: none;
}
}
.site-foot {
position: relative;
border-top: 1px solid var(--line);
background: var(--bg-2);
color: var(--ink-2);
font-size: 0.95rem;
}
.foot-inner {
display: grid;
gap: 40px;
max-width: calc(var(--wrap) + 2 * var(--gutter));
margin-inline: auto;
padding: 56px max(var(--gutter), env(safe-area-inset-right, 0px)) 40px max(var(--gutter), env(safe-area-inset-left, 0px));
}
.foot-brand {
display: grid;
gap: 14px;
align-content: start;
max-width: 30rem;
}
.foot-brand .wordmark {
margin-right: 0;
justify-self: start;
}
.foot-tagline {
font-family: var(--font-serif);
font-size: 1.15rem;
color: var(--ink);
line-height: 1.35;
}
.foot-note {
font-size: 0.88rem;
line-height: 1.6;
color: var(--ink-3);
}
.foot-note i {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.04em;
color: var(--ink-2);
}
.foot-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 24px;
}
.foot-title {
margin-bottom: 10px;
font-family: var(--font-label);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.foot-col ul {
list-style: none;
padding: 0;
display: grid;
gap: 6px;
}
.foot-col a {
color: var(--ink-2);
}
@media (hover: hover) {
.foot-col a:hover {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--qing-line);
text-underline-offset: 3px;
}
}
.foot-base {
border-top: 1px solid var(--line);
max-width: calc(var(--wrap) + 2 * var(--gutter));
margin-inline: auto;
padding: 18px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
font-size: 0.82rem;
color: var(--ink-3);
}
@media (min-width: 860px) {
.foot-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
gap: 56px;
}
.foot-cols {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.page-docs .foot-inner,
.page-docs .foot-base {
max-width: none;
}
.docs {
display: block;
max-width: 1480px;
margin-inline: auto;
}
.sidebar {
display: none;
}
.docs-main {
min-width: 0;
padding: 28px max(var(--gutter), env(safe-area-inset-right, 0px)) 72px max(var(--gutter), env(safe-area-inset-left, 0px));
}
.doc {
min-width: 0;
max-width: var(--wrap-text);
margin-inline: auto;
}
.toc {
display: none;
}
@media (min-width: 1000px) {
.docs {
display: grid;
grid-template-columns: 268px minmax(0, 1fr);
}
.sidebar {
display: block;
position: sticky;
top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
align-self: start;
height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px));
height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px));
overflow-y: auto;
overscroll-behavior: contain;
padding: 28px 18px 48px max(var(--gutter), env(safe-area-inset-left, 0px));
border-right: 1px solid var(--line);
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.docs-main {
padding: 44px 48px 96px;
}
}
@media (min-width: 1280px) {
.docs-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 56px;
padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.doc {
margin-inline: 0 auto;
justify-self: center;
width: 100%;
}
.toc {
display: block;
position: sticky;
top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 44px);
align-self: start;
max-height: calc(100vh - var(--topbar-h) - 88px);
overflow-y: auto;
font-size: 0.86rem;
}
.toc-inline {
display: none;
}
}
.nav-section + .nav-section {
margin-top: 22px;
}
.nav-title {
margin: 0 0 6px 10px;
font-family: var(--font-label);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.nav-section ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1px;
}
.nav-section a {
position: relative;
display: block;
padding: 6px 10px;
border-radius: var(--r-ctl);
color: var(--ink-2);
font-size: 0.94rem;
line-height: 1.4;
}
@media (hover: hover) {
.nav-section a:hover {
color: var(--ink);
background: var(--hover);
}
}
.nav-section a[aria-current="page"] {
color: var(--ink);
font-weight: 600;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
}
.nav-section a[aria-current="page"]::before {
content: "";
position: absolute;
left: -1px;
top: 9px;
bottom: 9px;
width: 3px;
border-radius: 2px;
background: var(--qing);
}
.drawer-docs .nav-section a {
font-size: 1rem;
padding: 8px 10px;
}
.doc-head {
padding-bottom: 26px;
margin-bottom: 30px;
border-bottom: 1px solid var(--line);
}
.doc-head .eyebrow {
margin-bottom: 12px;
color: var(--qing);
}
.doc-head h1 {
font-family: var(--font-serif);
font-size: clamp(2.1rem, 1.5rem + 2.2vw, 2.9rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.018em;
}
.doc-head .lede {
margin-top: 14px;
font-size: 1.16rem;
line-height: 1.6;
color: var(--ink-2);
max-width: 40rem;
}
:lang(zh) .doc-head h1 {
letter-spacing: 0;
line-height: 1.25;
}
.toc-inline {
margin: -10px 0 30px;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
}
.toc-inline summary {
cursor: pointer;
list-style: none;
padding: 12px 16px;
font-weight: 600;
font-size: 0.92rem;
color: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
}
.toc-inline summary::-webkit-details-marker {
display: none;
}
.toc-inline summary::after {
content: "";
width: 8px;
height: 8px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.2s var(--ease);
}
.toc-inline[open] summary::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.toc-inline ul {
padding: 0 16px 14px;
}
.toc ul,
.toc-inline ul {
list-style: none;
margin: 0;
display: grid;
gap: 2px;
}
.toc ul {
padding: 0;
border-left: 1px solid var(--line);
}
.toc-title {
margin-bottom: 10px;
font-family: var(--font-label);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.toc a,
.toc-inline a {
display: block;
padding: 4px 0 4px 14px;
margin-left: -1px;
border-left: 1px solid transparent;
color: var(--ink-3);
line-height: 1.4;
}
.toc-inline a {
margin-left: 0;
padding-left: 0;
border: 0;
color: var(--ink-2);
font-size: 0.94rem;
}
.toc .toc-l3 a {
padding-left: 26px;
}
.toc-inline .toc-l3 a {
padding-left: 14px;
}
.toc a.is-current {
color: var(--ink);
border-left-color: var(--qing);
}
@media (hover: hover) {
.toc a:hover,
.toc-inline a:hover {
color: var(--ink);
}
}
.toc code,
.toc-inline code {
font-size: 0.92em;
}
.prose {
font-size: 1.03rem;
line-height: 1.72;
color: var(--text);
overflow-wrap: break-word;
}
:lang(zh) .prose {
line-height: 1.85;
}
.prose > * + * {
margin-top: 1.05em;
}
.prose h2 {
margin-top: 2.4em;
font-family: var(--font-serif);
font-size: 1.72rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.012em;
position: relative;
}
.prose h3 {
margin-top: 1.9em;
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 600;
line-height: 1.3;
position: relative;
}
.prose h4 {
margin-top: 1.6em;
font-size: 1rem;
font-weight: 650;
}
:lang(zh) .prose h2,
:lang(zh) .prose h3 {
letter-spacing: 0;
}
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
margin-top: 0.6em;
}
.prose > :first-child {
margin-top: 0;
}
.h-anchor {
display: inline-block;
width: 1em;
margin-left: 0.25em;
color: var(--ink-4);
opacity: 0;
transition: opacity 0.15s;
font-family: var(--font-sans);
font-weight: 400;
}
.h-anchor::before {
content: "#";
}
h2:hover .h-anchor,
h3:hover .h-anchor,
.h-anchor:focus-visible {
opacity: 1;
}
.prose a {
color: var(--link);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--link) 38%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
@media (hover: hover) {
.prose a:hover {
text-decoration-color: var(--link);
text-decoration-thickness: 2px;
}
}
.prose strong {
color: var(--ink);
font-weight: 620;
}
.prose ul,
.prose ol {
padding-left: 1.4em;
}
.prose li + li {
margin-top: 0.4em;
}
.prose li > ul,
.prose li > ol {
margin-top: 0.4em;
}
.prose ul > li::marker {
color: var(--ink-4);
}
.prose ol > li::marker {
color: var(--ink-3);
font-family: var(--font-mono);
font-size: 0.9em;
}
.prose blockquote {
margin-inline: 0;
padding-left: 1.1em;
border-left: 2px solid var(--line-strong);
color: var(--ink-2);
}
.prose hr {
border: 0;
border-top: 1px solid var(--line);
margin-block: 2.4em;
}
.prose :not(pre) > code {
font-size: 0.86em;
padding: 0.12em 0.36em;
border-radius: 4px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
color: var(--ink);
overflow-wrap: anywhere;
}
.prose code.nb {
white-space: nowrap;
}
.prose a code {
color: inherit;
}
.prose dl {
display: grid;
gap: 0.2em 0;
}
.prose dt {
font-weight: 620;
color: var(--ink);
}
.prose dd {
margin: 0 0 0.8em;
}
.table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
-webkit-overflow-scrolling: touch;
}
.prose table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
line-height: 1.5;
}
.prose th,
.prose td {
padding: 10px 14px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--line-soft);
}
.prose th {
font-weight: 600;
color: var(--ink);
background: var(--bg-2);
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.prose tr:last-child td {
border-bottom: 0;
}
.prose td code {
white-space: nowrap;
overflow-wrap: normal;
}
.callout {
padding: 14px 18px 16px;
border-radius: var(--r-panel);
border: 1px solid var(--line);
border-left: 3px solid var(--ink-3);
background: var(--surface);
font-size: 0.97rem;
}
.callout > * + * {
margin-top: 0.6em;
}
.callout-title {
font-weight: 650;
color: var(--ink);
font-size: 0.9rem;
letter-spacing: 0.01em;
}
.callout--tip {
border-left-color: var(--qing);
background: color-mix(in srgb, var(--qing-soft) 45%, var(--surface));
}
.callout--tip .callout-title {
color: var(--qing);
}
.callout--warning {
border-left-color: var(--warn);
background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface));
}
.callout--warning .callout-title {
color: var(--warn);
}
.callout--danger {
border-left-color: var(--danger);
background: color-mix(in srgb, var(--danger-soft) 50%, var(--surface));
}
.callout--danger .callout-title {
color: var(--danger);
}
.details {
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
}
.details summary {
cursor: pointer;
padding: 12px 16px;
font-weight: 600;
color: var(--ink);
}
.details-body {
padding: 0 16px 16px;
}
.details-body > * + * {
margin-top: 0.8em;
}
.cards ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 12px;
}
.cards li {
margin: 0 !important;
position: relative;
padding: 16px 18px 18px;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
color: var(--ink-2);
font-size: 0.95rem;
line-height: 1.55;
transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.cards li a {
display: block;
margin-bottom: 4px;
font-family: var(--font-serif);
font-size: 1.12rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
}
.cards li a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
@media (hover: hover) {
.cards li:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow);
transform: translateY(-1px);
}
}
.steps {
counter-reset: step;
border-left: 1px solid var(--line);
margin-left: 14px;
padding-left: 30px;
}
.steps > h3 {
counter-increment: step;
margin-top: 1.8em;
}
.steps > h3:first-child {
margin-top: 0;
}
.steps > h3::before {
content: counter(step);
position: absolute;
left: -46px;
top: 0.05em;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line-strong);
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 500;
color: var(--ink);
}
.steps > * + * {
margin-top: 0.9em;
}
.fig {
margin-block: 1.6em !important;
}
.fig figcaption {
margin-top: 10px;
font-size: 0.88rem;
color: var(--ink-3);
line-height: 1.55;
}
.fig figcaption > * + * {
margin-top: 0.4em;
}
.pager {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.pager-link {
display: grid;
gap: 4px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
min-width: 0;
}
.pager-next {
text-align: right;
justify-items: end;
}
.pager-dir {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-label);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.pager-title {
font-family: var(--font-serif);
font-weight: 600;
font-size: 1.05rem;
color: var(--ink);
overflow-wrap: anywhere;
}
@media (hover: hover) {
.pager-link:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow);
}
}
.code {
position: relative;
min-width: 0;
border-radius: var(--r-panel);
background: var(--code-bg);
color: var(--code-fg);
border: 1px solid var(--code-line);
overflow: hidden;
font-size: 0.86rem;
}
.code-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 38px;
padding: 0 6px 0 16px;
background: var(--code-head);
border-bottom: 1px solid var(--code-line);
}
.code-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--code-muted);
}
.code-label:empty::before {
content: "\00a0";
}
.copy {
flex: none;
height: 28px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 5px;
background: transparent;
color: var(--code-muted);
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.copy.is-copied {
color: #a9d3b2;
}
@media (hover: hover) {
.copy:hover {
color: var(--code-fg);
border-color: var(--code-line);
}
}
.code pre {
margin: 0;
padding: 14px 18px 16px;
overflow-x: auto;
line-height: 1.68;
tab-size: 4;
scrollbar-width: thin;
scrollbar-color: var(--code-line) transparent;
-webkit-overflow-scrolling: touch;
}
.code pre:focus-visible {
outline: 2px solid var(--qing);
outline-offset: -2px;
}
.code code {
font-family: var(--font-mono);
font-size: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
white-space: pre;
}
.code--output {
background: color-mix(in srgb, var(--code-bg) 80%, var(--bg));
border-style: dashed;
}
.code--output .code-head {
background: transparent;
}
.code--output pre .line span {
color: var(--code-muted) !important;
}
.code-group {
position: relative;
min-width: 0;
border-radius: var(--r-panel);
background: var(--code-bg);
border: 1px solid var(--code-line);
overflow: hidden;
}
.code-tabs {
display: flex;
gap: 2px;
min-height: 40px;
padding: 0 84px 0 6px;
background: var(--code-head);
border-bottom: 1px solid var(--code-line);
overflow-x: auto;
scrollbar-width: none;
}
.code-tabs::-webkit-scrollbar {
display: none;
}
.code-tabs button {
position: relative;
flex: none;
padding: 0 12px;
border: 0;
background: transparent;
color: var(--code-muted);
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.code-tabs button[aria-selected="true"] {
color: var(--code-fg);
}
.code-tabs button[aria-selected="true"]::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: -1px;
height: 2px;
border-radius: 2px 2px 0 0;
background: #8cc5d6;
}
@media (hover: hover) {
.code-tabs button:hover {
color: var(--code-fg);
}
}
.code-tabs button:focus-visible {
outline: 2px solid var(--qing);
outline-offset: -4px;
}
.code--grouped {
position: static;
border: 0;
border-radius: 0;
}
.code--grouped .copy {
position: absolute;
top: 6px;
right: 6px;
}
.inline-code {
font-family: var(--font-mono);
font-size: 0.88em;
padding: 0.1em 0.35em;
border-radius: 4px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
}
:lang(zh) .code span[style*="font-style:italic"] {
font-style: normal !important;
}
.landing {
position: relative;
}
.hero {
position: relative;
padding-block: clamp(28px, 6vw, 76px) clamp(36px, 5vw, 64px);
}
.hero-grid {
display: grid;
gap: clamp(28px, 4vw, 48px);
align-items: center;
}
.hero-text {
min-width: 0;
}
.hero-status {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 32px;
padding: 4px 14px 4px 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 80%, transparent);
font-family: var(--font-label);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.pulse {
position: relative;
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--qing);
}
.pulse::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--qing);
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.pulse::after {
animation: pulse 2.6s var(--ease) infinite;
}
}
@keyframes pulse {
0% {
transform: scale(0.6);
opacity: 0.9;
}
70%,
100% {
transform: scale(1.7);
opacity: 0;
}
}
.hero-title {
margin-top: 22px;
font-family: var(--font-serif);
font-size: clamp(2.35rem, 1.2rem + 5vw, 5.3rem);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.03em;
font-optical-sizing: auto;
}
.hero-title em {
font-style: italic;
font-weight: 500;
color: var(--qing);
letter-spacing: -0.02em;
}
.stop {
display: inline-block;
width: 0.15em;
height: 0.15em;
margin-left: 0.07em;
overflow: hidden;
color: transparent;
background: var(--zhu);
border-radius: 0.015em;
transform: rotate(-8deg);
line-height: 0;
}
.hero-lede {
margin-top: 24px;
max-width: 35rem;
font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.24rem);
line-height: 1.62;
color: var(--ink-2);
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.hero-ctas .btn {
flex: 1 1 auto;
}
@media (min-width: 560px) {
.hero-ctas .btn {
flex: 0 0 auto;
}
}
.hero-facts {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 30px;
padding: 0;
list-style: none;
font-family: var(--font-label);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--ink-3);
}
.hero-facts li {
display: inline-flex;
align-items: center;
gap: 9px;
}
.hero-facts li::before {
content: "";
width: 5px;
height: 5px;
background: var(--ink-4);
transform: rotate(45deg);
}
.hero-art {
justify-self: center;
width: min(100%, 380px);
}
@media (min-width: 960px) {
.hero-grid {
grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}
.hero-art {
width: 100%;
max-width: 540px;
margin-right: -12px;
}
}
.dial {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
overflow: visible;
}
.dial .tick {
stroke: var(--line-strong);
stroke-width: 1.3;
stroke-linecap: round;
transition: stroke 0.6s var(--ease);
}
.dial .tick--major {
stroke: var(--ink-3);
stroke-width: 1.8;
}
.dial .tick.is-on {
stroke: var(--qing);
}
.dial .tick.is-new {
stroke: var(--qing);
stroke-width: 3;
transition: none;
}
.dial .tick.is-sealed {
stroke: var(--ink);
}
.dial-hand {
fill: var(--qing);
transform-box: view-box;
transform-origin: 260px 260px;
transition: transform 0.7s var(--ease);
}
.dial-stroke {
fill: var(--ink);
}
.dial-reveal {
stroke-dasharray: 1 1;
stroke-dashoffset: 0;
}
.dial-seal {
transform-box: fill-box;
transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
.dial-reveal {
animation: dial-draw 1.9s cubic-bezier(0.55, 0.06, 0.25, 1) 0.15s both;
}
.dial-seal {
animation: seal-stamp 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) 1.95s both;
}
.dial-seal.is-stamped {
animation: seal-again 0.7s cubic-bezier(0.3, 1.4, 0.5, 1);
}
}
@keyframes dial-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes seal-stamp {
from {
opacity: 0;
transform: scale(1.7) rotate(10deg);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes seal-again {
40% {
transform: scale(1.18);
}
}
.live {
display: grid;
gap: 12px;
margin-top: clamp(36px, 5vw, 60px);
padding-top: 18px;
border-top: 1px solid var(--line);
}
.live-label {
display: inline-flex;
align-items: center;
gap: 10px;
}
.live-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
}
.live-item {
min-width: 0;
padding: 2px 12px 2px 0;
}
.live-item + .live-item {
padding-left: 14px;
border-left: 1px solid var(--line);
}
.live-item dt {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--font-label);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
line-height: 1.3;
}
.live-item dt svg {
flex: none;
}
.live-item dd {
margin: 4px 0 0;
}
.live-num {
display: block;
font-family: var(--font-mono);
font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.live-sub {
display: block;
font-size: 0.8rem;
color: var(--ink-3);
}
@media (min-width: 720px) {
.live {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 28px;
}
.live-item + .live-item {
padding-left: 24px;
}
}
.sec {
position: relative;
padding-block: clamp(72px, 9vw, 128px);
border-top: 1px solid var(--line);
}
.sec--tint {
background: var(--bg-2);
}
.sec-head {
display: grid;
gap: 18px;
max-width: 48rem;
margin-bottom: clamp(40px, 5vw, 64px);
}
.sec-label {
display: flex;
align-items: center;
gap: 12px;
}
.sec-num {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--ink);
}
.sec-num::after {
content: "";
width: 28px;
height: 1px;
background: var(--line-strong);
}
.sec-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 1.3rem + 2.7vw, 3.4rem);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.024em;
max-width: 20ch;
}
.sec-title:has(br) {
max-width: none;
}
:lang(zh) .sec-title,
:lang(zh) .hero-title,
:lang(zh) .coda-title {
letter-spacing: 0;
line-height: 1.2;
}
:lang(zh) .sec-title {
max-width: 14em;
}
:lang(zh) .hero-title {
font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4.25rem);
}
:lang(zh) .hero-title em {
font-style: normal;
font-weight: 600;
letter-spacing: 0;
}
.sec-intro {
max-width: 40rem;
font-size: clamp(1.04rem, 0.99rem + 0.25vw, 1.17rem);
line-height: 1.65;
color: var(--ink-2);
}
@media (min-width: 1000px) {
.sec-head--split {
max-width: none;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 56px;
align-items: end;
}
.sec-head--split .sec-label {
grid-column: 1 / -1;
}
.sec-head--split .sec-intro {
padding-bottom: 0.35em;
}
}
.more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: clamp(32px, 4vw, 48px);
padding-bottom: 4px;
border-bottom: 1px solid var(--line-strong);
font-weight: 550;
color: var(--ink);
}
.more .icon {
width: 18px;
height: 18px;
transition: transform 0.25s var(--ease);
}
@media (hover: hover) {
.more:hover {
border-bottom-color: var(--ink);
}
.more:hover .icon {
transform: translateX(3px);
}
}
.stages {
list-style: none;
padding: 0;
margin: 0;
display: grid;
}
.stage {
--mark: 44px;
position: relative;
display: grid;
align-content: start;
grid-template-columns: var(--mark) minmax(0, 1fr);
column-gap: 20px;
padding-bottom: 40px;
}
.stage:last-child {
padding-bottom: 0;
}
.stage-mark {
grid-row: 1 / span 3;
position: relative;
z-index: 1;
}
.stage-mark svg {
display: block;
width: var(--mark);
height: var(--mark);
}
.stage::before {
content: "";
position: absolute;
left: calc(var(--mark) / 2);
top: calc(var(--mark) + 8px);
bottom: 8px;
width: 1px;
background: linear-gradient(var(--from), var(--to));
}
.stage:last-child::before {
display: none;
}
.stage--fast {
--from: var(--qing);
--to: var(--mo);
}
.stage--btc {
--from: var(--mo);
--to: var(--zhu);
}
.stage-time {
font-family: var(--font-label);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
padding-top: 2px;
}
.stage--fast .stage-time {
color: var(--qing);
}
.stage--final .stage-time {
color: var(--zhu);
}
.stage-name {
margin-top: 6px;
font-family: var(--font-serif);
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
font-weight: 600;
line-height: 1.15;
}
.stage-text {
margin-top: 10px;
max-width: 30rem;
color: var(--ink-2);
}
@media (min-width: 900px) {
.stages {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 48px;
}
.stage {
--mark: 52px;
grid-template-columns: minmax(0, 1fr);
padding-bottom: 0;
}
.stage-mark {
grid-row: auto;
margin-bottom: 26px;
}
.stage::before {
left: calc(var(--mark) + 14px);
right: -34px;
top: calc(var(--mark) / 2);
bottom: auto;
width: auto;
height: 1px;
background: linear-gradient(90deg, var(--from), var(--to));
}
}
.rails {
position: relative;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
overflow: hidden;
}
.rails-lane {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 12px;
padding: 16px 20px 0;
font-family: var(--font-label);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.rails-lane b {
font-weight: 600;
color: var(--ink);
}
.rails-lane--btc {
padding: 0 20px 16px;
}
.rails-svg {
display: block;
width: 100%;
height: auto;
}
.rails-svg--wide {
display: none;
}
@media (min-width: 720px) {
.rails-svg--wide {
display: block;
}
.rails-svg--compact {
display: none;
}
}
.rails-edges line {
stroke: var(--line-strong);
stroke-width: 1.6;
}
.rails-btc-edges line {
stroke: var(--mo);
stroke-width: 2.2;
}
.rails-anchors path {
fill: none;
stroke: var(--ink-4);
stroke-width: 1.1;
stroke-dasharray: 2 5;
}
.thread {
fill: none;
stroke: var(--ink-2);
stroke-width: 1.5;
stroke-dasharray: 1 1;
stroke-dashoffset: 0;
}
.fb--fast {
fill: var(--qing);
}
.fb--btc {
fill: var(--mo);
}
.bb {
fill: var(--surface);
stroke: var(--mo);
stroke-width: 2.2;
}
.bracket {
fill: none;
stroke: var(--zhu);
stroke-width: 1.6;
}
.fb,
.bb {
transform-box: fill-box;
transform-origin: center;
}
.rails--armed:not(.is-in) .fb,
.rails--armed:not(.is-in) .bb,
.rails--armed:not(.is-in) .bracket {
opacity: 0;
}
.rails--armed:not(.is-in) .thread {
stroke-dashoffset: 1;
}
@media (prefers-reduced-motion: no-preference) {
.rails--armed.is-in .fb {
animation: block-in 0.5s var(--ease) calc(var(--d) * 40ms) both;
}
.rails--armed.is-in .bb {
animation: block-in 0.6s var(--ease) calc(150ms + var(--d) * 160ms) both;
}
.rails--armed.is-in .thread {
animation: thread-draw 0.9s cubic-bezier(0.5, 0, 0.3, 1) calc(500ms + var(--d) * 170ms) both;
}
.rails--armed.is-in .bracket {
animation: fade-in 0.6s var(--ease) 1.6s both;
}
}
@keyframes block-in {
from {
opacity: 0;
transform: scale(0.3);
}
}
@keyframes thread-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
.rails-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 24px;
margin: 0;
padding: 14px 20px;
list-style: none;
border-top: 1px solid var(--line);
background: var(--bg-2);
font-size: 0.86rem;
color: var(--ink-2);
}
.rails-legend li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.rails-legend .legend-time {
color: var(--ink-3);
font-family: var(--font-label);
font-size: 0.78rem;
}
.legend-thread {
width: 18px;
height: 14px;
flex: none;
}
.legend-thread path {
fill: none;
stroke: var(--ink-2);
stroke-width: 1.5;
}
.rails-note {
margin-top: 12px;
font-size: 0.84rem;
color: var(--ink-3);
}
.steps-3 {
list-style: none;
padding: 0;
margin: clamp(36px, 4vw, 52px) 0 0;
display: grid;
gap: 28px;
counter-reset: how;
}
.steps-3 li {
counter-increment: how;
display: grid;
gap: 8px;
align-content: start;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.steps-3 li::before {
content: counter(how, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--ink-3);
}
.steps-3 h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 600;
line-height: 1.25;
}
.steps-3 p {
color: var(--ink-2);
}
@media (min-width: 900px) {
.steps-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
}
.points {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1px;
background: var(--line);
border-block: 1px solid var(--line);
}
.point {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 18px;
row-gap: 8px;
align-content: start;
padding: 28px 0 30px;
background: var(--bg);
}
.point-icon {
grid-row: 1 / span 2;
width: 32px;
height: 32px;
color: var(--ink);
}
.point h3 {
font-family: var(--font-serif);
font-size: 1.28rem;
font-weight: 600;
line-height: 1.25;
}
.point p {
color: var(--ink-2);
font-size: 0.99rem;
}
@media (min-width: 720px) {
.points {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.point {
grid-template-columns: minmax(0, 1fr);
padding: 32px 28px 36px;
}
.point-icon {
grid-row: auto;
margin-bottom: 12px;
}
.point:nth-child(2n + 1) {
padding-left: 0;
}
.point:nth-child(2n) {
padding-right: 0;
}
}
@media (min-width: 1040px) {
.points {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.point:nth-child(n) {
padding: 34px 32px 40px;
}
.point:nth-child(3n + 1) {
padding-left: 0;
}
.point:nth-child(3n) {
padding-right: 0;
}
}
.paths {
display: grid;
gap: 16px;
}
.path {
display: grid;
gap: 14px;
align-content: start;
padding: 26px 22px 24px;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
}
.path-head {
display: flex;
align-items: center;
gap: 14px;
}
.path-head svg {
flex: none;
}
.path-name {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 600;
line-height: 1.1;
}
.path-kind {
margin-left: auto;
}
.path-text {
color: var(--ink-2);
font-size: 1.02rem;
}
.path-facts {
list-style: none;
margin: 4px 0 0;
padding: 14px 0 0;
display: grid;
gap: 8px;
border-top: 1px solid var(--line-soft);
font-size: 0.93rem;
color: var(--ink-2);
}
.path-facts li {
display: flex;
align-items: baseline;
gap: 10px;
}
.path-facts li::before {
content: "";
flex: none;
width: 10px;
height: 1px;
background: var(--ink-3);
transform: translateY(-4px);
}
.topup {
margin-top: 26px;
max-width: 44rem;
color: var(--ink-2);
}
.topup a,
.sec-intro a {
color: var(--link);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
text-underline-offset: 3px;
}
@media (min-width: 860px) {
.paths {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.path {
padding: 32px 30px 30px;
}
}
.ksa {
display: grid;
gap: 40px;
}
.stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
border-top: 1px solid var(--line);
}
.stat {
min-width: 0;
padding: 20px 16px 22px 0;
border-bottom: 1px solid var(--line);
}
.stat:nth-child(3) {
padding-left: 18px;
border-left: 1px solid var(--line);
}
.stat:first-child,
.stat:last-child {
grid-column: 1 / -1;
}
.stat dt {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.015em;
font-variant-numeric: lining-nums tabular-nums;
color: var(--ink);
}
.stat:first-child dt {
font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.6rem);
}
.stat dd {
margin: 8px 0 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--ink-3);
}
.ksa-note {
margin-top: 18px;
font-size: 0.88rem;
color: var(--ink-3);
}
.supply {
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
padding: 18px 18px 16px;
}
.supply-top {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.supply-plot {
position: relative;
margin-left: 26px;
}
.supply-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.supply-tick {
position: absolute;
font-family: var(--font-mono);
font-size: 0.68rem;
line-height: 1;
color: var(--ink-3);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.supply-tick--y {
transform: translate(calc(-100% - 8px), -50%);
}
.supply-tick--x {
transform: translate(-50%, 8px);
}
.supply-axis-x {
margin-top: 26px;
text-align: right;
}
.supply-svg .grid {
stroke: var(--line-soft);
stroke-width: 1;
}
.supply-svg .baseline {
stroke: var(--line-strong);
stroke-width: 1;
}
.supply-svg .cap {
stroke: var(--ink-3);
stroke-width: 1;
stroke-dasharray: 5 4;
}
.supply-svg .line {
fill: none;
stroke: var(--ink);
stroke-width: 2;
stroke-linejoin: round;
}
.supply-svg .halving {
fill: var(--surface);
stroke: var(--ink);
stroke-width: 1.5;
}
.supply-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 14px 0 0;
padding: 12px 0 0;
list-style: none;
border-top: 1px solid var(--line-soft);
font-size: 0.82rem;
color: var(--ink-2);
}
.supply-legend li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.key {
flex: none;
display: inline-block;
width: 16px;
height: 10px;
}
.key--line {
height: 2px;
background: var(--ink);
}
.key--cap {
height: 0;
border-top: 1px dashed var(--ink-3);
}
.key--dot {
width: 9px;
height: 9px;
border-radius: 50%;
border: 1.5px solid var(--ink);
}
.supply-caption {
margin-top: 12px;
font-size: 0.84rem;
color: var(--ink-3);
}
@media (min-width: 1000px) {
.ksa {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 64px;
align-items: start;
}
}
.build {
display: grid;
gap: 32px;
}
.build-side {
display: grid;
gap: 0;
align-content: start;
}
.build-links {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--line);
}
.build-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 2px;
border-bottom: 1px solid var(--line);
font-weight: 550;
color: var(--ink);
}
.build-links .icon {
color: var(--ink-3);
transition: transform 0.25s var(--ease), color 0.2s;
}
@media (hover: hover) {
.build-links a:hover .icon {
transform: translateX(4px);
color: var(--ink);
}
}
.build .code-group {
box-shadow: var(--shadow);
}
.build .code {
font-size: 0.84rem;
}
@media (min-width: 1000px) {
.build {
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
gap: 56px;
align-items: start;
}
.build .sec-head {
margin-bottom: 36px;
}
}
.run {
display: grid;
gap: 16px;
}
.run-card {
position: relative;
display: grid;
gap: 10px;
align-content: start;
padding: 26px 24px 24px;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.run-card h3 {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 600;
line-height: 1.2;
}
.run-card p {
color: var(--ink-2);
}
.run-card .run-cmd {
margin-top: 4px;
padding: 10px 12px;
border-radius: var(--r-ctl);
background: var(--code-bg);
color: var(--code-fg);
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.5;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.run-card .run-cmd::-webkit-scrollbar {
display: none;
}
.run-cmd .p {
color: var(--code-muted);
user-select: none;
}
.run-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-weight: 550;
color: var(--ink);
}
.run-cta::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.run-cta .icon {
width: 18px;
height: 18px;
transition: transform 0.25s var(--ease);
}
@media (hover: hover) {
.run-card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.run-card:hover .run-cta .icon {
transform: translateX(3px);
}
}
@media (min-width: 900px) {
.run {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
}
.timeline {
list-style: none;
padding: 0;
margin: 0;
display: grid;
}
.tl-item {
position: relative;
padding: 0 0 32px 38px;
}
.tl-item:last-child {
padding-bottom: 0;
}
.tl-dot {
position: absolute;
left: 0;
top: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
}
.tl-item--done .tl-dot {
background: var(--ink);
}
.tl-item--now .tl-dot {
background: var(--qing);
}
.tl-item--now .tl-dot::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid var(--qing);
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.tl-item--now .tl-dot::after {
animation: pulse 2.6s var(--ease) infinite;
}
}
.tl-item--next .tl-dot {
border: 1.5px dashed var(--ink-3);
}
.tl-item::before {
content: "";
position: absolute;
left: 7px;
top: 26px;
bottom: 6px;
width: 1px;
background: var(--line-strong);
}
.tl-item:last-child::before {
display: none;
}
.tl-item--now::before {
background: repeating-linear-gradient(var(--line-strong) 0 4px, transparent 4px 8px);
}
.tl-state {
font-family: var(--font-label);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.tl-item--now .tl-state {
color: var(--qing);
}
.tl-title {
margin-top: 4px;
font-family: var(--font-serif);
font-size: 1.28rem;
font-weight: 600;
line-height: 1.25;
}
.tl-text {
margin-top: 6px;
color: var(--ink-2);
font-size: 0.97rem;
max-width: 30rem;
}
@media (min-width: 960px) {
.timeline {
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 32px;
}
.tl-item {
padding: 36px 0 0;
}
.tl-item::before {
left: 26px;
right: -24px;
top: 7px;
bottom: auto;
width: auto;
height: 1px;
}
.tl-item--now::before {
background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px);
}
}
.coda {
position: relative;
padding-block: clamp(96px, 13vw, 168px);
border-top: 1px solid var(--line);
text-align: center;
overflow: hidden;
}
.coda-mark {
display: block;
width: 76px;
height: 76px;
margin: 0 auto 28px;
color: var(--ink);
}
.coda-mark .enso-mark {
width: 100%;
height: 100%;
}
.coda-title {
max-width: 15ch;
margin-inline: auto;
font-family: var(--font-serif);
font-size: clamp(2rem, 1.1rem + 4vw, 4.3rem);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.028em;
}
.coda-title:has(br) {
max-width: none;
}
.coda .hero-ctas {
justify-content: center;
margin-top: 36px;
}
.search {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
justify-items: center;
align-items: start;
padding: calc(env(safe-area-inset-top, 0px) + 10px) max(10px, env(safe-area-inset-right, 0px)) 10px max(10px, env(safe-area-inset-left, 0px));
}
.search-panel {
position: relative;
display: flex;
flex-direction: column;
width: min(640px, 100%);
max-height: min(78vh, 640px);
max-height: min(78dvh, 640px);
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
box-shadow: var(--shadow-pop);
overflow: hidden;
animation: search-in 0.22s var(--ease);
}
@media (min-width: 720px) {
.search {
padding-top: 12vh;
}
}
@keyframes search-in {
from {
opacity: 0;
transform: translateY(-8px) scale(0.985);
}
}
.search-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px 0 16px;
border-bottom: 1px solid var(--line);
color: var(--ink-3);
}
.search-bar input {
flex: 1;
min-width: 0;
height: 56px;
border: 0;
outline: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-size: 1.06rem;
-webkit-appearance: none;
appearance: none;
}
.search-bar input::placeholder {
color: var(--ink-4);
}
.search-bar input::-webkit-search-cancel-button {
display: none;
}
.search-esc {
flex: none;
height: 28px;
padding: 0 8px;
border: 1px solid var(--line-strong);
border-radius: 5px;
background: var(--bg);
color: var(--ink-3);
font-family: var(--font-mono);
font-size: 0.72rem;
cursor: pointer;
}
.search-results {
list-style: none;
margin: 0;
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
}
.search-results:empty {
display: none;
}
.search-results a {
display: grid;
gap: 2px;
padding: 10px 12px;
border-radius: 8px;
color: var(--ink-2);
}
.search-results [aria-selected="true"] a {
background: var(--hover);
box-shadow: inset 2px 0 0 var(--qing);
}
.search-hit-page {
font-family: var(--font-label);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
}
.search-hit-title {
font-weight: 600;
color: var(--ink);
}
.search-hit-text {
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-results mark {
background: var(--qing-soft);
color: var(--ink);
border-radius: 2px;
padding: 0 1px;
}
.search-status {
padding: 14px 16px;
font-size: 0.88rem;
color: var(--ink-3);
}
.search-status:empty {
display: none;
}
.is-locked {
overflow: hidden;
}
.lost {
min-height: 60vh;
display: grid;
place-content: center;
justify-items: center;
gap: 18px;
padding-block: 96px;
text-align: center;
}
.lost .enso-mark {
width: 72px;
height: 72px;
color: var(--ink-3);
}
.lost h1 {
font-family: var(--font-serif);
font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
font-weight: 600;
}
.lost p {
color: var(--ink-2);
max-width: 28rem;
}
.lost .lost-alt {
margin-top: 10px;
font-size: 0.92rem;
color: var(--ink-3);
}
.lost .hero-ctas {
justify-content: center;
margin-top: 8px;
}
.fig :is(ol, ul) {
list-style: none;
padding: 0;
margin: 0;
}
.fig li + li {
margin-top: 0;
}
.fig li::marker {
content: none;
}
.marks {
--track: linear-gradient(90deg, var(--qing) 0 33%, var(--mo) 33% 66%, var(--zhu) 66%);
display: grid;
gap: 22px;
position: relative;
padding: 22px 20px 20px !important;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
}
.marks-step {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
grid-template-areas: "icon time" "icon name" "icon text";
column-gap: 14px;
align-items: start;
position: relative;
}
.marks-icon {
grid-area: icon;
display: grid;
place-items: center;
width: 34px;
height: 34px;
position: relative;
z-index: 1;
background: var(--surface);
}
.marks-step:not(:last-child)::after {
content: "";
position: absolute;
left: 16.5px;
top: 38px;
bottom: -20px;
width: 1px;
background: var(--line-strong);
}
.marks-time {
grid-area: time;
font-family: var(--font-label);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.marks-step--fast .marks-time {
color: var(--qing);
}
.marks-step--final .marks-time {
color: var(--zhu);
}
.marks-name {
grid-area: name;
margin-top: 2px;
font-family: var(--font-serif);
font-size: 1.12rem;
font-weight: 600;
color: var(--ink);
}
.marks-text {
grid-area: text;
margin-top: 4px;
font-size: 0.9rem;
line-height: 1.55;
color: var(--ink-2);
}
@media (min-width: 760px) {
.marks {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
padding: 24px 24px 22px !important;
}
.marks-step {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "icon" "time" "name" "text";
row-gap: 0;
}
.marks-icon {
margin-bottom: 12px;
}
.marks-step:not(:last-child)::after {
left: 44px;
right: -14px;
top: 17px;
bottom: auto;
width: auto;
height: 1px;
}
}
.lanes {
display: grid;
gap: 12px;
}
@media (min-width: 760px) {
.lanes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lane {
display: flex;
flex-direction: column;
min-width: 0;
padding: 18px 20px 18px;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
}
.lane--b {
border-top: 3px solid var(--qing);
}
.lane--c {
border-top: 3px solid var(--mo);
}
.lane-head {
display: flex;
align-items: center;
gap: 10px;
}
.lane-head b {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 600;
color: var(--ink);
}
.lane-tag {
margin-left: auto;
font-family: var(--font-label);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.lane-steps {
counter-reset: lane;
display: grid;
gap: 10px;
margin-top: 16px !important;
flex: 1;
}
.lane-steps li {
counter-increment: lane;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 8px;
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-2);
}
.lane-steps li::before {
content: counter(lane);
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-top: 0.06em;
border: 1px solid var(--line-strong);
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--ink-3);
}
.lane--b .lane-steps li:nth-child(3)::before {
border-color: var(--qing);
background: var(--qing);
color: var(--on-ink);
}
.lane--c .lane-steps li:nth-child(3)::before {
border-color: var(--mo);
background: var(--mo);
color: var(--bg);
}
.lane-facts {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 16px !important;
padding-top: 14px !important;
border-top: 1px solid var(--line-soft);
}
.lane-facts li {
padding: 2px 9px;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-label);
font-size: 0.74rem;
color: var(--ink-2);
}
.settle {
display: grid;
gap: 10px;
align-items: start;
}
@media (min-width: 860px) {
.settle {
grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.2fr);
gap: 0;
}
}
.tx {
min-width: 0;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
overflow: hidden;
}
.tx-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--bg-2);
}
.tx-head b {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
}
.tx-head span {
font-size: 0.82rem;
color: var(--ink-3);
}
.tx-side {
margin: 12px 16px 6px !important;
font-family: var(--font-label);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.tx-list {
display: grid;
gap: 6px;
margin: 0 12px !important;
}
.tx-list:last-child {
margin-bottom: 14px !important;
}
.tx-io {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 8px 10px;
border: 1px solid var(--line-soft);
border-radius: var(--r-ctl);
font-size: 0.9rem;
line-height: 1.45;
color: var(--ink);
}
.tx-io--hot {
border-color: var(--mo);
box-shadow: inset 3px 0 0 var(--mo);
}
.tx-n {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-3);
padding-top: 0.15em;
}
.tx-what small {
display: block;
font-size: 0.8rem;
color: var(--ink-3);
}
.tx-witness {
margin: 0 12px;
}
.tx-witness .tx-side {
margin-inline: 4px !important;
}
.witness {
display: grid;
gap: 4px;
padding: 8px !important;
border: 1px dashed var(--line-strong);
border-radius: var(--r-ctl);
font-family: var(--font-label);
font-size: 0.78rem;
color: var(--ink-2);
}
.witness > li {
padding: 3px 6px;
}
.witness-leaf {
display: grid;
gap: 6px;
}
.envelope {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
padding: 10px 12px;
border-radius: 6px;
background: var(--mo);
color: var(--bg);
font-family: var(--font-sans);
font-size: 0.86rem;
}
.envelope b {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
}
.tx-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-family: var(--font-label);
font-size: 0.7rem;
color: var(--ink-3);
}
.tx-link svg {
width: 30px;
height: 18px;
transform: rotate(90deg);
fill: none;
stroke: var(--ink-3);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (min-width: 860px) {
.tx-link {
align-self: start;
margin-top: 168px;
}
.tx-link svg {
width: 40px;
height: 24px;
transform: none;
}
}
.arch {
display: grid;
grid-template-areas: "apps" "l1" "nodes" "l2" "btc" "l3" "indexer";
padding: 18px !important;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--bg-2);
}
@media (min-width: 760px) {
.arch {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
grid-template-areas: "apps ." "l1 ." "nodes indexer" "l2 l3" "btc btc";
column-gap: 14px;
padding: 22px !important;
}
}
.arch-apps { grid-area: apps; }
.arch-nodes { grid-area: nodes; }
.arch-btc { grid-area: btc; }
.arch-indexer { grid-area: indexer; }
.arch-l1 { grid-area: l1; }
.arch-l2 { grid-area: l2; }
.arch-l3 { grid-area: l3; }
.arch-box {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--r-panel);
background: var(--surface);
}
.arch-box > b {
font-family: var(--font-serif);
font-size: 1.06rem;
font-weight: 600;
color: var(--ink);
}
.arch-box > span {
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink-3);
}
.arch-btc {
border-color: var(--mo);
background: var(--mo);
}
.arch-btc > b,
.arch-btc > span {
color: var(--bg);
}
.arch-btc > span {
opacity: 0.8;
}
.arch-mesh {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
margin-top: 10px;
}
.arch-mesh i {
flex: 1 1 18px;
min-width: 18px;
position: relative;
font-family: var(--font-mono);
font-size: 0.64rem;
font-style: normal;
letter-spacing: 0.08em;
text-align: center;
color: var(--ink-3);
}
.arch-mesh i::after {
content: "";
display: block;
margin-top: 2px;
border-top: 1px dashed var(--line-strong);
}
.arch-node {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 7px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
font-family: var(--font-label);
font-size: 0.76rem;
color: var(--ink-2);
}
.arch-enso {
width: 18px;
height: 18px;
}
@media (max-width: 479px) {
.arch-node {
gap: 4px;
padding: 4px 8px 4px 5px;
font-size: 0.7rem;
}
.arch-enso {
width: 15px;
height: 15px;
}
.arch-mesh i {
font-size: 0.58rem;
}
}
.arch-enso path {
fill: var(--ink);
}
.arch-enso rect {
fill: var(--zhu);
}
.arch-check {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin-top: 8px;
font-family: var(--font-label);
font-size: 0.74rem !important;
color: var(--ink-2) !important;
}
.arch-link {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding-left: 26px;
position: relative;
font-family: var(--font-label);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--ink-3);
}
.arch-link::before {
content: "";
position: absolute;
left: 18px;
top: 0;
bottom: 0;
border-left: 1.5px solid var(--line-strong);
}
.arch-l3::before {
border-left-style: dashed;
}
@media (min-width: 760px) {
.arch-l3 {
padding-left: 26px;
}
}