/* 白纸黑字：浅灰白底、墨色字，红色只用于关键数字。
   --green、--blue 是旧名，现在指界面强调色（墨色）；图表与图例用 --data-*，界面元素不要用。
   --body 是长段正文色：比 --ink 略浅，比 --muted 深得多，久读不累。
   面板与底色同色，只用细线框出，页面上不出现比底色更亮的色块。 */
:root{--paper:#f2f2ee;--bg:#f2f2ee;--surface:#f2f2ee;--white:#f2f2ee;--ink:#1f1f1d;--body:#33332f;--muted:#5c5c58;--green:#1f1f1d;--blue:#1f1f1d;--accent:#b3291f;--lime:#e6e6e1;--line:#dcdcd6;--line-dark:#c9c9c3;--soft:#e9e9e4;--mint:#e9e9e4;--rust:#b3291f;--data-green:#596b4e;--data-blue:#5b7186;--data-amber:#a8802f;--data-red:#ad624c;--data-gray:#8f907f;--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--pf-serif:var(--font)}
html{scroll-padding-top:90px}.portfolio-case{background:var(--paper);font-family:var(--font);color:var(--ink);font-size:16px}.portfolio-case::before{display:none}.portfolio-case h1,.portfolio-case h2{font-family:var(--font);font-weight:600}.portfolio-case h1{font-size:36px;line-height:1.35;letter-spacing:0}.portfolio-case button,.portfolio-case input,.portfolio-case select{font-family:var(--font)}.portfolio-case .wrap{width:min(1160px,calc(100% - 80px));max-width:1160px;margin-inline:auto;padding-inline:0}.portfolio-case .hero{padding-top:57px}.portfolio-case .section{border-color:var(--line)}.portfolio-case .skip:focus{z-index:101}.portfolio-case .eyebrow,.portfolio-case .kicker{color:var(--muted)}.portfolio-case button:focus-visible,.portfolio-case a:focus-visible,.portfolio-case summary:focus-visible{outline:3px solid var(--rust);outline-offset:4px}.portfolio-case ::selection{background:var(--lime);color:var(--ink)}
.pf-topbar{background:var(--paper);border-bottom:1px solid var(--line);color:var(--ink);font:14px/1.7 var(--font);position:relative;z-index:40}.pf-bar{width:min(1160px,calc(100% - 80px));min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:auto}.pf-brand{display:flex;gap:12px;align-items:center;text-decoration:none!important;font-weight:600;font-size:15px;color:var(--ink)}.pf-mark{display:grid;place-items:center;flex:none;width:34px;height:34px;background:var(--ink);color:var(--paper);border-radius:50%;font:20px/1 var(--pf-serif)}.pf-title{display:block;font-size:12px;color:var(--muted);font-weight:400}.pf-back{display:flex;gap:9px;align-items:center;text-decoration:none!important;color:var(--green);font-size:14px;white-space:nowrap}.pf-localnav{width:min(1160px,calc(100% - 80px));margin:auto;display:flex;gap:27px;align-items:center;overflow-x:auto;white-space:nowrap;padding:11px 0;border-top:1px solid var(--line);font-size:13px;scrollbar-width:thin}.pf-localnav a{text-decoration:none!important;color:var(--muted)}.pf-localnav a:hover{color:var(--green)}.pf-next{width:min(1160px,calc(100% - 80px));margin:45px auto 35px;border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:30px;font:14px/1.7 var(--font);color:var(--ink)}.pf-next a{text-decoration:none}.pf-next a:last-child{text-align:right}.pf-next span{font-size:12px;color:var(--muted);display:block;margin-bottom:7px}.pf-next strong{font-size:17px;font-weight:500}.pf-next a:hover strong{text-decoration:underline;text-underline-offset:6px}.pf-next svg{width:17px;height:17px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7}.portfolio-demo main{width:min(1280px,calc(100% - 48px));margin:auto}.portfolio-demo h1{font-size:36px}.portfolio-demo .pf-localnav{display:none}
@media(max-width:900px){.portfolio-case .wrap,.pf-bar,.pf-localnav,.pf-next{width:calc(100% - 48px)}.pf-localnav{gap:22px}.portfolio-case .hero{padding-top:40px}}
@media(max-width:640px){.portfolio-case .wrap,.pf-bar,.pf-localnav,.pf-next{width:calc(100% - 36px)}.pf-bar{min-height:73px;gap:12px}.pf-brand{font-size:14px;gap:9px}.pf-mark{width:30px;height:30px}.pf-title{font-size:11px}.pf-back{font-size:13px}.pf-localnav{font-size:13px;padding:10px 0;gap:22px}.portfolio-case h1{font-size:30px;line-height:1.4;letter-spacing:0}.portfolio-case .hero{padding-top:34px}.pf-next{margin-block:35px 25px;gap:20px}.pf-next strong{font-size:15px}.portfolio-demo main{width:calc(100% - 24px)}}.case-financial-bp-demo .grid-2>*{min-width:0}.pf-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}.case-financial-bp-input .pf-table-scroll table{min-width:1080px}.case-financial-bp-input .title{flex-wrap:wrap;gap:12px}.case-financial-bp-input .tabs{flex-wrap:wrap;height:auto}.case-financial-bp-input .file-head{background:var(--green)}
@media(max-width:760px){.case-financial-bp-demo .bar-row{grid-template-columns:100px minmax(40px,1fr) 70px;gap:8px}.case-financial-bp-input main{padding-inline:0}.case-financial-bp-input .title h1{font-size:27px}.case-financial-bp-input .file-head{font-size:16px}.case-financial-bp-input .tabs{padding-inline:5px}.case-financial-bp-input .tabs span{padding:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Plain project introductions with a consistent, modest heading hierarchy. */
.portfolio-case:not(.portfolio-demo) h2{font-size:27px;line-height:1.5;letter-spacing:0}.portfolio-case .hero p.intro,.portfolio-case .hero p.lede{font-size:17px;line-height:1.95;max-width:46em;margin-top:16px}
@media(max-width:640px){.portfolio-case:not(.portfolio-demo) h2{font-size:23px}.portfolio-case .hero p.intro,.portfolio-case .hero p.lede{font-size:16px}}.portfolio-case .hero .eyebrow,.portfolio-case .hero .kicker{font-size:12px;letter-spacing:1px}

/* Website controls follow the homepage; embedded reports keep their data colours. */
.portfolio-case .primary,.portfolio-case .btn,.portfolio-case a.button{min-height:44px;border-radius:6px;font-family:var(--font);}
.portfolio-case .primary,.portfolio-case .btn.primary,.portfolio-case a.button{background:var(--ink);border-color:var(--ink);color:var(--white);}
.portfolio-case .primary:hover,.portfolio-case .btn.primary:hover,.portfolio-case a.button:hover{background:#3a3a36;border-color:#3a3a36;}
.portfolio-case .text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;}
.portfolio-case .gallery-btn,.portfolio-case .screen-tab,.portfolio-case .viewer-close,.portfolio-case #close-lightbox{font-family:var(--font);min-height:44px;}
.portfolio-case dialog{border-color:var(--line-dark);border-radius:2px;}

/* 三个看板页的图表直接读 --green、--blue、--accent，这里还回数据色；页面底色、文字、线条照常跟随上面的色板。 */
.portfolio-demo{--green:var(--data-green);--blue:var(--data-green);--accent:var(--data-red);--rust:var(--data-red)}