/* Hidden by default */
.drawer {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(100%);
    opacity: 0;
    height: 45svh; /* 50% of viewport height */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden; /* Ensure no overflow */
    z-index: 20;
}
/* Show when target is active */
#drawer:target {
    transform: translateY(0);
    opacity: 1;
}
/* Hidden by default */
.overlay {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}
/* Show when drawer is active */
#drawer:target ~ .overlay {
    opacity: 1;
    visibility: visible;
}