/* 本声 v4 — "studio log sheet / broadsheet". Warm paper, ink, one vermilion (朱红) used like a seal. Flat lines only. */
@font-face{font-family:"BS Serif";src:url(/static/fonts/bs-serif-700-p.woff2?v=4) format("woff2");font-weight:600 900;font-display:swap;unicode-range:U+2E80-2FDF,U+3000-303F,U+3040-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:"BS Serif";src:url(/static/fonts/bs-serif-400-p.woff2?v=4) format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+2E80-2FDF,U+3000-303F,U+3040-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:"Instrument Serif";src:url(/static/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/static/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/static/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/static/fonts/plex-mono-500.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root{
  --paper:#F1ECE2; --paper-2:#E9E2D4; --sheet:#F7F3EB;
  --ink:#151411; --ink-2:#3C3933; --ink-3:#7A7468; --ink-4:#A9A294;
  --rule:#151411; --hair:rgba(21,20,17,.16); --hair-2:rgba(21,20,17,.08);
  --red:#C8341C; --red-d:#A82A15; --red-t:rgba(200,52,28,.07);
  --serif:"BS Serif","Songti SC","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","STSong","SimSun",serif;
  --latin:"Instrument Serif","Times New Roman",var(--serif);
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif;
  --mono:"Plex Mono","SF Mono",Menlo,Consolas,"PingFang SC","Noto Sans CJK SC",monospace;
  --w:1320px; --pad:48px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
img,svg{display:block}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:0}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter;flex:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[hidden]{display:none!important}
.fade{animation:fade .5s var(--ease) both} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* mode strip */
.strip{background:var(--ink);color:var(--paper);font-size:13px}
.strip .wrap{display:flex;gap:12px;align-items:center;min-height:34px}
.strip .dot{width:7px;height:7px;background:var(--red);flex:none}

/* header: masthead bar */
.hdr{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px}
.seal{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--red);color:var(--paper);font:900 14px/1.02 var(--serif);
  text-align:center;letter-spacing:0;border-radius:3px;box-shadow:inset 0 0 0 2.5px var(--red),inset 0 0 0 3.5px rgba(241,236,226,.85);padding-top:1px}
.brand .wm{display:flex;flex-direction:column;line-height:1.05}
.brand .wm b{font:700 19px/1.1 var(--serif);letter-spacing:.12em}
.brand .wm small{font:italic 15px/1.1 var(--latin);color:var(--ink-3)}
.nav{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--ink-2)}
.nav a.l{position:relative;padding:4px 0}
.nav a.l::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--red);transition:right .35s var(--ease)}
.nav a.l:hover{color:var(--ink)} .nav a.l:hover::after{right:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 22px;border:1.5px solid var(--ink);border-radius:0;
  font:500 15px/1 var(--sans);letter-spacing:.04em;color:var(--ink);background:transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn .ico{width:17px;height:17px;transition:transform .3s var(--ease)}
.btn:hover .ico.arrow{transform:translateX(4px)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{background:var(--red);border-color:var(--red)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn.lg{height:58px;padding:0 30px;font-size:16px}
.btn.ghost{border-color:var(--hair);color:var(--ink-2)} .btn.ghost:hover{border-color:var(--red);background:var(--red);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:transparent;border-color:var(--hair);color:var(--ink-4);cursor:not-allowed}
.btn[disabled] .ico.arrow{transform:none}
.ulink{background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;padding-bottom:3px;font-size:15px;transition:background-size .3s var(--ease);cursor:pointer;border:0}
.ulink:hover{background-image:linear-gradient(var(--red),var(--red));background-size:100% 2px}

/* stamp (印章): the only place vermilion is loud */
.stamp{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--red);color:var(--red);font:700 13px/1 var(--serif);
  letter-spacing:.14em;padding:6px 8px 6px 10px;border-radius:2px;white-space:nowrap;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 2.75px var(--red)}
.stamp.tilt{transform:rotate(-4deg)}
.stamp.sm{font-size:12px;padding:4px 6px 4px 8px}
.stamp.lg{font-size:16px;padding:9px 10px 9px 13px}
.stamp.xs{font-size:11px;padding:2px 3px 2px 4px;letter-spacing:0;box-shadow:none}

.kicker{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dateline{display:flex;justify-content:space-between;gap:24px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding:10px 0 9px}
.foot-note{font-size:12px;color:var(--ink-3);margin:20px 0 0;letter-spacing:.02em}

/* ========== HERO ========== */
.hero{padding:0 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-bottom:3px double var(--rule)}
.mast{margin:0;font:900 clamp(150px,22vw,330px)/.86 var(--serif);letter-spacing:-.02em;display:flex;align-items:flex-end;padding:44px 0 34px;
  border-right:1px solid var(--rule);color:var(--ink)}
.mast span:last-child{margin-left:-.02em}
.hero-copy{padding:44px 0 40px 48px;display:flex;flex-direction:column;justify-content:flex-end}
.en-claim{font:400 clamp(30px,3.1vw,46px)/1.08 var(--latin);margin:0 0 22px;letter-spacing:-.01em}
.en-claim em{font-style:italic;color:var(--red)}
.zh-claim{font:700 clamp(20px,1.7vw,26px)/1.55 var(--serif);margin:0 0 18px;letter-spacing:.04em}
.lede{font-size:15px;line-height:1.85;color:var(--ink-2);margin:0;max-width:30em;border-top:1px solid var(--hair);padding-top:16px}
.cta{display:flex;align-items:center;gap:28px;margin-top:28px;flex-wrap:wrap}

/* the tape: two-sided real waveform */
.tape{padding:22px 0 0;--h:220px}
.tape-top,.tape-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.side{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font:500 12px/1 var(--mono)}
.side .k{display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink);font-weight:500}
.side .pl{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);transition:background .2s}
.side .pl .ico{width:13px;height:13px;fill:currentColor;stroke:none}
.side .pl .pause{display:none;fill:none;stroke:currentColor;stroke-width:2.2}
.side.on .pl{background:var(--red)} .side.on .pl .play{display:none} .side.on .pl .pause{display:block}
.side:hover .pl{background:var(--red)}
.tape .tc{display:flex;align-items:center;gap:8px;font-size:13px}
.tape .rec{width:8px;height:8px;border-radius:50%;background:var(--ink-4)}
.tape.rolling .rec{background:var(--red);animation:blink 1s steps(2) infinite} @keyframes blink{50%{opacity:.2}}
.tape-stage{position:relative;height:var(--h);margin:10px 0;cursor:crosshair}
.tape-svg{width:100%;height:100%}
.tape-svg rect{fill:var(--ink);transition:fill .2s}
.tape-svg .trk-zh rect{fill:var(--ink-4)}
.tape[data-side=en] .trk-en rect:not(.on){fill:rgba(21,20,17,.32)} .tape[data-side=en] .trk-en rect.on{fill:var(--ink)}
.tape[data-side=zh] .trk-zh rect.on{fill:var(--ink)} .tape[data-side=zh] .trk-en rect{fill:rgba(21,20,17,.32)}
.tape-base{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
.tape-head{position:absolute;top:-6px;bottom:-6px;left:0;width:1.5px;background:var(--red);transform:translateX(-.75px);opacity:0;transition:opacity .2s}
.tape-head::before{content:"";position:absolute;top:0;left:-4px;border:5px solid transparent;border-top:7px solid var(--red);border-bottom:0}
.tape[data-side=en] .tape-head,.tape[data-side=zh] .tape-head{opacity:1}
.ruler{position:relative;height:30px;border-top:1px solid var(--rule);margin-top:12px}
.ruler i{position:absolute;top:0;width:1px;height:6px;background:var(--ink-3)}
.ruler i.maj{height:11px;background:var(--ink)}
.ruler i span{position:absolute;top:13px;left:0;transform:translateX(-50%);font-size:10.5px;color:var(--ink-3);font-style:normal}
.ruler i:first-child span{transform:none} .ruler i:last-child span{transform:translateX(-100%)}

/* ========== SECTIONS ========== */
.sec{padding:0 0 96px}
.sec-h{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);border-top:3px solid var(--rule);padding-top:22px;margin-bottom:48px;margin-top:0}
.sec:first-of-type .sec-h{border-top:0}
.sec-h .num{font:400 clamp(96px,11vw,168px)/.78 var(--latin);letter-spacing:-.04em;color:var(--ink)}
.sec-h > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
.sec-h .kicker{grid-column:1/-1;margin-bottom:14px;border-bottom:1px solid var(--hair);padding-bottom:10px}
.sec-h h2{font:700 clamp(28px,2.6vw,38px)/1.32 var(--serif);margin:0;letter-spacing:.02em}
.sec-h p{margin:4px 0 0;color:var(--ink-2);font-size:15px;line-height:1.85}
#sample{padding-top:80px}

/* parallel text (signature layout) */
.parallel,.segs{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pl-h{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,1fr);column-gap:40px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 0;border-bottom:1px solid var(--rule)}
.pl-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,1fr);column-gap:40px;padding:18px 0 19px;
  border-bottom:1px solid var(--hair);cursor:pointer;position:relative;width:100%;transition:background .2s}
.pl-row:last-child{border-bottom:0}
.pl-row::before{content:"";position:absolute;left:-16px;top:18px;bottom:18px;width:3px;background:var(--red);transform:scaleY(0);transition:transform .25s var(--ease)}
.pl-row:hover{background:var(--hair-2)}
.pl-row .t{font-size:13px;color:var(--ink-3);padding-top:5px}
.pl-row .e{font:400 22px/1.38 var(--latin);color:var(--ink-2)}
.pl-row .z{font:500 20px/1.6 var(--serif);letter-spacing:.03em}
.pl-row.cur::before{transform:none}
.pl-row.cur .t{color:var(--red)}
.pl-row.cur[data-side=en] .e{color:var(--ink)} .pl-row.cur[data-side=en] .z{color:var(--ink-3)}
.pl-row.cur[data-side=zh] .e{color:var(--ink-3)}
.pl-row:focus-visible{outline-offset:-2px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.steps li{padding:26px 32px 30px;border-left:1px solid var(--hair);display:flex;flex-direction:column}
.steps li:first-child{border-left:0;padding-left:0}
.steps .sn{font:400 104px/.9 var(--latin);margin-bottom:22px}
.steps h3{font:700 22px/1.4 var(--serif);margin:0 0 10px;letter-spacing:.03em}
.steps p{margin:0 0 22px;color:var(--ink-2);font-size:15px;flex:1}
.steps .spec{font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);border-top:1px solid var(--hair);padding-top:10px}
.princ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:36px}
.princ b{display:block;font:700 16px/1.5 var(--serif);margin-bottom:4px;letter-spacing:.04em}
.princ b::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);margin:0 10px 2px 0}
.princ p{margin:0;font-size:14px;color:var(--ink-2)}

/* rate card */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.plan{padding:24px 32px 32px;border-left:1px solid var(--hair);display:flex;flex-direction:column;position:relative}
.plan:first-child{border-left:0;padding-left:0}
.plan.hl{background:var(--sheet);border-left:1px solid var(--rule);border-right:1px solid var(--rule);margin:-1px 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.plan .pn{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.plan .stamp{position:absolute;right:28px;top:22px}
.price{display:flex;align-items:baseline;gap:10px;min-height:92px}
.price b{font:400 92px/1 var(--latin);letter-spacing:-.03em}
.price b.txt{font:700 34px/1.2 var(--serif);letter-spacing:.06em;align-self:center}
.price span{font-size:15px;color:var(--ink-2)} .price s{color:var(--ink-4);font:400 24px var(--latin)}
.plan .sub{margin:4px 0 20px;color:var(--ink-3);font-size:14px;border-bottom:1px solid var(--hair);padding-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0 0 28px;flex:1}
.plan li{padding:7px 0 7px 20px;position:relative;font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:1.5px;background:var(--ink)}
.plan .btn{align-self:flex-start}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;display:grid;grid-template-columns:92px minmax(0,1fr) 24px;column-gap:40px;align-items:center;padding:20px 0;cursor:pointer;
  font:700 19px/1.5 var(--serif);letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font:400 13px var(--mono);color:var(--ink-3)}
.faq summary .ico{transition:transform .3s var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg);color:var(--red)}
.faq details[open] summary .q{color:var(--red)}
.faq summary:hover span:not(.q){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.faq .a{padding:0 64px 22px 132px;color:var(--ink-2);max-width:64em}
.faq .a p{margin:0 0 10px}

.closer{border-top:3px double var(--rule);padding:72px 0 80px}
.closer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.closer .zh-claim{font-size:clamp(34px,4vw,60px);line-height:1.3;margin:0}

/* footer */
.ftr{border-top:1px solid var(--rule);padding:28px 0 40px;font-size:13px;color:var(--ink-2)}
.ftr .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start}
.ftr b{font-family:var(--serif);color:var(--ink)}
.ftr .colophon{font-size:11px;color:var(--ink-3);text-align:right;letter-spacing:.04em;line-height:1.7}

/* ========== PAGES (upload / job) ========== */
.page{padding:0 0 88px}
.page-h{padding-bottom:30px;margin-bottom:0}
.page-h h1{font:900 clamp(40px,5vw,72px)/1.12 var(--serif);margin:34px 0 14px;letter-spacing:.02em}
.page-h p{margin:0;color:var(--ink-2);font-size:16px;max-width:36em}

.intake-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);border-top:3px solid var(--rule)}
.intake-side{border-right:1px solid var(--rule);padding:22px 28px 0 0}
.toc{list-style:none;margin:0;padding:0;position:sticky;top:96px;font-size:13px}
.toc li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.toc .n{color:var(--ink-3);width:22px}
.toc .ok{margin-left:auto;width:16px;height:16px;border:1.5px solid var(--ink-4);position:relative}
.toc .ok.on{background:var(--red);border-color:var(--red)}
.toc .ok.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--paper);border-width:0 1.75px 1.75px 0;transform:rotate(45deg)}
.slip{position:sticky;top:260px;margin-top:28px;border:1px solid var(--rule);background:var(--sheet);font-size:13px}
.slip .r{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:10px 12px;border-bottom:1px solid var(--hair)}
.slip .r:last-child{border-bottom:0}
.slip .r .mono{color:var(--ink-3);font-size:11px;letter-spacing:.08em;padding-top:2px}

#f{padding-left:40px}
.block{padding:22px 0 34px;border-bottom:1px solid var(--rule)}
.block-h{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.block-h .n{font:400 56px/.8 var(--latin);letter-spacing:-.02em;min-width:58px}
.block-h h2{font:700 24px/1.3 var(--serif);margin:0;letter-spacing:.04em}
.block-h .opt{margin-left:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:230px;padding:30px;
  border:1.5px dashed var(--ink);background:var(--sheet);cursor:pointer;transition:background .2s,border-color .2s}
.drop:hover,.drop.over{background:var(--paper-2);border-style:solid}
.drop b{font:700 19px/1.5 var(--serif);letter-spacing:.03em}
.drop b u{text-decoration:none;background:linear-gradient(var(--red),var(--red)) 0 100%/100% 2px no-repeat;padding-bottom:2px}
.drop p{margin:0;font-size:13px;color:var(--ink-3)}
.reel{display:flex;gap:26px;margin-bottom:10px;position:relative}
.reel::after{content:"";position:absolute;left:22px;right:22px;bottom:2px;height:1.5px;background:var(--ink)}
.reel i{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);position:relative;transition:transform 1.2s linear}
.reel i::before{content:"";position:absolute;inset:15px;border-radius:50%;border:1.5px solid var(--ink)}
.reel i::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:1.5px;background:var(--ink);transform:translateX(-50%)}
.drop:hover .reel i,.drop.over .reel i{transform:rotate(360deg)}
.file{display:none;border:1.5px solid var(--ink);background:var(--sheet);padding:18px 20px 16px}
.file.show{display:block}
.file-top{display:flex;align-items:baseline;gap:14px}
.file .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);flex:none}
.file .nm{font:700 19px/1.4 var(--serif);word-break:break-all;flex:1;min-width:0}
.file .x{font-size:14px;flex:none}
.fwave{height:56px;display:flex;align-items:center;gap:2px;margin:14px 0 8px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fwave i{flex:1;background:var(--ink);min-width:1px;transform-origin:center;animation:grow .6s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}}
.file .sz{font-size:12.5px;color:var(--ink-2)}

.row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:18px 0;border-top:1px solid var(--hair)}
.row:first-of-type{border-top:0;padding-top:0}
.rl{font:700 15px/1.4 var(--serif);letter-spacing:.04em;padding-top:10px}
.rl small{display:block;font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.seg,.cards{display:flex;flex-wrap:wrap}
.seg input,.cards input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:10px 20px;border:1.5px solid var(--ink);margin-left:-1.5px;cursor:pointer;font-size:15px;transition:background .15s,color .15s}
.seg label:first-of-type{margin-left:0}
.seg label:hover{background:var(--paper-2)}
.seg input:checked+label{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+label,.cards input:focus-visible+label{outline:2px solid var(--red);outline-offset:2px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:0}
.cards label{display:block;padding:16px 18px 16px 48px;border:1.5px solid var(--ink);margin-left:-1.5px;cursor:pointer;position:relative;transition:background .15s}
.cards label:first-of-type{margin-left:0}
.cards label::before{content:"";position:absolute;left:18px;top:21px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper)}
.cards label b{display:block;font:700 16px/1.5 var(--serif);letter-spacing:.03em}
.cards label span{display:block;font-size:13px;color:var(--ink-3);line-height:1.6;margin-top:2px}
.cards label:hover{background:var(--paper-2)}
.cards input:checked+label{background:var(--sheet);box-shadow:inset 0 -3px 0 var(--ink)}
.cards input:checked+label::before{background:var(--red);border-color:var(--red);box-shadow:inset 0 0 0 3px var(--paper)}

.fader{position:relative;max-width:440px;padding-right:76px}
.fader input{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:6px 0 0;cursor:pointer;
  --p:50%}
.fader input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(var(--ink),var(--ink)) 0 0/var(--p) 100% no-repeat,var(--ink-4)}
.fader input::-moz-range-track{height:2px;background:var(--ink-4)}
.fader input::-moz-range-progress{height:2px;background:var(--ink)}
.fader input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:26px;margin-top:-12px;background:var(--paper);border:1.5px solid var(--ink);border-radius:0;
  box-shadow:inset 0 11px 0 -9.5px var(--paper),inset 0 12.5px 0 -10px var(--red)}
.fader input::-moz-range-thumb{width:12px;height:24px;background:var(--paper);border:1.5px solid var(--ink);border-radius:0}
.fader .ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3);margin:0 0 0;padding:0 1px}
.fader .ticks span{position:relative;padding-top:6px;width:0;display:flex;justify-content:center}
.fader .ticks span::before{content:"";position:absolute;top:0;left:0;width:1px;height:4px;background:var(--ink-3)}
.fader .val{position:absolute;right:0;top:6px;font-size:15px;font-weight:500;border:1.5px solid var(--ink);padding:2px 8px;background:var(--sheet)}

/* checkbox with a stamp tick */
.chk{display:grid;grid-template-columns:30px minmax(0,1fr) 24px;gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--hair);cursor:pointer}
.chk:first-of-type{border-top:0}
.chk.plain{grid-template-columns:30px minmax(0,1fr);padding:8px 0 0;border:0}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .box{width:28px;height:28px;border:1.5px solid var(--ink);display:grid;place-items:center;background:var(--sheet);margin-top:1px;position:relative;transition:border-color .15s}
.chk .box .ico{width:20px;height:20px;stroke:var(--paper);stroke-width:2.6;opacity:0}
.chk input:checked+.box{background:var(--red);border-color:var(--red);box-shadow:inset 0 0 0 2px var(--red),inset 0 0 0 3px rgba(241,236,226,.8);animation:stamp .32s var(--ease) both}
.chk input:checked+.box .ico{opacity:1}
@keyframes stamp{0%{transform:scale(1.6) rotate(-14deg);opacity:0}60%{transform:scale(.92) rotate(-5deg);opacity:1}100%{transform:scale(1) rotate(-4deg)}}
.chk input:focus-visible+.box{outline:2px solid var(--red);outline-offset:3px}
.chk:hover .box{border-color:var(--red)}
.chk b{display:block;font:700 16px/1.55 var(--serif);letter-spacing:.03em}
.chk small{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px;line-height:1.65}
.chk .ix{font-size:12px;color:var(--ink-4);text-align:right;padding-top:4px}

.submit{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0 0;flex-wrap:wrap}
.submit .hint{display:block;font:700 16px/1.5 var(--serif);letter-spacing:.03em}
.submit small{display:block;font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;margin-top:2px}
.bar{height:3px;background:var(--hair);margin-top:18px;display:none}
.bar.show{display:block} .bar i{display:block;height:100%;width:0;background:var(--red);transition:width .2s}
.err{color:var(--red);font-size:14px;margin-top:12px;min-height:1px}

.hist-wrap{margin-top:72px;border-top:3px solid var(--rule);padding-top:22px}
.hist{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hrow{display:grid;grid-template-columns:52px 110px minmax(0,1fr) auto 20px;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair);transition:background .15s}
.hrow:last-child{border-bottom:0}
.hrow:hover{background:var(--hair-2)} .hrow:hover .nm{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hrow .no,.hrow .when{font-size:12.5px;color:var(--ink-3)}
.hrow .nm{font:700 16px/1.4 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .st{font:500 12px var(--mono);letter-spacing:.06em;padding:3px 8px;border:1.5px solid var(--ink-4);color:var(--ink-3)}
.hrow .st[data-s=review]{border-color:var(--red);color:var(--red)}
.hrow .st[data-s=done]{border-color:var(--ink);color:var(--ink)}
.hrow .st[data-s=running],.hrow .st[data-s=queued]{border-color:var(--ink-2);color:var(--ink-2)}
.hrow .ico{width:16px;height:16px;color:var(--ink-3)}

/* job / production log */
.job-h{margin-bottom:34px}
.job-title{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:30px 0 26px}
.job-title h1{font:900 clamp(32px,4.4vw,60px)/1.15 var(--serif);margin:0;letter-spacing:.01em;word-break:break-all}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;border-top:3px solid var(--rule);border-bottom:1px solid var(--rule)}
.facts > div{padding:12px 18px 14px;border-left:1px solid var(--hair)}
.facts > div:first-child{border-left:0;padding-left:0}
.facts dt{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink-3)}
.facts dt small{font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.facts dd{margin:4px 0 0;font:500 19px/1.4 var(--mono)}
.facts > div:nth-child(2) dd,.facts > div:nth-child(4) dd{font:700 19px/1.4 var(--serif);letter-spacing:.04em}
.facts > div:nth-child(5) dd{font-size:15px;padding-top:3px}

.logsheet{margin-bottom:44px}
.ls-h,.track li{display:grid;grid-template-columns:52px 1.1fr 1fr 1fr .8fr 2.4fr;column-gap:20px;align-items:center}
.ls-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:8px 0;border-bottom:1px solid var(--rule)}
.track{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.track li{padding:14px 0 15px;border-bottom:1px solid var(--hair);position:relative;color:var(--ink-3)}
.track li:last-child{border-bottom:0}
.track .c{font-size:13px}
.track .lb{font:700 18px/1.4 var(--serif);letter-spacing:.06em}
.track .stt{display:flex;align-items:center;gap:8px;font-size:12.5px}
.track .stt i{width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%}
.track .t0,.track .du{font-size:13px}
.track .nt{font-size:14px}
.track .pg{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.track .pg i{display:block;height:100%;background:var(--ink);width:0;transition:width .6s var(--ease)}
.track li.done{color:var(--ink)}
.track li.done .pg{display:none}
.track li.done .stt i{background:var(--ink);border-color:var(--ink);border-radius:0;width:9px;height:9px}
.track li.active{color:var(--ink);background:var(--sheet)}
.track li.active .c,.track li.active .stt{color:var(--red)}
.track li.active .stt i{background:var(--red);border-color:var(--red);animation:blink 1s steps(2) infinite}
.track li.active .pg i{background:var(--red)}
.track li.error .stt{color:var(--red)}
.track li.pending .lb{color:var(--ink-3)}

.panel{margin-top:0}
.panel-h{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;border-top:3px solid var(--rule);padding-top:22px;margin-bottom:28px}
.panel-h h2{font:900 clamp(28px,3vw,42px)/1.25 var(--serif);margin:10px 0 8px;letter-spacing:.03em}
.panel-h p{margin:0;color:var(--ink-2);max-width:40em;font-size:15px}
.waiting{display:flex;align-items:center;gap:16px;padding:30px 0;border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);font:700 20px/1.4 var(--serif);letter-spacing:.03em}
.waiting .rec{font:500 11px var(--mono);letter-spacing:.14em;color:var(--paper);background:var(--red);padding:3px 7px}
.meter{display:flex;align-items:flex-end;gap:3px;height:26px}
.meter i{width:5px;background:var(--ink);height:30%;animation:vu 1.1s steps(6) infinite}
.meter i:nth-child(2){animation-delay:-.3s}.meter i:nth-child(3){animation-delay:-.7s}.meter i:nth-child(4){animation-delay:-.15s}
.meter i:nth-child(5){animation-delay:-.5s}.meter i:nth-child(6){animation-delay:-.9s}.meter i:nth-child(7){animation-delay:-.4s;background:var(--red)}
@keyframes vu{0%,100%{height:25%}30%{height:90%}60%{height:50%}80%{height:70%}}
.notice{margin:0 0 24px;padding:12px 16px;border-left:3px solid var(--red);background:var(--sheet);font-size:14px;color:var(--ink-2)}

.segs .pl-h{grid-template-columns:110px minmax(0,1fr) minmax(0,1.15fr)}
.sg{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.15fr);column-gap:40px;padding:20px 0;border-bottom:1px solid var(--hair);position:relative}
#segs .sg:last-child,#done-lines .sg:last-child{border-bottom:0}
.sg .t{display:flex;flex-direction:column;font-size:13px;color:var(--ink-3);padding-top:4px;gap:2px;align-items:flex-start}
.sg .t .to{color:var(--ink-4)} .sg .t .to::before{content:"→ "}
.sg .t em{font-style:normal;margin-top:8px;display:none;transform:rotate(-6deg)}
.sg.edited .t em{display:inline-flex;animation:stamp .32s var(--ease) both}
.sg.edited .t > span:first-child{color:var(--red)}
.sg .e{font:400 20px/1.45 var(--latin);color:var(--ink-2);padding-top:2px}
.zbox{border-left:1px solid var(--hair);padding-left:24px;margin-left:-24px}
.sg textarea{width:100%;resize:none;overflow:hidden;border:0;background:transparent;padding:4px 0 6px;font:500 19px/1.7 var(--serif);letter-spacing:.03em;color:var(--ink);
  border-bottom:1.5px solid transparent;transition:border-color .2s,background .2s;display:block;border-radius:0}
.sg textarea:hover{border-bottom-color:var(--hair)}
.sg textarea:focus{outline:none;border-bottom-color:var(--red);background:var(--sheet)}
.sg textarea::placeholder{color:var(--ink-4)}
.sg .cnt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-4);margin-top:6px}
.sg .cnt button{background:none;border:0;padding:0;font:inherit;color:var(--ink-3);cursor:pointer;display:none}
.sg.edited .cnt button{display:inline;text-decoration:underline;text-underline-offset:3px}
.sg .cnt button:hover{color:var(--red)}
#p-review .submit{border-top:0}

.result{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:30px 0 0}
.result .row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;margin-top:26px;border-top:1px solid var(--hair);flex-wrap:wrap}
.result .lbl{font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
#p-done .notice{margin-top:24px}
#p-done .panel-h .stamp{margin-bottom:10px}
.done-segs{margin-top:44px}
.sg.ro{all:unset;box-sizing:border-box;display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.15fr);column-gap:40px;padding:18px 0;border-bottom:1px solid var(--hair);cursor:pointer;width:100%;position:relative}
.sg.ro .z{font:500 19px/1.7 var(--serif);letter-spacing:.03em}
.sg.ro:hover{background:var(--hair-2)}
.sg.ro::before{content:"";position:absolute;left:-16px;top:18px;bottom:18px;width:3px;background:var(--red);transform:scaleY(0);transition:transform .25s var(--ease)}
.sg.ro.cur::before{transform:none} .sg.ro.cur .t > span:first-child{color:var(--red)}

.danger-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink-2);flex-wrap:wrap}
.danger-row b{display:inline-block;font-size:11px;letter-spacing:.12em;color:var(--ink);margin-right:14px;font-weight:500}
.danger-row #expire{margin-left:8px;color:var(--ink-3)}

/* player */
.player{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:24px;align-items:center}
.pbtn{width:64px;height:64px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .15s}
.pbtn:hover{background:var(--red)} .pbtn:active{transform:scale(.96)}
.pbtn .ico{width:22px;height:22px} .pbtn .play{fill:currentColor;stroke:none;margin-left:3px}
.pbtn .pause{display:none;stroke-width:2.4} .player.playing .pbtn .play{display:none} .player.playing .pbtn .pause{display:block}
.player.playing .pbtn{background:var(--red)}
.wave{position:relative;height:96px;cursor:pointer;min-width:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.wave .bars{position:absolute;inset:8px 0;display:flex;align-items:center;gap:2px}
.wave i{flex:1;min-width:1px;background:rgba(21,20,17,.28);transition:background .12s}
.wave i.h{background:rgba(21,20,17,.5)}
.wave i.on{background:var(--ink)}
.wave .head{position:absolute;top:-6px;bottom:-6px;width:1.5px;background:var(--red);left:0;opacity:0;transition:opacity .2s}
.player.started .wave .head,.player.playing .wave .head{opacity:1}
.ptime{font-size:14px;color:var(--ink-2);white-space:nowrap}
.ptime .sep{margin:0 6px;color:var(--ink-4)}

/* ========== RESPONSIVE ========== */
@media (max-width:1080px){
  :root{--pad:32px}
  .nav{gap:20px}
  .hero-grid{grid-template-columns:1fr}
  .mast{border-right:0;border-bottom:1px solid var(--rule);padding:28px 0 22px;font-size:clamp(140px,34vw,300px)}
  .hero-copy{padding:28px 0 34px}
  .sec-h{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts > div:nth-child(4){border-left:0;padding-left:0}
  .facts > div:nth-child(n+4){border-top:1px solid var(--hair)}
}
@media (max-width:860px){
  :root{--pad:20px}
  body{font-size:15px}
  .nav a.l{display:none}
  .nav a.l[href*="history"]{display:inline}
  .hdr .wrap{height:60px}
  .seal{width:34px;height:34px;font-size:12.5px}
  .dateline .mid{display:none}
  .dateline{font-size:10.5px}
  .mast{font-size:43vw;padding:22px 0 16px}
  .en-claim{font-size:31px}
  .zh-claim{font-size:20px}
  .cta .btn{flex:1}
  .cta{gap:18px}
  .tape{--h:150px}
  .tape-top,.tape-bot{font-size:11px}
  .side{font-size:11px;gap:8px}
  .ruler i:not(.maj){display:none}
  .sec{padding-bottom:64px}
  #sample{padding-top:48px}
  .sec-h{grid-template-columns:1fr;margin-bottom:28px}
  .sec-h .num{font-size:96px;margin-bottom:14px}
  .sec-h > div{grid-template-columns:1fr}
  .sec-h p{margin-top:12px}
  .pl-h{display:none}
  .pl-row{grid-template-columns:1fr;row-gap:6px;padding:16px 0}
  .pl-row::before{left:-12px}
  .pl-row .t{padding-top:0}
  .pl-row .e{font-size:19px}
  .pl-row .z{font-size:18px}
  .steps,.plans,.princ{grid-template-columns:1fr}
  .steps li,.plan{padding:24px 0;border-left:0;border-top:1px solid var(--hair)}
  .steps li:first-child,.plan:first-child{border-top:0}
  .steps .sn{font-size:80px;margin-bottom:10px}
  .plan.hl{padding:24px 20px;margin:0 -20px;border-left:0;border-right:0}
  .plan.hl .stamp{right:20px}
  .princ{gap:18px}
  .faq summary{grid-template-columns:44px minmax(0,1fr) 20px;column-gap:12px;font-size:17px;padding:16px 0}
  .faq .a{padding:0 0 18px 56px}
  .closer{padding:48px 0 56px}
  .closer .btn{width:100%}
  .ftr .wrap{grid-template-columns:auto 1fr}
  .ftr .colophon{grid-column:1/-1;text-align:left}

  .page-h h1{margin-top:22px}
  .intake-grid{grid-template-columns:1fr;border-top:0}
  .intake-side{display:none}
  #f{padding-left:0}
  .block{border-top:3px solid var(--rule)}
  .block-h .n{font-size:44px;min-width:44px}
  .block-h h2{font-size:21px}
  .block-h .opt{display:none}
  .row{grid-template-columns:1fr;gap:10px}
  .rl{padding-top:0;display:flex;align-items:baseline;gap:10px}
  .rl small{margin:0}
  .cards{grid-template-columns:1fr}
  .cards label{margin-left:0;margin-top:-1.5px}
  .cards label:first-of-type{margin-top:0}
  .seg{display:grid;grid-template-columns:repeat(3,1fr)}
  .seg label{text-align:center;padding:10px 6px}
  .chk{grid-template-columns:30px minmax(0,1fr);gap:14px}
  .chk .ix{display:none}
  .submit .btn{width:100%}
  .drop{min-height:200px;padding:24px 16px}
  .hrow{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;column-gap:12px}
  .hrow .no,.hrow .ico{display:none}
  .hrow .when{grid-row:2;grid-column:1}
  .hrow .nm{grid-row:1;grid-column:1}
  .hrow .st{grid-row:1/3;grid-column:2}

  .job-title{margin:22px 0 20px;gap:14px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts > div{border-left:1px solid var(--hair)!important;padding:10px 0 12px 14px!important;border-top:1px solid var(--hair)}
  .facts > div:nth-child(odd){border-left:0!important;padding-left:0!important}
  .facts > div:nth-child(-n+2){border-top:0}
  .facts > div:nth-child(5){grid-column:1/-1}
  .facts dd{font-size:17px}
  .ls-h{display:none}
  .track{border-top:1px solid var(--rule)}
  .track li{grid-template-columns:34px minmax(0,1fr) auto;row-gap:2px;padding:12px 0}
  .track .c{grid-row:1/3}
  .track .lb{grid-column:2;font-size:17px}
  .track .stt{grid-column:3;grid-row:1;justify-self:end}
  .track .t0{display:none}
  .track .du{grid-column:3;grid-row:2;justify-self:end;font-size:12px}
  .track .nt{grid-column:2;grid-row:2;font-size:13px}
  .waiting{font-size:17px;padding:22px 0}
  .segs .pl-h{display:none}
  .sg,.sg.ro{grid-template-columns:1fr;row-gap:8px;padding:16px 0}
  .sg .t{flex-direction:row;gap:10px;align-items:center}
  .sg .t em{margin:0 0 0 auto}
  .sg .e{font-size:18px}
  .zbox{border-left:0;margin:0;padding:0 0 0 12px;border-left:2px solid var(--ink)}
  .sg textarea{font-size:18px}
  .panel-h .btn{width:100%}
  .player{grid-template-columns:52px minmax(0,1fr);gap:14px}
  .pbtn{width:52px;height:52px}
  .ptime{grid-column:1/-1;justify-self:end;margin-top:-6px}
  .wave{height:72px}
  .result .row .btn{width:100%}
  .danger-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- v4 iteration 1 ---- */
.mast-cell{position:relative;border-right:1px solid var(--rule);display:flex;align-items:flex-end}
.mast-cell .mast{border-right:0;padding-top:96px}
.gloss{position:absolute;top:26px;left:0;margin:0;font:400 17px/1.4 var(--latin);color:var(--ink-2)}
.gloss .mono{font-size:12.5px;letter-spacing:.06em;color:var(--red);margin-right:10px}
.gloss i{margin-right:6px;color:var(--ink-3)}
.gloss em{font-style:italic}
.nw{white-space:nowrap}
.en-claim{max-width:12.5em}
.tape .tc{white-space:nowrap}
.player .wcol{min-width:0;display:flex;flex-direction:column}
.player .ruler{margin-top:0;border-top:0;height:26px}
.player .ruler i span{top:11px}
.player{align-items:start}
.player .pbtn{margin-top:16px}
.player .ptime{padding-top:36px}
.wave{border-top:0;border-bottom:1px solid var(--rule)}
.wave .bars{inset:6px 0 0}
#p-review .submit{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--rule);padding:16px 0;z-index:5;margin-top:-1px}
.dateline span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1080px){
  .mast-cell{border-right:0;border-bottom:1px solid var(--rule)}
  .mast-cell .mast{border-bottom:0;padding-top:84px}
}
@media (max-width:860px){
  .dateline{letter-spacing:.04em;gap:12px}
  .gloss{top:18px;font-size:15px}
  .mast-cell .mast{padding-top:64px}
  .tape .wide{display:none}
  .player .pbtn{margin-top:10px}
  .player .ptime{padding-top:0}
  #p-review .submit .btn{width:auto;flex:1}
  #p-review .submit{gap:12px}
}
.side .wide{margin-left:-10px}

/* v5: language pair selector (shared by en + zh) */
.langpair{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.langpair label{display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px}
.langpair label > span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.langpair select{appearance:none;-webkit-appearance:none;font:600 16px/1.2 var(--sans);color:var(--ink);background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23151411' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--rule);border-radius:0;padding:11px 34px 11px 12px;cursor:pointer;width:100%}
.langpair select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.lp-arrow{font:400 24px/1 var(--mono);padding-bottom:10px;color:var(--red)}
/* v5: six facts (language pair added) */
@media (min-width:1081px){.facts{grid-template-columns:repeat(6,minmax(0,1fr))}}
.facts > div:nth-child(5) dd{font-size:19px;padding-top:0}
.facts > div:nth-child(6) dd{font-size:15px;padding-top:3px}
@media (max-width:860px){.facts > div:nth-child(5){grid-column:auto}}

/* language switcher (English / 中文) in the header nav — ink only, current language underlined like the nav hover rule */
.lang{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--sans);white-space:nowrap;padding-left:22px;border-left:1px solid var(--hair);height:22px}
.lang a{position:relative;padding:4px 0;color:var(--ink-3);transition:color .2s}
.lang a:hover{color:var(--ink)}
.lang a.on{color:var(--ink);font-weight:600}
.lang a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink)}
.lang .sl{color:var(--ink-4);font-weight:400}
@media (max-width:860px){.lang{padding-left:0;border-left:0;gap:5px;font-size:12.5px}}
.nav a.l,.nav .btn{white-space:nowrap}
/* phones: header holds seal + My jobs + English/中文 + Upload; the wordmark and the button arrow give way */
@media (max-width:480px){.hdr .brand .wm{display:none}.nav{gap:12px}.nav .btn.sm .arrow{display:none}.lang{font-size:12px;gap:4px}}