/* Layout: one long scroll on xuan paper; a cinnabar-lacquer hero with a moon-gate portrait; sections numbered only where order matters (path). */
:root{
  --paper:#FBF3EA; --paper-2:#F4E6D6; --card:#FFFDF9; --ink:#1E1413; --muted:#6E5A55; --line:#E8D5C3;
  --red:#C8281E; --red-deep:#8E1712; --gold:#D9A441; --gold-soft:#F3DDA8; --jade:#1F7A63; --jade-soft:#D7EEE6;
  --lacquer:#9F1A12; --lacquer-2:#6F0F0B; --on-lacquer:#FFF3E2; --on-lacquer-muted:#F2C9B3;
  --seal:#B3241B;
  --f-display:"Prata","Times New Roman",Georgia,serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-han:"Ma Shan Zheng","KaiTi","STKaiti","Kaiti SC","Noto Serif SC",serif;
  --r:18px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#150E0D; --paper-2:#1F1514; --card:#221816; --ink:#F6EBE1; --muted:#BFA79C; --line:#3A2A27;
  --red:#F0584A; --red-deep:#FF8A7A; --gold:#E9BC5E; --gold-soft:#4A3718; --jade:#5DC5A6; --jade-soft:#123329;
  --lacquer:#7A120D; --lacquer-2:#3F0806; --seal:#E04A3D; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#150E0D; --paper-2:#1F1514; --card:#221816; --ink:#F6EBE1; --muted:#BFA79C; --line:#3A2A27;
  --red:#F0584A; --red-deep:#FF8A7A; --gold:#E9BC5E; --gold-soft:#4A3718; --jade:#5DC5A6; --jade-soft:#123329;
  --lacquer:#7A120D; --lacquer-2:#3F0806; --seal:#E04A3D; color-scheme:dark}

html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--red)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;line-height:1.12;text-wrap:balance}
p{margin:0}
.han{font-family:var(--f-han);font-weight:400;line-height:1}
.w{max-width:1200px;margin:0 auto;padding-inline:24px}
@media (max-width:520px){.w{padding-inline:16px}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.stamp{flex:0 0 auto;width:42px;height:42px;border-radius:9px;background:var(--seal);color:#FFF3E2;display:grid;place-items:center;font-size:24px;box-shadow:inset 0 0 0 2px rgba(255,243,226,.55),inset 0 0 0 4px var(--seal);transform:rotate(-4deg)}
.brand b{display:block;font-family:var(--f-display);font-weight:400;font-size:18px;line-height:1.1;white-space:nowrap}
.brand small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap}
nav.menu{margin-left:auto;display:flex;gap:4px}
nav.menu a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 10px;border-radius:9px;white-space:nowrap}
nav.menu a:hover{color:var(--ink)}
nav.menu a.on{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}
.cta-top{flex:0 0 auto;text-decoration:none;background:var(--red);color:#FFF6EC;font-weight:700;font-size:14.5px;padding:10px 16px;border-radius:11px}
.burger{display:none;margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:10px;width:42px;height:42px;cursor:pointer;font-size:18px}
@media (max-width:1120px){nav.menu{display:none}.burger{display:block}.cta-top{margin-left:0}
  nav.menu.open{display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 16px 16px}}
@media (max-width:460px){.cta-top{display:none}.brand small{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,var(--lacquer) 0%,var(--lacquer-2) 70%);color:var(--on-lacquer);padding-block:72px 64px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .bigchar{position:absolute;right:-2vw;bottom:-6vw;font-size:min(46vw,560px);color:rgba(255,220,180,.07);user-select:none;pointer-events:none}
.hg{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hg>*{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft);opacity:.95}
.hero .eyebrow{color:#F3DDA8}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.hero h1{font-size:clamp(38px,5.4vw,68px);margin-top:20px;letter-spacing:-.01em;color:#FFF6EC}
.hero h1 em{font-style:normal;color:#F6C76B}
.lead{font-size:clamp(17px,1.6vw,20px);margin-top:22px;max-width:34em;color:#F6DCCB}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:15.5px;padding:14px 22px;border-radius:13px;border:1px solid transparent;cursor:pointer}
.btn.gold{background:#F2BE58;color:#3A1A06}
.btn.gold:hover{background:#FFD07A}
.btn.ghost{border-color:rgba(255,236,214,.4);color:#FFF3E2;background:transparent}
.btn.ghost:hover{border-color:#FFF3E2}
.btn.red{background:var(--red);color:#FFF6EC}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,230,205,.22)}
.facts div{display:flex;align-items:baseline;gap:10px}
.facts b{font-family:var(--f-display);font-weight:400;font-size:34px;color:#F6C76B;line-height:1}
.facts span{font-size:14px;color:#F2C9B3;line-height:1.3;max-width:11em}

/* moon gate */
.gate{position:relative;justify-self:center;width:min(100%,430px);aspect-ratio:1;max-width:100%}
.gate .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,#F2BE58,#B4782A,#F6D38A,#B4782A,#F2BE58);padding:12px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55)}
.gate .ring::after{content:"";position:absolute;inset:12px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(80,20,8,.35)}
.gate img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.gate .lat{position:absolute;top:-22px;width:46px;height:64px;animation:sway 4.5s ease-in-out infinite;transform-origin:50% -40px}
.gate .lat.l1{left:4%}.gate .lat.l2{right:6%;animation-delay:-2s;top:-6px}
@keyframes sway{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
.gate .tag{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 16px 9px 12px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.gate .tag .han{font-size:24px;color:var(--red)}
.gate .say{position:absolute;right:-6px;top:22%;background:#FFF6EC;color:#3A1A06;border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);animation:float 5s ease-in-out infinite}
.gate .say .han{font-size:22px;color:#B3241B;display:block}
@keyframes float{50%{transform:translateY(-8px)}}
@media (max-width:900px){.hg{grid-template-columns:1fr;gap:56px}.hero{padding-block:44px 64px}.gate{width:min(78vw,360px)}.gate .say{right:-4px}}

/* marquee of real China */
.strip{background:var(--lacquer-2);padding-block:14px;overflow:hidden;border-top:1px solid rgba(242,190,88,.35)}
.track{display:flex;gap:14px;width:max-content;animation:marq 60s linear infinite}
.strip:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.strip .ph{width:240px;height:150px;border-radius:12px;flex:0 0 auto}

/* photo slot with painted fallback */
.ph{margin:0;position:relative;overflow:hidden;background:var(--g,linear-gradient(135deg,#B3241B,#6F0F0B));color:#FFF3E2;isolation:isolate}
.ph .fb{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(46px,7vw,84px);color:rgba(255,243,226,.82);z-index:0}
.ph .fb::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.18),transparent 70%),repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .8s ease}
.ph:hover img{transform:scale(1.05)}
.ph figcaption,.ph .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(20,6,4,.78));font-size:13px;line-height:1.3;display:flex;gap:8px;align-items:baseline}
.ph .cap .han{font-size:19px;color:#F6C76B}

/* sections */
.sec{padding-block:88px}
.sec.alt{background:var(--paper-2)}
.sh{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;align-items:end;margin-bottom:38px}
.sh .han.mark{grid-row:1/3;font-size:clamp(56px,7vw,92px);color:var(--red);line-height:.9}
.sh h2{font-size:clamp(30px,4vw,48px)}
.sh p{grid-column:2;color:var(--muted);max-width:44em;font-size:17.5px}
@media (max-width:600px){.sh{grid-template-columns:1fr}.sh .han.mark{grid-row:auto}.sh p{grid-column:1}}

/* about */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.about>*{min-width:0}
.about .big{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);line-height:1.35}
.about .big mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--gold) 45%,transparent) 62%);color:inherit}
.princ{display:grid;gap:14px;margin-top:30px}
.pr{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.pr .han{font-size:40px;color:var(--red);text-align:center}
.pr b{display:block;font-size:17px;margin-bottom:2px}
.pr span{color:var(--muted);font-size:15.5px}
.pics{position:relative;min-height:540px}
.pics .p1{position:absolute;left:0;top:0;width:76%;aspect-ratio:620/747;border-radius:200px 200px var(--r) var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(60,10,5,.5)}
.pics .p2{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:420/452;border-radius:var(--r);overflow:hidden;border:6px solid var(--paper);transform:rotate(4deg);box-shadow:0 20px 40px -20px rgba(60,10,5,.5)}
.pics img{width:100%;height:100%;object-fit:cover;display:block}
.pics .note{position:absolute;right:2%;top:12%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;max-width:190px;box-shadow:0 12px 30px -18px rgba(60,10,5,.45)}
.pics .note .han{font-size:26px;color:var(--jade);display:block;margin-bottom:4px}
@media (max-width:900px){.about{grid-template-columns:1fr}.pics{min-height:0;aspect-ratio:1/1.05;max-width:520px}}

/* china */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:34px}
.cn{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;overflow:hidden}
.cn .han{font-size:58px;color:var(--red);display:block;margin-bottom:12px}
.cn h3{font-size:24px;margin-bottom:8px}
.cn p{color:var(--muted);font-size:15.5px}
.cn .tip{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:14.5px}
.cn .tip .han{display:inline;font-size:20px;margin:0 4px 0 0;color:var(--jade)}
@media (max-width:860px){.three{grid-template-columns:1fr}}
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:12px}
.mosaic .ph{border-radius:14px}
.m-a{grid-column:span 3;grid-row:span 2}.m-b{grid-column:span 3}.m-c{grid-column:span 2}.m-d{grid-column:span 2}.m-e{grid-column:span 2}.m-f{grid-column:span 1}
@media (max-width:860px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px}.m-a{grid-column:span 2;grid-row:span 2}.m-b,.m-c,.m-d,.m-e,.m-f{grid-column:span 1;grid-row:span 1}}

/* goals */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tabs button{border:1px solid var(--line);background:var(--card);padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.goals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.goal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s,border-color .25s;animation:rise .45s ease both}
.goal:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--red) 40%,var(--line));box-shadow:0 20px 40px -26px rgba(120,20,10,.5)}
.goal .han{font-size:42px;color:var(--red)}
.goal h3{font-size:21px}
.goal p{color:var(--muted);font-size:15px;flex:1}
.goal .when{font-size:13.5px;font-weight:700;color:var(--jade);background:var(--jade-soft);align-self:flex-start;padding:5px 10px;border-radius:8px}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}
@media (max-width:1020px){.goals{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:520px){.goals{grid-template-columns:1fr}}

/* approach builder */
.formula{display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;gap:16px;align-items:stretch}
.formula>*{min-width:0}
.fx{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.fx h3{font-size:22px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.fx h3 .han{font-size:30px;color:var(--red)}
.fx ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.fx li{font-size:15px;color:var(--muted);padding-left:18px;position:relative}
.fx li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.fx li b{color:var(--ink);font-weight:700}
.op{display:grid;place-items:center;font-family:var(--f-display);font-size:40px;color:var(--gold)}
.result{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.result h3 .han{color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.chips button{border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);background:transparent;color:var(--paper);padding:6px 12px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;opacity:.8}
.chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#2A1404;opacity:1}
.bars{display:grid;gap:9px}
.bar{display:grid;grid-template-columns:118px 1fr 36px;gap:10px;align-items:center;font-size:14px}
.bar i{display:block;height:10px;border-radius:5px;background:color-mix(in srgb,var(--paper) 18%,transparent);overflow:hidden}
.bar i s{display:block;height:100%;width:var(--v);background:linear-gradient(90deg,var(--red),var(--gold));border-radius:5px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;opacity:.8}
.result .why{margin-top:14px;font-size:14.5px;opacity:.85}
@media (max-width:1020px){.formula{grid-template-columns:1fr}.op{font-size:30px;padding:2px 0}}
.start{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;counter-reset:st}
.start div{counter-increment:st;border-top:2px solid var(--red);padding-top:14px}
.start div::before{content:counter(st);font-family:var(--f-display);font-size:30px;color:var(--red);display:block;line-height:1;margin-bottom:8px}
.start b{display:block;font-size:16.5px}.start span{color:var(--muted);font-size:15px}
@media (max-width:860px){.start{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:480px){.start{grid-template-columns:1fr}}

/* path */
.road{position:relative}
.stops{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;position:relative;margin-bottom:22px}
.stops::before{content:"";position:absolute;left:4%;right:4%;top:33px;height:3px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 16px)}
.stops .prog{position:absolute;left:4%;top:33px;height:3px;background:linear-gradient(90deg,var(--red),var(--gold));width:0;transition:width .6s ease}
.stop{position:relative;z-index:1;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;text-align:center}
.stop .dot{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line);font-family:var(--f-han);font-size:30px;color:var(--muted);transition:all .3s}
.stop small{font-size:13px;font-weight:700;color:var(--muted);line-height:1.25}
.stop.done .dot{border-color:var(--gold);color:var(--red)}
.stop[aria-selected="true"] .dot{background:var(--red);border-color:var(--red);color:#FFF3E2;transform:scale(1.08);box-shadow:0 10px 24px -10px rgba(160,20,10,.7)}
.stop[aria-selected="true"] small{color:var(--ink)}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;animation:rise .4s ease}
.panel>*{min-width:0}
.panel .when{display:inline-block;font-size:13.5px;font-weight:700;color:var(--jade);background:var(--jade-soft);padding:5px 11px;border-radius:8px;margin-bottom:12px}
.panel h3{font-size:clamp(26px,3vw,34px);margin-bottom:12px}
.panel p{color:var(--muted)}
.panel .can{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.panel .can li{background:var(--paper);border-radius:12px;padding:11px 14px;font-size:15px;display:flex;gap:10px;align-items:baseline}
.panel .can li .han{color:var(--red);font-size:20px;flex:0 0 auto}
.panel .phrase{margin-top:16px;border-left:3px solid var(--gold);padding:6px 0 6px 14px}
.panel .phrase .han{font-size:28px;display:block;color:var(--ink);margin-bottom:4px}
.panel .phrase span{font-size:14px;color:var(--muted)}
.pnav{display:flex;gap:10px;margin-top:16px}
.pnav button{border:1px solid var(--line);background:var(--card);border-radius:11px;padding:9px 16px;font-weight:700;cursor:pointer}
@media (max-width:860px){.stops{grid-template-columns:repeat(7,72px);overflow-x:auto;padding-bottom:6px}.stops::before,.stops .prog{display:none}.panel{grid-template-columns:1fr;padding:22px}}

/* calendar */
.cal-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--red);color:#FFF6EC}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.day{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;min-height:178px;display:flex;flex-direction:column;gap:8px}
.day header{display:flex;justify-content:space-between;align-items:baseline}
.day header b{font-size:15px}
.day header .han{font-size:22px;color:var(--muted)}
.ev{border-radius:10px;padding:8px 10px;font-size:13.5px;line-height:1.3;animation:rise .35s ease both}
.ev small{display:block;font-size:12px;opacity:.8;margin-top:2px}
.ev.lesson{background:var(--red);color:#FFF6EC}
.ev.self{background:var(--gold-soft);color:var(--ink)}
.ev.live{background:var(--jade-soft);color:var(--ink)}
.ev.rest{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:14px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:14px;height:14px;border-radius:4px}
@media (max-width:1020px){.week{grid-template-columns:repeat(7,180px);overflow-x:auto;padding-bottom:8px}}
.months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.mo{border-radius:var(--r);padding:20px;background:var(--card);border:1px solid var(--line)}
.mo h4{font-family:var(--f-body);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.mo b{display:block;font-family:var(--f-display);font-weight:400;font-size:22px;margin-bottom:6px}
.mo p{color:var(--muted);font-size:15px}
@media (max-width:760px){.months{grid-template-columns:1fr}}

/* timing chart */
.ctrls{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-bottom:20px}
.ctrls label{font-size:14px;font-weight:700;color:var(--muted);display:flex;gap:10px;align-items:center}
.chart{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 24px 18px}
.rows{display:grid;gap:12px}
.row{display:grid;grid-template-columns:190px 1fr 92px;gap:14px;align-items:center}
.row b{font-size:15px;line-height:1.25}
.row b small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.lane{position:relative;height:16px;border-radius:8px;background:var(--paper-2)}
.lane s{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.lane s::after{content:"";position:absolute;right:-1px;top:-3px;width:4px;height:22px;border-radius:2px;background:var(--ink)}
.row em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;text-align:right;white-space:nowrap}
.axis{display:grid;grid-template-columns:190px 1fr 92px;gap:14px;margin-top:10px}
.ticks{position:relative;height:20px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ticks span{position:absolute;transform:translateX(-50%)}
.fine{font-size:13.5px;color:var(--muted);margin-top:14px}
@media (max-width:700px){.row,.axis{grid-template-columns:1fr 70px}.row b{grid-column:1/-1}.axis>div:first-child,.axis>div:last-child{display:none}.axis{grid-template-columns:1fr}}

/* skills */
.skills{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.skills>*{min-width:0}
.four{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.sk .han{font-size:52px;color:var(--red)}
.sk b{display:block;margin-top:8px;font-size:17px}
.sk span{font-size:14.5px;color:var(--muted)}
.build{background:var(--ink);color:var(--paper);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:18px}
.build h3{font-size:26px}
.build p{opacity:.8;font-size:15.5px}
.eq{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;min-height:170px;background:color-mix(in srgb,var(--paper) 7%,transparent);border-radius:16px;padding:16px}
.eq .han{font-size:clamp(64px,8vw,96px);color:var(--gold)}
.eq .han.res{color:#FF7A6B;animation:ink .7s ease both}
.eq i{font-style:normal;font-family:var(--f-display);font-size:34px;opacity:.6}
@keyframes ink{from{filter:blur(6px);transform:scale(.85)}to{filter:none;transform:none}}
.eq-cap{text-align:center;font-size:15.5px}
.eq-cap b{color:var(--gold)}
.eqbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.eqbtns button{border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);background:transparent;color:var(--paper);border-radius:999px;padding:7px 14px;font-weight:600;cursor:pointer;font-size:14px}
.eqbtns button[aria-pressed="true"]{background:var(--gold);color:#2A1404;border-color:var(--gold)}
@media (max-width:900px){.skills{grid-template-columns:1fr}}

/* experience */
.exp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cert{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 22px;overflow:hidden}
.cert .kind{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cert h3{font-size:22px;margin:10px 0 6px;padding-right:62px}
.cert p{color:var(--muted);font-size:15px}
.cert .seal{position:absolute;right:18px;top:18px;width:52px;height:52px;border-radius:8px;background:var(--seal);color:#FFF3E2;display:grid;place-items:center;font-size:26px;transform:rotate(6deg);box-shadow:inset 0 0 0 2px rgba(255,243,226,.5),inset 0 0 0 4px var(--seal)}
.cert.red{background:linear-gradient(160deg,var(--card) 55%,color-mix(in srgb,var(--red) 12%,var(--card)))}
.cert.work .seal{background:var(--jade);box-shadow:inset 0 0 0 2px rgba(255,243,226,.5),inset 0 0 0 4px var(--jade)}
.cert .yrs{display:inline-block;margin-top:12px;font-family:var(--f-display);font-size:26px;color:var(--red)}
.cert.wide{grid-column:span 3;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cert.wide p{color:color-mix(in srgb,var(--paper) 75%,transparent)}
.cert.wide .kind{color:var(--gold)}
.cert.wide .han.cn2{font-size:72px;color:var(--gold)}
@media (max-width:900px){.exp{grid-template-columns:repeat(2,minmax(0,1fr))}.cert.wide{grid-column:span 2}}@media (max-width:560px){.exp{grid-template-columns:1fr}.cert.wide{grid-column:span 1;grid-template-columns:1fr}}

/* format + faq */
.fmt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:40px}
.fm{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.fm .han{font-size:34px;color:var(--jade)}
.fm b{display:block;margin:6px 0 4px;font-size:17px}
.fm span{font-size:15px;color:var(--muted)}
@media (max-width:900px){.fmt{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:480px){.fmt{grid-template-columns:1fr}}
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:700;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--red);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--muted)}

/* contact */
.contact{position:relative;overflow:hidden;background:radial-gradient(100% 120% at 0% 0%,var(--lacquer),var(--lacquer-2));color:var(--on-lacquer);border-radius:28px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact>*{min-width:0;position:relative}
.contact h2{font-size:clamp(30px,4vw,46px);color:#FFF6EC}
.contact .sub{margin-top:12px;color:#F2C9B3}
.contact .bg{position:absolute;right:-20px;bottom:-60px;font-size:300px;color:rgba(255,220,180,.07);pointer-events:none}
.cl{display:grid;gap:10px;margin-top:26px}
.ci{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:rgba(255,243,226,.08);border:1px solid rgba(255,230,205,.18);border-radius:14px;padding:12px 14px}
.ci .han{font-size:24px;color:#F6C76B;width:30px;text-align:center}
.ci small{display:block;font-size:12.5px;color:#F2C9B3}
.ci a,.ci .val{color:#FFF6EC;font-weight:700;text-decoration:none;word-break:break-all;user-select:all}
.ci button{border:1px solid rgba(255,230,205,.3);background:transparent;color:#FFF3E2;border-radius:9px;padding:7px 11px;font-size:13px;font-weight:700;cursor:pointer}
form.req{background:#FFF8F0;color:#2A1404;border-radius:20px;padding:24px;display:grid;gap:12px}
form.req h3{font-size:24px}
form.req label{display:grid;gap:6px;font-size:13.5px;font-weight:700;color:#6E4A3A}
form.req input,form.req select,form.req textarea{font:inherit;font-size:15.5px;border:1px solid #E5CDB8;border-radius:11px;padding:11px 12px;background:#FFFDF9;color:#2A1404;width:100%;color-scheme:light}
form.req textarea{min-height:82px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.out{display:none;background:#FFF0DE;border:1px dashed #D9A441;border-radius:12px;padding:12px;font-size:14px;white-space:pre-wrap}
.out.on{display:block}
.formbtns{display:flex;flex-wrap:wrap;gap:10px}
.formbtns .btn{padding:12px 18px}
.formbtns .btn.line{border-color:#E5CDB8;color:#2A1404;background:transparent}
.toast{font-size:13.5px;color:#1F7A63;font-weight:700;min-height:18px}
@media (max-width:900px){.contact{grid-template-columns:1fr;padding:28px 20px}.two{grid-template-columns:1fr}}

footer{padding-block:36px 48px;color:var(--muted);font-size:13.5px}
footer .w{display:grid;gap:10px}
footer a{color:var(--muted)}
.credits{font-size:12.5px;line-height:1.6}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.form-note{font-size:12px;line-height:1.5;opacity:.8} html{scroll-padding-top:90px} button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd6b29;outline-offset:4px}