/* ============================================================
   Anyway — light-native skin lifted from the anyway.sh rebuild.
   Archivo display (-.035em, lh ~1.0) + Inter body + JetBrains Mono,
   white paper, .5px hairlines, 16px cards that lift on hover,
   black pill CTA, sticky TOP bar (replaces the left rail via CSS),
   violet accent (#7765E3 family, darkened where text needs 4.5:1).
   Light is the native medium; dark uses anyway's --d-* palette.
   ============================================================ */
:root{
  --bg:#FFFFFF; --card:#FFFFFF; --well:#F6F7F8;
  --ink:#0F1011; --ink-2:#2c2e31; --mute:#44464A; --faint:#6d6f75;
  --line:rgba(15,16,17,.09); --line-2:rgba(15,16,17,.14); --line-hover:rgba(15,16,17,.22);
  /* violet family: #7765E3 is the brand hue (decor); text/fill duties use the
     darkened steps so #fff and small text clear 4.5:1 (see linear.css lesson) */
  --accent:#6553D6; --accent-2:#7765E3;
  --accent-dim:rgba(119,101,227,.08); --accent-line:rgba(119,101,227,.35);
  --accent-fill:#6553D6; --accent-fill-hover:#5747C4; --accent-on-tint:#5B4AC9;
  --on-accent:#fff;
  --green:#1a7f37; --yellow:#EEBB38;
  --inset:inset 0 1px 0 rgba(255,255,255,.7);
  --mac:0 1px 2px rgba(16,17,19,.04),0 12px 34px -12px rgba(16,17,19,.10);
  --shadow-lg:0 2px 4px rgba(16,17,19,.05),0 30px 70px -24px rgba(16,17,19,.22);
  --font-mono:'JetBrains Mono','Geist Mono',monospace;
  --font-display:'Archivo','Inter','Noto Sans SC',-apple-system,sans-serif;
  --t:.15s cubic-bezier(.22,.61,.36,1);
  --radius:16px;
}
html[data-theme="dark"]{
  --bg:#0F1011; --card:#1a1b1d; --well:#232427;
  --ink:#EFF0F2; --ink-2:#D6D8DC; --mute:#B8BABF; --faint:#8a8c92;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --line-hover:rgba(255,255,255,.30);
  --accent:#9D92F2; --accent-2:#7765E3;
  --accent-dim:rgba(119,101,227,.16); --accent-line:rgba(157,146,242,.40);
  --accent-fill:#6553D6; --accent-fill-hover:#7765E3; --accent-on-tint:#A79DF4;
  --green:#4cc06a; --yellow:#EEBB38;
  --inset:inset 0 1px 0 rgba(255,255,255,.05);
  --mac:0 0 0 1px rgba(255,255,255,.06),0 24px 64px -26px rgba(0,0,0,.9);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 30px 70px -24px rgba(0,0,0,.7);
}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter','Noto Sans SC',-apple-system,sans-serif;
  font-size:15px; letter-spacing:-.008em; font-weight:400;
  transition:background var(--t),color var(--t);
}
html[data-lang="zh"] body{font-family:'Noto Sans SC','Inter',sans-serif;letter-spacing:0}
.r-when-text,.r-edu-when,.r-meta-links,.r-portrait-cap,.r-xp-idx,.r-skill-num,.r-edu-idx,.r-label,.r-tool-label,.r-kicker,.r-based,.r-xp-where{font-family:var(--font-mono)}

.r-title,.r-h2{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:-.03em}
html[data-lang="zh"] .r-title,html[data-lang="zh"] .r-h2{font-family:'Noto Sans SC','Archivo',sans-serif;line-height:1.26;font-weight:700;letter-spacing:0}
html[data-lang="zh"] .r-role,html[data-lang="zh"] .r-xp-co,html[data-lang="zh"] .r-edge-title,html[data-lang="zh"] .r-skill-title{letter-spacing:0}
html[data-lang="zh"] .r-title,html[data-lang="zh"] .r-h2{word-break:keep-all}
em{font-style:normal;color:var(--accent);font-weight:600}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.r-work-cover:focus-visible{outline-offset:-3px}
.r-title,.r-h2,.r-foot-name{overflow-wrap:anywhere;min-width:0}

/* ============ TOP BAR — verbatim from anyway.sh site.css ============ */
/* progressive top blur (frosted glass): 7 stacked backdrop-filter layers with
   staggered masks; the nav itself is transparent and borderless on top of it. */
.top-blur{position:fixed;top:0;left:0;right:0;height:160px;z-index:100;pointer-events:none}
.top-blur .tb{position:absolute;inset:0}
.top-blur .tb:nth-child(1){-webkit-backdrop-filter:blur(.09px);backdrop-filter:blur(.09px);-webkit-mask:linear-gradient(to top,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%);mask:linear-gradient(to top,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%)}
.top-blur .tb:nth-child(2){-webkit-backdrop-filter:blur(.18px);backdrop-filter:blur(.18px);-webkit-mask:linear-gradient(to top,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%);mask:linear-gradient(to top,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%)}
.top-blur .tb:nth-child(3){-webkit-backdrop-filter:blur(.36px);backdrop-filter:blur(.36px);-webkit-mask:linear-gradient(to top,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%);mask:linear-gradient(to top,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%)}
.top-blur .tb:nth-child(4){-webkit-backdrop-filter:blur(.72px);backdrop-filter:blur(.72px);-webkit-mask:linear-gradient(to top,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%);mask:linear-gradient(to top,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%)}
.top-blur .tb:nth-child(5){-webkit-backdrop-filter:blur(1.4px);backdrop-filter:blur(1.4px);-webkit-mask:linear-gradient(to top,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%);mask:linear-gradient(to top,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%)}
.top-blur .tb:nth-child(6){-webkit-backdrop-filter:blur(2.8px);backdrop-filter:blur(2.8px);-webkit-mask:linear-gradient(to top,transparent 62.5%,#000 75%,#000 87.5%,transparent 100%);mask:linear-gradient(to top,transparent 62.5%,#000 75%,#000 87.5%,transparent 100%)}
.top-blur .tb:nth-child(7){-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask:linear-gradient(to top,transparent 75%,#000 87.5%,#000 100%);mask:linear-gradient(to top,transparent 75%,#000 87.5%,#000 100%)}

.r-frame{display:block}
/* .r-side plays anyway.sh's .nav-outer + .nav in one element: sticky, transparent,
   borderless; the max( ) padding centres the row to --maxw like margin:0 auto would. */
.r-side{
  position:sticky;top:0;z-index:110;
  width:auto;height:auto;flex-direction:row;align-items:center;gap:8px;
  padding:15px max(clamp(20px,5vw,32px),calc((100% - 1200px)/2));
  border-right:0;border-bottom:0;
  background:transparent;
  overflow:visible;
  display:flex;
}
.r-side .r-brand{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0;display:inline-flex;align-items:center}
.r-side .r-nav-links{
  display:flex;flex-direction:row;align-items:center;gap:2px;
  margin:0 auto 0 clamp(18px,2.6vw,36px);position:relative;
}
.r-side .r-nav-links a{
  display:inline-flex;align-items:center;gap:5px;
  font-size:14.5px;font-weight:500;color:var(--mute);
  padding:8px 14px;border-radius:999px;
  transition:color .2s,background .2s;
}
.r-side .r-nav-links a::before{display:none}
.r-side .r-nav-links a:hover{color:var(--ink);background:var(--well)}
.r-side .r-nav-links a.nav-active{color:var(--ink);background:var(--well);font-weight:600}
.r-side-foot{margin:0;flex-direction:row;align-items:center;gap:10px;padding:0;display:flex}
/* lang + theme switches follow anyway.sh's .pswitch: translucent pill, .5px rule,
   faint inactive → ink active on a soft tint (no hard black fill). Both button
   kinds share height:26px so the two pills line up. */
.r-segs{display:flex;gap:8px;flex-wrap:nowrap}
.r-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:.5px solid var(--line-2);border-radius:999px;background:color-mix(in srgb,var(--card) 72%,transparent);box-shadow:none}
.r-seg button{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--faint);line-height:1;transition:color .2s,background .2s}
.r-seg button:hover{color:var(--ink)}
.r-seg button.active{background:var(--well);color:var(--ink)}
/* icon-only theme buttons: padding 0 (must out-specify `.r-seg button` or the
   side padding squeezes the box and the icon falls back to start-alignment) */
.r-seg button.r-seg-ic{padding:0;width:30px}
.r-seg-ic .r-li{width:15px;height:15px;vertical-align:0}
.r-nav-dl{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--bg);border:.5px solid transparent;border-radius:999px;
  height:46px;padding:0 21px;font-size:15px;font-weight:500;cursor:pointer;
  font-family:'Inter','Noto Sans SC',sans-serif;white-space:nowrap;
  transition:transform .2s var(--t),background-color .2s,box-shadow .2s;
}
.r-nav-dl:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(15,16,17,.4)}
/* Export dropdown — anyway.sh dd-panel verbatim, right-aligned so it can't
   overflow the viewport, and tokenised so dark mode works. */
.r-nav-dl .care{font-size:9px;transition:transform .2s var(--t)}
.r-nav-dl[aria-expanded="true"] .care{transform:rotate(180deg)}
.dropdown{position:relative}
.dd-panel{
  position:absolute;top:calc(100% + 10px);right:0;transform:translateY(-6px);
  width:224px;background:var(--card);border:.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transition:opacity .18s var(--t),transform .18s var(--t),visibility 0s linear .18s;z-index:120;
}
.dd-panel.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s var(--t),transform .18s var(--t)}
.dd-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 12px;border-radius:11px;border:0;background:transparent;cursor:pointer;transition:background .15s;font-family:'Inter','Noto Sans SC',sans-serif}
.dd-item:hover,.dd-item:focus-visible{background:var(--well);outline:none}
.dd-num{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--accent-on-tint);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--accent-dim)}
.dd-txt strong{display:block;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
/* inline Lucide icons ride the text: 1em, optically aligned to the baseline */
.r-li{width:1em;height:1em;vertical-align:-.125em;flex-shrink:0}
.r-nav-dl .r-li{width:15px;height:15px}
.r-work-all-ic .r-li{vertical-align:0}
@media (max-width:760px){
  .r-side .r-nav-links{display:none}
}
/* legacy top-nav rules kept inert */
.r-nav{background:transparent;border-bottom:0}

/* ============ section frame ============ */
.r-sec{border-top:.5px solid var(--line);padding:84px 0}
.r-shell{max-width:1200px}
/* eyebrow: anyway's [ MONO ] bracket label */
.r-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.r-label::before{content:"[";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--faint);font-size:14px}
.r-label::after{content:"]";color:var(--faint);font-size:14px}
.r-h2{font-size:clamp(28px,3.4vw,44px);margin-top:14px}
.r-sub{color:var(--mute);line-height:1.65;font-size:15.5px;max-width:62ch}
/* shared card primitive */
.r-skill-group,.r-edu-item,.r-langs,.r-xp-item{
  background:var(--card);border:.5px solid var(--line-2);border-radius:var(--radius);
  transition:border-color .25s,transform .3s var(--t),box-shadow .3s;
}

/* ============ hero ============ */
.r-hero{border-bottom:.5px solid var(--line);position:relative;overflow:hidden}
.r-hero::before{content:"";position:absolute;top:-30%;right:-6%;width:56%;height:130%;background:radial-gradient(closest-side,rgba(119,101,227,.10),transparent 70%);pointer-events:none}
html[data-theme="dark"] .r-hero::before{background:radial-gradient(closest-side,rgba(119,101,227,.16),transparent 70%)}
.r-hero .r-shell{position:relative}
.r-kicker{font-size:12px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.r-title{font-size:clamp(38px,5vw,72px);margin:18px 0 12px}
/* rotating role carousel: small bilingual frame, big accent title that swaps */
.r-role-line{margin:18px 0 0;font-size:inherit}
.r-role-frame{display:block;font-family:var(--font-mono);font-size:clamp(13px,1.3vw,15px);font-weight:500;letter-spacing:.04em;color:var(--faint);text-transform:none}
.r-rot{display:block;margin-top:8px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--accent);font-size:clamp(30px,3.6vw,46px);min-height:1.1em}
html[data-lang="zh"] .r-rot{font-family:var(--font-display)}
.r-rot.swap,.r-chips.swap{animation:role-swap .42s var(--t)}
@keyframes role-swap{from{opacity:0;transform:translateY(.28em)}to{opacity:1;transform:none}}
.r-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;min-height:30px}
.r-chip{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--well);border-radius:999px;padding:6px 12px;box-shadow:0 0 0 .5px var(--line);white-space:nowrap}
.r-role{font-size:13.5px;color:var(--accent);font-weight:600;letter-spacing:.2px}
.r-lead{margin-top:28px;color:var(--mute);line-height:1.65;max-width:60ch;font-size:15.5px}
.r-btn{border-radius:999px;padding:11px 20px;font-weight:500;font-size:14px;letter-spacing:.1px;transition:background-color var(--t),color var(--t),border-color var(--t),box-shadow var(--t),transform var(--t)}
.r-btn.primary{background:var(--ink);color:var(--bg)}
.r-btn.primary:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(15,16,17,.4)}
.r-btn.ghost{color:var(--ink);box-shadow:0 0 0 .5px var(--line-2);background:var(--card)}
.r-btn.ghost:hover{box-shadow:var(--mac);border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.r-meta-links{font-size:11.5px;color:var(--faint)}
.r-meta-links a:hover{color:var(--accent)}
.r-stats{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:36px;align-items:baseline}
.r-stat{display:flex;align-items:baseline;gap:9px}
.r-stat-n{font-family:var(--font-display);font-size:40px;font-weight:700;color:var(--accent);letter-spacing:-.03em;line-height:1}
.r-stat-l{font-size:13.5px;color:var(--mute);max-width:none;letter-spacing:0}

/* contacts */
.r-contacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.r-contact{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;border:.5px solid var(--line-2);background:var(--card);font-size:13px;color:var(--ink-2);transition:background-color var(--t),color var(--t),border-color var(--t),box-shadow var(--t),transform var(--t)}
.r-contact svg{width:17px;height:17px;flex-shrink:0;color:var(--faint);transition:color var(--t)}
a.r-contact:hover{border-color:var(--ink);box-shadow:var(--mac);color:var(--ink);transform:translateY(-1px)}
a.r-contact:hover svg{color:var(--accent)}
.r-contact-static{cursor:default}
.r-copy{margin-left:5px;font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--accent-on-tint);background:var(--accent-dim);border:0;border-radius:5px;padding:2px 7px;cursor:pointer;transition:background-color var(--t),color var(--t);font-family:var(--font-mono);line-height:1.4;vertical-align:baseline}
.r-copy:hover{background:var(--accent-fill);color:var(--on-accent)}
.r-copy.copied{background:var(--accent-fill);color:var(--on-accent)}

/* portrait */
.r-portrait{border-radius:var(--radius);background:var(--card);box-shadow:var(--mac);padding:0;border:.5px solid var(--line-2);overflow:hidden;position:relative;width:100%;max-width:360px;justify-self:end}
.r-portrait::before{content:"";position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none;z-index:2}
.r-portrait img{display:block;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:center 22%}
html[data-theme="dark"] .r-portrait img{filter:saturate(.92) brightness(.92)}
.r-portrait-cap{padding:10px 14px 12px;font-size:10.5px;color:var(--faint)}

/* ============ experience ============ */
.r-xp-list{display:grid;gap:14px;margin-top:34px}
.r-xp-item{padding:26px 30px}
.r-xp-item:hover{border-color:var(--line-hover);transform:translateY(-2px);box-shadow:var(--mac)}
/* current role: a mono NOW pill on the when-line (data: x.now) — replaces the
   old inset side stripe, which the 16px radius kept clipping. */
.now-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--accent-on-tint);background:var(--accent-dim);border:.5px solid var(--accent-line);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle}
.now-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-2)}
.r-when-text{font-size:11.5px;color:var(--mute)}
.r-xp-idx{font-size:10.5px;color:var(--faint)}
.r-xp-role{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.22;letter-spacing:-.015em}
.r-xp-co{font-size:13px;color:var(--accent);font-weight:600;margin-top:2px;letter-spacing:.2px}
.r-xp-link{color:var(--accent);transition:color var(--t)}
.r-xp-link:hover{text-decoration:underline;text-underline-offset:3px}
.r-xp-arrow{font-size:.82em}
.r-xp-desc{color:var(--mute);font-size:14px;line-height:1.65}
.r-xp-where{font-size:10.5px;color:var(--faint);letter-spacing:.5px;text-transform:uppercase}
.r-tag{font-size:11px;font-weight:500;color:var(--ink-2);background:var(--well);border-radius:8px;padding:6px 10px;box-shadow:0 0 0 .5px var(--line)}
/* experience live-site CTA */
.r-xp-site-wrap{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.r-xp-site{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent-on-tint);background:var(--accent-dim);border-radius:999px;padding:7px 14px;transition:background-color var(--t),color var(--t),transform var(--t)}
.r-xp-site:hover{background:var(--accent-fill);color:var(--on-accent);transform:translateY(-1px)}
.r-xp-site .r-xp-site-url{font-family:var(--font-mono);font-weight:500;opacity:.85}
.r-xp-site-note{font-size:10.5px;color:var(--faint);font-family:var(--font-mono);letter-spacing:.3px}

/* ============ works ============ */
.r-work{background:var(--card);border:.5px solid var(--line-2);border-radius:var(--radius);overflow:hidden;transition:border-color .25s,transform .3s var(--t),box-shadow .3s}
.r-work:hover{border-color:var(--line-hover);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.r-work-cover{background:var(--well);border-bottom:.5px solid var(--line);overflow:hidden}
.r-work-cover img{width:100%;height:auto;aspect-ratio:900/703;object-fit:cover;transition:transform .3s var(--t)}
.r-work:hover .r-work-cover img{transform:scale(1.02)}
.r-work-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.r-work-name{font-family:var(--font-display);font-size:17.5px;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.r-work-sub{font-size:12px;font-weight:500;color:var(--mute);margin-left:7px;letter-spacing:0}
.r-work-when{font-family:var(--font-mono);font-size:10px;color:var(--faint);white-space:nowrap;flex-shrink:0}
.r-work-desc{font-size:12.5px;color:var(--mute);line-height:1.6;max-width:62ch}
.r-work .r-tag{background:var(--well)}
.r-work-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;align-items:center;min-height:30px}
.r-work-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--accent-on-tint);background:var(--accent-dim);border-radius:999px;padding:6px 12px;transition:background-color var(--t),color var(--t),transform var(--t)}
.r-work-link:hover{background:var(--accent-fill);color:var(--on-accent);transform:translateY(-1px)}
.r-work-link.ghost{color:var(--ink-2);background:var(--well);box-shadow:0 0 0 .5px var(--line)}
.r-work-link.ghost:hover{color:var(--on-accent);background:var(--accent-fill);box-shadow:none}
.r-work-soon{font-size:11px;font-family:var(--font-mono);letter-spacing:.3px;color:var(--faint)}
/* see-everything card */
.r-work-all{align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px;min-height:220px;color:var(--accent-on-tint);border-style:dashed}
.r-work-all:hover{border-color:var(--accent-line);background:var(--accent-dim)}
.r-work-all-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent-dim);color:var(--accent-on-tint);font-size:18px;transition:background-color var(--t),transform var(--t)}
.r-work-all:hover .r-work-all-ic{background:var(--accent-fill);color:var(--on-accent);transform:translateY(-2px)}
.r-work-all-t{font-family:var(--font-display);font-size:15px;font-weight:600}
.r-work-all-s{font-family:var(--font-mono);font-size:11px;color:var(--faint)}

/* ============ skills ============ */
.r-skill-group{padding:22px 22px 24px}
.r-skill-group:hover{border-color:var(--line-hover);transform:translateY(-2px);box-shadow:var(--mac)}
.r-skill-num{font-size:11px;color:var(--accent)}
.r-skill-title{font-family:var(--font-display);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.r-skill-list li{font-size:13.5px;color:var(--mute);border-bottom:.5px solid var(--line)}
.r-skill-list li:last-child{border-bottom:0}
.r-skill-list li::before{content:"";position:absolute;left:2px;top:15px;width:4px;height:4px;border-radius:1.5px;background:var(--faint)}
.r-skill-list li.hot{color:var(--ink)}
.r-skill-list li.hot::before{background:var(--accent-2);box-shadow:0 0 8px var(--accent-line)}
.r-tool-label{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.r-tool-row{border-top:.5px solid var(--line)}
.r-pill{font-size:12px;font-weight:500;color:var(--ink-2);border-radius:999px;padding:6px 12px;background:var(--well);box-shadow:0 0 0 .5px var(--line)}
.r-pill.hot{color:var(--on-accent);background:var(--accent-fill);box-shadow:none}
.r-ai{display:inline-block;margin-left:5px;font-size:8.5px;font-weight:700;letter-spacing:.04em;color:var(--on-accent);background:var(--accent-fill);border-radius:4px;padding:1px 4px;vertical-align:middle;font-style:normal;font-family:var(--font-mono)}
.r-pill.ai{box-shadow:0 0 0 .5px var(--accent-line);color:var(--ink)}

/* edge */
.r-edge{border:.5px solid var(--accent-line);background:var(--accent-dim);border-radius:var(--radius);padding:26px 28px;margin:34px 0 30px}
.r-edge-head{margin-bottom:16px}
.r-edge-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-on-tint);margin-bottom:8px}
.r-edge-title{font-family:var(--font-display);font-size:clamp(19px,2.1vw,25px);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.r-edge-sub{font-size:13px;color:var(--mute);margin-top:5px}
.r-edge-list{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px}
.r-edge-list li{position:relative;padding-left:22px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.r-edge-list li::before{content:"✦";position:absolute;left:0;top:1px;color:var(--accent);font-size:12px}
@media (max-width:680px){.r-edge-list{grid-template-columns:1fr}}

/* ============ education ============ */
.r-edu-item{padding:24px}
.r-edu-item:hover{border-color:var(--line-hover);transform:translateY(-2px);box-shadow:var(--mac)}
.r-edu-idx{font-size:12px;color:var(--accent)}
.r-edu-when{font-size:11px;color:var(--faint)}
.r-edu-school{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.22;letter-spacing:-.015em}
.r-edu-deg{font-size:13px;color:var(--mute);font-weight:500}
.r-edu-desc{font-size:13px;color:var(--mute);line-height:1.65;max-width:62ch}
.r-edu-gpa{font-family:var(--font-mono);font-size:11px;color:var(--accent-on-tint);padding:7px 10px;border-radius:8px;background:var(--accent-dim);box-shadow:0 0 0 .5px var(--accent-line)}
.r-langs{padding:20px 24px}
.r-lang-items{display:flex;flex-wrap:wrap;gap:12px 30px}
.r-lang b{font-size:13.5px;font-weight:600}
.r-lang small{font-size:11px;color:var(--faint)}

/* ============ contact + footer ============ */
.r-based{font-size:11.5px;color:var(--faint)}
.r-foot{border-top:.5px solid var(--line)}
.r-foot-name{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,5.5vw,64px);letter-spacing:-.03em}
.r-foot-meta{font-size:12.5px;color:var(--mute)}
.r-foot-meta a:hover{color:var(--accent)}
.r-contact-list{list-style:none;display:flex;flex-wrap:wrap;gap:14px 30px;margin:26px 0 0}
.r-contact-list li{display:flex;flex-direction:column;gap:4px}
.r-cl-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.r-contact-list a,.r-contact-list li>span:last-child{font-size:15px;color:var(--ink);font-weight:500}
.r-contact-list a:hover{color:var(--accent)}

/* pressed state — last so it wins over the hovers */
.r-btn:active,a.r-contact:active,.r-work-link:active,.r-xp-site:active,.r-nav-dl:active,.r-copy:active,.r-eve-toggle:active,.r-seg button:active,.r-work-all:active{transform:translateY(0) scale(.97)}

/* ============ export-to-PDF (verbatim from linear.css — print is a feature) ============ */
#print-root{display:none;
  --p-ink:#1a1c20; --p-accent:#0b6fd0; --p-body:#3a3e45;
  --p-mute:#555a62; --p-faint:#8a8f97; --p-rule:#cfe0f3; --p-wash:#eef5fd;
  --font-print:'Helvetica Neue','PingFang SC',Arial,sans-serif; --font-print-mono:'Menlo',monospace}
.p-doc{font-family:var(--font-print);color:var(--p-ink);font-size:10.3px;line-height:1.5}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid var(--p-accent);padding-bottom:10px;margin-bottom:11px}
.p-name{font-size:23px;font-weight:700;margin:0}
.p-altname{font-size:13px;color:var(--p-faint);font-weight:500}
.p-role{font-size:12px;color:var(--p-accent);font-weight:600;margin:3px 0 6px}
.p-contact{font-size:9px;color:var(--p-mute);font-family:var(--font-print-mono)}
.p-contact a{color:var(--p-accent);text-decoration:none}
.p-qr{display:flex;gap:10px;flex-shrink:0}
.p-qr figure{margin:0;text-align:center;width:68px}
.p-qr img{width:68px;height:68px;display:block}
.p-qr figcaption{font-size:7.5px;color:var(--p-mute);margin-top:3px}
.p-lead{font-size:10.4px;color:var(--p-body);line-height:1.55;margin:0 0 10px}
.p-metrics{display:flex;gap:8px;background:var(--p-wash);border-radius:8px;padding:9px 4px;margin-bottom:12px}
.p-metrics div{flex:1;text-align:center}
.p-metrics b{display:block;font-size:16px;color:var(--p-accent);font-weight:700}
.p-metrics span{font-size:8px;color:var(--p-mute)}
.p-sec{margin-bottom:11px;break-inside:avoid}
.p-sec h2{font-size:12px;color:var(--p-accent);font-weight:700;border-bottom:1px solid var(--p-rule);padding-bottom:3px;margin:0 0 6px}
.p-job{margin-bottom:7px;break-inside:avoid;overflow:hidden}
.p-jh{font-size:10.8px;margin-bottom:1px}
.p-co{font-weight:700;color:var(--p-ink);text-decoration:none}
a.p-co{color:var(--p-accent)}
.p-jr{color:var(--p-mute)}
.p-when{float:right;font-size:8.3px;color:var(--p-faint);font-family:var(--font-print-mono);font-weight:400}
.p-desc{font-size:9.4px;color:var(--p-body);line-height:1.5;margin:0}
.p-early{font-size:9px;color:var(--p-mute);margin:5px 0 0}
.p-prod{font-size:9.6px;color:var(--p-body);margin:0}
.p-cols{display:flex;gap:22px}
.p-cols>section{flex:1}
.p-skill{font-size:9.2px;color:var(--p-body);margin:0 0 3px}
.p-skill b,.p-edu b{color:var(--p-ink)}
.p-edu{font-size:9.4px;margin:0 0 5px;line-height:1.4}
.p-em{color:var(--p-faint);font-size:8.8px}
.p-lang p{font-size:9.4px;color:var(--p-body);margin:0}
.p-edge{margin:0 0 12px}
.p-edge>b{font-size:10px;color:var(--p-accent);display:block;margin-bottom:5px}
.p-edge ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 18px}
.p-edge li{position:relative;padding-left:12px;font-size:9px;color:var(--p-body);line-height:1.45}
.p-edge li::before{content:"✦";position:absolute;left:0;top:0;color:var(--p-accent);font-size:8px}
.p-break{break-before:page;page-break-before:always}

/* ---- card-as-PDF (#card-print-root) — 90×150mm, fixed light palette,
   mirrors the PNG card but with REAL <a> links that stay clickable in the PDF */
#card-print-root{display:none;
  --cp-ink:#0F1011; --cp-mute:#44464A; --cp-faint:#6d6f75;
  --cp-violet:#6553D6; --cp-line:rgba(15,16,17,.12)}
.cp-doc{width:90mm;height:150mm;box-sizing:border-box;position:relative;overflow:hidden;
  padding:16mm 11mm 0;background:#fff;color:var(--cp-ink);
  font-family:'Inter','Noto Sans SC',sans-serif;
  background-image:radial-gradient(closest-side at 82% 6%,rgba(119,101,227,.10),rgba(119,101,227,0) 70%)}
/* links must LOOK clickable in the PDF: violet + underline + ↗; plain text
   (like the WeChat handle) stays grey, so the contrast itself is the legend */
.cp-doc a{color:var(--cp-violet);text-decoration:underline;text-decoration-thickness:.2mm;text-underline-offset:.7mm;text-decoration-color:rgba(101,83,214,.45)}
.cp-doc a::after{content:"↗";font-size:.75em;margin-left:.8mm;opacity:.75;text-decoration:none;display:inline-block}
.cp-avatar{position:absolute;top:12mm;right:11mm;width:14mm;height:14mm;border-radius:50%;object-fit:cover;border:.3mm solid var(--cp-line)}
.cp-name{font-family:'Archivo','Noto Sans SC',sans-serif;font-size:21pt;font-weight:700;margin:0;letter-spacing:-.01em}
.cp-doc[lang="zh-CN"] .cp-name{font-family:'Noto Sans SC',sans-serif}
.cp-alt{font-size:8pt;color:var(--cp-faint);font-weight:500;margin:1.6mm 0 0}
.cp-role{font-size:7.5pt;color:var(--cp-violet);font-weight:600;margin:4mm 0 0}
.cp-l1{font-size:6.4pt;color:var(--cp-mute);font-weight:500;margin:5mm 0 0}
.cp-l2{font-size:6.1pt;color:var(--cp-faint);font-weight:400;margin:1.6mm 0 0}
.cp-hr{border:0;border-top:.3mm solid var(--cp-line);margin:5mm 0 0}
.cp-rows{margin-top:4.5mm}
.cp-row{display:flex;align-items:baseline;gap:0;font-family:'JetBrains Mono',monospace;margin-top:2.6mm;font-size:6.6pt;color:var(--cp-mute)}
.cp-row b{width:11mm;flex:none;font-size:5.2pt;font-weight:600;color:var(--cp-violet);letter-spacing:.04em}
.cp-qr{position:absolute;left:0;right:0;bottom:8mm;text-align:center}
/* margin:0 auto because base.css forces img{display:block} — text-align can't centre it */
.cp-qr img{width:26mm;height:26mm;margin:0 auto;image-rendering:pixelated;border:.3mm solid var(--cp-line);border-radius:2.6mm;padding:1.8mm;background:#fff}
/* the big obvious way in: a violet pill button, whole surface clickable */
.cp-btn{display:block;width:46mm;margin:3.5mm auto 0;background:var(--cp-violet);border-radius:99mm;padding:2.8mm 0 3mm;text-align:center;text-decoration:none !important}
.cp-btn::after{content:none !important}
.cp-btn b{display:block;font-size:7.5pt;font-weight:600;color:#fff}
.cp-btn span{display:block;font-family:'JetBrains Mono',monospace;font-size:5.2pt;color:rgba(255,255,255,.75);margin-top:1mm}

@media print{
  @page{size:A4;margin:12mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .r-frame{display:none !important}
  #print-root{display:block !important}
  html,body{background:#fff !important}
  /* card mode wins over the résumé doc */
  body.print-card #print-root{display:none !important}
  body.print-card #card-print-root{display:block !important}
}