#home-title{
    font-size:24px;
    color: var(--brand);
    margin-bottom:10px;
    cursor:pointer;
    transition: color .3s ease;
}
#home-title:hover{ color: var(--brand-2) }

#home{
    border-radius:8px;
    padding:20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: var(--panel-grad);
}
#home p{ font-size:16px; line-height:1.6; color: var(--muted); margin-bottom:20px }
#home strong{ color: var(--brand-2) }
#home em{ color: var(--brand-3) }
#home p:last-child{ font-size:18px; font-weight:bold; color: var(--brand-2) }

.content-section{
    border-radius:12px;
    padding:26px 24px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,.05);
    background: var(--panel-grad);
    color:#ddd;
    border:1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, box-shadow .25s ease;
}
.content-section:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.content-section h2{
    font-size:20px;
    font-weight:800;
    color: var(--brand);
    margin-bottom:5px;
    letter-spacing:.5px;
    border-bottom:1px solid var(--brand);
    padding-bottom:0;
}
.content-section h3{ font-size:22px; color: var(--brand-2); margin-top:-10px; padding-bottom:8px }
.content-section h4{ font-size:18px; color: var(--brand-3); margin-bottom:10px }

.content-section ul{ list-style-type:none; padding:0; margin-bottom:16px }
.content-section li{ margin-bottom:8px; color: var(--brand-4) }
.content-section li b{ color: var(--brand-3) }
.content-section em{ color: var(--brand-3) }

.content-section p{
    font-size:18px; line-height:1.6; color: var(--muted); margin-bottom:5px;
}
.content-section p:last-child{
    font-size:18px; font-weight:bold; color: var(--brand-2); text-align:center;
}

.content-section ol{ margin-left:20px }
.content-section ul ul{ padding-left:24px; margin-top:5px }
.content-section ul ul ul{ padding-left:24px }

.content-section ul ul li,
.content-section ul ul ul li{
    padding-left:10px;
    max-width:fit-content;
    border:1px solid #4a5159;
    border-width:0 0 0 1px;
}

@media (max-width:1200px){ .image-grid{ --cols: 6 } }
@media (max-width:600px){ .image-grid{ --cols: 2 } }
@media (prefers-reduced-motion: reduce){
    #sidebar, #content{ transition:none }
}

.scan{
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.scan{
    position: relative;
    overflow: hidden;
}
.scan::before{
    content:"";
    position:absolute;
    left:-28%;
    right:-28%;
    top:-14%;
    height:2px;
    opacity:.35;
    background: linear-gradient(90deg, transparent, rgba(221,92,9,.55), rgba(38,198,218,.55), transparent);
    filter: blur(1px);
    animation: home-scan 9s linear infinite;
}
.scan::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:
            radial-gradient(600px 420px at 0% 0%, rgba(255,255,255,.035), transparent 60%),
            radial-gradient(560px 380px at 100% 100%, rgba(255,255,255,.03), transparent 60%);
    pointer-events:none;
}

@keyframes home-scan { to { transform: translateY(860px) } }

@keyframes scan-sweep{
    from{ transform: translateY(0) }
    to  { transform: translateY(140%) }
}