body {
    font-family: 'Segoe UI', sans-serif;
    padding: 20px;
}

.social-icons {
    position: absolute;
    top: 16px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 12px);
}

.social-icon {
    width: clamp(24px, 2.4vw, 36px);
    height: clamp(24px, 2.4vw, 36px);
}

@media (orientation: portrait) {
    .social-icon {
        width: clamp(22px, 5.5vw, 34px);
        height: clamp(22px, 5.5vw, 34px);
    }

    .social-icons {
        gap: clamp(6px, 2vw, 10px);
    }
}

@media (orientation: landscape) {
    .social-icon {
        width: clamp(24px, 2.2vw, 38px);
        height: clamp(24px, 2.2vw, 38px);
    }
}

.tooltip-inner {
    max-width: 600px;
    background-color: rgba(20, 20, 20, 0.98);
    padding: 16px;
    text-align: left;
    font-size: 1.3em;
    border: 1px solid white;
}

/* Material Design Icons extracted as SVG masks */
.mdi {
    display: inline-block;
    width: 1.3em;
    height: 1.3rem;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mdi-information-outline {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E");
}

.mdi-numeric-1-circle {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10,7V9H12V17H14V7H10M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'/%3E%3C/svg%3E");
}

.mdi-numeric-2-circle {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9,7V9H13V11H11A2,2 0 0,0 9,13V17H11L15,17V15H11V13H13A2,2 0 0,0 15,11V9A2,2 0 0,0 13,7H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'/%3E%3C/svg%3E");
}

.mdi-numeric-3-circle {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9C15,7.89 14.1,7 13,7H9V9H13V11H11V13H13V15H9V17H13A2,2 0 0,0 15,15M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'/%3E%3C/svg%3E");
}