:root{--ink:#20263a;--muted:#778097;--paper:#f7f9fd;--surface:rgba(255,255,255,.88);--line:#e7eaf2;--navy:#17223b;--blue:#648fcb;--gold:#e2aa48;--shadow:0 18px 50px rgba(42,54,89,.09);--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(circle at 15% 0%,rgba(197,220,247,.45),transparent 28rem),linear-gradient(180deg,#eef3fa 0,var(--paper) 30rem);font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;font-size:16px;line-height:1.75;transition:background .25s,color .25s}a{color:inherit;text-decoration:none}button{font:inherit}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;padding:.65rem 1rem;background:#fff;border-radius:8px;box-shadow:var(--shadow)}.skip-link:focus{top:1rem}.site-header{position:sticky;z-index:30;top:0;height:66px;color:#f8fbff;background:rgba(20,30,54,.92);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}.header-inner{width:min(1180px,calc(100% - 36px));height:100%;margin:auto;display:flex;align-items:center}.brand{font-weight:700;letter-spacing:.11em}.brand span{padding:0 .25rem;color:#ffd071;font-family:serif;font-style:italic}.top-nav{display:flex;gap:2.25rem;margin:auto}.top-nav a{position:relative;color:#bdc7da;font-size:.9rem}.top-nav a:hover,.top-nav a.active{color:#fff}.top-nav a.active:after{position:absolute;right:0;bottom:-.68rem;left:0;height:2px;content:"";background:#ffd071;border-radius:2px}.theme-button{display:grid;width:38px;height:38px;padding:9px;color:#e5ecf7;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:50%;cursor:pointer}.theme-button svg{grid-area:1/1;width:100%;height:100%;transition:transform .25s,opacity .25s}.moon-icon{opacity:0;transform:rotate(-45deg) scale(.6)}
.page-shell{width:min(1180px,calc(100% - 36px));margin:24px auto 0}.cover{position:relative;height:340px;padding:clamp(2.25rem,7vw,5.25rem);overflow:hidden;color:#fff;background:linear-gradient(116deg,rgba(12,21,43,.25),rgba(12,21,43,.1)),linear-gradient(135deg,#182544 0%,#365b88 54%,#8bb0cb 100%);border-radius:24px;box-shadow:0 26px 70px rgba(30,52,90,.22)}.cover:after{position:absolute;right:-4rem;bottom:-10rem;width:32rem;height:18rem;content:"";background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:50%;transform:rotate(-12deg)}.cover-glow{position:absolute;border-radius:50%;filter:blur(3px);opacity:.7}.cover-glow-one{top:-5rem;right:6rem;width:16rem;height:16rem;background:rgba(210,231,255,.2)}.cover-glow-two{right:15rem;bottom:-6rem;width:14rem;height:14rem;background:rgba(255,211,126,.14)}.cover-stars{position:absolute;inset:0;opacity:.6;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:67px 67px;mask-image:linear-gradient(to left,#000,transparent 75%)}.cover-copy{position:relative;z-index:2;max-width:34rem}.eyebrow,.section-kicker{margin:0 0 .6rem;color:#ffd98a;font-size:.72rem;font-weight:700;letter-spacing:.19em}.cover h1{margin:0;font-size:clamp(2.35rem,5vw,4rem);line-height:1.23;letter-spacing:-.04em}.cover h1 em{color:#fff3cf;font-family:"STKaiti","KaiTi",serif;font-weight:400;font-style:normal;letter-spacing:.04em}.cover-copy>p:last-child{max-width:31rem;margin:1rem 0 0;color:rgba(255,255,255,.76);font-size:.96rem}.cover-date{position:absolute;z-index:2;right:2.5rem;bottom:1.6rem;margin:0;color:rgba(255,255,255,.7);font-size:.76rem;letter-spacing:.12em}.cover-date span{color:#ffd98a}
.content-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 240px;gap:22px;margin-top:22px;align-items:start}.left-rail,.right-rail{display:grid;gap:18px}.panel,.post-card{background:var(--surface);border:1px solid rgba(220,225,237,.82);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(10px)}.panel{padding:20px}.panel-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}.panel-title span{font-size:.98rem;font-weight:700}.panel-title small{color:#a4abba;font-size:.62rem;font-weight:700;letter-spacing:.16em}.profile-card{padding-top:0;margin-top:-58px;text-align:center;position:relative;z-index:4}.avatar-wrap{position:relative;width:98px;margin:0 auto .7rem;transform:translateY(-25px)}.avatar{display:grid;width:98px;height:98px;place-items:center;color:#fff5d7;background:linear-gradient(145deg,#263858,#6a91b6);border:5px solid #fff;border-radius:31px;box-shadow:0 12px 30px rgba(41,62,96,.22);font-family:"STKaiti","KaiTi",serif;font-size:3.5rem}.status-dot{position:absolute;right:-1px;bottom:4px;width:17px;height:17px;background:#65c684;border:4px solid #fff;border-radius:50%}.profile-card h2{margin:-1.1rem 0 0;font-size:1.32rem;letter-spacing:.06em}.handle{margin:0 0 .85rem;color:var(--blue);font-size:.76rem}.bio{margin:0;color:var(--muted);font-size:.84rem;line-height:1.75}.profile-meta{display:grid;gap:.5rem;margin-top:1rem;padding-top:1rem;text-align:left;border-top:1px solid var(--line)}.profile-meta span{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.76rem}.profile-meta svg{width:15px;height:15px;color:var(--blue)}.notice-card{border-top:3px solid #f0c570}.notice-card p{margin:0;color:var(--muted);font-size:.82rem}.notice-card time{display:block;margin-top:.7rem;color:#b0b6c3;font-size:.68rem}.tag-list{display:flex;flex-wrap:wrap;gap:.5rem}.tag-list a{padding:.35rem .58rem;color:#5d7698;background:#edf3fb;border-radius:8px;font-size:.73rem;transition:.2s}.tag-list a:hover{color:#fff;background:var(--blue);transform:translateY(-1px)}.tag-list b{color:#aab9cb;font-weight:500}
.feed-heading{display:flex;min-height:58px;align-items:center;justify-content:space-between;margin:2px 2px 16px}.feed-heading h2{margin:0;font-size:1.38rem}.section-kicker{margin-bottom:.1rem;color:var(--blue);font-size:.62rem}.feed-filter{display:flex;gap:.3rem;padding:.25rem;background:#e9eef6;border-radius:10px}.feed-filter button{padding:.4rem .75rem;color:#7d8798;background:transparent;border:0;border-radius:7px;font-size:.76rem;cursor:pointer}.feed-filter button.active{color:var(--ink);background:#fff;box-shadow:0 3px 10px rgba(42,54,89,.08)}.post-card{position:relative;overflow:hidden;margin-bottom:18px;transition:transform .25s,box-shadow .25s,opacity .2s}.post-card:hover{transform:translateY(-3px);box-shadow:0 22px 55px rgba(42,54,89,.13)}.post-card.filtered-out{display:none}.post-body{padding:clamp(1.3rem,3vw,1.8rem)}.featured{border-left:4px solid #edbd62}.post-accent{position:absolute;top:0;right:1.4rem;padding:.28rem .7rem .45rem;color:#6b5021;background:#ffe2a4;border-radius:0 0 8px 8px;font-size:.65rem;font-weight:700}.post-meta{display:flex;align-items:center;gap:.8rem;color:#a2a8b5;font-size:.72rem}.post-meta span{color:var(--blue);font-weight:600}.post-meta time:before{padding-right:.8rem;content:"·"}.post-card h2{margin:.65rem 0 .7rem;font-size:clamp(1.2rem,2.5vw,1.52rem);line-height:1.45}.post-card h2 a{transition:color .2s}.post-card h2 a:hover{color:var(--blue)}.post-card p{margin:0;color:var(--muted);font-size:.9rem}.post-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line)}.read-more{color:#537caf;font-size:.78rem;font-weight:600}.read-more span{display:inline-block;transition:transform .2s}.read-more:hover span{transform:translateX(4px)}.post-stats,.mood{color:#a4abba;font-size:.7rem}.quote{color:#596277!important;font-family:"STKaiti","KaiTi",serif;font-size:1.35rem!important;line-height:1.7!important}.archive-note{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1.5rem 0 2rem;color:#a0a8b8}.archive-note span{font-size:.65rem;letter-spacing:.12em}.archive-note span:before,.archive-note span:after{content:"—";padding:0 .5rem;color:#c6ccd7}.archive-note p{margin:0;font-size:.78rem}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.stats-grid div{display:grid;padding:.75rem .4rem;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.stats-grid strong{color:#445f84;font-size:1.03rem}.stats-grid span{color:#9ba3b2;font-size:.67rem}.visitor-line{margin:.9rem 0 0;color:var(--muted);font-size:.72rem;text-align:center}.visitor-line span{display:inline-block;width:7px;height:7px;margin-right:.4rem;background:#62c681;border-radius:50%}.visitor-line b{color:var(--blue)}.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.calendar-head>div:first-child{display:flex;align-items:baseline;gap:.5rem}.calendar-head span{font-size:1.05rem;font-weight:700}.calendar-head small{color:#a3abba;font-size:.66rem}.calendar-controls{display:flex;gap:.25rem}.calendar-controls button{width:27px;height:27px;padding:0;color:var(--muted);background:#f1f4f8;border:0;border-radius:7px;cursor:pointer}.calendar-controls button:hover{color:#fff;background:var(--blue)}.calendar-week,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.calendar-week{margin-bottom:.45rem;color:#aab1bf;font-size:.63rem}.calendar-days span{display:grid;height:25px;place-items:center;color:#70798b;font-size:.67rem;border-radius:50%}.calendar-days .muted-day{opacity:.25}.calendar-days .today{color:#fff;background:var(--blue);font-weight:700}.currently-card ul{display:grid;gap:.85rem;margin:0;padding:0;list-style:none}.currently-card li{display:flex;align-items:center;gap:.75rem}.currently-card li>span{display:grid;width:31px;height:31px;place-items:center;color:#587da8;background:#edf3fa;border-radius:9px;font-size:.68rem;font-weight:600}.currently-card li div{display:grid;line-height:1.45}.currently-card b{font-size:.76rem}.currently-card small{color:#a1a8b5;font-size:.64rem}.message-card{background:linear-gradient(145deg,#263653,#405e82);border:0}.message-card p{margin:0;color:#f9f5e9;font-family:"STKaiti","KaiTi",serif;font-size:1.12rem;line-height:1.7}.message-card span{display:block;margin-top:.7rem;color:#b8c6d7;font-size:.63rem}.site-footer{display:grid;gap:.15rem;margin-top:2rem;padding:2.6rem 1rem;color:#98a1b0;background:#18223a;text-align:center}.site-footer p{margin:0;font-size:.72rem}.site-footer p:first-child{color:#d5dbe7}
.reading-overlay{position:fixed;z-index:60;inset:0;padding:2rem 1rem;overflow:auto;background:rgba(12,19,35,.7);backdrop-filter:blur(8px)}.reading-sheet{position:relative;width:min(680px,100%);margin:3rem auto;padding:clamp(1.5rem,5vw,3.5rem);background:var(--surface);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.3)}.reading-sheet h2{margin:.5rem 0 1.5rem;font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.35}.reading-sheet #reading-content{color:var(--muted)}.reading-sheet #reading-content p{margin:0 0 1.15rem}.close-reading{position:absolute;top:1rem;right:1rem;width:38px;height:38px;color:var(--muted);background:var(--paper);border:0;border-radius:50%;font-size:1.45rem;cursor:pointer}body.dark{--ink:#e8edf7;--muted:#aab5c8;--paper:#111827;--surface:rgba(25,36,58,.92);--line:#33405a;--blue:#8bb7e7;--shadow:0 18px 50px rgba(0,0,0,.2);background:radial-gradient(circle at 15% 0%,#22375a,transparent 28rem),#111827}body.dark .sun-icon{opacity:0;transform:rotate(45deg) scale(.6)}body.dark .moon-icon{opacity:1;transform:none}body.dark .avatar,body.dark .status-dot{border-color:#25324a}body.dark .tag-list a,body.dark .currently-card li>span{background:#293a55}body.dark .feed-filter,body.dark .calendar-controls button{background:#202d44}body.dark .feed-filter button.active{background:#34445f}body.dark .reading-sheet{background:#1b2740}
@media(max-width:1020px){.content-grid{grid-template-columns:210px minmax(0,1fr)}.right-rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.message-card{display:none}}@media(max-width:760px){.site-header{height:60px}.header-inner{width:min(100% - 24px,1180px)}.brand{font-size:.88rem}.top-nav{gap:1.1rem}.top-nav a{font-size:.78rem}.page-shell{width:min(100% - 24px,1180px);margin-top:12px}.cover{height:300px;padding:2rem;border-radius:19px}.cover-copy{position:absolute;left:1.65rem;right:1.65rem;bottom:2.25rem}.cover-copy>p:last-child{font-size:.82rem}.cover-date{display:none}.content-grid{grid-template-columns:1fr;gap:18px}.left-rail{grid-template-columns:1fr 1fr}.profile-card{grid-row:span 2;margin-top:-48px}.tags-card{align-self:start}main{grid-row:2}.right-rail{grid-column:auto;grid-row:3;grid-template-columns:1fr 1fr}.currently-card{grid-column:1/-1}}@media(max-width:520px){.top-nav a:nth-child(2){display:none}.top-nav{margin-right:1rem}.cover{height:290px}.cover h1{font-size:2.2rem}.left-rail,.right-rail{grid-template-columns:1fr}.profile-card{grid-row:auto}.right-rail .currently-card{grid-column:auto}.feed-heading{align-items:flex-end}.feed-filter button{padding:.36rem .55rem}.post-footer{align-items:flex-end;gap:.5rem}.post-stats{text-align:right}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Version 2: wider PC layout, image cover and floating particles */
@media (min-width: 1021px) {
  .header-inner, .page-shell { width: min(1480px, calc(100% - 32px)); }
  .content-grid { grid-template-columns: 270px minmax(0, 1fr) 290px; gap: 26px; }
  .panel { padding: 23px; }
  .post-body { padding: 2rem 2.15rem; }
}

.site-header {
  margin-bottom: -66px;
  background: linear-gradient(180deg, rgba(24, 25, 45, .76), rgba(24, 25, 45, .24));
  border-bottom-color: rgba(255, 255, 255, .12);
}

.page-shell { margin-top: 0; }

.cover {
  height: clamp(420px, 40vw, 570px);
  padding: 0;
  isolation: isolate;
  background-image: linear-gradient(180deg, rgba(18, 21, 39, .28) 0%, rgba(30, 30, 52, .03) 55%, rgba(35, 31, 55, .2) 100%), url("cover.jpg");
  background-position: center 43%;
  background-size: cover;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 28px 80px rgba(80, 74, 117, .22);
}

.cover::before {
  position: absolute;
  z-index: 3;
  right: -4%;
  bottom: -57px;
  left: -4%;
  height: 115px;
  content: "";
  background: linear-gradient(180deg, rgba(247, 249, 253, .82), var(--paper) 70%);
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  pointer-events: none;
}

.cover::after { display: none; }

.cover-copy {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(700px, calc(100% - 48px));
  max-width: none;
  text-align: center;
  text-shadow: 0 3px 24px rgba(37, 23, 48, .48);
  transform: translate(-50%, -43%);
}

.cover h1 { font-size: clamp(3.2rem, 5.5vw, 5.2rem); letter-spacing: .02em; }
.cover-copy > p:last-child { max-width: none; color: rgba(255, 255, 255, .92); font-size: 1.02rem; font-weight: 500; }
.cover .eyebrow { color: #fff3c6; }
.cover-date { z-index: 5; bottom: 5rem; }
.cover-glow, .cover-stars { z-index: 2; }
.cover-stars { opacity: .28; mask-image: none; }

.particle-canvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.content-grid { position: relative; z-index: 6; margin-top: -18px; }
.profile-card { margin-top: -68px; }
.avatar { overflow: hidden; padding: 0; background: #dcecff; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
body.dark .cover::before { background: linear-gradient(180deg, rgba(17, 24, 39, .76), var(--paper) 70%); }

@media (max-width: 1020px) {
  .header-inner, .page-shell { width: min(100% - 20px, 980px); }
  .cover { height: 430px; background-position: center center; }
  .cover-copy { bottom: auto; }
  .content-grid { margin-top: -10px; }
}

@media (max-width: 760px) {
  .site-header { margin-bottom: -60px; }
  .cover { height: 390px; border-radius: 0 0 20px 20px; background-position: 42% center; }
  .cover::before { bottom: -40px; height: 82px; }
  .cover-copy { left: 50%; bottom: auto; }
  .cover h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .profile-card { margin-top: -35px; }
}

@media (max-width: 520px) {
  .cover { height: 350px; }
  .cover-copy > p:last-child { font-size: .82rem; }
}

/* Version 3: full-width composition and pastel dotted background */
body {
  background-color: #f8f5fb;
  background-image:
    radial-gradient(circle, rgba(235, 163, 207, .42) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(126, 178, 229, .34) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(177, 137, 211, .28) 0 1px, transparent 1.7px),
    linear-gradient(180deg, #eef5fc 0, #fbf3fb 40rem, #f8f5fb 100%);
  background-position: 18px 25px, 68px 78px, 42px 8px, 0 0;
  background-size: 96px 96px, 124px 124px, 78px 78px, 100% 100%;
}

.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.header-inner {
  width: calc(100% - 64px);
  max-width: none;
}

.page-shell {
  width: 100%;
  max-width: none;
}

.cover {
  width: 100%;
  border-radius: 0;
}

.content-grid {
  width: calc(100% - 64px);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

body.dark {
  background-color: #111827;
  background-image:
    radial-gradient(circle, rgba(217, 148, 203, .19) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(115, 167, 224, .18) 0 1.5px, transparent 2px),
    linear-gradient(180deg, #17243a 0, #151928 40rem, #111827 100%);
  background-position: 18px 25px, 68px 78px, 0 0;
  background-size: 96px 96px, 124px 124px, 100% 100%;
}

@media (min-width: 1021px) {
  .header-inner, .page-shell { width: 100%; }
  .header-inner { padding: 0 32px; }
  .content-grid {
    width: calc(100% - 64px);
    grid-template-columns: 290px minmax(0, 1fr) 310px;
    gap: 28px;
  }
}

@media (max-width: 1020px) {
  .header-inner { width: calc(100% - 24px); }
  .page-shell { width: 100%; }
  .content-grid { width: calc(100% - 24px); }
}

@media (max-width: 760px) {
  .cover { border-radius: 0; }
  .content-grid { width: calc(100% - 20px); }
}

/* Version 4: profile poster, complete navigation and integrated footer */
.site-header {
  height: 76px;
  color: #fff;
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: 1.25rem;
  height: 100%;
  padding: 0 3.4vw;
}

.brand {
  justify-self: start;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(20, 18, 35, .45);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .25rem;
  margin: 0;
}

.top-nav > a,
.more-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  color: rgba(255, 255, 255, .8);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: .84rem;
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(24, 20, 40, .45);
}

.top-nav > a:hover,
.top-nav > a.active,
.more-button:hover,
.more-button[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.top-nav > a svg,
.more-button svg,
.header-actions svg,
.more-panel svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.top-nav > a.active::after {
  right: .65rem;
  bottom: .12rem;
  left: .65rem;
  background: #ffe29a;
}

.more-menu,
.search-menu {
  position: relative;
}

.more-button b {
  margin-left: .1rem;
  font-size: .7rem;
  font-weight: 400;
  transition: transform .2s ease;
}

.more-button[aria-expanded="true"] b { transform: rotate(180deg); }

.more-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 9px);
  right: 0;
  width: 470px;
  padding: .7rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(36, 31, 61, .24);
  backdrop-filter: blur(18px);
}

.more-panel:not([hidden]) { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.more-panel[hidden], .search-panel[hidden] { display: none; }

.more-panel a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .65rem;
  padding: .75rem;
  background: #f5f6fb;
  border-radius: 11px;
  transition: transform .2s ease, background .2s ease;
}

.more-panel a:hover { background: #edf2fa; transform: translateY(-2px); }
.more-panel a > span { display: grid; min-width: 0; }
.more-panel strong { font-size: .76rem; white-space: nowrap; }
.more-panel small { color: var(--muted); font-size: .64rem; }
.more-panel svg { color: #7c80aa; }

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: .28rem;
}

.icon-button,
.header-actions .theme-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 9px;
  place-items: center;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  cursor: pointer;
}

.icon-button:hover,
.header-actions .theme-button:hover { color: #fff; background: rgba(255, 255, 255, .16); }

.search-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  padding: .75rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  border-radius: 13px;
  box-shadow: 0 18px 50px rgba(36, 31, 61, .22);
}

.search-panel label { display: block; margin: 0 0 .35rem; font-size: .68rem; font-weight: 700; }
.search-panel input { width: 100%; padding: .65rem .75rem; color: var(--ink); background: #f4f6fa; border: 1px solid #dfe4ed; border-radius: 8px; outline: none; }
.search-panel input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(100, 143, 203, .14); }

.cover {
  height: clamp(560px, 41vw, 690px);
  background-position: center 30%;
}

.cover-copy { transform: translate(-50%, -37%); }
.cover h1 { color: #fff; font-size: clamp(4.2rem, 7vw, 7rem); line-height: 1; text-shadow: 0 6px 28px rgba(38, 24, 48, .52); }
.cover-slogan { margin: 1.15rem 0 0 !important; color: #ffe39b !important; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(1.25rem, 2vw, 1.85rem) !important; font-weight: 600 !important; letter-spacing: .05em; }

.content-grid { margin-top: -36px; }

.profile-card {
  overflow: hidden;
  padding: 10px;
  margin-top: 0;
  text-align: center;
}

.profile-portrait {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #eaf1fa;
  border-radius: 13px;
}

.profile-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-portrait .status-dot {
  right: 10px;
  bottom: 10px;
  width: 19px;
  height: 19px;
}

.profile-details { padding: 1rem .8rem .55rem; }
.profile-details h2 { margin: 0; font-size: 1.42rem; letter-spacing: .03em; }
.profile-details .handle { margin: .12rem 0 .8rem; }
.profile-details .bio { padding: .85rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: "STKaiti", "KaiTi", serif; font-size: 1rem; }
.profile-details .profile-meta { margin-top: .8rem; padding-top: 0; border-top: 0; }

.site-footer {
  margin-top: 1rem;
  padding: 2.3rem 1rem 3rem;
  color: #8b88a0;
  background: transparent;
  border-top: 1px dashed rgba(145, 140, 165, .22);
}

.site-footer p:first-child { color: #7e7b90; }

body.dark .more-panel,
body.dark .search-panel { background: rgba(27, 39, 64, .96); border-color: rgba(255,255,255,.08); }
body.dark .more-panel a,
body.dark .search-panel input { background: #24334f; border-color: #384966; }
body.dark .site-footer p:first-child { color: #aeb8ca; }

@media (max-width: 1180px) {
  .header-inner { grid-template-columns: minmax(180px, 1fr) auto minmax(145px, 1fr); padding: 0 1rem; }
  .top-nav > a, .more-button { padding-right: .45rem; padding-left: .45rem; }
  .top-nav > a span, .more-button span { display: none; }
  .top-nav > a svg, .more-button svg { width: 19px; height: 19px; }
}

@media (max-width: 760px) {
  .site-header { height: 62px; }
  .header-inner { grid-template-columns: auto 1fr auto; gap: .5rem; width: 100%; padding: 0 .7rem; }
  .brand { font-size: .76rem; }
  .top-nav { gap: 0; }
  .top-nav > a, .more-button { min-height: 36px; padding: .4rem; }
  .top-nav > a:nth-child(4), .top-nav > a:nth-child(5) { display: none; }
  .header-actions { gap: .1rem; }
  .icon-button, .header-actions .theme-button { width: 34px; height: 34px; padding: 8px; }
  .header-actions .icon-button:nth-child(2) { display: none; }
  .more-panel { right: -100px; width: min(400px, calc(100vw - 24px)); }
  .cover { height: 500px; background-position: 38% 24%; }
  .cover h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  .cover-slogan { font-size: 1rem !important; }
  .content-grid { margin-top: -18px; }
  .profile-card { margin-top: 0; }
}

@media (max-width: 520px) {
  .brand span { display: none; }
  .brand { max-width: 56px; overflow: hidden; }
  .top-nav > a:nth-child(3) { display: none; }
  .more-panel:not([hidden]) { grid-template-columns: 1fr; }
  .search-panel { right: -76px; }
  .cover { height: 440px; }
}

/* V4.1: layered wave boundary and decorative typography */
@font-face {
  font-family: "Tsuk Shouzha Web";
  src: url("shouzha-subset.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tsuk Shouzha Extra";
  src: url("shouzha-extra.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tsuk Shouzha";
  src: local("手札体 简"), local("WPS手札体 简"), local("WPS 手札体 简"), local("WPS手札体"), local("手札体"), local("方正手札体"), local("方正舒体"), local("FZShuTi");
  font-display: swap;
}

html { font-size: 17px; }

body,
body *,
button,
input,
textarea,
select {
  font-family: "Tsuk Shouzha Web", "Tsuk Shouzha Extra", "Tsuk Shouzha", "FZShuTi", "STKaiti", "KaiTi", cursive !important;
}

/* V4.2 — content views, search, article counters */
.content-view[hidden] {
  display: none !important;
}

.content-view.active {
  animation: content-view-in 0.36s ease both;
}

@keyframes content-view-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-cover {
  display: block;
  width: 100%;
  height: clamp(190px, 18vw, 290px);
  margin: -30px -32px 24px;
  width: calc(100% + 64px);
  object-fit: cover;
  object-position: center 42%;
  border-bottom: 1px solid rgba(81, 110, 161, 0.13);
}

.post-card.featured {
  overflow: hidden;
}

.like-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
}

.like-button:hover {
  color: var(--gold-dark);
  transform: translateY(-1px);
}

.like-button.liked {
  color: #ce678b;
}

.view-heading {
  margin-bottom: 22px;
}

.view-heading .eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.view-heading h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
}

.view-heading p {
  margin: 0;
  color: var(--muted);
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.placeholder-card,
.placeholder-grid > article,
.empty-state {
  min-height: 175px;
  padding: 25px;
  border: 1px solid rgba(81, 110, 161, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-soft);
}

.placeholder-card .icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 17px;
  place-items: center;
  border-radius: 14px;
  color: var(--blue-deep);
  background: var(--blue-soft);
}

.placeholder-card h3,
.placeholder-grid > article h3,
.empty-state h3 {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 1.18rem;
}

.placeholder-card p,
.placeholder-grid > article p,
.empty-state p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.gallery-placeholder {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 0.75fr;
  grid-auto-rows: 145px;
  gap: 14px;
}

.gallery-placeholder span,
.gallery-placeholder > div {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(140deg, rgba(112, 145, 198, 0.38), rgba(252, 225, 149, 0.46)),
    rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-soft);
}

.gallery-placeholder span:first-child,
.gallery-placeholder > div:first-child {
  grid-row: span 2;
}

.gallery-placeholder span::after,
.gallery-placeholder > div::after {
  content: "照片待添加";
  position: absolute;
  right: 15px;
  bottom: 12px;
  color: rgba(28, 46, 79, 0.68);
  font-size: 0.82rem;
}

.search-panel {
  width: min(380px, calc(100vw - 26px));
}

.search-results {
  display: grid;
  gap: 7px;
  max-height: 330px;
  margin-top: 10px;
  overflow-y: auto;
}

.search-results:empty {
  display: none;
}

.search-results button {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(81, 110, 161, 0.1);
  border-radius: 12px;
  background: rgba(244, 248, 255, 0.78);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.search-results button:hover {
  background: rgba(226, 236, 251, 0.9);
  transform: translateX(2px);
}

.search-result-title {
  display: block;
  margin-bottom: 3px;
  font-size: 0.98rem;
}

.search-result-meta,
.search-empty {
  color: var(--muted);
  font-size: 0.78rem;
}

.reading-cover {
  width: calc(100% + 72px);
  height: clamp(210px, 30vw, 390px);
  margin: -36px -36px 30px;
  object-fit: cover;
  object-position: center 42%;
}

.reading-sheet .reading-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 9px 15px;
  border: 1px solid rgba(206, 103, 139, 0.2);
  border-radius: 999px;
  background: rgba(255, 244, 248, 0.78);
  color: #9e4d6a;
}

.reading-sheet .reading-like.liked {
  color: #c44370;
  background: rgba(255, 225, 235, 0.9);
}

.reading-sheet a {
  color: var(--blue-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .placeholder-grid {
    grid-template-columns: 1fr;
  }

  .gallery-placeholder {
    grid-template-columns: 1fr 1fr;
  }

  .post-cover {
    margin: -24px -22px 20px;
    width: calc(100% + 44px);
  }
}

@media (max-width: 560px) {
  .gallery-placeholder {
    grid-template-columns: 1fr;
  }

  .gallery-placeholder span:first-child,
  .gallery-placeholder > div:first-child {
    grid-row: auto;
  }

  .reading-cover {
    width: calc(100% + 40px);
    margin: -20px -20px 24px;
  }
}

.brand,
.cover h1,
.cover-slogan,
.panel-title,
.post-card h2,
.feed-heading h2,
.profile-details h2 {
  font-family: "Tsuk Shouzha Web", "Tsuk Shouzha Extra", "Tsuk Shouzha", "FZShuTi", "STKaiti", "KaiTi", cursive !important;
}

.cover::before { display: none; }

.wave-transition {
  position: relative;
  z-index: 5;
  height: 148px;
  margin-top: -108px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(249, 240, 249, .42) 45%, rgba(248, 245, 251, .9) 100%);
}

.wave-transition::before {
  position: absolute;
  top: 18px;
  right: -5%;
  left: -5%;
  height: 185px;
  content: "";
  background: linear-gradient(180deg, rgba(255, 251, 255, .36), rgba(246, 224, 242, .25) 48%, rgba(248, 245, 251, .84) 100%);
  border-top: 2px solid rgba(255, 255, 255, .58);
  border-radius: 50% 50% 0 0 / 64% 64% 0 0;
  box-shadow: inset 0 18px 44px rgba(248, 220, 242, .12);
}

.wave-transition::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 44px;
  content: "";
  background: linear-gradient(180deg, rgba(248, 245, 251, .1), rgba(248, 245, 251, .94));
}

.wave-arc {
  position: absolute;
  z-index: 1;
  top: 0;
  display: block;
  height: 175px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(247, 224, 243, .12) 58%, transparent 59%);
  border-top: 1.5px solid rgba(255, 255, 255, .48);
  border-radius: 50% 50% 0 0 / 68% 68% 0 0;
  box-shadow: inset 0 14px 35px rgba(240, 205, 233, .08);
}

.wave-arc-one { top: 6px; left: -8%; width: 42%; transform: rotate(1.5deg); }
.wave-arc-two { top: 23px; left: 18%; width: 43%; height: 166px; border-top-color: rgba(238, 205, 232, .52); transform: rotate(-1.8deg); }
.wave-arc-three { top: 4px; left: 49%; width: 39%; height: 178px; transform: rotate(2deg); }
.wave-arc-four { top: 26px; right: -8%; width: 39%; height: 160px; border-top-color: rgba(205, 224, 244, .48); transform: rotate(-1.5deg); }

.content-grid {
  margin-top: 0;
  padding-top: 1.6rem;
}

.cover h1 {
  font-size: clamp(2.2rem, 7vw, 5.4rem);
  letter-spacing: .025em;
  white-space: nowrap;
}

.cover-copy { width: min(1200px, calc(100% - 32px)); }

.cover-slogan {
  color: #1d3c67 !important;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .75);
}

.profile-portrait .status-dot { display: none; }

body.dark .wave-transition::before {
  background: linear-gradient(180deg, rgba(31, 37, 57, .74), rgba(20, 29, 47, .97) 56%, #111827 100%);
}

body.dark .wave-transition::after { background: linear-gradient(180deg, rgba(17, 24, 39, .1), rgba(17, 24, 39, .95)); }

body.dark .wave-arc {
  background: rgba(119, 139, 174, .08);
  border-color: rgba(255, 255, 255, .08);
}

@media (max-width: 760px) {
  html { font-size: 16px; }
  .wave-transition { height: 106px; margin-top: -76px; }
  .wave-transition::before { top: 17px; height: 128px; }
  .wave-transition::after { height: 34px; }
  .wave-arc { height: 126px; }
  .wave-arc-two, .wave-arc-four { height: 116px; }
  .content-grid { margin-top: 0; padding-top: .9rem; }
  .cover h1 { font-size: clamp(2.2rem, 7vw, 4rem); }
}

.post-card p { font-size: .96rem; }
.bio, .notice-card p { font-size: .92rem; }
.tag-list a, .read-more { font-size: .82rem; }
.profile-meta span, .post-meta, .handle { font-size: .82rem; }
.post-stats, .mood, .notice-card time, .visitor-line, .currently-card small, .message-card span, .site-footer p { font-size: .76rem; }
.panel-title small, .section-kicker, .calendar-week, .calendar-days span, .stats-grid span { font-size: .72rem; }

/* V4.3 — live vertical stats and the motto card */
.stats-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-list li {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  color: var(--muted);
}

.stats-list .stats-icon {
  display: grid;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #66758b;
  background: linear-gradient(145deg, #f4eef7, #eef3fa);
  border-radius: 8px;
}

.stats-list svg {
  width: 16px;
  height: 16px;
}

.stats-list li > span:not(.stats-icon) {
  white-space: nowrap;
  font-size: 0.82rem;
}

.stats-list i {
  min-width: 8px;
  flex: 1;
  height: 1px;
  border-bottom: 1px dotted rgba(119, 128, 151, 0.5);
}

.stats-list strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-style: normal;
  white-space: nowrap;
}

.message-card {
  position: relative;
  min-height: 132px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(220, 225, 237, 0.82);
  background:
    radial-gradient(circle at 13% 18%, rgba(233, 187, 214, 0.26) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 76%, rgba(115, 159, 213, 0.22) 0 4px, transparent 5px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 241, 250, 0.9));
}

.message-card::before,
.message-card::after {
  position: absolute;
  color: rgba(115, 137, 179, 0.17);
  content: "✦";
  pointer-events: none;
}

.message-card::before {
  top: 8px;
  right: 14px;
  font-size: 2.6rem;
  transform: rotate(12deg);
}

.message-card::after {
  bottom: 2px;
  left: 13px;
  color: rgba(222, 170, 205, 0.22);
  font-size: 2rem;
  transform: rotate(-16deg);
}

.message-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #52647d;
  font-size: 1.02rem;
  line-height: 1.9;
  text-align: center;
}

body.dark .stats-list .stats-icon {
  color: #bdcbe0;
  background: rgba(255, 255, 255, 0.07);
}

body.dark .message-card {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 13% 18%, rgba(228, 171, 207, 0.12) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 76%, rgba(128, 163, 214, 0.13) 0 4px, transparent 5px),
    linear-gradient(145deg, rgba(34, 44, 64, 0.94), rgba(43, 43, 63, 0.94));
}

body.dark .message-card p {
  color: #dce5f2;
}

/* V4.4 — article dialog alignment and image framing */
.close-reading {
  z-index: 4;
  top: 18px;
  right: 18px;
  display: grid;
  padding: 0;
  place-items: center;
  font-family: Arial, sans-serif !important;
  font-size: 1.35rem;
  line-height: 1;
}

.reading-cover {
  margin: 14px -36px 32px;
  object-position: center 36%;
}

.post-cover {
  object-position: center 25%;
}

.cover {
  background-position: center 18%;
}

@media (max-width: 1020px) {
  .cover {
    background-position: 46% 18%;
  }
}

@media (max-width: 760px) {
  .cover {
    background-position: 38% 15%;
  }
}

@media (max-width: 560px) {
  .reading-cover {
    margin: 14px -20px 26px;
  }
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}

.post-tags span {
  padding: .28rem .52rem;
  color: #5d7698;
  background: #edf3fb;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 600;
}

.tag-list a.active {
  color: #fff;
  background: var(--blue);
}

body.dark .post-tags span {
  color: #a9c9eb;
  background: #293a55;
}