* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #0a0a0a; color: #e0e0e0; min-height: 100vh; }
.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
header { text-align: center; margin-bottom: 2.5rem; }
header h1 { font-size: 2.2rem; font-weight: 700; color: #fff; margin-bottom: 0.3rem; }
header p { color: #888; font-size: 0.95rem; }
.subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; margin-bottom: 3rem; }
.card { background: #161616; border: 1px solid #222; border-radius: 12px; padding: 1.5rem; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.15s; }
.card:hover { border-color: #444; transform: translateY(-2px); }
.card .emoji { font-size: 2rem; margin-bottom: 0.7rem; }
.card h2 { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 0.3rem; }
.card p { font-size: 0.82rem; color: #777; }
.content { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
.back { display: inline-block; color: #888; text-decoration: none; font-size: 0.9rem; margin-bottom: 1.5rem; }
.back:hover { color: #fff; }
.content h1 { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
.content h2 { font-size: 1.3rem; font-weight: 600; color: #ddd; margin: 2rem 0 0.8rem; border-bottom: 1px solid #222; padding-bottom: 0.4rem; }
.content h3 { font-size: 1.05rem; font-weight: 600; color: #ccc; margin: 1.2rem 0 0.5rem; }
.content p, .content li { color: #bbb; line-height: 1.7; font-size: 0.95rem; }
.content ul, .content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.content li { margin-bottom: 0.3rem; }
.content code { background: #1a1a1a; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.88rem; color: #ddd; }
.content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.content th, .content td { padding: 0.6rem 0.8rem; border: 1px solid #222; text-align: left; font-size: 0.9rem; }
.content th { background: #161616; color: #ddd; font-weight: 600; }
.content td { color: #bbb; }
.empty { text-align: center; padding: 3rem 1rem; }
.empty p { color: #555; font-size: 0.95rem; }
@media (max-width: 600px) { .subjects { grid-template-columns: 1fr 1fr; } header h1 { font-size: 1.6rem; } }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 1.5rem 0; border-radius: 12px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.oefening { background: #161616; border-left: 3px solid #444; padding: 1rem 1.2rem; margin: 1rem 0; border-radius: 0 8px 8px 0; }
.oefening summary { cursor: pointer; color: #ddd; font-weight: 600; font-size: 0.95rem; }
.oefening summary:hover { color: #fff; }
.oefening .uitwerking { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid #2a2a2a; color: #bbb; line-height: 1.8; }
.oefening .uitwerking p { margin-bottom: 0.4rem; }
.formule { background: #1a1a1a; padding: 0.8rem 1.2rem; border-radius: 8px; margin: 0.8rem 0; font-size: 1rem; color: #e0e0e0; display: inline-block; }
.content h4 { font-size: 0.95rem; font-weight: 600; color: #bbb; margin: 1rem 0 0.4rem; }
.content h5 { font-size: 0.95rem; font-weight: 600; color: #aaa; margin: 0.8rem 0 0.3rem; }
.content svg { max-width: 100%; margin: 1rem 0; }
.svg-container { text-align: center; margin: 1.5rem 0; }
.svg-container svg { display: inline-block; }