:root {
    --bg: #ffffff;
    --ink: #151a22;
    --muted: #5f6672;
    --accent: #0f6f78;
}

html[data-theme="dark"] {
    --bg: #10151c;
    --ink: #edf1f6;
    --muted: #bac4d1;
    --accent: #82d1d9;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Amazon Ember Light", system-ui, sans-serif;
}

#content {
    max-width: 1280px;
    margin: 0 auto;
}

.about-sheet {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
}

.avatar {
    display: block;
    width: 100%;
    max-width: 280px;
    border-radius: 16px;
}

.social-tooltip {
    background: #f3f6f8;
    color: #151a22;
}

html[data-theme="dark"] .social-tooltip {
    background: #edf1f6;
    color: #10151c;
}