/* Shared desktop palette and window chrome. Keep page-specific content layouts local. */
:root {
  color-scheme: light;
  --site-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --wallpaper-a: #d9e0df;
  --wallpaper-b: #f0f1ee;
  --wallpaper-c: #d8dde5;
  --wallpaper-dot: rgba(56, 65, 68, .14);
  --menu-bg: rgba(247, 250, 252, .42);
  --menu-border: rgba(30, 30, 40, .08);
  --window-bg: rgba(247, 250, 252, .68);
  --content-bg: rgba(255, 255, 255, .94);
  --glass-highlight: rgba(255, 255, 255, .85);
  --glass-edge: rgba(255, 255, 255, .5);
  --glass-sheen: linear-gradient(145deg, #ffffff66, #ffffff08 48%, #ffffff30);
  --window-border: rgba(255, 255, 255, .7);
  --sidebar-bg: rgba(228, 235, 240, .4);
  --surface: #ffffff;
  --surface-solid: #f5f5f7;
  --text: #252529;
  --muted: #686b73;
  --line: rgba(30, 30, 40, .12);
  --soft: rgba(30, 30, 40, .045);
  --accent: #007aff;
  --accent-soft: rgba(0, 122, 255, .1);
  --accent-strong: #0063cf;
  --selection-bg: rgba(255, 255, 255, .62);
  --selection-text: #0865cf;
  --titlebar-bg: linear-gradient(180deg, #ffffff35, #ffffff08);
  --accent-coral: #c85f48;
  --accent-blue: var(--accent);
  --accent-violet: #76698f;
  --accent-green: #4f8069;
  --accent-amber: #a37234;
  --accent-pink: #a85c79;
  --active-ring: rgba(255, 255, 255, .9);
  --shadow: 0 24px 64px rgba(34, 45, 48, .16), 0 4px 14px rgba(34, 45, 48, .08), inset 0 1px 0 var(--glass-highlight);
  --active-shadow: 0 30px 72px rgba(34, 45, 48, .24), 0 6px 22px rgba(34, 45, 48, .1), inset 0 1px 0 var(--glass-highlight);
  --inactive-shadow: 0 18px 42px rgba(38, 48, 51, .16), 0 3px 10px rgba(38, 48, 51, .08);
  --warning-bg: #fff8e5;
  --warning-text: #8a5a00;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  /* Aliases used by the homepage, reader, and older content layouts. */
  --menu-text: var(--text);
  --window-text: var(--text);
  --window-muted: var(--muted);
  --window-line: var(--line);
  --window-inner-border: var(--line);
  --window-subtle: var(--soft);
  --dock-bg: var(--menu-bg);
  --bg: var(--wallpaper-b);
  --border: var(--line);
  --separator: var(--line);
  --surface-muted: var(--soft);
  --card-bg: var(--surface);
  --card-shadow: none;
  --link: var(--accent);
  --nav-text: var(--text);
  --nav-hover: var(--soft);
  --index-text: var(--text);
  --index-muted: var(--muted);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wallpaper-a: #202829;
  --wallpaper-b: #303737;
  --wallpaper-c: #252b33;
  --wallpaper-dot: rgba(255, 255, 255, .12);
  --menu-bg: rgba(32, 36, 43, .46);
  --menu-border: rgba(255, 255, 255, .12);
  --window-bg: rgba(37, 43, 50, .7);
  --content-bg: rgba(31, 35, 41, .95);
  --glass-highlight: rgba(255, 255, 255, .2);
  --glass-edge: rgba(255, 255, 255, .12);
  --glass-sheen: linear-gradient(145deg, #ffffff16, #ffffff02 48%, #ffffff0a);
  --window-border: rgba(255, 255, 255, .12);
  --sidebar-bg: rgba(43, 49, 58, .4);
  --surface: rgba(255, 255, 255, .055);
  --surface-solid: #2c2c32;
  --text: #f5f5f7;
  --muted: #a0a0aa;
  --line: rgba(255, 255, 255, .11);
  --soft: rgba(255, 255, 255, .065);
  --accent: #409cff;
  --accent-soft: rgba(64, 156, 255, .16);
  --accent-strong: #70b5ff;
  --selection-bg: rgba(255, 255, 255, .12);
  --selection-text: #f5f5f7;
  --titlebar-bg: linear-gradient(180deg, #ffffff0d, #ffffff02);
  --accent-coral: #e78269;
  --accent-violet: #aa9bc1;
  --accent-green: #75aa8d;
  --accent-amber: #d3a25f;
  --accent-pink: #cf82a0;
  --active-ring: rgba(255, 255, 255, .2);
  --shadow: 0 24px 64px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .18), inset 0 1px 0 var(--glass-highlight);
  --active-shadow: 0 32px 74px rgba(0, 0, 0, .48), 0 8px 24px rgba(0, 0, 0, .22), inset 0 1px 0 var(--glass-highlight);
  --inactive-shadow: 0 18px 42px rgba(0, 0, 0, .3), 0 3px 10px rgba(0, 0, 0, .18);
  --warning-bg: #352d1c;
  --warning-text: #e8be72;
}

/* Shared window, typography, rows, and controls. Page files contain content layout only. */
* { box-sizing: border-box; }
html { background: var(--wallpaper-b); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body[class] {
  margin: 0;
  padding-top: 0;
  color: var(--text);
  font: 14px/1.6 var(--site-font);
  background: radial-gradient(var(--wallpaper-dot) .7px, transparent .7px), linear-gradient(132deg, var(--wallpaper-a), var(--wallpaper-b) 48%, var(--wallpaper-c));
  background-size: 24px 24px, auto;
  background-attachment: fixed;
}
body :is(button, input, textarea, select) { font-family: inherit; }
body :is(a, button, input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body :is(.app-main, .window-content, .panel, .layout > main, .layout > aside nav) { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.portfolio-desktop { min-height: 100svh; background: transparent; }
.wallpaper-grid { display: none; }
.desktop-window, .mac-app-window, .site-window, .page-note-reader .layout {
  background: var(--window-bg);
  border: 1px solid var(--window-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  overflow: hidden;
}
/* Filters on overlapping backdrop layers cause browser compositing artifacts. */
.desktop-window:not(.is-active), .desktop-window:not(.is-active):hover { filter: none; }
.desktop-window { box-shadow: var(--inactive-shadow); }
.desktop-window.is-active { box-shadow: var(--active-shadow); }
.window-titlebar, .mac-titlebar, .reader-titlebar, .site-titlebar {
  display: grid;
  align-items: center;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  padding: 0 16px;
  margin: 0;
  gap: 8px;
  background: var(--titlebar-bg);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.window-title, .mac-title, .site-window-title { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.window-title svg, .mac-title svg, .site-window-title svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mac-title span, .site-window-title > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.traffic-lights, .mac-traffic-lights, .site-traffic-lights { display: flex; align-items: center; gap: 8px; }
.traffic-light, .mac-traffic-lights span, .site-traffic-lights span { display: block; width: 12px; height: 12px; flex: 0 0 12px; border: .5px solid #0002; border-radius: 50%; box-shadow: inset 0 1px 1px #ffffff38; }
.traffic-red, .mac-traffic-lights span:nth-child(1), .site-traffic-lights span:nth-child(1) { background: #ff5f57; }
.traffic-yellow, .mac-traffic-lights span:nth-child(2), .site-traffic-lights span:nth-child(2) { background: #febc2e; }
.traffic-green, .mac-traffic-lights span:nth-child(3), .site-traffic-lights span:nth-child(3) { background: #28c840; }
.chrome-back { display: flex; align-items: center; justify-content: center; justify-self: end; width: 32px; height: 32px; border: 1px solid var(--glass-edge); border-radius: 10px; color: var(--muted); background: var(--glass-sheen), var(--menu-bg); box-shadow: inset 0 1px 0 var(--glass-highlight); text-decoration: none; transition: transform 220ms ease, background-color 180ms; }
.chrome-back:hover { color: var(--text); background-color: var(--soft); text-decoration: none; }
.chrome-back:active { transform: scale(.94); }
.chrome-back svg { width: 16px; height: 16px; }
.page-stage { width: min(1280px, 100%); max-width: none; margin: 0 auto; padding: 28px 30px 0; }
body .wrap.site-window { display: block; width: min(1220px, calc(100% - 60px)); max-width: none; min-height: 0; margin: 28px auto 24px; padding: 0; }
body .wrap.site-window:not(.finder-window) { padding: 0 32px 32px; }
body .wrap.site-window:not(.finder-window) .site-titlebar { margin: 0 -32px 28px; }
.finder-split, .app-split { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 560px; }
.finder-sidebar, .app-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 22px 10px; background: transparent; border-right: 1px solid var(--line); }
.finder-sidebar site-sidebar, .app-sidebar site-sidebar { display: block; flex: 1; }
.finder-content, .app-main, .about-detail-pane, .content-panel, .page-note-reader .layout > main { min-width: 0; padding: 28px 32px 32px; background: var(--content-bg); }
.app-toolbar, .page-heading, .page-message .guestbook-header, .page-mc .mc-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; }
.app-toolbar h1, .page-heading h1, .page-message .guestbook-header h1, .page-mc .mc-hero h1, .page-blog-post .blog-post > h1 { margin: 0; font-size: 24px; line-height: 1.35; font-weight: 600; letter-spacing: -.025em; }
.app-toolbar p, .page-message .guestbook-header p, .page-mc .mc-hero p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.toolbar-count, .page-heading > span { font: 12px var(--site-font); color: var(--muted); background: transparent; border: 0; padding: 0; white-space: nowrap; }
.page-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.page-filters .sidebar-link { display: inline-flex; align-items: center; gap: 7px; width: auto; min-height: 36px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font: 13px var(--site-font); cursor: pointer; }
.page-filters .sidebar-link svg { width: 16px; height: 16px; }
.page-filters .sidebar-link:hover { background: var(--soft); }
.page-filters .sidebar-link.is-active { border-color: transparent; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.list-search input, .hacker-input, .page-message :is(input, textarea) { min-width: 0; font-family: var(--site-font); color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: none; }
.project-list, .note-list { gap: 0; }
.project-entry, .note-entry, .page-blog .blog-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0; padding: 16px 8px; min-height: 80px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; transition: background-color 180ms; }
.project-entry:last-child, .note-entry:last-child, .page-blog .blog-card:last-child { border-bottom: 0; }
.project-entry:hover, .note-entry:hover, .page-blog .blog-card:hover { background: var(--soft); border-color: var(--line); transform: none; }
.project-copy strong, .note-entry strong, .page-blog .blog-card h2 { margin: 0 0 4px; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.5; }
.project-meta span, .page-blog .blog-card-tags span { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); color: var(--muted); font: 10px/1.4 var(--site-font); }
.project-open, .note-open { width: 16px; height: 16px; color: var(--muted); }
.page-blog .blog-card { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
.page-blog .blog-card-image { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.page-blog .blog-card-description { margin: 8px 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.page-blog .blog-card-meta { font-size: 11px; color: var(--muted); gap: 10px; }
.page-blog-post .blog-post { max-width: 820px; margin-inline: auto; border: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.page-blog-post .blog-post-content { font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.page-blog-post pre { overflow-x: auto; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.page-mc .mc-card { border: 0; padding: 0; border-radius: 10px; background: transparent; box-shadow: none; }
.page-mc .mc-gallery { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.page-mc .mc-caption { font-size: 12px; text-align: center; }
body :is(.back-link, #leave-message-btn, .modal-actions button, .hacker-btn) { min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; font: 13px var(--site-font); color: var(--accent-strong); background: var(--accent-soft); box-shadow: none; text-decoration: none; cursor: pointer; }
body.page-cv .cv-layout { grid-template-columns: minmax(0, 1fr); }
body.page-cv :is(.cv-card, .cv-panel, .cv-profile) { background: var(--surface); border-color: var(--line); border-radius: 12px; box-shadow: none; }
.page-message .modal-content { border-radius: 16px; background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow); }
body:is(.page-404, .page-construct) .site-window { max-width: 720px; margin-top: clamp(28px, 12vh, 120px); }
body:is(.page-404, .page-construct) .card { border: 0; background: transparent; max-width: none; padding: 40px 0 48px; box-shadow: none; }
@supports (view-transition-name: root) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) { z-index: 9999; }
}
@media (max-width: 860px) {
  .page-stage { padding: 16px 12px 0; }
  /* Fixed TOC must not be contained by a backdrop-filtered ancestor. */
  .page-note-reader .layout { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .page-note-reader .layout > main { padding: 24px 20px 50px; }
  body .wrap.site-window { width: calc(100% - 24px); margin: 16px 12px 24px; }
  body .wrap.site-window:not(.finder-window) { padding: 0 20px 24px; }
  body .wrap.site-window:not(.finder-window) .site-titlebar { margin: 0 -20px 24px; }
  .finder-split, .app-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .finder-sidebar, .app-sidebar { padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .finder-content, .app-main, .about-detail-pane, .content-panel { padding: 24px 20px; }
  .window-titlebar, .site-titlebar, .mac-titlebar, .reader-titlebar { grid-template-columns: 60px minmax(0, 1fr) 32px; padding: 0 12px; }
  .window-titlebar { grid-template-columns: 60px minmax(0, 1fr) 60px; }
  .app-toolbar h1, .page-heading h1 { font-size: 24px; }
  .project-entry, .note-entry, .page-blog .blog-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 16px 0; }
  .page-blog .blog-card { grid-template-columns: 44px minmax(0, 1fr); }
  .page-blog .blog-card-image { width: 44px; height: 44px; border-radius: 8px; }
  .page-blog .blog-card-meta { flex-wrap: wrap; gap: 6px; }
  .page-filters .sidebar-link { min-height: 40px; }
  body :is(.list-search input, .hacker-input, .page-message input, .page-message textarea) { font-size: 16px; }
  body:is(.page-404, .page-construct) .site-window { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (prefers-reduced-transparency: reduce) {
  :root { --window-bg: #edf1f4; --menu-bg: #edf1f4; --content-bg: #fff; --selection-bg: #fff; }
  :root[data-theme="dark"] { --window-bg: #2c323b; --menu-bg: #2c323b; --content-bg: #1f2329; --selection-bg: #404853; }
}
@media print {
  body[class] { padding: 0; color: black; background: white; }
  .finder-sidebar, .app-sidebar, .chrome-back, .site-titlebar, .mac-titlebar, .page-filters, .list-search { display: none !important; }
  .mac-app-window, .page-note-reader .layout, body .wrap.site-window { width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: white; backdrop-filter: none; }
  .finder-split, .app-split { display: block; min-height: 0; }
  .finder-content, .app-main, .about-detail-pane, .content-panel, .page-note-reader .layout > main { padding: 0; background: white; }
}


/* Native transitions also cover the browser's Back/Forward navigation. */
@view-transition { navigation: auto; }
@keyframes site-page-out {
  to { opacity: 0; }
}
@keyframes site-page-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
:root:not(.theme-transitioning)::view-transition-old(root) {
  animation: site-page-out 160ms ease-out both;
}
:root:not(.theme-transitioning)::view-transition-new(root) {
  animation: site-page-in 240ms cubic-bezier(.22, 1, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}