/* ==========================================================================
   Fonts — self-hosted (Google Fonts is blocked in mainland China).
   Latin subsets; Source Serif is pinned to one optical size to stay small.
   ========================================================================== */
@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../assets/fonts/inter-pinyin.woff2) format('woff2');
  unicode-range:U+0100-0101,U+0112-0113,U+011A-011B,U+012A-012B,U+014C-014D,U+016A-016B,U+01CD-01DC;}
@font-face{font-family:'Inter'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url(../assets/fonts/inter-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url(../assets/fonts/inter-italic-pinyin.woff2) format('woff2');
  unicode-range:U+0100-0101,U+0112-0113,U+011A-011B,U+012A-012B,U+014C-014D,U+016A-016B,U+01CD-01DC;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');}
@font-face{font-family:'Source Serif 4'; font-style:normal; font-weight:200 900; font-display:swap;
  src:url(../assets/fonts/source-serif-4-latin.woff2) format('woff2');}
@font-face{font-family:'Source Serif 4'; font-style:italic; font-weight:200 900; font-display:swap;
  src:url(../assets/fonts/source-serif-4-italic-latin.woff2) format('woff2');}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --bg:#fdfdfc; --bg-hero:#fafaf9; --bg-footer:#f7f7f5; --bg-raised:#ffffff;
  --ink:#0b0d11;            /* name, headings */
  --text:#2b2e35;           /* lede, quotes, body */
  --soft:#41444c;           /* nav links, footer links */
  --muted:#5f626a;          /* descriptions, list text */
  --subtle:#73767d;         /* dates, index numbers, venues */
  --faint:#9b9da3;          /* motto, footer mono */
  --line:#e8e8e6;           /* rules and dividers */
  --line-strong:#d3d4d7;    /* short rules, ghost button border */
  --accent:#1b4b45;         /* primary button */
  --accent-hover:#153d38;
  --accent-ink:#1d4c47;     /* text links */
  --accent-soft:#c9efdc;    /* NEW badge */
  --accent-soft-ink:#1b5646;
  --icon:#123f3a;           /* research icons */
  --toggle:#ebebe9; --knob:#ffffff; --knob-ink:#3a3d44;
  --hover:rgba(11,13,17,.06);

  --sans:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4','Songti SC',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  /* Type and spacing below are tuned at a 1280px-wide layout and grow ×1.125 up to 1360px+
     (body text 17.6px, like yancomm.net). Narrower windows keep the 1280 sizes. */
  --u:clamp(1px, 100vw / 1209, 1.125px);
  --maxw:1266px; --gutter:clamp(20px,6.05vw,87px); --nav-h:calc(72 * var(--u));

  /* "Hack Haotian" console — always a dark screen */
  --green:#1f9e5a; --red:#d7263d; --screen:#0d1117; --screen-ink:#e6edf3; --screen-muted:#8b949e;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1113; --bg-hero:#121416; --bg-footer:#16181b; --bg-raised:#1b1e21;
    --ink:#f1f2f3; --text:#d3d5d9; --soft:#bcbfc5; --muted:#9ea2a9; --subtle:#8b8f97; --faint:#62666e;
    --line:#24272b; --line-strong:#383c42;
    --accent:#2a6c62; --accent-hover:#327a6f; --accent-ink:#8fd3c1; --accent-soft:#173a32; --accent-soft-ink:#a6e8cf;
    --icon:#8fd3c1; --toggle:#2b2f34; --knob:#40454c; --knob-ink:#e8eaed; --hover:rgba(255,255,255,.07);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1113; --bg-hero:#121416; --bg-footer:#16181b; --bg-raised:#1b1e21;
  --ink:#f1f2f3; --text:#d3d5d9; --soft:#bcbfc5; --muted:#9ea2a9; --subtle:#8b8f97; --faint:#62666e;
  --line:#24272b; --line-strong:#383c42;
  --accent:#2a6c62; --accent-hover:#327a6f; --accent-ink:#8fd3c1; --accent-soft:#173a32; --accent-soft-ink:#a6e8cf;
  --icon:#8fd3c1; --toggle:#2b2f34; --knob:#40454c; --knob-ink:#e8eaed; --hover:rgba(255,255,255,.07);
  color-scheme:dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:calc(16 * var(--u)); line-height:1.5; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{list-style:none; padding:0;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font:inherit; color:inherit;}
em{font-style:italic;} strong{font-weight:600;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:2px;}
::selection{background:var(--accent-soft); color:var(--ink);}

.wrap{width:min(var(--maxw), 100% - 2*var(--gutter)); margin-inline:auto;}
.sprite{position:absolute; width:0; height:0; overflow:hidden;}
.icon{width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
main section[id]{scroll-margin-top:calc(var(--nav-h) - 1px);}
.pub[id],#contact{scroll-margin-top:calc(var(--nav-h) + 16px);}

.idx{font-family:var(--mono); font-size:calc(13.5 * var(--u)); line-height:1; color:var(--subtle); white-space:pre;}
.more{
  display:inline-flex; align-items:center; gap:calc(9 * var(--u)); padding:0; border:0; background:none; cursor:pointer;
  font-size:calc(15.5 * var(--u)); line-height:1.3; color:var(--accent-ink); white-space:nowrap;
}
.more .icon{font-size:calc(16 * var(--u)); stroke-width:1.7; transition:transform .2s ease;}
.more:hover .icon{transform:translateX(calc(3 * var(--u)));}
.more:hover{color:var(--ink);}
.more[aria-expanded="true"] .icon{transform:rotate(-90deg);}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{position:sticky; top:0; z-index:50; background:var(--bg-hero); transition:box-shadow .2s ease;}
.nav.is-stuck{box-shadow:0 1px 0 var(--line), 0 6px 20px -16px rgba(0,0,0,.25);}
.nav__inner{display:flex; align-items:center; height:var(--nav-h);}
.nav__name{flex:none; width:calc(188 * var(--u)); font-size:calc(22 * var(--u)); font-weight:500; letter-spacing:-.012em; color:var(--ink); white-space:nowrap;}
.nav__links{display:flex; gap:calc(32 * var(--u)); font-size:calc(14.5 * var(--u)); letter-spacing:-.005em; color:var(--soft);}
.nav__links a{white-space:nowrap; transition:color .15s;}
.nav__links a:hover{color:var(--ink);}
.nav__tools{margin-left:auto; display:flex; align-items:center; gap:calc(11.5 * var(--u));}
.icon-btn{
  width:calc(36 * var(--u)); height:calc(36 * var(--u)); display:grid; place-items:center; flex:none; padding:0; border:0; border-radius:8px;
  background:none; color:var(--ink); font-size:calc(20 * var(--u)); cursor:pointer; transition:background-color .15s;
}
.icon-btn:hover{background:var(--hover);}
/* Per-icon sizes so the four nav icons look equally big: the GitHub mark is a solid circle
   filling its whole box, the search glyph is compact, the cap is wide and flat. */
#search-open .icon{font-size:calc(20.5 * var(--u));}
.icon-btn .icon--gh{font-size:calc(16.5 * var(--u));}
.icon-btn .icon--cap{font-size:calc(20.75 * var(--u));}
.theme-toggle{
  position:relative; flex:none; width:calc(42 * var(--u)); height:calc(22 * var(--u)); margin-left:calc(23 * var(--u)); padding:0; border:0; border-radius:999px;
  background:var(--toggle); cursor:pointer; transition:background-color .2s;
}
.theme-toggle__knob{
  position:absolute; top:-1px; left:-1px; width:calc(24 * var(--u)); height:calc(24 * var(--u)); border-radius:50%;
  display:grid; place-items:center; background:var(--knob); color:var(--knob-ink); font-size:calc(13 * var(--u));
  box-shadow:0 1px 3px rgba(0,0,0,.13), 0 0 0 .5px rgba(0,0,0,.05); transition:transform .25s ease, background-color .2s;
}
.theme-toggle__knob .icon{grid-area:1/1; stroke-width:2; transition:opacity .2s, transform .25s;}
.theme-toggle .icon--moon{opacity:0; transform:rotate(-40deg);}
.theme-toggle[aria-checked="true"] .theme-toggle__knob{transform:translateX(calc(20 * var(--u)));}
.theme-toggle[aria-checked="true"] .icon--sun{opacity:0; transform:rotate(40deg);}
.theme-toggle[aria-checked="true"] .icon--moon{opacity:1; transform:none;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:var(--bg-hero); padding:calc(9 * var(--u)) 0 calc(37 * var(--u));}
.hero__inner{display:grid; grid-template-columns:minmax(0,711fr) minmax(0,414fr);}
.hero__text{padding:clamp(24px,3.75vw,54px) clamp(12px,1.875vw,27px) 0 0;}
.eyebrow{font-family:var(--mono); font-size:clamp(11.5px,1.055vw,15.188px); line-height:1.48; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:var(--muted);}
.hero__name{
  margin:clamp(8px,1.1vw,15.75px) 0 0 -.034em; font-size:clamp(56px,8.6vw,123.75px); line-height:.873; font-weight:820; letter-spacing:-.035em;
  font-variation-settings:'opsz' 14; text-transform:uppercase; color:var(--ink);
}
.hero__tagline{margin-top:clamp(6px,.82vw,11.812px); font-size:clamp(18px,1.83vw,26.325px); line-height:1.282; font-weight:300; letter-spacing:-.01em; color:var(--ink);}
.hero__rule{display:block; width:calc(27 * var(--u)); height:1px; margin-top:clamp(16px,1.68vw,24.188px); background:var(--line-strong);}
.hero__lede{max-width:22em; margin-top:clamp(14px,1.52vw,21.938px); font-size:clamp(16px,1.523vw,21.938px); line-height:1.41; font-weight:300; color:var(--text);}
.hero__actions{display:flex; flex-wrap:wrap; gap:clamp(12px,1.33vw,19.125px); margin-top:clamp(20px,2.38vw,34.312px);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:clamp(9px,1.02vw,14.625px); height:clamp(40px,3.75vw,54px); padding:0 clamp(14px,1.72vw,24.75px);
  border-radius:3px; font-size:clamp(13px,1.25vw,18px); font-weight:400; white-space:nowrap; transition:background-color .15s, border-color .15s, color .15s;
}
.btn .icon{font-size:clamp(15px,1.4vw,20.25px);}
.btn--primary{background:var(--accent); color:#fff; min-width:clamp(160px,16.56vw,238.5px);}
.btn--primary:hover{background:var(--accent-hover);}
.btn--primary .icon{font-size:clamp(14px,1.33vw,19.125px); stroke-width:1.7;}
.btn--ghost{gap:clamp(8px,.94vw,13.5px); padding:0 clamp(12px,1.4vw,20.25px); border:1px solid var(--line-strong); color:var(--accent-ink); min-width:clamp(128px,13.28vw,191.25px); background:var(--bg-hero);}
.btn--ghost:hover{border-color:var(--accent-ink);}
.btn--ghost .icon{font-size:clamp(16px,1.56vw,22.5px); stroke-width:1.5; color:var(--ink);}

.hero__photo{position:relative; aspect-ratio:331/406; overflow:hidden; background:#cfd6dc; isolation:isolate;}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; z-index:0; cursor:zoom-in;}
.hero__photo::before,.hero__photo::after{content:''; position:absolute; left:0; right:0; pointer-events:none; z-index:1;}
.hero__photo::before{top:0; height:44%; background:linear-gradient(to bottom, rgba(12,18,28,.34), rgba(12,18,28,0));}
.hero__photo::after{bottom:0; height:36%; background:linear-gradient(to top, rgba(8,10,14,.55), rgba(8,10,14,0));}
.hero__tags{
  position:absolute; z-index:2; top:clamp(18px,2.19vw,31.5px); left:clamp(18px,2.5vw,36px); font-family:var(--mono); font-size:clamp(10px,.953vw,13.725px); line-height:1.8;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.86); pointer-events:none;
}
.hero__caption{position:absolute; z-index:2; left:clamp(18px,2.5vw,36px); bottom:clamp(10px,1.25vw,18px); font-size:clamp(12px,1.055vw,15.188px); line-height:1.63; color:#fff; pointer-events:none;}
.hero__shuffle{
  position:absolute; z-index:3; right:calc(14 * var(--u)); bottom:calc(16 * var(--u)); width:calc(32 * var(--u)); height:calc(32 * var(--u)); display:grid; place-items:center; padding:0;
  border:1px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(10,12,16,.32); color:#fff; font-size:calc(15 * var(--u));
  cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:.8; transition:opacity .2s, background-color .2s;
}
.hero__shuffle .icon{stroke-width:1.8; transition:transform .45s ease;}
.hero__shuffle:hover{opacity:1; background:rgba(10,12,16,.55);}
.hero__shuffle:hover .icon{transform:rotate(180deg);}


/* ==========================================================================
   Sections
   ========================================================================== */
.section > .wrap{padding:calc(34 * var(--u)) 0 calc(34 * var(--u));}
.section--ruled > .wrap{border-top:1px solid var(--line); padding-top:calc(26 * var(--u));}
#research > .wrap{padding-bottom:calc(31 * var(--u));}
.sec-head{display:flex; align-items:baseline;}
.sec-head .idx{flex:none; width:calc(62.5 * var(--u));}
.sec-head__title{flex:none; font-size:calc(28 * var(--u)); line-height:calc(33 * var(--u)); font-weight:600; letter-spacing:-.02em; color:var(--ink);}
.sec-head__desc{margin-left:calc(32 * var(--u)); max-width:calc(612 * var(--u)); font-size:calc(14.9 * var(--u)); line-height:calc(24 * var(--u)); font-weight:300; color:var(--muted);}
.sec-head__more{margin-left:auto; padding-left:calc(24 * var(--u));}

/* News */
.news{display:grid; grid-template-columns:minmax(0,732.5fr) minmax(0,392.5fr); align-items:start; margin-top:calc(24.75 * var(--u));}
.news__feature{display:grid; grid-template-columns:minmax(0,342fr) minmax(0,361fr); column-gap:calc(29.5 * var(--u)); margin-top:calc(12.5 * var(--u));}
.news__media{display:block; aspect-ratio:274/180; overflow:hidden; border-radius:2px; box-shadow:0 1px 2px rgba(15,20,30,.1), 0 10px 24px -14px rgba(15,20,30,.4);}
.news__media img{width:100%; height:100%; object-fit:cover;}
.news__body{display:flex; flex-direction:column; align-items:flex-start; padding-right:clamp(8px,1.72vw,24.75px);}
.news__meta{display:flex; align-items:center; gap:calc(16 * var(--u)); font-family:var(--mono); font-size:calc(12.3 * var(--u)); line-height:calc(24 * var(--u)); letter-spacing:.06em; text-transform:uppercase; color:var(--subtle);}
.badge{
  display:inline-flex; align-items:center; height:calc(24 * var(--u)); padding:0 calc(11 * var(--u)); border-radius:4px;
  background:var(--accent-soft); color:var(--accent-soft-ink); font-family:var(--mono); font-size:calc(13.5 * var(--u)); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}
.news__title{margin-top:calc(13 * var(--u)); font-family:var(--serif); font-size:clamp(16px,1.68vw,24.188px); line-height:1.395; font-weight:600; letter-spacing:-.003em; color:var(--ink);}
.news__sub{margin-top:calc(18 * var(--u)); font-size:calc(15.8 * var(--u)); line-height:calc(24 * var(--u)); font-weight:400; color:var(--muted);}
.news__body .more{margin-top:auto; padding-top:calc(16 * var(--u));}
.news__list{border-left:1px solid var(--line); padding:2px 0 calc(6 * var(--u)) calc(36 * var(--u));}
.news__item{padding:calc(18 * var(--u)) 0; border-top:1px solid var(--line);}
.news__item:first-child{padding-top:0; border-top:0;}
.news__item:last-child,.news__item:has(+ [hidden]){padding-bottom:0;}
.news__item time{display:block; font-family:var(--mono); font-size:calc(12.2 * var(--u)); line-height:calc(18 * var(--u)); letter-spacing:.06em; text-transform:uppercase; color:var(--subtle);}
.news__item p{margin-top:calc(6 * var(--u)); font-size:calc(15.6 * var(--u)); line-height:calc(22.5 * var(--u)); font-weight:300; color:var(--muted);}
.news__item strong{font-weight:inherit;}

/* Research */
.areas{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:calc(24.75 * var(--u));}
.area{position:relative; padding-left:calc(55 * var(--u));}
.area + .area::before{content:''; position:absolute; left:calc(11 * var(--u)); top:0; bottom:0; width:1px; background:var(--line);}
.area__icon{display:block; font-size:calc(40 * var(--u)); color:var(--icon); stroke-width:1.45;}
.area__title{margin-top:calc(12 * var(--u)); font-size:calc(17 * var(--u)); line-height:calc(24 * var(--u)); font-weight:500; letter-spacing:-.01em; color:var(--ink);}
.area__list{margin-top:calc(6 * var(--u)); font-size:calc(15.6 * var(--u)); line-height:calc(24.4 * var(--u)); font-weight:300; color:var(--muted);}

/* Publications */
.pubs{margin-top:calc(33 * var(--u));}
.pub{display:grid; grid-template-columns:calc(110 * var(--u)) minmax(0,1fr) auto; align-items:center; padding:calc(13.5 * var(--u)) 0 calc(10 * var(--u)); border-top:1px solid var(--line);}
.pub:first-child{border-top:0; padding-top:0;}
.pub__year{align-self:start; font-size:calc(17.4 * var(--u)); line-height:calc(22 * var(--u)); font-weight:300; color:var(--subtle); font-variant-numeric:tabular-nums;}
.pub__title{font-size:calc(15.3 * var(--u)); line-height:calc(22 * var(--u)); font-weight:600; letter-spacing:-.004em; color:var(--ink);}
.pub__authors,.pub__venue{font-size:calc(15 * var(--u)); line-height:calc(21.5 * var(--u)); font-weight:400; color:var(--subtle);}
.pub__authors .me{color:var(--soft); font-weight:500;}
.pub__links{display:flex; justify-content:flex-end; gap:calc(32 * var(--u)); padding-left:calc(28 * var(--u));}
.pub__links a{display:inline-flex; align-items:center; gap:calc(8 * var(--u)); font-size:calc(14.4 * var(--u)); color:var(--accent-ink); white-space:nowrap; transition:color .15s;}
.pub__links a:hover{color:var(--ink);}
.pub__links .icon{font-size:calc(17 * var(--u)); stroke-width:1.5; color:var(--icon);}
.pub.flash,.news__item.flash,.news__feature.flash,.area.flash{animation:flash 1.8s ease-out;}
@keyframes flash{0%,35%{background:var(--accent-soft);}100%{background:transparent;}}

/* Hack Haotian */
.sec-lead{margin-top:calc(22 * var(--u)); max-width:calc(760 * var(--u)); font-size:calc(16 * var(--u)); line-height:calc(26 * var(--u)); font-weight:300; color:var(--muted);}
.disclaimer{display:block; margin-top:calc(6 * var(--u)); font-family:var(--mono); font-size:calc(12.5 * var(--u)); color:var(--subtle);}
.fallback{margin-top:calc(22 * var(--u)); font-family:var(--mono); font-size:calc(13.5 * var(--u)); color:var(--subtle); border:1px dashed var(--line-strong); padding:calc(14 * var(--u)); border-radius:6px;}

/* About */
.about{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:calc(64 * var(--u)); margin-top:calc(30 * var(--u));}
.about__lead{font-family:var(--serif); font-size:calc(22 * var(--u)); line-height:calc(30 * var(--u)); font-weight:600; color:var(--ink); margin-bottom:calc(14 * var(--u));}
.about__bio p:not(.about__lead){font-size:calc(16.5 * var(--u)); line-height:calc(27 * var(--u)); font-weight:300; color:var(--text); margin-bottom:calc(14 * var(--u));}
.about__beyond{border-left:1px solid var(--line); padding-left:calc(40 * var(--u));}
.about__title{font-size:calc(17 * var(--u)); line-height:calc(30 * var(--u)); font-weight:500; letter-spacing:-.01em; color:var(--ink); margin-bottom:calc(6 * var(--u));}
.beyond li{padding:calc(12 * var(--u)) 0; border-top:1px solid var(--line); font-size:calc(15.6 * var(--u)); line-height:calc(24 * var(--u)); font-weight:300; color:var(--muted);}
.beyond li:first-child{border-top:0; padding-top:calc(6 * var(--u));}
.about__contact{margin-top:calc(18 * var(--u)); font-size:calc(16 * var(--u)); line-height:calc(26 * var(--u)); font-weight:300; color:var(--muted);}
.about__contact a{color:var(--accent-ink); border-bottom:1px solid currentColor;}
.about__contact a:hover{color:var(--ink);}
.count{font-family:var(--mono); font-size:.92em; font-weight:600; color:var(--accent-ink); cursor:pointer;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{margin-top:calc(10 * var(--u)); background:var(--bg-footer); padding:calc(39.75 * var(--u)) 0 calc(47 * var(--u));}
.footer__inner{display:grid; grid-template-columns:minmax(0,592.5fr) minmax(0,356.5fr) minmax(0,176fr);}
.footer__quote p{
  padding-left:calc(21 * var(--u)); text-indent:calc(-20.75 * var(--u)); font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:calc(31.1 * var(--u)); line-height:calc(40 * var(--u)); letter-spacing:-.005em; color:var(--ink);
}
.footer__quote figcaption{margin-top:calc(18 * var(--u)); padding-left:calc(21 * var(--u)); font-size:calc(16 * var(--u)); line-height:calc(24 * var(--u)); color:var(--soft);}
.footer__quote figcaption::before{content:''; display:block; width:calc(36 * var(--u)); height:1px; margin-bottom:calc(17.25 * var(--u)); background:var(--faint);}
.footer__links{margin-top:calc(-16 * var(--u)); padding:calc(16 * var(--u)) 0 0 calc(63.5 * var(--u)); border-left:1px solid var(--line); font-size:calc(14.3 * var(--u)); line-height:calc(30 * var(--u));}
.footer__links a{color:var(--soft); transition:color .15s;}
.footer__links a:hover{color:var(--ink);}
.footer__meta{display:flex; flex-direction:column; align-items:flex-end; padding-bottom:calc(11 * var(--u));}
.footer__motto{align-self:flex-start; white-space:nowrap; font-family:var(--mono); font-size:calc(11.5 * var(--u)); line-height:calc(19 * var(--u)); letter-spacing:.055em; text-transform:uppercase; color:var(--faint);}
.footer__copy{margin-top:auto; font-size:calc(12.9 * var(--u)); line-height:calc(20 * var(--u)); color:var(--subtle);}

/* ==========================================================================
   Search
   ========================================================================== */
.search{position:fixed; inset:0; z-index:120; display:flex; justify-content:center; align-items:flex-start; padding:12vh calc(16 * var(--u)) calc(16 * var(--u)); background:rgba(10,12,16,.3); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.search__panel{width:min(calc(580 * var(--u)),100%); overflow:hidden; background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; box-shadow:0 24px 60px -12px rgba(0,0,0,.3);}
.search__field{display:flex; align-items:center; gap:calc(10 * var(--u)); padding:calc(14 * var(--u)) calc(16 * var(--u)); border-bottom:1px solid var(--line);}
.search__field .icon{font-size:calc(18 * var(--u)); color:var(--subtle);}
.search__input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:calc(16 * var(--u)); color:var(--ink);}
.search__input::placeholder{color:var(--subtle);}
.search__input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}
.search__esc{font-family:var(--mono); font-size:calc(11 * var(--u)); color:var(--subtle); border:1px solid var(--line-strong); border-radius:4px; padding:2px calc(6 * var(--u)); background:none; cursor:pointer;}
.search__results{max-height:min(60vh,440px); overflow:auto; padding:calc(6 * var(--u));}
.search__item{display:grid; grid-template-columns:calc(78 * var(--u)) minmax(0,1fr); gap:calc(12 * var(--u)); align-items:baseline; width:100%; padding:calc(10 * var(--u)); border:0; border-radius:8px; background:none; text-align:left; cursor:pointer;}
.search__item[aria-selected="true"]{background:var(--hover);}
.search__kind{font-family:var(--mono); font-size:calc(11 * var(--u)); letter-spacing:.06em; text-transform:uppercase; color:var(--subtle);}
.search__title{display:block; font-size:calc(15 * var(--u)); line-height:calc(21 * var(--u)); color:var(--ink);}
.search__meta{display:block; margin-top:2px; font-size:calc(13 * var(--u)); line-height:calc(18 * var(--u)); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search__empty{padding:calc(18 * var(--u)) calc(12 * var(--u)); font-size:calc(14 * var(--u)); color:var(--muted);}

/* ==========================================================================
   "Hack Haotian" console (markup built by js/exploits.js)
   ========================================================================== */
.rig{display:flex; gap:calc(24 * var(--u)); flex-wrap:wrap; align-items:stretch; margin-top:calc(28 * var(--u));}
.phone{flex:0 0 calc(240 * var(--u)); background:#111; border-radius:28px; padding:calc(12 * var(--u)); position:relative; box-shadow:0 18px 40px -18px rgba(0,0,0,.45);}
.phone__notch{position:absolute; top:calc(14 * var(--u)); left:50%; transform:translateX(-50%); width:calc(70 * var(--u)); height:calc(8 * var(--u)); background:#000; border-radius:6px;}
.phone__screen{background:var(--screen); color:var(--screen-ink); border-radius:18px; height:calc(420 * var(--u)); overflow:hidden; position:relative; font-family:var(--mono); font-size:calc(13 * var(--u));}
.phone__screen::after{content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);}
.phone__idle{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--green); gap:calc(6 * var(--u));}
.phone__idle span{color:var(--screen-muted); font-size:calc(11 * var(--u));}

.term{flex:1 1 calc(320 * var(--u)); background:#0b0e13; color:var(--screen-ink); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; height:calc(444 * var(--u)); font-family:var(--mono); font-size:calc(13 * var(--u)); box-shadow:0 18px 40px -22px rgba(0,0,0,.5);}
.term__bar{display:flex; align-items:center; gap:calc(6 * var(--u)); padding:calc(8 * var(--u)) calc(12 * var(--u)); background:#11151c; border-bottom:1px solid #1c222c;}
.term__dot{width:calc(10 * var(--u)); height:calc(10 * var(--u)); border-radius:50%; background:#3a3f47;}
.term__title{margin-left:calc(8 * var(--u)); color:var(--screen-muted);}
.term__progress{margin-left:auto; color:var(--green);}
.term__out{flex:1; min-height:0; overflow-y:auto; padding:calc(12 * var(--u)); white-space:pre-wrap; word-break:break-word;}
.term__line{margin:0 0 2px;}
.term__boot{color:var(--green);} .term__muted{color:#9aa4b2;} .term__err{color:var(--red);} .term__ok{color:var(--green);}
.term__inputline{display:flex; align-items:center; gap:calc(8 * var(--u)); padding:calc(8 * var(--u)) calc(12 * var(--u)); border-top:1px solid #1c222c;}
.term__prompt{color:var(--green);}
.term__input{flex:1; background:transparent; border:none; color:var(--screen-ink); font-family:var(--mono); font-size:calc(13 * var(--u)); outline:none;}
.term__buttons{display:flex; flex-wrap:wrap; gap:calc(6 * var(--u)); padding:0 calc(12 * var(--u)) calc(12 * var(--u));}
.chip{font-family:var(--mono); font-size:calc(12 * var(--u)); background:#1a1f27; color:#cbd3de; border:1px solid #2a313c; border-radius:6px; padding:calc(5 * var(--u)) calc(9 * var(--u)); cursor:pointer;}
.chip:hover{border-color:var(--green); color:#fff;}
.chip--finale{border-color:var(--red); color:#ffb3bd;}

.fxagent{white-space:pre-wrap;} .fxagent__ok{color:var(--green);}
.fxagent__menu{margin-top:calc(10 * var(--u)); display:flex; flex-wrap:wrap; gap:calc(6 * var(--u));}
.fxagent__ask{flex-basis:100%; color:#9aa4b2; margin-bottom:2px;}
.fxagent__res{flex-basis:100%; color:var(--green); font-size:calc(11 * var(--u));}
.fx{padding:calc(12 * var(--u)); height:100%; overflow-y:auto;}
.fx__hd{color:var(--green); border-bottom:1px solid #1c222c; padding-bottom:calc(6 * var(--u)); margin-bottom:calc(8 * var(--u)); display:flex; justify-content:space-between;}
.fx__cap{color:#9aa4b2; margin-top:calc(8 * var(--u)); font-size:calc(11 * var(--u));}
.fxrec{color:var(--red);}
.fxmap{position:relative; height:calc(180 * var(--u)); border-radius:8px; background-color:#131a22;
  background-image:linear-gradient(0deg,transparent 39px,#1b232e 40px),linear-gradient(90deg,transparent 39px,#1b232e 40px);
  background-size:100% 40px,40px 100%;}
.fxmap__pin{position:absolute; top:50%; left:50%; color:var(--red); font-size:calc(20 * var(--u)); text-shadow:0 0 10px var(--red);}
.fxrow{display:flex; justify-content:space-between; gap:calc(8 * var(--u)); padding:calc(6 * var(--u)) 0; border-bottom:1px dashed #1c222c;}
.fxrow__k{color:#9aa4b2;} .fxrow__t{color:var(--screen-muted); font-size:calc(11 * var(--u));}
.fxcam img,.fxleak img{width:100%; border-radius:8px; display:block;}
.fxcam{position:relative;} .fxcam__hud{position:absolute; bottom:calc(6 * var(--u)); left:calc(6 * var(--u)); background:rgba(0,0,0,.6); padding:2px calc(6 * var(--u)); border-radius:4px; font-size:calc(10 * var(--u));}
.fxleak{position:relative;} .fxleak__stamp{position:absolute; top:calc(14 * var(--u)); left:calc(-6 * var(--u)); background:var(--red); color:#fff; padding:calc(3 * var(--u)) calc(10 * var(--u)); transform:rotate(-8deg); font-weight:700; letter-spacing:.1em;}
.fxsms__to{color:#9aa4b2; margin-bottom:calc(8 * var(--u));}
.fxsms__bubble{background:#1f6feb; color:#fff; padding:calc(8 * var(--u)) calc(12 * var(--u)); border-radius:12px; display:inline-block; max-width:90%; min-height:calc(18 * var(--u));}
.fxsms__status{color:var(--green); font-size:calc(11 * var(--u)); margin-top:calc(6 * var(--u));}
.fxcall{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:calc(14 * var(--u));}
.fxcall__to{font-size:calc(16 * var(--u));} .fxcall__decline{color:var(--red);}
.dots::after{content:''; animation:dots 1.2s steps(4,end) infinite;}
@keyframes dots{0%{content:'';}25%{content:'.';}50%{content:'..';}75%{content:'...';}}

/* Overlays: permission prompt, pentest report, matrix rain, Konami flash, photo lightbox */
.perm{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:calc(20 * var(--u));}
.perm__box{background:#fff; color:#1a1a1a; border-radius:16px; max-width:calc(320 * var(--u)); width:100%; padding:calc(22 * var(--u)); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4);}
.perm__icon{font-size:calc(34 * var(--u));}
.perm__q{font-size:calc(17 * var(--u)); margin:calc(10 * var(--u)) 0 2px;}
.perm__sub{font-family:var(--mono); font-size:calc(12 * var(--u)); color:#6b6b6b; margin:0 0 calc(16 * var(--u));}
.perm__row{display:flex; gap:calc(10 * var(--u)); justify-content:flex-end;}
.perm__btn{font-family:var(--mono); font-size:calc(14 * var(--u)); padding:calc(8 * var(--u)) calc(16 * var(--u)); border-radius:8px; border:1px solid #ccc; background:#f2f2f2; color:#1a1a1a; cursor:pointer;}
.perm__btn--allow{background:var(--accent); border-color:var(--accent); color:#fff;}
.perm__btn:hover{filter:brightness(.95);}
@media (prefers-reduced-motion:no-preference){ .perm__box{animation:pop .16s ease-out;} @keyframes pop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}} }

.matrix{position:fixed; inset:0; z-index:200; pointer-events:none;}
.report{position:fixed; inset:0; z-index:210; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:calc(20 * var(--u));}
.report__card{background:var(--screen); color:var(--screen-ink); font-family:var(--mono); border:1px solid var(--green); border-radius:12px; max-width:calc(560 * var(--u)); width:100%; padding:calc(22 * var(--u)); box-shadow:0 0 40px rgba(31,158,90,.4);}
.report__hd{color:var(--green); font-weight:700; letter-spacing:.08em;}
.report__target{color:var(--red); margin:calc(4 * var(--u)) 0 calc(12 * var(--u));}
.report__body{white-space:pre-wrap; font-size:calc(13 * var(--u)); line-height:1.6; margin:0;}
.report__foot{margin-top:calc(14 * var(--u)); color:var(--green);}
.report__close{margin-top:calc(14 * var(--u)); font-family:var(--mono); background:transparent; color:#9aa4b2; border:1px solid #2a313c; border-radius:6px; padding:calc(6 * var(--u)) calc(12 * var(--u)); cursor:pointer;}
.report__close:hover{border-color:var(--green); color:#fff;}

.crt{animation:glitch .18s steps(2) 6;}
@keyframes glitch{0%{filter:none;}50%{filter:hue-rotate(60deg) contrast(1.3);}100%{filter:none;}}
.pwned{position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:calc(28 * var(--u)); color:var(--red); background:rgba(0,0,0,.75); text-shadow:0 0 20px var(--red);}

.lightbox{position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; padding:calc(24 * var(--u)); cursor:zoom-out;}
.lightbox img{max-width:95vw; max-height:92vh; object-fit:contain; border-radius:6px; box-shadow:0 10px 50px rgba(0,0,0,.6);}
.lightbox__close{position:fixed; top:calc(14 * var(--u)); right:calc(18 * var(--u)); background:transparent; border:none; color:#fff; font-size:calc(26 * var(--u)); cursor:pointer; font-family:var(--mono);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav__name{width:auto; margin-right:clamp(24px,5vw,68px);}
}
@media (max-width:980px){
  .nav__links{gap:22px;} .nav__tools{gap:4px;} .theme-toggle{margin-left:12px;}
  .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:32px;}
  .hero__name{font-size:clamp(48px,8.8vw,92px);}
  .hero__lede br{display:none;}
  .hero__text{padding-top:24px; padding-right:0;}
  .news{grid-template-columns:minmax(0,1fr);}
  .news__list{border-left:0; border-top:1px solid var(--line); margin-top:32px; padding:24px 0 0;}
  .areas{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px;}
  .area:nth-child(odd){padding-left:0;} .area:nth-child(odd)::before{display:none;}
  .footer__inner{grid-template-columns:minmax(0,1fr) auto; row-gap:36px;}
  .footer__quote{grid-column:1/-1;}
  .footer__links{margin-top:0; padding:0; border-left:0; display:flex; flex-wrap:wrap; gap:4px 28px;}
  .about{grid-template-columns:minmax(0,1fr); gap:28px;}
  .about__beyond{border-left:0; padding-left:0;}
}
@media (max-width:780px){
  :root{--nav-h:60px;}
  .nav__inner{flex-wrap:wrap; height:auto; padding:10px 0 8px;}
  .nav__name{font-size:19px; margin-right:0;}
  .nav__links{order:3; width:100%; gap:22px; padding:8px 0 2px; font-size:14.5px; overflow-x:auto; scrollbar-width:none;}
  .nav__tools{gap:2px;} .theme-toggle{margin-left:10px;}
  main section[id]{scroll-margin-top:100px;} .pub[id],#contact{scroll-margin-top:116px;}
  .hero__inner{grid-template-columns:minmax(0,1fr);}
  .hero__text{padding-top:18px;}
  .hero__name{font-size:clamp(54px,15.5vw,96px);}
  .hero__photo{margin-top:34px; aspect-ratio:4/5;}
  .sec-head{flex-wrap:wrap;}
  .sec-head .idx{width:auto; margin-right:14px;}
  .sec-head__desc{flex-basis:100%; margin:10px 0 0; order:3;}
  .sec-head__more{order:2;}
  .news__feature{grid-template-columns:minmax(0,1fr); row-gap:20px;}
  .news__title{font-size:19px;}
  .news__body{padding-right:0;}
  .news__body .more{margin-top:18px; padding-top:0;}
  .pub{grid-template-columns:62px minmax(0,1fr);}
  .pub__links{grid-column:2; justify-content:flex-start; padding:10px 0 0; gap:24px;}
  .rig{margin-top:22px;}
}
@media (max-width:520px){
  .areas{grid-template-columns:minmax(0,1fr); row-gap:26px;}
  .area{display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; padding-left:0;}
  .area::before{display:none;}
  .area__icon{grid-row:span 2; font-size:34px;}
  .area__title{margin-top:0;}
  .area__list{margin-top:2px;}
  .footer__quote p{font-size:23px; line-height:32px; text-indent:-15.5px;}
  .footer__inner{grid-template-columns:minmax(0,1fr);}
  .footer__meta{align-items:flex-start;}
  .footer__copy{margin-top:18px;}
  .phone{flex-basis:100%;} .phone__screen{height:340px;}
  .btn{flex:1 1 auto; min-width:0;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important;}
  .crt{animation:none;}
}