/* Spirograph landing — unique stage / overlay. Shared controls in apps.css */







.filter-landing-stage.spirograph-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;



    /* Drag the stage to sculpt r (horizontal) and the pen offset (vertical). */



    cursor: grab;



}







.spirograph-landing-canvas,



.spirograph-landing-overlay {



    position: absolute;



    inset: 0;



    display: block;



    width: 100%;



    height: 100%;



    max-width: none;



    max-height: none;



}







.spirograph-landing-overlay {



    pointer-events: none;



}







.filter-landing-stage.spirograph-landing-stage.is-sculpting {



    cursor: grabbing;



}







.filter-landing-stage.spirograph-landing-stage:focus-visible {



    outline: 2px solid #5eead4;



    outline-offset: 2px;



}







.spirograph-landing-controls {



    display: grid;



    gap: 0.65rem;



}







@media (max-width: 600px) {



    .spirograph-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;

}