/* Shared glass surfaces; the warm studio palette below defines the current theme. */
:root {
  --page: #f3f6f8; --paper: #f8fafb; --surface: #ffffff;
  --surface-alt: #eef5f4; --ink: #17292e; --muted: #52676d;
  --soft: #647980; --line: #dce6e8; --accent: #237f73;
  --accent-strong: #16483f; --rust: #237f73; --radius: 24px;
  --shadow: 0 10px 40px rgba(38,70,80,.055);
  --glass: rgba(255,255,255,.72);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
[data-theme="dark"] {
  --page: #10191d; --paper: #111b20; --surface: #1b282e;
  --surface-alt: #21343a; --ink: #edf6f5; --muted: #b1c4c8;
  --soft: #99aeb5; --line: #34464c; --accent: #83d9c2;
  --accent-strong: #cdf7eb; --rust: #83d9c2;
  --glass: rgba(23,37,44,.8); --shadow: 0 12px 40px rgba(0,0,0,.16);
}
body {
  background: radial-gradient(ellipse 720px 580px at 86% 0%, #b6e7dc55, transparent),
    radial-gradient(ellipse 660px 580px at 8% 14%, #c4d4f544, transparent), var(--paper);
  -webkit-font-smoothing: antialiased;
}
.site-header {
  top: 16px; margin: 16px auto 0; width: min(1120px, calc(100% - 40px));
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 22px; background: var(--glass);
  backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 8px 32px #163b4910, inset 0 1px 0 #ffffff40;
}
.site-title-row { height: 68px; padding: 0 22px; }
.site-title { font-weight: 750; letter-spacing: -.04em; }
.site-title::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent); }
.tab-btn { font-weight: 600; padding: 8px 18px; }
.tab-btn.active { background: var(--ink); color: var(--paper); }
.site-theme-toggle { background: transparent; flex-shrink: 0; }
.app { max-width: 1120px; padding-top: 48px; }
.hero { gap: 72px; padding: 30px 0 60px; min-height: 510px; }
.eyebrow { font-size: 11px; letter-spacing: .18em; font-weight: 650; }
.hero-title { font-size: clamp(52px,6.5vw,80px); letter-spacing: -.055em; font-weight: 750; color: var(--ink); }
.hero-lede { font-size: 17px; line-height: 2; max-width: 540px; margin-top: 26px; }
.hero-links { gap: 8px; }
.hero-link,.text-link { background: var(--glass); font-weight: 600; box-shadow: 0 2px 4px #163b4904; }
.hero-link::after { content: '↗'; opacity: .55; font-size: 13px; }
.hero-meta { margin-top: 34px; gap: 16px; }
.metric { border-left: 1px solid var(--line); padding-left: 12px; }
.metric strong { font-weight: 650; font-size: 14px; }
.metric span { font-size: 12px; }
.portrait { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 32px; background: var(--glass); box-shadow: 0 24px 64px #163b4914, inset 0 1px 0 #ffffff55; transform: rotate(2deg); }
.portrait img { height: auto; border-radius: 22px; border: 0; box-shadow: none; }
.portrait-note { margin: 16px 10px 8px; font-size: 12px; line-height: 1.8; }
.ai-ask { padding: 26px 28px; margin-bottom: 54px; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 24px; }
.ai-ask-title { font-size: 18px; font-weight: 700; }
.visitor-input { height: 48px; background: color-mix(in srgb,var(--paper) 80%, transparent); }
.visitor-send,.cta-btn,.chat-fab,.chat-window-header { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.visitor-send:hover,.cta-btn:hover { background: var(--accent); color: var(--paper); }
.section { padding: 60px 0; }
.section-kicker { font-size: 11px; letter-spacing: .17em; font-weight: 650; }
.section-title { font-size: 32px; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.section-desc { font-size: 15px; }
.product-card,.podcast-card,.events-card,.project-card,.post-card { background: var(--glass); box-shadow: var(--shadow); }
.products-grid { gap: 24px; }
.product-main { padding: 28px; }
.product-name,.project-name,.post-card-title,.podcast-title,.events-title { font-weight: 650; letter-spacing: -.025em; }
.product-tag,.project-tag,.post-card-tag { font-weight: 550; border-color: transparent; }
.product-screenshots { margin: 0 16px 16px; border-radius: 16px; overflow: hidden; gap: 7px; background: transparent; border: 0; }
.product-screenshots img { border-radius: 10px; }
.podcast-intro,.events-intro { padding: 28px; background: color-mix(in srgb, var(--surface-alt) 70%, transparent); }
.ep-card { border-radius: 14px; box-shadow: none; }
.post-card { padding: 16px; gap: 24px; }
.post-card-cover { border-radius: 14px; }
.post-detail { padding-top: 20px; }
.post-detail-title { font-weight: 700; letter-spacing: -.025em; }
.post-detail-content { font-size: 16px; }
.post-detail-content * { font-family: var(--font-sans) !important; }
.footer { padding-bottom: 16px; font-size: 12px; }
.chat-fab { width: 52px; height: 52px; box-shadow: 0 8px 25px #173d4326; }
.chat-fab svg { stroke: currentColor; }
.chat-window-status,.chat-window-close { color: inherit; }
a:focus-visible,button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 860px) {
  .site-header { width: calc(100% - 24px); top: 10px; margin-top: 10px; border-radius: 18px; }
  .site-title-row { padding: 0 14px; gap: 12px; height: 62px; }
  .site-title { font-size: 17px; }
  .tab-nav { min-width: 0; }
  .tab-btn { white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  .app { padding-top: 28px; }
  .hero { gap: 32px; padding: 20px 0 38px; }
  .hero-meta { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .portrait { width: min(100%,380px); justify-self: center; transform: none; }
  .ai-ask { padding: 22px; margin-bottom: 32px; }
  .section { padding: 38px 0; }
  .section-title { font-size: 28px; }
  .section-header { gap: 12px; }
  .product-main { padding: 22px; }
  .post-card { gap: 14px; }
}
@media (max-width: 400px) {
  .site-title::before { display: none; }
  .site-title-row { gap: 8px; padding: 0 10px; }
  .tab-btn { padding: 8px; }
  .site-theme-toggle { width: 32px; height: 32px; }
  .hero-meta { gap: 4px; }
  .metric { padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; animation: none !important; }
}

/* Warm studio — cream, peach and lavender, inspired by StickerPi. */
:root {
  --page: #f8f6f2; --paper: #faf8f5; --surface: #fffdfb;
  --surface-alt: #f1edf4; --ink: #29272e; --muted: #6c6872;
  --soft: #78717d; --line: #e6dfe5; --accent: #b84f48;
  --accent-strong: #38323f; --rust: #b84f48;
  --glass: rgba(255,255,255,.6); --radius: 28px;
  --shadow: 0 16px 48px rgba(69,49,79,.065);
}
[data-theme="dark"] {
  --page: #211f26; --paper: #211f26; --surface: #302c35;
  --surface-alt: #39313e; --ink: #f9f3f0; --muted: #c7bcc9;
  --soft: #b6a9bb; --line: #4a3f50; --accent: #ffb3a4;
  --accent-strong: #f9e9e3; --rust: #ffb3a4; --glass: rgba(47,41,53,.72);
}
body {
  background: radial-gradient(ellipse 900px 750px at 2% 0%, #f5dcca80, transparent),
    radial-gradient(ellipse 1000px 850px at 100% 13%, #dfd9f080, transparent), var(--paper);
}
[data-theme="dark"] body {
  background: radial-gradient(ellipse 900px 750px at 2% 0%, #7a44392b, transparent),
    radial-gradient(ellipse 1000px 850px at 100% 13%, #77638f33, transparent),var(--paper);
}
.site-header { border-radius: 999px; border: 1px solid color-mix(in srgb,var(--surface) 85%, transparent); box-shadow: 0 15px 40px #6c527814, inset 0 1px 0 #ffffff77; }
.site-title-row { height: 72px; gap: 22px; }
.site-title { letter-spacing: -.045em; }
.site-title::before { width: 25px; height: 25px; vertical-align: -6px; border-radius: 9px; background: url('/images/qishifu.jpg') center/cover; box-shadow: 0 0 0 3px var(--surface); }
.tab-btn.active { background: var(--surface-alt); color: var(--ink); }
.language-switch { display: inline-flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:650; min-height:38px; padding:6px 13px; border-radius:999px; background:var(--glass); border:1px solid var(--line); white-space:nowrap; }
.language-switch:hover { border-color: var(--accent); color:var(--accent); }
.site-theme-toggle { border-color:transparent; }
.hero { min-height: 540px; gap: 64px; }
.eyebrow { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:7px 13px; background:var(--glass); letter-spacing:.1em; font-size:10px; }
.eyebrow::before { content:'✳'; margin-right:8px; color:var(--accent); }
.hero-title { font-size:clamp(58px,6.6vw,84px); font-weight:800; letter-spacing:-.055em; }
.hero-title::after { content:'.'; color:#ed776b; }
.hero-lede { font-size:17px; line-height:1.95; }
.portrait { border:2px solid color-mix(in srgb,var(--surface) 85%,transparent); padding:13px; border-radius:38px; transform:rotate(3deg); box-shadow:0 24px 60px #6b4a7520; }
.portrait::after { content:'✦'; position:absolute; right:-15px; top:-25px; color:#e6b059; font-size:55px; text-shadow:0 2px 0 var(--surface); }
.portrait img { border-radius:25px; }
.portrait-note { font-size:12px; }
.hero-link { border-color:color-mix(in srgb,var(--surface) 90%,var(--line)); padding:9px 17px; box-shadow:0 5px 15px #6c527808; }
.hero-link:hover { background:var(--surface); border-color:#ecc8bd; }
.ai-ask { border:1px solid color-mix(in srgb,var(--surface) 80%,var(--line)); box-shadow:0 15px 40px #6c527810; }
.visitor-send,.cta-btn,.chat-fab { box-shadow:inset 0 1px 0 #ffffff35,0 5px 16px #6c527815; }
.section-kicker { color:var(--accent); }
.product-card,.podcast-card,.events-card,.project-card,.post-card { border-color:color-mix(in srgb,var(--surface) 65%,var(--line)); }
.product-card:hover,.project-card:hover,.post-card:hover { border-color:#d8bdd2; box-shadow:0 18px 50px #6b4a7517; }
.post-card-summary { display:block; }
.footer { margin-top:40px; }
html[lang="en"] .hero-title { font-size:clamp(56px,6vw,76px); }
html[lang="en"] .hero-lede { font-size:16px; }
html[lang="en"] .metric strong { font-size:13px; }
html[lang="en"] .metric span { font-size:11px; }
@media(max-width:860px) {
 .site-title-row { height:62px; gap:10px; }
 .hero { min-height:0; gap:32px; }
 .portrait { transform:rotate(1deg); width:min(90%,350px); }
 .hero-title { font-size:60px; }
 .language-switch { padding:5px 10px; }
}
@media(max-width:540px) {
 .site-header { border-radius:25px; }
 .site-title-row { height:auto; min-height:92px; padding:12px 16px; flex-wrap:wrap; gap:8px; }
 .site-title { flex:1; order:0; }
 .language-switch { order:1; }
 .site-theme-toggle { order:2; }
 .tab-nav { order:3; flex-basis:100%; justify-content:center; overflow:visible; }
 .tab-btn { padding:6px 18px; }
 .hero { padding-top:10px; }
 .hero-title { font-size:56px; }
 .eyebrow { font-size:9px; }
 .hero-lede { font-size:16px; }
 .hero-meta { gap:10px; }
 html[lang="en"] .hero-meta { grid-template-columns:1fr; }
 .section-title { font-size:27px; }
 .ai-ask { padding:20px; }
 .visitor-bubble { flex-wrap:wrap; }
 .visitor-input { min-width:150px; }
}