#lore-surface {
  margin: var(--space-section, 52px) 0 0;
  color: var(--surface-text, #17251e);
}

#lore-surface .lore-head,
#lore-surface .lore-toolbar,
#lore-surface .lore-card,
#lore-surface .lore-empty {
  border: 1px solid var(--surface-border, #d2ddd6);
  background: var(--surface-panel, #ffffff);
}

#lore-surface .lore-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-gap, 16px);
  padding: var(--space-card, 24px);
  border-radius: var(--surface-radius, 7px) var(--surface-radius, 7px) 0 0;
}

#lore-surface .lore-kicker,
#lore-surface .lore-version,
#lore-surface .lore-status {
  color: var(--surface-muted, #53675b);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#lore-surface h2,
#lore-surface h3,
#lore-surface p { margin-top: 0; }
#lore-surface h2 { margin-bottom: 8px; color: var(--surface-text, #17251e); font-size: clamp(25px, 3vw, 38px); }
#lore-surface .lore-head p { margin-bottom: 0; color: var(--surface-muted, #53675b); }
#lore-surface .lore-version { align-self: flex-start; white-space: nowrap; }
#lore-surface .lore-toolbar { padding: 12px 16px; border-top: 0; background: var(--surface-panel-soft, #f0f6f2); }
#lore-surface .lore-filters { display: flex; flex-wrap: wrap; gap: 7px; }
#lore-surface .lore-filters button,
#lore-surface .lore-rooms {
  border: 1px solid var(--surface-border, #d2ddd6);
  border-radius: var(--surface-radius, 7px);
  background: transparent;
  color: var(--surface-text, #17251e);
  cursor: pointer;
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 7px 11px;
}
#lore-surface .lore-filters button.active,
#lore-surface .lore-filters button:hover,
#lore-surface .lore-rooms:hover { border-color: var(--surface-action, #2dba70); }
#lore-surface button:focus-visible { outline: 2px solid var(--surface-focus, #73dae5); outline-offset: 2px; }
#lore-surface .lore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-gap, 12px); padding-top: 12px; }
#lore-surface .lore-card,
#lore-surface .lore-empty { min-width: 0; padding: var(--space-card, 18px); border-radius: var(--surface-radius, 7px); }
#lore-surface .lore-card { display: grid; gap: 9px; }
#lore-surface .lore-status { color: var(--surface-action, #2dba70); }
#lore-surface h3 { margin-bottom: 0; color: var(--surface-text, #17251e); font-size: 18px; }
#lore-surface .lore-body { margin-bottom: 0; color: var(--surface-text, #17251e); line-height: 1.6; }
#lore-surface .lore-source { color: var(--surface-action, #2dba70); font-size: 12px; }
#lore-surface .lore-empty { grid-column: 1 / -1; color: var(--surface-muted, #53675b); }
#lore-surface .lore-empty strong { display: block; margin-bottom: 7px; color: var(--surface-text, #17251e); }
#lore-surface .lore-empty p { margin-bottom: 12px; }

@media (max-width: 680px) {
  #lore-surface { margin-top: var(--space-section-mobile, 30px); }
  #lore-surface .lore-head { display: block; padding: var(--space-card-mobile, 18px); }
  #lore-surface .lore-version { display: block; margin-top: 14px; }
  #lore-surface .lore-grid { grid-template-columns: 1fr; }
}

#lore-surface .lore-card{grid-template-columns:minmax(0,1fr)}
#lore-surface .lore-card>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
#lore-surface .lore-body{overflow-wrap:anywhere}
@media(max-width:680px){#lore-surface .lore-grid{grid-template-columns:minmax(0,1fr)}}

@media(max-width:700px){#lore-surface .holder-lore-panel>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}}

/* A compact illustrated field guide; memes keep their complete native composition. */
#lore-surface{margin-top:16px;container-type:inline-size}
#lore-surface .lore-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;border-radius:16px;gap:24px;padding:22px;background:linear-gradient(125deg,color-mix(in srgb,var(--surface-action,#2dba70) 10%,var(--surface-panel,#fff)),var(--surface-panel,#fff))}
#lore-surface .lore-head>*{min-width:0}
#lore-surface .lore-kicker{margin-bottom:12px;letter-spacing:.12em}
#lore-surface h2{font-size:clamp(29px,4cqi,44px);line-height:1.08;letter-spacing:-.045em;margin-bottom:14px}
#lore-surface .lore-head p{font-size:13px;line-height:1.65;max-width:44ch}
#lore-surface .lore-mantra{display:block;font-size:11px;font-weight:600;letter-spacing:.015em;margin-top:14px}
#lore-surface .lore-meme{margin:0;min-width:0}
#lore-surface .lore-meme button{display:block;width:100%;min-height:44px;padding:0;border:1px solid var(--surface-border);border-radius:12px;background:color-mix(in srgb,var(--surface-panel-soft,#f0f6f2) 55%,transparent);overflow:hidden;cursor:zoom-in}
#lore-surface .lore-meme img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;margin:auto}
#lore-surface .lore-head .lore-meme img{max-height:240px}
#lore-surface .lore-meme figcaption{font-size:10px;line-height:1.45;color:var(--surface-muted);padding:7px 2px 0}
#lore-surface .lore-contract{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:12px;padding:10px 14px;border:1px solid var(--surface-border);border-radius:10px;background:var(--surface-panel-soft)}
#lore-surface .lore-contract span{font:9px/1.4 ui-monospace,monospace;letter-spacing:.08em;color:var(--surface-muted)}
#lore-surface .lore-contract a{display:flex;align-items:center;min-height:44px;min-width:0;overflow-wrap:anywhere;font:11px/1.6 ui-monospace,monospace;color:var(--surface-text);text-decoration:underline}
#lore-surface .lore-independence{font-size:10px;line-height:1.6;color:var(--surface-muted);margin:10px 2px 16px;max-width:100ch}
#lore-surface .lore-toolbar{border:0;background:transparent;padding:0}
#lore-surface .lore-filters{gap:6px}
#lore-surface .lore-filters button{min-height:44px;min-width:44px;padding:8px 16px;border-radius:24px;font:12px var(--body);background:var(--surface-panel)}
#lore-surface .lore-filters button.active{background:color-mix(in srgb,var(--surface-action) 13%,var(--surface-panel));border-color:var(--surface-action);font-weight:600}
#lore-surface .lore-legend{font-size:10px;line-height:1.5;margin:10px 2px 0;color:var(--surface-muted)}
#lore-surface .lore-grid{align-items:start;gap:12px}
#lore-surface .lore-card{align-content:start;gap:12px;padding:18px;border-radius:14px}
#lore-surface .lore-card[data-lore-kind=identity]{grid-column:1/-1;background:var(--surface-panel-soft)}
#lore-surface .lore-card[data-lore-kind=identity] .lore-body{font-size:12px;line-height:1.7}
#lore-surface .lore-card[data-lore-status^=community] .lore-status{color:var(--surface-muted)}
#lore-surface h3{font-size:20px;line-height:1.25;letter-spacing:-.025em}
#lore-surface .lore-body{font-size:13px;line-height:1.75}
#lore-surface .lore-sources{display:flex;flex-wrap:wrap;gap:0 16px}
#lore-surface .lore-source{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px;font-size:11px}
#lore-surface .lore-pair{display:flex;align-items:center;gap:18px;padding:12px 0}
#lore-surface .lore-pair span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
#lore-surface .lore-pair img{border-radius:9px;object-fit:contain}
#lore-surface [data-lore-section=timeline]{grid-template-columns:minmax(0,1fr)}
#lore-surface [data-lore-section=timeline] .lore-card{border-left:3px solid color-mix(in srgb,var(--surface-action) 55%,var(--surface-border))}
#lore-surface .lore-next{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 2px;margin-top:12px;border-block:1px solid var(--surface-border)}
#lore-surface .lore-next p{font-size:12px;line-height:1.6;color:var(--surface-muted);margin:6px 0 0}
#lore-surface .lore-rooms{min-height:44px;white-space:normal;font:12px var(--body)}
#lore-surface .holder-lore-panel{margin-top:16px}
#lore-surface .holder-lore-panel>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
@container(max-width:620px){#lore-surface .lore-head{grid-template-columns:minmax(0,1fr);padding:18px;gap:18px}#lore-surface h2{font-size:34px}#lore-surface .lore-head .lore-meme img{max-height:none}#lore-surface .lore-grid{grid-template-columns:minmax(0,1fr)}#lore-surface .lore-next{align-items:flex-start;flex-direction:column}#lore-surface .lore-filters button{padding-inline:13px}}

/* The cast is an open gallery on the page canvas, with full-composition artwork. */
#lore-surface .lore-character-gallery{margin-top:32px;padding-block:24px 8px;border-top:1px solid var(--surface-border);scroll-margin-top:130px;background:transparent}
#lore-surface .lore-gallery-head{margin-bottom:20px}
#lore-surface .lore-gallery-head .lore-kicker{display:block;margin-bottom:6px}
#lore-surface .lore-gallery-head h3{font-size:28px;letter-spacing:-.035em}
#lore-surface .lore-gallery-head p{font-size:12px;line-height:1.6;color:var(--surface-muted);margin:8px 0 0}
#lore-surface .lore-character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
#lore-surface .lore-character{display:grid;gap:10px;min-width:0;background:transparent;border:0;box-shadow:none}
#lore-surface .lore-character h4{font-size:19px;letter-spacing:-.025em;line-height:1.2;margin:0;color:var(--surface-text)}
#lore-surface .lore-character p{font-size:12px;line-height:1.65;color:var(--surface-muted);margin:0;overflow-wrap:anywhere}
#lore-surface .lore-character .lore-meme button{border:0;background:transparent;border-radius:8px}
#lore-surface .lore-character .lore-meme img{max-height:280px;width:100%;height:auto;object-fit:contain}
#lore-surface .lore-gallery-jump{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;font-size:12px;color:var(--surface-action);text-underline-offset:4px}
#lore-surface .lore-gallery-jump:focus-visible{outline:2px solid var(--surface-focus);outline-offset:-2px}
@container(max-width:620px){#lore-surface .lore-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}#lore-surface .lore-character:last-child{grid-column:1/-1;max-width:440px}#lore-surface .lore-character .lore-meme img{max-height:240px}}