/* YiChen Cloud: palette approximated from the supplied logo screenshot.
   Orange is darkened for small text; the original bright tone remains in accents. */
:root {
  --brand-blue: #194f90;
  --brand-orange: #f39200;
  --paper: #ffffff;
  --ink: #194f90;
  --muted: #53677e;
  --orange: #a95100;
  --border: #d7e2ef;
  --surface: #f0f6fd;
  --on-blue-muted: #d4e4f7;
}
body { color: #233b57; }
h1, h2, h3, .brand, .header nav, .number, .principles strong { color: var(--brand-blue); }
.accent { color: #cf7100; }
.brand-light { color: var(--orange); }
.mark { background: var(--brand-blue); color: white; border-bottom: 3px solid var(--brand-orange); }
.line { background: var(--brand-orange); }
.button { background: var(--brand-blue); color: white; box-shadow: 0 4px 12px #194f9014; }
.button:hover { background: #103b70; color: white; }
.button span { color: #ffba4a; }
.nav-about { border-color: var(--brand-blue); }
.header nav { flex-wrap: wrap; }
.header nav a { white-space: nowrap; }
.nav-git { font-weight: 600; }
.nav-git span { color: var(--orange); }
.nav-git:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 5px; }
.flow-panel {
  background-color: var(--surface);
  background-image: radial-gradient(#bfcee2 .65px, transparent .65px);
  border: 1px solid #dbe6f3;
}
.panel-top, .flow-title, .flow-node strong, .core { color: var(--brand-blue); }
.diagram-label { border-color: #bacde4; background: white; }
.flow-node { background: white; border-color: #bfcfe3; box-shadow: 3px 4px 0 #dae6f4; }
.node-index { color: #526c8c; }
.connector { color: #a95100; }
.core { background: var(--brand-blue); color: white; outline-color: #f5b552; }
.core span { color: #ffc56a; }
.panel-foot { border-color: #c6d7eb; color: #425f80; }
.principles { background: #f8faff; }
.primary { background: var(--brand-blue); border-color: var(--brand-blue); color: white; }
.primary h3, .primary .number { color: white; }
.badge { border-color: #94afcf; color: #385b83; background: #f0f6fd; }
.primary .badge { border-color: #8daed5; color: white; background: #ffffff0a; }
.product-card li::marker { color: #a95100; }
.primary li::marker { color: #ffb745; }
.card-bottom { border-color: #d7e2ef; }
.primary .card-bottom { border-color: #638bbb; }
.ecosystem { background: var(--surface); }
.role-board { background: white; border-color: #c0d2e7; }
.role-heading { color: var(--brand-blue); }
.roles strong { color: var(--brand-blue); }
.timeline { border-top-color: var(--brand-blue); }
.about { background: var(--brand-blue); color: white; }
.about h2 { color: white; }
.about .eyebrow { color: #ffc56a; }
.about > div > p:last-child, .about-aside > span { color: var(--on-blue-muted); }
.about-aside { border-color: #7596be; }
.about a:hover { color: #ffc56a; }
::selection { color: #103b70; background: #ffe0ae; }
/* Display the supplied original without modifying or redrawing its pixels.
   The viewport excludes only white margins (x220 y240 width580 height445). */
.header { min-height: 128px; }
.company-logo, .footer-top .company-logo {
  display: block; position: relative; overflow: hidden;
  width: 130px; height: 100px; flex: 0 0 130px;
}
.company-logo img {
  position: absolute; width: 176.552%; height: auto; max-width: none;
  left: -37.931%; top: -53.933%;
}
@media (max-width: 760px) {
  .header { padding-block: 12px 20px; }
  .footer-top .company-logo { margin-right: calc(100% - 130px); }
}