html, body { margin: 0; background: var(--bg-page); color: var(--text-main); font: 16px/1.55 ui-sans-serif, system-ui, sans-serif; }
html[data-theme="dark"] .mark-light,
html[data-theme="light"] .mark-dark { display: none; }
.dsa-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand strong { display: block; }
.brand em { display: block; font-style: normal; color: var(--text-muted); font-size: 12px; }
nav { display: flex; gap: 14px; }
nav a { color: var(--text-muted); text-decoration: none; }
main { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
.kicker { color: var(--accent-brand); font-size: 12px; letter-spacing: 0.06em; }
h1 { font-size: clamp(28px, 5vw, 40px); margin: 8px 0 12px; }
.lead, ul { color: var(--text-muted); }
.warn { border-left: 3px solid var(--accent-brand); padding: 8px 12px; background: var(--bg-subtle); }
.preview { width: 100%; border-radius: 12px; border: 1px solid var(--border-color); margin: 20px 0; }