body {
    font-family: system-ui, sans-serif;
    /* background: #f9f9f9; */
    color: #333;
    margin: 0;
}

.header {
    /* text-align: center; */
     margin-bottom: 2rem;
      font-size: 0.95rem;
       color: #666;
       padding: 2rem 1rem;
       border-bottom: 1px solid black;
       box-shadow: 2px 1px 2px black;
}

footer {
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.85rem;
    color: #777;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 2px 1px 2px black;
    margin-top: 1rem;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 10px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.05);
}

h2 {
    margin-top: 0;
}

.container {
    padding: 2rem;
    padding-top: 0;
}

.sub-title {
    text-align: center;
}

.proof-container {
    text-align: center;
}

.spinner-wrapper {
    padding: 1rem 1.5rem 1.5rem 1rem;
}

.spinner-showcase {
    /* background: white; */
    border-radius: 12px;
    /* padding: 1.5rem 1.5rem 0; */
    margin-bottom: 2rem;
    padding: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.spinner-preview {
    display: flex;
    align-items: center;
    height: 80px;
    margin-bottom: 1rem;
}

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab {
    padding: 0.4rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: #eee;
    font-size: 0.9rem;
}

.tab.active {
    background: #333;
    color: white;
}

.code-block {
    display: none;
    background: #1e1e1e;
    color: #dcdcdc;
    padding: 1rem;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
}

.code-block.active {
    display: block;
}

textarea {
    width: 85%;
    height: auto;
    min-height: 160px;
    padding: 1rem;
    font-family: monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    background: #1e1e1e;
    color: #dcdcdc;
    border: none;
    border-radius: 8px;
    resize: vertical;
    overflow: auto;
    white-space: pre;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dot Pulse Spinner*/

/* Spinner container */
.dot-pulse {
    display: flex;
    /* justify-content: left; */
    align-items: center;
}

/* Each dot */
.dot-pulse .dot {
    background-color: #333;
    border-radius: 50%;
    animation: dotPulse 1.2s infinite ease-in-out;
}

.dot-pulse .dot {
    width: 10px;   /* ← Increase/Decrease dot-pulse Size using this */
    height: 10px;  /* ← Increase/Decrease dot-pulse Size using this */
}

.dot-pulse {
    gap: 6.4px;  /* ← Increase/Decrease dot-pulse spacing gap here */
}

/* Stagger animations for each dot */
.dot-pulse .dot:nth-child(1) {
    animation-delay: 0s;
}

.dot-pulse .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot-pulse .dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Pulse animation */
@keyframes dotPulse {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.3;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Reduced motion: stop animations */
@media (prefers-reduced-motion: reduce) {
    .dot-pulse .dot {
        animation: none !important;
    }
}

/* Ring Spinner */

/* Ring spinner style */
.ring-spinner {
    width: 40px; /* ← Increase/Decrease Size using this */
    height: 40px; /* ← Increase/Decrease Size using this */
    border: 4px solid #ccc; /* change spinner background here*/
    border-top-color: #000; /* change moving spinner color here*/
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Reduced motion: stop animation */
@media (prefers-reduced-motion: reduce) {
    .ring-spinner {
        animation: none !important;
    }
}

/* Ellipsis Spinner */

/* Ellipsis style */
.ellipsis-spinner {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 6.4px; /* ← Increase/Decrease Ellipsis spacing gap here */
}

.ellipsis-spinner div {
    width: 8px; /* ← Increase/Decrease Ellipsis Size using this */
    height: 8px; /* ← Increase/Decrease Ellipsis Size using this */
    background-color: #333; /* ← Change Ellipsis color using this */
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.ellipsis-spinner div:nth-child(1) {
    animation-delay: 0s;
}

.ellipsis-spinner div:nth-child(2) {
    animation-delay: 0.15s;
}

.ellipsis-spinner div:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    40% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ellipsis-spinner div {
        animation: none !important;
    }
}

/* Bar Loader Spinner */

.bar-spinner {
    display: flex;
    justify-content: left;
    align-items: flex-end;
    gap: 4px; /* ← Increase/Decrease bar spacing gap here */
    height: 40px;
}

.bar-spinner div {
    width: 4px; /* ← Increase Size using this */
    height: 10px; /* ← Increase Size using this */
    background-color: #333; /* change moving spinner color here*/
    animation: barBounce 1s ease-in-out infinite;
}

.bar-spinner div:nth-child(1) {
    animation-delay: 0s;
}

.bar-spinner div:nth-child(2) {
    animation-delay: 0.1s;
}

.bar-spinner div:nth-child(3) {
    animation-delay: 0.2s;
}

.bar-spinner div:nth-child(4) {
    animation-delay: 0.3s;
}

.bar-spinner div:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes barBounce {

    0%,
    100% {
        height: 10px;
        opacity: 0.3;
    }

    50% {
        height: 40px;
        opacity: 1;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bar-spinner div {
        animation: none !important;
    }
}

/* Ripple Spinner */

:root {
    --ripple-size: 64px; /* ← Increase/Decrease ripple Size using this */
    --ripple-border: 4px;
}

.ripple-spinner {
    width: var(--ripple-size);
    height: var(--ripple-size);
    position: relative;
}

.ripple-spinner div {
    position: absolute;
    border: var(--ripple-border) solid #333; /* ← change color using this */
    border-radius: 50%;
    animation: rippleEffect 1.2s infinite;
    opacity: 0;
}

.ripple-spinner div:nth-child(1) {
    animation-delay: 0s;
}

.ripple-spinner div:nth-child(2) {
    animation-delay: 0.6s; /* set ripple speed here*/
}

@keyframes rippleEffect {
    0% {
        top: calc(var(--ripple-size) / 2 - var(--ripple-border));
        left: calc(var(--ripple-size) / 2 - var(--ripple-border));
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: calc(var(--ripple-size) - var(--ripple-border) * 2);
        height: calc(var(--ripple-size) - var(--ripple-border) * 2);
        opacity: 0;
    }
}

/* Square Grid Spinner */

.square-grid-spinner {
    width: 50px;
    height: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px; /* ← Increase/Decrease spacing gap between squares here */
}

.square-grid-spinner div {
    width: 14px; /* ← Increase/Decrease Size using this */
    height: 14px; /* ← Increase/Decrease Size using this */
    background-color: #333; /* ← Change color using this */
    animation: squareFade 1.2s infinite ease-in-out;
}

.square-grid-spinner div:nth-child(1) {
    animation-delay: 0s;
}

.square-grid-spinner div:nth-child(2) {
    animation-delay: 0.1s;
}

.square-grid-spinner div:nth-child(3) {
    animation-delay: 0.2s;
}

.square-grid-spinner div:nth-child(4) {
    animation-delay: 0.3s;
}

.square-grid-spinner div:nth-child(5) {
    animation-delay: 0.4s;
}

.square-grid-spinner div:nth-child(6) {
    animation-delay: 0.5s;
}

.square-grid-spinner div:nth-child(7) {
    animation-delay: 0.6s;
}

.square-grid-spinner div:nth-child(8) {
    animation-delay: 0.7s;
}

.square-grid-spinner div:nth-child(9) {
    animation-delay: 0.8s;
}

@keyframes squareFade {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .square-grid-spinner div {
        animation: none !important;
    }
}

/* Circle Rotate Spinner */
/* Spinner Variables */
:root {
    --spinner-size: 64px; /* ← Increase spinner size using this */
    --dot-size: 10px; /* ← Increase spinner (dot) size using this */
    --radius: 24px;
    /*Note: How far dots orbit from center (≈ (spinner-size - dot-size) / 2) */
}

.circle-rotate-spinner {
    width: var(--spinner-size);
    height: var(--spinner-size);
    position: relative;
}

.circle-rotate-spinner div {
    position: absolute;
    width: var(--dot-size);
    height: var(--dot-size);
    background: #333; /* ← Change color using this */
    border-radius: 50%;
    animation: rotateCircle 1.2s linear infinite;
    transform-origin: calc(var(--spinner-size) / 2) calc(var(--spinner-size) / 2);
}

.circle-rotate-spinner div:nth-child(1) {
    transform: rotate(0deg) translate(var(--radius));
    animation-delay: -1.1s;
}

.circle-rotate-spinner div:nth-child(2) {
    transform: rotate(45deg) translate(var(--radius));
    animation-delay: -1s;
}

.circle-rotate-spinner div:nth-child(3) {
    transform: rotate(90deg) translate(var(--radius));
    animation-delay: -0.9s;
}

.circle-rotate-spinner div:nth-child(4) {
    transform: rotate(135deg) translate(var(--radius));
    animation-delay: -0.8s;
}

.circle-rotate-spinner div:nth-child(5) {
    transform: rotate(180deg) translate(var(--radius));
    animation-delay: -0.7s;
}

.circle-rotate-spinner div:nth-child(6) {
    transform: rotate(225deg) translate(var(--radius));
    animation-delay: -0.6s;
}

.circle-rotate-spinner div:nth-child(7) {
    transform: rotate(270deg) translate(var(--radius));
    animation-delay: -0.5s;
}

.circle-rotate-spinner div:nth-child(8) {
    transform: rotate(315deg) translate(var(--radius));
    animation-delay: -0.4s;
}

@keyframes rotateCircle {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .circle-rotate-spinner div {
        animation: none !important;
    }
}