*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #ffffff;
    --text: #0f0f0f;
    --muted: #555555;
    --accent: #ef4444;
    --border: #eeeeee;
    --font: 'Syne', sans-serif;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }

.page { min-height: 100vh; display: flex; flex-direction: column; padding: 3rem 2.5rem; max-width: 600px; margin: 0 auto; position: relative; }

.container { flex: 1; display: flex; flex-direction: column; justify-content: center; }

h1 { font-size: 4.5rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; line-height: 0.9; letter-spacing: -0.03em; }
h1::after { content: '.'; color: var(--accent); }
.sub { color: var(--muted); font-size: 1rem; font-weight: 400; margin-bottom: 2rem; margin-top: 1rem; }
.content { color: var(--muted); font-size: 0.95rem; }
.content p { margin-bottom: 0.5rem; }
.content em { color: var(--accent); font-style: italic; }

footer { padding-top: 2rem; border-top: 2px solid var(--text); font-size: 0.75rem; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

.badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 2px solid var(--accent); border-radius: 4px; padding: 0.2rem 0.6rem; margin-bottom: 1.25rem; }
.note { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; }
.back-link { display: inline-block; font-size: 0.8rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color 0.2s; }
.back-link:hover { color: var(--text); }