{#if showPreferences}
e.target === e.currentTarget && (showPreferences = false)} onkeydown={(e) => { if (e.key === 'Escape') { e.preventDefault(); showPreferences = false; } }} role="dialog" aria-modal="true" aria-labelledby="preferences-title" tabindex="-1" >
User Preferences
(showPreferences = false)} class="close-button" aria-label="Close preferences">×
Text Size
(textSize = 'small')} class="preference-option {textSize === 'small' ? 'active' : ''}" aria-pressed={textSize === 'small'} > Small
(textSize = 'medium')} class="preference-option {textSize === 'medium' ? 'active' : ''}" aria-pressed={textSize === 'medium'} > Medium
(textSize = 'large')} class="preference-option {textSize === 'large' ? 'active' : ''}" aria-pressed={textSize === 'large'} > Large
Line Spacing
(lineSpacing = 'tight')} class="preference-option {lineSpacing === 'tight' ? 'active' : ''}" aria-pressed={lineSpacing === 'tight'} > Tight
(lineSpacing = 'normal')} class="preference-option {lineSpacing === 'normal' ? 'active' : ''}" aria-pressed={lineSpacing === 'normal'} > Normal
(lineSpacing = 'loose')} class="preference-option {lineSpacing === 'loose' ? 'active' : ''}" aria-pressed={lineSpacing === 'loose'} > Loose
Content Width
(contentWidth = 'narrow')} class="preference-option {contentWidth === 'narrow' ? 'active' : ''}" aria-pressed={contentWidth === 'narrow'} > Narrow
(contentWidth = 'medium')} class="preference-option {contentWidth === 'medium' ? 'active' : ''}" aria-pressed={contentWidth === 'medium'} > Medium
(contentWidth = 'wide')} class="preference-option {contentWidth === 'wide' ? 'active' : ''}" aria-pressed={contentWidth === 'wide'} > Wide
{/if}