/* 动效参数在 :root 中调整；关闭动效请使用系统的“减少动态效果”。 */
:root { --qs-ease: cubic-bezier(.22,1,.36,1); --qs-accent: #bbcee4; --pointer-x: 0px; --pointer-y: 0px; --scroll-shift: 0px; }
[data-theme="light"] { --qs-accent: #425d7d; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-behavior: auto; }
html[data-theme="light"] { color-scheme: light; }
body { overflow: hidden; height: 100vh; height: 100dvh; display: block; line-height: 1.65; }
button,input,textarea,select { font: inherit; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 3px solid var(--qs-accent) !important; outline-offset: 4px; }
.sidebar { position: fixed; inset: 0 auto 0 0; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar .nav-item { flex-shrink: 0; min-height: 48px; }
.sidebar .logo-area { flex-shrink: 0; }
.sidebar-bottom-actions { padding-top: 16px; }
.main-content { margin-left: var(--nav-width-expanded); width: calc(100% - var(--nav-width-expanded)); min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; transition: margin-left .4s var(--qs-ease), width .4s var(--qs-ease); }
.sidebar.collapsed ~ .main-content { margin-left: var(--nav-width-collapsed); width: calc(100% - var(--nav-width-collapsed)); }
.page-container { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: 100px; }
h1.page-title, [data-theme="light"] h1.page-title { font-size: clamp(1.85rem,3.1vw,3.2rem); font-weight: 400; line-height: 1.4; letter-spacing: .035em; animation: none; text-wrap: balance; }
.logo-area span { font-family: inherit !important; }
.bio h2 { font-weight: 500; }
.bio p { opacity: .9; }
.typed-line { display: grid; }
.typed-line > span { grid-area: 1 / 1; }
.typed-reserve { visibility: hidden; }
.typed-visual::after { content: ''; display: inline-block; height: 1em; border-right: 1px solid currentColor; vertical-align: -.12em; margin-left: 4px; animation: qs-blink .8s steps(1) 6; }
@keyframes qs-blink { 50% { opacity: 0; } }
.stat-num { font-variant-numeric: tabular-nums; min-width: 3ch; }
.bg-slideshow { position: absolute; height: 100%; transform: translate3d(var(--pointer-x), calc(var(--pointer-y) + var(--scroll-shift)), 0) scale(1.04); transform-origin: top center; }
.bg-mask { background: linear-gradient(90deg,rgba(6,10,16,.85),rgba(6,10,16,.38)), linear-gradient(0deg,var(--md-sys-color-background),transparent 45%); }
.ambient-background { position: fixed; inset: -12%; z-index: 0; pointer-events: none; opacity: .45; background: radial-gradient(ellipse at 72% 24%,rgba(115,146,189,.18),transparent 42%),radial-gradient(ellipse at 24% 75%,rgba(176,152,184,.10),transparent 38%); animation: qs-ambient 20s ease-in-out infinite alternate; }
@keyframes qs-ambient { to { transform: translate(3%, -2%) scale(1.08); } }
html[data-page="about"] .ambient-background { opacity: .15; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.image-pending { background: linear-gradient(105deg,var(--md-sys-color-surface-container) 30%,rgba(160,170,185,.2) 48%,var(--md-sys-color-surface-container) 66%); background-size: 220% 100%; animation: qs-shimmer 1.8s linear infinite; }
img.image-pending { color: transparent; }
@keyframes qs-shimmer { to { background-position: -220% 0; } }
img.image-error { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); object-fit: contain; }
.empty-gallery { padding: 42px 0; color: var(--md-sys-color-on-surface); }
#site-loader { position: fixed; inset: 0; z-index: 12000; background: var(--md-sys-color-background); display: grid; place-content: center; padding: 24px; text-align: center; gap: 14px; transition: opacity .4s ease, visibility .4s; pointer-events: none; animation: qs-loader-rescue 0s 8s forwards; }
#site-loader.is-finished { opacity: 0; visibility: hidden; }
@keyframes qs-loader-rescue { to { opacity: 0; visibility: hidden; } }
.loader-wordmark { font-size: clamp(2rem,5vw,3.5rem); font-weight: 400; letter-spacing: .2em; }
.loader-caption { font-size: .8rem; letter-spacing: .18em; opacity: .7; }
#site-loader progress { width: min(260px,70vw); height: 3px; border: 0; accent-color: var(--qs-accent); margin: 18px auto 0; }
#site-loader progress::-webkit-progress-bar { background: #8883; }
#site-loader progress::-webkit-progress-value { background: var(--qs-accent); transition: width .2s; }
#site-scroll-progress,#article-progress { position: fixed; height: 3px; left: 0; right: 0; top: 0; z-index: 1000; pointer-events: none; background: transparent; }
#site-scroll-progress span,#article-progress span { display: block; width: 100%; height: 100%; background: var(--qs-accent); transform-origin: left; transform: scaleX(0); }
#article-progress { top: 3px; height: 2px; }
#article-progress span { background: #cfad81; }
#back-to-top { position: fixed; bottom: 26px; right: 24px; width: 48px; height: 48px; z-index: 260; border: 0; border-radius: 50%; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-background); box-shadow: 0 4px 18px #0002; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: .25s; }
#back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#back-to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#back-to-top circle { fill: none; stroke: var(--qs-accent); stroke-width: 2; }
#back-to-top .ring-track { opacity: .15; }
#back-to-top .ring-value { stroke-dasharray: 138.23; stroke-dashoffset: 138.23; }
#back-to-top span { font-size: 1.35rem; }
.global-mini-player { left: auto; right: 24px; max-width: min(330px,calc(100vw - 32px)); visibility: hidden; }
.global-mini-player.visible { visibility: visible; }
.mobile-more-menu { visibility: hidden; }
.mobile-more-menu.active { visibility: visible; }
.mini-info { min-width: 0; }
.mini-controls { border: 0; flex-shrink: 0; }
.play-btn-overlay { border: 0; color: var(--md-sys-color-on-primary); }
.music-cover-wrapper { aspect-ratio: 1; }
.music-cover { width: 100%; height: 100%; object-fit: cover; }
.article-item { user-select: text; -webkit-user-select: text; }
.article-item.expanded { position: relative; padding: 30px 0 100px; animation: none; overflow: visible; min-height: 0; background: transparent; }
#page-writing.is-reading > .page-title,#page-writing.is-reading > .filter-tabs,#page-writing.is-reading .article-item:not(.expanded) { display: none !important; }
#page-writing.is-reading { padding-top: 88px; }
.article-item.expanded .article-content-wrapper { width: 100%; }
.article-item.expanded .article-title { font-size: clamp(1.8rem,3vw,2.5rem); }
.article-text-full { overflow-wrap: anywhere; }
.article-text-full h2,.article-text-full h3,.article-text-full h4 { line-height: 1.5; margin: 1.5em 0 .75em; scroll-margin-top: 100px; }
.article-text-full p { font-size: clamp(1rem,1.25vw,1.15rem); line-height: 2; }
#writing-back-btn { position: fixed; left: calc(var(--nav-width-expanded) + 32px); top: 24px; border: 0; color: var(--md-sys-color-on-primary-container); visibility: hidden; }
#writing-back-btn.visible { visibility: visible; }
.sidebar.collapsed ~ .main-content #writing-back-btn { left: calc(var(--nav-width-collapsed) + 32px); }
#article-toc { position: fixed; right: 28px; top: 24px; z-index: 250; width: 210px; max-height: 65vh; overflow-y: auto; background: var(--md-sys-color-surface); border: 1px solid #8883; border-radius: 16px; padding: 12px 16px; box-shadow: 0 8px 32px #0002; }
#article-toc summary { cursor: pointer; font-size: .95rem; }
#article-toc nav { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#article-toc a { color: var(--md-sys-color-on-surface); text-decoration: none; font-size: .85rem; padding: 6px 8px; border-left: 2px solid transparent; border-radius: 3px; overflow-wrap: anywhere; }
#article-toc a[aria-current] { border-color: var(--qs-accent); background: #8882; color: var(--md-sys-color-on-background); }
@media (min-width:1500px) { #page-writing.is-reading { padding-right: 270px; } }
@media (max-width:1499px) { #article-toc { width: min(260px,42vw); } }
.model-loading { pointer-events: auto; }
.model-loading.hidden { visibility: hidden; }
#model-progress { width: min(260px,65%); height: 5px; accent-color: var(--qs-accent); }
#model-retry,.model-info-toggle,.legal-button { border: 1px solid #8884; border-radius: 100px; padding: 8px 16px; color: inherit; background: var(--md-sys-color-surface-container); cursor: pointer; }
.model-info-toggle { margin: 12px 0; font-size: .85rem; }
.model-showcase-wrapper.info-collapsed .model-left-col { width: 220px; min-width: 180px; flex-basis: 220px; }
.model-info-panel { min-height: 0; }
.model-thumb { padding: 0; background: transparent; }
.site-footer { position: relative; z-index: 2; margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: .8rem; color: var(--md-sys-color-on-surface); }
.legal-button { font-size: .8rem; padding: 5px 12px; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 15000; padding: 10px 20px; border-radius: 8px; color: var(--md-sys-color-on-background); background: var(--md-sys-color-surface); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chat-notice { max-width: 700px; font-size: .85rem; opacity: .65; margin: -10px 0 18px; }
.chat-container { height: calc(100% - 150px); min-height: 280px; }
.chat-messages { min-height: 0; overscroll-behavior: contain; }
.chat-input { min-width: 0; font-size: 16px; }
.chat-input-area { flex-shrink: 0; padding-bottom: max(16px,env(safe-area-inset-bottom)); }
.msg { overflow-wrap: anywhere; white-space: pre-wrap; }
.context-menu-item { background: transparent; border: 0; font: inherit; text-align: left; }
@media (max-width:768px) {
  .main-content,.sidebar.collapsed ~ .main-content { margin-left: 0; width: 100%; }
  .page-container { padding-bottom: calc(155px + env(safe-area-inset-bottom)); }
  .global-mini-player,.sidebar.collapsed ~ .global-mini-player { left: auto; right: 14px; max-width: calc(100vw - 28px); bottom: calc(84px + env(safe-area-inset-bottom)); }
  #back-to-top { bottom: calc(86px + env(safe-area-inset-bottom)); right: 14px; width: 44px; height: 44px; }
  #writing-back-btn,.sidebar.collapsed ~ .main-content #writing-back-btn { left: 16px; top: 20px; padding: 9px 12px; }
  #article-toc { right: 16px; top: 20px; max-height: 50dvh; }
  .article-item.expanded { padding: 20px 0 50px; }
  .article-item.expanded .article-imgs img { max-width: 100% !important; }
  .model-showcase-wrapper { padding: 16px; }
  .model-viewer-panel { height: clamp(280px,55dvh,520px); }
  .model-info-panel { width: 100%; }
  .mobile-more-menu { max-height: calc(100dvh - 125px); overflow-y: auto; }
  #page-chat { height: var(--chat-viewport-height,100dvh); padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  #page-chat .chat-container { height: calc(100% - 145px); min-height: 190px; }
  .keyboard-open .bottom-bar,.keyboard-open .global-mini-player,.keyboard-open #back-to-top { visibility: hidden; pointer-events: none; }
  .keyboard-open #page-chat { padding-bottom: 10px; }
  .keyboard-open #page-chat .page-title { font-size: 1.35rem; margin-bottom: 10px; }
  .keyboard-open #page-chat .chat-notice { display: none; }
  .keyboard-open #page-chat .chat-container { height: calc(100% - 48px); min-height: 120px; }
}
@media (orientation:landscape) and (max-height:550px) {
  .sidebar { width: 80px; padding: 10px 8px; }
  .sidebar .nav-label,.sidebar .logo-area span { display: none; }
  .sidebar .logo-area { margin-bottom: 8px; height: 44px; }
  .sidebar .nav-item { height: 44px; min-height: 44px; margin-bottom: 2px; }
  .main-content { margin-left: 80px; width: calc(100% - 80px); }
  .model-showcase-wrapper { min-height: 350px; height: auto; }
  .model-viewer-panel { min-height: 300px; }
}
@media (orientation:landscape) and (max-height:550px) and (max-width:768px) { .main-content { margin-left: 0; width: 100%; } .global-mini-player { left: auto; right: 14px; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ambient-background { display: none !important; }
  .reveal-hidden { opacity: 1; transform: none; }
  .bg-slideshow { transform: none; }
  #site-loader { animation: none !important; display: none; }
}