/* Subo landing — no dependencies. System font stacks so it renders well offline and in mainland China. */
:root {
--bg: #f5f3ec; --bg-2: #eeebe1; --surface: #fbfaf5; --paper: #fffef9;
--ink: #17251f; --ink-2: #3f4d47; --mute: #74817c; --line: rgba(31, 58, 51, .13); --line-2: rgba(31, 58, 51, .07);
--accent: #2f7d63; --accent-soft: rgba(47, 125, 99, .1); --accent-ink: #1f3a33;
--amber: #c98a1c; --amber-soft: rgba(224, 166, 58, .16); --red: #b84a3e; --red-soft: rgba(184, 74, 62, .1);
--bar: #1f3a33; --bar-ink: #e9efec; --code-bg: #fbfaf5; --gutter: #a7b0ab;
--tk-cmd: #2f6f8f; --tk-arg: #2f7d63; --tk-opt: #8a6a2b; --tk-com: #9aa49f; --tk-math: #8b4f8f;
--term: #101614; --term-ink: #d9e3de;
--shadow: 0 1px 2px rgba(23, 37, 31, .05), 0 12px 32px -12px rgba(23, 37, 31, .18), 0 40px 80px -40px rgba(23, 37, 31, .25);
--serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
--mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, "PingFang SC", monospace;
--r: 14px; --wrap: 1180px;
color-scheme: light;
}
/* 各语言的字体栈在 copy.js 的 meta.fonts 里，渲染时写到 :root */
[data-theme="dark"] {
--bg: #0e1311; --bg-2: #131a17; --surface: #161e1b; --paper: #f7f5ee;
--ink: #e8eeeb; --ink-2: #b7c2bd; --mute: #84918b; --line: rgba(232, 238, 235, .12); --line-2: rgba(232, 238, 235, .06);
--accent: #6fcf9f; --accent-soft: rgba(111, 207, 159, .12); --accent-ink: #cfeee0;
--amber: #e0a63a; --amber-soft: rgba(224, 166, 58, .16); --red: #ef8a7c; --red-soft: rgba(239, 138, 124, .12);
--bar: #18221e; --bar-ink: #e9efec; --code-bg: #121916; --gutter: #4f5d57;
--tk-cmd: #7cc0e0; --tk-arg: #8fdcb4; --tk-opt: #d9b46a; --tk-com: #5f6d67; --tk-math: #d59ad8;
--term: #0a0e0c;
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 20px 50px -20px rgba(0, 0, 0, .6);
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--mono); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
::selection { background: var(--accent-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 50; padding: 8px 14px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
/* icons + mark */
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mark { width: 28px; height: 28px; flex: none; }
.mark-slash { stroke: var(--accent-ink); stroke-width: 12; stroke-linecap: round; fill: none; }
.mark-dot { fill: var(--accent); }
[data-theme="dark"] .mark-slash { stroke: #f2f5f3; }
.mark-inv .mark-slash { stroke: #f2f5f3; } .mark-inv .mark-dot { fill: #6fcf9f; }
.mark-tiny { width: 16px; height: 16px; }
/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; white-space: nowrap; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; gap: 7px; }
.btn-sm .i { width: 16px; height: 16px; }
.btn-ink { background: var(--accent-ink); color: #f3f6f4; }
[data-theme="dark"] .btn-ink { background: var(--accent); color: #0b1a13; }
.btn-ink:hover { background: var(--accent); }
[data-theme="dark"] .btn-ink:hover { background: #8fe0b6; }
.btn-ink:disabled { opacity: .5; cursor: not-allowed; background: var(--accent-ink); }
[data-theme="dark"] .btn-ink:disabled { background: var(--accent); }
.btn-line { border-color: var(--line); background: var(--surface); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }
.btn .i[class*="i"] { }
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--accent); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-2); }
.nav { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-word { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand-cn { font-family: var(--serif); color: var(--mute); font-size: 14px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 6px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.nav-links a:hover { color: var(--ink); background: var(--line-2); }
.nav-links a[aria-current] { color: var(--accent); }
.nav-tools { display: flex; align-items: center; gap: 6px; }
.pick { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink-2); cursor: pointer; }
.pick:hover { background: var(--line-2); color: var(--ink); }
.pick select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#theme-symbol { display: inline-flex; }
.nav-tools .btn { margin-left: 6px; }
/* type */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 7.4vw, 104px); line-height: 1.02; letter-spacing: -.02em; }
[data-script="cjk"] h1 { letter-spacing: .01em; line-height: 1.08; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
[data-script="cjk"] h1 em, [data-script="cjk"] h2 em { font-style: normal; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.12; letter-spacing: -.012em; }
h3 { font-size: 16.5px; line-height: 1.4; }
.sec-intro { margin-top: 20px; color: var(--ink-2); font-size: 17.5px; max-width: 640px; }
.hint { margin-top: 14px; color: var(--mute); font-size: 13.5px; }
.section { padding: 128px 0; }
.sec-head { max-width: 780px; margin-bottom: 56px; }
code { font-size: .88em; }
p code, li code { padding: 1px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); }
[data-theme="dark"] p code { color: var(--accent); }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; margin: 0 2px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font-size: 12px; line-height: 1; color: var(--ink-2); }
/* hero */
.hero { padding: 76px 0 120px; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; background: radial-gradient(60% 50% at 80% 10%, var(--accent-soft), transparent 70%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: end; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink-2); margin-bottom: 30px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.lede { font-size: 18.5px; color: var(--ink-2); line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.stage { margin-top: 64px; }
.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; color: var(--mute); font-size: 14px; }
.stage-foot p code { font-size: 12.5px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--line); }
.fact { padding: 26px 24px 4px 0; display: grid; gap: 6px; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); }
.fact b { font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.1; letter-spacing: -.01em; }
.fact span { color: var(--mute); font-size: 14px; }
/* ---------- app mock ---------- */
.app { --app-bg: #f4f3ee; --pane: #fbfaf6; --pane-line: #e3e1d8; border-radius: 16px; overflow: hidden; background: var(--app-bg); box-shadow: var(--shadow); border: 1px solid var(--line); font-size: 13px; }
[data-theme="dark"] .app { --app-bg: #121815; --pane: #161d1a; --pane-line: #232d29; }
.app-chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 34px; padding: 0 14px; background: var(--pane); border-bottom: 1px solid var(--pane-line); color: var(--mute); font-size: 12px; }
.lights { display: inline-flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #e2675b; }
.lights i:nth-child(2) { background: #e6b54d; } .lights i:nth-child(3) { background: #5fbf6a; }
.app-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 14px; background: var(--bar); color: var(--bar-ink); }
.app-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.app-brand .mark { width: 20px; height: 20px; }
.crumb { color: #9fb2aa; font-size: 12.5px; }
.status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #c6d3cd; position: relative; }
.status-mark .mark { width: 20px; height: 20px; overflow: visible; }
.mark-status .mark-slash { stroke: #f2f5f3; }
.mark-status .mark-dot { fill: #6fcf9f; transition: fill .3s; }
.app[data-state="compiling"] .mark-status .mark-dot { animation: slide 1.1s cubic-bezier(.5, 0, .3, 1) infinite; }
.app[data-state="missing"] .mark-status .mark-dot, .app[data-state="fetching"] .mark-status .mark-dot { fill: #e0a63a; }
.app[data-state="missing"] #status-text, .app[data-state="fetching"] #status-text { color: #f1c879; }
.app[data-state="done"] #status-text { color: #9fe3bf; }
@keyframes slide { 0% { transform: translate(-38px, -56px); opacity: 0; } 25% { opacity: 1; } 70%, 100% { transform: translate(0, 0); opacity: 1; } }
.status-bar { width: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; transition: width .3s; }
.status-bar i { display: block; height: 100%; width: 0; background: #e0a63a; }
.app[data-state="fetching"] .status-bar { width: 70px; }
.app[data-state="fetching"] .status-bar i { animation: fill 1.8s ease-in-out forwards; }
@keyframes fill { to { width: 100%; } }
.app-compile { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; background: #2f7d63; color: #fff; font-weight: 600; font-size: 12.5px; transition: background .2s, box-shadow .2s; }
.app-compile kbd { background: rgba(255, 255, 255, .15); border-color: transparent; color: #fff; height: 18px; font-size: 11px; }
.app[data-state="compiling"] .app-compile { box-shadow: 0 0 0 3px rgba(111, 207, 159, .35); }
.app-body { display: grid; grid-template-columns: 196px 1.05fr 1fr; height: 520px; }
.app-side { background: var(--pane); border-right: 1px solid var(--pane-line); padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.side-h { font-size: 11px; color: var(--mute); padding: 4px 8px; text-transform: uppercase; letter-spacing: .05em; }
.side-h:nth-of-type(2) { margin-top: 14px; border-top: 1px solid var(--pane-line); padding-top: 12px; }
.tree { display: grid; gap: 1px; }
.tree span { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree .i { width: 14px; height: 14px; color: var(--mute); }
.tree .t-file { padding-left: 22px; }
.tree .on { background: var(--accent-soft); color: var(--ink); }
.tree .on .i { color: var(--accent); }
.outline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: o; }
.outline li { counter-increment: o; padding: 4px 8px; border-radius: 6px; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outline li::before { content: counter(o) " "; color: var(--mute); font-family: var(--mono); font-size: 11px; }
.outline li.on { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); border-radius: 0 6px 6px 0; }
.tabbar { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--pane-line); color: var(--mute); font-size: 12px; background: var(--pane); }
.tab.on { color: var(--ink); font-family: var(--mono); font-size: 12px; }
.pg { font-family: var(--mono); }
.app-editor { background: var(--code-bg); border-right: 1px solid var(--pane-line); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.code { padding: 10px 0; font: 12.5px/1.75 var(--mono); overflow: hidden; }
.ln { display: flex; min-height: 21.8px; padding-right: 12px; }
.ln code { white-space: pre; font-size: inherit; overflow: hidden; text-overflow: ellipsis; }
.gut { flex: none; width: 40px; padding-right: 12px; text-align: right; color: var(--gutter); user-select: none; }
.ln-typed { background: var(--accent-soft); }
.tk-cmd { color: var(--tk-cmd); } .tk-arg { color: var(--tk-arg); } .tk-opt { color: var(--tk-opt); } .tk-com { color: var(--tk-com); font-style: italic; } .tk-math { color: var(--tk-math); } .tk-txt { color: var(--ink); }
.caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--accent); vertical-align: -.2em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.app.typing-done .ln-typed .caret { display: none; }
.app-pdf { background: #e7e5dd; display: flex; flex-direction: column; min-width: 0; }
[data-theme="dark"] .app-pdf { background: #0b0f0d; }
.app-pdf .tabbar { background: var(--pane); }
.pdf-scroll { flex: 1; overflow: hidden; padding: 18px 20px 0; }
.page { background: #fffefa; color: #1d2421; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 24px -8px rgba(0, 0, 0, .2); padding: 30px 30px 40px; font-family: var(--serif); min-height: 600px; }
.pg-title { margin: 0; text-align: center; font-size: 19px; font-weight: 700; color: #1f3a33; }
.pg-sub { text-align: center; font-size: 11.5px; margin-top: 3px; }
.pg-author { text-align: center; font-size: 11px; margin-top: 8px; color: #333; font-style: italic; }
[data-script="cjk"] .pg-author { font-family: "Kaiti SC", "STKaiti", "Kaiti TC", KaiTi, var(--serif); font-style: normal; }
.pg-rule { display: block; width: 60px; height: 1px; background: #2f7d63; margin: 10px auto 12px; }
.pg-abs { font-size: 10px; line-height: 1.6; padding: 0 12px; color: #2a2f2c; }
.pg-abs b { color: #1f3a33; margin-right: 4px; }
.pg-h { margin: 14px 0 4px; font-size: 12px; color: #1f3a33; }
.pg-p { font-size: 10.5px; line-height: 1.65; text-align: justify; }
.pg-fig { margin: 10px 0 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .8s cubic-bezier(.2, .7, .2, 1), opacity .6s .2s, margin .6s; }
.pg-fig.show { max-height: 200px; opacity: 1; }
.pg-chart { width: 84%; margin: 0 auto; font-size: 7px; font-family: var(--serif); }
.pg-chart .ax { fill: none; stroke: #333; stroke-width: .6; }
.pg-chart .grid { stroke: #ddd; stroke-width: .4; }
.pg-chart .ln-plot { fill: none; stroke: #2f7d63; stroke-width: 1.3; }
.pg-chart .pt { fill: #fff; stroke: #2f7d63; stroke-width: 1; }
.pg-chart text { fill: #333; } .pg-chart .tick { font-size: 6px; }
.pg-fig figcaption { text-align: center; font-size: 9.5px; margin-top: 4px; color: #333; }
.pg-lines { display: grid; gap: 7px; margin-top: 10px; }
.pg-lines i { height: 5px; border-radius: 2px; background: #e8e7e1; }
/* ---------- why ---------- */
.why { background: var(--bg-2); }
.compare { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; }
.cmp-row > span { padding: 22px 28px; display: flex; align-items: flex-start; gap: 12px; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row > span + span { border-left: 1px solid var(--line); }
.cmp-head > span { padding-block: 14px; font: 600 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); align-items: center; }
.cmp-head > span + span { color: var(--accent); background: var(--accent-soft); }
.cmp-old { color: var(--mute); }
.cmp-new { font-weight: 550; background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.cmp-new .i { color: var(--accent); margin-top: 3px; }
/* ---------- split sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.points { display: grid; gap: 4px; margin-top: 36px; }
.points.two { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.points .pt { padding-top: 16px; border-top: 1px solid var(--line); }
.points:not(.two) .pt { padding: 16px 0; }
.points .pt h3 { margin-bottom: 6px; }
.points .pt p { color: var(--ink-2); font-size: 15px; }
/* typeset panel */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 8px; font-size: 13.5px; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14.5px; }
.panel-block { padding: 14px; border-radius: 12px; background: var(--bg); margin-top: 6px; }
.pb-h { display: flex; justify-content: space-between; align-items: center; color: var(--mute); font-size: 12px; margin-bottom: 10px; }
.pill { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); font-weight: 600; font-size: 11.5px; }
.mute { color: var(--mute); }
.mirror { display: grid; grid-template-columns: 16px 1fr 90px 52px; gap: 10px; align-items: center; padding: 6px 4px; }
.mirror code { text-align: right; color: var(--mute); font-size: 12px; }
.radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); }
.mirror.on .radio { border: 4px solid var(--accent); }
.speed { height: 5px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.speed i { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 4px; opacity: .8; }
.mirror:nth-child(4) .speed i { background: var(--amber); }
.engines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.engine { display: grid; gap: 2px; padding: 9px 10px; border-radius: 9px; border: 1px dashed var(--line); }
.engine b { font-size: 12.5px; } .engine small { color: var(--mute); font-size: 11.5px; }
.engine.on { border-style: solid; background: var(--surface); }
.engine.on small { color: var(--accent); }
.pkgs { display: flex; flex-wrap: wrap; gap: 6px; }
.pkgs code { padding: 4px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2); font-size: 12px; }
.pkgs code.new { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.queue { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.qdot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.snapshot { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; background: var(--surface); }
.snapshot .i { width: 15px; height: 15px; color: var(--accent); }
.sizes { padding: 18px 14px 10px; display: grid; gap: 10px; }
.size { display: grid; grid-template-columns: 150px 1fr 80px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.size b { text-align: right; font-family: var(--mono); font-size: 12px; }
.size-bar { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.size-bar i { display: block; height: 100%; border-radius: 4px; }
.size-bar.small i { width: 3%; min-width: 8px; background: var(--accent); }
.size-bar.big i { width: 100%; background: repeating-linear-gradient(-45deg, var(--mute) 0 6px, transparent 6px 10px); opacity: .45; }
/* ---------- write bento ---------- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tile { padding: 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .25s, transform .25s; }
.tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tile h3 { margin-top: 26px; font-size: 18px; }
.tile p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.7; max-width: 46ch; }
.art { height: 168px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; overflow: hidden; position: relative; font-size: 11.5px; }
.art-sync .mini-code, .art-sync .mini-page { width: 40%; height: 92px; border-radius: 6px; background: var(--code-bg); border: 1px solid var(--line); padding: 10px 8px; display: grid; align-content: start; gap: 8px; }
.art-sync .mini-page { background: #fffefa; }
.art-sync i { height: 5px; border-radius: 3px; background: var(--line); }
.art-sync .mini-page i { background: #e4e2da; }
.art-sync i.hl { background: var(--accent); opacity: .7; animation: hl 2.4s ease-in-out infinite; }
.art-sync .mini-page i.hl { background: #e0a63a; animation-delay: .4s; }
@keyframes hl { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.sync-arrow { width: 36px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-problems { flex-direction: column; align-items: stretch; gap: 6px; }
.prob { display: grid; grid-template-columns: 8px auto 1fr; gap: 9px; align-items: center; padding: 6px 10px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; }
.prob span:last-child { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.prob code { color: var(--mute); font-size: 11px; }
.prob:first-child { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.d.err { background: var(--red); } .d.warn { background: var(--amber); }
.art-complete { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 22px 26px; }
.cline { font-size: 14px; }
.pop { margin: 6px 0 0 50px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3); display: grid; min-width: 130px; padding: 4px; font-family: var(--mono); }
.pop span { padding: 3px 8px; border-radius: 5px; color: var(--ink-2); }
.pop .on { background: var(--accent-soft); color: var(--ink); }
.art-history { flex-direction: column; align-items: stretch; gap: 14px; }
.tl { display: flex; justify-content: space-between; position: relative; padding: 0 6px; }
.tl::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; background: var(--line); }
.tl i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--mute); position: relative; }
.tl i.on { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.diffmini { display: grid; gap: 3px; font-family: var(--mono); font-size: 11px; }
.diffmini span { padding: 3px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.del { background: var(--red-soft); color: var(--red); } .add { background: var(--accent-soft); color: var(--accent); }
.gfile { font-family: var(--mono); padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); }
.gtag { font-family: var(--mono); color: var(--mute); }
/* ---------- AI demo ---------- */
.ai { background: var(--bg-2); }
.ai-demo { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-2); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; font-size: 13px; color: var(--mute); cursor: pointer; font-weight: 550; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line-2); }
.ai-pane { margin-top: 12px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line-2); padding: 14px 0 14px; min-height: 360px; display: flex; flex-direction: column; gap: 12px; }
.code.small { padding: 0; font-size: 12.5px; }
.err-line code { position: relative; }
.squiggle { position: absolute; left: 0; right: 0; bottom: 1px; height: 4px; background: radial-gradient(circle at 2px 0, transparent 2px, var(--red) 2px 3px, transparent 3px) 0 0 / 6px 4px repeat-x; }
.add-line { display: none; }
.ai-pane[data-step="2"] .err-line, .ai-pane[data-step="3"] .err-line, .ai-pane[data-step="4"] .err-line,
.ai-pane[data-step="2"] .swap-old, .ai-pane[data-step="3"] .swap-old, .ai-pane[data-step="4"] .swap-old { background: var(--red-soft); }
.ai-pane[data-step="2"] [data-step="old"] code, .ai-pane[data-step="3"] [data-step="old"] code, .ai-pane[data-step="4"] [data-step="old"] code { text-decoration: line-through; text-decoration-color: var(--red); opacity: .7; }
.ai-pane[data-step="2"] .add-line, .ai-pane[data-step="3"] .add-line, .ai-pane[data-step="4"] .add-line { display: flex; background: var(--accent-soft); animation: rise .35s ease-out; }
.ai-pane[data-step="2"] .squiggle, .ai-pane[data-step="3"] .squiggle, .ai-pane[data-step="4"] .squiggle { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(-4px); } }
.ln.sel { background: color-mix(in srgb, var(--tk-cmd) 9%, transparent); }
.problem { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 9px 12px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); background: var(--surface); font-size: 12.5px; }
.problem code { flex: 1; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.mini-btn kbd { height: 18px; min-width: 0; font-size: 10.5px; margin: 0; }
.mini-btn.solid { background: var(--accent-ink); color: #fff; border-color: transparent; }
[data-theme="dark"] .mini-btn.solid { background: var(--accent); color: #0b1a13; }
.mini-btn.solid kbd { background: rgba(255, 255, 255, .15); color: inherit; border-color: transparent; }
.ai-pane[data-step="1"] [data-step="fixbtn"] { background: var(--accent); color: #fff; transform: scale(.96); transition: all .2s; }
.explain { margin: 0 14px; font-size: 13.5px; color: var(--ink-2); display: none; }
.ai-pane:is([data-step="2"], [data-step="3"], [data-step="4"]) .explain { display: block; animation: rise .35s; }
.verdict { margin: auto 14px 0; display: none; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.ai-pane:is([data-step="3"], [data-step="4"]) .verdict { display: flex; animation: rise .35s; }
.v-state { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-pane[data-step="4"] .spin { animation: none; border: 0; background: var(--accent); -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.ai-pane[data-step="4"] .v-state { color: var(--accent); font-weight: 600; }
.v-actions { display: inline-flex; gap: 6px; }
.cmdk { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); font-size: 14px; }
.cmdk .k { font: 600 11.5px var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); }
.ai-pane[data-step="4"] .cmdk .caret, .ai-pane[data-step="3"] .cmdk .caret { display: none; }
.providers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 28px; font-size: 13px; color: var(--mute); }
.providers > span { margin-right: 4px; }
.providers code { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 12.5px var(--sans); }
/* ---------- agent ---------- */
.agent { background: #0f1613; color: #e7eeea; --line: rgba(231, 238, 234, .12); --line-2: rgba(231, 238, 234, .06); --ink-2: #b4c0bb; --mute: #85928c; --accent: #6fcf9f; --accent-soft: rgba(111, 207, 159, .12); --surface: #151d1a; --bg: #0f1613; color-scheme: dark; }
[data-theme="dark"] .agent { background: #0a0f0d; border-block: 1px solid var(--line); }
.agent .eyebrow { color: #6fcf9f; }
.agent-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: stretch; }
.terminal { display: flex; flex-direction: column; }
.terminal .term-body { flex: 1; }
.terminal { border-radius: 16px; background: var(--term); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.term-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.seg.dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .06); }
.seg.dark button[aria-selected="true"] { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
.seg.dark button { font-family: var(--mono); font-size: 12px; }
.term-body { margin: 0; padding: 20px 22px; min-height: 380px; font-size: 13px; line-height: 1.75; color: var(--term-ink); white-space: pre-wrap; word-break: break-all; }
.tline { display: inline; }
.ps { color: #6fcf9f; user-select: none; }
.tl-dim { color: #75847e; } .tl-warn { color: #e9b860; } .tl-ok { color: #9fe3bf; font-weight: 600; }
.j-k { color: #8fc7e6; } .j-s { color: #b6e3c9; } .j-n { color: #e9b860; }
.term-note { padding: 0 22px 18px; color: #75847e; font-size: 12.5px; }
.agent-side { display: flex; flex-direction: column; }
.side-title { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-bottom: 12px; }
.side-title:not(:first-child) { margin-top: 28px; }
.exits { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.exits li { display: flex; gap: 14px; align-items: center; padding: 13px 16px; font-size: 14.5px; color: var(--ink-2); }
.exits li + li { border-top: 1px solid var(--line-2); }
.exits code { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; flex: none; }
.exits .code-0 { background: rgba(111, 207, 159, .16); color: #9fe3bf; }
.exits .code-1 { background: rgba(239, 138, 124, .14); color: #f0a196; }
.exits .code-2 { background: rgba(124, 192, 224, .14); color: #9dd0ea; }
.exits .code-3 { background: rgba(224, 166, 58, .14); color: #e9b860; }
.cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmds div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); transition: border-color .2s; }
.cmds div:hover { border-color: rgba(111, 207, 159, .35); }
.cmds code { color: var(--accent); font-size: 13px; }
.cmds code::before { content: "$ "; color: var(--mute); }
.cmds span { color: var(--mute); font-size: 13px; }
/* ---------- templates ---------- */
.thumbs { display: grid; grid-template-columns: repeat(9, 1fr); gap: 14px; align-items: end; }
.thumb { margin: 0; }
.paper { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 24px -12px rgba(0, 0, 0, .28); transition: transform .3s; }
.thumb:hover .paper { transform: translateY(-4px); }
.k-slides .paper { aspect-ratio: 16 / 9; }
.k-poster .paper { aspect-ratio: 707 / 1000; }
.k-resume .paper { aspect-ratio: auto; }
.thumb figcaption { margin-top: 12px; display: grid; gap: 2px; font-size: 13px; }
.thumb figcaption code { color: var(--mute); font-size: 11px; }
/* ---------- film ---------- */
.film { background: var(--bg-2); }
.film-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: center; }
.film-frame { position: relative; border-radius: 16px; overflow: hidden; background: #0b0f0d; box-shadow: var(--shadow); aspect-ratio: 16 / 9; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
/* ---------- local ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.col { padding: 28px 28px 0 0; }
.col + .col { padding-left: 28px; border-left: 1px solid var(--line); }
.col p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
/* ---------- start ---------- */
.start { padding-top: 40px; }
.start-card { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.start-main { padding: 56px; }
.start-main > p:not(.eyebrow):not(.hint) { margin-top: 18px; color: var(--ink-2); max-width: 520px; }
.platforms { list-style: none; margin: 0; padding: 40px; display: grid; align-content: center; gap: 0; background: var(--bg-2); border-left: 1px solid var(--line); }
.platforms li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.platforms li + li { border-top: 1px solid var(--line); }
.platforms div { display: grid; gap: 2px; }
.platforms span { color: var(--mute); font-size: 13.5px; }
.st { font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); white-space: nowrap; }
.st-0 { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
/* ---------- faq ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.faq h2 { position: sticky; top: 100px; }
.qs details { border-bottom: 1px solid var(--line); }
.qs details:first-child { border-top: 1px solid var(--line); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 600; font-size: 16.5px; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; font: 300 24px/1 var(--sans); color: var(--mute); transition: transform .25s; }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs p { padding: 0 40px 24px 0; color: var(--ink-2); }
/* ---------- closing ---------- */
.closing { padding: 120px 0 140px; text-align: center; border-top: 1px solid var(--line); }
.mark-hero { width: 92px; height: 92px; margin: 0 auto 32px; overflow: visible; }
.mark-hero .mark-dot { animation: settle 3.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes settle { 0% { transform: translate(-38px, -56px); opacity: 0; } 12% { opacity: 1; } 40%, 100% { transform: none; opacity: 1; } }
.closing h2 { font-size: clamp(30px, 4vw, 50px); }
.closing { overflow: hidden; }
.closing .wrap { position: relative; isolation: isolate; }
.closing .wrap::before { content: ""; position: absolute; left: 50%; top: -40px; width: 720px; height: 420px; translate: -50% 0; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, var(--accent-soft), transparent); filter: blur(10px); }
[data-theme="dark"] .closing .wrap::before { background: radial-gradient(closest-side, rgba(111, 207, 159, .14), transparent); }
.footer { border-top: 1px solid var(--line); padding: 26px 0; color: var(--mute); font-size: 13.5px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.foot .brand { color: var(--ink); }
.foot a:last-child { text-decoration: none; }
.foot a:last-child:hover { color: var(--ink); }
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
.nav-links { display: none; }
.nav-tools { margin-left: auto; }
.hero-grid, .split, .agent-grid, .film-grid, .faq-grid, .start-card { grid-template-columns: 1fr; gap: 40px; }
.split.reverse > :first-child { order: 0; }
.hero-grid { gap: 24px; }
.app-body { grid-template-columns: 1fr 1fr; }
.app-side { display: none; }
.thumbs { grid-template-columns: repeat(5, 1fr); }
.platforms { border-left: 0; border-top: 1px solid var(--line); }
.faq h2 { position: static; }
}
@media (max-width: 720px) {
body { font-size: 15.5px; }
.wrap { width: calc(100% - 32px); }
.nav { gap: 10px; }
.brand-cn { display: none; }
.nav-tools .btn { display: none; }
.section { padding: 84px 0; }
.hero { padding-top: 44px; }
.lede { font-size: 17px; }
.actions .btn { flex: 1 1 100%; justify-content: center; }
.stage { margin-top: 40px; }
.stage-foot { flex-direction: column; align-items: flex-start; }
.app { font-size: 12px; }
.app-chrome { display: none; }
.crumb, .app-compile kbd { display: none; }
.app-body { grid-template-columns: 1fr; height: auto; }
.app-editor { border-right: 0; border-bottom: 1px solid var(--pane-line); }
.code { font-size: 11.5px; max-height: 260px; }
.app-editor .ln:nth-child(n+14) { display: none; }
.pdf-scroll { height: 380px; padding: 14px; }
.page { padding: 22px 20px; min-height: 0; }
.facts { grid-template-columns: 1fr 1fr; margin-top: 48px; }
.fact { padding: 20px 12px 16px 0 !important; border-left: 0 !important; }
.fact:nth-child(even) { padding-left: 16px !important; border-left: 1px solid var(--line) !important; }
.fact:nth-child(n+3) { border-top: 1px solid var(--line); }
.fact b { font-size: 30px; }
.cmp-row { grid-template-columns: 1fr; }
.cmp-row > span + span { border-left: 0; border-top: 1px dashed var(--line); }
.cmp-head { display: none; }
.cmp-row > span { padding: 16px 18px; }
.cmp-old { font-size: 14px; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--mute) 50%, transparent); }
.points.two { grid-template-columns: 1fr; gap: 20px; }
.engines { grid-template-columns: 1fr 1fr; }
.size { grid-template-columns: 1fr 72px; } .size-bar { grid-column: 1 / -1; grid-row: 2; }
.mirror { grid-template-columns: 16px 1fr 50px 48px; }
.bento { grid-template-columns: 1fr; }
.thumbs { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
.cols3 { grid-template-columns: 1fr; }
.col, .col + .col { padding: 22px 0; border-left: 0; }
.col + .col { border-top: 1px solid var(--line); }
.start-main, .platforms { padding: 30px 22px; }
.cmds { grid-template-columns: 1fr; }
.term-body { font-size: 12px; padding: 16px; min-height: 300px; }
.foot { flex-direction: column; align-items: flex-start; }
.qs p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* grid children must be allowed to shrink below their content (long code lines) */
.hero-grid > *, .split > *, .agent-grid > *, .film-grid > *, .faq-grid > *, .start-card > * { min-width: 0; }
.ai-pane .code, .terminal { min-width: 0; overflow: hidden; }
@media (max-width: 1080px) { .hero-grid, .split, .agent-grid, .film-grid, .faq-grid, .start-card { grid-template-columns: minmax(0, 1fr); } }
/* custom menus (language, appearance) */
.menu { position: relative; }
.pick { border: 0; background: transparent; }
.menu .pick[aria-expanded="true"] { background: var(--line-2); color: var(--ink); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 168px; padding: 5px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 40px -12px rgba(23,37,31,.28); display: grid; gap: 1px; animation: pop .14s ease-out; transform-origin: top right; }
[data-theme="dark"] .menu-pop { box-shadow: 0 16px 40px -12px rgba(0,0,0,.7); }
.menu-pop[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; color: var(--ink-2); text-align: left; cursor: pointer; }
.menu-pop button .i { width: 16px; height: 16px; color: var(--mute); }
.menu-pop button span { flex: 1; }
.menu-pop button:hover, .menu-pop button:focus-visible { background: var(--line-2); color: var(--ink); outline: none; }
.menu-pop .tick { opacity: 0; color: var(--accent) !important; }
.menu-pop [aria-checked="true"] { color: var(--ink); font-weight: 600; }
.menu-pop [aria-checked="true"] .tick { opacity: 1; }
/* agent section follows the light theme; only the terminal window stays dark */
[data-theme="light"] .agent {
background: var(--bg-2); color: var(--ink); color-scheme: light;
--line: rgba(31, 58, 51, .13); --line-2: rgba(31, 58, 51, .07); --ink-2: #3f4d47; --mute: #74817c;
--accent: #2f7d63; --accent-soft: rgba(47, 125, 99, .1); --surface: #fbfaf5; --bg: #f5f3ec;
}
[data-theme="light"] .agent .eyebrow { color: var(--accent); }
[data-theme="light"] .agent .terminal { box-shadow: var(--shadow); }
[data-theme="light"] .agent .exits { background: var(--surface); }
[data-theme="light"] .agent .exits code { background: var(--line-2); color: var(--ink); }
[data-theme="light"] .agent .exits .code-0 { background: rgba(47, 125, 99, .12); color: #2f7d63; }
[data-theme="light"] .agent .exits .code-1 { background: rgba(184, 74, 62, .1); color: #b84a3e; }
[data-theme="light"] .agent .exits .code-2 { background: rgba(47, 111, 143, .1); color: #2f6f8f; }
[data-theme="light"] .agent .exits .code-3 { background: rgba(201, 138, 28, .14); color: #9a6a12; }
[data-theme="light"] .agent .cmds div { background: var(--surface); }
[data-theme="light"] .agent .cmds div:hover { border-color: rgba(47, 125, 99, .35); }
/* =================================================================== depth
Four layers so the scroll has texture instead of a flat roll:
1. paper grain over everything 2. sections stack like sheets of paper
3. headings drift slower than the product views (parallax)
4. content rises in as it arrives; the hero window tilts flat as you scroll in */
/* 1 · grain */
body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,"); }
[data-theme="dark"] body::after { opacity: .05; mix-blend-mode: screen; filter: invert(1); }
/* scroll progress, a thin accent thread under the header */
.site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--sp, 0) * 100%); background: linear-gradient(90deg, transparent, var(--accent)); opacity: .7; }
/* 2 · stacked sheets */
main > .section { background-color: var(--bg); position: relative; }
main > .why, main > .ai, main > .film { background-color: var(--bg-2); }
main > section + section, .closing { margin-top: -32px; border-radius: 32px 32px 0 0;
box-shadow: 0 -1px 0 var(--line-2), 0 -22px 44px -30px rgba(23, 37, 31, .28); }
.closing { position: relative; background: var(--bg); border-top: 0; }
[data-theme="dark"] main > section + section, [data-theme="dark"] .closing { box-shadow: 0 -1px 0 var(--line), 0 -26px 50px -28px rgba(0, 0, 0, .85); }
main > section + section::before, .closing::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; border-radius: inherit; pointer-events: none;
background: linear-gradient(to bottom, color-mix(in srgb, #fff 40%, transparent), transparent); opacity: .35; }
[data-theme="dark"] main > section + section::before, [data-theme="dark"] .closing::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .035), transparent); opacity: 1; }
.hero::before { translate: 0 calc(var(--sy, 0) * .35px); }
/* 3 · parallax (set by app.js as --t ∈ [-1.2, 1.2]: <0 above centre, >0 below) */
.depth .sec-head, .depth .split-copy { translate: 0 calc(var(--t, 0) * -26px); }
.depth .panel, .depth .ai-demo, .depth .terminal, .depth .film-frame, .depth .start-card { translate: 0 calc(var(--t, 0) * 18px); }
/* 4 · arrival */
.depth .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.depth .rv.in { opacity: 1; transform: none; }
.depth .thumb.rv { transform: translateY(48px) rotate(calc((var(--i, 0) - 4) * 2.5deg)); }
.depth .thumb.rv.in { transform: none; }
.depth .tile.rv.in:hover { transform: translateY(-3px); }
.depth .fact.rv { transform: translateY(16px); }
@media (max-width: 720px) {
main > section + section, .closing { margin-top: -20px; border-radius: 20px 20px 0 0; }
.depth .stage .app { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.depth .rv { opacity: 1 !important; transform: none !important; }
.depth .sec-head, .depth .split-copy, .depth .panel, .depth .ai-demo, .depth .terminal, .depth .film-frame, .depth .start-card, .hero::before { translate: none !important; }
.depth .stage .app { transform: none !important; }
}
/* =================================================================== Apple-style scroll scenes
Pinned (position: sticky) stages whose content is scrubbed by scroll position (--p ∈ 0..1). */
/* hero: window starts tilted back and small, lands flat and full while the headline recedes */
.hero-grid { will-change: opacity, transform; transform-origin: 30% 100%; }
.depth .scene-hero { height: 165vh; }
.depth .scene-hero .stage { position: sticky; top: 84px; perspective: 1600px; }
.depth .scene-hero .app { transform-origin: 50% 0;
transform: rotateX(calc((1 - var(--p, 0)) * 22deg)) scale(calc(.84 + var(--p, 0) * .16)) translateY(calc((1 - var(--p, 0)) * 30px));
box-shadow: 0 1px 2px rgba(23,37,31,.05), 0 calc(20px + var(--p, 0) * 40px) calc(40px + var(--p, 0) * 60px) calc(-20px - var(--p, 0) * 10px) rgba(23,37,31,.28);
will-change: transform; }
[data-theme="dark"] .depth .scene-hero .app { box-shadow: 0 30px 90px -30px rgba(0,0,0,.8); }
.depth .scene-hero .stage-foot { opacity: calc(var(--p, 0) * 1.4 - .4); }
/* why: statement brightens character by character */
.why .sec-head { max-width: 980px; }
.why .sec-intro.statement { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 34px); line-height: 1.5; max-width: none; margin-top: 32px; color: var(--ink); }
.depth .statement .ch { opacity: .18; transition: opacity .25s ease-out; }
.depth .statement .ch.lit { opacity: 1; }
/* templates: pinned, papers slide sideways as you scroll down */
.depth .templates { padding-top: 0; }
.depth .scene-tpl { height: 240vh; }
.depth .scene-tpl .scene-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 64px; }
.depth .scene-tpl .sec-head { margin-bottom: 44px; translate: none; }
.depth .scene-tpl .track { padding-inline: max(24px, (100vw - var(--wrap)) / 2); }
.depth .scene-tpl .thumbs { display: flex; gap: 28px; width: max-content; align-items: end; will-change: transform; }
.depth .scene-tpl .thumb { width: 260px; flex: none; }
.depth .scene-tpl .thumb.k-slides { width: 400px; }
/* film: frame grows from a card toward full width */
.depth .film .film-grid { grid-template-columns: 1fr; gap: 40px; }
.depth .film .film-grid > div:first-child { max-width: 760px; }
.depth .film .film-frame { translate: none; transform: scale(calc(.72 + var(--p, 0) * .28)); border-radius: calc(32px - var(--p, 0) * 18px); transform-origin: 50% 20%; will-change: transform; }
@media (max-width: 720px) {
.depth .scene-hero, .depth .scene-tpl { height: auto; }
.depth .scene-hero .stage, .depth .scene-tpl .scene-pin { position: static; height: auto; padding-top: 0; }
.depth .scene-hero .app { transform: none; }
.depth .scene-hero .stage-foot { opacity: 1; }
.depth .scene-tpl .thumbs { display: grid; width: auto; }
.depth .scene-tpl .thumb { width: auto; }
.depth .scene-tpl .track { padding-inline: 16px; }
.depth .templates { padding-top: 84px; }
}
/* download link sits under the video, right-aligned */
.film-foot { display: flex; justify-content: flex-end; }
.film-foot .text-link { margin-top: 0; }
.film-grid > .film-foot { grid-column: -2 / -1; margin-top: -36px; }
@media (max-width: 1080px) { .film-grid > .film-foot { grid-column: auto; margin-top: -24px; } }
.depth .film .film-grid > .film-foot { grid-column: auto; margin-top: -16px; }
/* slogan: keep 「让灵感更自由。」 on one line in Chinese */
[data-script="cjk"] .hero h1 { font-size: clamp(40px, 6.2vw, 88px); }
[data-script="cjk"] .hero h1 em, [data-script="cjk"] .closing h2 { white-space: nowrap; }
/* film dialog: opened by the hero's "watch the film" button; grows out of the button (see setupFilmModal) */
.film-open, .film-open body { overflow: hidden; }
html.film-open { scrollbar-gutter: stable; }
.film-modal { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: grid; place-items: center; overflow: visible; }
.film-modal:not([open]) { display: none; }
.film-modal::backdrop { background: rgba(6, 10, 8, .74); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity .42s ease; }
.film-modal.is-open::backdrop { opacity: 1; }
.fm-stage { position: relative; width: min(92vw, calc((100dvh - 140px) * 16 / 9), 1440px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0b0f0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 90px -20px rgba(0, 0, 0, .7); transform-origin: 50% 50%; }
.fm-stage video { width: 100%; height: 100%; object-fit: contain; outline: none; }
.fm-spin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .18); border-top-color: #6fcf9f; opacity: 0; transition: opacity .25s; pointer-events: none; animation: fm-spin .8s linear infinite; }
.fm-stage.is-loading .fm-spin { opacity: 1; transition-delay: .3s; } /* only shows if loading is noticeable */
@keyframes fm-spin { to { transform: rotate(1turn); } }
.fm-close { position: fixed; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); color: #eef3f0; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .3s ease .15s, transform .35s cubic-bezier(.2, .9, .25, 1) .15s, background .2s; }
.fm-close .i { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
.film-modal.is-open .fm-close { opacity: 1; transform: none; }
.fm-close:hover { background: rgba(255, 255, 255, .18); }
.fm-close:hover .i { transform: rotate(90deg); }
.fm-close:focus-visible { outline: 2px solid #6fcf9f; outline-offset: 3px; }
@media (max-width: 640px) { .fm-stage { width: 100vw; border-radius: 0; } }
/* templates on phones: a swipeable row that snaps card by card (see setupTplCarousel) */
.tpl-progress { display: none; }
@media (max-width: 720px) {
.templates .thumbs, .depth .scene-tpl .thumbs { display: flex; width: auto; gap: 16px; align-items: flex-end; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 18px 24px 8px; scrollbar-width: none; transform: none !important; }
.templates .thumbs::-webkit-scrollbar { display: none; }
.templates .track, .depth .scene-tpl .track { padding-inline: 0; }
.templates .thumb, .depth .scene-tpl .thumb { flex: 0 0 56vw; width: auto; scroll-snap-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.templates .thumb.k-slides, .depth .scene-tpl .thumb.k-slides { flex-basis: 80vw; }
.templates .thumb:last-child { margin-right: 24px; }
.depth .templates .thumb.rv { opacity: 1; transform: none; } /* cards off to the side shouldn't wait to fade in */
.templates .paper { transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .35s, box-shadow .45s; opacity: .6; }
.templates .thumb.on .paper { transform: scale(1.03); opacity: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 36px -14px rgba(0, 0, 0, .38); }
.thumb:hover .paper { transform: none; }
.templates .thumb.on:hover .paper { transform: scale(1.03); }
.templates figcaption { opacity: .55; transition: opacity .35s; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; margin-top: 14px; }
.templates .thumb.on figcaption { opacity: 1; }
.tpl-progress { display: block; height: 2px; margin: 18px 24px 0; border-radius: 2px; background: var(--line); overflow: hidden; }
.tpl-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(.12); transition: transform .12s linear; }
}