/* Bottle & Brass (default): bottle green, champagne brass, warm ivory */
:root,[data-theme="brass"]{
  --paper:#fbfaf6;--bg:#f3f1e9;--ink:#0d2a21;--ink-soft:#2b4338;--ink2:#55695e;--ink3:#95a39a;--rule:#e4e2d7;
  --accent:#8f6d2f;--accent-hi:#e4c780;--glow1:62,176,128;--glow2:228,199,128;
  --sky:#e4c780;--peach:#dcebdf;--peri:#e9efe3;--butter:#f3e9cc;
  --navy:#0a2c22;--navy2:#0f3e30;--navy3:#0a2a21;--on-dark:#f1f6f1;--on-dark2:#a9c1b4;
  --shadow:13,42,33;--viz1:#1f8a63;--viz2:#9fd6b8;--viz3:#c9a45a;
  --ease:cubic-bezier(.22,.7,.2,1);
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,"Songti SC","Noto Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","PingFang SC",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1180px;
}
/* Linen & Moss: olive-moss, pistachio, oat */
[data-theme="linen"]{
  --paper:#fbfaf4;--bg:#efeee2;--ink:#1c2b1d;--ink-soft:#364a37;--ink2:#5d6e5b;--ink3:#9aa795;--rule:#e1e2d3;
  --accent:#587a35;--accent-hi:#cfe19a;--glow1:176,208,112;--glow2:222,168,120;
  --sky:#cfe19a;--peach:#e6edd0;--peri:#eef0dc;--butter:#f4ead2;
  --navy:#21331f;--navy2:#314a2d;--navy3:#263a23;--on-dark:#f3f6ea;--on-dark2:#b7c6a6;
  --shadow:28,43,29;--viz1:#587a35;--viz2:#b8d08a;--viz3:#c98f5e;
}
/* Evergreen: deep forest + emerald */
[data-theme="evergreen"]{
  --paper:#f0f5f2;--bg:#e3ece7;--ink:#3b5248;--ink-soft:#54695f;--ink2:#6f857a;--ink3:#a3b5ab;--rule:#d3e0d9;
  --accent:#5f9d84;--accent-hi:#b5d6c5;--glow1:176,214,194;--glow2:255,222,182;
  --sky:#c3dccf;--peach:#d6e8de;--peri:#dde9e3;--butter:#f1efd8;
  --navy:#4a6558;--navy2:#5a7668;--navy3:#415a4e;--on-dark:#eff6f2;--on-dark2:#b9cfc3;
  --shadow:62,92,78;--viz1:#5f9d84;--viz2:#b5d6c5;--viz3:#d4bd98;
}
/* Sage: muted Alpine-green */
[data-theme="sage"]{
  --paper:#fbfcfa;--bg:#f2f4ee;--ink:#1f2a22;--ink-soft:#3a4a3f;--ink2:#5f6e63;--ink3:#9aa89d;--rule:#e0e5dc;
  --accent:#4a7a58;--accent-hi:#b9d9b4;--glow1:185,217,180;--glow2:236,196,140;
  --sky:#b9d9b4;--peach:#e6ecd9;--peri:#dfe8dc;--butter:#f2efd6;
  --navy:#2b3a2f;--navy2:#3f5043;--navy3:#34463a;--on-dark:#f1f5ee;--on-dark2:#b4c3b6;
  --shadow:31,42,34;--viz1:#4a7a58;--viz2:#b9d9b4;--viz3:#d8b278;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
em{font-style:italic;color:var(--accent)}
:lang(zh) em{font-style:normal}

/* ---------- Frosted glass ---------- */
.glass{background:rgba(255,255,255,.56);-webkit-backdrop-filter:saturate(105%) blur(26px);backdrop-filter:saturate(105%) blur(26px);
  border:1px solid rgba(255,255,255,.72);box-shadow:0 14px 44px -14px rgba(var(--shadow),.28),inset 0 1px 0 rgba(255,255,255,.85)}

/* ---------- Nav ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-hi));transform-origin:0 50%;transform:scaleX(0);z-index:90}
nav{position:fixed;top:0;left:0;right:0;z-index:80;height:52px;background:color-mix(in srgb,var(--paper) 68%,transparent);-webkit-backdrop-filter:saturate(105%) blur(22px);backdrop-filter:saturate(105%) blur(22px);border-bottom:1px solid rgba(var(--shadow),.08)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:-.01em}
.nav-r{display:flex;align-items:center;gap:22px;font-size:13px;color:var(--ink2)}
.nav-r a:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);border-radius:999px;padding:5px 13px;font-size:12.5px;background:rgba(255,255,255,.6);cursor:pointer;color:var(--ink);transition:.3s var(--ease)}
.pill:hover{border-color:var(--ink);background:#fff}
.pill kbd{font:11px var(--mono);color:var(--ink2);border:1px solid var(--rule);border-radius:5px;padding:0 5px}
.lang{border:1px solid var(--rule);border-radius:999px;padding:3px;display:inline-flex;font-size:12px;background:rgba(255,255,255,.6);cursor:pointer}
.lang span{padding:3px 11px;border-radius:999px;color:var(--ink2);transition:.3s var(--ease)}
.lang span.on{background:var(--navy);color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 70px;overflow:hidden;text-align:center;background:var(--paper)}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.7;will-change:transform;pointer-events:none}
.orb.a{width:540px;height:540px;background:var(--peach);left:-120px;top:6%}
.orb.b{width:500px;height:500px;background:var(--peri);right:-100px;top:30%}
.orb.c{width:380px;height:380px;background:var(--butter);left:38%;bottom:-130px}
.hero .wrap{position:relative;z-index:2}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,9.2vw,128px);line-height:.98;letter-spacing:-.035em;margin:26px 0 30px;color:var(--ink)}
:lang(zh) .hero h1{font-weight:600;letter-spacing:-.02em;line-height:1.1}
.hero h1 .line{display:block;padding-bottom:.08em}
.hero h1 .line>span{display:block;opacity:0;transform:translateY(40px);animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.14s}
@keyframes rise{to{transform:none;opacity:1}}
.hero .sub{max-width:640px;margin:0 auto 34px;font-size:clamp(18px,2vw,22px);color:var(--ink2);line-height:1.45;opacity:0;animation:fade 1s .5s var(--ease) forwards}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fade 1s .65s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.btn{display:inline-flex;align-items:center;gap:6px;padding:12px 24px;border-radius:999px;font-size:15px;font-weight:500;border:1px solid var(--navy);color:var(--navy);background:transparent;cursor:pointer;transition:.35s var(--ease)}
.btn.primary{background:var(--navy);color:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(var(--shadow),.4)}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;font-size:13px;color:var(--ink);opacity:0;animation:fade 1s 1s var(--ease) forwards;cursor:default;border:1px solid rgba(255,255,255,.72)}
.chip.l{left:max(28px,calc(50% - 560px));bottom:150px}
.chip.r{right:max(28px,calc(50% - 560px));bottom:150px;cursor:pointer}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.2)}
.chip:hover{transform:translateY(-2px)}
.hero-meta{position:absolute;left:0;right:0;bottom:28px;z-index:2;display:flex;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:16px 28px 0;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink2);letter-spacing:.04em}
.scrollcue{display:inline-block;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--rule);background:var(--paper);overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;animation:slide 48s linear infinite}
.marquee span{font-family:var(--serif);font-size:clamp(20px,3vw,34px);padding:20px 34px;color:var(--ink);letter-spacing:-.01em}
.marquee i{font-style:normal;color:var(--accent);align-self:center}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Shared ---------- */
.label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);font-weight:600}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
h2.big{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:1.05;margin:16px 0 0;color:var(--ink)}
:lang(zh) h2.big{font-weight:600}

/* ---------- Results (midnight band) ---------- */
.band-dark{color:var(--on-dark);background:
  radial-gradient(900px 520px at 88% -8%,rgba(var(--glow1),.30),transparent 62%),
  radial-gradient(760px 520px at -4% 112%,rgba(var(--glow2),.22),transparent 62%),
  linear-gradient(160deg,var(--navy),var(--navy2) 62%,var(--navy3))}
.band-dark .label{color:var(--on-dark2)}
.band-dark h2.big{color:var(--on-dark)}
.results{padding:130px 0 120px}
.results h2.big{font-size:clamp(34px,5.4vw,68px);margin-bottom:70px;max-width:820px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
.stat{padding:30px 0 44px;border-top:1px solid rgba(255,255,255,.16)}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(50px,7.4vw,104px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat b.txt{font-size:clamp(38px,5vw,72px);white-space:nowrap;padding-top:.18em}
.stat b .u{font-size:.5em;vertical-align:.45em;margin-left:.04em;color:var(--accent-hi)}
.stat p{margin-top:16px;font-size:16px;color:var(--on-dark);max-width:300px;line-height:1.4}
.stat small{display:block;margin-top:8px;color:var(--on-dark2);font-size:13px}

/* ---------- About ---------- */
.about{padding:130px 0;background:var(--bg)}
.about .grid2{display:grid;grid-template-columns:5fr 7fr;gap:64px}
.about h2.big{font-size:clamp(34px,4.6vw,60px)}
.about .lead{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.38;letter-spacing:-.01em;color:var(--ink)}
.about .lead::first-letter{float:left;font-size:4.1em;line-height:.8;padding:.06em .1em 0 0;color:var(--accent);font-weight:500}
:lang(zh) .about .lead::first-letter{float:none;font-size:inherit;padding:0;color:inherit}
.about .more{margin-top:22px;color:var(--ink2);max-width:620px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.tags span{padding:8px 16px;border:1px solid var(--rule);border-radius:999px;font-size:14px;background:var(--paper);transition:.3s var(--ease)}
.tags span:hover{border-color:var(--navy);transform:translateY(-2px)}

/* ---------- Work index (table of contents) ---------- */
.toc{position:relative;padding:130px 0 120px;background:var(--paper);border-top:1px solid var(--rule);overflow:hidden}
.toc .orb{opacity:.6}
.toc .orb.a{left:-140px;top:-60px}
.toc .orb.b{right:-120px;top:30%}
.toc .orb.c{left:42%;bottom:-160px}
.toc .wrap{position:relative;z-index:2}
.toc h2.big{font-size:clamp(36px,5.6vw,72px)}
.toc .subline{margin-top:20px;color:var(--ink2);max-width:560px}
.toc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:56px}
.tcard{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px 24px;border-radius:22px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.tcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.82);box-shadow:0 22px 50px -16px rgba(var(--shadow),.36),inset 0 1px 0 rgba(255,255,255,.9)}
.tcard .n{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--accent);min-width:2.2ch}
.tcard h3{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.02em;margin:0;line-height:1.15;color:var(--ink)}
:lang(zh) .tcard h3{font-weight:600}
.tcard p{font-size:14px;color:var(--ink2);margin-top:4px;line-height:1.4}
.tcard .go{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);font-size:16px;transition:.4s var(--ease)}
.tcard:hover .go{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateX(3px)}
.tcard.wide{grid-column:span 2}

/* ---------- Chapters ---------- */
.chapter{padding:130px 0;border-top:1px solid var(--rule)}
.chapter.alt{background:var(--bg)}
.chapter .cols{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.chapter .cols>*{min-width:0}
.chapter aside{position:sticky;top:96px}
.chapter .no{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--accent)}
.chapter h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,58px);letter-spacing:-.03em;line-height:1.04;margin:10px 0 14px;color:var(--ink)}
:lang(zh) .chapter h3{font-weight:600;letter-spacing:-.01em}
.chapter .role{font-size:13px;color:var(--ink2);letter-spacing:.04em}
.chapter .kicker{font-size:15px;color:var(--ink2);margin-top:6px}
.chapter .lede{font-family:var(--serif);font-size:clamp(21px,2.1vw,27px);line-height:1.42;letter-spacing:-.01em;margin-bottom:26px;color:var(--ink)}
.chapter ul{list-style:none;padding:0;margin:0 0 22px}
.chapter li{padding:13px 0 13px 28px;border-top:1px solid var(--rule);position:relative;color:var(--ink-soft)}
.chapter li:last-child{border-bottom:1px solid var(--rule)}
.chapter li::before{content:"";position:absolute;left:0;top:25px;width:14px;height:1.5px;background:var(--accent)}
.note{font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--ink2);margin:0 0 30px;padding-left:16px;border-left:2px solid var(--accent)}
:lang(zh) .note{font-style:normal}
.arrow-link{display:inline-block;margin:6px 0 30px;font-size:15px;border-bottom:1px solid var(--navy)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}

/* Media slots */
.slot{margin:0}
.slot .frame{position:relative;width:100%;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--bg) 78%,var(--rule)),color-mix(in srgb,var(--rule) 92%,var(--ink3)));box-shadow:0 1px 0 rgba(var(--shadow),.04),0 18px 40px -22px rgba(var(--shadow),.34);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.slot[data-ratio="16/9"] .frame{aspect-ratio:16/9}
.slot[data-ratio="9/16"] .frame{aspect-ratio:9/16}
.slot[data-ratio="4/3"] .frame{aspect-ratio:4/3}
.slot[data-ratio="3/4"] .frame{aspect-ratio:3/4}
.slot.ready .frame{cursor:zoom-in}
.slot.ready .frame:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 2px 0 rgba(var(--shadow),.04),0 30px 54px -24px rgba(var(--shadow),.5)}
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot video{object-fit:contain;background:var(--navy)}
.slot figcaption{font-size:13px;color:var(--ink2);margin-top:10px;line-height:1.4}
.gtag{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;font-size:12px;color:var(--ink);opacity:0;transform:translateY(6px);transition:.45s var(--ease);pointer-events:none}
.slot.ready .frame:hover .gtag{opacity:1;transform:none}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px;color:var(--ink2);
  background:repeating-linear-gradient(135deg,rgba(var(--shadow),.03) 0 12px,transparent 12px 24px)}
.ph .plus{width:34px;height:34px;border-radius:50%;border:1px solid var(--ink3);display:grid;place-items:center;font-size:20px;line-height:1;color:var(--ink2)}
.ph b{font-size:13.5px;font-weight:600;color:var(--ink)}
.ph code{font:11px var(--mono);color:var(--ink2);background:rgba(255,255,255,.75);padding:2px 8px;border-radius:6px;word-break:break-all}
.filecard{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--rule);border-radius:16px;background:var(--paper);transition:.35s var(--ease)}
.filecard:hover{transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(var(--shadow),.4)}
.filecard .ic{width:42px;height:42px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.06em}
.filecard small{display:block;color:var(--ink2);font:11.5px var(--mono)}
.reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 28px;max-width:100%;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
.reel .slot{flex:0 0 clamp(150px,17vw,200px);scroll-snap-align:start}
.reel::-webkit-scrollbar{height:6px}.reel::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}

/* ---------- Experience ---------- */
.exp{padding:130px 0;background:var(--paper);border-top:1px solid var(--rule)}
.exp h2.big{font-size:clamp(34px,5vw,64px);margin-bottom:56px}
.row{display:grid;grid-template-columns:210px 1fr 1.2fr;gap:36px;padding:28px 0;border-top:1px solid var(--rule)}
.row .when{font-family:var(--serif);font-size:19px;color:var(--ink2);line-height:1.3}
.row h4{margin:0;font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
:lang(zh) .row h4{font-weight:600}
.row .co{color:var(--ink2);font-size:15px;margin-top:4px}
.row ul{margin:0;padding:0 0 0 18px;color:var(--ink-soft);font-size:15.5px}
.row li{margin-bottom:5px}
.row .see{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.row .see a{font-size:12.5px;padding:4px 12px;border-radius:999px;border:1px solid var(--rule);color:var(--ink2);transition:.3s var(--ease)}
.row .see a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.row.minor{padding:20px 0}
.row.minor h4{font-size:19px;color:var(--ink-soft)}

/* ---------- Skills ---------- */
.skills{padding:110px 0;background:var(--bg);border-top:1px solid var(--rule)}
.skills .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.skills h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin:0 0 16px;font-weight:600}
.skills li{list-style:none;padding:9px 0;border-top:1px solid var(--rule);font-size:15.5px;color:var(--ink-soft)}
.skills ul{padding:0;margin:0}

/* ---------- Footer ---------- */
footer{color:var(--on-dark);padding:140px 0 60px;text-align:center;background:
  radial-gradient(900px 520px at 12% -10%,rgba(var(--glow1),.28),transparent 62%),
  radial-gradient(760px 520px at 100% 110%,rgba(var(--glow2),.22),transparent 62%),
  linear-gradient(200deg,var(--navy),var(--navy2) 70%,var(--navy3))}
footer .label{color:var(--on-dark2)}
footer h2.big{font-size:clamp(38px,7vw,96px);margin:18px 0 44px;color:var(--on-dark)}
footer .btn{border-color:rgba(255,255,255,.55);color:var(--on-dark)}
footer .btn.primary{background:#fff;color:var(--navy);border-color:#fff}
footer .small{margin-top:90px;color:var(--on-dark2);font-size:13px}

/* ---------- Index sheet (frosted modal) ---------- */
.sheet{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;padding:9vh 20px 20px;background:rgba(var(--shadow),.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet.on{display:flex;animation:fade .25s forwards}
.sheet .panel{width:min(980px,100%);max-height:82vh;overflow:auto;border-radius:28px;padding:28px;animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.sheet header b{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.02em}
.sheet .x{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:rgba(255,255,255,.7);cursor:pointer;font-size:16px}
.sheet .cols2{display:grid;grid-template-columns:1fr 2fr;gap:30px}
.sheet h5{margin:0 0 10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);font-weight:600}
.sheet a.item{display:flex;gap:12px;align-items:baseline;padding:10px 12px;border-radius:12px;transition:.25s var(--ease);font-size:15px}
.sheet a.item:hover,.sheet a.item.cur{background:rgba(255,255,255,.85)}
.sheet a.item .n{font-family:var(--serif);font-style:italic;color:var(--accent);min-width:2.2ch}
.sheet a.item small{display:block;color:var(--ink2);font-size:12.5px}
.sheet .plist{display:grid;grid-template-columns:1fr 1fr;gap:4px}

/* ---------- Chapter rail (glass, desktop) ---------- */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%) translateX(20px);z-index:70;border-radius:22px;padding:10px 8px;opacity:0;pointer-events:none;transition:.5s var(--ease)}
.rail.show{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:5px 8px;border-radius:12px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.rail a span.t{max-width:0;overflow:hidden;opacity:0;transition:max-width .5s var(--ease),opacity .4s}
.rail:hover a span.t{max-width:180px;opacity:1}
.rail a i{font-style:normal;font-family:var(--serif);font-size:13px;min-width:1.9em;text-align:center;border-radius:999px;padding:1px 0;transition:.3s var(--ease)}
.rail a.cur{color:var(--ink)}
.rail a.cur i{background:var(--navy);color:#fff}
.rail a:hover i{background:var(--accent);color:#fff}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:140;background:rgba(var(--shadow),.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out;flex-direction:column;gap:14px}
.lb.on{display:flex;animation:fade .3s forwards}
.lb img,.lb video{max-width:92vw;max-height:80vh;border-radius:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lb .cap{padding:9px 18px;border-radius:999px;font-size:13.5px;color:var(--ink)}

@media(max-width:1100px){.rail{display:none}.chip{display:none}}
@media(max-width:960px){
  .chapter .cols,.about .grid2{grid-template-columns:1fr;gap:34px}
  .chapter aside{position:static}
  .stats{grid-template-columns:1fr 1fr;gap:0 28px}
  .row{grid-template-columns:1fr;gap:10px}
  .skills .cols3{grid-template-columns:1fr 1fr}
  .toc-grid{grid-template-columns:1fr}.tcard.wide{grid-column:auto}
  .sheet .cols2{grid-template-columns:1fr}
  .nav-r a.hide-s{display:none}
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  .stats,.g2,.g3,.skills .cols3,.sheet .plist{grid-template-columns:1fr}
  .chapter,.about,.results,.exp,.toc{padding:84px 0}
  .nav-r{gap:12px}.nav-r a{display:none}.pill kbd{display:none}
  .hero-meta{flex-direction:column;gap:4px;font-size:11.5px}
  .sheet{padding-top:70px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.hero h1 .line>span,.hero .sub,.btns,.chip{opacity:1;transform:none;animation:none}
  .marquee .track,.scrollcue{animation:none}
}
.still .hero{min-height:820px}

/* ================= Visual layer ================= */
.hero .sonar{position:absolute;left:50%;top:46%;width:min(1180px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.sonar i{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:50%;opacity:0;animation:ripple 12s linear infinite}
.sonar i:nth-child(2){animation-delay:-2.4s}.sonar i:nth-child(3){animation-delay:-4.8s}.sonar i:nth-child(4){animation-delay:-7.2s}.sonar i:nth-child(5){animation-delay:-9.6s}
@keyframes ripple{0%{transform:scale(.18);opacity:0}12%{opacity:.7}100%{transform:scale(1);opacity:0}}

.fcard{position:absolute;z-index:3;border-radius:22px;padding:14px 16px;font-size:12.5px;color:var(--ink);opacity:0;animation:floatin 1.2s var(--ease) forwards;width:216px;text-align:left}
.fcard small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:600;margin-bottom:8px}
.fcard.l1{left:max(28px,calc(50% - 660px));top:30%;animation-delay:.9s}
.fcard.r1{right:max(28px,calc(50% - 660px));top:27%;animation-delay:1.1s}
.fcard.l2{left:max(28px,calc(50% - 660px));bottom:150px;width:auto;animation-delay:1.3s;display:flex;align-items:center;gap:9px;border-radius:999px;padding:10px 16px}
.fcard.r2{right:max(28px,calc(50% - 660px));bottom:150px;width:auto;animation-delay:1.4s;border-radius:999px;padding:10px 16px;cursor:pointer}
@keyframes floatin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fcard .dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.2)}
.fcard svg{display:block;width:100%;height:56px;overflow:visible}
.fcard .spark{fill:none;stroke:var(--viz1);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 2s 1.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fcard .pts{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;font-family:var(--serif);font-size:20px}
.fcard .pts b{color:var(--accent);font-weight:500;font-size:26px}
.phone{width:54px;height:96px;margin:0 auto 8px;border-radius:12px;background:linear-gradient(160deg,var(--navy),var(--navy2));border:2px solid var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}
.phone::before{content:"";position:absolute;top:5px;left:50%;width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);transform:translateX(-50%)}
.phone span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:10px;color:var(--accent-hi);padding-left:2px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12);background:rgba(255,255,255,.28)}}
.fcard.r1 .capt{text-align:center;font-size:12.5px;color:var(--ink-soft)}

/* Capabilities bento */
.bento{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:64px}
.tile{border-radius:22px;padding:20px 18px 18px;background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column;gap:22px;min-height:132px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.tile:hover{transform:translateY(-5px);box-shadow:0 20px 40px -22px rgba(var(--shadow),.45);border-color:color-mix(in srgb,var(--accent) 50%,var(--rule))}
.tile .ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:var(--accent-hi)}
.tile .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile span{font-size:15px;font-weight:550;line-height:1.3;color:var(--ink)}
.tile:nth-child(3n+1) .ic{background:var(--navy2)}
.tile:nth-child(5n+2) .ic{background:var(--accent);color:#fff}

/* TOC card icon */
.tcard .ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--ink);color:var(--accent-hi)}
.tcard .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tcard{grid-template-columns:auto auto 1fr auto}

/* Chapter art */
.chapter{position:relative;overflow:hidden}
.chapter .wrap{position:relative;z-index:1}
.bignum{position:absolute;right:-1vw;top:34px;font-family:var(--serif);font-style:italic;font-size:clamp(190px,26vw,400px);line-height:.8;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none;user-select:none;z-index:0}

/* Dark data panels */
.vizp{border-radius:26px;padding:26px 28px;margin:0 0 22px;color:var(--on-dark);position:relative;overflow:hidden;
  background:radial-gradient(520px 260px at 100% 0%,rgba(var(--glow1),.22),transparent 70%),radial-gradient(420px 240px at 0% 100%,rgba(var(--glow2),.16),transparent 70%),linear-gradient(160deg,var(--navy),var(--navy2))}
.vizp h6{margin:0 0 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark2);font-weight:600}
.vizp .sub{font-size:12.5px;color:var(--on-dark2);margin-top:14px}
.vizp .fill{transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease) var(--d,0s)}
.vizp.in .fill{transform:none}
.vizp .rise{transform:scaleY(0);transform-origin:bottom;transition:transform 1.4s var(--ease) var(--d,0s)}
.vizp.in .rise{transform:none}
.vizp .pop{opacity:0;transform:scale(.4);transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.vizp.in .pop{opacity:1;transform:none}
.vizp .fade{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.vizp.in .fade{opacity:1;transform:none}
.vgrid{display:grid;gap:22px}
.v2{grid-template-columns:1fr 1fr}.v3{grid-template-columns:repeat(3,1fr)}.v4{grid-template-columns:repeat(4,1fr)}

.flow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.node{padding:12px 15px;border-radius:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);font-size:13.5px;line-height:1.3}
.node b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:4px;font-weight:600}
.flow .arr{align-self:center;color:var(--accent-hi);font-size:18px}
.flow.row2{margin-top:12px}
.guards{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.guards span{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:var(--on-dark)}
.guards span::before{content:"✓ ";color:var(--accent-hi)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.05}
.kpi span{font-size:12px;color:var(--on-dark2)}
.devbar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin-top:18px;background:rgba(255,255,255,.1)}
.devbar i{display:block}
.devlegend{display:flex;gap:16px;font-size:12px;color:var(--on-dark2);margin-top:8px;flex-wrap:wrap}
.devlegend em{font-style:normal;display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}

.gantt{display:grid;grid-template-columns:90px repeat(4,1fr);gap:8px 0;align-items:center;font-size:12px}
.gantt .h{color:var(--on-dark2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.15)}
.gantt .nm{color:var(--on-dark)}
.gantt .track{grid-column:2/6;position:relative;height:18px;background:rgba(255,255,255,.05);border-radius:9px}
.gantt .bar{position:absolute;top:0;height:18px;border-radius:9px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--on-dark2);margin-top:16px}
.legend em{font-style:normal;display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.dots{display:grid;grid-template-columns:repeat(14,1fr);gap:7px;max-width:520px}
.dots i{display:block;aspect-ratio:1;border-radius:50%;background:var(--viz2)}
.dots i.hi{background:var(--accent-hi)}
.dotstats{display:grid;gap:14px;align-content:center}
.dotstats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.03em}
.dotstats span{font-size:12.5px;color:var(--on-dark2)}

.eps{display:grid;gap:18px}
.eprow{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
.eprow .t{font-size:13.5px;line-height:1.35}
.eprow .t small{display:block;color:var(--on-dark2);font-size:11.5px;margin-top:3px}
.eptiles{display:flex;gap:7px;flex-wrap:wrap}
.eptiles i{font-style:normal;width:30px;height:46px;border-radius:7px;display:grid;place-items:center;font-family:var(--serif);font-size:13px;color:var(--navy);background:linear-gradient(160deg,var(--viz2),var(--accent-hi))}
.eptiles i:nth-child(3n+2){background:linear-gradient(160deg,var(--accent-hi),var(--viz2))}
.eptiles i.more{background:transparent;border:1px dashed rgba(255,255,255,.35);color:var(--on-dark2);width:auto;padding:0 12px}

.hbars{display:grid;gap:11px}
.hrow{display:grid;grid-template-columns:120px 1fr 46px;gap:12px;align-items:center;font-size:13px}
.hrow .bg{height:12px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.hrow .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--viz1),var(--accent-hi))}
.hrow .v{font-family:var(--serif);font-size:17px;text-align:right}

.cols-chart{display:flex;align-items:flex-end;gap:22px;height:150px}
.colc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.colc .b{width:100%;max-width:70px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,var(--accent-hi),var(--viz1))}
.colc .b.dim{background:rgba(255,255,255,.18)}
.colc em{font-style:normal;font-family:var(--serif);font-size:20px}
.colc small{font-size:11.5px;color:var(--on-dark2)}

.apts{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.apt{border-radius:16px;padding:14px 8px 10px;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:11.5px;color:var(--on-dark2)}
.apt svg{width:26px;height:26px;fill:none;stroke:var(--accent-hi);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.modes{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.modes span{font-size:12.5px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.modes span em{font-style:normal;color:var(--accent-hi);margin-right:6px}

@media(max-width:1100px){.fcard{display:none}.bento{grid-template-columns:repeat(3,1fr)}}
@media(max-width:960px){.v2,.v3,.v4{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.eprow{grid-template-columns:1fr}.tcard{grid-template-columns:auto 1fr auto}.tcard .ico{display:none}.bignum{opacity:.7}}
@media(max-width:600px){.bento{grid-template-columns:repeat(2,1fr)}.apts{grid-template-columns:repeat(3,1fr)}.dots{grid-template-columns:repeat(10,1fr)}.hrow{grid-template-columns:96px 1fr 40px}}
@media(prefers-reduced-motion:reduce){.fcard,.sonar i{animation:none;opacity:1}.vizp .fill,.vizp .rise,.vizp .pop,.vizp .fade{transition:none;transform:none;opacity:1}}

/* ---------- Relief: real extruded plates, embossed type ---------- */
:root,[data-theme]{--hi:rgba(255,255,255,.95);--lo:rgba(92,108,100,.34);--face:linear-gradient(145deg,#f5f7f6,#e1e7e3)}
body{background:var(--bg)}
.hero{background:var(--bg)}
/* layered edge = physical thickness (stepped solid layers) + soft cast shadow + top-left light */
.raise,.tcard,.tile,.btn:not(.primary){background:var(--face);border:1px solid rgba(255,255,255,.85);
  box-shadow:-8px -8px 18px var(--hi),
    1px 1px 0 #d3dad6,2px 2px 0 #cdd5d1,3px 3px 0 #c7d0cb,4px 4px 0 #c1cac5,5px 5px 0 #bbc4bf,
    10px 12px 22px var(--lo),inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 2px rgba(92,108,100,.18)}
.tcard,.tile{position:relative;border-radius:18px}
.tcard::before,.tcard::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#b6c0ba);box-shadow:inset -1px -1px 1px rgba(60,75,68,.35),1px 1px 1px var(--hi)}
.tcard::before{left:8px}.tcard::after{right:8px}
.tcard:hover,.tile:hover{transform:perspective(900px) translate(-3px,-5px) rotateX(2deg);
  box-shadow:-10px -10px 20px var(--hi),1px 1px 0 #d3dad6,2px 2px 0 #cdd5d1,3px 3px 0 #c7d0cb,4px 4px 0 #c1cac5,5px 5px 0 #bbc4bf,6px 6px 0 #b5beb9,7px 7px 0 #afb8b3,16px 20px 30px var(--lo),inset 1px 1px 0 #fff}
.tcard:active,.tile:active{transform:translate(3px,3px);box-shadow:inset 3px 3px 8px var(--lo),inset -3px -3px 8px var(--hi)}
.tcard .ico,.tile .ic{box-shadow:inset 2px 2px 4px rgba(92,108,100,.28),inset -2px -2px 4px var(--hi)}
.tcard .go{background:var(--face);box-shadow:-2px -2px 4px var(--hi),2px 2px 4px var(--lo)}
.tcard:hover .go{background:var(--navy)}
.pill,.lang{background:var(--face);border:1px solid rgba(255,255,255,.85);box-shadow:-3px -3px 7px var(--hi),3px 3px 7px var(--lo)}
.lang span.on{box-shadow:inset 2px 2px 4px rgba(0,0,0,.25)}
/* buttons: thick keys that depress */
.btn{border:0;padding:14px 30px;font-weight:600;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn.primary{background:linear-gradient(145deg,#8fa99a,#6f8b7b);color:#fff;border:1px solid rgba(255,255,255,.35);
  box-shadow:-6px -6px 14px var(--hi),1px 1px 0 #627d6d,2px 2px 0 #5c7667,3px 3px 0 #567061,4px 4px 0 #50695a,5px 5px 0 #4a6354,10px 12px 20px var(--lo),inset 1px 1px 0 rgba(255,255,255,.45)}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(4px,4px)}
.btn.primary:active{box-shadow:inset 3px 3px 8px rgba(30,50,40,.35),inset -2px -2px 6px rgba(255,255,255,.25)}
.btn:not(.primary):active{box-shadow:inset 3px 3px 8px var(--lo),inset -3px -3px 8px var(--hi)}
footer .btn:not(.primary){background:linear-gradient(145deg,#6d7c74,#56655d);color:var(--on-dark);border:1px solid rgba(255,255,255,.2);
  box-shadow:1px 1px 0 #47544d,2px 2px 0 #404c46,3px 3px 0 #39443f,4px 4px 0 #323c37,8px 10px 18px rgba(0,0,0,.3)}
footer .btn.primary{background:linear-gradient(145deg,#fff,#dfe6e2);color:var(--navy);
  box-shadow:1px 1px 0 #b9c3be,2px 2px 0 #b0bab5,3px 3px 0 #a7b1ac,4px 4px 0 #9ea8a3,8px 10px 18px rgba(0,0,0,.3)}
/* embossed type: raised letters in the surface colour */
.hero h1,h2.big{color:#e6ebe8;font-weight:600;
  text-shadow:-2px -2px 3px rgba(255,255,255,.95),1px 1px 0 #d2d9d5,2px 2px 0 #cbd3cf,3px 3px 0 #c4ccc8,4px 4px 0 #bdc5c1,5px 5px 0 #b6bebb,6px 6px 0 #afb8b4,
    10px 12px 14px rgba(92,108,100,.35),18px 22px 34px rgba(92,108,100,.22)}
.hero h1 em,h2.big em{color:#cddbd3;
  text-shadow:-2px -2px 3px rgba(255,255,255,.95),1px 1px 0 #a9bdb1,2px 2px 0 #a1b6aa,3px 3px 0 #99afa2,4px 4px 0 #91a89b,5px 5px 0 #89a193,6px 6px 0 #819a8c,
    10px 12px 14px rgba(92,108,100,.35),18px 22px 34px rgba(92,108,100,.22)}
:lang(zh) .hero h1{font-weight:700}
.hero h1{font-size:clamp(38px,6.6vw,96px);line-height:1.08;letter-spacing:-.025em;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.hero .wrap{perspective:1200px}
footer h2.big{color:var(--on-dark);text-shadow:1px 1px 0 rgba(0,0,0,.18),2px 2px 0 rgba(0,0,0,.16),3px 3px 0 rgba(0,0,0,.14),4px 4px 0 rgba(0,0,0,.12),8px 10px 18px rgba(0,0,0,.25)}
footer h2.big em{color:#cddbd3;text-shadow:1px 1px 0 rgba(0,0,0,.18),2px 2px 0 rgba(0,0,0,.16),3px 3px 0 rgba(0,0,0,.14),4px 4px 0 rgba(0,0,0,.12),8px 10px 18px rgba(0,0,0,.25)}
.hero h1,h2.big{}h2.big{color:#dce2de}h2.big em{color:#c3d3ca}footer h2.big{color:var(--on-dark)}

/* ---------- v3: clearer titles, fresher green, dawn glow ---------- */
:root,[data-theme]{--hi:rgba(255,255,255,.97);--lo:rgba(70,102,88,.34);--face:linear-gradient(145deg,#f6faf8,#dfeae4)}
.hero h1,h2.big{color:#4f6e5e;font-weight:700;
  text-shadow:-1px -1px 1px rgba(255,255,255,.9),1px 1px 0 #3f5a4c,2px 2px 0 #3b5547,3px 3px 0 #365042,4px 4px 0 #314b3e,5px 5px 0 #2d4639,
    8px 10px 12px rgba(40,70,56,.32),16px 20px 30px rgba(40,70,56,.2)}
.hero h1 em,h2.big em{color:#74b399;
  text-shadow:-1px -1px 1px rgba(255,255,255,.9),1px 1px 0 #4e8a72,2px 2px 0 #49836c,3px 3px 0 #447c66,4px 4px 0 #3f7560,5px 5px 0 #3a6e5a,
    8px 10px 12px rgba(40,70,56,.32),16px 20px 30px rgba(40,70,56,.2)}
footer h2.big{color:#f2f8f4}footer h2.big em{color:#bfe0cf}
.btn.primary{background:linear-gradient(145deg,#7fb9a0,#5b9a80);
  box-shadow:-6px -6px 14px var(--hi),1px 1px 0 #4c8970,2px 2px 0 #47826a,3px 3px 0 #427b64,4px 4px 0 #3d745e,5px 5px 0 #386d58,10px 12px 20px var(--lo),inset 1px 1px 0 rgba(255,255,255,.45)}
.tcard .ico,.tile .ic{color:#fff}
/* dawn glow: warm light rising from the lower left, cool mint top right; slow breathing */
.hero{background:
  radial-gradient(900px 620px at 18% 108%,rgba(255,224,184,.62),transparent 62%),
  radial-gradient(800px 560px at 88% -6%,rgba(196,232,214,.75),transparent 60%),
  radial-gradient(700px 480px at 52% 70%,rgba(255,244,222,.5),transparent 65%),var(--bg)}
.hero::before{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0;
  background:radial-gradient(640px 420px at 24% 96%,rgba(255,214,166,.55),transparent 65%),radial-gradient(560px 380px at 80% 8%,rgba(214,240,226,.7),transparent 65%);
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.07) translateY(-1.5%)}}
body{background:var(--bg) radial-gradient(1100px 700px at 6% 0,rgba(255,236,208,.35),transparent 60%) fixed}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* ---------- v4: ivory glossy 3D type with glass reflection ---------- */
.hero h1,h2.big{color:#fcfdf9}
.hero h1{text-shadow:1px 1px 0 rgb(207, 227, 216),2px 2px 0 rgb(197, 219, 207),3px 3px 0 rgb(186, 212, 199),4px 4px 0 rgb(176, 204, 190),5px 5px 0 rgb(166, 196, 181),6px 6px 0 rgb(156, 189, 173),7px 7px 0 rgb(145, 181, 164),8px 8px 0 rgb(135, 174, 156),9px 9px 0 rgb(125, 166, 147),10px 10px 0 rgb(115, 158, 138),11px 11px 0 rgb(104, 151, 130),12px 12px 0 rgb(94, 143, 121),-1px -1px 1px rgba(255,255,255,.95),16px 20px 22px rgba(40,80,62,.30),28px 36px 50px rgba(40,80,62,.18)}
.hero h1 em{color:#f4fffa;text-shadow:1px 1px 0 rgb(183, 220, 201),2px 2px 0 rgb(172, 213, 192),3px 3px 0 rgb(161, 205, 184),4px 4px 0 rgb(150, 198, 175),5px 5px 0 rgb(139, 190, 166),6px 6px 0 rgb(128, 183, 158),7px 7px 0 rgb(118, 175, 149),8px 8px 0 rgb(107, 168, 141),9px 9px 0 rgb(96, 160, 132),10px 10px 0 rgb(85, 153, 123),11px 11px 0 rgb(74, 145, 115),12px 12px 0 rgb(63, 138, 106),-1px -1px 1px rgba(255,255,255,.95),16px 20px 22px rgba(40,80,62,.30),28px 36px 50px rgba(40,80,62,.18)}
.hero h1,h2.big{}
.hero h1{margin-bottom:64px}
h2.big{text-shadow:1px 1px 0 rgb(207, 227, 216),2px 2px 0 rgb(191, 215, 202),3px 3px 0 rgb(175, 203, 189),4px 4px 0 rgb(159, 191, 175),5px 5px 0 rgb(142, 179, 162),6px 6px 0 rgb(126, 167, 148),7px 7px 0 rgb(110, 155, 135),8px 8px 0 rgb(94, 143, 121),-1px -1px 1px rgba(255,255,255,.95),9px 12px 14px rgba(40,80,62,.28);margin-bottom:34px}
h2.big em{color:#f4fffa;text-shadow:1px 1px 0 rgb(183, 220, 201),2px 2px 0 rgb(166, 208, 187),3px 3px 0 rgb(149, 197, 174),4px 4px 0 rgb(132, 185, 160),5px 5px 0 rgb(114, 173, 147),6px 6px 0 rgb(97, 161, 133),7px 7px 0 rgb(80, 150, 120),8px 8px 0 rgb(63, 138, 106),-1px -1px 1px rgba(255,255,255,.95),9px 12px 14px rgba(40,80,62,.28)}
footer h2.big,footer h2.big em{color:#fcfdf9;text-shadow:1px 1px 0 rgb(169, 201, 185),2px 2px 0 rgb(155, 190, 174),3px 3px 0 rgb(142, 180, 162),4px 4px 0 rgb(128, 169, 151),5px 5px 0 rgb(115, 159, 140),6px 6px 0 rgb(101, 148, 128),7px 7px 0 rgb(88, 138, 117),8px 8px 0 rgb(74, 127, 106),9px 9px 0 rgb(61, 117, 94),10px 10px 0 rgb(47, 106, 83),-1px -1px 1px rgba(255,255,255,.7),10px 14px 16px rgba(0,0,0,.28)}
.stat b{color:#fcfdf9;font-weight:700;text-shadow:1px 1px 0 rgb(169, 201, 185),2px 2px 0 rgb(155, 190, 174),3px 3px 0 rgb(142, 180, 162),4px 4px 0 rgb(128, 169, 151),5px 5px 0 rgb(115, 159, 140),6px 6px 0 rgb(101, 148, 128),7px 7px 0 rgb(88, 138, 117),8px 8px 0 rgb(74, 127, 106),9px 9px 0 rgb(61, 117, 94),10px 10px 0 rgb(47, 106, 83),-1px -1px 1px rgba(255,255,255,.7),10px 14px 16px rgba(0,0,0,.28);margin-bottom:.35em}
.stat b .u{color:#cfeadc}
/* stronger dawn glow */
.hero{background:
  radial-gradient(1000px 700px at 14% 108%,rgba(255,206,150,.85),transparent 62%),
  radial-gradient(900px 620px at 90% -8%,rgba(170,228,202,.95),transparent 60%),
  radial-gradient(760px 520px at 55% 72%,rgba(255,238,205,.7),transparent 66%),var(--bg)}
.hero::before{background:radial-gradient(720px 480px at 22% 96%,rgba(255,196,130,.8),transparent 66%),radial-gradient(640px 440px at 82% 6%,rgba(190,238,214,.95),transparent 66%);animation-duration:7s}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.12) translateY(-2%)}}
body{background:var(--bg) radial-gradient(1100px 700px at 6% 0,rgba(255,226,186,.5),transparent 60%),radial-gradient(900px 600px at 100% 40%,rgba(190,232,212,.45),transparent 60%) fixed}
.hero h1{margin-bottom:84px;}
h2.big{}
.stat b{margin-bottom:.62em}

/* ---------- v5: no reflections, stronger title edges, page-wide glows ---------- */
.hero h1,h2.big,.stat b{}
.stat b{margin-bottom:.3em}
.hero h1{margin-bottom:34px}
.hero{background:transparent}.hero::before{display:none}
body{position:relative;background:var(--bg)}
.glows{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:60}
.glows i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift ease-in-out infinite alternate}
.glows i.w{background:radial-gradient(circle,rgba(255,200,140,.95),rgba(255,214,170,0) 68%)}
.glows i.m{background:radial-gradient(circle,rgba(150,228,196,.95),rgba(170,232,205,0) 68%)}
@keyframes drift{from{transform:translate(0,0) scale(.92);opacity:.4}to{transform:translate(36px,-28px) scale(1.1);opacity:.7}}
@media(prefers-reduced-motion:reduce){.glows i{animation:none}}
/* titles: deeper, higher-contrast edges */
.hero h1{text-shadow:-1px -1px 1px #fff,1px 1px 0 #a9cbb9,2px 2px 0 #96bda9,3px 3px 0 #83af99,4px 4px 0 #709f88,5px 5px 0 #5f8f78,6px 6px 0 #528169,7px 7px 0 #47725c,8px 8px 0 #3d654f,9px 9px 0 #345844,10px 10px 0 #2c4d3a,11px 11px 0 #264532,12px 12px 0 #213c2c,
  16px 20px 22px rgba(25,55,42,.38),28px 36px 50px rgba(25,55,42,.22)}
.hero h1 em{text-shadow:-1px -1px 1px #fff,1px 1px 0 #8fd0b3,2px 2px 0 #7fc4a5,3px 3px 0 #6fb797,4px 4px 0 #5fa98a,5px 5px 0 #509a7c,6px 6px 0 #428b6e,7px 7px 0 #377b60,8px 8px 0 #2d6b52,9px 9px 0 #255d46,10px 10px 0 #1f503c,11px 11px 0 #1a4433,12px 12px 0 #163a2c,
  16px 20px 22px rgba(25,55,42,.38),28px 36px 50px rgba(25,55,42,.22)}
h2.big{text-shadow:-1px -1px 1px #fff,1px 1px 0 #96bda9,2px 2px 0 #83af99,3px 3px 0 #6f9f88,4px 4px 0 #5a8a73,5px 5px 0 #487760,6px 6px 0 #3a6551,7px 7px 0 #2f5543,8px 8px 0 #264735,9px 12px 14px rgba(25,55,42,.36)}
h2.big em{text-shadow:-1px -1px 1px #fff,1px 1px 0 #7fc4a5,2px 2px 0 #6fb797,3px 3px 0 #5aa388,4px 4px 0 #479074,5px 5px 0 #387e63,6px 6px 0 #2d6c54,7px 7px 0 #245d48,8px 8px 0 #1d4f3d,9px 12px 14px rgba(25,55,42,.36)}

/* ---------- v6: debossed (carved-in) titles ---------- */
.hero h1,h2.big{color:#cbd8d1;font-weight:800;text-shadow:none;filter:url(#deboss)}
.hero h1 em,h2.big em{color:#b4cfc0;text-shadow:none}
.stat b,footer h2.big,footer h2.big em{text-shadow:none;filter:url(#debossDark)}
.stat b{color:#4a6659}.stat b .u{color:#436054}
footer h2.big,footer h2.big em{color:#445f52}
.hero h1{margin-bottom:34px}
.stat b{color:#a7c0b3}.stat b .u{color:#bcd3c7}
footer h2.big,footer h2.big em{color:#a7c0b3}

/* v7: deeper face, highlighted keyword */
.hero h1,h2.big{color:#a9bdb2}
.hero h1 em,h2.big em{color:#2f8f6a;font-weight:800}
.hero h1 em{background:linear-gradient(transparent 62%,rgba(160,232,196,.55) 62%);padding:0 .12em;margin:0 -.06em;border-radius:.06em}
.hero h1 em{filter:drop-shadow(0 0 14px rgba(120,220,170,.55))}
.hero h1 em{background:linear-gradient(transparent 70%,rgba(150,226,188,.4) 70%);border-radius:0}

/* v8: plain words debossed, keyword embossed (raised) */
.hero h1{filter:none}
h2.big:has(em){filter:none}
.dbs{display:inline-block;filter:url(#deboss)}
footer .dbs{filter:url(#debossDark)}
.hero h1 em,h2.big em{background:none;padding:0;margin:0;font-weight:800;color:#e3f1e9;display:inline-block;filter:url(#emboss)}
footer h2.big em{color:#e3f1e9;filter:url(#embossDark)}

/* v9: clearer raised keyword, raised white numbers, back-to-overview button */
.hero h1 em,h2.big em{color:#a5cdb8}
.hero h1 em{filter:url(#emboss2)}
.stat b{color:#f6fbf8;filter:url(#embossDark)}
.stat b .u{color:#e4f2ea}
.backwork{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--navy);
  background:var(--face);border:1px solid rgba(255,255,255,.85);letter-spacing:.02em;
  box-shadow:-3px -3px 7px var(--hi),1px 1px 0 #c7d0cb,2px 2px 0 #c1cac5,3px 3px 0 #bbc4bf,6px 8px 12px var(--lo);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.backwork span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px}
.backwork:hover{transform:translate(-2px,-2px)}
.backwork:active{transform:translate(3px,3px);box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
h2.big em{margin:0 .04em}

/* v10: livelier glows */
.glows i{animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;opacity:.6}
@keyframes drift1{0%{transform:translate(0,0) scale(.9)}33%{transform:translate(120px,-70px) scale(1.12)}66%{transform:translate(40px,90px) scale(1)}100%{transform:translate(-90px,20px) scale(1.18)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.1)}40%{transform:translate(-140px,60px) scale(.9)}75%{transform:translate(-30px,-100px) scale(1.15)}100%{transform:translate(90px,40px) scale(.95)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1)}30%{transform:translate(90px,110px) scale(1.2)}60%{transform:translate(-110px,40px) scale(.88)}100%{transform:translate(60px,-90px) scale(1.1)}}
.glows i.w{animation-name:drift1}
.cursorglow{position:absolute;left:0;top:0;width:420px;height:420px;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;
  background:radial-gradient(circle,rgba(255,226,180,.85),rgba(190,238,214,.5) 45%,transparent 70%);will-change:transform}

/* v11: sticky chapter title until the section ends; back button bottom-right */
.chapter{overflow:clip}
.chapter .cols{align-items:start}
.chapter aside{position:sticky;top:96px;align-self:start}
.backrow{display:flex;justify-content:flex-end;margin-top:44px}
.backwork{margin-bottom:0}
@media(max-width:960px){.chapter aside{position:static}}

/* v12: icons = brown, carved-in glyphs on recessed wells */
.tile .ic,.tcard .ico,.tile:nth-child(3n+1) .ic,.tile:nth-child(5n+2) .ic,.tile:nth-child(5n+2) .ic,.tile:nth-child(n) .ic{
  background:linear-gradient(145deg,#dbe4df,#eef3f0);color:#9b7857;
  box-shadow:inset 3px 3px 6px rgba(80,100,90,.35),inset -3px -3px 6px rgba(255,255,255,.95)}
.tile .ic svg,.tcard .ico svg{stroke-width:2.2;filter:url(#debossBrown)}
.tcard:hover .ico{color:#8a6746}
.tile .ic,.tcard .ico{color:#b08a66}.tile .ic svg{width:23px;height:23px}.tcard .ico svg{width:24px;height:24px}

/* v13: icons = brown raised (embossed) glyphs on raised plates */
.tile .ic,.tcard .ico,.tile:nth-child(n) .ic{background:var(--face);color:#a47e59;
  box-shadow:-3px -3px 6px var(--hi),2px 2px 0 #cdd5d1,3px 3px 0 #c7d0cb,5px 6px 9px var(--lo),inset 1px 1px 0 #fff}
.tile .ic svg,.tcard .ico svg{stroke-width:2.3;filter:url(#embossBrown)}
.tcard:hover .ico{color:#936c47}
.tile .ic svg,.tcard .ico svg{stroke-width:2.9;width:26px;height:26px}.tile .ic,.tcard .ico{color:#a98360}
/* v14: flat 2D glyphs inside the raised icon plates; looser footer title leading */
.tile .ic svg,.tcard .ico svg{filter:none;stroke-width:2;width:24px;height:24px}
.tile .ic,.tcard .ico{color:#9a7452}
footer h2.big{line-height:1.3}

.hero .attrib{margin:-6px auto 26px;font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.5vw,18px);letter-spacing:.01em;color:var(--accent);opacity:0;animation:fade 1s .45s var(--ease) forwards}
:lang(zh) .hero .attrib{font-style:normal;letter-spacing:.04em}