/* Monte Carlo π (/monte-carlo-pi): what is its own - the canvas stage and what is drawn over it. The buttons and the accent
   come from the app kit (css/app-kit, docs/app-kit.md); the sliders and checkboxes are the shared app controls.
   Loaded only on this app's page (StylePaths). The stage is the canvas's own box, not the kit's padded
   .ak-stage column; the phone layout is the shared one for canvas apps in landing/seo-pages.css. */

.filter-landing-stage.montecarlo-landing-stage {
    position: relative;
    display: block;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: none;
    cursor: crosshair;
    touch-action: manipulation;
    background-color: #e8eef6;
    background-image: none;
}

.montecarlo-landing-stage:focus {
    outline: none;
}

.montecarlo-landing-stage:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.6);
    outline-offset: -2px;
}

.montecarlo-landing-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.montecarlo-landing-app .ak-btn.montecarlo-start-btn.montecarlo-start-btn--go {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

body.filter-app-mode .montecarlo-landing-stage {
    box-shadow: none;
}

@media (max-width: 600px) {
    .filter-landing-stage.montecarlo-landing-stage {
        aspect-ratio: 3 / 4;
    }

    body.filter-app-mode .filter-landing-app.montecarlo-landing-app:not(.is-panel-collapsed) > .filter-landing-stage.montecarlo-landing-stage {
        aspect-ratio: 3 / 4;
        max-height: max(100dvw, calc(100dvh - var(--seo-chrome-height) - 11rem)) !important;
    }
}

.montecarlo-landing-stage.montecarlo-stage--transparent {
    background: var(--component-checkerboard);
}