.personal-atlas{--pa-ink:#392d25;--pa-muted:#6b5b4f;--pa-paper:#fffaf0;--pa-line:#d9c9b5;color:var(--pa-ink);background:var(--pa-paper);border:1px solid var(--pa-line);border-radius:24px;width:min(1080px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;overscroll-behavior:contain;box-shadow:0 24px 100px #20170e40}
.personal-atlas::backdrop{background:#241a12a6}
.pa-shell{padding:32px}
.pa-header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.pa-header h1{font-family:Georgia,'Songti SC',SimSun,serif;font-size:clamp(32px,6vw,52px);margin:4px 0}
.pa-eyebrow{letter-spacing:.12em;font-size:12px;color:var(--pa-muted);margin:0}
.personal-atlas button{font:inherit;cursor:pointer;min-height:44px;color:inherit}
.pa-close{font-size:28px!important;border:1px solid var(--pa-line);border-radius:50%;background:transparent;width:44px;flex-shrink:0}
.pa-intro{color:var(--pa-muted);line-height:1.7}
.pa-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.pa-tabs button,.pa-empty button,.pa-detail-copy button{border:1px solid var(--pa-line);padding:10px 18px;border-radius:30px;background:transparent}
.pa-tabs button[aria-pressed=true]{background:var(--pa-ink);color:var(--pa-paper);border-color:var(--pa-ink)}
.pa-tabs span{font-size:12px;margin-inline-start:6px}
.pa-filter{display:flex;align-items:center;gap:12px;font-size:14px;margin-bottom:20px}
.pa-filter select{font:inherit;min-height:44px;border:1px solid var(--pa-line);border-radius:10px;background:transparent;color:inherit;padding:8px 12px;max-width:100%}
.pa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.pa-card{--card-color:#eee3d2;background:var(--card-color);border-radius:16px;overflow:hidden;min-width:0;transition:transform 180ms ease}
.pa-animal{--card-color:#e8ebdc}
.pa-plant{--card-color:#e0ebdf}
.pa-microbe{--card-color:#deebed}
.pa-dessert{--card-color:#f6e3d9}
.pa-mbti{--card-color:#e9e2ef}
.pa-zodiac-elements{--card-color:#f1e8cc}
.pa-relationship{--card-color:#f0dfe5}
.pa-card-open{display:flex;align-items:stretch;flex-direction:column;text-align:start;width:100%;background:none;border:0;padding:16px;gap:8px}
.pa-card img,.pa-card svg{width:100%;height:190px;object-fit:contain}
.pa-letter{display:grid;place-items:center;height:190px;font-size:60px;font-family:Georgia,serif}
.pa-card-label{font-size:12px;color:var(--pa-muted)}
.pa-card strong{font-size:22px;line-height:1.4}
.pa-description{line-height:1.7;font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pa-favorite{border:0;border-top:1px solid #392d2520;background:transparent;width:100%;text-align:start;padding:10px 16px}
.pa-favorite[aria-pressed=true]{color:#842f37}
.pa-empty{padding:40px 20px;text-align:center;border-block:1px solid var(--pa-line)}
.pa-empty>span{font-size:52px;color:#9c5b35}
.pa-empty p,.pa-storage{color:var(--pa-muted);line-height:1.7}
.pa-next{margin-top:32px}
.pa-next h2{font-size:22px}
.pa-next>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pa-next button{display:flex;flex-direction:column;align-items:start;gap:4px;text-align:start;padding:14px 16px;border:1px solid var(--pa-line);border-radius:12px;background:transparent}
.pa-next small{color:var(--pa-muted)}
.pa-storage{font-size:13px;margin:24px 0 0}
.pa-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.pa-detail>[data-pa-back]{grid-column:1/-1;justify-self:start;background:transparent;border:0}
.pa-detail .pa-card img,.pa-detail .pa-card svg{height:280px}
.pa-detail-copy p{line-height:1.9}
.pa-detail .pa-description{display:none}
.personal-atlas :focus-visible{outline:3px solid #955123;outline-offset:3px}
@media(hover:hover){.pa-card:has(.pa-card-open:hover){transform:translateY(-3px)}
}
@media(max-width:650px){.pa-shell{padding:20px 16px}
.pa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pa-card-open{padding:12px}
.pa-card img,.pa-card svg,.pa-letter{height:130px}
.pa-card strong{font-size:18px}
.pa-description{font-size:14px}
.pa-detail{grid-template-columns:1fr}
.pa-next>div{grid-template-columns:1fr}
.pa-tabs button{padding:10px 12px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.pa-card{transition:none!important;transform:none!important}
}

.pa-detail-copy a{color:#804322;text-decoration:underline;text-underline-offset:3px}
.pa-detail-copy h3{margin-top:24px}
.pa-detail-copy li{margin-block:8px;overflow-wrap:anywhere}
@media(max-width:650px){.pa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){.pa-grid{grid-template-columns:1fr}
}

.personal-atlas{scrollbar-gutter:stable;scroll-padding-block:150px 24px}
body:has(.personal-atlas[open]){overflow:hidden}
.pa-header{position:sticky;top:0;z-index:2;background:var(--pa-paper);padding-block:8px;border-bottom:1px solid var(--pa-line)}
.pa-close{background:var(--pa-paper);border-color:var(--pa-muted)}
.pa-art{display:grid;place-items:center;min-width:0;isolation:isolate}
.pa-art>img,.pa-art>svg,.pa-art>.pa-letter,.pa-image-fallback{grid-area:1/1;width:100%}
.pa-image-fallback{display:grid;place-content:center;text-align:center;height:190px;font-size:44px;gap:12px}
.pa-image-fallback small{font-size:13px;color:var(--pa-muted)}
.personal-atlas [hidden]{display:none!important}
.pa-card-open{position:relative}
.pa-new{align-self:flex-start;border:1px solid #845238;border-radius:20px;padding:2px 8px;font-size:12px;color:#704126}
.pa-filter-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.pa-filter{margin:0;min-width:0}
.pa-filter select{border-color:var(--pa-muted);min-width:0}
.pa-count{font-size:13px;color:var(--pa-muted)}
.pa-more{text-align:center;margin-top:24px}
.pa-more button{padding:12px 24px;border:1px solid var(--pa-muted);border-radius:28px;background:transparent}
.pa-more span{font-size:13px;margin-inline:8px;color:var(--pa-muted)}
.pa-detail-art{align-self:start}
.pa-detail-copy h2{font-family:Georgia,'Songti SC',SimSun,serif;font-size:clamp(28px,4vw,40px);line-height:1.3;margin-block:12px 20px}
.pa-detail-copy ul{padding-inline-start:22px;line-height:1.8}
.pa-references{margin-top:24px;border-block:1px solid var(--pa-line);padding-block:12px}
.pa-references summary{cursor:pointer;min-height:44px;align-content:center;font-size:14px}
.pa-boundary{font-size:13px;color:var(--pa-muted)}
.pa-feedback{color:#704126;font-size:14px;line-height:1.6}
.pa-feedback:empty{display:none}
.pa-result-notice{font-size:14px;line-height:1.7;color:#704126;margin-block:12px}
.pa-next>.pa-next-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.pa-next-heading h2{margin:0}
.pa-next .pa-show-quizzes{display:block;flex-shrink:0;padding:8px 12px;border:1px solid var(--pa-muted);border-radius:24px;text-align:center;font-size:14px}
.pa-next>div:not(.pa-next-heading){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:650px){.pa-next>div:not(.pa-next-heading){grid-template-columns:1fr}.pa-next-heading h2{font-size:20px}}
.pa-card,.pa-detail-copy{overflow-wrap:anywhere}
.personal-atlas{--pa-control:#91806e}
.pa-tabs button,.pa-empty button,.pa-detail-copy button,.pa-next button{border-color:var(--pa-control)}
.pa-tabs button[aria-pressed=true]{border-color:var(--pa-ink)}
@media(prefers-reduced-motion:no-preference){
  .pa-detail-art,.pa-detail-copy{animation:pa-enter 220ms ease-out both}
  .pa-detail-copy{animation-delay:40ms}
  .pa-favorite[aria-pressed=true]{animation:pa-like 200ms ease-out}
  @keyframes pa-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pa-like{50%{background:#842f3714}to{background:transparent}}
}
@media(max-width:650px){
  .personal-atlas{scroll-padding-top:130px}
  .pa-image-fallback{height:130px}
  .pa-filter-row{align-items:flex-start;gap:8px}
  .pa-filter{flex:1;flex-wrap:wrap}
  .pa-filter select{max-width:100%}
  .pa-count{align-self:center}
  .pa-detail .pa-image-fallback{height:280px}
  .pa-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pa-tabs button{padding:8px 4px;font-size:13px}
  .pa-tabs span{display:block;margin:2px 0 0}
  .pa-detail .pa-card img,.pa-detail .pa-card svg,.pa-detail .pa-image-fallback{height:220px}
}

/* 收集进度与未解锁卡：进度条给「还差多少」，剪影卡给「还有一张在那里」。 */
.pa-progress{margin:16px 0 0}
.pa-progress-bar{height:10px;border-radius:999px;background:#392d2520;overflow:hidden}
.pa-progress-bar span{display:block;height:100%;min-width:6px;border-radius:999px;background:var(--pa-ink);transition:width 240ms ease}
.pa-progress-label{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--pa-muted)}
.pa-progress-label strong{color:var(--pa-ink);font-size:16px}
.pa-card--locked .pa-art img,.pa-card--locked .pa-art .pa-letter{filter:grayscale(1) brightness(.45) blur(3px);opacity:.75}
.pa-card--locked strong{color:var(--pa-muted);font-size:16px;letter-spacing:.04em}
.pa-card--locked .pa-description{-webkit-line-clamp:2;color:var(--pa-muted)}

/* 重测次数与「只看没解锁」：同一张卡反复出现时给一个痕迹，而不是当成第一次。 */
.pa-times{align-self:flex-start;border:1px solid var(--pa-muted);border-radius:20px;padding:2px 8px;font-size:12px;color:var(--pa-muted)}.pa-locked-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--pa-control);border-radius:24px;background:transparent;color:var(--pa-ink);font:inherit;font-size:13px}
.pa-locked-toggle span{color:var(--pa-muted)}
.pa-locked-toggle[aria-pressed=true]{background:var(--pa-ink);border-color:var(--pa-ink);color:var(--pa-paper)}
.pa-locked-toggle[aria-pressed=true] span{color:var(--pa-paper)}
.pa-next small{line-height:1.5}
@media(max-width:650px){
  .pa-count{order:2}
  .pa-locked-toggle{order:3;width:100%;justify-content:center}
}

/* 工作兴趣只有一张 16:9 的统一场景图，按 contain 会在卡面留两条大边，这里改成铺满。 */
.pa-interest .pa-art>img{object-fit:cover}

/* 时间维度：卡面只放一条「变化最大的那个维度」，完整对比在详情里。 */
.pa-delta{align-self:flex-start;border:1px solid #845238;border-radius:20px;padding:2px 8px;font-size:12px;color:#704126;background:#8452380f}
.pa-history{margin-top:20px;border-top:1px solid var(--pa-line);padding-top:14px}
.pa-history h3{margin:0 0 10px;font-size:18px}
.pa-history ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pa-history li{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--pa-line);border-radius:20px;padding:4px 12px;font-size:14px}
.pa-history li span{color:#704126;font-variant-numeric:tabular-nums}
.pa-history-when{margin:10px 0 0;font-size:13px;color:var(--pa-muted)}
.pa-delta--cross{color:#3d5a73;border-color:#3d5a73;background:#3d5a730f}
.pa-history--cross h3{font-size:16px}
.pa-history-note{margin:-4px 0 10px;font-size:13px;color:var(--pa-muted);line-height:1.6}