@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f5f7fb;
  --surface: #fff;
  --ink: #101d2e;
  --muted: #627286;
  --line: #dfe5ed;
  --blue: #1466e8;
  --cyan: #00a7c5;
  --orange: #f08a47;
  --navy: #0b192b;
  --serif: Georgia, 'Songti SC', serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 20; background: transparent; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--orange)); }

.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px max(32px, calc((100vw - 1160px) / 2)); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; line-height: 1.15; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: var(--ink); color: white; font-family: var(--serif); font-size: 23px; font-weight: 700; transform: rotate(-7deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 13px; letter-spacing: .01em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.top-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 28px; color: var(--muted); font-size: 12px; font-weight: 600; }
.top-nav a { transition: color .2s ease; }
.top-nav a:hover, .mail-link:hover { color: var(--blue); }
.top-nav .nav-github { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.theme-toggle { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }

.hero { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; min-height: 620px; align-items: center; gap: 40px; padding-top: 70px; padding-bottom: 74px; }
.hero-copy { position: relative; z-index: 1; max-width: 640px; }
.eyebrow, .kicker, .signal-label, .frame-label, .chapter-status, .path-card small { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--blue); font-size: 10px; font-weight: 500; }
.live-dot, .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 14%, transparent); }
.hero h1 { max-width: 630px; margin: 0; font-size: clamp(42px, 5.6vw, 75px); line-height: 1.09; letter-spacing: -.06em; font-weight: 700; }
.hero h1 strong { display: block; color: var(--blue); font-family: var(--serif); font-size: 1.08em; font-style: italic; font-weight: 700; letter-spacing: -.08em; }
.hero h1 .title-phrase { display: inline-block; white-space: nowrap; }
.hero-lede { max-width: 520px; margin: 26px 0 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 43px; padding: 0 18px; border-radius: 5px; font-size: 12px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 9px 20px color-mix(in srgb, var(--blue) 22%, transparent); }
.button-primary:hover { box-shadow: 0 12px 26px color-mix(in srgb, var(--blue) 29%, transparent); }
.button-quiet { color: var(--ink); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 75%, transparent); }
.hero-meta { display: flex; gap: 24px; margin-top: 45px; color: var(--muted); font-size: 11px; }
.hero-meta b { margin-right: 4px; color: var(--ink); font-family: var(--mono); font-size: 17px; }
.hero-art { position: relative; min-height: 490px; }
.art-glow { position: absolute; width: 430px; height: 430px; top: 42px; left: 74px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 21%, transparent), transparent 68%); filter: blur(4px); }
.book-frame { position: absolute; top: 16px; right: 62px; width: 286px; transform: rotate(4deg); border: 9px solid #fff; background: #fff; box-shadow: 17px 22px 50px rgba(23, 47, 75, .2); }
.book-frame img { display: block; width: 100%; height: 405px; object-fit: cover; object-position: center; }
.book-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(255,255,255,.7); pointer-events: none; }
.frame-label { position: absolute; z-index: 2; left: 17px; color: rgba(255,255,255,.92); font-size: 7px; text-shadow: 0 1px 8px #102744; }
.frame-label-top { top: 15px; }.frame-label-bottom { bottom: 13px; }
.float-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.8); border-radius: 8px; background: rgba(255,255,255,.84); box-shadow: 0 11px 27px rgba(20, 45, 72, .11); backdrop-filter: blur(12px); font-size: 10px; }
.float-card b, .float-card small { display: block; }.float-card small { margin-top: 2px; color: var(--muted); font-size: 9px; }.mini-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: #e9f1ff; color: var(--blue); font-size: 16px; }.mini-icon-cyan { background: #e3f8f9; color: var(--cyan); }.float-card-a { top: 99px; left: 19px; }.float-card-b { right: 8px; bottom: 83px; }

.signal-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-strip > div { min-height: 89px; padding: 20px 22px 18px 0; border-right: 1px solid var(--line); }.signal-strip > div:not(:first-child) { padding-left: 22px; }.signal-strip > div:last-child { border-right: 0; }
.signal-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; }.signal-strip strong { display: block; font-size: 11px; font-weight: 600; }.signal-strip .mono { font-family: var(--mono); font-size: 10px; }.signal-strip .status-dot { width: 5px; height: 5px; margin-right: 5px; box-shadow: none; }

.section { padding-top: 135px; padding-bottom: 140px; }.section-heading { max-width: 720px; }.kicker { margin: 0 0 16px; color: var(--blue); font-size: 10px; font-weight: 500; }.section-heading h2 { margin: 0; font-size: clamp(33px, 4.1vw, 54px); line-height: 1.15; letter-spacing: -.06em; }.section-heading h2 em { color: var(--blue); font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.07em; }.section-heading > p:last-child { max-width: 560px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }.principle-card { min-height: 244px; padding: 25px 27px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }.card-index { color: var(--orange); font-family: var(--mono); font-size: 11px; }.principle-card h3 { margin: 45px 0 12px; font-size: 20px; letter-spacing: -.04em; }.principle-card p { max-width: 250px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.card-line { display: block; width: 31px; height: 3px; margin-top: 27px; background: var(--blue); }.principle-card:nth-child(2) .card-line { background: var(--cyan); }.principle-card:nth-child(3) .card-line { background: var(--orange); }

.flow-section, .evidence-section { position: relative; overflow: hidden; color: #fff; background: var(--navy); }.flow-section::before, .evidence-section::before { content: ''; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, #000, transparent 85%); }.flow-section .shell, .evidence-section .shell { position: relative; }.section-heading-light .kicker { color: #5ed4e2; }.section-heading-light h2 { color: #f7fbff; }.section-heading-light h2 em { color: #5ed4e2; }.section-heading-light > p:last-child { color: #9dafc5; }
.flow-section { padding: 130px 0 98px; }.request-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 19px; margin-top: 85px; }.flow-track { position: absolute; top: 19px; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--orange)); opacity: .75; }.flow-track span { position: absolute; top: -3px; left: 35%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(94,212,226,.17); animation: travel 5s ease-in-out infinite; }.flow-node { position: relative; z-index: 1; }.flow-number { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #3b5877; border-radius: 50%; background: var(--navy); color: #86dddf; font-family: var(--mono); font-size: 10px; }.flow-node b { display: block; margin-top: 25px; color: #fff; font-size: 15px; }.flow-node small { display: block; margin-top: 3px; color: #69d2da; font-family: var(--mono); font-size: 9px; }.flow-node p { max-width: 155px; margin: 17px 0 0; color: #8ea3bb; font-size: 11px; line-height: 1.75; }.flow-caption { margin: 70px 0 0; color: #8ea3bb; font-size: 11px; }.flow-caption span { margin-right: 13px; color: #69d2da; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.chapters-section { padding-bottom: 125px; }.split-heading { display: flex; justify-content: space-between; gap: 70px; align-items: end; }.split-heading > p { max-width: 315px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }.chapter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 65px; }.chapter-card { position: relative; min-height: 240px; padding: 23px 21px 19px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.chapter-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow: 0 16px 28px rgba(16, 45, 80, .09); }.chapter-card:nth-child(1), .chapter-card:nth-child(5), .chapter-card:nth-child(10) { grid-column: span 2; }.chapter-card-featured { min-height: 280px; padding: 29px 27px; background: linear-gradient(135deg, #e9f3ff 0%, #fff 62%); }.chapter-card-accent { background: linear-gradient(135deg, #ecfbfb 0%, #fff 62%); }.chapter-card-dark { color: #f2f7fc; background: var(--navy); border-color: var(--navy); }.chapter-card-dark:hover { border-color: #4d759e; }.chapter-no { color: var(--orange); font-family: var(--mono); font-size: 10px; }.chapter-status { float: right; color: var(--muted); font-size: 8px; }.chapter-card-dark .chapter-status { color: #90a6bf; }.chapter-card h3 { max-width: 230px; margin: 32px 0 14px; font-size: 16px; line-height: 1.4; letter-spacing: -.03em; }.chapter-card-featured h3 { max-width: 300px; font-size: 26px; line-height: 1.22; }.chapter-card p { max-width: 250px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }.chapter-card-dark p { color: #94a9c0; }.chapter-arrow { position: absolute; right: 21px; bottom: 18px; color: var(--blue); font-size: 18px; }.chapter-card-dark .chapter-arrow { color: #5ed4e2; }

.evidence-section { padding: 130px 0 133px; }.evidence-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 95px; align-items: center; }.text-link { display: inline-flex; margin-top: 32px; color: #69d2da; font-size: 12px; font-weight: 700; }.evidence-stack { border-top: 1px solid #28405b; }.evidence-row { display: grid; grid-template-columns: 92px 1fr 25px; gap: 18px; align-items: center; padding: 21px 0; border-bottom: 1px solid #28405b; }.evidence-tag { display: inline-flex; justify-content: center; padding: 5px 6px; border: 1px solid; border-radius: 3px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }.tag-source { color: #72d3ff; border-color: #2f7594; }.tag-test { color: #8fe0b4; border-color: #3d815e; }.tag-design { color: #d0b7ff; border-color: #694f9a; }.tag-lab { color: #ffc18e; border-color: #996238; }.evidence-row strong { font-size: 13px; }.evidence-row p { margin: 3px 0 0; color: #8ea3bb; font-size: 11px; }.evidence-symbol { color: #5d7893; font-size: 19px; text-align: right; }

.paths-section { padding-top: 120px; }.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 60px; }.path-card { position: relative; min-height: 235px; padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); transition: transform .25s ease, box-shadow .25s ease; }.path-card:hover { transform: translateY(-4px); box-shadow: 0 14px 27px rgba(16,45,80,.08); }.path-card-primary { background: #eaf4ff; border-color: #c8ddfa; }.path-icon { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 40px; border-radius: 7px; background: var(--blue); color: #fff; font-size: 17px; }.path-card small { display: block; color: var(--blue); font-size: 8px; }.path-card h3 { margin: 15px 0 9px; font-size: 17px; letter-spacing: -.04em; }.path-card p { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; }.path-cta { position: absolute; right: 23px; bottom: 19px; color: var(--blue); font-size: 10px; font-weight: 700; }.path-cta b { margin-left: 8px; font-size: 14px; }

.about-section { display: grid; grid-template-columns: 70px 1fr auto; gap: 28px; align-items: center; padding-top: 85px; padding-bottom: 85px; border-top: 1px solid var(--line); }.about-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--ink); color: #fff; font-family: var(--serif); font-size: 41px; font-weight: 700; transform: rotate(-7deg); }.about-section h2 { margin: 0; font-size: 25px; letter-spacing: -.05em; }.about-section p { max-width: 570px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.about-section .kicker { margin-bottom: 9px; }.about-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }.mail-link { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 27px; padding-bottom: 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.site-footer a { color: var(--ink); font-weight: 600; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-delay { transition-delay: .15s; }.reveal-delay-1 { transition-delay: .08s; }.reveal-delay-2 { transition-delay: .16s; }
@keyframes travel { 0%, 100% { left: 12%; } 50% { left: 86%; } }

body.dark { --bg: #0a1523; --surface: #101f31; --ink: #eaf2fb; --muted: #91a3b8; --line: #263a51; --navy: #050e18; color-scheme: dark; }.dark .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); }.dark .book-frame { border-color: #20344b; }.dark .button-quiet { background: var(--surface); }.dark .chapter-card-featured { background: linear-gradient(135deg, #152e4d 0%, var(--surface) 62%); }.dark .chapter-card-accent { background: linear-gradient(135deg, #12343b 0%, var(--surface) 62%); }.dark .path-card-primary { background: #142d4c; border-color: #2a517c; }.dark .top-nav .nav-github { color: var(--ink); }

@media (max-width: 860px) { .shell { width: min(100% - 40px, 620px); }.top-nav { display: none; }.hero { grid-template-columns: 1fr; gap: 15px; padding-top: 66px; }.hero-art { min-height: 435px; }.book-frame { right: 15%; }.art-glow { left: 20%; }.signal-strip { grid-template-columns: repeat(2, 1fr); }.signal-strip > div:nth-child(2) { border-right: 0; }.signal-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.signal-strip > div:nth-child(3) { padding-left: 0; }.principles-grid, .path-grid { grid-template-columns: 1fr; }.principle-card { min-height: 190px; }.principle-card h3 { margin-top: 30px; }.request-flow { grid-template-columns: 1fr; gap: 27px; margin-top: 55px; }.flow-track { top: 18px; bottom: 18px; left: 19px; width: 1px; height: auto; background: linear-gradient(180deg, var(--cyan), var(--blue), var(--orange)); }.flow-track span { top: 15%; left: -3px; animation-name: travel-mobile; }.flow-node { display: grid; grid-template-columns: 39px 1fr; column-gap: 18px; align-items: center; }.flow-node b { margin-top: 0; }.flow-node small { grid-column: 2; }.flow-node p { grid-column: 2; max-width: 450px; margin-top: 6px; }.chapter-grid { grid-template-columns: repeat(2, 1fr); }.chapter-card:nth-child(1), .chapter-card:nth-child(5), .chapter-card:nth-child(10) { grid-column: span 2; }.split-heading, .evidence-layout { display: block; }.split-heading > p { margin-top: 22px; }.evidence-stack { margin-top: 60px; }.about-section { grid-template-columns: 58px 1fr; }.about-actions { grid-column: 2; align-items: flex-start; margin-top: 8px; } .site-footer { flex-direction: column; } }
@keyframes travel-mobile { 0%, 100% { top: 12%; } 50% { top: 86%; } }
@media (max-width: 520px) { .shell { width: min(100% - 30px, 420px); }.site-header { padding: 14px 15px; }.hero { min-height: auto; padding-top: 55px; padding-bottom: 60px; }.hero h1 { font-size: 42px; }.hero-lede { font-size: 14px; }.hero-meta { gap: 13px; margin-top: 34px; }.hero-meta span { font-size: 9px; }.hero-art { min-height: 372px; }.book-frame { right: 8%; width: 225px; border-width: 7px; }.book-frame img { height: 315px; }.art-glow { left: 9%; width: 330px; height: 330px; }.float-card { transform: scale(.9); }.float-card-a { left: -9px; top: 69px; }.float-card-b { right: -14px; bottom: 42px; }.signal-strip { grid-template-columns: 1fr; }.signal-strip > div, .signal-strip > div:not(:first-child) { min-height: auto; padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--line); }.signal-strip > div:last-child { border-bottom: 0; }.section { padding-top: 90px; padding-bottom: 90px; }.section-heading h2 { font-size: 37px; }.principles-grid, .path-grid { margin-top: 43px; }.flow-section, .evidence-section { padding-top: 90px; padding-bottom: 80px; }.chapter-grid { grid-template-columns: 1fr; margin-top: 43px; }.chapter-card:nth-child(1), .chapter-card:nth-child(5), .chapter-card:nth-child(10) { grid-column: span 1; }.chapter-card-featured { min-height: 240px; }.evidence-row { grid-template-columns: 76px 1fr; gap: 12px; }.evidence-symbol { display: none; }.about-section { gap: 17px; }.about-section h2 { font-size: 20px; }.about-section p { font-size: 11px; }.about-actions { grid-column: 1 / -1; margin-left: 77px; }.site-footer { font-size: 9px; } }