/* /Pages/Home.razor.rz.scp.css */
.field[b-1bzabfo5sj] {
    position: fixed;
    inset: 0;
    background: #000;
}

    .field canvas[b-1bzabfo5sj] {
        display: block;
        width: 100%;
        height: 100%;
        cursor: grab;
        /* A touch drag has to be given to one side or the other before it starts, and the browser decides
       from this. pan-y keeps vertical scrolling with the page, so the field can sit in a longer
       document without trapping a reader in it, and hands sideways drags to the orbit. */
        touch-action: pan-y;
    }

        .field canvas.inside[b-1bzabfo5sj] {
            /* Standing inside the field there is nothing under the cursor to take hold of: the drag
           turns the view rather than the field, and what the cursor is over is not something to grab
           but a color to go and stand in. */
            cursor: crosshair;
        }

        .field canvas.dragging[b-1bzabfo5sj] {
            cursor: grabbing;
        }

.readout[b-1bzabfo5sj],
.hint[b-1bzabfo5sj] {
    position: absolute;
    bottom: 0.75rem;
    margin: 0;
    color: #6a6f7a;
    font: 400 0.75rem/1 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.readout[b-1bzabfo5sj] {
    left: 1rem;
}

.hint[b-1bzabfo5sj] {
    right: 1rem;
    color: #4a4e57;
}

.reset[b-1bzabfo5sj] {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    margin: 0;
    color: #4a4e57;
    font: 400 0.75rem/1 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
    letter-spacing: 0.02em;
    /* The readout and the hint are see-through to the pointer so that they can never swallow a drag.
   This one is the exception: it is here to be clicked, and it only covers its own few words. */
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease;
}

    .reset:hover[b-1bzabfo5sj] {
        color: #cfd3dc;
    }