/* 页面与演示窗口同一套颜色：取自 workbench/app/style.css 的 --ink、--muted、--line、--accent、--needs 与深色 --sheet。
   页面底色取侧栏那层偏冷的灰，演示窗口放在上面像同一个应用；主按钮与应用里的“新建终端”“批准”同样用墨色。 */
:root {
  --bg: #f2f3f6; --raised: #ffffff; --ink: #1d1d1f; --muted: #6b6b72; --line: rgba(0,0,0,.09);
  --accent: #0a66d8; --link: #0a5cc2; --wait: #93600f; --wait-bg: rgba(214,150,50,.12); --ok: #1a7f37; --code-bg: rgba(0,0,0,.05);
  --page-max: 1360px; --gutter: 24px;
  --spell: oklch(52% 0.2 293);
  --spell-soft: color-mix(in oklch, var(--spell) 13%, transparent); --spell-glow: color-mix(in oklch, var(--spell) 38%, transparent);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141417; --raised: #1c1c1f; --ink: #ececf0; --muted: #a1a1aa; --line: rgba(255,255,255,.09);
    --accent: #4c9bff; --link: #79b4ff; --wait: #f0bd6a; --wait-bg: rgba(232,169,72,.14); --ok: #56d364; --code-bg: rgba(255,255,255,.07);
    --spell: oklch(74% 0.15 293);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141417; --raised: #1c1c1f; --ink: #ececf0; --muted: #a1a1aa; --line: rgba(255,255,255,.09);
  --accent: #4c9bff; --link: #79b4ff; --wait: #f0bd6a; --wait-bg: rgba(232,169,72,.14); --ok: #56d364; --code-bg: rgba(255,255,255,.07);
    --spell: oklch(74% 0.15 293);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-anchor: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.8 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Segoe UI", system-ui, sans-serif; overflow-x: hidden; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, .mono { font-family: "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em; }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.3; letter-spacing: -.01em; }
h2 { font-size: 26px; font-weight: 600; margin: 0 0 14px; }
h3 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
p { margin: 0 0 14px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: var(--raised); padding: 6px 10px; z-index: 10; }

.site-header { position: absolute; z-index: 5; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; max-width: var(--page-max); margin: 0 auto; padding: 14px var(--gutter); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; font-size: 18px; text-decoration: none; letter-spacing: -.02em; }
.wordmark img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.wordmark .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark .logo-light { display: none; }
  :root:not([data-theme="light"]) .wordmark .logo-dark { display: block; }
}
:root[data-theme="dark"] .wordmark .logo-light { display: none; }
:root[data-theme="dark"] .wordmark .logo-dark { display: block; }
.wordmark small { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 8px; letter-spacing: 0; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 14px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.theme-toggle { font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 3px 10px; cursor: pointer; touch-action: manipulation; }

.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.prose > * { max-width: 760px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section.block { padding: 72px 0 64px; }
/* 按钮：参考 uiarc.dev 的 Button（圆角胶囊、主按钮一个、次按钮细边加浅阴影、按下缩到 0.97、悬停只在有指针的设备上），自己实现。
   按 good-css：悬停放进 (hover: hover) and (pointer: fine)，会动的过渡放进 prefers-reduced-motion: no-preference，派生色用 color-mix(in oklch)。 */
.button { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--raised); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.button svg { flex: none; }
.button.primary { background: var(--ink); border-color: transparent; color: var(--bg);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 20%, transparent), 0 6px 18px -8px var(--spell-glow); }
.button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.button:active:not(:disabled) { scale: .97; }
.button:disabled { cursor: default; color: var(--muted); background: color-mix(in oklch, var(--raised) 55%, transparent); box-shadow: none; }
.button.ghost:disabled { background: transparent; opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .button { transition: scale 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
  .button svg:last-child { transition: translate 200ms var(--ease-out); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* 底色有层次：两团很淡的紫与蓝打在首屏，首屏下面铺一层随距离淡出的点阵；深浅色用同一组 token。 */
body { background:
  radial-gradient(56rem 34rem at 88% -6rem, var(--spell-soft), transparent 70%),
  radial-gradient(44rem 30rem at -12rem 26rem, color-mix(in oklch, var(--accent) 9%, transparent), transparent 70%),
  var(--bg); }
main { position: relative; }
.intro::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(color-mix(in oklch, var(--ink) 11%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 85%); -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%); }

/* 首屏：左边一句话、下载与三条原则，右边第一个展示。 */
.intro { position: relative; padding: 104px 0 24px; }
.intro-grid { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); grid-template-areas: "copy show" "principles show";
  grid-template-rows: auto 1fr; gap: 0 72px; align-items: start; }
.intro-copy { grid-area: copy; }
.intro-grid > .principles { grid-area: principles; }
.intro-grid > .show-hero { grid-area: show; }
.intro h1 { font-size: clamp(3rem, 2rem + 2.6vw, 4.5rem); font-weight: 600; letter-spacing: -.035em; margin: 24px 0 18px; line-height: 1; }
.intro .lede { font-size: 19px; line-height: 1.7; margin: 0; }
.intro .meta { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.principles { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
.principles li { border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.principles strong { display: block; font-weight: 600; font-size: 15px; }
.principles span { color: var(--muted); font-size: 14px; line-height: 1.7; }
.demo-note { position: relative; z-index: 1; max-width: var(--page-max); margin: 12px auto 0; padding: 0 var(--gutter); color: var(--muted); font-size: 12px; text-align: end; }

/* 一个展示：说明（第几步、这一步讲什么、上一步／下一步）加一个按桌面尺寸缩放的演示窗口。 */
.show { position: relative; display: grid; gap: 14px 64px; align-items: start; }
.show-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "guide"; gap: 12px; }
.show-hero .show-stage { max-inline-size: calc((100svh - 330px) * 1040 / 760); min-inline-size: min(100%, 30rem); }
.station-head { grid-area: head; position: relative; }
.station-star { position: absolute; inset-inline-start: -34px; inset-block-start: 1px; width: 20px; height: 20px; overflow: visible;
  fill: var(--bg); stroke: var(--spell); stroke-width: 1.4; stroke-linejoin: round; }
.station-num { display: block; color: var(--spell); font: 500 12px/24px "SF Mono", Menlo, monospace; letter-spacing: .04em; }
.station-head h2 { font-size: 28px; margin: 6px 0 8px; }
.station-head p { color: var(--muted); margin: 0; }
.show-guide { grid-area: guide; }
.show-stage { grid-area: stage; inline-size: 100%; min-width: 0; }
.show-frame { position: relative; inline-size: 100%; }
/* 窗口挂上之前先按 1040×760 占位，挂上后由 showcase.js 写入缩放后的高度，页面不跳。 */
.show.is-live .show-frame { aspect-ratio: 1040 / 760; }
/* 窗口固定按桌面宽度排版，再整体缩放；宽度不随外框变，缩放比例才不会反过来撑大外框。 */
.show .wb { transform-origin: 0 0; width: 1040px; }
.show .wb:not([data-ready]) { height: auto; width: auto; min-width: 0; transform: none !important; }
.show-count { margin: 0 0 6px; color: var(--muted); font: 12px/1.6 "SF Mono", Menlo, monospace; }
.show-steps { list-style: none; margin: 0; padding: 0; }
.show-steps li { padding: 0 0 12px; }
.show.is-live .show-steps li { display: none; }
.show.is-live .show-steps li.is-current { display: block; }
@media (prefers-reduced-motion: no-preference) { .show.is-live .show-steps li.is-current { animation: step-in .3s var(--ease-out); } }
@keyframes step-in { from { opacity: 0; translate: 0 6px; } }
.show-steps h3 { font-size: 19px; margin: 0 0 6px; }
.show-steps p { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 0 0 8px; }
.show-steps .try { color: var(--ink); font-size: 14px; }
.show-steps .try::before { content: '✦'; color: var(--spell); margin-inline-end: 6px; }
.show-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 6px; }
.show-hero .show-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: start; }
.show-hero .show-count { grid-column: 1 / -1; margin: 0; }
.show-hero .show-steps h3 { font-size: 17px; margin-block-end: 2px; }
.show-hero .show-steps p { font-size: 14px; line-height: 1.65; margin-block-end: 4px; }
.show-hero .show-nav { margin: 0; }
.show-first { grid-column: 1 / -1; justify-self: end; margin: 2px 0 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.show-first[data-dismissed] { visibility: hidden; }
.show-first span { color: var(--spell); background: var(--spell-soft); border-radius: 999px; padding: 2px 10px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .show.is-first [data-show-next] { animation: beckon 2.4s var(--ease-out) infinite; }
}
@keyframes beckon { 0%, 60%, 100% { box-shadow: 0 0 0 0 var(--spell-glow); } 30% { box-shadow: 0 0 0 7px transparent; } }
.show.is-first [data-show-next] { border-color: color-mix(in oklch, var(--spell) 45%, transparent); }

/* 分功能展示：说明与窗口左右交替。 */
.journey { padding: 40px 0 24px; }
.station { max-width: var(--page-max); margin: 0 auto; padding: 80px var(--gutter);
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); grid-template-areas: "stage head" "stage guide"; grid-template-rows: auto 1fr; }
.station:nth-of-type(even) { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); grid-template-areas: "head stage" "guide stage"; }
.station > * , .show-hero > * { position: relative; z-index: 1; }

/* 连线：取标志里的环绕轨道、小珠与四角星，紫色；随滚动画出，到哪一站点亮哪颗星。 */
.thread { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 0; pointer-events: none; overflow: visible; }
.thread:not(.is-live) { display: none; }
.thread path { fill: none; stroke: var(--spell); stroke-linecap: round; stroke-linejoin: round; }
.thread-line { stroke-width: 1.6; }
.thread-glow { stroke-width: 7; opacity: .2; filter: blur(4px); }
.thread-bead { fill: var(--bg); stroke: var(--spell); stroke-width: 1.5; scale: 0; }
.thread-bead.is-lit { scale: 1; }
.station-star { scale: .8; }
.station-star.is-lit { fill: var(--spell); scale: 1; filter: drop-shadow(0 0 6px var(--spell-glow)); }
@media (prefers-reduced-motion: no-preference) {
  .thread-bead { transition: scale 420ms cubic-bezier(.34, 1.56, .64, 1); }
  .station-star { transition: scale 480ms cubic-bezier(.34, 1.56, .64, 1), fill 200ms var(--ease-out); }
}


.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 56px; }
.columns h2 { font-size: 22px; margin-top: 0; }
.columns h2 + p, .columns .plain + h2 { margin-top: 0; }
.columns .plain + h2 { margin-top: 28px; }
.plain { margin: 0 0 14px; padding-left: 1.1em; }
.plain li { margin: 0 0 8px; }
pre.cmd { background: var(--code-bg); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font: 13px/1.6 "SF Mono", Menlo, monospace; }
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; }

@media (max-width: 1100px) {
  .intro-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "show" "principles"; grid-template-rows: none; gap: 32px; }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .show-hero .show-stage { max-inline-size: none; }
  .station, .station:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "guide" "stage"; grid-template-rows: none; padding-block: 56px; }
}
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .intro { padding-top: 112px; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .show-hero .show-guide { grid-template-columns: minmax(0, 1fr); }
  .show-first { justify-self: start; }
  .demo-note { text-align: start; }
  .station-star { inset-inline-start: -15px; width: 14px; height: 14px; inset-block-start: 5px; }
  .station-head h2 { font-size: 23px; }
  section.block { padding: 44px 0; }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled) { border-color: color-mix(in oklch, var(--ink) 22%, transparent); }
  .button.primary:hover { background: color-mix(in oklch, var(--ink), var(--spell) 28%); }
  .button.ghost:hover:not(:disabled) { color: var(--ink); background: var(--code-bg); }
  .button:hover:not(:disabled) svg:last-child { translate: 2px 0; }
  .button[href="#features"]:hover svg:last-child { translate: 0 2px; }
  .theme-toggle:hover { border-color: var(--muted); }
}