/* Skyzai expressive illustration reference. Material tokens remain canonical. */
.apu-art-family { margin-block: var(--space-6); }
.apu-art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.apu-art-frame { min-width: 0; margin: 0; padding: var(--space-4); border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); }
.apu-art-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--shape-lg); }
.apu-art-frame figcaption { margin-top: var(--space-4); color: var(--md-sys-color-on-surface-variant); font: var(--m3-type-body-medium); }
.apu-art-frame figcaption strong { display: block; margin-bottom: var(--space-2); color: var(--md-sys-color-on-surface); font: var(--m3-type-title-medium); }
.apu-art-notes { margin-block: var(--space-6); }
.apu-art-notes summary { min-height: 48px; box-sizing: border-box; display: list-item; padding-block: var(--space-3); cursor: pointer; color: var(--md-sys-color-primary); font: var(--m3-type-label-large); }
.apu-art-notes summary:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 4px; }
.apu-art-notes[open] .apu-art-grid { margin-top: var(--space-4); }
.apu-pattern-rules { display: grid; gap: var(--space-5); margin-block: var(--space-6); }
.apu-pattern-rules > div { border-inline-start: 2px solid var(--md-sys-color-outline-variant); padding-inline-start: var(--space-4); }
.apu-pattern-rules dt { font: var(--m3-type-title-medium); margin-bottom: var(--space-2); color: var(--md-sys-color-on-surface); }
.apu-pattern-rules dd { margin: 0; color: var(--md-sys-color-on-surface-variant); }
#apu-visual-language code { overflow-wrap: anywhere; }
.apu-material-example { margin: var(--space-6) 0; }
.apu-material-assembly { padding: var(--space-5); border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container); }
.apu-material-note { max-width: 32rem; margin-inline: auto; padding: var(--space-4); border-radius: var(--shape-md); background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-level-1); }
.apu-material-label { color: var(--md-sys-color-on-surface-variant); font: var(--m3-type-label-large); }
.apu-material-note > p { margin-block: var(--space-2) var(--space-4); font: var(--m3-type-title-medium); }
.apu-material-detail { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--shape-md); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font: var(--m3-type-body-medium); }
.apu-material-detail svg { flex: 0 0 24px; fill: currentColor; }
.apu-material-detail span { min-width: 0; overflow-wrap: anywhere; }
.apu-material-example figcaption { margin-top: var(--space-4); color: var(--md-sys-color-on-surface-variant); font: var(--m3-type-body-medium); }
@media (max-width: 839px) { .apu-art-grid { grid-template-columns: 1fr; } }
@media (forced-colors: active) { .apu-art-frame, .apu-pattern-rules > div { border-color: CanvasText; } }
@media (forced-colors: active) { .apu-material-note, .apu-material-detail { border: 1px solid CanvasText; } }