:root {
    /* THE MAGIC NUMBER: --ppcm (Pixels Per Centimeter)
       Default: 96 DPI / 2.54 = ~37.8px 
       This variable is the ONLY thing JS needs to update to fix the ruler.
    */
    --ppcm: 37.795px; 
}

/* Millimeter Ticks (Generated via Gradient for Performance) */
#ruler-container {
    background-image: 
        /* 1mm ticks (short) */
        repeating-linear-gradient(90deg, #e5e7eb 0px, #e5e7eb 1px, transparent 1px, transparent calc(var(--ppcm) / 10)),
        /* 5mm ticks (medium) */
        repeating-linear-gradient(90deg, #9ca3af 0px, #9ca3af 2px, transparent 2px, transparent calc(var(--ppcm) / 2));
    background-position: 0 bottom;
    background-size: 100% 15px, 100% 25px; /* Heights of the ticks */
    background-repeat: no-repeat;
}

/* Major Ticks (CM Numbers) - Positioned via calc() */
.tick-major {
    position: absolute;
    bottom: 0;
    height: 40px;
    border-left: 2px solid black;
    padding-left: 4px; /* Space for text */
    font-size: 12px;
    font-weight: 600;
    /* The core logic: Position = Index * PPCM */
    left: calc(var(--ppcm) * var(--i)); 
}

/* Ensure Ad never blocks the ruler on small mobile screens */
@media (max-width: 640px) {
    #carbon-slot {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 60px; /* Smaller footprint on mobile */
        border-radius: 0;
        border-top: 1px solid #e5e7eb;
    }
}