html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
.public-grid {
    background-image:
        linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}
.feature-dot {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex: 0 0 auto;
}
.option-btn {
    width: 100%;
    text-align: left;
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid rgb(226 232 240);
    font-weight: 800;
    transition: transform .15s ease, background .15s ease, border .15s ease;
}
.option-btn:hover { background: rgb(239 246 255); transform: translateY(-1px); }
.option-btn:disabled { cursor: default; transform: none; }
.option-correct { background: rgb(209 250 229) !important; border-color: rgb(110 231 183) !important; color: rgb(4 120 87) !important; }
.option-wrong { background: rgb(255 228 230) !important; border-color: rgb(253 164 175) !important; color: rgb(190 18 60) !important; }
.progress-bar { width: 0%; transition: width .25s ease; }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}