:root {
  --background:#f6f7f9;
  --surface:#fff;
  --text:#202633;
  --secondary:#5e6879;
  --muted:#737e90;
  --border:#e5e8ed;
  --blue:#2454cc;
  --blue-soft:#eef3ff;
  --code:#f4f6f9;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif
}

[data-theme="dark"] {
  --background:#11151c;
  --surface:#191e28;
  --text:#e3e8f0;
  --secondary:#b1bac9;
  --muted:#98a3b4;
  --border:#2c3443;
  --blue:#8baaff;
  --blue-soft:#24314d;
  --code:#121821
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:25px
}
body {
  margin:0;
  background:var(--background);
  color:var(--text);
  font:14px/1.75 var(--font);
  -webkit-font-smoothing:antialiased
}
body {
  min-height:100vh;
  display:flex;
  flex-direction:column
}
main {
  flex:1
}
.site-skin {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(var(--skin-angle,135deg),var(--skin-start,#dbeafe),var(--skin-end,#ede9fe));
  isolation:isolate
}
.skin-media,
.skin-slides,
.skin-slide {
  position:absolute;
  inset:0
}
.skin-media img,
.skin-media video,
.skin-slide {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.015)
}
.skin-slide {
  opacity:0;
  visibility:hidden;
  transition:opacity 2s ease,visibility 2s ease,transform 12s ease
}
.skin-slide.is-active {
  opacity:1;
  visibility:visible;
  transform:scale(1.045)
}
.skin-aurora {
  position:absolute;
  inset:-18%;
  filter:blur(52px) saturate(118%);
  opacity:.58
}
.skin-aurora i {
  position:absolute;
  width:44vw;
  height:44vw;
  min-width:360px;
  min-height:360px;
  border-radius:50%;
  background:color-mix(in srgb,var(--skin-accent,#5b7cff) 64%,transparent);
  animation:skin-orbit 18s ease-in-out infinite alternate
}
.skin-aurora i:nth-child(1) {
  left:-4%;
  top:-8%
}
.skin-aurora i:nth-child(2) {
  right:-5%;
  top:16%;
  background:color-mix(in srgb,var(--skin-end,#ede9fe) 72%,transparent);
  animation-duration:23s;
  animation-direction:alternate-reverse
}
.skin-aurora i:nth-child(3) {
  left:32%;
  bottom:-24%;
  width:36vw;
  height:36vw;
  background:color-mix(in srgb,var(--skin-start,#dbeafe) 82%,transparent);
  animation-duration:27s
}
@keyframes skin-orbit {
  0% {transform:translate3d(-4%,-2%,0) scale(.92)}
  50% {transform:translate3d(12%,8%,0) scale(1.08)}
  100% {transform:translate3d(-2%,15%,0) scale(.98)}
}
.site-skin-overlay {
  position:absolute;
  inset:0;
  z-index:2;
  background:rgb(10 16 30 / var(--skin-overlay,.12))
}
.skin-gradient .site-skin-overlay {
  background:radial-gradient(circle at 18% 12%,rgb(255 255 255 / .42),transparent 34%),radial-gradient(circle at 82% 28%,rgb(255 255 255 / .22),transparent 30%),rgb(10 16 30 / calc(var(--skin-overlay,.12) * .35))
}
.skin-effects {
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%
}
body.has-site-skin {
  background:transparent
}
body.has-site-skin>.site-header,
body.has-site-skin>main,
body.has-site-skin>.site-footer,
body.has-site-skin>.reading-progress {
  position:relative;
  z-index:1
}
body.has-site-skin>.site-header {
  z-index:20
}
body.has-site-skin .site-header,
body.has-site-skin .site-footer {
  background:color-mix(in srgb,var(--surface) var(--panel-opacity,84%),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur,18px)) saturate(135%);
  backdrop-filter:blur(var(--glass-blur,18px)) saturate(135%)
}
body.has-site-skin .panel,
body.has-site-skin .post-card,
body.has-site-skin .cover-card {
  background:color-mix(in srgb,var(--surface) var(--panel-opacity,84%),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur,18px)) saturate(130%);
  backdrop-filter:blur(var(--glass-blur,18px)) saturate(130%);
  border-color:color-mix(in srgb,var(--border) 68%,white 32%);
  box-shadow:0 18px 55px rgb(15 23 42 / .10),inset 0 1px 0 rgb(255 255 255 / .35)
}
body.has-site-skin .page-intro {
  margin:28px 0 26px;
  padding:30px 34px;
  border:1px solid color-mix(in srgb,var(--border) 64%,white 36%);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) var(--panel-opacity,84%),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur,18px)) saturate(132%);
  backdrop-filter:blur(var(--glass-blur,18px)) saturate(132%);
  box-shadow:0 18px 52px rgb(15 23 42 / .08)
}
body.has-site-skin .section-heading {
  margin-bottom:10px;
  padding:10px 14px;
  border:1px solid color-mix(in srgb,var(--border) 68%,white 32%);
  border-radius:11px;
  color:var(--text);
  background:color-mix(in srgb,var(--surface) var(--panel-opacity,84%),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur,18px)) saturate(130%);
  backdrop-filter:blur(var(--glass-blur,18px)) saturate(130%);
  box-shadow:0 12px 32px rgb(15 23 42 / .07)
}
body.has-site-skin .section-heading h2,
body.has-site-skin .section-heading>a {
  color:var(--text)
}
body.has-site-skin .list-end {
  width:max-content;
  max-width:100%;
  margin:24px auto 0;
  padding:8px 12px;
  border:1px solid color-mix(in srgb,var(--border) 68%,white 32%);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) var(--panel-opacity,84%),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur,18px));
  backdrop-filter:blur(var(--glass-blur,18px))
}
[data-theme="dark"] body.has-site-skin .page-intro {
  box-shadow:0 18px 52px rgb(0 0 0 / .26)
}
html.skin-motion-disabled .site-skin video,
html.skin-motion-disabled .skin-effects {
  visibility:hidden
}
html.skin-motion-disabled .skin-aurora i,
html.skin-motion-disabled .skin-slide {
  animation-play-state:paused!important;
  transition:none!important
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--blue)
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px
}
button {
  background:none;
  border:0
}
img {
  max-width:100%;
  object-fit:cover
}
h1,h2,h3,p {
  margin:0
}
button .icon,a .icon {
  flex-shrink:0
}
.icon {
  display:inline-block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle
}
[hidden] {
  display:none!important
}
.container {
  width:calc(100% - 80px);
  max-width:1080px;
  margin-inline:auto
}
.skip-link {
  position:absolute;
  top:-70px;
  left:20px;
  background:var(--surface);
  padding:10px 15px;
  z-index:20
}
.skip-link:focus {
  top:10px
}

.site-header {
  position:relative;
  z-index:20;
  background:var(--header-bg,var(--surface));
  border-bottom:1px solid var(--border)
}
.header-inner {
  height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.1px;
  font-size:17px
}
.brand img {
  border-radius:7px
}
.brand strong {
  font-weight:650
}
.brand>span {
  color:var(--muted);
  font-size:14px;
  margin-left:1px
}
.header-right,.header-actions,.main-nav {
  display:flex;
  align-items:center
}
.main-nav {
  gap:28px;
  font-size:13px;
  color:var(--secondary)
}
.main-nav a[aria-current] {
  color:var(--blue);
  font-weight:600
}
.header-actions {
  margin-left:26px;
  padding-left:19px;
  border-left:1px solid var(--border);
  gap:6px
}
.icon-button {
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  color:var(--secondary);
  border-radius:5px
}
.icon-button:hover {
  background:var(--code);
  color:var(--blue)
}
.menu-button {
  display:none
}
.theme-sun {
  display:none
}
[data-theme=dark] .theme-moon {
  display:none
}
[data-theme=dark] .theme-sun {
  display:contents
}

.page-intro {
  padding:40px 0 29px
}
.page-intro h1 {
  font-size:30px;
  letter-spacing:-.6px;
  line-height:1.5;
  font-weight:650
}
.page-intro p {
  color:var(--secondary);
  font-size:13px;
  margin-top:7px
}
.blog-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:28px;
  padding-bottom:50px;
  align-items:start
}
.article-column {
  min-width:0
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:40px;
  padding-bottom:13px
}
.section-heading h2 {
  font-size:15px;
  font-weight:600
}
.section-heading h2 span {
  font-size:11px;
  color:var(--muted);
  background:var(--border);
  display:inline-flex;
  min-width:20px;
  height:20px;
  justify-content:center;
  align-items:center;
  border-radius:4px;
  margin-left:7px;
  font-weight:400
}
.section-heading>a {
  font-size:12px;
  color:var(--secondary);
  display:flex;
  gap:5px;
  align-items:center
}
.section-heading .icon {
  width:15px
}
.post-list {
  display:grid;
  gap:16px
}
.post-card,.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px
}
.post-card {
  padding:23px 27px 20px;
  transition:border-color .15s
}
.post-card:hover {
  border-color:#bcc7db
}
[data-theme=dark] .post-card:hover {
  border-color:#52617c
}
.card-top {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  font-size:11px
}
.category {
  color:var(--blue);
  font-size:12px
}
.card-top time {
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.post-card h2 {
  font-size:22px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:-.35px;
  margin:10px 0 8px
}
.post-excerpt {
  font-size:13px;
  line-height:1.9;
  color:var(--secondary)
}
.card-bottom {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:22px
}
.card-bottom>div {
  display:flex;
  align-items:center;
  gap:13px
}
.post-tags {
  display:inline-flex;
  gap:6px;
  flex-wrap:wrap
}
.post-tags>span,.small-tag {
  font-size:10px;
  line-height:1.9;
  padding:1px 7px;
  background:var(--code);
  border-radius:3px;
  color:var(--secondary)
}
.read-time {
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}
.read-more {
  font-size:12px;
  color:var(--blue);
  display:inline-flex;
  gap:6px;
  align-items:center;
  white-space:nowrap
}
.read-more .icon {
  width:15px
}
.list-end {
  text-align:center;
  color:var(--muted);
  font-size:11px;
  margin-top:24px
}
.list-end a {
  color:var(--secondary)
}

.sidebar {
  display:grid;
  gap:18px;
  padding-top:40px
}
.panel {
  padding:22px
}
.sidebar h2 {
  font-size:13px;
  font-weight:600
}
.author-intro {
  display:flex;
  align-items:center;
  gap:13px
}
.author-intro img {
  border-radius:9px
}
.author-intro h2 {
  font-size:18px;
  line-height:1.5
}
.author-intro span {
  font-size:11px;
  color:var(--muted)
}
.author-panel p {
  font-size:12px;
  color:var(--secondary);
  line-height:1.95;
  margin-top:16px
}
.author-links {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:16px;
  margin-top:16px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--secondary)
}
.author-links .icon {
  width:13px
}
.category-panel h2 {
  margin-bottom:12px
}
.category-panel>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  padding:7px 0;
  color:var(--secondary)
}
.category-panel>a:hover {
  color:var(--blue)
}
.category-count {
  font-size:10px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.update-panel time {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:14px
}
.update-panel p {
  font-size:12px;
  line-height:1.95;
  color:var(--secondary);
  margin:7px 0 14px
}
.update-panel>a {
  font-size:11px;
  color:var(--secondary)
}
.update-panel .icon {
  width:13px
}
.site-footer {
  border-top:1px solid var(--border);
  padding:25px 0;
  font-size:11px;
  color:var(--muted)
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.footer-inner>div {
  display:flex;
  gap:23px
}

.archive-toolbar {
  padding:21px
}
.archive-toolbar+.archive-meta {
  margin-top:18px
}
.search-field {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:5px;
  padding:9px 12px;
  color:var(--muted);
  background:var(--background)
}
.search-field input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:13px;
  outline-offset:7px
}
.search-field input::placeholder {
  color:var(--muted)
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:15px
}
.filter {
  padding:4px 12px;
  border-radius:4px;
  font-size:11px;
  color:var(--secondary)
}
.filter:hover {
  background:var(--code)
}
.filter.is-active {
  color:var(--blue);
  background:var(--blue-soft)
}
.archive-meta {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;
  margin-bottom:13px
}
.empty-state {
  text-align:center;
  padding:45px 20px
}
.empty-state h2 {
  font-size:18px
}
.empty-state p {
  color:var(--secondary);
  margin:8px 0 20px;
  font-size:12px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--blue);
  color:var(--blue);
  border-radius:5px;
  padding:8px 14px;
  font-size:12px
}
.button:hover {
  background:var(--blue-soft)
}

.article-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 235px;
  gap:30px;
  padding:29px 0 50px;
  align-items:start
}
.back-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--secondary);
  font-size:12px;
  margin-bottom:20px
}
.back-link .icon {
  width:15px
}
.article-panel {
  padding:32px 38px
}
.article-header {
  border-bottom:1px solid var(--border);
  padding-bottom:25px;
  margin-bottom:26px
}
.article-header h1 {
  font-size:30px;
  line-height:1.5;
  font-weight:650;
  letter-spacing:-.5px;
  margin:10px 0
}
.article-subtitle {
  color:var(--secondary);
  font-size:13px;
  line-height:1.8
}
.byline {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  font-size:11px;
  color:var(--muted);
  margin-top:19px
}
.byline img {
  border-radius:4px
}
.prose {
  font-size:15px;
  line-height:1.95;
  overflow-wrap:anywhere
}
.prose p {
  margin:17px 0
}
.prose h2 {
  font-size:22px;
  font-weight:600;
  line-height:1.5;
  margin:33px 0 16px
}
.prose h3 {
  font-size:18px;
  margin:25px 0 13px
}
.prose h4 {
  font-size:15px;
  font-weight:650;
  margin:21px 0 10px
}
.prose ul,.prose ol {
  padding-left:22px
}
.prose li {
  margin:8px 0
}
.prose a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:3px
}
.prose code {
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:.86em;
  background:var(--code);
  padding:2px 5px;
  border-radius:3px
}
.prose pre {
  padding:17px 18px;
  background:var(--code);
  border:1px solid var(--border);
  border-radius:5px;
  overflow-x:auto;
  line-height:1.8;
  font-size:12px;
  white-space:pre;
  overflow-wrap:normal
}
.prose pre code {
  padding:0;
  background:none;
  border-radius:0;
  font-size:inherit
}
.prose .sample-notice {
  font-size:12px;
  color:var(--secondary);
  padding:10px 13px;
  background:var(--code);
  border-left:2px solid var(--border);
  margin:0 0 22px
}
.prose blockquote {
  margin:22px 0;
  padding:4px 18px;
  border-left:3px solid var(--blue);
  color:var(--secondary)
}
.prose table {
  width:100%;
  border-collapse:collapse;
  font-size:13px
}
.prose td,.prose th {
  border:1px solid var(--border);
  padding:8px 12px;
  text-align:left
}
.article-actions {
  border-top:1px solid var(--border);
  padding-top:21px;
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.share-button {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  color:var(--secondary)
}
.share-button .icon {
  width:15px
}
.share-status {
  font-size:11px;
  color:var(--secondary);
  margin-top:8px
}
.share-fallback {
  display:block;
  font-size:11px;
  color:var(--secondary)
}
.share-fallback input {
  display:block;
  width:100%;
  padding:8px;
  margin-top:8px;
  border:1px solid var(--border);
  background:var(--code);
  color:var(--text);
  border-radius:4px;
  font-size:12px
}
.next-article {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
  padding:21px 25px;
  gap:18px
}
.next-article span {
  font-size:11px;
  color:var(--muted)
}
.next-article h2 {
  font-size:17px;
  font-weight:550;
  margin-top:5px
}
.article-sidebar {
  position:sticky;
  top:25px;
  padding-top:43px
}
.toc h2 {
  font-size:13px;
  margin-bottom:12px
}
.toc>a {
  display:flex;
  gap:8px;
  font-size:11px;
  line-height:1.8;
  color:var(--secondary);
  padding:7px 0
}
.toc>a:hover {
  color:var(--blue)
}
.toc>a>span {
  font-size:10px;
  color:var(--muted)
}
.toc .toc-top {
  border-top:1px solid var(--border);
  margin-top:15px;
  padding-top:14px;
  font-size:10px
}
.reading-progress {
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--blue);
  z-index:30
}

.about-panel {
  padding:32px
}
.profile {
  display:flex;
  gap:18px;
  align-items:center;
  padding-bottom:25px;
  border-bottom:1px solid var(--border)
}
.profile img {
  border-radius:10px
}
.profile h2 {
  font-size:22px;
  font-weight:600
}
.profile p {
  color:var(--secondary);
  font-size:12px;
  margin-top:3px
}
.about-panel .button {
  margin-top:16px
}
.notes-timeline {
  position:relative;
  display:grid;
  gap:16px
}
.notes-timeline::before {
  content:"";
  position:absolute;
  left:92px;
  top:18px;
  bottom:18px;
  width:1px;
  background:var(--border)
}
.note-card {
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding:23px 25px
}
.note-date {
  position:relative;
  padding-top:3px
}
.note-date time {
  color:var(--muted);
  font-size:10px;
  font-variant-numeric:tabular-nums
}
.note-date span {
  position:absolute;
  width:9px;
  height:9px;
  right:-20px;
  top:9px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 1px var(--blue)
}
.note-content p {
  margin-top:10px;
  color:var(--secondary);
  font-size:14px;
  line-height:1.95
}
.not-found {
  padding:100px 20px;
  text-align:center
}
.not-found h1 {
  font-size:64px;
  font-weight:600;
  color:var(--blue)
}
.not-found h2 {
  font-size:22px
}
.not-found p {
  color:var(--secondary);
  margin:12px 0 25px
}

@media(min-width:761px) {
  .archive-toolbar~.post-list {
    min-height:180px
  }
}

@media(max-width:1000px) {
  .container {
    width:calc(100% - 56px)
  }
  .blog-layout {
    grid-template-columns:minmax(0,1fr) 235px;
    gap:23px
  }
  .post-card {
    padding:21px 22px
  }
  .card-bottom>div {
    gap:8px
  }
  .read-time {
    display:none
  }
  .article-layout {
    grid-template-columns:minmax(0,1fr) 200px;
    gap:23px
  }
  .article-panel {
    padding:29px
  }
  .panel {
    padding:21px
  }
  .article-panel {
    padding:29px
  }
  .main-nav {
    gap:23px
  }
}

@media(max-width:760px) {
  body.has-site-skin .page-intro {
    margin:18px 0
  }
  .container {
    width:calc(100% - 32px)
  }
  .header-inner {
    height:62px
  }
  .brand {
    font-size:16px
  }
  .brand img {
    width:26px;
    height:26px
  }
  .brand>span {
    font-size:13px
  }
  .header-actions {
    padding-left:0;
    border:0;
    margin-left:0;
    gap:3px
  }
  .menu-button {
    display:inline-flex
  }
  .main-nav {
    display:none;
    position:absolute;
    z-index:10;
    left:0;
    right:0;
    top:62px;
    background:var(--surface);
    padding:12px 20px 20px;
    border-bottom:1px solid var(--border);
    gap:0;
    flex-direction:column;
    align-items:stretch
  }
  .main-nav.is-open {
    display:flex
  }
  .main-nav a {
    padding:10px 4px;
    font-size:14px
  }
  .page-intro {
    padding:28px 0 24px
  }
  .page-intro h1 {
    font-size:25px;
    letter-spacing:-.4px
  }
  .page-intro p {
    font-size:12px;
    line-height:1.9;
    margin-top:6px;
    max-width:320px
  }
  .blog-layout {
    grid-template-columns:1fr;
    gap:22px;
    padding-bottom:32px
  }
  .section-heading {
    padding-bottom:12px
  }
  .section-heading h2 {
    font-size:14px
  }
  .section-heading>a {
    font-size:11px
  }
  .post-list {
    gap:13px
  }
  .post-card {
    padding:20px 19px 18px
  }
  .post-card h2 {
    font-size:20px;
    letter-spacing:-.25px;
    margin:10px 0 9px
  }
  .post-excerpt {
    font-size:12px
  }
  .card-top {
    font-size:10px
  }
  .category {
    font-size:11px
  }
  .card-bottom {
    margin-top:19px;
    gap:7px
  }
  .post-tags {
    gap:4px
  }
  .post-tags>span {
    font-size:9px;
    padding:1px 6px
  }
  .read-more {
    font-size:11px;
    gap:3px
  }
  .read-more .icon {
    width:13px
  }
  .sidebar {
    padding-top:0;
    gap:14px
  }
  .update-panel {
    display:none
  }
  .author-panel,.category-panel {
    padding:21px
  }
  .author-panel p {
    margin-top:13px
  }
  .author-links {
    margin-top:13px;
    padding-top:13px
  }
  .category-panel>a {
    padding:6px 0
  }
  .list-end {
    margin-top:20px
  }
  .site-footer {
    padding:23px 0;
    font-size:10px
  }
  .footer-inner {
    flex-direction:column;
    align-items:flex-start;
    gap:9px
  }
  .footer-inner>div {
    gap:20px
  }
  .archive-toolbar {
    padding:18px
  }
  .filters {
    gap:4px
  }
  .filter {
    padding:4px 10px
  }
  .article-layout {
    display:block;
    padding:22px 0 32px
  }
  .article-sidebar {
    display:none
  }
  .back-link {
    margin-bottom:17px
  }
  .article-panel {
    padding:24px 20px
  }
  .article-header h1 {
    font-size:25px;
    letter-spacing:-.4px
  }
  .article-subtitle {
    font-size:12px
  }
  .article-header {
    padding-bottom:22px;
    margin-bottom:23px
  }
  .byline {
    gap:7px;
    font-size:10px
  }
  .prose {
    font-size:14px;
    line-height:1.95
  }
  .prose h2 {
    font-size:20px;
    margin-top:29px
  }
  .prose pre {
    font-size:11px;
    padding:14px 13px
  }
  .article-actions {
    gap:8px
  }
  .share-button {
    font-size:10px
  }
  .next-article {
    padding:19px 21px
  }
  .next-article h2 {
    font-size:16px
  }
  .about-panel {
    padding:24px 21px
  }
  .profile {
    gap:13px
  }
  .profile img {
    width:50px;
    height:50px
  }
  .profile h2 {
    font-size:19px
  }
  .profile p {
    font-size:11px
  }
  .note-card {
    grid-template-columns:1fr;
    gap:7px;
    padding:21px
  }
  .notes-timeline::before,
  .note-date span {
    display:none
  }
  .note-content p {
    font-size:13px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
  .site-skin video,
  .skin-effects,
  .skin-preview-particles {
    display:none
  }
  .skin-aurora span,
  .skin-slide,
  .skin-preview-aurora span {
    animation:none!important
  }
}

@media print {
  .site-skin,.site-header,.site-footer,.article-sidebar,.back-link,.article-actions,.next-article,.reading-progress {
    display:none
  }
  body {
    background:white;
    color:black
  }
  .container {
    width:100%;
    max-width:none
  }
  .article-layout {
    display:block;
    padding:0
  }
  .article-panel {
    border:0;
    padding:0
  }
  .prose pre {
    white-space:pre-wrap
  }
  .article-header {
    margin-top:0
  }
}

/* 卡片顶部左侧：分类 + 置顶/系列徽标 */
.card-top-left {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0
}
.series {
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}
.featured {
  font-size:10px;
  line-height:1.9;
  padding:1px 7px;
  background:var(--blue-soft);
  color:var(--blue);
  border-radius:3px;
  white-space:nowrap
}
.article-header .series {
  margin-left:9px
}

/* ===== 主页封面大卡片 ===== */
.cover-list {
  gap:26px
}
.cover-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .15s
}
.cover-card:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(15,23,42,.13);
  border-color:#bcc7db
}
[data-theme="dark"] .cover-card:hover {
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  border-color:#52617c
}
.cover-media {
  position:relative;
  display:block;
  aspect-ratio:21/10;
  overflow:hidden
}
.cover-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease
}
.cover-card:hover .cover-media img {
  transform:scale(1.03)
}
.cover-fallback {
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--blue) 0%,#16224d 55%,#0d142e 100%)
}
.cover-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,12,24,0) 28%,rgba(8,12,24,.84) 100%)
}
.cover-text {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:block;
  padding:26px 30px 20px
}
.cover-category {
  font-size:12px;
  color:rgba(255,255,255,.85);
  letter-spacing:.4px
}
.cover-text h2 {
  font-size:24px;
  font-weight:650;
  line-height:1.45;
  letter-spacing:-.3px;
  margin:8px 0 6px;
  color:#fff
}
.cover-media:hover h2 {
  color:#fff
}
.cover-text p {
  font-size:13px;
  line-height:1.7;
  color:rgba(255,255,255,.8);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.cover-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 30px;
  font-size:11px;
  color:var(--muted)
}
.cover-meta-left {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0
}
.cover-meta time {
  font-variant-numeric:tabular-nums
}
.cover-go {
  font-size:13px;
  font-weight:600;
  color:var(--blue);
  display:inline-flex;
  gap:6px;
  align-items:center;
  white-space:nowrap
}
.cover-go .icon {
  width:15px
}

/* ===== 管理后台 ===== */
.admin-app {
  padding:34px 0 50px
}
.admin-login {
  max-width:400px;
  margin:60px auto;
  padding:34px;
  text-align:center
}
.admin-login h1 {
  font-size:22px;
  margin-bottom:8px
}
.admin-login p {
  font-size:12px;
  color:var(--secondary);
  margin-bottom:18px
}
.admin-login form {
  display:flex;
  gap:10px
}
.admin-login input {
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--background);
  color:var(--text);
  padding:9px 12px;
  font-size:13px
}
.form-error {
  color:#d6336c;
  font-size:12px;
  margin-top:12px
}
.admin-hint {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  margin:10px 0 16px
}
.admin-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px
}
.admin-head h1 {
  font-size:24px;
  font-weight:650;
  letter-spacing:-.4px
}
.admin-head-actions {
  display:flex;
  align-items:center;
  gap:14px
}
.admin-badge {
  font-size:10px;
  padding:2px 9px;
  border-radius:3px;
  background:var(--blue-soft);
  color:var(--blue)
}
.admin-tabs {
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--border);
  margin-bottom:22px
}
.admin-tab {
  padding:9px 16px;
  font-size:13px;
  color:var(--secondary);
  border-bottom:2px solid transparent;
  margin-bottom:-1px
}
.admin-tab:hover {
  color:var(--blue)
}
.admin-tab.is-active {
  color:var(--blue);
  font-weight:600;
  border-bottom-color:var(--blue)
}
.admin-panel {
  padding:26px;
  margin-bottom:20px
}
.admin-panel h2 {
  font-size:16px;
  font-weight:600
}
.admin-row-between {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}
.count-badge {
  font-size:11px;
  color:var(--muted);
  background:var(--border);
  display:inline-flex;
  min-width:20px;
  height:20px;
  justify-content:center;
  align-items:center;
  border-radius:4px;
  margin-left:6px;
  font-weight:400;
  vertical-align:2px;
  padding:0 5px
}
.admin-mode-switch {
  display:flex;
  gap:6px
}
.theme-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px;
  margin-top:6px
}
.theme-field {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 13px;
  font-size:12px;
  color:var(--secondary)
}
.theme-controls {
  display:flex;
  align-items:center;
  gap:7px
}
.theme-controls input[type="color"] {
  width:30px;
  height:26px;
  padding:0;
  border:1px solid var(--border);
  border-radius:4px;
  background:none;
  cursor:pointer
}
.theme-hex {
  width:74px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--background);
  color:var(--text);
  font-size:11px;
  padding:4px 6px;
  font-family:"SFMono-Regular",Consolas,monospace
}
.theme-clear {
  color:var(--muted);
  font-size:15px;
  line-height:1;
  padding:2px 4px;
  border-radius:3px
}
.theme-clear:hover {
  color:#d6336c;
  background:var(--code)
}
.admin-actions {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:20px;
  flex-wrap:wrap
}
.admin-link-btn {
  font-size:12px;
  color:var(--blue)
}
.admin-link-btn:hover {
  text-decoration:underline
}
.save-status {
  font-size:12px;
  color:var(--secondary)
}
.admin-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:8px
}
.admin-table th {
  text-align:left;
  color:var(--muted);
  font-weight:500;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  font-size:11px
}
.admin-table td {
  padding:10px;
  border-bottom:1px solid var(--border);
  color:var(--secondary)
}
.admin-table td:first-child {
  color:var(--text)
}
.admin-ops {
  text-align:right;
  white-space:nowrap
}
.admin-ops button {
  font-size:11px;
  color:var(--blue);
  margin-left:12px
}
.admin-ops button:hover {
  text-decoration:underline
}
.admin-ops button.danger {
  color:#d6336c
}
.admin-tag-readonly {
  font-size:10px;
  color:var(--muted);
  background:var(--code);
  padding:2px 8px;
  border-radius:3px
}
.admin-tag-converted {
  font-size:10px;
  color:#2b8a3e;
  background:#e7f5ea;
  padding:2px 8px;
  border-radius:3px
}
[data-theme="dark"] .admin-tag-converted {
  color:#8ce99a;
  background:#1e3527
}
.admin-empty {
  font-size:12px;
  color:var(--muted);
  padding:24px 0;
  text-align:center
}
.site-settings-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px
}
.about-settings-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 16px;
  margin:22px 0 16px
}
.about-toolbar {
  margin-bottom:10px
}
.about-writer {
  margin-top:0
}
.about-writer .editor-wrap,
.about-writer .editor-preview {
  min-height:480px;
  height:clamp(480px,60vh,720px)
}
.about-preview-intro {
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border)
}
.about-preview-intro h1 {
  font-size:28px;
  margin:0
}
.about-preview-intro p {
  color:var(--secondary);
  margin:7px 0 0
}
.about-preview-greeting {
  font-size:18px;
  margin-bottom:18px
}
.about-preview-button {
  display:inline-flex;
  margin-top:20px
}
.settings-section {
  border:1px solid var(--border);
  border-radius:7px;
  padding:18px;
  background:var(--surface)
}
.settings-section h3,
.settings-form h3 {
  margin:0 0 14px;
  font-size:14px
}
.settings-wide,
.settings-theme {
  grid-column:1/-1
}
.skin-presets {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px
}
.skin-preset {
  display:grid;
  grid-template-columns:54px 1fr;
  grid-template-rows:auto auto;
  gap:2px 11px;
  text-align:left;
  padding:10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--background);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease
}
.skin-preset:hover,
.skin-preset.is-active {
  border-color:var(--preset-accent);
  transform:translateY(-2px);
  box-shadow:0 10px 24px color-mix(in srgb,var(--preset-accent) 14%,transparent)
}
.skin-preset-swatch {
  grid-row:1/3;
  position:relative;
  width:54px;
  height:46px;
  overflow:hidden;
  border-radius:7px;
  background:linear-gradient(135deg,var(--preset-a),var(--preset-b))
}
.skin-preset-swatch i {
  position:absolute;
  width:24px;
  height:24px;
  right:-4px;
  top:-4px;
  border-radius:50%;
  background:var(--preset-accent);
  filter:blur(7px);
  opacity:.7
}
.skin-preset strong {
  font-size:12px;
  align-self:end
}
.skin-preset small {
  color:var(--muted);
  font-size:9px;
  line-height:1.35
}
.skin-preview {
  --preview-a:#dbeafe;
  --preview-b:#ede9fe;
  --preview-accent:#5b7cff;
  --preview-overlay:.12;
  --preview-blur:18px;
  --preview-opacity:84%;
  position:relative;
  min-height:270px;
  overflow:hidden;
  margin:16px 0;
  border:1px solid color-mix(in srgb,var(--border) 60%,white 40%);
  border-radius:14px;
  background:linear-gradient(135deg,var(--preview-a),var(--preview-b));
  box-shadow:0 18px 45px rgb(15 23 42 / .09)
}
.skin-preview::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgb(10 16 30 / var(--preview-overlay));
  pointer-events:none
}
.skin-preview-media {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .25s ease
}
.skin-preview[data-mode="image"] .skin-preview-media,
.skin-preview[data-mode="slideshow"] .skin-preview-media {
  opacity:1
}
.skin-preview-aurora i {
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  background:var(--preview-accent);
  filter:blur(44px);
  opacity:.38;
  animation:preview-float 7s ease-in-out infinite alternate
}
.skin-preview-aurora i:first-child {
  left:-50px;
  top:-70px
}
.skin-preview-aurora i:last-child {
  right:-60px;
  bottom:-80px;
  background:var(--preview-b);
  animation-delay:-3s
}
.skin-preview[data-mode="plain"] .skin-preview-aurora {
  display:none
}
@keyframes preview-float {
  to {transform:translate3d(28px,20px,0) scale(1.12)}
}
.skin-preview-particles {
  position:absolute;
  inset:0;
  z-index:1
}
.skin-preview-particles i {
  position:absolute;
  left:calc(4% + var(--i) * 5.8%);
  top:calc(12% + var(--i) * 4.3%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--preview-accent);
  box-shadow:0 0 10px var(--preview-accent);
  opacity:calc(.22 + var(--i) * .025);
  animation:preview-twinkle 2.4s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -.17s)
}
.skin-preview[data-effect="none"] .skin-preview-particles {
  display:none
}
.skin-preview[data-effect="sakura"] .skin-preview-particles i {
  width:8px;
  height:5px;
  border-radius:100% 0 100% 0;
  transform:rotate(35deg)
}
@keyframes preview-twinkle {
  to {opacity:.9;transform:translateY(-8px) scale(1.35)}
}
.skin-preview-panel {
  position:absolute;
  z-index:3;
  left:7%;
  right:38%;
  bottom:13%;
  display:grid;
  gap:5px;
  padding:20px 22px;
  border:1px solid rgb(255 255 255 / .48);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) var(--preview-opacity),transparent);
  -webkit-backdrop-filter:blur(var(--preview-blur)) saturate(130%);
  backdrop-filter:blur(var(--preview-blur)) saturate(130%);
  box-shadow:0 16px 38px rgb(15 23 42 / .13)
}
.skin-preview-panel span,
.skin-preview-panel small {
  color:var(--secondary);
  font-size:10px
}
.skin-preview-panel strong {
  font-size:20px
}
.skin-image-list {
  display:flex;
  gap:9px;
  min-height:0;
  overflow-x:auto
}
.skin-image-item {
  position:relative;
  flex:0 0 92px;
  height:60px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--code)
}
.skin-image-item img {
  width:100%;
  height:100%;
  object-fit:cover
}
.skin-image-item span {
  position:absolute;
  left:5px;
  bottom:4px;
  min-width:18px;
  border-radius:9px;
  background:rgb(0 0 0 / .58);
  color:white;
  text-align:center;
  font-size:9px
}
.skin-image-item button {
  position:absolute;
  right:4px;
  top:4px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:rgb(0 0 0 / .62);
  color:white;
  line-height:17px
}
.skin-ranges {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}
.skin-ranges label {
  grid-template-columns:1fr auto;
  align-items:center
}
.skin-ranges input {
  grid-column:1/3;
  padding:0
}
.skin-ranges output {
  color:var(--blue);
  font-size:10px
}
.settings-theme {
  margin-top:16px
}
.settings-form {
  display:grid;
  gap:13px
}
.settings-form label {
  display:grid;
  gap:6px;
  font-size:12px;
  color:var(--secondary)
}
.settings-form input,
.settings-form textarea,
.settings-form select {
  width:100%;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--background);
  color:var(--text);
  padding:8px 10px;
  font:inherit;
  resize:vertical
}
.settings-form input[type="color"] {
  min-width:64px;
  height:38px;
  padding:3px
}
.settings-inline {
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap
}
.settings-grow {
  flex:1 1 360px
}
.skin-upload-zone {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:58px;
  border:1px dashed var(--border);
  border-radius:6px;
  padding:11px 14px;
  color:var(--muted);
  font-size:11px
}
.skin-upload-zone:focus-visible,
.skin-upload-zone.is-dragging {
  outline:2px solid color-mix(in srgb,var(--blue) 35%,transparent);
  border-color:var(--blue)
}
.skin-upload-zone button {
  color:var(--blue);
  font-size:12px
}
.note-admin-grid {
  display:grid;
  grid-template-columns:minmax(260px,.75fr) minmax(360px,1.25fr);
  gap:20px;
  margin-top:18px
}
.note-admin-list {
  display:grid;
  gap:10px;
  align-content:start
}
.note-admin-item {
  border:1px solid var(--border);
  border-radius:6px;
  padding:13px 15px;
  background:var(--surface)
}
.note-admin-item>div:first-child {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:11px
}
.note-admin-item p {
  margin:9px 0;
  color:var(--secondary);
  font-size:13px;
  line-height:1.65
}

/* ===== 写作页（主流编辑器布局：标题+正文占主视觉） ===== */
.writer {
  max-width:1180px;
  margin:0 auto
}
.writer-top {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:14px
}
.writer-back {
  font-size:13px;
  color:var(--secondary)
}
.writer-back:hover {
  color:var(--blue)
}
.writer-state {
  font-size:11px;
  color:var(--muted);
  background:var(--code);
  padding:2px 9px;
  border-radius:3px
}
.writer-top-actions {
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  flex-wrap:wrap
}
.writer-count {
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.view-switch {
  display:flex;
  border:1px solid var(--border);
  border-radius:5px;
  overflow:hidden
}
.view-switch button {
  padding:6px 13px;
  font-size:12px;
  color:var(--secondary);
  background:var(--surface)
}
.view-switch button+button {
  border-left:1px solid var(--border)
}
.view-switch button.is-active {
  color:var(--blue);
  background:var(--blue-soft);
  font-weight:600
}
.writer-tool-btn {
  font-size:12px;
  color:var(--secondary);
  border:1px solid var(--border);
  border-radius:5px;
  padding:6px 13px;
  background:var(--surface)
}
.writer-tool-btn:hover {
  color:var(--blue);
  background:var(--code)
}
.writer-title {
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:32px;
  font-weight:650;
  letter-spacing:-.5px;
  line-height:1.4;
  padding:10px 2px 16px;
  border-bottom:1px solid var(--border);
  margin-bottom:14px
}
.writer-title:focus {
  outline:none;
  border-bottom-color:var(--blue)
}
.writer-title::placeholder {
  color:var(--muted);
  opacity:.55
}
.writer-body {
  display:grid;
  gap:16px;
  align-items:stretch
}
.writer-body[data-view="both"] {
  grid-template-columns:1fr 1fr
}
.writer-body[data-view="edit"],
.writer-body[data-view="preview"] {
  grid-template-columns:1fr
}
.writer-body[data-view="edit"] .editor-preview,
.writer-body[data-view="preview"] .editor-wrap {
  display:none
}

/* 设置抽屉 */
.writer-mask {
  position:fixed;
  inset:0;
  background:rgba(10,14,22,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:55
}
.writer-mask.is-open {
  opacity:1;
  pointer-events:auto
}
.writer-settings {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(360px,92vw);
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-18px 0 44px rgba(10,14,22,.14);
  transform:translateX(105%);
  transition:transform .24s ease;
  z-index:60;
  display:flex;
  flex-direction:column
}
.writer-settings.is-open {
  transform:none
}
.settings-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  border-bottom:1px solid var(--border)
}
.settings-head h3 {
  font-size:15px;
  font-weight:600;
  margin:0
}
.settings-head button {
  font-size:20px;
  color:var(--muted);
  line-height:1;
  padding:2px 7px;
  border-radius:4px
}
.settings-head button:hover {
  color:var(--text);
  background:var(--code)
}
.settings-body {
  padding:20px 22px;
  overflow-y:auto
}
.cover-thumb {
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:21/10;
  background:var(--code)
}
.cover-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.settings-meta {
  font-size:11px;
  color:var(--muted);
  border-top:1px solid var(--border);
  padding-top:14px;
  margin-top:4px
}

/* 抽屉内表单：单列 */
.editor-fields {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:0
}
.editor-fields label {
  display:grid;
  gap:6px;
  font-size:12px;
  color:var(--secondary)
}
.editor-fields input,
.editor-fields textarea {
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--background);
  color:var(--text);
  padding:8px 11px;
  font-size:13px;
  width:100%;
  font-family:inherit;
  resize:vertical
}
.cover-field {
  display:grid;
  gap:8px
}
.editor-field-label {
  font-size:12px;
  color:var(--secondary)
}
.cover-upload {
  position:relative;
  display:grid;
  place-items:center;
  min-height:148px;
  overflow:hidden;
  border:1px dashed color-mix(in srgb,var(--secondary) 55%,var(--border));
  border-radius:7px;
  background:var(--code);
  color:var(--secondary);
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.cover-upload:hover,
.cover-upload:focus-visible,
.cover-upload.is-dragging {
  border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 6%,var(--code));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent);
  outline:0
}
.cover-upload.is-uploading {
  cursor:wait;
  opacity:.7
}
.cover-upload img {
  width:100%;
  height:100%;
  min-height:148px;
  max-height:190px;
  object-fit:cover;
  display:block
}
.cover-upload-placeholder {
  display:grid;
  justify-items:center;
  gap:5px;
  padding:18px;
  text-align:center
}
.cover-upload-placeholder[hidden] {
  display:none
}
.cover-upload-placeholder strong {
  font-size:13px;
  color:var(--text)
}
.cover-upload-placeholder span,
.cover-upload-placeholder small,
.cover-upload-status {
  font-size:11px;
  line-height:1.55;
  color:var(--muted)
}
.cover-upload-actions {
  display:flex;
  align-items:center;
  gap:8px
}
.cover-upload-actions button {
  min-height:30px
}
.cover-upload-status {
  min-height:17px;
  margin:0
}
.cover-url-field {
  padding-top:4px
}
.slug-row {
  display:flex;
  gap:8px;
  align-items:center
}
.editor-toolbar {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:10px
}
.editor-toolbar button {
  min-width:32px;
  height:30px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:5px;
  font-size:12px;
  color:var(--secondary);
  background:var(--surface)
}
.editor-toolbar button:hover {
  background:var(--code);
  color:var(--blue)
}
.editor-toolbar button:disabled {
  cursor:wait;
  opacity:.65
}
.editor-insert-toolbar {
  align-items:center
}
.editor-toolbar-separator {
  width:1px;
  height:20px;
  margin:5px 2px;
  background:var(--border)
}
.upload-help {
  color:var(--muted);
  font-size:11px;
  margin-left:3px
}
.editor-key-hint {
  color:var(--muted);
  font-size:11px;
  margin-left:auto
}
.editor-wrap {
  position:relative;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--code);
  height:calc(100vh - 330px);
  min-height:440px;
  overflow:hidden;
  resize:vertical
}
.editor-wrap.is-dragging {
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)
}
.editor-wrap > .cm-editor {
  width:100%;
  height:100%
}
.editor-wrap textarea {
  margin:0;
  padding:15px 17px;
  font:13px/1.75 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
  tab-size:2
}
.editor-wrap textarea {
  width:100%;
  height:100%;
  min-height:100%;
  border:0;
  background:transparent;
  color:var(--text);
  caret-color:var(--text);
  resize:none;
  outline:none;
  display:block
}
.editor-preview {
  border:1px dashed var(--border);
  border-radius:6px;
  padding:15px 19px;
  font-size:14px;
  min-height:calc(100vh - 330px);
  max-height:calc(100vh - 240px);
  overflow:auto
}

/* ===== 本地文章阅读页 ===== */
.local-reader {
  max-width:760px;
  margin:0 auto;
  padding:29px 0 50px
}
.local-reader .article-panel {
  padding:32px 38px
}
.local-cover {
  width:calc(100% + 76px);
  margin:-32px -38px 26px;
  max-width:none;
  display:block;
  aspect-ratio:21/9;
  object-fit:cover
}

/* ===== 响应式补充 ===== */
@media(max-width:1000px) {
  .cover-text {
    padding:22px 24px 16px
  }
  .cover-text h2 {
    font-size:21px
  }
  .cover-meta {
    padding:13px 24px
  }
}
@media(max-width:760px) {
  .cover-media {
    aspect-ratio:16/9
  }
  .cover-text {
    padding:16px 17px 12px
  }
  .cover-text h2 {
    font-size:17px;
    margin:5px 0 4px
  }
  .cover-text p {
    font-size:12px;
    -webkit-line-clamp:2
  }
  .cover-meta {
    padding:11px 17px;
    gap:8px
  }
  .cover-meta-left .post-tags {
    display:none
  }
  .cover-go {
    font-size:12px
  }
  .writer-body[data-view="both"] {
    grid-template-columns:1fr
  }
  .writer-title {
    font-size:24px
  }
  .view-switch button[data-view="both"] {
    display:none
  }
  .editor-wrap,
  .editor-preview {
    min-height:calc(100vh - 300px)
  }
  .editor-wrap {
    height:calc(100vh - 300px)
  }
  .editor-key-hint {
    display:none
  }
  .admin-head h1 {
    font-size:20px
  }
  .admin-panel {
    padding:20px 16px
  }
  .theme-grid {
    grid-template-columns:1fr
  }
  .site-settings-grid,
  .note-admin-grid,
  .about-settings-grid {
    grid-template-columns:1fr
  }
  .skin-presets {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .skin-ranges {
    grid-template-columns:1fr
  }
  .skin-preview {
    min-height:230px
  }
  .skin-preview-panel {
    left:6%;
    right:6%;
    bottom:10%
  }
  .local-reader {
    padding:22px 0 32px
  }
  .local-reader .article-panel {
    padding:24px 20px
  }
  .local-cover {
    width:calc(100% + 40px);
    margin:-24px -20px 20px
  }
}