/* ── RESET & TOKENS · 暗金 Dark-Gold（色板对齐 overseas-microdrama-darkgold-webppt） ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bar: 44px;
  --frame-border: rgba(227,185,107,.20);
  --frame-header-bg: rgba(17,19,27,.92);
  --accent: #E3B96B;
  --accent-bright: #F6DA97;
  --accent-deep: #A9803B;
  --accent-dim: rgba(227,185,107,.12);
  --dim: rgba(243,238,227,.38);
  --dim2: rgba(243,238,227,.62);
  --paper: #F3EEE3;
  --bg: #0A0B10;
  --r: 6px;
  --ease: cubic-bezier(.22,1,.36,1); /* 站内多处已硬编码这条曲线，统一成 token 便于复用 */
  --serif: "Noto Serif SC","STSong","SimSun",serif;
  --mono: "SF Mono","Cascadia Code",monospace;
  --gold-grad: linear-gradient(168deg,#F6DA97 6%,#E3B96B 46%,#C89B4F 76%,#A9803B 100%);
}
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--paper); }
#bgCanvas { position:fixed; inset:0; z-index:0; display:block; }
:where(html.custom-cursor-ready) * { cursor: none !important; }
body { font-family: "SF Mono","Cascadia Code","Noto Sans SC",monospace; font-size:12px; user-select:none; cursor:auto; }
button, input { font-family:inherit; }
::selection { background:rgba(227,185,107,.32); color:var(--paper); }

/* ── BOOT ── */
#boot {
  position:fixed; inset:0; z-index:999; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transition:opacity .4s ease;
}
#boot.done { opacity:0; pointer-events:none; }
.boot-lines { display:flex; flex-direction:column; gap:6px; min-width:280px; }
.bl {
  font-size:11px; color:var(--dim); letter-spacing:1px;
  opacity:0; transform:translateY(3px);
  transition:opacity .18s ease, transform .18s ease;
}
.bl.show { opacity:1; transform:none; }
.boot-counter {
  font-family:var(--mono);
  font-size:64px; font-weight:700; letter-spacing:8px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transition:opacity .2s;
}
.boot-counter.show { opacity:1; }

/* ── APP ── */
#app { position:fixed; inset:0; }
#app.hide { opacity:0; pointer-events:none; }

/* ── TOP BAR ── */
.top-bar {
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:var(--bar); padding:0 16px;
  display:flex; align-items:center; gap:4px;
  background:rgba(10,11,16,.86);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid rgba(227,185,107,.16);
}
.logo {
  font-family:var(--serif); font-size:15px; font-weight:900; letter-spacing:4px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-right:16px; flex-shrink:0;
}
.sec-nav {
  display:flex; gap:2px; flex:1;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.sec-nav::-webkit-scrollbar { display:none; }
.sec-btn {
  background:none; border:1px solid transparent; border-radius:var(--r);
  padding:4px 10px; font-size:9px; letter-spacing:1.5px;
  color:var(--dim); cursor:none; transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.sec-btn:hover { color:var(--dim2); background:rgba(227,185,107,.06); }
.sec-btn.active { color:var(--accent-bright); background:var(--accent-dim); border-color:rgba(227,185,107,.30); }
.sec-btn.hidden-sec { display:none; }
.top-actions { margin-left:auto; flex-shrink:0; }
.icon-btn {
  background:none; border:1px solid rgba(227,185,107,.22); border-radius:var(--r);
  color:var(--dim); padding:4px 8px; cursor:none; transition:all .2s;
}
.icon-btn:hover { color:var(--accent); border-color:rgba(227,185,107,.45); }

/* ── SECTIONS ── */
#sections { position:fixed; inset:0; top:var(--bar); }
.section { position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; z-index:0; }
.section.active { opacity:1; visibility:visible; pointer-events:auto; z-index:20; }
.section.entering { animation:secIn .55s cubic-bezier(.22,1,.36,1) both; visibility:visible; pointer-events:auto; z-index:21; }
.section.leaving  { animation:secOut .4s cubic-bezier(.55,0,.45,1) both; visibility:visible; z-index:19; }
#sections { perspective:1400px; }
:root { --push-y:54px; --push-blur:7px; }
@media (max-width:900px){ :root { --push-y:30px; --push-blur:0px; } }
@keyframes secIn  { from{opacity:0;transform:translate3d(0,var(--push-y),-90px) scale(.94);filter:blur(var(--push-blur))} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes secOut { from{opacity:1;transform:none;filter:blur(0)} to{opacity:0;transform:translate3d(0,calc(var(--push-y) * -0.85),110px) scale(1.06);filter:blur(var(--push-blur))} }

/* ── SLIDES ── */
.slides-wrap { position:relative; width:100%; height:100%; }
.slide { position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; }
.slide.active { opacity:1; visibility:visible; pointer-events:auto; }
.slide.entering { animation:slideIn .42s cubic-bezier(.22,1,.36,1) both; visibility:visible; pointer-events:auto; }
.slide.leaving  { animation:slideOut .32s cubic-bezier(.55,0,.45,1) both; visibility:visible; }
@keyframes slideIn  { from{opacity:0;transform:translateY(20px);filter:blur(3px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes slideOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(-12px)} }
.slide.entering .frame { animation:frameIn .48s cubic-bezier(.22,1,.36,1) both; }
.slide.entering .frame:nth-child(1) { animation-delay:0ms; }
.slide.entering .frame:nth-child(2) { animation-delay:40ms; }
.slide.entering .frame:nth-child(3) { animation-delay:80ms; }
.slide.entering .frame:nth-child(4) { animation-delay:120ms; }
.slide.entering .frame:nth-child(5) { animation-delay:160ms; }
.slide.entering .frame:nth-child(6) { animation-delay:200ms; }
@keyframes frameIn { from{opacity:0;transform:scale(.94) translateY(10px)} to{opacity:1;transform:none} }
/* ── FRAMES ── */
.frame {
  position:absolute; border:1px solid var(--frame-border); border-radius:var(--r);
  display:flex; flex-direction:column; background:rgba(12,13,19,.42);
  backdrop-filter:blur(4px);
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  transition:border-color .2s, box-shadow .2s;
  z-index:2;
}
.frame.dragging, .frame.resizing { z-index:50; }
.frame::after { content:""; position:absolute; right:0; bottom:0; width:20px; height:20px; background:linear-gradient(135deg,transparent 50%,rgba(227,185,107,.5) 50%); border-radius:0 0 var(--r) 0; z-index:9; pointer-events:none; }
.resize-handle { position:absolute; right:0; bottom:0; width:20px; height:20px; z-index:10; touch-action:none; background:transparent; }
.frame:hover { border-color:rgba(227,185,107,.42); box-shadow:0 8px 32px rgba(0,0,0,.55),0 0 24px rgba(227,185,107,.07); }
.frame-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; height:28px; flex-shrink:0;
  background:var(--frame-header-bg);
  border-bottom:1px solid rgba(227,185,107,.14);
  border-radius:var(--r) var(--r) 0 0;
  z-index:3; position:relative;
  touch-action:none; user-select:none; pointer-events:auto;
}
.node-title { font-size:9px; letter-spacing:1.5px; color:rgba(227,185,107,.75); }
.node-dots { display:flex; gap:5px; }
.node-dots span { width:8px; height:8px; border-radius:50%; background:rgba(227,185,107,.24); }
.node-dots span:nth-child(1) { background:rgba(227,185,107,.85); }
.node-dots span:nth-child(2) { background:rgba(227,185,107,.52); }
.node-dots span:nth-child(3) { background:rgba(227,185,107,.28); }
.frame-viewport { flex:1; position:relative; overflow:hidden; border-radius:0 0 var(--r) var(--r); background:#07080C; }
.frame-viewport video, .frame-viewport canvas {
  position:absolute; width:100vw; height:calc(100vh - var(--bar));
  object-fit:cover; pointer-events:none;
}
.home-video-poster {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
.center-title {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; z-index:1000; pointer-events:none; cursor:none;
}
/* 标题底部的暗色光晕：避免大标题压在亮色视频块上读不清 */
.center-title::before {
  content:""; position:absolute; left:50%; top:50%;
  width:min(860px,92vw); height:min(420px,58vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 52% 46% at 50% 50%, rgba(7,8,12,.78) 0%, rgba(7,8,12,.38) 55%, transparent 100%);
  pointer-events:none; z-index:-1;
}
.center-title.no-click { pointer-events:none; }
.ct-tag {
  font-size:9px; letter-spacing:3px; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(227,185,107,.30);
  padding:3px 12px; border-radius:100px;
}
.ct-h {
  font-family:var(--serif); font-weight:900;
  font-size:clamp(36px,5.4vw,78px); letter-spacing:6px;
  text-align:center; line-height:1.12;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 26px rgba(0,0,0,.65));
}
.ct-sub { font-size:12px; color:var(--dim2); letter-spacing:2px; }
.paginator {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:20;
}
.pag-dot { width:6px; height:6px; border-radius:50%; background:rgba(227,185,107,.25); transition:all .3s; cursor:none; }
.pag-dot.active { background:var(--accent); width:20px; border-radius:3px; box-shadow:0 0 10px rgba(227,185,107,.5); }
.sec-placeholder {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.ph-glyph { font-size:48px; color:var(--accent); opacity:.65; }
.ph-title {
  font-family:var(--serif); font-weight:900;
  font-size:clamp(26px,4vw,58px); letter-spacing:6px; color:var(--paper);
}
.ph-sub { font-size:12px; color:var(--dim); letter-spacing:2px; }
.exh-toggle-wrap { display:flex; align-items:center; gap:12px; margin-top:8px; }
.tog-label { font-size:11px; color:var(--dim); letter-spacing:1px; }
.tog-wrap { position:relative; display:inline-block; width:44px; height:24px; cursor:none; }
.tog-wrap input { opacity:0; width:0; height:0; }
.tog-slider {
  position:absolute; inset:0; background:rgba(243,238,227,.10);
  border:1px solid rgba(227,185,107,.25); border-radius:12px; transition:all .3s;
}
.tog-slider::before {
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  left:2px; top:2px; background:var(--paper);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.tog-wrap input:checked + .tog-slider { background:var(--accent-dim); border-color:var(--accent); }
.tog-wrap input:checked + .tog-slider::before { transform:translateX(20px); background:var(--accent-bright); }
/* ── CHAT ── */
.chat-area {
  width:min(520px,90vw); background:rgba(227,185,107,.045);
  border:1px solid rgba(227,185,107,.20); border-radius:12px;
  min-height:290px; padding:24px; display:flex; flex-direction:column; gap:16px;
  backdrop-filter:blur(8px); margin-top:8px; pointer-events:auto;
  transition:min-height .28s ease, width .28s ease, box-shadow .28s ease, border-color .28s ease;
  overflow:hidden;
}
.chat-area.chat-area-expanded {
  width:min(760px,92vw);
  min-height:min(72vh,680px);
  border-color:rgba(227,185,107,.32);
  box-shadow:0 24px 80px rgba(0,0,0,.32), 0 0 40px rgba(227,185,107,.07);
}
.chat-avatar {
  width:56px; height:56px; border-radius:50%;
  position:relative; display:flex; align-items:center; justify-content:center; align-self:center;
}
.avatar-ring {
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--accent); opacity:.7;
  animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100%{opacity:.4} 50%{opacity:.9} }
.avatar-core {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,rgba(227,185,107,.22),rgba(169,128,59,.18));
  border:1px solid rgba(227,185,107,.40);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; letter-spacing:2px; font-weight:700; color:var(--accent-bright);
}
.chat-msgs {
  display:flex; flex-direction:column; gap:8px; max-height:180px; overflow-y:auto; user-select:text;
  transition:max-height .28s ease, min-height .28s ease, padding-right .28s ease;
  scroll-behavior:smooth;
}
.chat-area.chat-area-expanded .chat-msgs {
  flex:1;
  min-height:min(42vh,360px);
  max-height:min(42vh,360px);
  padding-right:4px;
}
.msg { padding:10px 14px; border-radius:8px; font-size:12px; line-height:1.6; letter-spacing:.5px; white-space:pre-wrap; word-break:break-word; }
.ai-msg { background:rgba(227,185,107,.08); border:1px solid rgba(227,185,107,.20); color:var(--dim2); align-self:flex-start; max-width:85%; }
.user-msg { background:rgba(243,238,227,.06); border:1px solid rgba(243,238,227,.14); color:var(--paper); align-self:flex-end; max-width:85%; }
.chat-input-row { display:flex; gap:8px; margin-top:auto; }
.chat-input {
  flex:1; background:rgba(243,238,227,.05); border:1px solid rgba(227,185,107,.22);
  border-radius:6px; color:var(--paper); padding:8px 12px; font-size:12px; outline:none; transition:border-color .2s; pointer-events:auto; user-select:text; -webkit-user-select:text; cursor:text !important; caret-color:var(--accent-bright);
}
.chat-input:focus { border-color:rgba(227,185,107,.5); }
.chat-input:disabled { opacity:.6; }
.chat-send {
  background:var(--accent-dim); border:1px solid rgba(227,185,107,.35);
  border-radius:6px; color:var(--accent); padding:8px 16px; cursor:none; font-size:14px; transition:all .2s; pointer-events:auto;
}
.chat-send:hover { background:rgba(227,185,107,.22); color:var(--accent-bright); }
.chat-send:disabled { opacity:.4; }
.chat-quota { min-height:14px; font-size:10px; color:var(--dim); letter-spacing:1px; text-align:right; line-height:1.5; }
/* ── INFO ── */
.info-wrap { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; padding:60px 80px; align-items:start; }
.info-col { padding:0 40px; }
.info-main { border-right:1px solid rgba(227,185,107,.14); }
.info-details { border-right:1px solid rgba(227,185,107,.14); }
.info-logo { font-family:var(--serif); font-size:28px; font-weight:900; letter-spacing:4px; margin-bottom:24px; }
.info-logo-dot { color:var(--accent); }
.info-tagline { font-size:14px; line-height:1.8; color:var(--dim2); margin-bottom:24px; }
.info-tags { display:flex; flex-wrap:wrap; gap:8px; }
.info-tags span { font-size:9px; letter-spacing:1.5px; border:1px solid rgba(227,185,107,.25); border-radius:100px; padding:4px 12px; color:var(--dim); }
.info-block { margin-bottom:24px; }
.info-block-label { font-size:9px; letter-spacing:2px; color:var(--accent); margin-bottom:8px; }
.info-block-val { font-size:13px; color:var(--dim2); line-height:1.8; }
.info-link-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.info-link-list li { font-size:12px; color:var(--dim2); display:flex; align-items:center; gap:8px; }
.link-arrow { color:var(--accent); font-size:14px; }
.info-yr { font-size:10px; color:var(--dim); letter-spacing:2px; margin-top:40px; }
/* ── ABOUT · 个人介绍（最后一个 section；暗金衬线 + frame 入场错峰） ── */
.about-wrap {
  position:absolute; inset:0;
  display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:1px;
  padding:48px 80px; align-items:start; align-content:center;
}
.about-col { padding:0 40px; }
.about-id { border-right:1px solid rgba(227,185,107,.14); }
.about-detail { border-right:1px solid rgba(227,185,107,.14); }
.about-kicker { font-size:9px; letter-spacing:3px; color:var(--accent); margin-bottom:18px; }
.about-name {
  font-family:var(--serif); font-weight:900;
  font-size:clamp(34px,3.6vw,50px); letter-spacing:3px; line-height:1.1; color:var(--paper);
}
.about-name-en { color:var(--accent); font-weight:700; }
.about-role { font-size:12px; letter-spacing:1.5px; color:var(--dim2); margin-top:12px; }
.about-bio { font-size:13px; line-height:1.95; color:var(--dim2); margin-top:20px; max-width:380px; }
.about-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.about-tags span { font-size:9px; letter-spacing:1.5px; border:1px solid rgba(227,185,107,.30); background:var(--accent-dim); border-radius:100px; padding:4px 12px; color:var(--dim2); }
.about-block { margin-bottom:28px; }
.about-block:last-child { margin-bottom:0; }
.about-label { font-size:9px; letter-spacing:2px; color:var(--accent); margin-bottom:12px; }
.about-val { font-size:12.5px; color:var(--dim2); line-height:2; }
.about-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.about-list li { font-size:12px; color:var(--dim2); line-height:1.5; display:flex; gap:8px; align-items:baseline; }
.li-arrow { color:var(--accent); flex-shrink:0; }
/* 入场错峰：section 进入时三列依次浮入（与 .slide.entering .frame 同一手法） */
.section.entering .about-col { animation:aboutIn .52s var(--ease) both; }
.section.entering .about-id { animation-delay:60ms; }
.section.entering .about-detail { animation-delay:150ms; }
.section.entering .about-awards { animation-delay:240ms; }
@keyframes aboutIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media (max-width:900px) {
  .about-wrap { grid-template-columns:1fr; gap:0; padding:56px 28px; align-content:start; overflow-y:auto; }
  .about-col { padding:18px 0; border-right:none; border-bottom:1px solid rgba(227,185,107,.14); }
}
/* ── VIEWER ── */
.viewer-overlay { position:fixed; inset:0; z-index:200; background:rgba(5,6,9,.95); display:none; align-items:center; justify-content:center; }
.viewer-overlay.open { display:flex; }
.viewer-overlay video { max-width:90vw; max-height:90vh; border-radius:var(--r); }
.viewer-close { position:absolute; top:20px; right:24px; background:rgba(17,19,27,.8); border:1px solid rgba(227,185,107,.35); border-radius:50%; width:36px; height:36px; color:var(--accent); font-size:14px; cursor:none; }
.viewer-progress { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:min(480px,80vw); height:3px; background:rgba(243,238,227,.14); border-radius:2px; overflow:hidden; }
.vp-bar { height:100%; width:0; background:var(--gold-grad); border-radius:2px; transition:width .3s linear; }
/* ── CURSOR ── */
.cursor { position:fixed; z-index:2147483647; pointer-events:none; width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(227,185,107,.65); transform:translate(-50%,-50%); transition:width .2s, height .2s, background .2s; }
.cursor-dot { position:fixed; z-index:2147483647; pointer-events:none; width:4px; height:4px; border-radius:50%; background:var(--accent-bright); transform:translate(-50%,-50%); }
.cursor.active { width:20px; height:20px; background:rgba(227,185,107,.16); }
.cursor-coords { position:fixed; z-index:2147483647; pointer-events:none; font-family:"SF Mono","Cascadia Code",monospace; font-size:9px; letter-spacing:1.5px; color:rgba(227,185,107,.75); white-space:nowrap; transform:translateY(-50%); }
.chat-msgs::-webkit-scrollbar { width:4px; }
.chat-msgs::-webkit-scrollbar-track { background:transparent; }
.chat-msgs::-webkit-scrollbar-thumb { background:rgba(227,185,107,.35); border-radius:2px; }
.bg-canvas { display:none; }
/* Layout exporter */
.layout-exporter { position:fixed; bottom:32px; right:20px; z-index:9000; }
.layout-export-btn { background:rgba(12,13,19,.85); border:1px solid rgba(227,185,107,.4); border-radius:4px; color:rgba(227,185,107,.85); font-family:"SF Mono","Cascadia Code",monospace; font-size:9px; letter-spacing:1.5px; padding:5px 10px; }
.layout-export-btn:hover { background:rgba(227,185,107,.12); border-color:rgba(227,185,107,.7); color:var(--accent-bright); }
.layout-export-out { position:fixed; bottom:64px; right:20px; z-index:9000; width:min(520px,90vw); background:rgba(10,11,16,.97); border:1px solid rgba(227,185,107,.3); border-radius:6px; padding:12px; font-family:"SF Mono","Cascadia Code",monospace; font-size:10px; color:rgba(227,185,107,.9); white-space:pre; overflow-x:auto; display:none; line-height:1.6; }
.layout-export-out.show { display:block; }

/* TOOL_01 — Prompt Hub 跳转入口（覆盖一张主页缩略图，hover 提亮） */
.cinema-tool.tool-link { display:flex; flex-direction:column; }
.cinema-tool.tool-link .tool-thumb {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  z-index:2; opacity:.78;
  transition:opacity .35s ease, transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.cinema-tool.tool-link:hover .tool-thumb { opacity:1; transform:scale(1.015); }
.cinema-tool.tool-link::after {
  content:'OPEN ↗';
  position:absolute; right:14px; bottom:12px; z-index:3;
  font-family:'SF Mono','Cascadia Code',monospace;
  font-size:10px; letter-spacing:2px;
  color:var(--accent-bright); background:rgba(10,11,16,.6);
  border:1px solid rgba(227,185,107,.5);
  padding:5px 10px; border-radius:4px;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
.cinema-tool.tool-link:hover::after { opacity:1; }

/* APP_01 — JoeyCV 跳转入口 */
.joey-app.app-link { display:flex; flex-direction:column; }
.joey-app.app-link .app-thumb {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  z-index:2; opacity:.82;
  transition:opacity .35s ease, transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.joey-app.app-link:hover .app-thumb { opacity:1; transform:scale(1.015); }
.joey-app.app-link::after {
  content:'OPEN ↗';
  position:absolute; right:14px; bottom:12px; z-index:3;
  font-family:'SF Mono','Cascadia Code',monospace;
  font-size:10px; letter-spacing:2px;
  color:var(--accent-bright); background:rgba(10,11,16,.6);
  border:1px solid rgba(227,185,107,.5);
  padding:5px 10px; border-radius:4px;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
.joey-app.app-link:hover::after { opacity:1; }

/* ── HOME · clickable visual tiles ── */
.visual-tile { cursor: none; }
.visual-tile .frame-viewport { transition: filter .35s ease, box-shadow .35s ease; }
.visual-tile:hover .frame-viewport { filter: brightness(1.06) saturate(1.05); box-shadow: inset 0 0 0 1px rgba(227,185,107,.4); }
.visual-tile .frame-viewport::after {
  content: "OPEN ↗";
  position: absolute; right: 12px; bottom: 10px;
  font-family: "SF Mono","Cascadia Code",monospace;
  font-size: 9px; letter-spacing: 2px;
  color: var(--accent-bright); background: rgba(10,11,16,.6);
  border: 1px solid rgba(227,185,107,.5);
  padding: 4px 9px; border-radius: 4px;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none; z-index: 5;
}
.visual-tile:hover .frame-viewport::after { opacity: 1; }

/* ── WORKS subpage ── */
.works-app { background: var(--bg); }
.works-back {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--paper);
}
.works-back .back-arrow {
  font-size: 14px; color: var(--accent);
  transition: transform .25s ease;
}
.works-back:hover .back-arrow { transform: translateX(-3px); }
.works-title {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 12px;
}
.works-title-tag {
  font-size: 9px; letter-spacing: 2px; color: var(--accent);
  border: 1px solid rgba(227,185,107,.35); padding: 3px 8px; border-radius: 100px;
}
.works-title-text {
  font-size: 11px; letter-spacing: 3px; color: var(--dim2);
}
.works-counter {
  font-family: "SF Mono","Cascadia Code",monospace;
  font-size: 10px; letter-spacing: 2px; color: var(--dim2);
}

/* enable real scrolling on the works subpage (overrides the global html/body lock) */
html:has(body.works-page),
body.works-page { height: auto !important; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.works-page #bgCanvas { position: fixed; inset: 0; }
body.works-page #app.works-app { position: relative; inset: auto; min-height: 100vh; }

.works-main {
  position: relative;
  margin-top: var(--bar);
  padding-top: calc(40vh - var(--bar));
  padding-bottom: 60vh;
  display: flex;
  align-items: flex-start;
  z-index: 5;
}
.works-stage {
  position: relative; flex: 1; min-width: 0;
  min-height: 500vh;
  overflow: visible;
}
.works-timeline {
  position: relative;
  flex: 0 0 280px; width: 280px;
  height: 500vh;
  padding-left: 28px;
  z-index: 6;
}

/* fixed background panel — stays put while the timeline content scrolls past */
.works-timeline-bg {
  position: fixed;
  right: 0;
  top: var(--bar);
  bottom: 0;
  width: 280px;
  border-left: 1px solid rgba(227,185,107,.14);
  background: rgba(10,11,16,.45);
  backdrop-filter: blur(8px);
  z-index: 3;
  pointer-events: none;
}

/* timeline track — fills the full 500vh height; positions are date-percent of this */
.tl-track {
  position: relative;
  height: 100%;
}
.tl-line {
  position: absolute; left: 56px; top: 0; bottom: 0;
  width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(227,185,107,.24) 8%, rgba(227,185,107,.24) 92%, transparent 100%);
}

/* tick marks */
.tl-tick {
  position: absolute; left: 52px; width: 4px; height: 1px;
  background: rgba(243,238,227,.12);
  transform: translateY(-50%);
}
.tl-tick-mid {
  left: 50px; width: 6px;
  background: rgba(243,238,227,.18);
}
.tl-tick-year {
  left: 46px; width: 10px; height: 1px;
  background: rgba(227,185,107,.6);
}

/* year markers — large now that the track is 500vh tall */
.tl-year {
  position: absolute; left: 0; transform: translateY(-50%);
  font-family: var(--serif); font-weight: 900;
  font-size: 38px; letter-spacing: 6px;
  background: var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 18px rgba(227,185,107,.3));
}

/* work entry: dot + connector + label */
.tl-entry {
  position: absolute; left: 0; right: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.tl-dot {
  position: absolute; left: 52px; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(10,11,16,1);
  box-shadow: 0 0 0 1px rgba(227,185,107,.65), 0 0 12px rgba(227,185,107,.4);
  transform: translate(-50%, -50%);
}
.tl-dot-line {
  position: absolute; left: 56px; top: 50%;
  width: 18px; height: 1px;
  background: rgba(227,185,107,.45);
  transform: translateY(-50%);
}
.tl-dot-label {
  position: absolute; left: 80px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  white-space: nowrap;
}
.tl-dot-code {
  font-size: 10px; letter-spacing: 1.5px; color: var(--paper);
  font-family: "SF Mono","Cascadia Code",monospace;
}
.tl-dot-date {
  font-size: 8px; letter-spacing: 1.5px; color: var(--dim);
  font-family: "SF Mono","Cascadia Code",monospace;
}

/* work tile body (mock content) */
.work-tile .frame-viewport {
  position: relative;
  overflow: hidden;
}
.work-meta {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px;
  background: linear-gradient(to bottom, transparent 30%, rgba(10,11,16,.4) 70%, rgba(10,11,16,.78) 100%);
  pointer-events: none;
}
.work-meta-id {
  position: absolute; top: 10px; right: 14px;
  font-size: 9px; letter-spacing: 2px; color: var(--accent);
  font-family: "SF Mono","Cascadia Code",monospace;
}
.work-meta-title {
  font-family: var(--serif);
  font-size: 15px; letter-spacing: 1px; color: var(--paper);
  margin-bottom: 4px;
}
.work-meta-sub {
  font-size: 9px; letter-spacing: 2px; color: var(--dim2);
  text-transform: uppercase;
}

/* fixed "now" indicator — pinned to viewport so timeline labels flow past it */
.tl-now {
  position: fixed;
  top: 40vh;
  right: 0;
  width: 280px;
  height: 0;
  pointer-events: none;
  z-index: 30;
}
.tl-now-line {
  position: absolute;
  left: -120px;
  right: 36px;
  top: 0; height: 1px;
  background: linear-gradient(to right, rgba(227,185,107,0) 0%, rgba(227,185,107,.4) 35%, rgba(246,218,151,1) 100%);
  box-shadow: 0 0 12px rgba(227,185,107,.55);
  transform: translateY(-50%);
}
.tl-now-dot {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent-bright);
  border: 2px solid var(--accent-deep);
  box-shadow: 0 0 0 1px rgba(10,11,16,1), 0 0 22px rgba(227,185,107,.9);
  transform: translate(-50%, -50%);
  animation: tlNowPulse 2.4s ease-in-out infinite;
}
@keyframes tlNowPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(10,11,16,1), 0 0 18px rgba(227,185,107,.7); }
  50%     { box-shadow: 0 0 0 1px rgba(10,11,16,1), 0 0 30px rgba(246,218,151,1); }
}
.tl-now-tag {
  position: absolute;
  left: 22px; top: -22px;
  font-family: "SF Mono","Cascadia Code",monospace;
  font-size: 8px; letter-spacing: 2.5px;
  color: var(--accent);
}
.tl-now-label {
  position: absolute;
  left: 22px; top: 4px;
  font-family: "SF Mono","Cascadia Code",monospace;
  font-size: 22px; letter-spacing: 4px; font-weight: 700;
  color: var(--paper);
  text-shadow: 0 0 16px rgba(227,185,107,.55);
  white-space: nowrap;
}

/* active state: work whose date is closest to the current "now" */
.tl-entry.active .tl-dot {
  width: 11px; height: 11px;
  background: var(--accent-bright);
  box-shadow: 0 0 0 1px rgba(227,185,107,1), 0 0 20px rgba(227,185,107,.85);
}
.tl-entry.active .tl-dot-code { color: var(--accent-bright); }
.tl-entry.active .tl-dot-line { background: rgba(227,185,107,.9); width: 22px; }

.work-tile.active {
  border-color: rgba(227,185,107,.6);
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 30px rgba(227,185,107,.16);
  z-index: 8;
}
.work-tile.active .work-meta-id { color: var(--accent-bright); }

/* ── ABOUT · 公开活动照片墙（方案A 鎏金相框墙：复用站内"窗口"语言，2×2 错落） ── */
.ph-kicker { margin-top: 22px; }
.ph-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; padding-bottom: 18px; perspective: 900px; }
.ph-frame {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid rgba(227,185,107,.22); border-radius: var(--r);
  background: rgba(12,13,19,.42); backdrop-filter: blur(4px);
  cursor: none; transition: border-color .2s, box-shadow .2s, transform .18s ease-out;
  transform: translateY(var(--shy, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.ph-frame:nth-child(even) { --shy: 16px; }
.ph-frame::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  background: linear-gradient(135deg, transparent 50%, rgba(227,185,107,.5) 50%);
  z-index: 4; pointer-events: none;
}
.ph-frame.has-photo { cursor: none; }
.ph-frame.has-photo:hover { border-color: rgba(227,185,107,.45); box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 24px rgba(227,185,107,.08); }
.ph-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; height: 22px; flex-shrink: 0;
  background: var(--frame-header-bg);
  border-bottom: 1px solid rgba(227,185,107,.14);
}
.ph-code { font-size: 8px; letter-spacing: 1.5px; color: rgba(227,185,107,.75); }
.ph-viewport { position: relative; aspect-ratio: 16 / 10; background: #07080C; overflow: hidden; }
.ph-slot, .ph-slot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-slot img { object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.ph-slot img.show { opacity: 1; }
.ph-empty {
  position: absolute; inset: 8px; border: 1px dashed rgba(227,185,107,.22); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 9px; letter-spacing: 2.5px; line-height: 1.9; color: rgba(227,185,107,.35);
  background: radial-gradient(ellipse at 50% 42%, rgba(227,185,107,.06), transparent 72%);
}
.ph-caption {
  padding: 6px 9px; font-size: 8.5px; letter-spacing: 1.2px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid rgba(227,185,107,.10);
}
/* viewer 图片模式（照片墙点击放大复用同一遮罩） */
.viewer-overlay #viewerImg { display: none; max-width: 90vw; max-height: 90vh; border-radius: var(--r); border: 1px solid rgba(227,185,107,.25); box-shadow: 0 24px 80px rgba(0,0,0,.6); }

/* ── 动效升级 20260831 ─────────────────────────────
   1. 窗口边扫光：金光沿边框巡游一圈——切屏入场时各窗错峰跑一圈，悬停时循环巡游 */
@property --ga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.frame::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r); padding: 1px;
  background: conic-gradient(from var(--ga, 0deg), transparent 0 70%, rgba(246,218,151,.9) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; z-index: 9; pointer-events: none;
}
@keyframes bordersweep { 0% { --ga: 0deg; opacity: 1; } 85% { opacity: 1; } 100% { --ga: 360deg; opacity: 0; } }
.frame:hover::before { opacity: 1; animation: bordersweep 2.2s linear infinite; }
.section.entering .frame::before { animation: bordersweep 1.5s var(--ease) both; }
.section.entering .frame:nth-child(1)::before { animation-delay: .15s; }
.section.entering .frame:nth-child(2)::before { animation-delay: .27s; }
.section.entering .frame:nth-child(3)::before { animation-delay: .39s; }
.section.entering .frame:nth-child(4)::before { animation-delay: .51s; }
.section.entering .frame:nth-child(5)::before { animation-delay: .63s; }
.section.entering .frame:nth-child(6)::before { animation-delay: .75s; }

/* 2. 光标语境化：环上浮现代码（DRAG/OPEN/VIEW/PLAY） */
.cursor { display: flex; align-items: center; justify-content: center; transition: width .2s, height .2s, background .2s; }
.cursor b {
  font-family: "SF Mono","Cascadia Code",monospace;
  font-size: 8px; letter-spacing: 1px; font-weight: 400; color: var(--accent-bright);
  opacity: 0; transition: opacity .15s; white-space: nowrap;
}
.cursor.on { width: 58px; height: 58px; background: rgba(227,185,107,.10); }
.cursor.on b { opacity: 1; }
.cursor.on.active { width: 44px; height: 44px; }