:root {
  --bg: #050505;
  --surface: #0d0e10;
  --surface-2: #15161a;
  --line: #292b31;
  --soft-line: #1a1b1f;
  --text: #f2f2ef;
  --muted: #a0a2a8;
  --dim: #707279;
  --indigo: #9697ff;
  --cyan: #71d7e8;
  --green: #92e6b7;
  --amber: #e8b86b;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: #5b5cb9; color: white; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: white; color: black; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.site-header { height: 68px; padding: 0 clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--soft-line); background: rgba(5,5,5,.94); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 650; letter-spacing: -.02em; }
.brand i { color: var(--dim); font-style: normal; font-weight: 450; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #44464e; border-radius: 9px; background: var(--surface-2); font-size: 15px; }
.site-header nav { display: flex; align-items: center; gap: 28px; color: #b8b9be; font-size: 13px; }
.site-header a:hover { color: white; }

.hero { min-height: 660px; max-width: 1320px; margin: 0 auto; padding: 110px 40px 75px; display: flex; flex-direction: column; justify-content: center; }
.kicker, .section-label { color: var(--muted); font: 500 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.kicker { display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.kicker span { width: 22px; height: 1px; background: var(--indigo); box-shadow: 13px 0 var(--cyan); }
.hero h1 { margin: 30px 0 28px; max-width: 1050px; font-size: clamp(62px, 9.2vw, 130px); line-height: .88; letter-spacing: -.078em; font-weight: 540; }
.hero-copy { max-width: 760px; margin: 0; color: #b7b8bd; font-size: clamp(18px, 2vw, 24px); line-height: 1.55; letter-spacing: -.015em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 65px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; }
.hero-meta code { color: #c5c6ff; }

.architecture-story { max-width: 1380px; margin: 0 auto; padding: 95px 40px 140px; display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: clamp(55px, 7vw, 110px); border-top: 1px solid var(--soft-line); }
.story-nav { align-self: start; position: sticky; top: 108px; }
.story-nav h2 { margin: 18px 0; font-size: 42px; line-height: 1; letter-spacing: -.055em; font-weight: 540; }
.story-nav > p:not(.section-label) { color: var(--muted); font-size: 13px; line-height: 1.6; }
.stage-list { margin-top: 38px; border-top: 1px solid var(--line); }
.stage-list button { width: 100%; min-height: 72px; padding: 14px 10px; display: grid; grid-template-columns: 34px 1fr; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.stage-list button span { grid-row: 1 / 3; color: #575961; font: 10px ui-monospace, monospace; padding-top: 3px; }
.stage-list strong { color: #9b9da4; font-size: 13px; font-weight: 540; }
.stage-list small { margin-top: 4px; color: #62646b; font-size: 11px; }
.stage-list button:hover strong, .stage-list button[aria-pressed="true"] strong { color: white; }
.stage-list button[aria-pressed="true"] { background: #0c0d10; box-shadow: inset 2px 0 var(--indigo); }
.stage-list button[aria-pressed="true"] span { color: var(--indigo); }
.play-button { margin-top: 20px; padding: 9px 12px; border: 1px solid #3a3c44; border-radius: 8px; background: #111216; color: #c7c8cc; font-size: 11px; cursor: pointer; }
.play-button:hover { border-color: #595c68; color: white; }
.play-button span { margin-right: 8px; color: var(--cyan); }

.system-widget { min-width: 0; border: 1px solid #2e3037; border-radius: 17px; background: #090a0c; box-shadow: 0 30px 100px rgba(0,0,0,.5); overflow: hidden; }
.widget-header { height: 48px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: #777980; font: 9px ui-monospace, monospace; letter-spacing: .08em; }
.widget-header > div { display: flex; align-items: center; gap: 8px; color: #a8a9af; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(146,230,183,.8); }
.stage-copy { min-height: 150px; padding: 31px 32px 26px; border-bottom: 1px solid var(--line); }
.stage-copy h2 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.05em; font-weight: 540; }
.stage-copy p { max-width: 670px; margin: 0; color: #96989f; font-size: 13px; line-height: 1.55; }

.flow-map { min-height: 330px; padding: 70px 28px 65px; display: grid; grid-template-columns: minmax(105px,1fr) 42px minmax(115px,1.15fr) 42px minmax(115px,1.2fr) 54px minmax(115px,1.2fr) 42px minmax(105px,1fr); align-items: center; background-image: radial-gradient(#30323a 0.7px, transparent .7px); background-size: 13px 13px; }
.flow-node { min-width: 0; min-height: 138px; padding: 18px 15px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #383a42; border-radius: 13px; background: rgba(13,14,17,.94); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.flow-node:hover, .flow-node.is-active { transform: translateY(-3px); border-color: #70727f; background: #15161b; }
.flow-node:focus-visible, .ownership-card:focus-visible, .stage-list button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.flow-node .node-icon { width: 29px; height: 29px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid #4a4c55; border-radius: 8px; color: #bfc0c6; font: 10px ui-monospace, monospace; }
.flow-node small { color: #65676f; font: 8px ui-monospace, monospace; letter-spacing: .08em; }
.flow-node strong { margin-top: 5px; color: #d9dadd; font-size: 13px; font-weight: 570; white-space: nowrap; }
.flow-node em { margin-top: 4px; color: #686a72; font-size: 9px; font-style: normal; }
.flow-node.hubu.is-active { border-color: #7375d4; box-shadow: 0 0 35px rgba(124,126,255,.11); }
.flow-node.gongbu.is-active { border-color: #4aaabd; box-shadow: 0 0 35px rgba(77,204,225,.1); }
.flow-link { position: relative; height: 1px; background: #3a3c44; }
.flow-link::after { content: ""; position: absolute; top: -3px; right: -1px; width: 6px; height: 6px; border-top: 1px solid #777981; border-right: 1px solid #777981; transform: rotate(45deg); }
.flow-link i { position: absolute; left: 0; top: -1px; width: 0; height: 3px; background: var(--indigo); box-shadow: 0 0 9px currentColor; transition: width .45s ease; }
.flow-link.is-active i { width: 100%; }
.flow-link b { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 80px; color: #777980; font: 7px ui-monospace, monospace; text-align: center; }

.ownership-grid { margin: 0 28px 28px; display: grid; grid-template-columns: 1fr 92px 1fr; align-items: stretch; }
.ownership-card { padding: 22px; border: 1px dashed #3c3f48; border-radius: 12px; background: #0d0e11; text-align: left; cursor: pointer; }
.ownership-card:hover { background: #121318; }
.ownership-card > span { color: var(--dim); font: 8px ui-monospace, monospace; letter-spacing: .1em; }
.ownership-card > div { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.ownership-card b { padding: 5px 7px; border: 1px solid #2e3037; border-radius: 5px; color: #b5b6bc; font: 9px ui-monospace, monospace; }
.ownership-card small { color: #62646b; font-size: 10px; }
.hubu-card { border-color: #42436f; }
.gongbu-card { border-color: #315761; }
.boundary-marker { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #62646b; font: 7px ui-monospace, monospace; text-align: center; }
.boundary-marker::before, .boundary-marker::after { content: ""; width: 1px; flex: 1; background: #34363d; }
.boundary-marker b { color: #8c8e95; font-weight: 500; }
.outcome-strip { min-height: 58px; padding: 0 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #111216; }
.outcome-strip span { color: #696b72; font: 8px ui-monospace, monospace; letter-spacing: .1em; }
.outcome-strip p { margin: 0; color: #b7b8ff; font: 10px ui-monospace, monospace; }

.component-section { max-width: 1300px; margin: 0 auto; padding: 135px 40px; border-top: 1px solid var(--soft-line); }
.component-intro { display: grid; grid-template-columns: .6fr 1fr; gap: 30px 70px; margin-bottom: 65px; }
.component-intro .section-label { padding-top: 12px; }
.component-intro h2 { margin: 0; font-size: clamp(48px, 6vw, 78px); line-height: .95; letter-spacing: -.065em; font-weight: 540; }
.component-intro > p:last-child { grid-column: 2; max-width: 620px; margin: 0; color: var(--muted); line-height: 1.6; }
.component-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 50px; }
.component-tabs { border-top: 1px solid var(--line); }
.component-tabs button { width: 100%; min-height: 58px; padding: 0 10px; display: flex; align-items: center; gap: 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #85878e; text-align: left; font-size: 12px; cursor: pointer; }
.component-tabs button span { color: #53555c; font: 9px ui-monospace, monospace; }
.component-tabs button:hover, .component-tabs button[aria-selected="true"] { color: white; background: #0c0d10; }
.component-tabs button[aria-selected="true"] { box-shadow: inset 2px 0 var(--indigo); }
.component-detail { min-height: 520px; padding: 42px; border: 1px solid var(--line); border-radius: 14px; background: #0b0c0e; }
.component-detail > p:first-child { color: var(--indigo); font: 9px ui-monospace, monospace; letter-spacing: .1em; }
.component-detail h3 { margin: 16px 0 14px; font-size: clamp(34px, 4vw, 54px); line-height: 1; letter-spacing: -.055em; font-weight: 540; }
.component-detail > p:nth-child(3) { max-width: 760px; color: #a2a4aa; line-height: 1.65; }
.detail-map { margin-top: 34px; padding: 24px; border: 1px solid #252832; border-radius: 10px; background: #08090b; overflow: hidden; }
.detail-map > p { margin: 0 0 18px; color: #656872; font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.detail-diagram { margin: 0; padding: 0; display: flex; align-items: stretch; gap: 26px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.detail-diagram li { position: relative; min-width: 128px; flex: 1 0 128px; padding: 14px 13px; border: 1px solid #30333d; border-radius: 8px; background: #101116; }
.detail-diagram li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); color: var(--cyan); font: 13px ui-monospace, monospace; }
.detail-diagram strong, .detail-diagram span { display: block; }
.detail-diagram strong { color: #e5e6e9; font-size: 11px; font-weight: 560; line-height: 1.35; }
.detail-diagram span { margin-top: 7px; color: #6f727c; font: 9px/1.4 ui-monospace, monospace; }
.detail-columns { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr .9fr; gap: 45px; }
.detail-columns h4 { margin: 0 0 15px; color: #ddd; font-size: 11px; font-weight: 560; }
.detail-columns ul { margin: 0; padding: 0; list-style: none; }
.detail-columns li { margin: 0 0 11px; color: #85878e; font-size: 11px; line-height: 1.5; }
.detail-columns li::before { content: "·"; margin-right: 8px; color: var(--indigo); }
.source-links a { color: #babaff; }
.source-links a:hover { color: white; text-decoration: underline; text-underline-offset: 3px; }
.source-links li::before { color: var(--cyan); }

.principles { max-width: 1300px; margin: 0 auto; padding: 0 40px 140px; display: grid; grid-template-columns: repeat(3, 1fr); }
.principles article { min-height: 320px; padding: 28px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.principles article:first-child { border-left: 1px solid var(--line); }
.principles span { color: #5e6067; font: 9px ui-monospace, monospace; }
.principles h2 { margin: 78px 0 16px; font-size: 28px; letter-spacing: -.04em; font-weight: 540; }
.principles p { color: #878990; font-size: 12px; line-height: 1.6; }
footer { max-width: 1220px; margin: 0 auto; padding: 30px 24px 60px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 25px; color: var(--dim); font-size: 12px; }
footer span { color: #d7d8da; font-weight: 620; } footer p { flex: 1; } footer a:hover { color: white; }

body[data-stage="discover"] .flow-node.agent,
body[data-stage="discover"] .flow-node.mcp,
body[data-stage="authorize"] .flow-node.agent,
body[data-stage="authorize"] .flow-node.mcp,
body[data-stage="authorize"] .flow-node.hubu,
body[data-stage="execute"] .flow-node.hubu,
body[data-stage="execute"] .flow-node.gongbu,
body[data-stage="execute"] .flow-node.provider,
body[data-stage="settle"] .flow-node.provider,
body[data-stage="settle"] .flow-node.gongbu,
body[data-stage="settle"] .flow-node.hubu { transform: translateY(-3px); border-color: #696b78; background: #15161b; }

@media (max-width: 1120px) {
  .architecture-story { grid-template-columns: 230px minmax(0,1fr); gap: 40px; }
  .flow-map { grid-template-columns: repeat(5, 1fr); gap: 9px; padding-inline: 18px; }
  .flow-link { display: none; }
  .flow-node { min-height: 125px; padding: 14px 11px; }
  .flow-node strong { white-space: normal; }
}
@media (max-width: 820px) {
  .hero { min-height: 560px; padding-inline: 24px; }
  .architecture-story { display: block; padding: 80px 20px; }
  .story-nav { position: static; margin-bottom: 35px; }
  .stage-list { display: grid; grid-template-columns: 1fr 1fr; }
  .stage-list button { border: 1px solid var(--line); }
  .flow-map { grid-template-columns: 1fr 1fr; }
  .flow-node:last-child { grid-column: 1 / -1; }
  .ownership-grid { grid-template-columns: 1fr; gap: 10px; }
  .boundary-marker { min-height: 50px; flex-direction: row; }
  .boundary-marker::before, .boundary-marker::after { width: auto; height: 1px; }
  .component-section { padding: 90px 22px; }
  .component-intro { display: block; }
  .component-intro h2 { margin: 20px 0; }
  .component-intro > p:last-child { margin-top: 20px; }
  .component-layout { grid-template-columns: 1fr; gap: 22px; }
  .component-tabs { display: flex; overflow-x: auto; }
  .component-tabs button { min-width: 160px; }
  .detail-columns { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; padding: 0 22px 90px; }
  .principles article { min-height: 240px; border-left: 1px solid var(--line); }
  .principles h2 { margin-top: 48px; }
}
@media (max-width: 540px) {
  .site-header nav a:first-child { display: none; }
  .hero h1 { font-size: 62px; }
  .hero-meta { gap: 14px; flex-direction: column; }
  .stage-list { grid-template-columns: 1fr; }
  .stage-copy { padding: 26px 20px; }
  .flow-map { grid-template-columns: 1fr; padding: 32px 20px; }
  .flow-node:last-child { grid-column: auto; }
  .ownership-grid { margin-inline: 20px; }
  .outcome-strip { align-items: flex-start; flex-direction: column; padding-block: 16px; }
  .component-detail { padding: 25px; }
  footer { flex-wrap: wrap; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }