/* ═══ aha · 低唤醒 / 画先到 / 安静的纸 ═══ */
:root{
  --paper:#f4f1ea; --paper-2:#ece7db; --ink:#1d1b18; --ink-soft:#4b463e;
  --ink-mute:#857d6f; --ink-faint:#a89f8f; --line:#ddd5c6;
  --accent:#b0673a; --accent-soft:#f0e4d8; --explore:#5a7d6f;
  --serif:"Noto Serif SC","Source Serif 4",Georgia,serif;
  --latin:"Source Serif 4",Georgia,serif;
  --sans:"Noto Sans SC",system-ui,sans-serif;
  --mono:"JetBrains Mono",monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* 顶栏 */
#topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:linear-gradient(to bottom,rgba(244,241,234,.92),rgba(244,241,234,.0));
  backdrop-filter:blur(6px)}
.brand{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);
  background:none;border:none;cursor:pointer;letter-spacing:-.01em}
.brand .dot{color:var(--accent)}
.top-meta{font-family:var(--mono);font-size:11px;color:var(--ink-mute);letter-spacing:.04em}
.star-btn{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:none;
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;
  transition:all .2s var(--ease)}
.star-btn:hover{border-color:var(--accent);color:var(--accent)}

#stage{min-height:100vh}
#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:18px;color:var(--ink-mute);background:var(--paper);z-index:100}
#boot.gone{opacity:0;pointer-events:none;transition:opacity .5s ease}

.fade-in{animation:fadeIn .6s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ════ 通用:可加载图(blur-up + 失败兜底)════ */
.artframe{position:relative;width:100%;background:var(--paper-2);overflow:hidden}
.artframe img{display:block;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .7s var(--ease)}
.artframe img.loaded{opacity:1}
/* 模糊占位层必须在真图「下面」(z-index:-1),否则会盖出一层白雾、压低饱和 */
.artframe .blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(22px);transform:scale(1.1);opacity:.5;z-index:-1}
.artframe .full{position:relative;z-index:1}
.artframe .fallback{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:28px;gap:8px}
.artframe.failed .fallback{display:flex}
.artframe.failed img.full{display:none}
.fallback .ft{font-family:var(--serif);font-size:20px;color:var(--ink)}
.fallback .fa{font-family:var(--latin);font-style:italic;color:var(--ink-mute)}
.fallback .fn{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:6px}

/* ════ 冷启动:审美滑滑 ════ */
.onboard{max-width:520px;margin:0 auto;padding:76px 20px 30px;text-align:center;min-height:100vh;
  display:flex;flex-direction:column}
.ob-head{margin-bottom:14px}
.ob-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.ob-h{font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.3}
.ob-sub{font-size:13.5px;color:var(--ink-mute);margin-top:8px;line-height:1.6}
.ob-card{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.ob-art{border-radius:8px;box-shadow:0 12px 40px -12px rgba(40,30,20,.35);
  border:1px solid var(--line);aspect-ratio:4/3;max-height:52vh}
.ob-cap{font-family:var(--latin);font-style:italic;font-size:13px;color:var(--ink-mute);margin:12px 0 4px}
.ob-progress{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.1em}
.ob-actions{display:flex;gap:14px;justify-content:center;margin-top:18px}
.ob-btn{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);
  font-size:24px;cursor:pointer;transition:all .18s var(--ease);display:flex;align-items:center;justify-content:center}
.ob-btn:hover{transform:translateY(-3px)}
.ob-btn.like:hover{border-color:var(--accent);background:var(--accent-soft)}
.ob-btn.skip:hover{border-color:var(--ink-mute)}
.ob-hint{font-size:12px;color:var(--ink-faint);margin-top:14px}
.ob-skipall{margin-top:10px;background:none;border:none;color:var(--ink-faint);
  font-size:12px;cursor:pointer;text-decoration:underline}

/* ════ 漫游:单幅作品页 ════ */
.roam{min-height:100vh;padding-top:56px}
.work-wrap{max-width:1100px;margin:0 auto;padding:8px 16px 60px}
.today-badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-align:center;margin:6px 0 12px}
.work-art{border-radius:6px;border:1px solid var(--line);box-shadow:0 18px 50px -18px rgba(40,30,20,.4);
  max-height:64vh;aspect-ratio:auto;cursor:pointer;background:var(--paper-2)}
.work-art .artframe-inner,.work-art img{max-height:64vh}
.tap-hint{text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  letter-spacing:.1em;margin-top:8px;transition:opacity .3s}
.tap-hint.hide{opacity:0}

/* 作品信息(轻点浮现) */
.work-info{max-width:680px;margin:10px auto 0;overflow:hidden;max-height:0;
  transition:max-height .5s var(--ease)}
.work-info.open{max-height:420px}
.wi-inner{padding:18px 4px 0;text-align:center}
.wi-title{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.3}
.wi-by{font-family:var(--latin);font-style:italic;font-size:14px;color:var(--ink-mute);margin-top:4px}
.wi-one{font-family:var(--serif);font-size:16.5px;line-height:1.65;color:var(--ink-soft);
  margin:16px auto;max-width:560px;padding-left:14px;border-left:3px solid var(--accent);text-align:left}
.wi-look{font-size:13.5px;line-height:1.7;color:var(--ink-mute);background:var(--paper-2);
  border-radius:8px;padding:12px 16px;max-width:560px;margin:0 auto;text-align:left}
.wi-look b{color:var(--accent);font-weight:500}
.wi-themes{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.wi-themes .t{font-family:var(--sans);font-size:11.5px;color:var(--ink-mute);
  border:1px solid var(--line);border-radius:999px;padding:3px 11px}
.wi-themes .t::before{content:"#";opacity:.5}

/* 心动按钮 */
.heart-row{display:flex;justify-content:center;margin:18px 0 6px}
.heart{font-family:var(--sans);font-size:14px;display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 20px;
  cursor:pointer;color:var(--ink-soft);transition:all .2s var(--ease)}
.heart:hover{border-color:var(--accent)}
.heart.on{background:var(--accent);border-color:var(--accent);color:#fff}
.heart .hi{font-size:15px}

/* ════ 三扇门 ════ */
.doors{max-width:760px;margin:30px auto 0}
.doors-label{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.door{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:15px 18px;margin-bottom:10px;cursor:pointer;
  transition:all .22s var(--ease);position:relative}
.door:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px -12px rgba(40,30,20,.3)}
.door-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.door-chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;background:var(--accent-soft);color:var(--accent)}
.door.explore .door-chip{background:#e4ede9;color:var(--explore)}
.door-arrow{margin-left:auto;color:var(--ink-faint);font-size:15px;transition:transform .2s var(--ease)}
.door:hover .door-arrow{transform:translateX(4px);color:var(--accent)}
.door-why{font-family:var(--serif);font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* ════ 星图 / 审美画像 ════ */
.star{max-width:900px;margin:0 auto;padding:80px 20px 60px;min-height:100vh}
.star-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);text-align:center;margin-bottom:8px}
.star-h{font-family:var(--serif);font-size:28px;font-weight:500;text-align:center;margin-bottom:6px}
.star-portrait{font-family:var(--serif);font-size:17px;line-height:1.8;color:var(--ink-soft);
  max-width:600px;margin:14px auto 6px;text-align:center}
.star-stats{font-family:var(--mono);font-size:12px;color:var(--ink-mute);text-align:center;
  letter-spacing:.04em;margin-bottom:8px}
.star-themes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0 30px}
.star-themes .st{font-size:13px;color:var(--ink);background:var(--accent-soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 14px}
.constellation{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.cnode{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1;cursor:pointer;transition:transform .2s var(--ease)}
.cnode:hover{transform:scale(1.04)}
.cnode .artframe{height:100%}
.cnode.loved::after{content:"♥";position:absolute;top:6px;right:8px;color:#fff;font-size:13px;
  text-shadow:0 1px 4px rgba(0,0,0,.5)}
.cnode .cn-cap{position:absolute;bottom:0;left:0;right:0;font-family:var(--latin);font-size:10px;
  color:#fff;padding:14px 6px 5px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star-empty{text-align:center;color:var(--ink-mute);font-family:var(--serif);font-size:16px;padding:40px}
.star-back{display:block;margin:34px auto 0;font-family:var(--sans);font-size:14px;
  background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:12px 28px;cursor:pointer}
.star-share{display:block;margin:12px auto 0;background:none;border:none;color:var(--ink-mute);
  font-size:12.5px;cursor:pointer;text-decoration:underline}

/* ════ v2 提升 ════ */
#view{transition:opacity .18s var(--ease)}
#view.leaving{opacity:0}
.ob-art{transition:transform .14s var(--ease)}

/* 漫游导航条 + 旅程小点 */
.roam-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:760px;margin:6px auto 2px}
.rn-btn{font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);background:none;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;
  transition:all .2s var(--ease)}
.rn-btn:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
.rn-btn[disabled]{opacity:.32;cursor:default}
.journey-dots{display:flex;gap:6px;align-items:center}
.journey-dots .jd{width:6px;height:6px;border-radius:50%;background:var(--line)}
.journey-dots .jd.now{background:var(--accent);transform:scale(1.4)}

/* 「为你而来」理由 */
.reason{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--accent);margin:10px 0 14px;opacity:.92}
.reason.explore{color:var(--explore)}

/* 键盘提示 */
.kbd-hint{text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  letter-spacing:.05em;margin-top:30px}
@media(hover:none){.kbd-hint{display:none}}

/* 门:序号键 + 心动脉冲 */
.door-key{font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:5px;width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.door:hover .door-key{border-color:var(--accent);color:var(--accent)}
.heart.pulse{animation:hpulse .4s var(--ease)}
@keyframes hpulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 星座 SVG */
.constel-wrap{max-width:620px;margin:8px auto 0}
.constellation-svg{width:100%;height:auto;display:block}
.constellation-svg .cl{stroke:var(--line);stroke-width:1;opacity:.7}
.constellation-svg .cl.path{stroke:var(--accent);stroke-width:1.6;opacity:.85}
.cnode-svg{cursor:pointer;transition:transform .2s var(--ease)}
.cnode-svg .ring{fill:none;stroke:#fff;stroke-width:1.5;opacity:.9}
.cnode-svg.loved .ring{stroke:var(--accent);stroke-width:2.5}
.cnode-svg:hover{transform-box:fill-box;transform-origin:center}
.cnode-svg:hover .ring{stroke:var(--accent);stroke-width:3}
.constel-legend{text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
  letter-spacing:.04em;margin:14px auto 0;max-width:520px;line-height:1.7}
.constel-legend .lg-path{color:var(--accent)}
.star-portrait b{color:var(--accent);font-weight:500}

@media(max-width:560px){
  .wi-one{font-size:15px}.work-h{font-size:20px}
  .ob-art{max-height:46vh}
  .roam-nav{flex-wrap:wrap}
}

/* 全站「返回首页」浮标(任意主题可见)*/
.home-fab{position:fixed;left:14px;bottom:14px;z-index:9999;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12px;text-decoration:none;color:#1d1b18;
  background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.12);border-radius:999px;
  padding:8px 13px;backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.home-fab:hover{background:#fff;color:#b0673a}