:root{--paper:#faf9f3;--ink:#252533;--muted:#74727c;--accent:#7660b5;--line:rgba(90,77,124,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:40px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
header,main,footer{max-width:1440px;margin:0 auto}
header{height:94px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.wordmark{font-size:16px;font-weight:650;letter-spacing:2px}nav{display:flex;gap:36px;font-size:13px}nav a{padding:10px 0}
.hero{position:relative;min-height:520px;padding:50px 6% 34px;isolation:isolate;display:flex;align-items:center}
.hero-aura{position:absolute;z-index:-1;pointer-events:none;right:-2%;top:-95px;width:75%;height:730px;background:radial-gradient(ellipse at 66% 27%,rgba(141,141,244,.53),transparent 39%),radial-gradient(ellipse at 45% 49%,rgba(248,139,199,.45),transparent 41%),radial-gradient(ellipse at 80% 66%,rgba(170,218,173,.39),transparent 39%),radial-gradient(ellipse at 42% 72%,rgba(160,198,241,.25),transparent 38%);filter:blur(39px);mask-image:radial-gradient(ellipse at 60% 45%,black 20%,transparent 72%)}
.hero-content{position:relative;z-index:1}
h1{font-size:clamp(62px,7.4vw,106px);line-height:1.16;letter-spacing:-5px;font-weight:750;margin:0 0 28px}
.gradient-word{display:inline-block;color:#b36ec0;background:linear-gradient(115deg,#8870d0 3%,#c075cd 37%,#e5a1c9 62%,#88a8ce 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:0}
.hero-bottom p{font-size:14px;line-height:2;color:#66616f;margin:0}
.hero-link{font-size:13px;margin-top:30px;display:inline-flex;align-items:center;gap:32px}.hero-link span{color:var(--accent)}
.section{padding:55px 6% 0;position:relative;isolation:isolate}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-heading h2{font-size:28px;font-weight:650;letter-spacing:-1px;margin:0}.section-heading p{font-size:11px;line-height:1.9;color:var(--muted);margin:0}
.systems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start;position:relative}
.system{padding:30px 25px 10px;position:relative;isolation:isolate;min-width:0}
.system::before{content:"";position:absolute;inset:-7px -14px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 22%,rgba(218,192,237,.5),transparent 72%);filter:blur(22px)}
.system:nth-child(2)::before{background:radial-gradient(ellipse at 50% 22%,rgba(183,218,217,.43),transparent 72%)}
.system:nth-child(3)::before{background:radial-gradient(ellipse at 50% 22%,rgba(242,202,219,.5),transparent 72%)}
.card-top{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#777180}.card-top span:first-child{font-family:Consolas,monospace;font-size:11px;color:#8a75ad}
h3{font-weight:650}.system h3{font-size:26px;line-height:1.4;margin:34px 0 18px;letter-spacing:-.6px}
.lead{font-size:13px;line-height:1.95;color:#68616f;min-height:80px;margin:0 0 18px}
details{font-size:13px}summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;padding:16px 0;cursor:pointer;list-style:none;border-bottom:1px solid var(--line)}
summary::-webkit-details-marker{display:none}summary span{font-size:16px;font-weight:400;color:var(--accent);transition:transform .2s}details[open] summary span{transform:rotate(45deg)}
.detail{font-size:13px;line-height:1.95;color:#66616f;padding:3px 0 15px}.detail h4{font-size:12px;color:var(--ink);font-weight:650;margin:21px 0 7px}.detail p{margin:0 0 10px}.detail .note{font-size:11px;color:var(--muted)}
.action{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;padding:16px 0;border-bottom:1px solid var(--line)}.action span{color:var(--accent);font-size:15px;transition:transform .18s}.action:hover span{transform:translate(2px,-2px)}
.system .document-link{border:0;padding:18px 0}.document-link span{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6)}
.works{padding-top:85px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 38px}
.works::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-7%;right:-7%;top:0;height:450px;background:radial-gradient(ellipse at 24% 45%,rgba(220,221,246,.21),transparent 45%),radial-gradient(ellipse at 80% 36%,rgba(244,211,223,.18),transparent 43%);filter:blur(35px)}
.works .section-heading,.filters{grid-column:1/-1}.works .section-heading{margin-bottom:20px}
.filters{display:flex;gap:25px;margin-bottom:36px;align-items:center}button{border:0;background:none;font:12px "Microsoft YaHei",sans-serif;color:var(--muted);padding:9px 0;cursor:pointer;position:relative}button.active{color:var(--ink)}button.active::after{content:"";height:3px;border-radius:4px;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(90deg,#b8a5dc,#eeadd0)}
.work{min-width:0;padding:12px 4px 28px}.work[hidden]{display:none}.work-copy h3{font-size:25px;line-height:1.55;margin:0 0 20px;min-height:78px;letter-spacing:-.5px}
.work-copy>p{font-size:13px;line-height:2;color:#68616f;min-height:106px;margin:0 0 20px}.analysis-documents{margin-top:7px}.analysis-documents .action{font-size:11px;padding:13px 0}
small{display:block;font-size:10px;color:var(--muted);margin-top:12px}
.contact{margin:55px 6% 0;padding:60px 0 70px;position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:center;gap:40px}
.contact::before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:-30px -70px;background:radial-gradient(ellipse at 66% 55%,rgba(222,200,239,.25),transparent 48%),radial-gradient(ellipse at 30% 35%,rgba(188,216,222,.18),transparent 45%);filter:blur(38px)}
.contact h2{font-size:35px;font-weight:600;margin:0}.contact>div{min-width:350px}.contact a{font-size:22px}.contact p{font-size:12px;color:var(--muted);margin:17px 0 23px}.contact .resume{font-size:12px;border-bottom:1px solid var(--line);padding-bottom:6px}
footer{padding:22px 6% 30px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
@media(min-width:1500px){.hero-aura{right:0;width:80%}}
@media(max-width:1000px){header{height:82px}nav{gap:26px}.hero{min-height:470px;padding-top:35px}.hero-aura{width:80%;right:-10%;opacity:.85}h1{font-size:76px;letter-spacing:-4px}.systems{gap:14px}.system{padding:24px 12px 5px}.system h3{font-size:23px}.card-top{font-size:9px}.section-heading h2{font-size:25px}.works{gap:0 26px}.work-copy h3{font-size:22px}.work-copy>p{font-size:12px;min-height:120px}.analysis-documents .action{font-size:10px}}
@media(max-width:700px){html{scroll-padding-top:20px}header{height:75px;padding:0 6%}.wordmark{font-size:14px}nav{gap:18px;font-size:11px}nav a{padding:10px 0}.hero{min-height:430px;padding-top:20px;align-items:flex-start}.hero-aura{width:110%;height:560px;right:-40%;top:-30px;opacity:.65;filter:blur(25px)}h1{font-size:66px;letter-spacing:-3px;margin-top:20px;margin-bottom:23px}.hero-bottom p{font-size:12px}.hero-link{font-size:12px;margin-top:24px}.section{padding-top:30px}.section-heading{align-items:start;gap:16px;margin-bottom:17px}.section-heading h2{font-size:24px;white-space:nowrap}.section-heading p{font-size:9px}.systems{grid-template-columns:1fr;gap:22px}.system{padding:25px 18px 4px}.system::before{inset:0 -6px}.card-top{font-size:10px}.system h3{font-size:27px;margin:23px 0 13px}.lead{min-height:0;font-size:13px;margin-bottom:12px;max-width:340px}.system summary{padding:14px 0}.system .document-link{padding:14px 0}.works{padding-top:57px;display:block}.filters{gap:23px;margin-bottom:25px}.work{padding:20px 5px 38px}.work-copy h3{font-size:26px;min-height:0;margin-bottom:17px}.work-copy>p{min-height:0;font-size:13px}.analysis-documents .action{font-size:12px}.contact{margin-top:5px;display:block;padding:30px 0 45px}.contact h2{font-size:28px;margin-bottom:25px}.contact>div{min-width:0}.contact a{font-size:19px}.contact p{font-size:12px}footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Project rows: title, purpose and entry remain easy to scan across the page. */
.systems{display:block}.system{display:grid;grid-template-columns:1fr 1.25fr 170px;gap:0 42px;align-items:center;padding:30px 18px 12px;margin-bottom:22px}.system::before{inset:-10px 0;background:radial-gradient(ellipse at 30% 40%,rgba(218,192,237,.3),transparent 70%)}.system:nth-child(2)::before{background:radial-gradient(ellipse at 50% 40%,rgba(183,218,217,.27),transparent 70%)}.system:nth-child(3)::before{background:radial-gradient(ellipse at 70% 40%,rgba(242,202,219,.32),transparent 70%)}.card-top{justify-content:flex-start;gap:18px}.system h3{margin:13px 0 0;font-size:26px}.lead{min-height:0;margin:0;font-size:13px}.system .document-link{justify-content:flex-end;gap:15px}.game-icon{color:var(--accent);flex:none;transition:transform .2s}.document-link:hover .game-icon{transform:rotate(-8deg)}.system>details{grid-column:1/-1;margin-top:4px}.system>details>summary{width:170px;margin-left:auto;border:0;padding:9px 0;justify-content:flex-end;gap:20px}.system .detail{max-width:760px;margin:4px auto 0;padding:0 0 15px}.works{display:block}.work{padding:30px 18px 36px;margin-bottom:18px}.work-copy{display:grid;grid-template-columns:1fr 1.25fr 170px;gap:0 42px;align-items:start}.work-copy h3{min-height:0;font-size:25px;grid-column:1;margin:0}.work-copy>p{grid-column:2;min-height:0;margin:0;font-size:13px}.work-copy>details{grid-column:2;grid-row:2;margin-top:14px}.work-copy>.action{grid-column:3;grid-row:1;border:0;padding:7px 0}.work-copy>small{grid-column:3;grid-row:2}.analysis-documents{grid-column:3;grid-row:1 / span 3;margin:0}.analysis-documents .action{padding:10px 0;font-size:11px}.filters{margin-bottom:10px}.work-copy:has(.analysis-documents)>details{grid-row:2}.works .section-heading{margin-bottom:20px}
@media(max-width:1000px){.system,.work-copy{grid-template-columns:1fr 1.1fr 145px;gap:0 24px}.system h3{font-size:23px}.system>details>summary{width:145px}.work-copy h3{font-size:22px}}
@media(max-width:700px){.system{grid-template-columns:1fr auto;gap:15px;padding:24px 12px 10px}.project-title{grid-column:1/-1}.system h3{font-size:25px}.system .lead{grid-column:1/-1}.system .document-link{grid-column:2;grid-row:3;padding:8px 0}.system>details{grid-column:1/-1;grid-row:4;margin:0}.system>details>summary{margin:0;width:auto;justify-content:flex-start;padding:6px 0;gap:20px}.work{padding:24px 12px 35px}.work-copy{display:block}.work-copy h3{font-size:24px;margin-bottom:17px}.work-copy>p{margin-bottom:12px}.work-copy>details{margin-top:10px}.work-copy>.action{justify-content:space-between;margin-top:12px}.analysis-documents{margin-top:10px}.analysis-documents .action{font-size:12px;padding:13px 0}}

/* Soft, offset washes carry the hero palette through the rest of the page. */
#systems::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-30px -8% -70px;background:radial-gradient(ellipse 380px 320px at 8% 68%,rgba(185,171,231,.24),transparent 75%),radial-gradient(ellipse 330px 300px at 18% 86%,rgba(240,179,211,.18),transparent 76%),radial-gradient(ellipse 350px 280px at 91% 30%,rgba(172,209,202,.19),transparent 75%);filter:blur(34px)}
.system::before{opacity:.55}
.works::before{top:-25px;bottom:-60px;height:auto;left:-8%;right:-8%;background:radial-gradient(ellipse 400px 350px at 94% 22%,rgba(185,180,239,.33),transparent 74%),radial-gradient(ellipse 340px 300px at 83% 37%,rgba(241,179,212,.23),transparent 76%),radial-gradient(ellipse 380px 340px at 5% 73%,rgba(164,204,222,.27),transparent 75%),radial-gradient(ellipse 350px 300px at 16% 89%,rgba(211,192,234,.26),transparent 76%);filter:blur(37px)}
.contact::before{inset:-75px -8% -35px;background:radial-gradient(ellipse 350px 270px at 75% 48%,rgba(198,178,235,.3),transparent 75%),radial-gradient(ellipse 320px 240px at 91% 72%,rgba(239,186,209,.23),transparent 75%),radial-gradient(ellipse 350px 250px at 51% 85%,rgba(181,219,199,.24),transparent 76%);filter:blur(35px)}
@media(max-width:700px){#systems::before,.works::before,.contact::before{opacity:.75;filter:blur(28px)}.works::before{background:radial-gradient(ellipse 260px 360px at 98% 15%,rgba(185,180,239,.3),transparent 75%),radial-gradient(ellipse 240px 330px at 5% 58%,rgba(164,204,222,.25),transparent 76%),radial-gradient(ellipse 260px 350px at 95% 91%,rgba(241,179,212,.25),transparent 76%)}}
