:root {
  --bg: #0c0d0d;
  --surface: #151716;
  --surface-2: #1c1f1d;
  --ink: #f4f2ea;
  --muted: #a1a69f;
  --line: rgba(244, 242, 234, 0.14);
  --lime: #c9ff4d;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
.shell { width: min(1380px, calc(100% - 48px)); margin-inline: auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 82px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; font-weight: 760; text-decoration: none; letter-spacing: -.01em; }
.brand > span:first-child { font-size: 18px; letter-spacing: -.05em; }
.brand i { width: 4px; height: 4px; border-radius: 50%; background: var(--lime); }
.brand > span:last-child { color: var(--muted); font-weight: 560; }
.topbar-right { display: flex; align-items: center; gap: 25px; font-size: 12px; }
.topbar-right > a { padding-bottom: 3px; border-bottom: 1px solid var(--line); text-decoration: none; }
.system-state { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.system-state i { width: 7px; height: 7px; border-radius: 50%; background: #56d66b; box-shadow: 0 0 0 5px rgba(86,214,107,.1); }
.system-state b { color: var(--ink); }

.hero { position: relative; min-height: 660px; padding: 100px 0 72px; overflow: hidden; }
.hero::after { content: ""; position: absolute; z-index: -1; right: -15%; top: -30%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201,255,77,.14), rgba(201,255,77,0) 67%); }
.hero-number { position: absolute; right: 0; top: 94px; color: #262a27; font-size: clamp(140px, 24vw, 350px); font-weight: 800; line-height: .7; letter-spacing: -.09em; user-select: none; }
.eyebrow { margin: 0 0 26px; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { position: relative; z-index: 1; max-width: 1050px; margin: 0; font-size: clamp(70px, 11vw, 160px); font-weight: 680; letter-spacing: -.075em; line-height: .78; }
h1 em { color: var(--lime); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.hero-bottom { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-top: 72px; }
.hero-bottom p { max-width: 500px; margin: 0; color: var(--muted); font-size: clamp(17px, 2vw, 22px); line-height: 1.55; }
.hero-bottom a { display: flex; align-items: center; gap: 22px; min-width: 200px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; text-decoration: none; }
.hero-bottom a span { margin-left: auto; color: var(--lime); font-size: 20px; }

.signal-strip { overflow: hidden; border-block: 1px solid var(--line); background: var(--lime); color: #10120d; }
.signal-strip > div { display: flex; align-items: center; width: max-content; height: 49px; animation: marquee 32s linear infinite; }
.signal-strip span { padding-inline: 26px; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.signal-strip i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.directory { padding-block: 110px 150px; }
.directory-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.directory-head .eyebrow { margin-bottom: 13px; }
h2 { margin: 0; font-size: clamp(50px, 7vw, 94px); font-weight: 640; letter-spacing: -.065em; line-height: .9; }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 680px; }
.filters button { padding: 10px 14px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; transition: 180ms ease; }
.filters button:hover { color: var(--ink); border-color: rgba(244,242,234,.35); }
.filters button.is-active { color: #11130e; border-color: var(--lime); background: var(--lime); }
.filters sup { margin-left: 4px; font-size: 8px; }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform 260ms cubic-bezier(.2,.75,.25,1), border-color 260ms ease, box-shadow 260ms ease; }
.project-card--feature { grid-column: span 2; }
.project-card:hover { z-index: 2; transform: translateY(-6px); border-color: rgba(244,242,234,.31); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.project-card[hidden] { display: none; }
.project-card > a { display: flex; height: 100%; flex-direction: column; text-decoration: none; }
.project-card > a:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; border-radius: var(--radius); }
.project-shot { min-height: 315px; margin: 8px 8px 0; overflow: hidden; border-radius: 14px; background: var(--card-accent, #343836); }
.browser-line { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; color: rgba(255,255,255,.56); background: rgba(0,0,0,.28); font-size: 7px; font-weight: 650; letter-spacing: .035em; }
.browser-line i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.38); }
.browser-line span { margin-left: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shot-stage { position: relative; height: 285px; padding: 28px; overflow: hidden; }
.shot-code { position: absolute; top: 22px; right: 23px; color: rgba(255,255,255,.55); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.shot-stage small { display: block; font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.shot-stage strong { display: block; letter-spacing: -.055em; line-height: .92; }
.shot-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 40px; border: 1px solid currentColor; border-radius: 11px; font-family: Georgia, serif; font-size: 20px; font-style: italic; }
.project-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .8fr) 25px; align-items: end; gap: 20px; padding: 23px 24px 25px; }
.project-info span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.project-info h3 { margin: 8px 0 0; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.045em; line-height: 1; }
.project-info p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.project-info > b { color: var(--lime); font-size: 19px; transition: transform 180ms ease; }
.project-card:hover .project-info > b { transform: translate(3px,-3px); }

.tone-violet { --card-accent: #7357ca; }.tone-green { --card-accent: #183c32; }.tone-blue { --card-accent: #3156c9; }.tone-red { --card-accent: #d74d45; }.tone-cyan { --card-accent: #176e79; }.tone-gold { --card-accent: #e8bb4f; }.tone-mint { --card-accent: #a8dcc4; }.tone-lime { --card-accent: #c9ff4d; }.tone-white { --card-accent: #efede6; }.tone-slate { --card-accent: #4a525a; }.tone-indigo { --card-accent: #28346f; }.tone-rose { --card-accent: #d99f8c; }.tone-orange { --card-accent: #f06a38; }.tone-navy { --card-accent: #162a5a; }.tone-sky { --card-accent: #73add1; }.tone-forest { --card-accent: #557c5e; }.tone-charcoal { --card-accent: #2d3034; }.tone-black { --card-accent: #151716; }

.stage-learning { display: grid; grid-template-columns: .9fr 1.2fr .7fr; align-items: end; gap: 25px; color: #f7f3ff; }
.stage-learning strong { font-family: Georgia, serif; font-size: clamp(32px,4vw,58px); font-weight: 400; }
.stage-learning small { margin-bottom: 20px; color: #d8ccff; }
.progress-ring { display: grid; place-items: center; width: 104px; height: 104px; justify-self: end; border: 12px solid rgba(255,255,255,.18); border-top-color: #d3ff68; border-radius: 50%; transform: rotate(24deg); }
.progress-ring span { transform: rotate(-24deg); font-size: 16px; font-weight: 800; }
.stage-finance { color: #effff4; }
.finance-total small { color: #9bd3bb; }.finance-total strong { margin-top: 9px; font-size: 41px; }
.finance-chart { position: absolute; right: 25px; bottom: 28px; left: 25px; display: flex; align-items: end; gap: 8px; height: 118px; border-bottom: 1px solid rgba(255,255,255,.2); }
.finance-chart i { flex: 1; height: 35%; border-radius: 3px 3px 0 0; background: #87d5ad; }.finance-chart i:nth-child(2){height:58%}.finance-chart i:nth-child(3){height:44%}.finance-chart i:nth-child(4){height:82%;background:#c9ff4d}.finance-chart i:nth-child(5){height:67%}.finance-chart i:nth-child(6){height:94%;background:#f7a36e}
.stage-dhci { color: white; }.stage-dhci strong { margin-top: 27px; font-family: Georgia,serif; font-size: 37px; font-weight: 400; }.stage-dhci .shot-icon { margin: 0; }
.paper-stack { position: absolute; right: -18px; bottom: -30px; width: 175px; height: 200px; }.paper-stack i { position:absolute; inset:0; border-radius:14px; background:#eef1ff; box-shadow:0 20px 40px rgba(13,28,85,.25); transform:rotate(13deg) translate(15px,15px) }.paper-stack i:nth-child(2){transform:rotate(3deg);background:#d9e2ff}.paper-stack i:nth-child(3){transform:rotate(-8deg) translate(-20px,8px);background:white}
.stage-recruiting { color:#fff8ed; }.stage-recruiting strong { margin-top:17px; font-family:Georgia,serif; font-size:43px; font-weight:400; }.match-pill { position:absolute; right:22px; bottom:26px; padding:12px 16px; border-radius:999px; color:#401813; background:#fff3b8; font-size:10px; font-weight:800; transform:rotate(-5deg) }
.stage-graph { color:#e8ffff; }.stage-graph strong { font-size:60px; }.graph { position:absolute; right:8%; top:14%; width:48%; height:72%; }.graph i { position:absolute; width:10px; height:10px; border:2px solid #a7fbff; border-radius:50%; box-shadow:0 0 0 8px rgba(167,251,255,.08) }.graph i::after { content:""; position:absolute; top:3px; left:7px; width:100px; height:1px; background:rgba(167,251,255,.34); transform-origin:left }.graph i:nth-child(1){top:10%;left:15%}.graph i:nth-child(2){top:24%;right:15%}.graph i:nth-child(3){top:49%;left:40%}.graph i:nth-child(4){bottom:8%;left:9%}.graph i:nth-child(5){bottom:18%;right:9%}.graph i:nth-child(6){top:4%;right:42%}.graph i:nth-child(7){top:67%;right:33%}.graph i:nth-child(8){top:40%;left:5%}.graph i:nth-child(2n)::after{transform:rotate(118deg)}.graph i:nth-child(3n)::after{transform:rotate(-42deg);width:80px}
.stage-physics { color:#1c2b64; }.stage-physics small{color:#425496}.stage-physics strong { margin-top:22px; font-family:Georgia,serif; font-size:39px; font-weight:400 }.atom { position:absolute; right:-18px; bottom:-16px; width:155px; height:155px; border:1px solid rgba(28,43,100,.35); border-radius:50%; box-shadow:0 0 0 25px rgba(28,43,100,.06),0 0 0 52px rgba(28,43,100,.04) }.atom i { position:absolute; width:10px;height:10px;border-radius:50%;background:#3156c9}.atom i:first-child{top:-5px;left:70px}.atom i:nth-child(2){left:-5px;top:70px;background:#ea5b4f}.atom i:nth-child(3){right:10px;bottom:18px;background:#17224f}
.stage-health { color:#143529 }.stage-health strong{position:absolute;bottom:32px;left:28px;font-size:43px}.stage-health small{position:absolute;bottom:29px;right:25px}.pulse-line { position:absolute; top:90px; left:-15px; width:115%; height:50px; border-bottom:3px solid #217457; transform:skewY(-3deg) }.pulse-line::after{content:"";position:absolute;left:42%;bottom:-3px;width:35px;height:75px;border-left:3px solid #217457;border-top:3px solid #217457;transform:skewY(55deg)}
.stage-bds { color:#10120c }.stage-bds strong{font-size:75px}.stage-bds p{margin:7px 0;font-family:Georgia,serif;font-size:34px;font-style:italic;line-height:.95}.bds-grid{position:absolute;right:25px;bottom:25px;display:grid;grid-template-columns:repeat(2,32px);gap:5px}.bds-grid i{height:32px;border:1px solid #10120c;border-radius:50%}.bds-grid i:nth-child(2),.bds-grid i:nth-child(3){background:#10120c}
.stage-dhc { color:#22201b }.dhc-monogram{width:52px;height:52px;display:grid;place-items:center;border:1px solid #777066;border-radius:50%;font-family:Georgia,serif;font-style:italic}.stage-dhc strong{margin-top:35px;font-family:Georgia,serif;font-size:37px;font-weight:400}.stage-dhc small{position:absolute;right:23px;bottom:25px;color:#777066}
.stage-shenteq { color:white }.stage-shenteq strong{font-size:64px;line-height:.72}.shenteq-line{width:70%;height:1px;margin-top:32px;background:#d4ff61}.stage-shenteq small{margin-top:14px;color:#cad0d3}
.stage-archive { color:#f4f6ff }.stage-archive small{color:#aebaff}.stage-archive strong{margin-top:25px;font-size:62px;line-height:.72}.archive-matrix{position:absolute;right:25px;bottom:25px;display:grid;grid-template-columns:repeat(3,28px);gap:7px}.archive-matrix i{height:28px;border:1px solid rgba(255,255,255,.42);border-radius:4px}.archive-matrix i:nth-child(2),.archive-matrix i:nth-child(4),.archive-matrix i:nth-child(6){background:#c9ff4d;border-color:#c9ff4d}
.stage-order { color:#4a3026 }.stage-order strong{margin-top:18px;font-family:Georgia,serif;font-size:38px;font-weight:400}.order-shape{position:absolute;right:-45px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:#f0c96b;box-shadow:-70px -40px 0 -25px #78906e}
.stage-utebock { display:grid;grid-template-columns:72px 1fr;gap:23px;color:#32140d }.utebock-mark{display:grid;place-items:center;width:63px;height:63px;border:2px solid currentColor;border-radius:50%;font-weight:900}.stage-utebock strong{margin-top:14px;font-family:Georgia,serif;font-size:46px;font-weight:400}.steps{position:absolute;right:25px;bottom:27px;display:flex;gap:5px}.steps i{width:42px;height:8px;border-radius:5px;background:rgba(50,20,13,.2)}.steps i:first-child{background:#32140d}
.stage-bpv { color:white }.stage-bpv strong{font-family:Georgia,serif;font-size:51px;font-weight:400;line-height:.8}.legal-rule{width:55%;height:1px;margin:27px 0 13px;background:#d1b879}.stage-bpv small{color:#d1b879}
.stage-edubook { color:#10334d }.book{display:flex;gap:4px;margin-bottom:34px}.book i{display:block;width:22px;height:48px;border-radius:4px;background:#e9f7ff;transform:skewY(-9deg)}.book i:nth-child(2){background:#125f8e}.stage-edubook strong{font-size:41px}.stage-edubook small{position:absolute;right:22px;bottom:25px}
.stage-plano { color:#f4fff4 }.stage-plano strong{position:relative;z-index:2;font-family:Georgia,serif;font-size:48px;font-weight:400}.stage-plano small{position:absolute;left:28px;bottom:25px}.leaf{position:absolute;right:27px;width:75px;height:135px;border-radius:100% 0 100% 0;background:#91b69a;transform:rotate(30deg)}.leaf-two{right:75px;bottom:-25px;background:#d3e3af;transform:rotate(-25deg)}
.stage-gitlab { color:white }.gitlab-mark{font-size:52px;color:#f78f54}.stage-gitlab strong{margin-top:20px;font-size:47px}.commit-list{position:absolute;right:25px;top:70px;width:42%}.commit-list i{display:block;height:8px;margin:15px 0;border-radius:5px;background:rgba(255,255,255,.13)}.commit-list i:nth-child(2){width:72%;background:#f78f54}.commit-list i:nth-child(3){width:88%}.commit-list i:nth-child(4){width:55%}
.stage-monitor { color:white }.stage-monitor strong{margin-top:15px;font-size:66px}.monitor-grid{position:absolute;right:24px;bottom:24px;display:grid;grid-template-columns:repeat(4,18px);gap:7px}.monitor-grid i{height:18px;border-radius:4px;background:#56d66b}.monitor-grid i:nth-child(5n){background:#ffcd5b}

.empty-state { padding:80px 0; text-align:center; color:var(--muted); }
.manifesto { padding-block: 120px 150px; border-top: 1px solid var(--line); }
.manifesto > div { display:grid;grid-template-columns:1.2fr .65fr;align-items:end;gap:80px }.manifesto h2{font-family:Georgia,serif;font-weight:400}.manifesto div p{max-width:430px;margin:0 0 8px;color:var(--muted);font-size:18px;line-height:1.6}
.site-footer { display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:40px;padding-block:55px;border-top:1px solid var(--line);color:var(--muted);font-size:11px }.brand-footer{color:var(--ink);font-size:27px;font-weight:800;letter-spacing:-.06em}.site-footer p{margin:8px 0 0}.footer-links{display:flex;gap:25px}.footer-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.reveal { opacity:0;transform:translateY(16px) }.reveal.is-visible{opacity:1;transform:none;transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.75,.25,1)}

@keyframes marquee { to { transform:translateX(-50%) } }

@media (max-width: 1080px) {
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .project-card--feature { grid-column:span 1 }
  .directory-head { align-items:flex-start;flex-direction:column }
  .filters { justify-content:flex-start }
  .project-info { grid-template-columns:1fr 22px }.project-info p{display:none}
}
@media (max-width: 700px) {
  .shell{width:min(100% - 24px,1380px)}
  .topbar{min-height:70px}.system-state{display:none}.topbar-right{gap:12px}
  .hero{min-height:580px;padding-top:78px}.hero-number{top:80px;right:-8%;font-size:190px}.hero-bottom{display:block;margin-top:55px}.hero-bottom a{margin-top:35px}
  .directory{padding-block:80px 110px}.filters{flex-wrap:nowrap;width:calc(100vw - 12px);padding:0 12px 8px 0;overflow-x:auto}.filters button{flex:none}
  .project-grid{grid-template-columns:1fr}.project-shot{min-height:290px}.shot-stage{height:260px}.stage-learning{grid-template-columns:1fr 1.4fr}.progress-ring{display:none}
  .project-info{padding:21px}.project-info h3{font-size:26px}
  .manifesto>div{grid-template-columns:1fr;gap:35px}.site-footer{grid-template-columns:1fr;gap:26px}.footer-links{flex-direction:column;gap:12px;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}
}