:root{--ink:#17253a;--muted:#71819a;--sky:#dceaf1;--paper:#f8fbfc;--line:#d5e0e5;--blue:#426eae;--blue-deep:#2a4774;--peach:#f3b4a9;--sun:#e98b76}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#4a6f96 0%,#6d8dae 16%,#9aa9bd 34%,#c3ada9 54%,#e3c9b8 76%,#f0e5d9 100%);color:var(--ink);font-family:"Noto Sans SC",sans-serif;font-size:14px}body::before{content:"";position:absolute;top:0;left:0;right:0;height:155vh;background:url(basic/kokogao2.png) center 34%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);z-index:-1;pointer-events:none}.site-shell{max-width:1220px;margin:12px auto;box-shadow:0 18px 60px rgba(30,45,66,.18);overflow:hidden}a{color:inherit;text-decoration:none}.site-header{height:67px;display:flex;align-items:center;padding:0 36px;border-bottom:1px solid rgba(255,255,255,.5);justify-content:space-between;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}.brand{font:500 14px "DM Mono",monospace;letter-spacing:-.06em}.brand span{color:var(--sun);font-size:22px;vertical-align:-2px;margin-left:1px}nav{display:flex;gap:25px;margin-left:auto;margin-right:28px}nav a{font-size:11px;color:#41536c;transition:color .2s}nav a:hover{color:var(--sun)}.header-github{font:20px "DM Mono",monospace;color:var(--blue)}
.hero{min-height:100vh;height:100vh;max-height:880px;position:relative;overflow:hidden}.hero-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 10vh 8.2%;max-width:62%}.hero h1{margin:0;font:900 clamp(2.8rem,6.4vw,5.6rem)/1.04 "Noto Serif SC",serif;letter-spacing:-.08em;color:#fff;text-shadow:0 2px 22px rgba(15,28,48,.55)}.hero-mark{display:block;margin-top:.42em;font:500 clamp(1rem,1.9vw,1.6rem)/1 "DM Mono",monospace;letter-spacing:-.04em;color:#fff8e7;text-shadow:0 1px 12px rgba(15,28,48,.55)}
.section{padding:54px 7.5%;border-bottom:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}.section-title{display:grid;grid-template-columns:34px 1fr auto;gap:13px;align-items:start;margin-bottom:28px}.section-title>p{margin:4px 0 0;color:var(--sun);font:10px "DM Mono",monospace}.section-title h2{font:900 23px/1 "Noto Serif SC",serif;letter-spacing:-.08em;margin:0}.section-title div span{font-size:10px;color:var(--muted);display:block;margin-top:8px}.section-title>a{font-size:10px;color:var(--blue);margin-top:5px}
.writing-grid{display:grid;grid-template-columns:1.02fr 1.45fr;gap:34px}.featured-story{height:231px;padding:18px;background:linear-gradient(145deg,#8ca5b8,#d7e4e9 46%,#f1c4b7);position:relative;overflow:hidden}.featured-story:before,.featured-story:after{content:"";position:absolute;border:1px solid #fff9;border-radius:50%;width:260px;height:260px;right:-95px;top:-105px}.featured-story:after{width:150px;height:150px;right:46px;top:64px;border-color:#fff7}.card-tag{font:9px "DM Mono",monospace;letter-spacing:.08em;color:#fff;position:relative;z-index:1}.featured-story>div{position:absolute;z-index:1;bottom:20px;left:20px;right:20px}.featured-story p{font-size:10px;margin:0 0 5px;color:#f9ffff}.featured-story h3{max-width:280px;font:700 22px/1.35 "Noto Serif SC",serif;letter-spacing:-.06em;color:white;margin:0 0 9px}.featured-story div span{font-size:10px;color:#f8fffd}.article-list{border-top:1px solid var(--line)}.article-list article{display:grid;grid-template-columns:30px 1fr 54px;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);align-items:start}.article-list>article>span,.article-list time{font:9px "DM Mono",monospace;color:#94a1b4;padding-top:4px}.article-list h3{font-size:13px;margin:0 0 4px}.article-list p{font-size:10px;color:var(--muted);margin:0}.article-list time{text-align:right}
.projects{background:rgba(255,255,255,.55)}.project-grid{display:grid;grid-template-columns:1.38fr .82fr;gap:16px}.project-card{min-height:280px;padding:24px;position:relative;overflow:hidden}.project-card h3{font:700 25px/1.35 "Noto Serif SC",serif;letter-spacing:-.07em;margin:34px 0 13px}.project-card>p:not(.card-label){font-size:11px;line-height:1.8;max-width:440px;margin:0;color:#52647c}.card-label{margin:0;font:9px "DM Mono",monospace;color:#8090a8;letter-spacing:.04em}.project-card-primary{color:#f9feff;background:linear-gradient(135deg,#375d9c,#81add0)}.project-card-primary:before{content:"";position:absolute;width:450px;height:205px;border-radius:55% 45% 50% 40%;background:#cceaff38;right:-80px;bottom:-68px;transform:rotate(-12deg)}.project-card-primary:after{content:"";position:absolute;width:220px;height:90px;border:1px solid #e4f8ff9c;border-radius:50%;right:53px;bottom:57px}.project-card-primary .card-label,.project-card-primary>p:not(.card-label){color:#e4f4ff}.project-stat{display:flex;gap:9px;align-items:center;position:absolute;bottom:21px;left:24px;z-index:1}.project-stat b{font:500 18px "DM Mono",monospace}.project-stat span{font-size:9px;line-height:1.5;opacity:.9;margin-right:11px}.project-card-secondary{background:#e7c6bd}.project-card-secondary:before{content:"";position:absolute;right:-15px;bottom:-65px;width:270px;height:270px;border:1px solid #fcf6f1a6;border-radius:50%}.project-card-secondary h3{font-size:28px}.small-arrow{position:absolute;right:22px;bottom:17px;font-size:26px;color:#9b625b}
.open-source{background:rgba(255,255,255,.55)}.link-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.link-grid>a,.link-placeholder{display:grid;grid-template-columns:40px 1fr 20px;gap:11px;padding:20px 14px 20px 0;align-items:center;border-bottom:1px solid var(--line)}.link-grid>a+div,.link-placeholder+div{border-left:1px solid var(--line);padding-left:18px}.link-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;font:9px "DM Mono",monospace}.link-placeholder .link-icon{background:#a8b8c2}.link-grid h3{font-size:12px;margin:0 0 4px}.link-grid p{font-size:9px;line-height:1.5;color:var(--muted);margin:0}.link-grid b{font-size:14px;font-weight:400;color:var(--blue)}
.sharing{display:grid;grid-template-columns:.77fr 1.23fr;gap:34px;padding-top:48px;padding-bottom:48px}.sharing .section-title{margin-bottom:22px}.sharing-copy>p{font-size:11px;line-height:1.9;color:var(--muted);max-width:250px}.sharing-copy>a{display:inline-block;margin-top:7px;font-size:11px;color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:3px}.share-feature{min-height:205px;padding:23px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#d5b0aa 0%,#ecbfc0 38%,#5c769d 100%)}.share-feature:before{content:"";position:absolute;width:235px;height:235px;right:-32px;top:-85px;border-radius:50%;background:#c1d5e48c}.share-feature:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,#1f354c66)}.share-feature>*{position:relative;z-index:1}.share-feature span{font:9px "DM Mono",monospace;position:absolute;top:20px;left:22px}.share-feature strong{font:700 27px "Noto Serif SC",serif;letter-spacing:-.07em}.share-feature p{margin:7px 0 0;font-size:10px}.share-feature i{position:absolute;right:21px;bottom:17px;font-size:25px;font-style:normal}
.journey{padding-bottom:66px}.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.timeline li{padding:15px 16px 0 0;min-height:96px;border-right:1px solid var(--line)}.timeline li+li{padding-left:16px}.timeline li:last-child{border:0}.timeline time{display:block;font:9px "DM Mono",monospace;color:var(--sun);margin-bottom:24px}.timeline h3{font-size:11px;line-height:1.55;margin:0}.timeline p{font-size:10px;color:var(--muted);margin:4px 0 0}.timeline a{color:var(--blue);border-bottom:1px solid rgba(66,110,174,.4);transition:color .2s,border-color .2s}.timeline a:hover{color:var(--sun);border-color:var(--sun)}
footer{min-height:230px;padding:45px 7.5% 24px;background:linear-gradient(120deg,#344f79,#7394b6 48%,#e89e91);color:white;position:relative;display:grid;grid-template-columns:1.15fr 1fr auto;gap:30px;align-items:start}footer .kicker{color:#e7edf5;margin-bottom:9px}footer h2{font:900 29px "Noto Serif SC",serif;letter-spacing:-.08em;margin:0 0 8px}footer>div>p:not(.kicker){font-size:11px;margin:0;color:#eff6fc}.contact-links{display:flex;flex-direction:column;gap:10px;padding-top:32px}.contact-links a{font:11px "DM Mono",monospace;border-bottom:1px solid #ffffff85;padding-bottom:8px}.contact-links span{float:right}.footer-signoff{font:18px/1 "DM Mono",monospace;letter-spacing:-.1em;text-align:right;margin:5px 0 0}.footer-signoff span{font-size:9px;letter-spacing:0;color:#e6edf5}
@media(max-width:760px){.site-shell{margin:0}body::before{height:700px;background-position:42% 22%;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%)}.site-header{height:58px;padding:0 19px}.site-header nav{display:none}.hero{min-height:560px;height:auto;max-height:none}.hero-copy{padding:0 24px 9vh;max-width:100%}.hero h1{font-size:54px}.hero-mark{font-size:16px}.section{padding:42px 24px}.section-title{grid-template-columns:27px 1fr}.section-title>a{display:none}.writing-grid,.project-grid,.sharing{grid-template-columns:1fr;gap:18px}.featured-story{height:210px}.project-card{min-height:250px}.link-grid{grid-template-columns:1fr}.link-grid>a+div,.link-placeholder+div{border-left:0;padding-left:0}.sharing{padding-top:42px;padding-bottom:42px}.share-feature{min-height:185px}.timeline{grid-template-columns:1fr}.timeline li,.timeline li+li{min-height:auto;padding:14px 0;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:105px 1fr;gap:8px}.timeline time{margin:2px 0}.timeline li:last-child{border-bottom:0}footer{display:block;padding:40px 24px 20px;min-height:260px}.contact-links{padding-top:26px}.footer-signoff{text-align:left;margin-top:44px}.article-list article{grid-template-columns:25px 1fr 34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 平铺信息流：每个内容单元保持同一视觉权重。 */
.flat-grid{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.flat-grid>article,.flat-grid>a,.flat-grid>div{min-height:202px;padding:20px;position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:var(--ink);transition:background .2s,transform .2s}
.flat-grid>a:hover,.flat-grid>article:hover{background:rgba(255,255,255,.72);transform:translateY(-2px)}
.flat-grid>article>span,.flat-grid>a>span,.flat-grid>div>span{display:block;font:9px "DM Mono",monospace;letter-spacing:.06em;color:var(--sun);margin-bottom:30px}
.flat-grid h3{font:700 18px/1.42 "Noto Serif SC",serif;letter-spacing:-.06em;margin:0 0 10px}
.flat-grid p{font-size:10px;line-height:1.75;color:var(--muted);margin:0;max-width:235px}
.flat-grid time{position:absolute;bottom:18px;left:20px;font:9px "DM Mono",monospace;color:#94a1b4}
.article-grid{grid-template-columns:repeat(4,1fr)}
.article-grid>article{min-height:186px}
.project-grid{grid-template-columns:repeat(2,1fr);gap:0}
.project-grid .project-card{min-height:255px;background:transparent;overflow:hidden}
.project-grid .project-card h3{font-size:22px;margin:30px 0 12px}
.project-grid .card-label{color:#8090a8}
.project-grid .project-stat{position:static;margin-top:27px;gap:8px}
.project-grid .project-stat b{font-size:16px;color:var(--blue-deep)}
.project-grid .project-stat span{font-size:9px;line-height:1.5;color:var(--muted);margin-right:12px}
.project-grid .small-arrow{color:var(--blue);bottom:16px;right:18px}
.sharing{display:block}
.sharing .section-title{margin-bottom:28px}
.share-grid{grid-template-columns:repeat(3,1fr)}
.share-grid>a,.share-grid>div{min-height:175px}
.share-grid b{position:absolute;right:18px;bottom:15px;color:var(--blue);font:18px "DM Mono",monospace}
@media(max-width:760px){.article-grid,.project-grid,.share-grid{grid-template-columns:1fr}.flat-grid>article,.flat-grid>a,.flat-grid>div{min-height:156px}.project-grid .project-card{min-height:205px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header,.section{background:rgba(255,255,255,.92)}}