/* ============ MIAO Personal Showcase — Event Horizon theme ============ */
:root {
  --bg: #030303;
  --bg-2: #0a0705;
  --amber: #ff9a3c;
  --amber-hi: #ffd9a0;
  --amber-deep: #c2410c;
  --ember: #ff6b1a;
  --txt: #e8e2d9;
  --txt-dim: #8a8378;
  --line: rgba(255, 154, 60, .18);
  --card: rgba(255, 154, 60, .04);
  --font-en: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  --font-zh: 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-y: scroll; height: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-zh);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ember); color: #000; }

canvas#bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

#flash {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(circle at 50% 55%, #ffdcae, #ff7a1a 40%, transparent 70%);
  opacity: 0; pointer-events: none;
}

/* ---------- Loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s ease, visibility .8s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-ring {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,154,60,.15);
  border-top-color: var(--amber);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .35em; color: var(--txt-dim);
}

/* ---------- Topbar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 36px;
  mix-blend-mode: normal;
}
.logo {
  font-family: var(--font-en); font-weight: 700;
  font-size: 20px; letter-spacing: .3em;
  color: var(--txt); text-decoration: none;
}
.logo-dot { color: var(--amber); margin-left: 4px; font-size: 12px; vertical-align: middle; }
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em;
  color: var(--amber);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px;
  background: rgba(3,3,3,.5); backdrop-filter: blur(8px);
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- Side nav ---------- */
.sidenav {
  position: fixed; left: 32px; top: 50%; transform: translateY(-50%);
  z-index: 50; display: flex; flex-direction: column; gap: 22px;
}
.sidenav a {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  font-family: var(--font-mono);
  color: var(--txt-dim);
  transition: color .3s;
}
.sidenav a i { font-style: normal; font-size: 10px; letter-spacing: .2em; }
.sidenav a em {
  font-style: normal; font-size: 11px; letter-spacing: .25em;
  opacity: 0.55;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
}
.sidenav a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--txt-dim);
  transition: all .3s;
}
.sidenav a:hover em, .sidenav a.active em { opacity: 1; transform: none; }
.sidenav a.active { color: var(--amber-hi); }
.sidenav a.active::before {
  background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}

/* ---------- Sections ----------
   Each section is locked to exactly one viewport (any browser, any
   resolution). Spacing scales with min(vw, vh) so it shrinks on short
   screens before content ever needs to. If a screen is short enough that
   content still doesn't fit even at the compressed floor, the section
   scrolls internally (overflow-y: auto) instead of spilling into the next
   section — that's what reads as "truncated" on smaller laptops. */
#sections { position: relative; z-index: 10; }
.sec {
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(64px, 10vh, 120px) 6vw clamp(56px, 9vh, 120px);
  /* floor must clear the fixed sidenav's rendered width (~153px at left:32px)
     with margin — 13vw alone dips below that from ~960px up to ~1380px wide,
     which let the "系统 SYSTEMS" label bleed into card content */
  padding-left: clamp(180px, 13vw, 190px);
  scroll-margin-top: 10vh;
}
.sec-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.sec-inner { width: 100%; max-width: 1180px; margin: 0 auto; }

.sec-head { margin-bottom: clamp(24px, 6vh, 56px); }
.sec-head.center { text-align: center; }
.sec-no {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .5em; color: var(--amber);
}
.sec-head h2 {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(28px, min(5vw, 6vh), 58px);
  margin: 10px 0 14px;
  letter-spacing: .02em;
}
.sec-head h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--amber-hi), var(--ember));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-desc { color: var(--txt-dim); font-size: 15px; letter-spacing: .05em; }

/* ---------- HERO ---------- */
.hero-content { position: relative; }
.hero-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em;
  color: var(--amber-hi);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 22px; margin-bottom: clamp(16px, 3vh, 34px);
  background: rgba(10,7,5,.55); backdrop-filter: blur(10px);
}
.hero-title {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(36px, min(9vw, 11vh), 118px);
  line-height: 1.04; letter-spacing: -.01em;
  text-shadow: 0 0 60px rgba(255,120,26,.25);
}
.hero-title .line { display: block; }
.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, #ffe3b8, var(--amber) 50%, var(--ember));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  margin-top: clamp(12px, 3vh, 26px);
  color: #cfc6b8; font-size: 16px; letter-spacing: .2em;
  text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.8);
}
.hero-cta { margin-top: clamp(20px, 5vh, 44px); display: flex; gap: 18px; justify-content: center; }

.btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em;
  padding: 15px 30px; border-radius: 4px;
  text-decoration: none; cursor: pointer;
  transition: all .3s;
}
.btn-solid {
  background: linear-gradient(100deg, var(--amber), var(--ember));
  color: #140a02; border: none; font-weight: 600;
  box-shadow: 0 0 28px rgba(255,120,26,.35);
}
.btn-solid:hover { box-shadow: 0 0 44px rgba(255,140,40,.6); transform: translateY(-2px); }
.btn-ghost {
  color: var(--txt); border: 1px solid var(--line);
  background: rgba(10,7,5,.4); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-hi); }

.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .35em;
  color: var(--txt-dim);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-hint span {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  animation: drop 1.8s ease infinite;
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); } 100% { opacity: 0; } }

/* ---------- PROFILE ---------- */
.profile-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(20px, 4vh, 40px); }
/* --- optical glass: panels refract the particle field behind them --- */
.glass, .profile-card, .tl-node, .sys-card, .media-card {
  position: relative;
  border: 1px solid rgba(255, 190, 110, .16);
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(255,170,80,.07), rgba(255,255,255,.012) 42%, rgba(255,110,25,.045)),
    rgba(8, 5, 3, .52);
  backdrop-filter: blur(22px) saturate(1.4) brightness(.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(.9);
  box-shadow: inset 0 1px 0 rgba(255,220,160,.14), 0 24px 60px rgba(0,0,0,.45);
}
.glass::before, .profile-card::before, .tl-node::before, .sys-card::before, .media-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,150,50,.13), transparent 46%);
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.glass:hover::before, .profile-card:hover::before, .tl-node:hover::before,
.sys-card:hover::before, .media-card:hover::before { opacity: 1; }

.tilt { will-change: transform; transition: transform .25s ease; transform-style: preserve-3d; }

.profile-card {
  padding: clamp(20px, 4vh, 36px);
}
.avatar-frame {
  width: clamp(64px, 10vh, 96px); height: clamp(64px, 10vh, 96px); border-radius: 50%;
  padding: 2px; margin-bottom: clamp(14px, 3vh, 24px);
  background: conic-gradient(from 0deg, var(--amber), transparent 40%, var(--ember) 70%, var(--amber));
  animation: spin 8s linear infinite;
}
.avatar-core {
  width: 100%; height: 100%; border-radius: 50%;
  background: #0d0a07;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: clamp(28px, 4vh, 40px); font-weight: 700;
  color: var(--amber);
  animation: spin 8s linear infinite reverse;
}
.profile-intro h3 { font-family: var(--font-en); font-size: 24px; letter-spacing: .08em; }
.profile-intro h3 span { font-size: 14px; color: var(--txt-dim); font-weight: 400; }
.profile-intro p { margin: clamp(10px, 2vh, 18px) 0 clamp(12px, 3vh, 24px); color: var(--txt-dim); line-height: 1.9; font-size: 14px; }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  color: var(--amber-hi);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 10px;
}

.timeline { display: flex; flex-direction: column; gap: clamp(8px, 2vh, 16px); }
.tl-node {
  overflow: hidden; cursor: pointer;
  transition: border-color .3s, transform .25s ease;
}
.tl-node:hover { border-color: rgba(255,154,60,.45); }
.tl-head { display: flex; align-items: center; gap: 20px; padding: clamp(14px, 3vh, 24px) 28px; }
.tl-year { font-family: var(--font-mono); font-size: 11px; color: var(--amber); letter-spacing: .12em; white-space: nowrap; }
.tl-head h4 { flex: 1; font-size: 16px; font-weight: 500; }
.tl-toggle { font-family: var(--font-mono); color: var(--txt-dim); transition: color .3s; }
.tl-body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.tl-body p { padding: 0 28px 24px; color: var(--txt-dim); font-size: 14px; line-height: 1.8; }
.tl-node.open .tl-body { max-height: 200px; }
.tl-node.open .tl-toggle { color: var(--amber); }
.tl-node.open { border-color: rgba(255,154,60,.5); box-shadow: 0 0 30px rgba(255,120,26,.08); }

/* ---------- SYSTEMS ---------- */
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vh, 22px); }
.sys-card {
  padding: clamp(16px, 3.5vh, 30px);
  transition: transform .25s ease, border-color .35s, box-shadow .35s;
  overflow: hidden;
}
.sys-card:hover {
  border-color: rgba(255,154,60,.5);
  box-shadow: inset 0 1px 0 rgba(255,220,160,.2), 0 18px 50px rgba(255,110,20,.16);
}
.sys-id { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; color: var(--amber); }
.sys-card h3 { margin: clamp(8px, 2vh, 14px) 0 clamp(6px, 1.5vh, 12px); font-size: 18px; font-weight: 500; }
.sys-card p { color: var(--txt-dim); font-size: 13px; line-height: 1.8; min-height: 44px; }
.sys-meta { display: flex; gap: 8px; margin-top: clamp(10px, 2vh, 18px); }
.sys-meta span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em;
  color: var(--txt-dim);
  border: 1px solid rgba(255,154,60,.12); border-radius: 3px;
  padding: 4px 8px;
}

/* ---------- MEDIA ---------- */
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 3vh, 26px); }
.media-card {
  display: flex; gap: 20px; text-decoration: none; color: var(--txt);
  padding: clamp(12px, 2.5vh, 18px);
  transition: transform .25s ease, border-color .3s;
}
.media-card:hover { border-color: rgba(255,154,60,.5); }
.media-thumb {
  position: relative; flex: 0 0 clamp(120px, 18vh, 168px); height: clamp(78px, 12vh, 108px); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mt-1 { background: radial-gradient(circle at 30% 70%, #7a2d08, #180b04 70%); }
.mt-2 { background: radial-gradient(circle at 70% 30%, #8a3d0a, #14090a 70%); }
.mt-3 { background: radial-gradient(circle at 50% 90%, #5e2606, #100804 70%); }
.mt-4 { background: radial-gradient(circle at 20% 20%, #93450c, #120a06 70%); }
.mt-5 { background: radial-gradient(circle at 60% 50%, #6e2a07, #170a05 70%); }
.mt-6 { background: radial-gradient(circle at 80% 10%, #9c4a0e, #130b07 70%); }
.mt-7 { background: radial-gradient(circle at 40% 80%, #7d3109, #0f0804 70%); }
.mt-8 { background: radial-gradient(circle at 10% 60%, #8b380b, #140a06 70%); }
.play {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(3,3,3,.55); border: 1px solid rgba(255,180,90,.5);
  color: var(--amber-hi); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform .3s, box-shadow .3s;
}
.media-card:hover .play { transform: scale(1.15); box-shadow: 0 0 24px rgba(255,140,40,.5); }
.media-info { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.media-badge {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
  color: #140a02; background: var(--amber);
  border-radius: 3px; padding: 3px 8px; font-weight: 600;
}
.badge-xhs { background: #ff5b5b; color: #1a0505; }
.media-info h4 { font-size: 15px; font-weight: 500; }
.media-info p { font-size: 12px; color: var(--txt-dim); font-family: var(--font-mono); }

/* ---------- CONTACT ---------- */
.contact-inner { max-width: 620px; position: relative; }
.contact-form { display: flex; flex-direction: column; gap: clamp(12px, 2.5vh, 22px); }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
  color: var(--amber); margin-bottom: 10px;
}
.field input, .field textarea {
  width: 100%;
  /* isolation wall: form stays razor-sharp no matter how bright the scene behind it burns */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--amber-hi);
  font-family: var(--font-mono); font-size: 14px;
  padding: clamp(10px, 2vh, 16px) 18px;
  outline: none; resize: none;
  transition: border-color .3s, box-shadow .3s;
  caret-color: var(--amber);
}
.field label { text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.contact-form .btn-transmit { box-shadow: 0 0 28px rgba(255,120,26,.35), 0 8px 30px rgba(0,0,0,.6); }
.field input:focus, .field textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255,154,60,.3), 0 0 30px rgba(255,120,26,.12);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(138,131,120,.5); }
.btn-transmit { margin-top: 8px; align-self: center; padding: 17px 44px; }

.contact-links { display: flex; gap: 28px; justify-content: center; margin-top: clamp(20px, 4vh, 44px); }
.contact-links a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .25em;
  color: var(--txt-dim); text-decoration: none;
  transition: color .3s, text-shadow .3s;
}
.contact-links a:hover { color: var(--amber-hi); text-shadow: 0 0 16px rgba(255,140,40,.6); }

.finale-msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.finale-msg h3 {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(34px, 5vw, 56px); letter-spacing: .12em;
  background: linear-gradient(100deg, #ffe9c9, var(--amber), var(--ember));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 80px rgba(255,120,26,.4);
}
.finale-msg p { color: var(--txt-dim); letter-spacing: .3em; font-size: 13px; }

/* ---------- Footer ---------- */
.foot {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between;
  padding: 26px 36px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: rgba(138,131,120,.6);
  border-top: 1px solid rgba(255,154,60,.08);
}

/* ---------- Reveal helper ---------- */
.reveal { opacity: 0; transform: translateY(40px); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sidenav { display: none; }
  /* Below the sidenav breakpoint, drop the "one section = one locked
     viewport with its own internal scroll" model entirely. On a phone,
     content inside profile/systems/media genuinely can't fit one screen —
     the internal overflow-y:auto trapped the scroll gesture inside a
     section, so getting from systems to media meant scrolling through all
     of systems' internal overflow first, with no clear signal you even
     could move on. Reverting to plain document flow here means one
     continuous scroll through everything, no per-section trap.
     No min-height here (deliberately) — paginated sections (systems/media)
     have pages with very different content lengths (6 cards vs. 2 on the
     last page), and a min-height:100dvh floor padded the short pages out
     into a screen of empty starfield with nothing to interact with, which
     read as "stuck" even though the page technically kept scrolling. */
  .sec {
    height: auto;
    overflow-y: visible;
    padding-left: 6vw; /* nav is hidden — reclaim the safe zone */
  }
  .sec-hero { min-height: 100vh; min-height: 100dvh; } /* hero's content is fixed, not paginated — keep it a proper intro screen */
  .profile-grid { grid-template-columns: 1fr; }
  .sys-grid { grid-template-columns: 1fr 1fr; }
  .media-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sys-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: center; }
}

/* ---------- Pagination ---------- */
/* clip here, not on .sec: the inactive page is position:absolute for the
   crossfade, but it's still sized to ITS OWN content (e.g. page 1's 6 cards)
   — without clipping at this level, that invisible page still occupies real
   layout space below the shorter active page, which on mobile (where .sec
   no longer clips overflow) read as dead scroll space before the next
   section, i.e. exactly the "stuck" symptom */
.pg-wrap { position: relative; overflow: hidden; }
.pg-page {
  display: grid;
  transition: opacity .45s ease, transform .45s ease;
}
.pg-page:not(.pg-active) {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
}
.pg-page.pg-active {
  position: relative;
  opacity: 1; transform: translateY(0);
}

.pg-controls {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: clamp(12px, 3vh, 36px);
  font-family: var(--font-mono);
}
.pg-arrow {
  width: clamp(30px, 5vh, 38px); height: clamp(30px, 5vh, 38px); border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10,7,5,.45); backdrop-filter: blur(8px);
  color: var(--txt-dim); font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.pg-arrow:hover { border-color: var(--amber); color: var(--amber-hi); }
.pg-arrow:disabled { opacity: .25; cursor: default; border-color: var(--line); color: var(--txt-dim); }

.pg-dots { display: flex; gap: 8px; }
.pg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--txt-dim);
  background: transparent; cursor: pointer;
  transition: all .3s;
}
.pg-dot.pg-dot-active { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px var(--amber); }
.pg-dot:hover:not(.pg-dot-active) { border-color: var(--amber-hi); }

.pg-counter {
  font-size: 10px; letter-spacing: .25em;
  color: var(--txt-dim);
  margin: 0 6px; white-space: nowrap;
}

/* ---------- Short-viewport floors ----------
   This is a public site — "short" has to cover everything from a maximized
   1366x768 laptop with 100px+ of browser chrome, to a non-maximized window,
   to a tablet in landscape, on any browser. Two compression tiers degrade
   gracefully instead of chasing one device's exact numbers, and both keep a
   real, visible gap above the viewport edge (never flush against it) before
   a section falls back to its own internal scroll as a last resort.
   Placed at the true end of the file so these overrides win regardless of
   where the property they touch was originally declared — CSS cascade
   resolves same-specificity rules by source order, not by media-query
   position, so a later plain rule (e.g. .pg-controls further up the file)
   would otherwise silently out-rank an earlier media-query override. */
@media (max-height: 820px) {
  .sec { padding-top: 48px; padding-bottom: 44px; }
  .sec-head { margin-bottom: 24px; }
  .profile-card, .sys-card { padding: 20px; }
  .sys-card p, .tl-body p { line-height: 1.6; }
  .sys-card p { min-height: 0; }
  .timeline, .sys-grid, .media-grid { gap: 12px; }
  .pg-controls { margin-top: 20px; }
}
@media (max-height: 620px) {
  .sec { padding-top: 40px; padding-bottom: 36px; }
  .sec-head { margin-bottom: 16px; }
  .profile-card, .sys-card { padding: 14px; }
  .avatar-frame, .avatar-core { width: 48px; height: 48px; }
  .profile-intro p { line-height: 1.5; }
  .sys-card p, .tl-body p { line-height: 1.4; }
  .timeline, .sys-grid, .media-grid { gap: 8px; }
  .pg-controls { margin-top: 14px; }
}