/* Scoped soft-neumorphic public profile pages.
 * Kept separate from Fluid so article styles and blog components stay intact.
 */
.np {
  --np-surface: #edf2f9;
  --np-text: #26374e;
  --np-muted: #687a91;
  --np-accent: #648dd3;
  --np-border: rgba(255,255,255,.75);
  --np-outer: 9px 9px 22px rgba(166,181,203,.37), -9px -9px 22px rgba(255,255,255,.97);
  --np-inset: inset 4px 4px 10px rgba(166,181,203,.30), inset -4px -4px 10px rgba(255,255,255,.93);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft Yahei", sans-serif;
  color: var(--np-text);
  background: var(--np-surface);
  padding: clamp(12px,3.2vw,28px);
  border-radius: 28px;
  margin: 12px auto 30px;
}
.np *, .np *::before, .np *::after { box-sizing: border-box; }
.np h1,.np h2,.np h3,.np p { margin-top: 0; }
.np p { line-height: 1.86; }
.np h1,.np h2,.np h3 { color: var(--np-text); }
.np strong { color: var(--np-text); font-weight: 750; }
.np a { text-decoration: none !important; }
.np a:focus-visible { outline: 3px solid var(--np-accent); outline-offset: 4px; }
.np-card {
  min-width: 0;
  border-radius: 26px;
  padding: clamp(18px,3vw,27px);
  background: var(--np-surface);
  border: 1px solid var(--np-border);
  box-shadow: var(--np-outer);
}
.np-grid { display:grid; gap:22px; margin-top:22px; }
.np-grid-story { grid-template-columns: 1.12fr .88fr; }
.np-grid-meters { grid-template-columns: 1fr 1fr; }
.np-grid-map { grid-template-columns: .91fr 1.09fr; }
.np-kicker {
  font-size: .72rem; letter-spacing: .14em; line-height:1.45;
  text-transform: uppercase; color: var(--np-accent); font-weight: 800;
}
.np-live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#64c4ab; margin-right:8px; box-shadow:0 0 0 4px rgba(100,196,171,.14); }
.np-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(205px,.7fr); gap:24px; align-items:center; overflow:hidden; }
.np-hero-copy { padding: 4px 0 6px; }
.np-hero h1 { font-size:clamp(2rem,4vw,2.85rem); font-weight:850; letter-spacing:-.04em; line-height:1.25; margin:15px 0; }
.np-hero h1 span { color: var(--np-accent); display:inline-block; }
.np-lead { color:#3f536b; font-size:clamp(1.03rem,2vw,1.18rem); font-weight:500; line-height:1.8; margin-bottom:9px; }
.np-description { font-size:.94rem; color:var(--np-muted); max-width:570px; margin-bottom:17px; }
.np-tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.np-tags > span {
  font-size:.77rem; line-height:1.3; color:#547089; font-weight:650;
  padding:7px 11px; border-radius:999px;
  box-shadow:4px 4px 9px rgba(166,181,203,.29), -4px -4px 9px rgba(255,255,255,.85);
}
.np-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:21px; }
.np-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:#46617e !important; font-size:.85rem; font-weight:750;
  padding:10px 15px; border-radius:13px; min-height:41px;
  background:var(--np-surface);
  box-shadow:5px 5px 12px rgba(166,181,203,.33), -5px -5px 12px rgba(255,255,255,.9);
  transition:transform .2s ease, box-shadow .2s ease;
}
.np-btn-primary { background:#668fd4 !important; color:#fff !important; box-shadow:4px 5px 11px rgba(101,140,202,.23), -4px -4px 10px rgba(255,255,255,.65); }
.np-btn:hover { transform:translateY(-2px); }
.np-btn:active { transform:translateY(0); box-shadow:var(--np-inset); }
.np-identity {
  min-width:0; padding:22px 15px 18px; border-radius:23px;
  box-shadow:var(--np-inset); text-align:center;
  background:linear-gradient(156deg,rgba(255,255,255,.28),rgba(214,227,244,.28));
}
.np-avatar-wrap { width:124px; height:124px; margin:4px auto 17px; padding:6px; border-radius:32px; box-shadow:var(--np-outer); }
.np-avatar-wrap img { display:block; width:100%; height:100%; object-fit:cover; border-radius:26px; }
.np-identity-name {font-weight:850; font-size:1.3rem; letter-spacing:-.01em; }
.np-identity-name span { color:#dfa971; font-size:.88rem; vertical-align:top; }
.np-identity-title { color:var(--np-accent); font-size:.82rem; font-weight:750; margin:5px 0 12px; }
.np-identity-detail {color:var(--np-muted);font-size:.85rem;line-height:1.8;}
.np-identity-detail small {font-size:.75rem;}
.np-online { display:inline-flex;align-items:center;gap:8px; margin-top:16px; padding:8px 11px; font-size:.72rem;color:#567765;border-radius:99px;background:rgba(97,189,147,.11); }
.np-online span {width:7px;height:7px;border-radius:50%;background:#61bd93;}
.np-section-top { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:12px; }
.np-deco { color:#8caadf; font-size:2rem; line-height:1; font-weight:300; }
.np-section-symbol { color:#7ea2db; font-size:1.8rem; line-height:1; }
.np-tint-purple { color:#a68de5 !important; }
.np-tint-green { color:#67b59b !important; }
.np-peach { color:#efa77e; }
.np-pink { color:#de97b4; }
.np h2 { font-size:clamp(1.18rem,2.4vw,1.5rem); line-height:1.35; margin:0 0 15px; letter-spacing:-.015em; font-weight:850; }
.np h2 span { font-size:.81rem; font-weight:650; color:#8d9db0; margin-left:7px; letter-spacing:0; }
.np-story p {color:var(--np-muted);font-size:.92rem; margin:0 0 11px;}
.np-story p:last-child {margin-bottom:0;}
.np-current-list {display:grid;gap:10px;}
.np-current-list > div {display:flex;gap:13px;align-items:center;min-width:0;padding:12px;border-radius:16px;box-shadow:var(--np-inset);}
.np-current-list strong {display:block;font-size:.92rem;}
.np-current-list small {display:block;color:var(--np-muted);font-size:.76rem;line-height:1.6;margin-top:3px;}
.np-mini-icon {display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:12px;background:rgba(110,158,219,.15);color:#6895d3;font-weight:800;font-size:1.2rem;}
.np-section-desc {font-size:.82rem;color:var(--np-muted);line-height:1.8;margin-bottom:20px !important;}
.np-meters {display:grid;gap:18px;}
.np-meter-item {min-width:0;}
.np-meter-head {display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px;}
.np-meter-head strong {font-size:.9rem;}
.np-meter-head span {font-size:.77rem;color:var(--np-muted);}
.np-meter-track {height:12px;border-radius:99px;background:var(--np-surface);box-shadow:var(--np-inset);padding:2px;overflow:hidden;}
.np-meter-track i {display:block;height:100%;border-radius:99px;width:var(--np-fill);background:linear-gradient(90deg,var(--np-meter),color-mix(in srgb,var(--np-meter) 65%,white));box-shadow:0 0 10px color-mix(in srgb,var(--np-meter) 24%,transparent);}
.np-timeline-list {position:relative; padding-left:20px; margin:19px 0 0;}
.np-timeline-list::before {content:"";position:absolute;left:4px;top:10px;bottom:15px;width:2px;border-radius:4px;background:linear-gradient(#83a5dd,#9ed0bc,#dfb0a5);}
.np-timeline-entry {position:relative;display:grid;gap:5px;margin-bottom:22px;}
.np-timeline-entry:last-child {margin-bottom:0;}
.np-timeline-entry::before {content:"";position:absolute;left:-20px;top:7px;width:10px;height:10px;background:#78a0da;border:3px solid var(--np-surface);border-radius:50%;box-shadow:0 0 0 2px #a5c0e6;}
.np-timeline-entry time, .np-timeline-next {font-size:.73rem;color:#638fd0;font-weight:850;letter-spacing:.09em;}
.np-timeline-entry strong {display:block;font-size:.91rem;margin-top:3px;}
.np-timeline-entry p {font-size:.79rem;line-height:1.7;color:var(--np-muted);margin:5px 0 0;}
.np-map-frame {background:linear-gradient(153deg,#e5edf7,#f0f5fb);box-shadow:var(--np-inset);padding:8px 8px 12px;border-radius:20px;}
.np-map-canvas {position:relative;width:100%;height:clamp(240px,31vw,325px);min-height:240px;}
.np-map-placeholder {position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6684ad;text-align:center;pointer-events:none;}
.np-map-placeholder > span {font-size:2rem;}
.np-map-placeholder p {font-size:.83rem;margin:4px 0;}
.np-map-placeholder small {font-size:.77rem;}
.np-map-legend {display:flex;align-items:center;gap:8px;justify-content:center;margin:0 auto;color:#55687e;font-size:.86rem;}
.np-map-legend small {color:#8392a4;}
.np-pin {width:10px;height:10px;border-radius:50%;background:#ef8b71;box-shadow:0 0 0 5px rgba(239,139,113,.15);}
.np-map-footnote {font-size:.67rem;color:#98a5b5;margin-top:12px;line-height:1.7;}
.np-end {margin-top:22px;background:linear-gradient(126deg,var(--np-surface),#e5edf9);}
.np-end p {font-size:.92rem;color:var(--np-muted);}
.np-news {margin-top:22px;}
.np-news-entry {display:flex;gap:15px;align-items:baseline;margin-top:13px;padding:13px 16px;box-shadow:var(--np-inset);border-radius:14px;font-size:.83rem;color:var(--np-muted);}
.np-news-entry time {flex:none;color:var(--np-accent);font-weight:800;}
.np-projects-hero {margin-bottom:22px;min-height:225px;background:radial-gradient(circle at 85% 15%,rgba(142,169,233,.17),transparent 31%),var(--np-surface);}
.np-projects-hero h1 {margin:13px 0;font-size:clamp(1.65rem,3.5vw,2.4rem);font-weight:850;line-height:1.38;letter-spacing:-.045em;}
.np-projects-hero h1 span {font-size:.82em;color:var(--np-accent);}
.np-projects-hero p {color:var(--np-muted);max-width:660px;font-size:.92rem;}
.np-project-grid {display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.np-work-card {padding:12px;display:flex;flex-direction:column;overflow:hidden;}
.np-work-visual {position:relative;min-height:205px;border-radius:20px;display:grid;place-items:center;overflow:hidden;box-shadow:var(--np-inset);}
.np-work-site {background:linear-gradient(135deg,#dbe7fa,#e5f1f0);}
.np-browser {width:80%;max-width:290px;height:162px;border-radius:14px 14px 9px 9px;background:#fafdff;box-shadow:9px 14px 24px rgba(76,103,142,.17);overflow:hidden;transform:rotate(-4deg);}
.np-browser-bar {height:29px;display:flex;gap:5px;align-items:center;padding:0 10px;background:#e6eef7;}
.np-browser-bar i {width:7px;height:7px;border-radius:50%;background:#f3b7a5;}
.np-browser-bar i:nth-child(2){background:#f2d2a0;}
.np-browser-bar i:nth-child(3){background:#a8d5c8;}
.np-browser-bar b {margin-left:auto;font-size:9px;font-weight:650;color:#92a2b3;}
.np-browser-content {padding:22px 19px;}
.np-visual-small {display:block;color:#8ba2c4;font-size:9px;letter-spacing:.1em;}
.np-browser-content > strong {display:block;margin-top:12px;font-size:1.4rem;color:#5374a2;}
.np-browser-blocks {display:flex;gap:7px;margin-top:19px;}
.np-browser-blocks i {display:block;height:12px;border-radius:6px;background:#d6e5f4;flex:1;}
.np-browser-blocks i:nth-child(2) {background:#d2eadf;}
.np-work-slide {background:linear-gradient(135deg,#e5e2f5,#f7e7e1);}
.np-slide-back {position:absolute;width:57%;height:150px;border-radius:14px;background:#c6c7ee;transform:translate(23px,8px) rotate(8deg);box-shadow:8px 9px 16px rgba(94,90,149,.15);}
.np-slide-front {position:relative;width:63%;min-height:158px;padding:20px;border-radius:14px;background:#fbfaff;transform:rotate(-5deg);box-shadow:7px 11px 23px rgba(94,90,149,.15);}
.np-slide-front span {font-size:9px;letter-spacing:.1em;color:#9b98c1;}
.np-slide-front strong {display:block;margin-top:17px;font-size:1.25rem;line-height:1.35;color:#7775b6;}
.np-slide-bars {display:flex;gap:5px;align-items:flex-end;height:20px;margin-top:10px;}
.np-slide-bars i {display:block;width:17%;height:35%;border-radius:3px;background:#b1a9ea;}
.np-slide-bars i:nth-child(2){height:95%;background:#e1b5b3;}
.np-slide-bars i:nth-child(3){height:60%;background:#a0c9d4;}
.np-slide-bars i:nth-child(4){height:78%;}
.np-work-body {padding:16px 12px 13px;display:flex;flex:1;flex-direction:column;}
.np-work-heading {display:flex;justify-content:space-between;gap:10px;align-items:center;}
.np-work-status {flex:none;padding:5px 10px;border-radius:999px;font-size:.69rem;color:#48846a;background:#dceee5;font-weight:750;}
.np-work-body h2 {margin-top:13px;margin-bottom:12px;}
.np-work-body p {font-size:.85rem;color:var(--np-muted);min-height:85px;}
.np-work-tech {margin:auto 0 12px;}
.np-work-body .np-actions {margin-top:10px;}
.np-process {margin-top:22px;}
.np-process-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
.np-process-step {border-radius:18px;padding:18px 13px;box-shadow:var(--np-inset);min-width:0;}
.np-process-num {display:block;font-size:.83rem;color:#7c9bd2;font-weight:800;margin-bottom:9px;}
.np-process-step strong {display:block;font-size:.97rem;}
.np-process-step small {display:block;margin-top:6px;color:var(--np-muted);line-height:1.6;font-size:.76rem;}
.np-projects-footer {margin-top:22px;}
.np-projects-footer h2 {margin-top:13px;}
.np-projects-footer p {font-size:.86rem;color:var(--np-muted);}
@media (prefers-reduced-motion:reduce) {.np-btn {transition:none;} .np-btn:hover{transform:none;}}
@media (max-width:810px) {
  .np-hero {grid-template-columns:1fr;}
  .np-identity {max-width:360px;margin:0 auto;width:100%;}
  .np-grid-story,.np-grid-map {grid-template-columns:1fr;}
}
@media (max-width:650px) {
  .np {padding:12px;border-radius:21px;}
  .np-card {border-radius:20px;padding:18px;}
  .np-grid,.np-project-grid {gap:16px;}
  .np-grid-meters,.np-project-grid {grid-template-columns:1fr;}
  .np-about .np-hero h1 {font-size:1.95rem;}
  .np h2 span {display:inline-block; margin-top:3px;}
  .np-work-visual {min-height:185px;}
  .np-map-canvas {height:245px;}
  .np-process-grid {grid-template-columns:1fr;}
  .np-news-entry {flex-direction:column;gap:7px;}
}
@media (max-width:370px) {
  .np-actions .np-btn {width:100%;}
  .np-hero h1 {font-size:1.65rem !important;}
  .np-identity {max-width:100%;}
  .np-card {padding:15px;}
}
html[data-user-color-scheme="dark"] .np,
html[data-theme="dark"] .np {
  --np-surface:#263242;
  --np-text:#e5edf7;
  --np-muted:#b3c1d3;
  --np-accent:#9cbefa;
  --np-border:rgba(255,255,255,.055);
  --np-outer:8px 8px 18px rgba(8,15,26,.50), -7px -7px 17px rgba(64,79,99,.25);
  --np-inset:inset 5px 5px 11px rgba(4,11,24,.5),inset -5px -5px 11px rgba(65,79,104,.2);
}
html[data-user-color-scheme="dark"] .np .np-lead,
html[data-theme="dark"] .np .np-lead {color:#d8e5f2;}

/* About: public travel-footprint list and compact, accessible map controls */
.np-map-card .np-map-canvas { height: clamp(290px, 38vw, 405px); }
.np-map-card .np-section-desc { margin-bottom: 12px !important; }
.np-pin-trip { background:#629bd3; box-shadow:0 0 0 5px rgba(98,155,211,.13); margin-left:13px; }
.np-map-places { margin-top:15px; display:grid; gap:10px; }
.np-map-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 2px; }
.np-map-toolbar strong { font-size:.87rem; }
.np-map-reset { cursor:pointer; border:0; border-radius:11px; padding:8px 12px; font-size:.76rem; font-weight:750; background:#dce8f7; color:#5279b3; }
.np-map-group { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start; gap:10px; }
.np-map-province { font-size:.75rem; padding-top:7px; color:var(--np-muted); font-weight:800; }
.np-map-city-buttons { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.np-map-city { cursor:pointer; padding:7px 11px; font-size:.76rem; border:1px solid rgba(164,186,219,.27); border-radius:99px; color:#55708d; background:rgba(242,247,254,.7); transition:background .15s ease,box-shadow .15s ease; }
.np-map-city:hover,.np-map-city:focus-visible { background:#dbe8f9; }
.np-map-city.is-active { background:#6092d0; color:#fff; box-shadow:0 3px 10px rgba(83,132,202,.24); }
.np-map-city-current { color:#c56e56; background:#f9e7de; font-weight:800; }
.np-map-city-current.is-active { background:#e98a6f; color:#fff; }
.np-map-selection { padding:11px 13px; border-radius:12px; font-size:.78rem; color:var(--np-muted); box-shadow:var(--np-inset); min-height:42px; line-height:1.6; }
@media(max-width:650px) {
  .np-map-card .np-map-canvas { height:315px; }
  .np-map-group { grid-template-columns:38px minmax(0,1fr); gap:7px; }
  .np-map-city { padding:7px 9px; }
}

/* Compact expandable travel locations and fast native Canvas chart. */
.np-map-native {display:block;width:100%;height:100%;border-radius:14px;touch-action:pan-y;}
.np-map-places {display:block;margin-top:9px;border-radius:15px;padding:0;background:rgba(230,239,251,.46);box-shadow:var(--np-inset);}
.np-map-places > summary {list-style:none;cursor:pointer;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--np-text);}
.np-map-places > summary::-webkit-details-marker {display:none;}
.np-map-places > summary strong {font-size:.82rem;}
.np-map-toggle-label {font-size:.72rem;color:var(--np-accent);font-weight:700;}
.np-map-places[open] .np-map-toggle-label {font-size:0;}
.np-map-places[open] .np-map-toggle-label::after {content:'收起清单 ▴';font-size:.72rem;}
.np-map-compact-actions {text-align:right;padding:2px 11px 5px;}
.np-map-chip-grid {display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:3px 10px 10px;}
.np-map-city {padding:5px 9px;font-size:.71rem;line-height:1.35;}
.np-map-places .np-map-selection {margin:0 10px 11px;padding:7px 9px;min-height:auto;font-size:.73rem;}
.np-map-card .np-map-canvas {height:clamp(260px,34vw,360px);}
.np-map-frame {padding:6px 5px 7px;}
@media(max-width:650px){.np-map-card .np-map-canvas {height:275px;}.np-map-places > summary {padding:10px 11px;}}

/* Project 03: themed miniature API playground */
.np-work-api{background:linear-gradient(135deg,#e2e8fb,#e6f0fb,#dfeee9);}
.np-api-mini{width:84%;height:162px;max-width:320px;background:#f8fbff;border-radius:14px;overflow:hidden;box-shadow:10px 12px 23px rgba(83,103,156,.2);transform:rotate(-3deg);}
.np-api-mini-head{height:30px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#e5ebf8;}
.np-api-light{width:7px;height:7px;border-radius:50%;background:#eab5b3;}
.np-api-light:nth-child(2){background:#ebd5a3}.np-api-light:nth-child(3){background:#a4d8c4}
.np-api-mini-head small{margin-left:auto;font-size:9px;color:#8a99b9;font-weight:700}
.np-api-mini-main{padding:15px;display:flex;flex-direction:column;gap:9px}
.np-api-mini-main b{font-size:13px;color:#546cbb}.np-api-mini-main em{font-style:normal;font-weight:400;color:#8393c2}
.np-api-chip{font:10px ui-monospace,monospace;align-self:flex-start;color:#6879a7;padding:4px 7px;border-radius:7px;background:#edf0fc}
.np-api-prompt,.np-api-answer{font-size:10px;color:#6b7b95}.np-api-answer{align-self:flex-end;color:#318e78;background:#e5f6f0;padding:5px 9px;border-radius:7px}
.np-api-disclaimer{font-size:.7rem!important;min-height:unset!important;color:#8190a1!important;margin-top:13px!important}