.popar {
    --popar-bg: #101418;
    --popar-panel: #f8f7f3;
    --popar-text: #111827;
    --popar-muted: #64748b;
    --popar-accent: #0f766e;
    --popar-danger: #d94645;
    font-family: inherit;
}

.popar * {
    box-sizing: border-box;
}

.popar-desktop {
    max-width: 640px;
    margin: 28px auto;
    padding: 24px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    color: var(--popar-text);
    background: #fff;
}

.popar-desktop strong {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
}

.popar-mobile {
    display: none;
}

@media (hover: none) and (pointer: coarse), (max-width: 820px) {
    body:has(.popar[data-popar]) {
        overflow: hidden;
    }

    .popar-desktop {
        display: none;
    }

    .popar-mobile {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: grid;
        grid-template-rows: 1fr auto;
        background: var(--popar-bg);
        color: #fff;
    }

    .popar-stage {
        position: relative;
        min-height: 0;
        overflow: hidden;
        touch-action: none;
        background: #080b0e;
    }

    .popar-video,
    .popar-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .popar-video {
        object-fit: cover;
    }

    .popar-canvas {
        z-index: 2;
        touch-action: none;
    }

    .popar-topbar {
        position: absolute;
        z-index: 3;
        top: max(12px, env(safe-area-inset-top));
        left: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        pointer-events: none;
    }

    .popar-topbar span {
        min-width: 0;
        padding: 8px 10px;
        border-radius: 8px;
        color: #f8fafc;
        background: rgba(12, 18, 24, .72);
        font-size: 13px;
        line-height: 1.25;
    }

    .popar-topbar button {
        pointer-events: auto;
        width: 48px;
        height: 40px;
        border: 0;
        border-radius: 8px;
        color: #111827;
        background: rgba(255, 255, 255, .92);
        font-weight: 700;
    }

    .popar-crosshair {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px;
        border: 1px solid rgba(255, 255, 255, .42);
        border-radius: 50%;
        pointer-events: none;
    }

    .popar-crosshair::before,
    .popar-crosshair::after {
        content: "";
        position: absolute;
        background: rgba(255, 255, 255, .45);
    }

    .popar-crosshair::before {
        top: 17px;
        left: -12px;
        right: -12px;
        height: 1px;
    }

    .popar-crosshair::after {
        left: 17px;
        top: -12px;
        bottom: -12px;
        width: 1px;
    }

    .popar-controls {
        z-index: 4;
        padding: 10px 10px max(12px, env(safe-area-inset-bottom));
        background: var(--popar-panel);
        color: var(--popar-text);
        box-shadow: 0 -12px 34px rgba(0, 0, 0, .28);
    }

    .popar-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 8px;
    }

    .popar-tabs button,
    .popar-actions button,
    .popar-grid button,
    .popar-file span {
        min-height: 42px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        color: var(--popar-text);
        background: #fff;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
    }

    .popar-tabs button.active,
    .popar-actions .primary {
        border-color: var(--popar-accent);
        color: #fff;
        background: var(--popar-accent);
    }

    .popar-panel {
        display: grid;
        gap: 8px;
    }

    .popar-file input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .popar-file span {
        display: grid;
        place-items: center;
    }

    .popar-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .popar-grid label {
        display: grid;
        gap: 4px;
        color: var(--popar-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .popar-grid input {
        width: 100%;
        min-height: 42px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 8px 10px;
        color: var(--popar-text);
        background: #fff;
        font: inherit;
        font-size: 16px;
    }

    .popar-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .popar-help {
        margin: 0;
        color: var(--popar-muted);
        font-size: 12px;
        line-height: 1.35;
    }
}