:root { color-scheme: light; --portal-bg: #f7f9fc; --portal-surface: #fff; --portal-text: #17243b; --portal-muted: #5b6b82; --portal-line: #e2e8f1; --portal-accent: #245acb; --portal-accent-soft: #edf3ff; --portal-header: rgba(247,249,252,.96); }
html[data-theme="dark"] { color-scheme: dark; --portal-bg: #121a28; --portal-surface: #1b2638; --portal-text: #e9eef7; --portal-muted: #a7b5ca; --portal-line: #33425a; --portal-accent: #9bbcff; --portal-accent-soft: #253859; --portal-header: rgba(18,26,40,.96); }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body.pfxu-portal { margin: 0; background: var(--portal-bg); color: var(--portal-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.65; }
.pfxu-portal *, .pfxu-portal *::before, .pfxu-portal *::after { box-sizing: border-box; }
.pfxu-portal a { color: inherit; text-decoration: none; }
.pfxu-portal a:hover { color: var(--portal-accent); }
.pfxu-portal :focus-visible { outline: 3px solid var(--portal-accent); outline-offset: 4px; }
.portal-skip { position: absolute; top: 10px; left: 12px; padding: 10px 16px; background: var(--portal-surface); transform: translateY(-150%); z-index: 20; }
.portal-skip:focus { transform: translateY(0); }
.portal-header { position: sticky; top: 0; z-index: 10; background: var(--portal-header); border-bottom: 1px solid var(--portal-line); backdrop-filter: blur(12px); }
.portal-header-inner { max-width: 1160px; padding: 18px 30px; margin: auto; display: flex; align-items: center; gap: 24px; }
.portal-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.portal-brand strong { letter-spacing: .07em; font-size: 21px; font-weight: 750; color: var(--portal-accent); }
.portal-brand span { font-size: 14px; font-weight: 650; }
.portal-nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-size: 14px; }
.portal-nav a { padding: 5px 0; white-space: nowrap; }
.portal-nav a[aria-current="page"] { color: var(--portal-accent); font-weight: 700; }
.portal-nav-tools { font-weight: 650; }
.portal-theme { font: inherit; font-size: 13px; color: var(--portal-muted); background: transparent; border: 1px solid var(--portal-line); border-radius: 8px; padding: 6px 10px; white-space: nowrap; cursor: pointer; }
.portal-main { max-width: 1160px; padding: 0 30px; margin: auto; }
.portal-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); align-items: center; gap: 60px; padding: 64px 0 58px; }
.portal-eyebrow { margin: 0 0 12px; font-size: 13px; color: var(--portal-muted); letter-spacing: .06em; }
.portal-intro h1 { margin: 0; font-size: clamp(36px,4vw,48px); line-height: 1.28; font-weight: 750; letter-spacing: -.035em; }
.portal-lead { margin: 21px 0 18px; font-size: 16px; line-height: 1.9; color: var(--portal-muted); }
.portal-text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; color: var(--portal-accent) !important; }
.portal-clock { padding: 25px 28px; background: var(--portal-accent-soft); border-radius: 16px; }
.portal-clock-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 650; }
.portal-clock-zone { color: var(--portal-muted); font-size: 12px; font-weight: 500; }
.portal-clock-time { display: block; margin: 12px 0 4px; font-size: clamp(31px,3.2vw,39px); font-weight: 700; line-height: 1.4; letter-spacing: .015em; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.portal-clock-date { margin: 0; font-size: 13px; color: var(--portal-muted); }
.portal-clock-beijing { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-top: 1px solid var(--portal-line); margin-top: 20px; padding-top: 15px; font-size: 13px; color: var(--portal-muted); }
.portal-clock-beijing time { color: var(--portal-text); font-size: 15px; font-variant-numeric: tabular-nums; }
.portal-clock-note { margin: 8px 0 0; font-size: 12px; color: var(--portal-muted); }
.portal-section { padding: 0 0 45px; }
.portal-section-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.portal-section-heading .portal-eyebrow { margin-bottom: 4px; }
.portal-section-heading h2 { font-size: 25px; letter-spacing: -.02em; margin: 0; font-weight: 700; }
.portal-project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.portal-project { min-width: 0; padding: 28px; border: 1px solid var(--portal-line); border-radius: 14px; background: var(--portal-surface); display: flex; flex-direction: column; }
.portal-project-category { color: var(--portal-muted); font-size: 12px; margin: 0 0 8px; letter-spacing: .04em; }
.portal-project h3 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.015em; }
.portal-project-description { color: var(--portal-muted); font-size: 14px; margin: 12px 0 23px; flex: 1; line-height: 1.85; }
.portal-project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 13px; }
.portal-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--portal-accent-soft); color: var(--portal-accent) !important; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 650; line-height: 1.6; }
.portal-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.portal-action-note { color: var(--portal-muted); font-size: 12px; }
.portal-post { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--portal-line); font-size: 15px; }
.portal-post time { flex-shrink: 0; color: var(--portal-muted); font-size: 13px; }
.portal-about { border-top: 1px solid var(--portal-line); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px 0 42px; }
.portal-about h2 { margin: 0; font-size: 19px; line-height: 1.7; font-weight: 650; }
.portal-about p:last-child { font-size: 14px; color: var(--portal-muted); margin: 0; line-height: 1.9; }
.portal-footer { max-width: 1100px; margin: auto; border-top: 1px solid var(--portal-line); padding: 24px 0 30px; font-size: 12px; color: var(--portal-muted); }
.portal-footer > div:first-child { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.portal-footer nav, .portal-registration { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.portal-registration { margin-top: 12px; font-size: 11px; }
.portal-tools-intro { padding: 52px 0 32px; max-width: 760px; }
.portal-tools-intro h1 { font-size: 36px; line-height: 1.35; font-weight: 750; margin: 0 0 16px; }
.portal-tools-intro .portal-lead { margin: 0; }
.portal-tools-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-bottom: 45px; }
.portal-tool-group { min-width: 0; background: var(--portal-surface); border: 1px solid var(--portal-line); border-radius: 14px; padding: 25px 28px; }
.portal-tool-group h2 { font-size: 20px; font-weight: 700; margin: 0 0 5px; }
.portal-tool-group > p { margin: 0 0 14px; color: var(--portal-muted); font-size: 13px; }
.portal-tool-link { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--portal-line); padding: 14px 0; }
.portal-tool-link strong { display: block; font-size: 14px; font-weight: 650; }
.portal-tool-link small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--portal-muted); }
.portal-tool-link > span:last-child { color: var(--portal-accent); }
.portal-tool-link:last-child { padding-bottom: 0; }
.portal-tools-note { font-size: 13px; color: var(--portal-muted); border-top: 1px solid var(--portal-line); padding: 20px 0 35px; }
@media (max-width: 960px) { .portal-brand span { display: none; } .portal-header-inner { gap: 18px; } .portal-nav { gap: 18px; } .portal-intro { gap: 32px; } .portal-footer { margin: 0 30px; } }
@media (max-width: 700px) { html { scroll-padding-top: 140px; } .portal-header-inner { padding: 14px 20px; flex-wrap: wrap; gap: 8px 16px; } .portal-brand { order: 0; } .portal-theme { order: 1; margin-left: auto; min-height: 40px; } .portal-nav { order: 2; flex-basis: 100%; margin: 0; justify-content: space-between; gap: 4px 10px; } .portal-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; } .portal-main { padding: 0 20px; } .portal-intro { grid-template-columns: 1fr; gap: 28px; padding: 35px 0; } .portal-intro h1 br { display: none; } .portal-intro h1 { font-size: 35px; max-width: 420px; } .portal-lead { font-size: 15px; } .portal-desktop-break { display: none; } .portal-clock { padding: 22px; } .portal-clock-time { font-size: 36px; } .portal-project-grid, .portal-tools-grid { grid-template-columns: 1fr; gap: 16px; } .portal-project, .portal-tool-group { padding: 23px; } .portal-project-actions a { min-height: 44px; display: inline-flex; align-items: center; } .portal-section-heading { margin-bottom: 18px; } .portal-section-heading h2 { font-size: 23px; } .portal-about { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; } .portal-footer { margin: 0 20px; } .portal-post { flex-wrap: wrap; gap: 6px; } .portal-tools-intro { padding-top: 35px; } .portal-tools-intro h1 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }