* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f0f23; color: #cccccc; font-family: 'Source Code Pro', monospace; font-size: 15px; font-weight: 300; line-height: 1.5; }
em, strong { font-style: normal; font-weight: normal; color: #ffffff; text-shadow: 0 0 5px #ffffff; }
a { color: #009900; text-decoration: none; }
a:hover { color: #99ff99; }
.header { background: #0f0f23; padding: 0.5rem 1rem; }
.nav { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.logo { color: #00cc00; font-size: 1.2rem; font-weight: 400; text-shadow: 0 0 2px rgba(0, 204, 0, 0.8); }
.year { color: #00cc00; opacity: 0.7; }
.user-info { margin-left: auto; color: #ffff66; }
/* Hamburger visibility */
#menu-btn { display: none; }
@media (max-width: 768px) { #menu-btn { display: inline-block; } }
.container { margin: 0; padding: 0.5rem 1rem; display: grid; grid-template-columns: 1fr 250px; gap: 2rem; }
.main-content { min-width: 0; overflow: hidden; }
.day-calendar { background: #0f0f23; padding: 0.5rem; width: 250px; }
.day-calendar h2 { color: #00cc00; margin-bottom: 1rem; font-size: 1rem; }
.day-item { padding: 0.5rem; margin: 0.25rem 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.day-item.unlocked { color: #cccccc; }
.day-item.locked { color: #333333; cursor: default; }
.day-item.active { background: #1a1a2e; color: #ffffff; }
.stars { color: #ffff00; }
.article { background: #0f0f23; padding: 0; margin-bottom: 1rem; }
.article h2 { color: #ffffff; margin-bottom: 1rem; font-size: 1.1rem; }
.article h3 { color: #00cc00; margin: 1rem 0 0.5rem 0; font-size: 1rem; }
.article p { margin: 0.5rem 0; line-height: 1.5; }
.code-block { background: #0a0a0a; border: 1px solid #333; padding: 0.75rem; margin: 0.5rem 0; overflow-x: auto; font-size: 13px; }
.input-section { margin: 1rem 0; }
.input-section label { display: block; color: #00cc00; margin-bottom: 0.5rem; }
.input-section textarea { width: 100%; min-height: 100px; background: #0a0a0a; color: #00cc00; border: 1px solid #333; padding: 0.75rem; font-family: 'Source Code Pro', monospace; font-size: 12px; resize: vertical; }
.btn { background: #10101a; color: #00cc00; border: 1px solid #00cc00; padding: 0.5rem 1rem; font-family: 'Source Code Pro', monospace; font-size: 14px; cursor: pointer; margin-top: 0.5rem; transition: all 0.3s; }
.btn:hover { background: #00cc00; color: #0f0f23; }
.result-box { background: #0a0a0a; border: 1px solid #00cc00; padding: 1rem; margin-top: 1rem; }
.result-box h3 { color: #00cc00; margin-bottom: 0.5rem; font-size: 1rem; }
.answer { color: #ffff00; font-size: 1.5rem; font-weight: normal; margin: 0.5rem 0; }
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tab { background: #10101a; color: #666; border: 1px solid #333; padding: 0.5rem 1.5rem; cursor: pointer; transition: all 0.3s; }
.tab.active { background: #1a1a2e; color: #00cc00; border-color: #00cc00; }
.tab:hover { color: #00cc00; }
/* Remove intermediate stacking between 769px and 1024px to keep two-column layout */


/* Mobile drawer behavior */
@media (max-width: 768px) {
	.container { grid-template-columns: 1fr; }
	.day-calendar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 250px;
		max-width: 85vw;
		transform: translateX(-100%);
		transition: transform 250ms ease-out, box-shadow 250ms ease-out;
		z-index: 1000;
		padding: 1rem;
		box-shadow: 0 0 0 rgba(0,0,0,0);
	}
	.day-calendar.open {
		transform: translateX(0);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
	}
	#menu-backdrop.show {
		display: block !important;
	}
}