:root {
  --night: #061018;
  --deep-ink: #081923;
  --ink: #102733;
  --moon: #edf1ee;
  --stone: #c9d2cf;
  --mist: #9daeb0;
  --mist-dim: #647c81;
  --cinnabar: #a94337;
  --cinnabar-bright: #cf5a48;
  --jade: #6f9488;
  --gold: #b9a572;
  --line: rgba(218, 228, 226, .16);
  --line-soft: rgba(218, 228, 226, .08);
  --glass: rgba(8, 25, 35, .68);
  --serif: "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: Inter, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--moon);
  background:
    radial-gradient(circle at 68% -8%, rgba(111, 148, 136, .13), transparent 34rem),
    radial-gradient(circle at 12% 20%, rgba(169, 67, 55, .07), transparent 30rem),
    linear-gradient(180deg, #06121b 0, #07141c 42%, #08171f 100%);
  font-family: var(--sans);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(circle, rgba(237,241,238,.6) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(185,165,114,.45) 0 1px, transparent 1.4px);
  background-position: 12px 18px, 84px 72px;
  background-size: 126px 126px, 183px 183px;
  opacity: .34;
  mask-image: linear-gradient(#000 0, transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(218,228,226,.04) 50%, transparent calc(50% + .5px));
}
a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
.sky-noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .025;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px 4px);
  mix-blend-mode: soft-light;
}
.shell { width: min(1380px, calc(100vw - 40px)); margin: 0 auto; padding-bottom: 36px; }

/* Celestial entrance */
.sky-hero {
  position: relative;
  min-height: 750px;
  overflow: hidden;
  isolation: isolate;
  border-inline: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(4,13,20,.88) 0, rgba(4,13,20,.34) 47%, transparent 70%),
    radial-gradient(ellipse at 72% 42%, rgba(83,123,125,.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 46%);
}
.sky-hero::before,
.sky-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.sky-hero::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 9.9%, rgba(218,228,226,.055) 10%, transparent 10.1%, transparent 89.9%, rgba(218,228,226,.055) 90%, transparent 90.1%),
    linear-gradient(180deg, transparent 20%, rgba(218,228,226,.04) 20.1%, transparent 20.2%);
}
.sky-hero::after {
  left: 6%;
  right: 6%;
  bottom: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218,228,226,.34), transparent);
}
.masthead {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 6%;
  padding: 24px 0 19px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(207,90,72,.7);
  color: var(--moon);
  background: rgba(169,67,55,.16);
  font: 400 20px/1 var(--serif);
  transform: rotate(45deg);
}
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand > span:last-child { display: grid; gap: 4px; }
.brand b { font: 650 11px/1 var(--mono); letter-spacing: .22em; }
.brand small { color: var(--mist-dim); font: 600 8px/1 var(--mono); letter-spacing: .15em; }
.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: var(--stone);
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
}
.status-pill i {
  margin-left: 5px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  color: var(--mist-dim);
  font-style: normal;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mist-dim); box-shadow: 0 0 0 4px rgba(100,124,129,.1); }
.dot.good { background: #9bc5b6; box-shadow: 0 0 15px rgba(155,197,182,.8); }
.dot.warn { background: var(--gold); box-shadow: 0 0 15px rgba(185,165,114,.7); }
.dot.bad { background: var(--cinnabar-bright); box-shadow: 0 0 15px rgba(207,90,72,.7); }

.hero-copy {
  position: relative;
  z-index: 8;
  width: min(585px, 48%);
  margin: 124px 0 0 7.5%;
}
.hero-overline { margin: 0 0 25px; color: var(--mist-dim); font: 600 9px/1.4 var(--mono); letter-spacing: .2em; }
.hero-overline span { color: var(--gold); }
.hero-title {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  margin: 0;
  width: min(580px, 100%);
  font-family: var(--serif);
}
.title-seal {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 10px 0;
  border-block: 1px solid rgba(207,90,72,.55);
  color: var(--cinnabar-bright);
  font: 400 22px/1.15 var(--serif);
  letter-spacing: .2em;
}
.title-main {
  grid-column: 2;
  grid-row: 1;
  padding-left: 24px;
  color: var(--moon);
  font: 400 clamp(4.5rem, 7.6vw, 7.8rem)/.88 var(--serif);
  letter-spacing: .06em;
  text-shadow: 0 18px 45px rgba(0,0,0,.65);
  white-space: nowrap;
}
.title-caption {
  grid-column: 2;
  grid-row: 2;
  margin: 15px 0 0 29px;
  color: var(--mist);
  font: 500 9px/1 var(--mono);
  letter-spacing: .35em;
}
.hero-intro { max-width: 450px; margin: 34px 0 0 96px; color: var(--mist); font: 400 14px/1.9 var(--serif); letter-spacing: .09em; }
.enter-realms {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin: 35px 0 0 96px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(207,90,72,.55);
  color: var(--stone);
  text-decoration: none;
  font: 500 11px/1 var(--serif);
  letter-spacing: .22em;
}
.enter-realms i { color: var(--cinnabar-bright); font: normal 13px/1 var(--mono); transition: transform .25s ease; }
.enter-realms:hover i { transform: translateY(5px); }

.hero-portrait {
  position: absolute;
  z-index: 1;
  inset: 61px 0 0 37%;
  margin: 0;
  overflow: hidden;
  background: #061018;
}
.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.9) contrast(1.03) brightness(.82);
}
.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #061018 0, rgba(6,16,24,.82) 12%, rgba(6,16,24,.2) 32%, transparent 52%),
    linear-gradient(180deg, transparent 58%, rgba(6,16,24,.25) 77%, #061018 100%);
  box-shadow: inset 0 0 75px rgba(6,16,24,.34);
}

.hero-coordinates { position: absolute; z-index: 9; left: 7.5%; right: 7.5%; bottom: 23px; display: flex; align-items: center; gap: 13px; color: var(--mist-dim); font: 500 8px/1 var(--mono); letter-spacing: .14em; }
.hero-coordinates i { width: 36px; height: 1px; background: var(--cinnabar); }
.hero-coordinates b { margin-left: auto; color: var(--jade); font-weight: 500; letter-spacing: .25em; }

/* Shared section language */
.realm-section, .system-section, .manual-section { position: relative; padding: 104px 6% 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.section-head > div { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 23px; align-items: end; }
.section-head span { grid-column: 2; grid-row: 1; color: var(--gold); font: 600 9px/1 var(--mono); letter-spacing: .22em; }
.section-head h2 { grid-column: 1 / 3; grid-row: 2; margin: 10px 0 0; color: var(--moon); font: 400 clamp(3.2rem, 6vw, 6rem)/.9 var(--serif); letter-spacing: .12em; }
.section-head h2::after { content: ""; display: inline-block; width: 90px; height: 1px; margin: 0 0 17px 18px; background: linear-gradient(90deg, var(--cinnabar), transparent); }
.section-head p { max-width: 420px; margin: 0 0 8px; color: var(--mist-dim); font: 400 13px/1.8 var(--serif); letter-spacing: .05em; }

.realm-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.realm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 248px;
  padding: 26px 27px 24px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--moon);
  background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%), rgba(7,22,31,.6);
  text-decoration: none;
  transition: color .32s ease, background .32s ease, transform .32s ease;
}
.realm-card::before { content: attr(data-index); position: absolute; right: 18px; top: 10px; color: rgba(218,228,226,.055); font: 400 78px/1 var(--serif); transition: color .32s ease, transform .32s ease; }
.realm-card::after { content: ""; position: absolute; left: 27px; right: 27px; bottom: 55px; height: 1px; background: linear-gradient(90deg, rgba(207,90,72,.5), transparent 60%); transform-origin: left; transform: scaleX(.35); transition: transform .35s ease; }
.realm-kicker { position: relative; z-index: 1; color: var(--mist-dim); font: 600 8px/1 var(--mono); letter-spacing: .16em; }
.realm-card strong { position: relative; z-index: 1; max-width: 90%; margin-top: auto; font: 400 clamp(1.35rem, 2.2vw, 2.05rem)/1.25 var(--serif); letter-spacing: .06em; }
.realm-copy { position: relative; z-index: 1; margin-top: 12px; color: var(--mist); font: 400 12px/1.6 var(--serif); letter-spacing: .04em; }
.realm-card > i { position: absolute; z-index: 2; right: 26px; bottom: 22px; color: var(--cinnabar-bright); font: normal 10px/1 var(--serif); letter-spacing: .2em; opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; }
.realm-card:hover, .realm-card:focus-visible { z-index: 2; color: #10242c; background: var(--moon); outline: 0; transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0,0,0,.32); }
.realm-card:hover::before, .realm-card:focus-visible::before { color: rgba(16,36,44,.08); transform: translateY(4px); }
.realm-card:hover::after, .realm-card:focus-visible::after { transform: scaleX(1); }
.realm-card:hover .realm-kicker, .realm-card:focus-visible .realm-kicker { color: #617276; }
.realm-card:hover .realm-copy, .realm-card:focus-visible .realm-copy { color: #40595f; }
.realm-card:hover > i, .realm-card:focus-visible > i { opacity: 1; transform: translateX(0); }
.realm-card.metaphysics::after { background: linear-gradient(90deg, rgba(185,165,114,.75), transparent 60%); }
.realm-card.calendar-realm::after { background: linear-gradient(90deg, rgba(111,148,136,.8), transparent 60%); }
.realm-card.oracle::after { background: linear-gradient(90deg, rgba(183,163,210,.65), transparent 60%); }

/* Constellation status */
.system-section { padding-top: 120px; }
.section-head.compact { align-items: center; }
#refreshButton { align-self: flex-end; margin-bottom: 8px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(207,90,72,.5); color: var(--stone); background: transparent; cursor: pointer; font: 500 10px/1 var(--serif); letter-spacing: .16em; }
#refreshButton span { display: inline-block; margin-right: 8px; color: var(--cinnabar-bright); font: 400 13px/1 var(--mono); transition: transform .35s ease; }
#refreshButton:hover span { transform: rotate(180deg); }
#refreshButton:disabled { opacity: .5; cursor: wait; }
.constellation-panel { position: relative; min-height: 330px; padding: 32px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(68,105,107,.12), transparent 53%), rgba(5,17,24,.48); }
.constellation-lines { position: absolute; inset: 0; opacity: .55; background: linear-gradient(27deg, transparent 43%, rgba(218,228,226,.09) 43.1% 43.25%, transparent 43.4%), linear-gradient(156deg, transparent 58%, rgba(185,165,114,.08) 58.1% 58.25%, transparent 58.4%); }
.service-list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line-soft); background: var(--line-soft); }
.service { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 7px 20px; min-height: 82px; padding: 17px 18px 15px 40px; color: var(--stone); background: rgba(6,18,26,.9); text-decoration: none; }
.service::before { content: ""; position: absolute; left: 18px; top: 22px; width: 5px; height: 5px; border: 1px solid var(--mist-dim); border-radius: 50%; box-shadow: 0 0 0 4px rgba(100,124,129,.06); }
.service::after { content: attr(data-index); position: absolute; right: 12px; bottom: 8px; color: rgba(218,228,226,.045); font: 400 30px/1 var(--serif); }
.service strong { grid-column: 1; font: 400 14px/1.2 var(--serif); letter-spacing: .05em; }
.service > span:not(.state) { grid-column: 1; color: var(--mist-dim); font: 500 8px/1 var(--mono); letter-spacing: .08em; }
.service .state { grid-column: 2; grid-row: 1; color: var(--mist-dim); font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.service.ok::before { border-color: #9bc5b6; background: #9bc5b6; box-shadow: 0 0 13px rgba(155,197,182,.8); }
.service.ok .state { color: #9bc5b6; }.service.fail::before { border-color: var(--cinnabar); background: var(--cinnabar); }.service.fail .state { color: var(--cinnabar-bright); }
.service:hover { background: rgba(16,42,51,.92); }

/* Research path */
.manual-section { padding-top: 120px; }
.manual-grid { display: grid; grid-template-columns: 1.35fr .65fr; border-top: 1px solid var(--line); }
.flow { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.flow li { display: flex; gap: 20px; min-height: 145px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow li > b { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid rgba(207,90,72,.45); color: var(--cinnabar-bright); font: 400 17px/1 var(--serif); }
.flow li > span { display: grid; align-content: center; gap: 9px; }
.flow strong { color: var(--stone); font: 400 14px/1.5 var(--serif); letter-spacing: .05em; }
.flow small { color: var(--mist-dim); font: 400 11px/1.5 var(--serif); letter-spacing: .03em; }
.path-panel { padding: 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(5,17,24,.35); }
.path-panel > p { margin: 0 0 24px; color: var(--stone); font: 400 13px/1 var(--serif); letter-spacing: .14em; }
.path-panel > p span { display: block; margin-top: 7px; color: var(--mist-dim); font: 500 8px/1 var(--mono); letter-spacing: .15em; }
.path-list { display: grid; gap: 4px; }
.path-list code { padding: 7px 0; border-bottom: 1px solid var(--line-soft); color: var(--mist-dim); font: 500 9px/1 var(--mono); }

.icp-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 100px 6% 0; padding: 25px 0 0; border-top: 1px solid var(--line); color: var(--mist-dim); font: 400 10px/1.6 var(--serif); letter-spacing: .03em; }
.icp-footer a { color: inherit; text-decoration: none; }.icp-footer a:hover { color: var(--stone); }
.footer-mark { color: var(--gold); letter-spacing: .22em; }

@media (max-width: 1000px) {
  .sky-hero { min-height: 700px; }
  .hero-copy { width: 55%; margin-left: 6%; }
  .hero-portrait { left: 28%; opacity: .76; }
  .realm-grid { grid-template-columns: repeat(2, 1fr); }
  .service-list { grid-template-columns: repeat(2, 1fr); }
  .manual-grid { grid-template-columns: 1fr; }
  .path-panel { border-left: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .shell { width: 100%; }
  .sky-hero { min-height: 740px; border-inline: 0; }
  .masthead { margin-inline: 20px; padding-top: 18px; }
  .brand small, .status-pill i { display: none; }
  .hero-copy { width: auto; margin: 94px 24px 0; }
  .hero-overline { font-size: 7px; }
  .hero-title { grid-template-columns: 50px minmax(0,1fr); }
  .title-seal { font-size: 16px; }
  .title-main { padding-left: 15px; font-size: clamp(3.8rem, 20vw, 5rem); letter-spacing: .01em; }
  .title-caption { margin-left: 18px; font-size: 7px; letter-spacing: .2em; }
  .hero-intro { max-width: 300px; margin: 27px 0 0 66px; font-size: 12px; }
  .enter-realms { margin-left: 66px; }
  .hero-portrait { inset: 178px -120px 0 0; opacity: .58; }
  .hero-portrait img { object-position: 52% top; }
  .hero-coordinates { left: 24px; right: 24px; }.hero-coordinates b { display: none; }
  .realm-section, .system-section, .manual-section { padding: 80px 20px 0; }
  .section-head { display: block; margin-bottom: 28px; }
  .section-head h2 { font-size: 3.5rem; }
  .section-head h2::after { width: 50px; margin-bottom: 13px; }
  .section-head p { margin-top: 20px; font-size: 12px; }
  .realm-grid, .service-list, .flow { grid-template-columns: 1fr; }
  .realm-card { min-height: 210px; }
  .section-head.compact { display: flex; align-items: flex-end; }
  .constellation-panel { padding: 10px; }
  .flow li { min-height: 125px; }
  .icp-footer { display: grid; margin: 80px 20px 0; padding-inline: 0; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Qin army visual system — style-only override, 2026-09-10 */
:root {
  --qin-black: #090a07;
  --qin-ink: #11120e;
  --qin-iron: #191a15;
  --qin-iron-light: #24251e;
  --qin-bone: #ded2b7;
  --qin-ash: #aaa18e;
  --qin-bronze: #95723f;
  --qin-gold: #c3a466;
  --qin-cinnabar: #7d261d;
  --qin-cinnabar-bright: #a63b2d;
  --qin-verdigris: #43594b;
  --qin-line: rgba(195, 164, 102, .28);
  --qin-line-soft: rgba(195, 164, 102, .12);
  --night: var(--qin-black);
  --deep-ink: var(--qin-ink);
  --ink: #171811;
  --moon: var(--qin-bone);
  --stone: #c4b99f;
  --mist: var(--qin-ash);
  --mist-dim: #756f61;
  --cinnabar: var(--qin-cinnabar);
  --cinnabar-bright: var(--qin-cinnabar-bright);
  --jade: var(--qin-verdigris);
  --gold: var(--qin-gold);
  --line: var(--qin-line);
  --line-soft: var(--qin-line-soft);
  --glass: rgba(12, 13, 10, .86);
}

html { color-scheme: dark; }

body {
  color: var(--qin-bone);
  background-color: var(--qin-black);
  background-image:
    radial-gradient(circle at 78% 8%, rgba(149, 114, 63, .11), transparent 31rem),
    radial-gradient(circle at 8% 46%, rgba(125, 38, 29, .09), transparent 34rem),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(195, 164, 102, .022) 120px 121px),
    linear-gradient(180deg, #090a07 0%, #11120e 46%, #0c0d0a 100%);
}

body::before {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(222, 210, 183, .025) 32px, transparent 33px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(195, 164, 102, .024) 80px, transparent 81px);
  background-position: 0;
  background-size: auto;
  opacity: .72;
  mask-image: linear-gradient(#000 0%, rgba(0,0,0,.72) 45%, transparent 94%);
}

body::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.48), transparent 12%, transparent 88%, rgba(0,0,0,.48)),
    repeating-linear-gradient(112deg, transparent 0 280px, rgba(149,114,63,.018) 281px 282px, transparent 283px 560px);
}

.sky-noise {
  opacity: .045;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(222,210,183,.35) 5px 5px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(0,0,0,.18) 44px 45px);
  mix-blend-mode: overlay;
}

.shell {
  width: min(1400px, calc(100vw - 34px));
  padding-bottom: 30px;
}

.sky-hero {
  min-height: 780px;
  border-inline: 1px solid var(--qin-line-soft);
  border-bottom: 2px solid var(--qin-bronze);
  background:
    linear-gradient(90deg, rgba(7,8,6,.98) 0%, rgba(9,10,7,.89) 30%, rgba(9,10,7,.38) 56%, rgba(9,10,7,.12) 76%),
    linear-gradient(180deg, rgba(195,164,102,.05), transparent 32%, rgba(0,0,0,.28));
  box-shadow: inset 0 -38px 60px rgba(0,0,0,.48);
}

.sky-hero::before {
  inset: 15px;
  border: 1px solid rgba(195,164,102,.11);
  background:
    linear-gradient(var(--qin-bronze), var(--qin-bronze)) left top / 58px 2px no-repeat,
    linear-gradient(var(--qin-bronze), var(--qin-bronze)) left top / 2px 58px no-repeat,
    linear-gradient(var(--qin-bronze), var(--qin-bronze)) right top / 58px 2px no-repeat,
    linear-gradient(var(--qin-bronze), var(--qin-bronze)) right top / 2px 58px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 11.05%, rgba(195,164,102,.035) 11.1% 11.2%);
  opacity: .88;
}

.sky-hero::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background:
    linear-gradient(135deg, transparent 22px, rgba(149,114,63,.24) 23px 24px, transparent 25px) 0 0 / 48px 48px repeat-x,
    linear-gradient(225deg, transparent 22px, rgba(149,114,63,.24) 23px 24px, transparent 25px) 24px 0 / 48px 48px repeat-x;
  opacity: .58;
}

.masthead {
  margin-inline: 5.5%;
  padding: 25px 0 20px;
  border-bottom: 1px solid rgba(195,164,102,.34);
}

.brand { gap: 14px; }

.brand-mark {
  width: 42px;
  height: 42px;
  border: 1px solid var(--qin-gold);
  color: var(--qin-bone);
  background: linear-gradient(145deg, rgba(125,38,29,.82), rgba(69,21,16,.92));
  box-shadow: 0 0 0 4px rgba(125,38,29,.14), inset 0 0 0 1px rgba(222,210,183,.12);
}

.brand b { color: var(--qin-bone); letter-spacing: .26em; }
.brand small { color: #827a69; letter-spacing: .18em; }

.status-pill {
  padding: 0 13px;
  border-inline: 1px solid rgba(195,164,102,.2);
  color: var(--qin-ash);
}

.status-pill i { color: var(--qin-bronze); border-left-color: rgba(195,164,102,.3); }
.dot.good { background: #879b76; box-shadow: 0 0 13px rgba(135,155,118,.6); }
.dot.warn { background: var(--qin-gold); }
.dot.bad { background: var(--qin-cinnabar-bright); }

.hero-copy {
  width: min(620px, 50%);
  margin: 130px 0 0 7%;
}

.hero-overline {
  margin-bottom: 30px;
  color: #756f61;
  letter-spacing: .23em;
}

.hero-overline span { color: var(--qin-gold); }

.hero-title {
  grid-template-columns: 78px minmax(0, 1fr);
  width: min(610px, 100%);
}

.title-seal {
  padding: 12px 0;
  border: 1px solid rgba(166,59,45,.72);
  color: #c95947;
  background: linear-gradient(180deg, rgba(125,38,29,.19), rgba(125,38,29,.06));
  box-shadow: inset 0 0 0 5px rgba(125,38,29,.06);
  font-size: 23px;
}

.title-main {
  padding-left: 27px;
  color: var(--qin-bone);
  font-size: clamp(4.7rem, 7.7vw, 7.9rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-shadow: 0 9px 0 rgba(0,0,0,.18), 0 24px 55px rgba(0,0,0,.75);
}

.title-caption {
  margin-left: 33px;
  color: #8c826e;
  letter-spacing: .4em;
}

.hero-intro {
  max-width: 475px;
  margin-left: 104px;
  color: #aaa18e;
  font-weight: 500;
  letter-spacing: .12em;
}

.enter-realms {
  margin-left: 104px;
  gap: 36px;
  border-bottom: 2px solid var(--qin-cinnabar);
  color: var(--qin-bone);
}

.enter-realms i { color: #c95947; }

.hero-portrait {
  inset: 63px 0 0 35%;
  background: #090a07;
}

.hero-portrait img {
  object-position: center top;
  filter: saturate(.76) sepia(.1) contrast(1.13) brightness(.75);
}

.hero-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(195,164,102,.035) 89px, transparent 90px),
    linear-gradient(180deg, rgba(149,114,63,.08), transparent 31%);
  mix-blend-mode: color-dodge;
}

.hero-portrait::after {
  z-index: 2;
  background:
    linear-gradient(90deg, #090a07 0%, rgba(9,10,7,.93) 13%, rgba(9,10,7,.45) 33%, transparent 58%),
    linear-gradient(180deg, rgba(9,10,7,.08) 54%, rgba(9,10,7,.42) 79%, #090a07 100%),
    radial-gradient(circle at 72% 38%, transparent 0 24%, rgba(68,47,24,.13) 47%, rgba(0,0,0,.28) 78%);
  box-shadow: inset 0 0 90px rgba(9,10,7,.45);
}

.hero-coordinates {
  bottom: 20px;
  color: #6e6758;
}

.hero-coordinates i { width: 44px; background: var(--qin-cinnabar); }
.hero-coordinates b { color: var(--qin-bronze); }

.realm-section,
.system-section,
.manual-section { padding-inline: 5.5%; }

.realm-section::before,
.system-section::before,
.manual-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 108px;
  width: 22px;
  height: 6px;
  border-block: 1px solid var(--qin-cinnabar);
}

.section-head { margin-bottom: 42px; }
.section-head span { color: var(--qin-gold); }

.section-head h2 {
  color: var(--qin-bone);
  font-weight: 600;
  text-shadow: 0 13px 32px rgba(0,0,0,.44);
}

.section-head h2::after {
  width: 110px;
  height: 2px;
  background: linear-gradient(90deg, var(--qin-cinnabar-bright), var(--qin-bronze), transparent);
}

.section-head p { color: #827a69; }

.realm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(195,164,102,.32);
  background:
    linear-gradient(135deg, rgba(125,38,29,.08), transparent 28%),
    rgba(8,9,7,.7);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.75), 0 28px 60px rgba(0,0,0,.25);
}

.realm-card {
  min-height: 244px;
  padding: 28px 29px 25px;
  border: 1px solid rgba(195,164,102,.19);
  background:
    linear-gradient(145deg, rgba(195,164,102,.055), transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(195,164,102,.018) 50px),
    rgba(20,21,17,.91);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.18);
  transition: color .28s ease, background .28s ease, transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.realm-card::before {
  right: 17px;
  top: 13px;
  color: rgba(195,164,102,.11);
  font-size: 74px;
  font-weight: 700;
}

.realm-card::after {
  left: 29px;
  right: 29px;
  bottom: 57px;
  height: 2px;
  background: linear-gradient(90deg, var(--qin-cinnabar-bright), rgba(195,164,102,.55), transparent 76%);
}

.realm-kicker { color: #786f5e; letter-spacing: .18em; }

.realm-card strong {
  color: var(--qin-bone);
  font-weight: 600;
  letter-spacing: .08em;
}

.realm-copy { color: #a19884; }
.realm-card > i { color: #d0aa68; }

.realm-card:hover,
.realm-card:focus-visible {
  color: #16150f;
  border-color: var(--qin-gold);
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 34%),
    #c5b58f;
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(0,0,0,.48), inset 0 0 0 4px rgba(125,38,29,.1);
}

.realm-card:hover strong,
.realm-card:focus-visible strong { color: #181710; }
.realm-card:hover::before,
.realm-card:focus-visible::before { color: rgba(82,48,24,.12); }
.realm-card:hover .realm-kicker,
.realm-card:focus-visible .realm-kicker { color: #5f4d31; }
.realm-card:hover .realm-copy,
.realm-card:focus-visible .realm-copy { color: #463f32; }
.realm-card.metaphysics::after,
.realm-card.calendar-realm::after,
.realm-card.oracle::after { background: linear-gradient(90deg, var(--qin-cinnabar-bright), rgba(195,164,102,.6), transparent 76%); }

#refreshButton {
  border-bottom: 2px solid var(--qin-cinnabar);
  color: var(--qin-bone);
}

#refreshButton span { color: var(--qin-gold); }

.constellation-panel {
  min-height: 330px;
  border: 1px solid rgba(195,164,102,.3);
  background:
    repeating-linear-gradient(90deg, transparent 0 11.05%, rgba(195,164,102,.025) 11.1% 11.2%),
    linear-gradient(180deg, rgba(36,37,30,.72), rgba(12,13,10,.86));
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.24);
}

.constellation-lines {
  opacity: .7;
  background:
    linear-gradient(32deg, transparent 46%, rgba(125,38,29,.18) 46.1% 46.25%, transparent 46.4%),
    linear-gradient(148deg, transparent 58%, rgba(195,164,102,.1) 58.1% 58.25%, transparent 58.4%);
}

.service-list {
  border: 1px solid rgba(195,164,102,.18);
  background: rgba(195,164,102,.12);
}

.service {
  min-height: 84px;
  color: var(--qin-bone);
  background: rgba(14,15,12,.95);
  box-shadow: inset 3px 0 0 rgba(125,38,29,.4);
}

.service::before { border-radius: 0; transform: rotate(45deg); }
.service::after { color: rgba(195,164,102,.075); }
.service:hover { background: rgba(42,38,28,.96); }
.service.ok::before { border-color: #879b76; background: #879b76; }

.manual-grid { border-top: 2px solid var(--qin-bronze); }
.flow { border-left-color: rgba(195,164,102,.22); }

.flow li {
  border-color: rgba(195,164,102,.2);
  background: linear-gradient(135deg, rgba(195,164,102,.035), transparent 45%);
}

.flow li > b {
  border: 1px solid var(--qin-cinnabar-bright);
  color: #c95947;
  background: rgba(125,38,29,.11);
  box-shadow: inset 0 0 0 3px rgba(125,38,29,.08);
}

.flow strong { color: var(--qin-bone); }
.flow small { color: #807866; }

.path-panel {
  border-color: rgba(195,164,102,.2);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(195,164,102,.024) 32px),
    rgba(12,13,10,.72);
}

.path-panel > p { color: var(--qin-bone); }
.path-list code { border-color: rgba(195,164,102,.1); color: #8c826e; }

.icp-footer {
  border-top: 2px solid rgba(149,114,63,.54);
  color: #746d5e;
}

.footer-mark { color: var(--qin-gold); }

@media (max-width: 1000px) {
  .hero-copy { width: 57%; }
  .hero-portrait { left: 25%; opacity: .78; }
  .realm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body {
    background-image:
      radial-gradient(circle at 90% 5%, rgba(149,114,63,.09), transparent 20rem),
      linear-gradient(180deg, #090a07, #11120e 52%, #0c0d0a);
  }
  .sky-hero { min-height: 760px; }
  .sky-hero::before { inset: 9px; }
  .masthead { margin-inline: 20px; }
  .status-pill { padding-inline: 8px; border-right: 0; }
  .hero-copy { width: auto; margin: 98px 24px 0; }
  .hero-title { grid-template-columns: 52px minmax(0, 1fr); }
  .title-main { padding-left: 16px; font-size: clamp(3.75rem, 20vw, 5rem); }
  .title-caption { margin-left: 19px; }
  .hero-intro { margin-left: 68px; }
  .enter-realms { margin-left: 68px; }
  .hero-portrait { inset: 170px -150px 0 -20px; opacity: .55; }
  .hero-portrait img { object-position: 58% top; }
  .hero-portrait::after {
    background:
      linear-gradient(90deg, #090a07 0%, rgba(9,10,7,.86) 22%, rgba(9,10,7,.28) 62%, transparent),
      linear-gradient(180deg, transparent 50%, rgba(9,10,7,.52) 80%, #090a07 100%);
  }
  .realm-section::before,
  .system-section::before,
  .manual-section::before { display: none; }
  .realm-grid { grid-template-columns: 1fr; gap: 6px; padding: 6px; }
  .realm-card { min-height: 205px; }
  .constellation-panel { padding: 9px; }
  .icp-footer { border-top-width: 1px; }
}

/* 2026-10-17: airy blue-gray homepage; existing layout and destinations are preserved. */
:root {
  --qin-black:#f3f7fb; --qin-ink:#eaf1f8; --qin-bone:#20344b;
  --qin-ash:#5c7087; --qin-bronze:#8aa6c3; --qin-gold:#4679a8;
  --qin-cinnabar:#4579ad; --qin-cinnabar-bright:#326ca5; --qin-verdigris:#438a81;
  --qin-line:rgba(70,105,145,.2); --qin-line-soft:rgba(70,105,145,.1);
  --night:#f3f7fb; --deep-ink:#eaf1f8; --ink:#20344b; --moon:#20344b;
  --stone:#405b78; --mist:#5c7087; --mist-dim:#768da5;
  --cinnabar:#4579ad; --cinnabar-bright:#326ca5; --jade:#438a81; --gold:#4679a8;
  --line:rgba(70,105,145,.2); --line-soft:rgba(70,105,145,.1); --glass:rgba(255,255,255,.8);
}
html { color-scheme:light; }
body { color:#20344b; background:radial-gradient(ellipse at 80% 0%,#dceafa 0%,transparent 45%),linear-gradient(180deg,#f3f7fb,#edf4fa 60%,#f8fafc); }
body::before, body::after, .sky-noise { opacity:0; }
.sky-hero { background:linear-gradient(125deg,rgba(255,255,255,.85),rgba(225,237,250,.5)); border-color:var(--line); box-shadow:none; }
.sky-hero::before { border-color:var(--line-soft); background:none; }
.sky-hero::after { background:linear-gradient(90deg,transparent,#b9cee3,transparent); height:1px; opacity:1; }
.masthead { border-color:var(--line); }
.brand-mark { color:#fff; border-color:#4579ad; background:#4579ad; box-shadow:0 3px 12px rgba(69,121,173,.16); }
.brand small, .hero-overline, .title-caption, .hero-intro, .hero-coordinates, .realm-kicker, .realm-copy, .flow small, .path-list code, .icp-footer { color:#5c7087; }
.status-pill, .status-pill i { border-color:var(--line); }
.dot.good { background:#438a81; box-shadow:0 0 0 4px rgba(67,138,129,.12); }
.title-seal { color:#326ca5; border-color:#9bb8d5; background:rgba(223,236,249,.7); box-shadow:none; }
.title-main { color:#20344b; text-shadow:none; }
.enter-realms i, .hero-overline span, .hero-coordinates b, .realm-card > i, #refreshButton span, .footer-mark { color:#326ca5; }
.hero-portrait { background:transparent; opacity:.45; }
.hero-portrait img { filter:grayscale(1) brightness(1.7); opacity:.32; mix-blend-mode:multiply; }
.hero-portrait::before { background:none; }
.hero-portrait::after { background:linear-gradient(90deg,#f3f7fb,rgba(243,247,251,.8) 15%,transparent 60%),linear-gradient(180deg,transparent 45%,#edf4fa); box-shadow:none; }
.realm-section::before, .system-section::before, .manual-section::before { opacity:.2; }
.realm-grid { background:transparent; border-color:var(--line); }
.realm-card { background:rgba(255,255,255,.9); border-color:var(--line); box-shadow:0 4px 18px rgba(54,89,126,.04); }
.realm-card::before { color:rgba(70,121,168,.09); }
.realm-card::after, .realm-card.metaphysics::after, .realm-card.calendar-realm::after, .realm-card.oracle::after { background:linear-gradient(90deg,#6b9ac6,transparent 76%); }
.realm-card strong, .flow strong, .path-panel > p { color:#20344b; }
.realm-card:hover, .realm-card:focus-visible { background:#e7f1fb; color:#20344b; border-color:#87add0; box-shadow:0 12px 28px rgba(54,89,126,.12); }
.realm-card:hover strong, .realm-card:focus-visible strong { color:#20344b; }
.realm-card:hover .realm-kicker, .realm-card:focus-visible .realm-kicker, .realm-card:hover .realm-copy, .realm-card:focus-visible .realm-copy { color:#405b78; }
.realm-card:hover::before, .realm-card:focus-visible::before { color:rgba(70,121,168,.12); }
.constellation-panel { background:rgba(255,255,255,.7); border-color:var(--line); box-shadow:none; }
.constellation-lines { background:none; }
.service-list { background:#dae5ef; border-color:var(--line); }
.service { color:#20344b; background:#fff; box-shadow:inset 3px 0 0 #b4cce2; }
.service::after { color:rgba(70,121,168,.08); }
.service:hover { background:#edf5fc; }
.service.ok::before { background:#438a81; border-color:#438a81; }
.manual-grid, .flow, .flow li, .path-panel, .path-list code, .icp-footer { border-color:var(--line); }
.flow li { background:rgba(255,255,255,.4); }
.flow li > b { color:#326ca5; border-color:#9bb8d5; background:#e5eff9; box-shadow:none; }
.path-panel { background:rgba(255,255,255,.65); }
@media(max-width:640px) {
  body { background:linear-gradient(180deg,#f3f7fb,#edf4fa 60%,#f8fafc); }
  .hero-portrait { opacity:.32; }
  .hero-portrait::after { background:linear-gradient(90deg,#f3f7fb,rgba(243,247,251,.7) 25%,transparent),linear-gradient(180deg,transparent 45%,#edf4fa); }
}
.section-head h2 { text-shadow:none; }
.realm-grid { box-shadow:0 8px 30px rgba(54,89,126,.06); }
/* Keep the portrait vivid; only blend its edges into the light page. */
.hero-portrait { opacity:1; }
.hero-portrait img { opacity:1; filter:none; mix-blend-mode:normal; }
.hero-portrait::after {
  background:linear-gradient(90deg,#f3f7fb,rgba(243,247,251,.75) 10%,transparent 30%),linear-gradient(180deg,transparent 78%,#edf4fa);
}
@media(max-width:640px) {
  .hero-portrait { opacity:1; }
  .hero-portrait::after { background:linear-gradient(90deg,#f3f7fb,rgba(243,247,251,.9) 30%,transparent 75%),linear-gradient(180deg,transparent 78%,#edf4fa); }
}

/* Home PWA install card and iOS safe areas. */
.portal-install { margin:24px 0;padding:26px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.58);color:var(--ink); }
.portal-install-kicker { font-size:11px;letter-spacing:.12em;color:var(--mist-dim); }
.portal-install h2 { margin:8px 0;font-size:23px; }
.portal-install p,.portal-install li { font-size:14px;line-height:1.8; }
.portal-install summary { padding:12px 0;min-height:44px;cursor:pointer;font-weight:600;color:#285e7a; }
.portal-install ol { padding-left:22px; }
@media(max-width:700px) {
 .portal-install { margin:20px;padding:20px; }
 .masthead { padding-top:max(18px,env(safe-area-inset-top)); }
 .icp-footer { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
 .shell { padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); }
}