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

:root {
    --bg: #f8f8f8;
    --text: #111111;
    --muted: #555555;
    --accent: #111111;
    --border: #dddddd;
    --font: 'IBM Plex Mono', monospace;
}

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; align-items: center; justify-content: center; padding: 3rem 2rem; text-align: center; position: relative; }

.container { max-width: 480px; }

.board-hint { display: flex; flex-wrap: wrap; width: 64px; margin: 0 auto 2rem; }
.sq { width: 16px; height: 16px; display: inline-block; }
.sq.white { background: #f0d9b5; }
.sq.black { background: #b58863; }

h1 { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 2rem; font-weight: 300; }
.content { color: var(--muted); font-size: 0.85rem; }
.content p { margin-bottom: 0.5rem; }
.content em { color: var(--text); font-style: normal; border-bottom: 1px solid var(--text); }

footer { margin-top: 4rem; font-size: 0.7rem; color: var(--muted); }

.badge { display: inline-block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 0.2rem 0.75rem; margin-bottom: 1rem; }
.note { color: var(--muted); font-size: 0.82rem; margin-bottom: 1.75rem; }
.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, border-color 0.2s; }
.back-link:hover { color: var(--text); border-color: var(--text); }