/* A quiet editorial shelf for shareable chain-development cards. */
.xcards-page { background:var(--color-bg); color:var(--color-ink); }
.xcards-page main { width:100%; max-width:none; margin:0; padding:0; }
.xcards-page .xcards-wrap { width:min(100% - 2.5rem,82rem); margin-inline:auto; }
.xcards-page :where(h1,h2,h3) { color:var(--color-ink); font-family:Manrope,var(--font-body); }
.xcards-page :where(p,dt) { color:var(--color-muted); }
.xcards-page [hidden] { display:none!important; }
.xcards-hero { display:grid; gap:2.5rem; padding-block:3rem; }
.xcards-eyebrow { display:flex; align-items:center; gap:.7rem; color:var(--color-signal)!important; font-family:var(--font-mono); font-size:.875rem; line-height:1.7; letter-spacing:.07em; }
.xcards-eyebrow > span { font-family:var(--font-body); font-size:1.5rem; line-height:1; }
.xcards-hero h1 { margin:1.25rem 0 1.5rem; font-size:clamp(3rem,7.5vw,7rem); font-weight:600; line-height:1.08; letter-spacing:-.055em; }
.xcards-hero h1 em { color:var(--color-signal); font-style:normal; }
.xcards-intro { max-width:35rem; font-size:1.0625rem; line-height:1.85; }
.xcards-edition { display:grid; grid-template-columns:4.5rem 1fr; align-items:center; column-gap:1.5rem; max-width:29rem; padding-top:1.5rem; border-top:1px solid var(--color-rule); }
.xcards-edition-mark { position:relative; font-family:Manrope,var(--font-body); font-size:4rem; font-weight:500; line-height:1; letter-spacing:-.08em; color:var(--color-signal); }
.xcards-edition-mark > span { position:absolute; top:-.5rem; right:0; font-size:1.35rem; }
.xcards-edition dl { display:flex; flex-wrap:wrap; gap:1.25rem 2rem; margin:0; }
.xcards-edition dl > div { display:flex; flex-direction:column-reverse; }
.xcards-edition dt { font-size:.875rem; font-weight:400; }
.xcards-edition dd { color:var(--color-ink); margin:0; font-family:var(--font-mono); font-size:2rem; line-height:1.2; }
.xcards-edition > p { grid-column:2; margin-top:.8rem; font-family:var(--font-mono); font-size:.875rem; }
.xcards-library { padding-block:2.5rem 4rem; border-top:1px solid var(--color-rule); scroll-margin-top:7rem; }
.xcards-library-heading { display:grid; gap:1rem; margin-bottom:2rem; }
.xcards-library-heading h2 { font-size:clamp(1.8rem,3vw,2.7rem); font-weight:550; line-height:1.3; letter-spacing:-.035em; margin-top:.8rem; }
.xcards-library-heading > p { font-size:1rem; line-height:1.7; max-width:25rem; }
.xcards-tools { display:grid; gap:1.5rem; padding:1.5rem 0; border-block:1px solid var(--color-rule); }
.xcards-search { display:grid; gap:.6rem; max-width:38rem; }
.xcards-search > span { font-size:.875rem; color:var(--color-muted); }
.xcards-search input { width:100%; min-width:0; min-height:3.25rem; padding:.75rem 1rem; border:1px solid var(--color-rule); border-radius:.2rem; color:var(--color-ink); background:var(--color-panel); font-family:var(--font-body); font-size:1rem; }
.xcards-search input::placeholder { color:var(--color-muted); opacity:1; }
.xcards-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.xcard-filter { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; min-width:2.75rem; padding:.6rem .9rem; border:1px solid var(--color-rule); border-radius:.2rem; background:transparent; color:var(--color-muted); font-family:var(--font-body); font-size:.875rem; line-height:1.5; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
.xcard-filter:hover { color:var(--color-ink); border-color:var(--color-signal); }
.xcard-filter[aria-pressed="true"] { background:var(--color-signal); border-color:var(--color-signal); color:var(--color-signal-ink); font-weight:650; }
.xcards-status-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; padding-block:1.25rem; }
.xcards-status-row p { font-family:var(--font-mono); font-size:.875rem; line-height:1.65; }
.xcards-status-row .xcards-count { color:var(--color-ink); }
.xcards-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; }
.xcard { display:flex; flex-direction:column; min-width:0; border:1px solid var(--color-rule); background:var(--color-panel); scroll-margin-top:7rem; }
.xcard-preview { display:block; overflow:hidden; border-bottom:1px solid var(--color-rule); background:#0d0e10; }
.xcard-preview img { display:block; width:100%; height:auto; object-fit:contain; transition:transform .22s ease; }
.xcard-preview:hover img { transform:scale(1.015); }
.xcard-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:1.25rem; }
.xcard-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-size:.875rem; line-height:1.6; color:var(--color-muted); }
.xcard-chain { color:var(--color-signal); }
.xcard-language { padding:.05rem .45rem; border:1px solid var(--color-rule); border-radius:999px; font-size:.75rem; }
.xcard h3 { font-size:1.3rem; line-height:1.45; font-weight:600; letter-spacing:-.02em; margin:1rem 0 .7rem; }
.xcard-summary { font-size:1rem; line-height:1.8; margin-bottom:1.25rem; }
.xcard-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:auto; padding-top:.25rem; }
.xcard-download,.xcard-copy { display:inline-flex; justify-content:center; align-items:center; gap:.9rem; min-height:2.75rem; min-width:2.75rem; padding:.65rem .85rem; border:1px solid var(--color-signal); border-radius:.2rem; background:var(--color-signal); color:var(--color-signal-ink); font-family:var(--font-body); font-size:.875rem; font-weight:650; line-height:1.5; text-decoration:none; cursor:pointer; }
.xcard-download:hover { background:#ffcf85; color:#16120c; border-color:#ffcf85; }
.xcard-copy { background:transparent; border-color:var(--color-rule); color:var(--color-ink); }
.xcard-copy:hover { border-color:var(--color-signal); color:var(--color-signal); }
.xcard-feedback { padding-top:.65rem; font-size:.875rem; line-height:1.65; color:var(--color-signal)!important; }
.xcard-caption { margin-top:1rem; padding:0; border:0; border-top:1px solid var(--color-rule); background:transparent; border-radius:0; box-shadow:none; }
.xcard-caption summary { min-height:2.75rem; display:flex; align-items:center; gap:.6rem; padding:.8rem 0; color:var(--color-muted); font-size:.875rem; line-height:1.6; font-weight:500; cursor:pointer; list-style:none; }
.xcard-caption summary::-webkit-details-marker { display:none; }
.xcard-caption summary::before { content:'+'; color:var(--color-signal); font-family:var(--font-mono); }
.xcard-caption[open] summary::before { content:'−'; }
.xcard-caption label { display:block; margin:.35rem 0 .6rem; color:var(--color-muted); font-size:.875rem; }
.xcard-caption textarea { display:block; width:100%; min-width:0; min-height:10rem; padding:.8rem; resize:vertical; border:1px solid var(--color-rule); border-radius:.2rem; background:var(--color-bg); color:var(--color-ink); font-family:var(--font-body); font-size:1rem; line-height:1.7; }
.xcard-alt { display:grid; gap:.4rem; margin-top:1rem; font-size:.875rem; line-height:1.8; }
.xcard-alt strong { color:var(--color-ink); font-weight:500; }
.xcard-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:1rem; padding-top:.3rem; }
.xcard-links a { display:inline-flex; gap:.4rem; align-items:center; min-height:2.75rem; color:var(--color-muted); font-size:.875rem; line-height:1.6; text-decoration:underline; text-underline-offset:.3rem; }
.xcard-links a:hover { color:var(--color-signal); }
.xcards-note,.xcards-disclaimer { max-width:63rem; font-size:.875rem; line-height:1.85; }
.xcards-note { margin-top:2rem; }
.xcards-disclaimer { margin-top:1rem; }
.xcards-empty { padding:4rem 1.25rem; border:1px solid var(--color-rule); text-align:center; }
.xcards-empty p { font-size:1rem; line-height:1.8; margin-bottom:1rem; }
.xcards-copy-status { min-height:1.75rem; padding-top:1rem; font-size:.875rem; line-height:1.7; color:var(--color-signal)!important; }
html[lang^="zh"] .xcards-hero h1 { font-size:clamp(2.4rem,5.5vw,5.2rem); line-height:1.3; letter-spacing:-.04em; }
@media(min-width:40rem) {
  .xcards-page .xcards-wrap { width:min(100% - 4rem,82rem); }
  .xcards-hero { padding-block:4rem; }
  .xcards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:60rem) {
  .xcards-page .xcards-wrap { width:min(100% - 7rem,82rem); }
  .xcards-hero { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); align-items:end; gap:4rem; padding-block:4.5rem; }
  .xcards-edition { grid-template-columns:1fr; justify-self:end; width:100%; max-width:16rem; border-top:0; border-left:1px solid var(--color-rule); padding:1rem 0 1rem 2rem; }
  .xcards-edition-mark { font-size:7rem; width:max-content; margin-bottom:2rem; }
  .xcards-edition-mark > span { font-size:2rem; top:-.4rem; right:-1.2rem; }
  .xcards-edition > p { grid-column:1; }
  .xcards-library-heading { grid-template-columns:1.5fr 1fr; align-items:end; gap:3rem; }
  .xcards-library-heading > p { justify-self:end; }
  .xcards-library { padding-block:3rem 5rem; }
}
@media(min-width:80rem) {
  .xcards-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .xcard-body { padding:1.5rem; }
}
@media(prefers-reduced-motion:reduce) { .xcards-page * { transition:none!important; scroll-behavior:auto!important; } }