body { font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; background-color: #f9f9f9; color: #333; } h1 { border-bottom: 2px solid #ddd; padding-bottom: 0.5rem; } .class-group { margin-bottom: 2rem; } .class-title { color: #2c3e50; border-bottom: 1px solid #ccc; padding-bottom: 0.25rem; } .feed-list { list-style: none; padding: 0; } .feed-item { background: #fff; margin-bottom: 0.75rem; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .feed-item h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; } .feed-item a { color: #0066cc; text-decoration: none; } .feed-item a:hover { text-decoration: underline; } .meta { font-size: 0.85rem; color: #666; } .loading { color: #666; font-style: italic; } header { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 0 1rem 0; margin-bottom: 2rem; .header-logo-link { display: inline-block; color: #0066cc; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s ease; &:hover { color: #004499; text-decoration: underline; } } .header-info { display: flex; flex-direction: column; gap: 0.35rem; h1 { margin: 0; font-size: 2rem; color: #1a1a1a; letter-spacing: -0.02em; } time, .class-tag { font-size: 0.875rem; color: #666; } .class-tag { font-weight: 600; color: #4a5568; } } hr { border: none; border-top: 1px solid #e2e8f0; margin-top: 0.5rem; margin-bottom: 0; } } .quiz-list { padding-left: 1.2rem; & > li { margin-bottom: 2rem; } } .options { list-style: none; padding: 0; margin-top: 0.5rem; li { padding: 0.5rem 0.75rem; margin-bottom: 0.35rem; border: 1px solid #e2e8f0; border-radius: 6px; background-color: #fff; color: #4a5568; &.correct { border-color: #86efac; background-color: #f0fdf4; color: #166534; font-weight: 600; position: relative; } } }