:root {
  --harbor: #13202F;       /* launcher background */
  --deep: #0D1722;
  --panel: #1A2A3C;
  --line: #2A3B50;
  --brass: #D9A94F;
  --brass-dim: #A97F35;
  --teal: #7FD6D2;
  --paper: #ECE5D8;
  --muted: #9AA7B6;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --measure: 36rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--harbor);
  color: var(--paper);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brass); text-underline-offset: .2em; }
a:hover { color: var(--paper); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 1.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--paper); text-decoration: none; font: 700 1.25rem/1 var(--display); letter-spacing: -.01em; }
.brand img { width: 2rem; height: 2rem; }
.top nav { display: flex; gap: 1.5rem; font-size: .95rem; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--paper); }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 3rem;
  align-items: center;
  padding-block: 3rem 5rem;
}
h1 {
  font: 700 clamp(2.6rem, 6.4vw, 5rem)/.98 var(--display);
  letter-spacing: -.035em;
  margin: 0 0 1.5rem;
  max-width: 12ch;
}
.lede { font-size: 1.2rem; color: var(--paper); opacity: .86; max-width: var(--measure); margin: 0 0 2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.button {
  display: inline-block; padding: .85rem 1.4rem; border-radius: 999px;
  background: var(--brass); color: var(--harbor); font-weight: 600; text-decoration: none;
}
.button:hover { background: var(--paper); color: var(--harbor); }
.button.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.button.ghost:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.fine { color: var(--muted); font-size: .9rem; }

/* Phone */
.phone {
  position: relative; justify-self: center;
  width: min(100%, 22rem); aspect-ratio: 9 / 17;
  border-radius: 2.6rem; padding: .7rem;
  background: #060B11;
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px #000;
}
.screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 2rem; background: var(--deep);
  display: flex; flex-direction: column;
  font: 400 .72rem/1.5 var(--mono);
}
.status { display: flex; justify-content: space-between; height: 4.3rem; padding: .7rem 1.4rem 0; font: 500 .72rem/1 var(--body); color: var(--muted); background: var(--panel); }
.bar { display: flex; align-items: center; gap: .6rem; padding: .2rem .9rem .55rem; background: var(--panel); font-family: var(--body); font-size: .85rem; }
.bar b { font-weight: 600; }
.bar .branch { color: var(--muted); font-family: var(--mono); font-size: .7rem; }
.tabs { display: flex; gap: .2rem; padding: 0 .6rem; background: var(--panel); border-bottom: 1px solid var(--line); font-family: var(--body); font-size: .75rem; }
.tabs span { padding: .35rem .6rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.tabs .on { color: var(--paper); box-shadow: inset 0 -2px var(--brass); }
.dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted); }
.dot.work { background: var(--teal); }
.dot.wait { background: var(--brass); }
.term { flex: 1; padding: .7rem .8rem; white-space: pre-wrap; color: #C9D2DC; }
.term .p { color: var(--teal); }
.term .q { color: var(--brass); }
.term .dim { color: #5F6E80; }
.cursor { display: inline-block; width: .55em; height: 1.1em; vertical-align: text-bottom; background: var(--paper); }
.keys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); font-size: .68rem; text-align: center; }
.keys span { background: var(--panel); padding: .55rem 0; }
.keys .latched { color: var(--harbor); background: var(--brass); }
.note {
  position: absolute; left: .5rem; right: .5rem; top: .5rem;
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center;
  padding: .7rem .8rem; border-radius: 1.1rem;
  background: var(--paper); color: var(--harbor);
  font-family: var(--body); font-size: .8rem; line-height: 1.35;
  box-shadow: 0 12px 30px -10px #000;
  animation: drop .5s cubic-bezier(.2,.9,.3,1.2) 1.4s both;
}
.note img { grid-row: span 2; width: 1.9rem; height: 1.9rem; background: var(--harbor); border-radius: .5rem; padding: .25rem; transform-origin: 80% 15%; animation: ring .9s ease-in-out 1.9s 1; }
.note b { font-weight: 600; }
.note span { color: #4A5868; }
@keyframes drop { from { transform: translateY(-140%); opacity: 0; } }
@keyframes ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}

/* Selling points, straight under the hero */
.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.point { padding: 2.25rem 1.75rem 3rem; border-left: 1px solid var(--line); }
.point:first-child { padding-left: 0; border-left: 0; }
.point h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .75rem; color: var(--brass); }
.point p { color: var(--muted); font-size: .97rem; margin: 0; }

/* Sections */
section { padding-block: 4.5rem; border-top: 1px solid var(--line); }
h2 { font: 700 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--display); letter-spacing: -.025em; margin: 0 0 1rem; max-width: 20ch; }
h3 { font: 600 1.15rem/1.3 var(--body); margin: 0 0 .5rem; }
.intro { max-width: var(--measure); color: var(--muted); margin: 0 0 3rem; }
p { margin: 0 0 1rem; }

/* Diagram */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; }
.end { border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.5rem; }
.end.host { border-color: var(--brass-dim); }
.end h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 700; }
.end p { color: var(--muted); font-size: .97rem; margin: 0; }
.wire { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .4rem; min-width: 10rem; color: var(--muted); font-size: .85rem; text-align: center; }
.wire svg { width: 100%; height: 1.5rem; }
.wire code { font-family: var(--mono); font-size: .78rem; color: var(--paper); }

/* Feature columns */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; }
.cols ul { margin: 0; padding: 0; list-style: none; }
.cols li { padding-block: .7rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .97rem; }
.cols li strong { color: var(--paper); font-weight: 600; }

/* Steps */
.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; display: grid; gap: 2.5rem; max-width: 46rem; }
.steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; counter-increment: step; }
.steps li::before { content: counter(step); font: 700 2.4rem/1 var(--display); color: var(--brass); }
.steps p { color: var(--muted); }
pre {
  margin: .25rem 0 0; padding: 1rem 1.1rem; overflow-x: auto;
  background: var(--deep); border: 1px solid var(--line); border-radius: .75rem;
  font: 400 .85rem/1.6 var(--mono); color: var(--paper);
}

.reqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; margin: 0; }
.reqs div { padding-block: 1rem; border-top: 1px solid var(--line); }
.reqs dt { font-weight: 600; }
.reqs dd { margin: .25rem 0 0; color: var(--muted); font-size: .97rem; }

footer { border-top: 1px solid var(--line); padding-block: 2.5rem 3rem; color: var(--muted); font-size: .9rem; }
footer p { max-width: 44rem; }

@media (max-width: 1000px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .point:nth-child(odd) { padding-left: 0; border-left: 0; }
  .point:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-block: 1.5rem 4rem; }
  .phone { width: min(100%, 20rem); }
  .flow { grid-template-columns: 1fr; }
  .wire { flex-direction: row; min-width: 0; }
  .wire svg { width: 1.5rem; height: 3rem; transform: rotate(90deg); }
  .cols, .reqs { grid-template-columns: 1fr; }
  .top nav a:not(:last-child) { display: none; }
}
@media (max-width: 560px) {
  section { padding-block: 3rem; }
  .intro { margin-bottom: 2rem; }
  .hero { padding-block: 1rem 3rem; }
  .lede { font-size: 1.1rem; }
  .steps { gap: 2rem; }
  .steps li { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 .75rem; }
  .steps li::before { font-size: 2rem; }
  pre { font-size: .8rem; }
  .top nav a { padding: .5rem 0; }
  .points { grid-template-columns: 1fr; }
  .point { padding: 1.75rem 0 2rem; border-left: 0; }
  .point + .point { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .note, .note img { animation: none; }
}

/* Chinese: no negative tracking, and CJK faces after the Latin ones. */
:lang(zh) {
  --display: "Bricolage Grotesque", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --body: "Instrument Sans", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
:lang(zh) h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: 0; line-height: 1.15; max-width: none; }
:lang(zh) h2 { letter-spacing: 0; line-height: 1.25; }