*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; font-size: 100%; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
button { appearance: none; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
svg { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
::selection { background: rgb(96 150 225 / 25%); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: 10px; transform: translateY(-160%); padding: 10px 18px; background: var(--bg-strong); border-radius: 12px; z-index: 200; }
.skip-link:focus { transform: none; }
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.js .mobile-only { display: none !important; }
.page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.landscape { position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 3%, rgb(239 216 243 / 80%), transparent 49%), radial-gradient(ellipse at 12% 30%, rgb(203 227 246 / 95%), transparent 56%), radial-gradient(ellipse at 72% 58%, rgb(188 211 248 / 54%), transparent 62%), linear-gradient(160deg, #f6f1f8 0%, #e5eff9 48%, #e7eafb 100%); }
.landscape::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 4%, #302742, transparent 55%), radial-gradient(ellipse at 10% 30%, #1a304c, transparent 55%), linear-gradient(150deg, #161c2b, #151f33 55%, #20203a); opacity: 0; transition: opacity 200ms ease; }
.landscape::after { content: ""; position: absolute; inset: 0; background: url("../img/mist.svg") center top / cover no-repeat; opacity: .62; transition: opacity 200ms ease; }
.page-bg-image { position: absolute; inset: 0; background: var(--light-bg-image, none) center / cover no-repeat; opacity: .13; filter: blur(28px) saturate(.65); transform: scale(1.08); }
.page-grain { position: absolute; inset: 0; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.45' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .landscape::before { opacity: 1; }
html[data-theme="dark"] .landscape::after { opacity: .1; mix-blend-mode: screen; }
html[data-theme="dark"] .page-bg-image { background-image: var(--dark-bg-image, var(--light-bg-image, none)); opacity: .08; }
.glass-shell, .glass-card, .glass-chrome { border: 1px solid var(--glass-edge); background: var(--glass); box-shadow: var(--inner-light), var(--shadow-soft); backdrop-filter: blur(32px) saturate(145%); -webkit-backdrop-filter: blur(32px) saturate(145%); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.glass-shell { border-radius: var(--hero-radius, 32px); }
.glass-card { background: var(--glass-card); border-radius: var(--radius-lg); backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter: blur(24px) saturate(135%); }
.glass-chrome { background: var(--glass-chrome); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); box-shadow: var(--inner-light), var(--shadow-float); }
.site-frame, .site-header-wrap, .site-footer-wrap { width: min(calc(100% - 64px), var(--content-max)); margin-inline: auto; }
.site-frame { margin-top: 34px; outline: none; }
.site-header-wrap { position: sticky; top: max(18px, env(safe-area-inset-top)); padding-top: 22px; z-index: 40; }
.site-header { min-height: 72px; border-radius: 24px; display: flex; align-items: center; gap: 24px; padding: 10px 14px 10px 18px; }
.site-brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.avatar { display: inline-flex; flex: none; overflow: hidden; align-items: center; justify-content: center; background: var(--control-bg); box-shadow: 0 2px 6px rgb(46 62 101 / 12%), inset 0 0 0 1px rgb(255 255 255 / 50%); border-radius: 15px; }
.header-avatar { width: 42px; height: 42px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar, .friend-avatar { position: relative; }
.failed-image { opacity: 0; }
.avatar-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg-strong); color: var(--brand); font-size: 1.2rem; font-weight: 650; }
.post-visual .failed-image + .cover-glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.logo-dark { display: none !important; }
html[data-theme="dark"] .has-dark-logo .logo-light { display: none; }
html[data-theme="dark"] .has-dark-logo .logo-dark { display: block !important; }
.brand-mark { font-size: 1.35rem; font-weight: 700; color: var(--brand); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: .92rem; letter-spacing: -.025em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { font-size: .65rem; color: var(--text-2); letter-spacing: .045em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-nav { display: flex; gap: 3px; align-items: center; }
.nav-link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; border-radius: var(--radius-pill); font-size: .85rem; font-weight: 500; color: var(--text-2); transition: background 160ms ease, color 160ms ease, transform 140ms var(--ease); white-space: nowrap; }
.nav-link.is-active { color: var(--text); background: var(--control-bg); box-shadow: 0 2px 8px rgb(53 69 111 / 6%), inset 0 1px 0 var(--glass-edge); }
.header-actions { display: flex; align-items: center; gap: 4px; padding-left: 15px; border-left: 1px solid var(--line); }
.icon-btn { display: inline-flex; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; background: transparent; align-items: center; justify-content: center; flex: none; transition: background 140ms ease, transform 140ms var(--ease); }
.theme-icon { display: none; }
html[data-theme-mode="auto"] .theme-icon-auto { display: inline-flex; }
html[data-theme-mode="light"] .theme-icon-moon { display: inline-flex; }
html[data-theme-mode="dark"] .theme-icon-sun { display: inline-flex; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--text-2); font-size: .67rem; font-weight: 600; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.eyebrow-line { width: 28px; height: 1px; background: currentColor; opacity: .7; }
.hero-home { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 72px; align-items: center; padding: 58px 16px 74px; }
.hero-copy { min-width: 0; }
.hero-copy h1 { font-size: clamp(2.6rem, 5.2vw, 4.7rem); line-height: 1.1; font-weight: 700; letter-spacing: -.055em; max-width: 11ch; margin: 22px 0 24px; overflow-wrap: anywhere; text-wrap: balance; }
.hero-subtitle { color: var(--text-2); max-width: 36ch; font-size: 1rem; line-height: 1.9; margin: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-footnote { color: var(--text-2); font-size: .72rem; margin-top: 31px; display: flex; align-items: center; gap: 9px; }
.small-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.profile-card { position: relative; padding: 27px; box-shadow: var(--inner-light), var(--shadow-float); background: linear-gradient(135deg, rgb(255 255 255 / 26%), transparent 65%), var(--glass); }
.profile-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.profile-topline .eyebrow { font-size: .6rem; }
.profile-orbit { color: var(--text-3); }
.profile-orbit svg { width: 22px; height: 22px; }
.profile-identity { display: flex; align-items: center; gap: 15px; min-width: 0; }
.profile-avatar { width: 60px; height: 60px; border-radius: 21px; }
.profile-identity > div { min-width: 0; }
.profile-identity strong { font-size: 1.04rem; letter-spacing: -.035em; overflow-wrap: anywhere; }
.profile-identity p { font-size: .73rem; color: var(--text-2); margin: 3px 0 0; overflow-wrap: anywhere; }
.profile-status { display: flex; align-items: center; gap: 7px; font-size: .7rem; color: var(--text-2); margin-top: 23px; }
.profile-status strong { font-weight: 500; color: var(--text); margin-left: auto; min-width: 0; overflow-wrap: anywhere; text-align: right; }
.status-dot { width: 6px; height: 6px; background: #3c9b78; border-radius: 50%; box-shadow: 0 0 0 4px rgb(60 155 120 / 8%); margin-right: 4px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 25px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.profile-stats > * { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.profile-stats > * + * { border-left: 1px solid var(--line); }
.profile-stats strong { font-size: 1.45rem; font-weight: 550; letter-spacing: -.04em; line-height: 1.4; }
.profile-stats span { font-size: .67rem; color: var(--text-2); }
.stat-icon { min-height: 32px; display: flex; align-items: center; }
.hero-weather { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 57px; }
.weather-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.weather-symbol { display: flex; align-items: center; color: #bb894c; }
.weather-symbol svg { width: 30px; height: 30px; }
.weather-location { font-size: .83rem; font-weight: 600; }
.weather-left p { font-size: .64rem; line-height: 1.5; color: var(--text-2); margin: 4px 0 0; }
.weather-right { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.weather-right strong { font-size: 1.65rem; line-height: 1.2; font-weight: 500; letter-spacing: -.04em; }
.weather-right small { font-size: 1.3rem; }
.weather-pill { font-size: .58rem; color: var(--text-2); margin-top: 3px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 24px; align-items: start; }
.main-column, .side-column, .article-main { min-width: 0; }
.post-stream-panel { padding: 29px 30px 12px; background: var(--glass-reading); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head h2 { font-size: 1.46rem; letter-spacing: -.045em; line-height: 1.3; font-weight: 650; margin: 6px 0 0; }
.section-head .eyebrow { font-size: .57rem; }
.section-count { font-size: .69rem; color: var(--text-2); }
.heading-period { color: var(--brand); }
.category-strip { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 23px; margin-bottom: 3px; }
.post-card { padding-block: 26px; }
.post-card + .post-card { border-top: 1px solid var(--line); }
.post-card-link { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 24px; align-items: center; border-radius: 18px; }
.post-visual { height: 147px; position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(150deg, #c7d8ed, #e0d2ec); box-shadow: inset 0 0 0 1px rgb(100 115 148 / 8%); }
.post-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms var(--ease); }
.post-visual.no-image { display: grid; place-items: center; }
.cover-glyph svg { width: 42px; height: 42px; opacity: .45; }
.featured-label { position: absolute; top: 10px; left: 10px; background: var(--control-bg); color: var(--text); padding: 3px 9px; font-size: .65rem; border-radius: 8px; backdrop-filter: blur(12px); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .66rem; line-height: 1.4; color: var(--text-2); }
.meta-dot { opacity: .5; }
.post-card-body h3 { font-size: 1.22rem; line-height: 1.5; letter-spacing: -.035em; font-weight: 650; margin: 10px 0 8px; overflow-wrap: anywhere; }
.post-card-body > p { font-size: .78rem; color: var(--text-2); line-height: 1.8; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.post-card-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 17px; font-size: .63rem; color: var(--text-2); }
.read-link { display: inline-flex; gap: 6px; align-items: center; color: var(--text); font-weight: 500; }
.read-link svg { width: 15px; height: 15px; transition: transform 180ms var(--ease); }
.side-column { display: grid; gap: 18px; }
.sidebar-card { padding: 25px; }
.sidebar-symbol { display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; margin-bottom: 24px; background: var(--control-bg); border-radius: 12px; color: var(--text-2); }
.sidebar-card .eyebrow { font-size: .55rem; letter-spacing: .11em; }
.sidebar-card h2 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.04em; margin: 7px 0 15px; }
.sidebar-card > p { margin: 0; font-size: .8rem; color: var(--text-2); line-height: 2; }
.sidebar-social { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 22px; }
.sidebar-social .social-link { width: 36px; height: 36px; min-height: 44px; padding: 0; justify-content: center; }
.sidebar-social .social-link > span:last-child { display: none; }
.sidebar-social .social-link svg { width: 17px; height: 17px; }
.section-head.compact { margin-bottom: 14px; }
.section-head.compact h2 { font-size: .87rem; margin: 0; }
.section-head.compact > span { color: var(--text-3); }
.section-head.compact svg { width: 16px; height: 16px; }
.sidebar-list { margin: 0; padding: 0; list-style: none; }
.sidebar-list li + li { border-top: 1px solid var(--line); }
.sidebar-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 9px 0; font-size: .76rem; color: var(--text-2); overflow-wrap: anywhere; }
.sidebar-note { font-size: .65rem; line-height: 1.9; color: var(--text-3); letter-spacing: .025em; padding-left: 25px; margin: 3px 0; }
.site-footer { padding: 58px 2px 28px; }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-brand { font-size: 1rem; letter-spacing: -.03em; font-weight: 650; overflow-wrap: anywhere; }
.footer-main p { font-size: .73rem; color: var(--text-2); margin: 8px 0 0; }
.footer-social { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px 20px; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 20px; color: var(--text-3); font-size: .6rem; overflow-wrap: anywhere; }
.footer-registration { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.security-link { display: inline-flex; align-items: center; gap: 4px; }
.security-link img { object-fit: contain; }
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--brand); z-index: 100; }
.floating-backtop { position: fixed; right: max(25px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); width: 46px; height: 46px; padding: 0; border-radius: 16px; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 180ms ease, transform 200ms var(--ease), visibility 200ms; z-index: 35; }
.floating-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.empty-state { text-align: center; padding: 44px 20px 52px; }
.empty-state h2, .empty-state h3 { font-size: 1.35rem; letter-spacing: -.04em; }
.empty-state p { font-size: .86rem; color: var(--text-2); }
.empty-icon { color: var(--text-2); }
.empty-icon svg { width: 32px; height: 32px; }
.empty-state .btn { margin-top: 15px; }
.muted { color: var(--text-2); }
.mtop-xl { margin-top: 28px; }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover, .nav-link:hover { background: var(--bg-soft); }
  .post-card-link:hover .post-visual img { transform: scale(1.035); }
  .post-card-link:hover .read-link svg { transform: translateX(3px); }
  .sidebar-list a:hover, .footer-meta a:hover { color: var(--brand); }
}
.icon-btn:active, .btn:active, .chip:active, .nav-link:active { transform: scale(.97); transition-duration: 80ms; }
@media (max-width: 1080px) {
  .hero-home { grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; }
  .nav-link { padding-inline: 15px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
  .post-stream-panel { padding-inline: 24px; }
  .post-card-link { grid-template-columns: 135px minmax(0, 1fr); gap: 18px; }
  .post-visual { height: 137px; }
}
@media (max-width: 840px) {
  .site-frame, .site-header-wrap, .site-footer-wrap { width: calc(100% - 40px); }
  .site-header { gap: 12px; }
  .header-actions { padding-left: 8px; }
  .brand-text small { display: none; }
  .nav-link { padding-inline: 12px; }
  .hero-home { gap: 24px; padding: 44px 6px 50px; grid-template-columns: minmax(0, 1fr) 300px; }
  .profile-card { padding: 23px; }
  .profile-identity { gap: 11px; }
  .profile-avatar { width: 50px; height: 50px; border-radius: 17px; }
  .profile-identity strong { font-size: .88rem; }
  .content-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: 1fr 1fr; }
  .sidebar-note { grid-column: 1 / -1; padding-inline: 5px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 100px; }
  .site-header-wrap { top: max(12px, env(safe-area-inset-top)); padding-top: 12px; }
  .site-header { position: relative; border-radius: 21px; min-height: 66px; padding: 9px 10px 9px 14px; flex-wrap: wrap; }
  .header-avatar { width: 36px; height: 36px; border-radius: 13px; }
  .brand-text strong { font-size: .8rem; }
  .header-actions { border: 0; padding-left: 0; gap: 0; }
  .js .mobile-only { display: inline-flex !important; }
  .site-nav { order: 3; flex: 0 0 100%; overflow-x: auto; justify-content: flex-start; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; padding-top: 10px; border-top: 1px solid var(--line); flex-direction: column; align-items: stretch; max-height: min(60dvh, 450px); overflow-y: auto; }
  .site-nav .nav-link { min-height: 46px; }
  .hero-home { grid-template-columns: 1fr; gap: 36px; padding: 35px 6px 40px; }
  .hero-copy h1 { font-size: clamp(2.75rem, 10vw, 4.3rem); max-width: 12ch; margin: 19px 0 20px; }
  .hero-subtitle { font-size: .93rem; max-width: 33ch; }
  .hero-actions { gap: 10px; margin-top: 25px; }
  .hero-footnote { margin-top: 24px; font-size: .65rem; }
  .profile-card { padding: 24px; }
  .profile-topline { margin-bottom: 19px; }
  .profile-avatar { width: 54px; height: 54px; }
  .profile-identity strong { font-size: 1.05rem; }
  .profile-status { margin-top: 18px; }
  .profile-stats { margin: 19px 0; padding-block: 16px; }
  .post-stream-panel { padding: 25px 22px 6px; }
  .section-head h2 { font-size: 1.3rem; }
  .side-column { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sidebar-card { padding: 21px; }
  .about-card { grid-column: 1 / -1; }
  .archive-card { grid-column: 1 / -1; }
  .sidebar-symbol { margin-bottom: 18px; }
  .sidebar-note { display: none; }
  .footer-main { align-items: flex-start; flex-direction: column; gap: 18px; }
  .site-footer { padding-top: 38px; }
  .footer-meta { line-height: 1.9; margin-top: 22px; }
}
@media (max-width: 480px) {
  .site-frame, .site-header-wrap, .site-footer-wrap { width: calc(100% - 28px); }
  .site-frame { margin-top: 20px; }
  .site-brand { gap: 8px; }
  .header-actions .icon-btn { width: 38px; min-height: 44px; }
  .post-card-link { grid-template-columns: 1fr; gap: 18px; }
  .post-visual { height: 190px; }
  .post-card { padding-block: 24px; }
  .post-card-body h3 { font-size: 1.18rem; }
  .post-card-body > p { font-size: .8rem; }
  .floating-backtop { right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); }
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-shell, .glass-card, .glass-chrome { background: var(--bg-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-shell, .glass-card, .glass-chrome, .search-dialog { background: var(--bg-strong) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .page-bg-image { display: none; }
}
@media (prefers-contrast: more) {
  :root { --text-2: #313d53; --text-3: #394760; --line: #77849b; --glass-edge: #77849b; }
  html[data-theme="dark"] { --text-2: #e0e7f3; --text-3: #d4deef; --line: #8b9ab4; --glass-edge: #8b9ab4; }
  .glass-shell, .glass-card, .glass-chrome { background: var(--bg-strong); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #four-seasons-canvas { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .post-card-link:hover .post-visual img, .icon-btn:active, .btn:active, .chip:active, .nav-link:active { transform: none; }
}