:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent: #404040;
    --border: #2a2a2a;
}

* {
    margin-bottom: 0.5em;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    margin: 100px;
    flex-wrap: wrap;
}

.block {
    display: inline-table;
    max-width: 16em;
    margin-left: 3em; margin-right: 3em;
    text-wrap: initial;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    transition: border-color 0.2s ease;
}

a:hover {
    border-color: var(--text-primary);
}

input,
textarea,
select,
button {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
    transition: all 0.2s ease;
}

button:hover {
    background: var(--accent);
    border-color: var(--text-secondary);
}

.card {
    background: var(--bg-primary);
    border: 3px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    width: fit-content;
}
.container {
    background: var(--bg-primary);
    border: 3px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    width: fit-content;
}

.text-muted {
    color: var(--text-secondary);
}

.border {
    border: 1px solid var(--border);
}

.shadow {
    box-shadow: 20px 20px var(--bg-secondary);
}

.header img {
    float: left;
    width: 30px;
    height: 30px;
    background: #000;
}

.header h1 {
    position: relative;
    bottom: 0.2em;
    left: 0.3em;
}

em {
    color: #888888;
}

/* misc */

.grid-container {
    position: relative;
    display: inline-block;
}

.month-labels {
    position: absolute;
    top: -15px;
    left: 0;
    font-size: 0.9rem;
    color: #a0a0a0;
}

.month-label.two-digit {
    line-height: 0.5em;
    top: -0.8rem;
}

.month-label {
    position: absolute;
    transform: translateX(-50%);
    line-height: 0.9;
}

.activity-grid {
    display: grid;
    grid-template-rows: repeat(7, 10px);
    grid-auto-flow: column;
    gap: 2px;
}

.activity-cell {
    width: 10px;
    height: 10px;
    background: #1a1a1a;
}

.activity-cell[data-level="1"] { background: #2a2a2a; }
.activity-cell[data-level="2"] { background: #404040; }
.activity-cell[data-level="3"] { background: #606060; }
.activity-cell[data-level="4"] { background: #808080; }

.now-playing {
    background: var(--bg-secondary);
    border: 1px solid var(--border); 
    border-radius: 0.2rem; 
    padding: 1rem;
    display: inline-block; 
    min-width: 350px; 
} 
.music-info { 
    display: flex; 
    gap: 1rem; 
    align-items: center; 
} 
.album-art { 
    width: 60px; 
    height: 60px; 
    background: var(--accent); 
    border-radius: 0.2rem; 
    flex-shrink: 0; 
    position: relative; 
    overflow: hidden; 
} 
.album-art::before { 
    content: "♪"; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 24px; 
    animation: musicNote 1s ease-in-out infinite; 
} 
@keyframes musicNote { 
    0%, 100% { transform: translate(-50%, -50%) scale(1); } 
    50% { transform: translate(-50%, -50%) scale(1.2); } 
} 
.track-info { 
    flex: 1; 
} 
.track-name { 
    font-weight: 600; 
    margin-bottom: 0.25rem; 
} 
.artist-name { 
    color: var(--text-secondary); 
    font-size: 0.9rem; 
}

canvas {
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}