* { box-sizing: border-box; }
html { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-body); line-height: var(--line-height-body); }
body { margin: var(--space-0); }
button, input, select, textarea { font: inherit; max-inline-size: 100%; }
button, input, select { min-block-size: var(--button-min-height); min-inline-size: var(--control-min-size); }
button, input, select, textarea { border: var(--border-width) solid var(--surface-border-color); border-radius: var(--radius-small); color: var(--color-text); background: var(--color-paper); padding: var(--space-2) var(--space-3); }
button { cursor: pointer; overflow-wrap: anywhere; line-height: var(--line-height-control); }
button:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
button:disabled, input:disabled { cursor: default; border-style: dashed; }
button.primary { background: var(--button-background); color: var(--color-button-text); border-color: var(--color-button); font-weight: var(--font-weight-label); }
a { color: var(--color-accent); text-underline-offset: var(--space-1); overflow-wrap: anywhere; }
main a { display: inline-block; min-block-size: var(--control-min-size); padding-block: var(--space-2); }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
h1, h2 { font-family: var(--font-heading); line-height: var(--line-height-heading); font-weight: var(--font-weight-heading); margin-block: var(--space-3) var(--space-5); overflow-wrap: anywhere; }
h1 { font-size: var(--font-size-title); }
h2 { font-size: var(--font-size-section); }
p { margin-block: var(--space-3); overflow-wrap: anywhere; }
main, .masthead, .mode-tags, footer { max-inline-size: var(--content-max-width); margin-inline: auto; padding-inline: var(--page-gutter); }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-5); border-block-end: var(--border-width) solid var(--color-divider); }
.masthead > a { font-family: var(--font-heading); font-weight: var(--font-weight-heading); min-block-size: var(--control-min-size); display: inline-flex; align-items: center; }
.masthead nav, .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mode-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-2); font-weight: var(--font-weight-label); }
main > section, main > nav, main > aside { margin-block: var(--section-gap); }
main > section { padding: var(--card-padding); border: var(--border-width) var(--surface-border-style) var(--surface-border-color); border-radius: var(--radius-card); background-color: var(--color-paper); background-image: var(--surface-background); background-size: var(--surface-texture-size); }
.intro { border: none; background: none; padding-inline: var(--space-0); }
.lead { font-size: var(--font-size-lead); }
.caption, figcaption { font-size: var(--font-size-caption); color: var(--color-text-muted); }
figure { margin: var(--space-5) var(--space-0); }
.scene { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--illustration-aspect); object-fit: cover; border-radius: var(--radius-small); filter: var(--illustration-filter); }
.scene.is-heavy { filter: var(--heavy-illustration-filter); opacity: var(--heavy-image-opacity); }
.era-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.era-card { text-align: start; padding: var(--space-4); border-radius: var(--radius-small); }
.era-card span, .era-card strong { display: block; }
.era-card strong { margin-block: var(--space-2); font-family: var(--font-heading); font-size: var(--font-size-lead); }
.era-range { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.input-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-3); }
.input-row input { flex: 1; min-inline-size: var(--control-min-size); inline-size: 100%; }
label { display: block; margin-block: var(--space-3); }
.check { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-min-size); }
.check input { accent-color: var(--color-accent); flex-shrink: 0; margin: var(--space-0); }
textarea { display: block; inline-size: 100%; resize: vertical; margin-block-end: var(--space-4); }
select { inline-size: 100%; }
.controls { position: sticky; inset-block-start: 0; z-index: 1; }
.controls h2 { margin-block: var(--space-1); }
.controls .actions button { flex: 1; }
.play-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.play-options select { inline-size: auto; }
.play-options .check { margin-inline-start: auto; }
summary { cursor: pointer; min-block-size: var(--control-min-size); padding-block: var(--space-3); font-weight: var(--font-weight-label); }
.life-details { margin-block: var(--space-4); }
[data-region="current"] h1 { font-size: var(--font-size-section); }
[data-error] { max-inline-size: var(--content-max-width); margin-inline: auto; padding-inline: var(--page-gutter); }
dl { margin-block: var(--space-5); }
dt { font-weight: var(--font-weight-label); margin-block-start: var(--space-3); }
dd { margin-inline: var(--space-0); overflow-wrap: anywhere; }
.attributes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); border-block: var(--border-width) solid var(--color-divider); padding-block: var(--space-3); }
.attributes dt { margin-block: var(--space-0); }
.attributes dd { font-size: var(--font-size-section); }
.timeline { list-style: none; padding: var(--space-0); }
.timeline li { padding-block: var(--space-5); border-block-start: var(--border-width) solid var(--color-divider); }
.year-label { font-weight: var(--font-weight-label); }
.heavy, .help-block { color: var(--color-heavy); background-color: var(--color-heavy-surface); }
.help-block { padding-block: var(--space-3); }
.heavy h2 { font-size: var(--font-size-section); }
.help-block p, .help-block a { font-size: var(--font-size-body); }
.help-block a { display: inline-block; min-block-size: var(--control-min-size); padding-block: var(--space-2); }
.help-block button { margin-block: var(--space-2); }
.paid-slot { border-block: var(--border-width) solid var(--color-divider); padding-block: var(--space-4); }
dialog { max-inline-size: min(var(--content-max-width), calc(100% - var(--page-gutter) * 2)); max-block-size: calc(100% - var(--page-gutter) * 2); overflow: auto; padding: var(--card-padding); border: var(--border-width) solid var(--surface-border-color); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-text); }
dialog::backdrop { background: var(--color-bg); }
.choices { display: grid; gap: var(--space-2); }
.choices button { text-align: start; }
.modal-body > .actions { margin-block-start: var(--space-5); }
footer { padding-block: var(--space-6); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.skip-link { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); transform: translateY(-200%); background: var(--color-paper); padding: var(--space-3); z-index: 1; }
.skip-link:focus { transform: none; }
[data-avatar] { color: var(--color-text-muted); font-size: var(--font-size-caption); }
[data-avatar] svg, [data-avatar] canvas { display: block; max-inline-size: 100%; block-size: auto; }
@media (max-width: 30rem) {
  main > .controls, main > [data-region="current"] { margin-block: var(--space-3); padding: var(--space-3); }
  .masthead { padding-block: var(--space-2); gap: var(--space-1); }
  .masthead nav { flex-wrap: nowrap; }
  .controls .actions { gap: var(--space-1); }
  .controls .actions button { padding-inline: var(--space-1); }
  .era-grid { grid-template-columns: minmax(0, 1fr); }
  .input-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}