/* Painting Pendulum landing (/painting-pendulum)



   Shared controls live in apps.css */







.painting-pendulum-landing-app {



    display: grid;



    gap: 1rem;



    align-items: start;



}







.filter-landing-stage.painting-pendulum-landing-stage {



    position: relative;



    display: block;



    width: 100%;



    min-height: 280px;



    aspect-ratio: 4 / 3;



    border-radius: 12px;



    overflow: hidden;



    background: #0b1020;



    box-shadow: none;



}







.painting-pendulum-landing-canvas {



    display: block;



    width: 100%;



    height: 100%;



}







.painting-pendulum-landing-overlay {



    position: absolute;



    inset: 0;



    display: block;



    width: 100%;



    height: 100%;



    pointer-events: none;



}







.painting-pendulum-landing-controls {



    display: grid;



    gap: 0.65rem;



}







.painting-pendulum-landing-toolbar {



    display: flex;



    flex-wrap: wrap;



    align-items: center;



    gap: 8px;



    margin: 2px 0 6px;



    width: 100%;



}







.painting-pendulum-check-row {



    display: flex;



    align-items: center;



    gap: 0.5rem;



    margin: 0.1rem 0;



    cursor: pointer;



    font-weight: 600;



}







.painting-pendulum-check-row input {



    width: 1.05rem;



    height: 1.05rem;



    margin: 0;



}







.painting-pendulum-color-pair {



    display: flex;



    flex-wrap: wrap;



    align-items: center;



    gap: 0.5rem 0.75rem;



    width: 100%;



}







@media (max-width: 600px) {



    .painting-pendulum-landing-stage {



        aspect-ratio: 1 / 1;



        min-height: 240px;



    }



}











.spirograph-playback-row {



    display: flex;



    flex-wrap: wrap;



    align-items: center;



    gap: 0.55rem 0.85rem;



}









.spirograph-pause-btn {

    appearance: none;

    border: 1px solid rgba(15, 23, 42, 0.18);

    background: #ffffff;

    color: #0f172a;

    border-radius: 999px;

    padding: 0.28rem 0.85rem;

    font: inherit;

    font-size: 0.9rem;

    font-weight: 600;

    cursor: pointer;

    line-height: 1.2;

    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

}



.spirograph-pause-btn:hover:not(:disabled) {

    border-color: rgba(15, 23, 42, 0.35);

    background: #f8fafc;

}



.spirograph-pause-btn[aria-pressed="true"] {

    background: #0f172a;

    border-color: #0f172a;

    color: #ffffff;

}



.spirograph-pause-btn:disabled {

    opacity: 0.45;

    cursor: default;

}



.dark .spirograph-pause-btn {

    border-color: rgba(255, 255, 255, 0.16);

    background: rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.92);

}



.dark .spirograph-pause-btn:hover:not(:disabled) {

    border-color: rgba(255, 255, 255, 0.32);

    background: rgba(255, 255, 255, 0.14);

}



.dark .spirograph-pause-btn[aria-pressed="true"] {

    background: #f8fafc;

    border-color: #f8fafc;

    color: #0f172a;

}