:root { --paper:#f5f7f3; --ink:#192a25; --muted:#66736d; --line:#dce3dc; --green:#c4ee93; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button { font:inherit; }
a:focus-visible,button:focus-visible { outline:3px solid #418a50; outline-offset:6px; }
.wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.header { display:flex; justify-content:space-between; align-items:center; padding-block:28px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700; letter-spacing:-.7px; }
.brand-mark { width:43px; height:43px; border-radius:12px; background:var(--ink); color:white; font-size:38px; line-height:38px; padding-left:9px; }
.brand-mark span { color:var(--green); } .brand-sub { display:block; font-size:9px; letter-spacing:3px; margin-top:3px; font-weight:600; }
.header nav { display:flex; align-items:center; gap:32px; font-size:14px; }
.header nav>a:hover,.footer>a:hover { color:#397545; }
.languages { display:flex; align-items:center; gap:7px; color:#748179; margin-left:16px; }
.languages button { border:0; background:transparent; padding:8px 3px; color:#748179; cursor:pointer; font-size:12px; }
.languages button[aria-pressed=true] { color:var(--ink); font-weight:800; }
.hero { display:grid; grid-template-columns:1.28fr 1fr; gap:64px; align-items:center; padding-block:92px 80px; }
.eyebrow { text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:1.6px; display:flex; align-items:center; gap:9px; margin:0 0 25px; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; background:#558452; flex-shrink:0; }
h1 { font-size:clamp(40px,4.1vw,58px); line-height:1.1; letter-spacing:-2.9px; font-weight:600; margin:0 0 28px; }
.muted { color:#7b8980; } .hero-description { font-size:16px; line-height:1.8; max-width:495px; margin:0 0 30px; color:#637068; }
.button { display:inline-flex; align-items:center; gap:34px; padding:17px 22px; border-radius:5px; font-size:13px; font-weight:600; transition:background .2s,transform .2s; }
.button:hover { background:#315442; transform:translateY(-2px); } .dark { background:var(--ink); color:white; } .button>span:last-child { font-size:21px; font-weight:400; }
.hero-note { display:flex; align-items:center; gap:10px; margin-top:32px; font-size:10px; color:#6c7970; line-height:1.5; max-width:380px; }
.mini-line { height:1px; width:26px; background:#81907d; flex-shrink:0; }
.ecosystem { min-height:395px; border:1px solid #d6e1d0; border-radius:12px; background:#eaf0e3; position:relative; padding:25px 27px; overflow:hidden; }
.eco-grid { position:absolute; inset:0; background-image:linear-gradient(#d4dfce66 1px,transparent 1px),linear-gradient(90deg,#d4dfce66 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(transparent,#000); }
.eco-top,.eco-bottom { display:flex; justify-content:space-between; font:9px Consolas,monospace; letter-spacing:1px; position:relative; color:#6c7c65; }
.eco-bottom { margin-top:26px; font-family:inherit; font-size:10px; letter-spacing:0; }
.eco-node { position:relative; display:flex; gap:15px; align-items:center; border:1px solid #d9e1d4; padding:17px; border-radius:8px; background:#f9fbf6; box-shadow:0 7px 16px #243d2410; transition:transform .2s; }
a.eco-node:hover { transform:translateX(4px); } .eco-node strong { display:block; font-size:14px; letter-spacing:-.3px; } .eco-node small { display:block; font-size:10px; color:#74806e; margin-top:5px; }
.eco-desktop { margin:0 17px 16px 0; }
.node-icon { width:38px; height:38px; background:#edf2e5; display:grid; place-items:center; font-size:25px; border-radius:9px; flex-shrink:0; }
.node-arrow { margin-left:auto; font-size:18px; color:#7a8a74; } .eco-sa { margin:27px 17px 16px 0; } .eco-m3 { margin:0 0 16px 33px; background:var(--ink); color:white; border-color:var(--ink); }
.eco-m3 .node-icon { background:#3b4e3f; color:var(--green); } .eco-m3 small,.eco-m3 .node-arrow { color:#c2cebc; } .eco-commit { margin-right:17px; }
.discipline { display:flex; justify-content:space-between; align-items:center; border-block:1px solid var(--line); padding-block:24px; font-size:12px; font-weight:500; color:#6a786c; gap:18px; }
.discipline>span:nth-child(even) { font-size:19px; color:#809a70; }
.projects { padding-top:80px; } .section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; } .section-heading .eyebrow { margin-bottom:15px; }
h2 { font-size:36px; letter-spacing:-1.3px; font-weight:500; line-height:1.2; margin:0; } .section-count { font:11px Consolas,monospace; color:#778477; padding-bottom:5px; }
.project { display:grid; grid-template-columns:1fr 1fr; gap:75px; padding:54px 0 58px; border-bottom:1px solid var(--line); scroll-margin-top:32px; } .project:last-child { border-bottom:0; }
.project-category { font-size:9px; text-transform:uppercase; letter-spacing:1.3px; font-weight:600; display:flex; gap:12px; color:#667464; margin:0 0 19px; } .project-category>span:first-child { color:#8b9984; }
h3 { font-size:33px; font-weight:600; letter-spacing:-1.2px; margin:0 0 18px; } .title-detail { font-size:14px; letter-spacing:0; color:#6c7c70; font-weight:400; margin-left:15px; }
.project-lead { font-size:18px; line-height:1.5; font-weight:500; margin:0 0 13px; max-width:465px; } .project-description { font-size:13px; line-height:1.85; color:#6a776d; margin:0 0 22px; }
.project-status { display:inline-block; margin:0 0 18px; padding:6px 10px; border:1px solid #dacee4; border-radius:4px; background:#efeaf5; color:#78618e; font-size:11px; font-weight:600; }
.feature-label { margin:0 0 12px; font-size:11px; font-weight:600; color:#78618e; }
.features { padding:0; margin:0 0 25px; list-style:none; font-size:12px; line-height:1.6; } .features li { padding-left:18px; position:relative; margin-bottom:8px; } .features li:before { content:"↗"; position:absolute; left:0; color:#698957; }
.tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:24px; } .tags span { font-size:9px; border:1px solid var(--line); padding:6px 9px; border-radius:4px; color:#61705f; }
.text-link { font-size:12px; font-weight:600; border-bottom:1px solid #9aa990; padding-bottom:5px; display:inline-flex; gap:25px; } .text-link:hover { color:#4c793a; border-color:#4c793a; } .secondary-link { font-size:11px; color:#718268; margin-left:20px; }
.project-visual { min-width:0; align-self:center; border:1px solid #dbe4d6; border-radius:10px; padding:26px 28px; background:#e9f0e3; min-height:363px; }
.visual-heading { display:flex; gap:10px; align-items:center; font-size:11px; font-weight:600; margin-bottom:30px; } .visual-symbol { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#d5e4c9; font-size:20px; flex-shrink:0; } .visual-label { margin-left:auto; font-size:8px; font-weight:400; color:#6f8066; }
.directory-root { border:1px solid #cbdac1; border-radius:5px; background:#f9fbf6; padding:13px; text-align:center; font-size:11px; margin-inline:auto; width:65%; position:relative; } .directory-root .dot { margin-right:8px; } .directory-root:after { content:""; position:absolute; width:1px; height:17px; background:#b7c6ae; top:100%; left:50%; }
.directory-branches { display:flex; position:relative; gap:9px; margin-top:32px; margin-bottom:23px; } .directory-branches:before { content:""; position:absolute; top:-16px; left:16%; right:16%; height:1px; background:#b7c6ae; }
.directory-branches>div { flex:1; text-align:center; position:relative; background:#f5f9f0; border:1px solid #d7e2ce; border-radius:5px; padding:11px 3px; } .directory-branches>div:before { content:""; position:absolute; bottom:100%; height:16px; width:1px; background:#b7c6ae; left:50%; }
.directory-branches strong { font-size:9px; display:block; font-weight:500; } .directory-branches>div>span { display:block; font-size:21px; margin-bottom:6px; color:#6d8a5c; }
.visual-list { border-top:1px solid #d3dfc9; } .visual-list>div { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #d3dfc9; font-size:10px; gap:10px; } .pill { font-size:8px; background:#dbe9ce; color:#49643b; padding:4px 7px; border-radius:4px; }
.visual-caption { font-size:9px; letter-spacing:.3px; color:#7c8e6e; text-align:center; margin:23px 0 0; }
.m3-visual { background:#e7edf2; border-color:#d8e1e8; } .m3-visual .visual-symbol { background:#d2dde6; color:#42607c; } .m3-visual .visual-label,.m3-visual .visual-caption { color:#748594; }
.transport-tags { display:flex; justify-content:center; gap:9px; margin-top:34px; } .transport-tags>span { font:9px Consolas,monospace; padding:7px 10px; border:1px solid #cbd7e0; background:#f0f4f7; border-radius:4px; color:#587089; }
.pipeline { display:flex; align-items:center; gap:9px; margin:26px 0; } .pipeline>div { min-width:0; flex:1; background:#f6f8fa; border:1px solid #cbd7e0; border-radius:6px; text-align:center; padding:19px 3px; } .pipeline .pipeline-center { background:#385269; border-color:#385269; color:white; } .pipeline strong { display:block; font-size:10px; font-weight:500; } .step { display:block; font:10px Consolas,monospace; opacity:.55; margin-bottom:9px; } .pipeline-arrow { color:#8aa0b1; font-size:18px; }
.storage { display:flex; align-items:center; gap:13px; padding:15px 17px; background:#f2f6f9; border:1px solid #d2dde5; border-radius:5px; } .storage>span:first-child { font-size:24px; color:#657f95; } .storage strong { font-size:11px; font-weight:500; display:block; } .storage small { font-size:9px; display:block; margin-top:5px; color:#7b8d9b; } .storage-dot { width:6px; height:6px; border-radius:50%; background:#8faa9a; margin-left:auto; }
.commit-visual { background:#efeaf5; border-color:#e2d9ed; } .commit-visual .visual-symbol { background:#e0d4ec; color:#78618e; } .commit-visual .visual-label,.commit-visual .visual-caption { color:#8d7a9d; }
.message-bubble { display:flex; align-items:flex-start; gap:12px; background:#f9f6fc; border:1px solid #e3d9ed; border-radius:7px; padding:16px; margin-top:25px; } .message-avatar { width:28px; height:28px; background:#ddd0e9; border-radius:50%; display:grid; place-items:center; font-size:10px; flex-shrink:0; color:#776088; } .message-bubble small { font-size:9px; color:#9c8ba7; } .message-bubble p { font-size:12px; line-height:1.6; margin:7px 0 0; }
.ai-connector { display:flex; align-items:center; justify-content:center; gap:9px; font-size:9px; color:#8a6e9e; padding:18px 0; } .ai-connector>span:first-child { font-size:16px; }
.commitment-card { background:#fcfafd; border:1px solid #dacee4; border-radius:7px; padding:18px; } .commitment-card-heading { display:flex; gap:10px; align-items:center; font-size:11px; } .check-square { color:#827091; background:#e8def0; border-radius:4px; padding:3px 6px; } .task-meta { display:flex; flex-wrap:wrap; gap:10px; margin:15px 0 17px; font-size:9px; color:#93829f; } .task-progress { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eee6f3; padding-top:12px; font-size:9px; color:#8b7c96; gap:8px; } .commit-visual .pill { background:#ece3f4; color:#876d9a; }
.about-section { background:var(--ink); color:#f1f5ec; padding:65px 0; margin-top:32px; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; } .about-section .eyebrow { color:#a3bc90; } .about-section h2 { font-size:38px; line-height:1.3; letter-spacing:-1.6px; } .about-copy>p { font-size:14px; line-height:1.9; color:#b4c3b8; margin:0 0 26px; } .about-principles { display:flex; flex-direction:column; gap:13px; } .about-principles>div { display:flex; gap:18px; font-size:12px; padding-top:13px; border-top:1px solid #3b4e43; } .about-principles span { font:10px Consolas,monospace; color:#97b684; } .about-principles strong { font-weight:400; }
.footer { display:flex; align-items:center; justify-content:space-between; padding-block:32px; font-size:10px; color:#788576; gap:20px; } .footer-brand { font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:17px; } .footer p { margin:0; }
.skip-link { position:absolute; left:20px; top:-100px; background:var(--ink); color:white; padding:14px; z-index:3; } .skip-link:focus { top:20px; }
@media(min-width:1500px) { .hero { padding-block:110px 100px; } h1 { font-size:62px; } }
@media(max-width:1050px) { .wrap { width:calc(100% - 64px); } .hero { gap:32px; } h1 { font-size:43px; letter-spacing:-2px; } .hero .eyebrow { font-size:8px; } .project,.about-grid { gap:38px; } .project-visual { padding:24px 20px; } .visual-heading { gap:7px; } .title-detail { display:block; margin:9px 0 0; } .transport-tags { gap:5px; } .transport-tags>span { padding:6px 7px; } }
@media(max-width:760px) { .wrap { width:calc(100% - 40px); } .header { padding-block:20px; } .brand { font-size:17px; } .brand-mark { width:37px; height:37px; font-size:32px; line-height:34px; padding-left:7px; } .brand-sub { font-size:8px; } .header nav { gap:16px; font-size:12px; } .languages { margin-left:0; gap:4px; } .hero { grid-template-columns:1fr; padding-block:55px 40px; gap:36px; } h1 { font-size:clamp(35px,7.2vw,52px); letter-spacing:-1.7px; } .hero .eyebrow { font-size:8px; letter-spacing:1.1px; } .hero-description { font-size:15px; } .hero-note { margin-top:25px; } .ecosystem { min-height:365px; max-width:520px; width:100%; } .discipline { font-size:10px; padding-block:20px; gap:12px; line-height:1.5; } .discipline>span:nth-child(even) { font-size:14px; } .projects { padding-top:48px; } .section-heading { gap:15px; align-items:center; } .section-heading .eyebrow { font-size:9px; } .section-heading h2 { font-size:29px; } .section-count { font-size:9px; white-space:nowrap; } .project { grid-template-columns:1fr; gap:27px; padding:33px 0 40px; } .project-copy { max-width:560px; } h3 { font-size:30px; } .title-detail { display:inline-block; margin-left:12px; } .project-lead { font-size:18px; } .project-description { font-size:14px; } .features { font-size:13px; } .tags span { font-size:10px; } .text-link { font-size:13px; } .project-visual { min-height:340px; max-width:560px; width:100%; padding:24px; } .visual-heading { font-size:12px; } .visual-label { font-size:9px; } .directory-branches strong { font-size:10px; } .transport-tags>span { font-size:10px; padding:7px 10px; } .pipeline strong { font-size:12px; } .about-section { padding:43px 0; margin-top:10px; } .about-grid { grid-template-columns:1fr; gap:25px; } .about-section h2 { font-size:32px; } .footer { flex-wrap:wrap; padding-block:26px; gap:18px; } .footer-brand { width:100%; } }
@media(max-width:390px) { .header nav { gap:10px; } .header nav>a:nth-child(2) { display:none; } .section-heading h2 { font-size:26px; } .title-detail { font-size:12px; } .project-category { font-size:8px; letter-spacing:.8px; } .project-visual { padding:20px 16px; } .transport-tags>span { padding:6px; } .task-meta { font-size:8px; } .visual-heading { font-size:10px; } .ecosystem { padding:22px 18px; } .eco-node { gap:10px; padding:16px; } .eco-node strong { font-size:12px; } .node-icon { width:32px; height:32px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }