:root {
  --ink: #09100f;
  --ink-soft: #17211f;
  --paper: #f1efe8;
  --paper-soft: #e3e0d5;
  --acid: #c7ff3a;
  --cyan: #55e6d2;
  --orange: #ff6948;
  --muted: #87928d;
  --line: rgba(9, 16, 15, .16);
  --page: min(1440px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: var(--ink); background: var(--acid); }

.noise {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.pointer-glow {
  position: fixed; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(85,230,210,.1), transparent 66%); transform: translate(-50%,-50%); opacity: 0; transition: opacity .3s;
}
body:hover .pointer-glow { opacity: 1; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 88px; padding: 0 max(32px, calc((100% - 1440px)/2));
  display: flex; align-items: center; justify-content: space-between; color: #fff; transition: background .3s, height .3s, border .3s;
}
.site-header.scrolled { height: 68px; background: rgba(9,16,15,.88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.1); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); font-size: 19px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy b { font-size: 16px; letter-spacing: .16em; }
.brand-copy small { margin-top: 5px; font-size: 8px; letter-spacing: .26em; color: rgba(255,255,255,.52); }
.site-header nav { display: flex; gap: 25px; font-size: 13px; }
.site-header nav a { position: relative; color: rgba(255,255,255,.7); }
.site-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--acid); transition:right .25s; }
.site-header nav a:hover { color:#fff; }
.site-header nav a:hover::after { right:0; }
.site-header nav .nav-out { color: rgba(199,255,58,.78); font-size: 11px; }
.site-header nav .nav-out::after { display:none; }
.site-header nav .nav-out:hover { color:var(--acid); }
.header-cta { padding: 11px 17px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 12px; }
.header-cta:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); }

.hero {
  position: relative; min-height: 100svh; padding: 150px max(32px, calc((100% - 1440px)/2)) 34px; color: #fff; background: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr); grid-template-rows: 1fr auto; overflow: hidden;
}
.hero::before { content:""; position:absolute; inset:auto -10% -38% 28%; height:80%; background:radial-gradient(ellipse, rgba(85,230,210,.2), transparent 62%); filter:blur(30px); }
.hero-grid { position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.hero-main { position: relative; z-index: 1; align-self:center; max-width: 900px; }
.kicker,.eyebrow { margin:0 0 26px; font-size:10px; font-weight:700; letter-spacing:.23em; }
.live-dot { display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 7px rgba(199,255,58,.1); animation:pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 13px rgba(199,255,58,0); } }
.hero h1 { margin:0; font-size:clamp(60px,7.4vw,118px); line-height:.92; letter-spacing:-.065em; font-weight:800; }
.hero h1 span,.hero h1 em { display:block; }
.hero h1 em { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.75); font-style:normal; margin-left:10vw; }
.hero-intro { max-width:650px; margin:36px 0 0; color:rgba(255,255,255,.65); font-size:16px; line-height:1.9; }
.hero-actions { display:flex; gap:12px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:36px; min-height:51px; padding:0 22px; border:1px solid rgba(255,255,255,.25); font-size:12px; font-weight:700; }
.button-primary { color:var(--ink); background:var(--acid); border-color:var(--acid); }
.button-primary:hover { background:#fff; border-color:#fff; }
.button-ghost:hover { border-color:#fff; }
.hero-aside { position:relative; z-index:1; align-self:center; justify-self:center; text-align:center; }
.orbit { position:relative; width:320px; height:320px; border:1px solid rgba(255,255,255,.16); border-radius:50%; animation:rotate 26s linear infinite; }
.orbit::before,.orbit::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,.14); }
.orbit::before { inset:36px; }.orbit::after{inset:88px;border-style:solid;}
.orbit-core { position:absolute; inset:50%; width:76px; height:76px; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; background:var(--acid); color:var(--ink); font-weight:900; letter-spacing:.12em; }
.orbit-label { position:absolute; padding:4px 8px; background:var(--ink); color:rgba(255,255,255,.6); font-size:8px; letter-spacing:.16em; animation:counter-rotate 26s linear infinite; }
.label-a{top:-7px;left:47%;}.label-b{right:-28px;top:48%;}.label-c{bottom:-7px;left:42%;}.label-d{left:-30px;top:48%;}
@keyframes rotate{to{transform:rotate(360deg)}}@keyframes counter-rotate{to{transform:rotate(-360deg)}}
.aside-note { margin-top:30px; font-family:serif; color:rgba(255,255,255,.58); font-size:13px; line-height:1.9; }
.hero-foot { grid-column:1/-1; position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); padding-top:28px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.42); font-size:9px; letter-spacing:.15em; }

.manifesto,.path { position:relative; width:var(--page); margin:auto; padding:150px 0; }
.section-index { position:absolute; top:150px; right:0; width:54px; height:54px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); font:700 11px/1 monospace; }
.manifesto { display:grid; grid-template-columns:1fr 1fr; gap:50px 100px; }
.manifesto-lead h2,.section-head h2,.path-intro h2,.writing-title h2,.contact h2 { margin:0; font-size:clamp(42px,5.6vw,80px); line-height:1.04; letter-spacing:-.055em; }
.manifesto-lead h2 span,.path-intro h2 span,.writing-title h2 span { color:#a2aaa5; }
.manifesto-copy { padding-top:54px; font-size:14px; line-height:2; color:#515a56; }
.manifesto-copy .lead { color:var(--ink); font-size:19px; line-height:1.8; }
blockquote { margin:34px 0 0; padding:22px 0 22px 28px; border-left:3px solid var(--orange); color:var(--ink); font-family:serif; font-size:18px; }
.capability-list { grid-column:1/-1; margin-top:60px; border-top:1px solid var(--line); }
.capability { display:grid; grid-template-columns:90px 320px 1fr; align-items:start; gap:30px; padding:38px 0; border-bottom:1px solid var(--line); transition:padding .3s, background .3s; }
.capability:hover { padding-left:22px; padding-right:22px; background:rgba(255,255,255,.36); }
.cap-number { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; font-size:11px; }
.capability h3 { margin:5px 0 0; font-size:25px; letter-spacing:-.04em; }
.capability p { margin:0; max-width:700px; color:#646d69; line-height:1.9; font-size:14px; }

.work { padding:150px max(32px,calc((100% - 1440px)/2)); background:#dedaCE; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:70px; }
.section-head > p { max-width:410px; margin:0; color:#626b67; line-height:1.9; }
.feature-project { display:grid; grid-template-columns:1.22fr .78fr; min-height:620px; background:var(--ink); color:#fff; }
.project-visual { position:relative; overflow:hidden; }
.producthub-visual { padding:38px; background:#102321; }
.producthub-visual::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(rgba(85,230,210,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(85,230,210,.22) 1px,transparent 1px); background-size:38px 38px; }
.producthub-visual::after { content:""; position:absolute; width:620px; height:620px; border-radius:50%; left:18%; top:18%; background:radial-gradient(circle,rgba(85,230,210,.24),transparent 62%); }
.visual-top,.data-primary,.data-grid,.pulse-line,.producthub-visual small { position:relative; z-index:1; }
.visual-top { display:flex; justify-content:space-between; font:700 9px/1 monospace; letter-spacing:.16em; color:var(--cyan); }
.data-primary { margin-top:120px; }.data-primary strong{display:block;font-size:clamp(70px,8vw,130px);line-height:.85;letter-spacing:-.08em}.data-primary span{display:block;margin-top:22px;color:rgba(255,255,255,.58);font-size:12px;}
.data-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:70px; }
.data-grid div { padding-top:17px; border-top:1px solid rgba(255,255,255,.18); }.data-grid strong{display:block;font-size:24px}.data-grid span{display:block;margin-top:8px;color:rgba(255,255,255,.5);font-size:10px}
.pulse-line { display:flex; align-items:end; gap:7px; height:70px; margin-top:45px; }
.pulse-line i { flex:1; height:30%; background:var(--cyan); opacity:.7; }.pulse-line i:nth-child(2n){height:66%}.pulse-line i:nth-child(3n){height:48%}.pulse-line i:nth-child(5n){height:92%}
.producthub-visual small { position:absolute; left:38px; bottom:24px; color:rgba(255,255,255,.35); font-size:8px; }
.project-copy { padding:70px 64px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.project-no,.card-top { font:700 9px/1 monospace; letter-spacing:.15em; color:var(--acid); }
.project-copy h3,.project-card h3 { margin:25px 0 18px; font-size:45px; letter-spacing:-.05em; }
.project-subtitle { color:#fff!important; font-size:20px!important; line-height:1.6!important; }
.project-copy p,.project-card p { color:rgba(255,255,255,.56); font-size:13px; line-height:1.9; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:26px 0 38px; list-style:none; }.project-tags li{padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:99px;color:rgba(255,255,255,.65);font-size:9px}
.project-copy>a{padding-bottom:5px;border-bottom:1px solid var(--acid);font-size:12px}.project-copy>a span{color:var(--acid)}
.project-row { display:grid; grid-template-columns:1fr 1fr; }
.project-card { min-height:540px; padding:55px; }
.project-card-dark { color:#fff; background:#17211f; }.project-card-paper{background:#f5f1e6;}
.project-card-paper .card-top{color:#8c3d2a}.project-card-paper p{color:#636a66}.project-card-paper .project-tags li{color:#5a625e;border-color:rgba(9,16,15,.15)}
.card-top { display:flex; justify-content:space-between; }
.skill-map { display:flex; align-items:center; margin:78px 0 54px; }.skill-map span{font-size:9px}.skill-map i{flex:1;height:1px;background:rgba(255,255,255,.22);position:relative}.skill-map i::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--acid)}
.hub-diagram { height:170px; margin:43px 0 18px; position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; place-items:center; }
.hub-diagram b { grid-row:1/3;grid-column:2;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--orange);color:#fff;font-size:12px;z-index:2}.hub-diagram span{padding:8px 12px;border:1px solid var(--line);font-size:9px}.hub-diagram::before,.hub-diagram::after{content:"";position:absolute;background:var(--line)}.hub-diagram::before{width:70%;height:1px}.hub-diagram::after{height:75%;width:1px}

.path { display:grid; grid-template-columns:.72fr 1.28fr; gap:110px; }
.path-intro { position:sticky; top:110px; align-self:start; }.path-intro>p:last-child{max-width:430px;margin-top:32px;color:#626b67;line-height:1.9}
.timeline { position:relative; padding-top:60px; }.timeline::before{content:"";position:absolute;top:70px;bottom:0;left:91px;width:1px;background:var(--line)}
.timeline-item { display:grid;grid-template-columns:72px 38px 1fr;gap:0 16px;min-height:230px }.timeline-item time{font:700 11px/1 monospace;color:#767f7b;padding-top:9px}.timeline-dot{position:relative;width:13px;height:13px;margin:3px 0 0 4px;border:3px solid var(--paper);border-radius:50%;background:var(--orange);box-shadow:0 0 0 1px var(--orange);z-index:2}.timeline-item>div{padding-bottom:60px;border-bottom:1px solid var(--line)}.timeline-item>div>p:first-child{margin:0;color:#9da4a1;font:700 9px/1 monospace;letter-spacing:.14em}.timeline-item h3{margin:15px 0;font-size:27px;letter-spacing:-.04em}.timeline-item>div>p:last-child{margin:0;color:#626b67;font-size:13px;line-height:1.9}

.writing { padding:150px max(32px,calc((100% - 1440px)/2)); display:grid; grid-template-columns:.9fr 1.1fr; gap:110px; background:#ad3e27;color:#fff; }
.writing-title>p:last-child{max-width:500px;margin-top:36px;color:rgba(255,255,255,.6);line-height:2}.writing-title h2 span{color:rgba(255,255,255,.35)}
.writing-list{border-top:1px solid rgba(255,255,255,.25)}
.writing-item{width:100%;padding:30px 0;display:grid;grid-template-columns:46px 1fr auto 28px;gap:20px;align-items:center;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer}.writing-item>span{font:700 9px/1 monospace;color:rgba(255,255,255,.4)}.writing-item h3{margin:0 0 7px;font-size:20px}.writing-item p{margin:0;color:rgba(255,255,255,.52);font-size:11px}.writing-item time{font-size:9px;color:rgba(255,255,255,.45)}.writing-item i{font-style:normal;transition:transform .2s}.writing-item:hover i{transform:translate(5px,-5px)}

.contact { padding:160px max(32px,calc((100% - 1440px)/2)) 90px; background:var(--ink);color:#fff;text-align:center}.contact h2 a{color:var(--acid)}.contact h2 a span{font-size:.6em}.contact-links{display:flex;justify-content:center;gap:45px;margin-top:70px;color:rgba(255,255,255,.5);font-size:11px}.contact-links a:hover{color:#fff}
.social-network{margin-top:110px;padding-top:38px;border-top:1px solid rgba(255,255,255,.12);text-align:left}.social-network>p{margin:0 0 22px;color:rgba(255,255,255,.33);font-size:9px;letter-spacing:.14em}.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}.social-grid a{min-height:78px;padding:0 18px;display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;background:var(--ink);transition:background .25s,color .25s}.social-grid a:hover{background:var(--acid);color:var(--ink)}.social-grid b{width:28px;height:28px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:10px}.social-grid span{font-size:11px}.social-grid i{font-style:normal;color:rgba(255,255,255,.3)}.social-grid a:hover i{color:var(--ink)}
footer{min-height:90px;padding:0 max(32px,calc((100% - 1440px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.1);font-size:9px;letter-spacing:.12em}

.reading-dialog { width:min(700px,calc(100% - 32px)); max-height:86vh; padding:0; border:0; color:var(--ink); background:var(--paper); box-shadow:0 30px 90px rgba(0,0,0,.4); }
.reading-dialog::backdrop{background:rgba(9,16,15,.78);backdrop-filter:blur(9px)}.dialog-close{position:sticky;top:20px;left:calc(100% - 58px);width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--paper);cursor:pointer;z-index:2}.dialog-content{padding:20px 80px 80px}.dialog-content small{color:var(--orange);font:700 9px/1 monospace;letter-spacing:.15em}.dialog-content h2{font-size:42px;margin:25px 0 35px}.dialog-content p{white-space:pre-line;line-height:2.15;color:#4f5854;font-family:serif;font-size:17px}

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}

@media (max-width: 980px) {
  :root{--page:calc(100% - 40px)}
  .site-header{padding:0 20px}.site-header nav{display:none}.header-cta{padding:9px 13px}
  .hero{padding:130px 20px 28px;grid-template-columns:1fr}.hero-main{align-self:end}.hero h1 em{margin-left:5vw}.hero-aside{display:none}.hero-foot{margin-top:70px;grid-template-columns:1fr 1fr;gap:16px}
  .manifesto{grid-template-columns:1fr;gap:10px;padding:110px 0}.section-index{top:110px}.manifesto-copy{padding-top:20px}.capability-list{margin-top:30px}.capability{grid-template-columns:60px 230px 1fr}
  .work{padding:110px 20px}.feature-project{grid-template-columns:1fr}.project-visual{min-height:520px}.project-copy{padding:55px 40px}.project-row{grid-template-columns:1fr}.section-head{align-items:start}
  .path{grid-template-columns:1fr;gap:30px;padding:110px 0}.path-intro{position:static}.timeline{padding-top:20px}
  .writing{padding:110px 20px;grid-template-columns:1fr;gap:60px}
  .social-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px) {
  .brand-copy{display:none}.hero{min-height:860px}.hero h1{font-size:53px}.hero h1 em{margin-left:0}.hero-intro{font-size:14px}.hero-actions{align-items:stretch}.button{gap:16px;padding:0 15px}.hero-foot{font-size:8px}
  .manifesto-lead h2,.section-head h2,.path-intro h2,.writing-title h2,.contact h2{font-size:39px}.section-index{display:none}.manifesto-copy .lead{font-size:17px}.capability{grid-template-columns:46px 1fr;gap:16px}.capability p{grid-column:2}.capability h3{font-size:21px}
  .section-head{display:block}.section-head>p{margin-top:25px}.producthub-visual{padding:25px;min-height:450px}.data-primary{margin-top:90px}.data-primary strong{font-size:68px}.data-grid{gap:12px;margin-top:55px}.data-grid strong{font-size:18px}.project-copy,.project-card{padding:40px 25px}.project-copy h3,.project-card h3{font-size:35px}.project-card{min-height:500px}.skill-map span:nth-of-type(even){display:none}
  .timeline::before{left:78px}.timeline-item{grid-template-columns:62px 30px 1fr;gap:0 10px}.timeline-item h3{font-size:21px}
  .writing-item{grid-template-columns:30px 1fr 22px}.writing-item time{display:none}.writing-item h3{font-size:17px}.writing-item p{line-height:1.6}
  .contact{padding:110px 20px 70px}.contact-links{flex-direction:column;gap:18px;margin-top:45px}.social-network{margin-top:75px}.social-grid{grid-template-columns:1fr}.social-grid a{min-height:62px}footer{padding:25px 20px;gap:20px;flex-wrap:wrap}.dialog-content{padding:15px 28px 55px}.dialog-content h2{font-size:34px}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.orbit,.orbit-label,.live-dot{animation:none}.reveal{opacity:1;transform:none;transition:none}.pointer-glow{display:none} }