/* typesafe.ai 风格迁移 (2026-09-20 快照: 浅底+粉色颗粒云+Win98窗口卡+tab导航) */

/* 全局: 浅底, 黑字 (替代纯黑苹果风) */
/* 背景画在 html (canvas 层), .ts-sky(z:-1) 的渐变才能显示在其上、内容之下;
   body 若设不透明背景会把 z:-1 的 .ts-sky 整个盖掉 */
html { background-color: #FEFEFE; }
body { color: #1e1e1e; background: transparent; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }

/* 等宽点缀 */
.mono { font-family: "JetBrains Mono", monospace; }

/* --- 天空背景: 淡青 -> 粉雾颗粒 (纯 CSS, 无图片, 体积小) --- */
.ts-sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(243,134,161,.55) 0%, transparent 70%),
    radial-gradient(45% 40% at 85% 4%, rgba(212,91,182,.35) 0%, transparent 65%),
    radial-gradient(70% 55% at 60% 25%, rgba(171,186,185,.30) 0%, transparent 70%),
    linear-gradient(180deg, #cfe4e8 0%, #f3e3ea 38%, #FEFEFE 78%);
}
/* 颗粒噪点: 低开销 SVG noise, 模拟官网 grain */
.ts-sky::after {
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* --- 顶部 tab 卡片导航 (官网同款: 白色小卡片, 重点项反色) --- */
.ts-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border: 0; backdrop-filter: none;
  padding: 18px 20px;
}
.ts-nav .row { max-width: 1080px; margin: 0 auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; }
.ts-tab {
  background: #fff; color: #1e1e1e; border: 1px solid rgba(30,30,30,.12);
  border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 500;
  font-family: "JetBrains Mono", monospace; letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(30,30,30,.08);
  text-decoration: none; transition: transform .15s ease;
}
.ts-tab:hover { transform: translateY(-1px); }
.ts-tab.dark { background: #1e1e1e; color: #FEFEFE; border-color: #1e1e1e; }

/* --- Win98 风格悬浮窗口卡 --- */
.ts-window {
  background: #f4f4f2; border: 1px solid #1e1e1e; border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(30,30,30,.14); overflow: hidden;
}
.ts-window-bar {
  display: flex; align-items: center; gap: 8px;
  background: #1e1e1e; color: #FEFEFE; padding: 8px 14px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .04em;
}
.ts-window-bar .dots { display: flex; gap: 5px; margin-right: 6px; }
.ts-window-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #555; display: inline-block; }
.ts-window-bar .dots i:nth-child(1) { background: #f386a1; }
.ts-window-body { padding: 18px; }

/* 媒体窗口: 顶栏在上, 视频区(不含顶栏)自身保持 16:9, 不裁切 16:9 源视频 */
.ts-window-media {
  display: flex; flex-direction: column;
}

/* --- 大标题: 官网同款 (超大/中重/紧行距) --- */
.ts-h1 { font-size: clamp(44px, 9vw, 108px); font-weight: 500; line-height: .95; letter-spacing: -.02em; color: #1e1e1e; }
.ts-h2 { font-size: clamp(30px, 5vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -.01em; color: #1e1e1e; }

/* --- 四角取景框 L 线 --- */
.ts-crop { position: relative; }
.ts-crop::before, .ts-crop::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid #1e1e1e;
}
.ts-crop::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ts-crop::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* --- 粉色强调 (取代旧站的 blue-600) --- */
.ts-pink { color: #f386a1; }
.ts-accent-bg { background: #f386a1; color: #1e1e1e; }

/* --- 顶栏声音开关 --- */
.ts-sound-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(254,254,254,.14); border: 1px solid rgba(254,254,254,.22);
  color: #FEFEFE; border-radius: 6px; padding: 3px 9px; margin: 0 8px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .03em;
  cursor: pointer; transition: background .15s ease;
}
.ts-sound-btn:hover { background: rgba(254,254,254,.26); }

/* 覆盖 custom.css 里深色的音乐盒, 适配浅底 */
#music-player { background: rgba(254,254,254,.72); border-color: rgba(30,30,30,.14); }
#music-player #track-name { color: #1e1e1e; text-shadow: none; }
#music-player #track-artist { color: #888; }
#music-player button { color: #1e1e1e; }

/* Swiper 已移除; 轮播改为原生横向滚动照片行 */

/* === 82 照片行: 0128+0129 共 97 张, 横向滚动 (scroll-snap, 无 Swiper) === */
/* 关键: 打破 grid 右栏的 min-width:auto, 让 photo-scroll 真正约束在栏宽内,
   否则 track 的 max-content 会把整个页面横向撑开(超窗) */
#story .grid > div { min-width: 0; }
#photo-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: rgba(30,30,30,.25) transparent;
  padding: 4px 0 12px;
}
.photo-scroll::-webkit-scrollbar { height: 6px; }
.photo-scroll::-webkit-scrollbar-thumb { background: rgba(30,30,30,.18); border-radius: 3px; }
.photo-scroll::-webkit-scrollbar-track { background: transparent; }
.photo-track {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 8px;
  width: max-content;
}
/* 统一高度, 宽度按图片比例自适应 (0128 竖 3:4 / 0129 横 3:2, 不裁切) */
.photo-card {
  flex: 0 0 auto;
  height: 46vw;
  max-height: 400px;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 8px 24px -10px rgba(30,30,30,.25);
}
.photo-card img {
  height: 100%; width: auto;   /* 按 HTML width/height 的固有比例渲染, 不拉伸 */
  display: block;
}
@media (min-width: 768px) {
  .photo-card { height: 360px; }
  .photo-track { gap: 18px; }
}

/* 白底故事区 -> 融入浅底, 卡片用白色悬浮 */
.ts-card {
  background: #fff; border: 1px solid rgba(30,30,30,.10); border-radius: 18px;
  box-shadow: 0 2px 6px rgba(30,30,30,.05); overflow: hidden;
}