/* /Components/Controls/Choice.razor.rz.scp.css */
.choice[b-e9aje01u9e] {
    display: flex;
    flex-direction: column;
}

.option[b-e9aje01u9e] {
    display: block;
    width: 100%;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border: 0;
    /* The whole selection indicator. A rule down the left edge, lit when the option is the current
       one, so a choice is marked without anything being drawn around it. */
    border-left: 1px solid var(--line);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--hover) var(--ease), background var(--hover) var(--ease);
}

    .option:hover[b-e9aje01u9e] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
    }

    .option.picked[b-e9aje01u9e] {
        border-left-color: var(--bright);
    }

.name[b-e9aje01u9e] {
    display: block;
    color: var(--muted);
    font: 500 0.8125rem/1.2 var(--display);
    transition: color var(--hover) var(--ease);
}

.option:hover .name[b-e9aje01u9e] {
    color: var(--text);
}

.option.picked .name[b-e9aje01u9e] {
    color: var(--bright);
}

.note[b-e9aje01u9e] {
    display: block;
    margin-top: 0.25rem;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}
/* /Components/Controls/Slider.razor.rz.scp.css */
.slider[b-6gztyvg79u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 1px solid var(--line);
    transition: border-color var(--hover) var(--ease), background var(--hover) var(--ease);
}

    .slider:hover[b-6gztyvg79u],
    .slider:focus-within[b-6gztyvg79u] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
    }

.head[b-6gztyvg79u] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.name[b-6gztyvg79u] {
    color: var(--text);
    font: 500 0.8125rem/1.2 var(--display);
}

.reading[b-6gztyvg79u] {
    color: var(--bright);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A hairline with a notch on it. Nothing here is a filled bar: the amount is the reading above it, and
   the line is only where to drag. */
.track[b-6gztyvg79u] {
    appearance: none;
    width: 100%;
    height: 1rem;
    margin: 0;
    background: none;
    cursor: pointer;
}

    .track[b-6gztyvg79u]::-webkit-slider-runnable-track {
        height: 1px;
        background: var(--line-strong);
    }

    .track[b-6gztyvg79u]::-moz-range-track {
        height: 1px;
        background: var(--line-strong);
    }

    .track[b-6gztyvg79u]::-webkit-slider-thumb {
        appearance: none;
        width: 0.5rem;
        height: 0.875rem;
        margin-top: calc(-0.4375rem + 0.5px);
        border: 0;
        border-radius: 0;
        background: var(--bright);
    }

    .track[b-6gztyvg79u]::-moz-range-thumb {
        width: 0.5rem;
        height: 0.875rem;
        border: 0;
        border-radius: 0;
        background: var(--bright);
    }

    .track:focus-visible[b-6gztyvg79u] {
        outline: 1px solid var(--muted);
        outline-offset: 2px;
    }

.note[b-6gztyvg79u] {
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}
/* /Components/Controls/Stepper.razor.rz.scp.css */
.stepper[b-p25j52d9o8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 1px solid var(--line);
}

.nudge[b-p25j52d9o8] {
    width: 1rem;
    flex: none;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1;
    text-align: center;
}

.reading[b-p25j52d9o8] {
    flex: 1;
    color: var(--bright);
    /* Tabular, so the number does not shuffle its neighbours along every time it changes width. */
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* /Components/Controls/Toggle.razor.rz.scp.css */
.toggle[b-qz85kfv3dv] {
    display: grid;
    /* The box, then everything that has something to say about it. The note sits under the label
       rather than under the box, which is what the second column is for. */
    grid-template-columns: 0.75rem 1fr;
    column-gap: 0.5rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    /* The same rule the choices carry, lit when this is on. */
    border-left: 1px solid var(--line);
    cursor: pointer;
    transition: border-color var(--hover) var(--ease), background var(--hover) var(--ease);
}

    .toggle:hover[b-qz85kfv3dv] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
    }

    .toggle.on[b-qz85kfv3dv] {
        border-left-color: var(--bright);
    }

.box[b-qz85kfv3dv] {
    /* The browser's own checkbox turned off: what is left is a square this file draws. */
    appearance: none;
    grid-row: 1;
    align-self: center;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0;
    border: 1px solid var(--line-strong);
    background: none;
    cursor: pointer;
    transition: background var(--hover) var(--ease), border-color var(--hover) var(--ease);
}

    /* Filled rather than ticked. A tick three quarters of a rem across is four pixels of scribble; a
       solid square says the same thing and says it cleanly. */
    .box:checked[b-qz85kfv3dv] {
        border-color: var(--bright);
        background: var(--bright);
    }

    /* Drawn only for the keyboard. The pointer already knows where it clicked. */
    .box:focus-visible[b-qz85kfv3dv] {
        outline: 1px solid var(--muted);
        outline-offset: 2px;
    }

.name[b-qz85kfv3dv] {
    grid-column: 2;
    grid-row: 1;
    color: var(--muted);
    font: 500 0.8125rem/1.2 var(--display);
    transition: color var(--hover) var(--ease);
}

.toggle:hover .name[b-qz85kfv3dv] {
    color: var(--text);
}

.toggle.on .name[b-qz85kfv3dv] {
    color: var(--bright);
}

.note[b-qz85kfv3dv] {
    grid-column: 2;
    margin-top: 0.25rem;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}
/* /Components/Field/Clamp.razor.rz.scp.css */
.clamp[b-5f9t2xq9l8] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 0.5rem 0 0.5rem 0.75rem;
    /* The same rule the choices and the toggle carry, lit when this channel is bounded. */
    border-left: 1px solid var(--line);
    transition: border-color var(--hover) var(--ease), background var(--hover) var(--ease);
}

    .clamp:hover[b-5f9t2xq9l8] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
    }

    .clamp.bound[b-5f9t2xq9l8] {
        border-left-color: var(--bright);
    }

.name[b-5f9t2xq9l8] {
    color: var(--muted);
    font: 500 0.8125rem/1.2 var(--display);
    transition: color var(--hover) var(--ease);
}

.clamp:hover .name[b-5f9t2xq9l8] {
    color: var(--text);
}

.clamp.bound .name[b-5f9t2xq9l8] {
    color: var(--bright);
}

.reading[b-5f9t2xq9l8] {
    color: var(--muted);
    /* Tabular, so the two numbers do not shuffle each other along on the way past a hundred. */
    font-variant-numeric: tabular-nums;
    text-align: right;
    transition: color var(--hover) var(--ease);
}

.clamp.bound .reading[b-5f9t2xq9l8] {
    color: var(--bright);
}

.dash[b-5f9t2xq9l8] {
    padding: 0 0.15em;
    color: var(--dim);
}

.track[b-5f9t2xq9l8] {
    position: relative;
    grid-column: 1 / -1;
    height: 0.875rem;
    margin-top: 0.5rem;
}

/* Inset by half a handle at each end, because that is where a handle can actually stand. */
.rule[b-5f9t2xq9l8] {
    position: absolute;
    top: 50%;
    right: 0.1875rem;
    left: 0.1875rem;
    height: 1px;
    background: var(--line);
}

/* The one coloured thing in the drawer, and it is the subject rather than decoration: this is the
   stretch of the channel the roll is allowed to reach, drawn as that stretch of the channel. A held
   channel comes out flat and a couple of pixels wide, which is a plane, and looks like one. */
.lit[b-5f9t2xq9l8] {
    position: absolute;
    top: -1px;
    height: 3px;
    min-width: 2px;
}

/* Two of these lie over the rule at full width. Transparent to the pointer except at the handle, so
   the one underneath is still catchable when they meet, and drawn with no track of their own - the
   rule above is the track, and it is shared. */
.grip[b-5f9t2xq9l8] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    appearance: none;
    background: none;
    pointer-events: none;
}

.grip[b-5f9t2xq9l8]::-webkit-slider-runnable-track {
    height: 100%;
    border: 0;
    background: none;
}

.grip[b-5f9t2xq9l8]::-webkit-slider-thumb {
    appearance: none;
    width: 0.375rem;
    height: 0.875rem;
    border: 0;
    border-radius: 0;
    background: var(--muted);
    cursor: ew-resize;
    pointer-events: auto;
    transition: background var(--hover) var(--ease);
}

.grip[b-5f9t2xq9l8]::-moz-range-track {
    height: 100%;
    border: 0;
    background: none;
}

.grip[b-5f9t2xq9l8]::-moz-range-thumb {
    width: 0.375rem;
    height: 0.875rem;
    border: 0;
    border-radius: 0;
    background: var(--muted);
    cursor: ew-resize;
    pointer-events: auto;
    transition: background var(--hover) var(--ease);
}

/* An upright mark rather than a knob, and bright the moment the row is worth reading, which is the
   same rule the rest of the drawer follows. */
.clamp:hover .grip[b-5f9t2xq9l8]::-webkit-slider-thumb,
.grip:focus-visible[b-5f9t2xq9l8]::-webkit-slider-thumb {
    background: var(--bright);
}

.clamp:hover .grip[b-5f9t2xq9l8]::-moz-range-thumb,
.grip:focus-visible[b-5f9t2xq9l8]::-moz-range-thumb {
    background: var(--bright);
}

.clamp.bound .grip[b-5f9t2xq9l8]::-webkit-slider-thumb {
    background: var(--bright);
}

.clamp.bound .grip[b-5f9t2xq9l8]::-moz-range-thumb {
    background: var(--bright);
}

/* Drawn only for the keyboard, and around the handle rather than around the whole width the input
   actually occupies - which is the rule, and outlining that would ring the row. */
.grip:focus-visible[b-5f9t2xq9l8] {
    outline: none;
}

.grip:focus-visible[b-5f9t2xq9l8]::-webkit-slider-thumb {
    outline: 1px solid var(--muted);
    outline-offset: 2px;
}

.grip:focus-visible[b-5f9t2xq9l8]::-moz-range-thumb {
    outline: 1px solid var(--muted);
    outline-offset: 2px;
}
/* /Components/Field/FieldControls.razor.rz.scp.css */
.controls[b-w2z2nck0ax] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    /* Every label after the first one gets air above it, so the drawer reads as a few sections
       rather than one long list. */
    .controls[b-w2z2nck0ax]  .micro:not(:first-child) {
        margin-top: 1.25rem;
    }

.controls.busy[b-w2z2nck0ax] {
    /* Not hidden, because what it is doing is worth watching, and the readout in the strip is
       already narrating it. Just visibly out of reach until it lands. */
    opacity: 0.5;
    pointer-events: none;
}

.aside[b-w2z2nck0ax] {
    margin: 0.5rem 0 0 0.75rem;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}

/* The way back out of the gamut, aligned with the asides rather than with the rows: it is a remark
   about the three of them and not a fourth one. */
.widen[b-w2z2nck0ax] {
    align-self: flex-start;
    margin: 0.5rem 0 0 0.75rem;
}

.foot[b-w2z2nck0ax] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* The link, drawn as the value it is. It borrows the option rows' left rule rather than inventing a
   surface of its own: nothing in this drawer is a box, and a query string in a field with a border
   round it would be the one thing here pretending to be an input. */
.share[b-w2z2nck0ax] {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--muted);
    text-align: left;

    /* The breaks are the wbr elements between the pairs - see FieldControls.razor. This is only the
       floor under them, for a pair somehow wider than the drawer. */
    overflow-wrap: break-word;

    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .share:hover[b-w2z2nck0ax],
    .share:focus-visible[b-w2z2nck0ax] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

/* Holds a line whether or not there is anything in it, so pressing copy does not move the bottom of
   the drawer. Aligned with the asides above rather than with the rule, because it is a remark about
   the line above it and not another one of them. */
.report[b-w2z2nck0ax] {
    margin: 0.5rem 0 0 0.75rem;
    min-height: 1.4em;
    color: var(--dim);
}

/* The search, as the star drawer draws its own. See StarControls.razor.css. */
.search[b-w2z2nck0ax] {
    width: 100%;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.02);
    color: var(--bright);
    outline: none;
    transition: border-color var(--hover) var(--ease), background var(--hover) var(--ease);
}

    .search[b-w2z2nck0ax]::placeholder {
        color: var(--dim);
    }

    .search:focus[b-w2z2nck0ax] {
        border-left-color: var(--muted);
        background: rgba(255, 255, 255, 0.04);
    }

.hit[b-w2z2nck0ax] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.375rem 0 0.375rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .hit:hover[b-w2z2nck0ax],
    .hit:focus-visible[b-w2z2nck0ax] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

.chip[b-w2z2nck0ax] {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

.how[b-w2z2nck0ax] {
    margin-left: auto;
    color: var(--muted);
    white-space: nowrap;
}
/* /Components/Inspect/Formats.razor.rz.scp.css */
.formats[b-oxhljcamxs] {
    display: flex;
    flex-direction: column;
}

.row[b-oxhljcamxs] {
    display: grid;
    /* The key column is fixed, so ten different values line up down one edge and can be compared
       rather than merely read. */
    grid-template-columns: 4.5rem 1fr;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4375rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    text-align: left;
    cursor: pointer;
}

    .row:last-child[b-oxhljcamxs] {
        border-bottom: 0;
    }

    .row:hover .read[b-oxhljcamxs],
    .row:focus-visible .read[b-oxhljcamxs] {
        color: var(--bright);
    }

.key[b-oxhljcamxs] {
    /* Not inherited from .micro, which is a section label. This is a row key and sits quieter. */
    color: var(--dim);
    letter-spacing: 0.06em;
}

.read[b-oxhljcamxs] {
    color: var(--text);
    /* Wraps rather than truncates. These values are the reason the panel exists, and half of one is
       worse than a taller row - anywhere, because the break lands mid-number either way. */
    overflow-wrap: anywhere;
    transition: color var(--hover) var(--ease);
}

/* The whole confirmation. The value goes bright for a moment and the key says what happened, which
   is enough for something that either worked or did not. */
.row.copied .key[b-oxhljcamxs] {
    color: var(--bright);
}

    .row.copied .key[b-oxhljcamxs]::after {
        content: " copied";
    }
/* /Components/Inspect/Inspector.razor.rz.scp.css */
/* Every section label after the first takes air above it, the same rhythm the drawer keeps, so the
   two panels read as the same instrument seen from two sides. */
.inspect[b-39gf4g6qkb]  .micro {
    margin-bottom: 0.5rem;
}

.inspect[b-39gf4g6qkb]  .micro:not(:first-child) {
    margin-top: 1.5rem;
}

.stats[b-39gf4g6qkb] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.375rem 1rem;
    margin: 0;
}

    .stats dt[b-39gf4g6qkb] {
        margin: 0;
    }

    .stats dd[b-39gf4g6qkb] {
        margin: 0;
        color: var(--text);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

.aside[b-39gf4g6qkb] {
    margin: 0.5rem 0 0;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}

.nearest[b-39gf4g6qkb] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row per neighbour, drawn as the drawer's search results are: a rule down the left, the color as a
   chip, and how far off it is at the end. */
.near[b-39gf4g6qkb] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.3125rem 0 0.3125rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .near:hover[b-39gf4g6qkb],
    .near:focus-visible[b-39gf4g6qkb] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

.chip[b-39gf4g6qkb] {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

.away[b-39gf4g6qkb] {
    margin-left: auto;
    color: var(--muted);
    white-space: nowrap;
}
/* /Components/Inspect/Ramp.razor.rz.scp.css */
.ramp + .ramp[b-eats21reaw] {
    margin-top: 0.875rem;
}

.head[b-eats21reaw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.span[b-eats21reaw] {
    color: var(--dim);
    font-size: 0.6875rem;
}

.strip[b-eats21reaw] {
    display: flex;
    height: 1.75rem;
}

.cell[b-eats21reaw] {
    flex: 1;
    /* Its own reset, the way every other clickable thing here has one: nothing in this interface is
       a box with a border, and the background is the whole point of the cell. */
    appearance: none;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: background var(--panel) var(--ease), transform var(--hover) var(--ease);
}

    /* Lifted the way the current cell is but less, so that what a click would take is obvious while
       the strip still reads as one walk rather than a row of buttons. */
    .cell:enabled:hover[b-eats21reaw] {
        position: relative;
        z-index: 1;
        transform: scaleY(1.2);
    }

    .cell:disabled[b-eats21reaw] {
        cursor: default;
    }

    /* For the keyboard only, and inside the cell rather than around it: an outline on the outside of a
       flush strip lands on the neighbours. */
    .cell:focus-visible[b-eats21reaw] {
        position: relative;
        z-index: 2;
        outline: 1px solid var(--bright);
        outline-offset: -2px;
    }

/* The selected color keeps its place in its own ramp, marked rather than removed, so each strip
   reads as a walk through the color rather than a row of alternatives to it. */
.here[b-eats21reaw] {
    position: relative;
    z-index: 1;
    transform: scaleY(1.35);
    box-shadow: 0 0 0 1px var(--ground);
}
/* /Components/Inspect/Swatch.razor.rz.scp.css */
.swatch[b-8qf1h3dq1v] {
    display: flex;
    align-items: flex-end;
    height: 7.5rem;
    padding: 0.625rem;
    /* No border and no radius. A swatch with a rule around it is a swatch you are reading through
       something, and the whole point of the panel is to see the colour itself. */
    transition: background var(--panel) var(--ease);
}

.hex[b-8qf1h3dq1v] {
    font: 500 0.8125rem/1 var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* /Components/Shell/Back.razor.rz.scp.css */
/* Everything with a shape to it is the global .plaque, which the exhibit tabs in the other corner
   draw too. All that is left here is what makes this one a word you can press, and when it moves. */
.back[b-yxbao2nn0c] {
    color: var(--dim);
    font: 400 0.75rem/1 var(--mono);
    letter-spacing: 0.02em;
    cursor: pointer;

    /* Re-declared rather than added to, because a transition list replaces one. Last of the shell in,
       first of it out: coming in it waits for the rail, which is itself waiting for the landing, and
       it has the mark's corner to wait for besides. Going out it leaves at once, because the landing
       is waiting on this corner in turn. */
    transition: transform var(--panel) var(--ease) var(--delay), color var(--hover) var(--ease);
}

.back.shown[b-yxbao2nn0c] {
    --delay: calc(var(--handover) + var(--stagger) * 2);
}

.back:hover[b-yxbao2nn0c],
.back:focus-visible[b-yxbao2nn0c] {
    color: var(--bright);
}
/* /Components/Shell/Contact.razor.rz.scp.css */
/* The guide's plaque, grown upward. Same corner, same translucent surface, same hairline, and the
   same 45 degree cut in the top left - at --strip tall the polygon below is exactly the one the
   status strip's plaque draws, so growing it is nothing but the left edge getting longer. That is
   the whole idea: contact is not a page, it is this corner opening. See DESIGN.content.md, sketch 04.

   The strip gets out of the way rather than being drawn under this - see StatusStrip.razor.css and
   its `yielded` state, which is the other half of the same handover. */
.contact[b-m8kj9jcus4] {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 3;

    /* Wide enough for two fields side by side and no wider. The whole window below that, where the
       plaque was already the width of the window minus nothing. */
    width: min(34rem, 100vw);

    /* Never less than the plaque it came out of, so the shape is right from the first frame of the
       growth to the last. */
    min-height: var(--strip);

    display: grid;
    grid-template-rows: 0fr;

    background: var(--surface);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);

    /* Four corners and a cut: the top edge starts one run in, and the left edge runs from the bottom
       up to where the diagonal takes over. With the box at --strip tall the fifth point lands on the
       fourth and this is the strip's own polygon exactly. */
    clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));

    /* Parked below the bottom edge, which is the plaques along the top parked above theirs. Leaving
       waits for nothing, because the strip is waiting for this corner to be free. */
    --delay: 0ms;
    transform: translateY(100%);
    transition: transform var(--panel) var(--ease) var(--delay),
                grid-template-rows var(--flight) var(--ease) var(--delay);
}

.contact.open[b-m8kj9jcus4] {
    --delay: var(--handover);
    transform: translateY(0);
    grid-template-rows: 1fr;
}

    /* The other half of the hairline, as on every other plaque: the border runs the top edge as far
       as the cut and this runs the cut. Its bottom end is hung at the point the diagonal comes down
       to, and it is rotated up onto it - the run equals the height, so the angle is 45 degrees and
       the line is that run times root two. Its outer edge lies along the axis it turns about and the
       rest of it is inboard, so the clip takes none of it back off. */
    .contact[b-m8kj9jcus4]::before {
        content: "";
        position: absolute;
        bottom: calc(100% - var(--cut));
        left: 0;
        width: 1px;
        height: calc(var(--cut) * 1.4143);
        background: var(--line);
        transform-origin: 0 100%;
        transform: rotate(45deg);
    }

/* The overflow is what lets the row above collapse to nothing: a grid item's automatic minimum size
   is its content until something clips it. Held to the end so the form's bottom edge stays put and
   the top of it is what is uncovered - the plaque grows upward, so its contents arrive that way. */
.sheet[b-m8kj9jcus4] {
    display: grid;
    align-items: end;
    overflow: hidden;
}

/* ::deep, because the form element is drawn by EditForm and the inputs by InputText, so none of them
   carry this file's scope. It reaches them through the sheet and the labels, which do.

   The left inset clears the diagonal without being told about it: the cut has fallen back to a
   quarter rem by the time it reaches the first line, and the contents start a full rem in. */
.sheet[b-m8kj9jcus4]  .form {
    display: grid;
    gap: 0.75rem;
    padding: calc(var(--inset) * 1.5) var(--inset) var(--inset);
}

/* Name and address on one line, because between them they are one answer to who this is. The message
   takes the width on its own below. */
.pair[b-m8kj9jcus4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--inset);
}

.entry[b-m8kj9jcus4] {
    display: grid;
    gap: 0.35rem;
}

/* The honeypot. Moved off the edge of the window rather than hidden: display none and visibility
   hidden are the two things a script checks for before it decides a field is not worth filling. */
.trap[b-m8kj9jcus4] {
    position: absolute;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The option name from the drawer, which is what a label is worth in this interface. Not a micro
   divider: these name a field rather than open a section, and every micro label carries the comment
   marker for exactly that reason. */
.what[b-m8kj9jcus4] {
    color: var(--muted);
    font: 500 0.8125rem/1.2 var(--display);
}

/* Nothing is a box with a border, so an input is a rule underneath and the value sitting on it in the
   monospace every other value in this interface keeps. The rule is the whole control: --line at rest,
   --text under the caret, --bright when what is on it will not do. */
.entry[b-m8kj9jcus4]  .answer {
    width: 100%;
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--text);
    transition: border-color var(--hover) var(--ease), color var(--hover) var(--ease);
}

    .entry[b-m8kj9jcus4]  .answer:hover {
        border-bottom-color: var(--line-strong);
    }

    /* The outline the rest of the interface draws would put a box around the one element that must
       not have one. The lit rule and the caret say the same thing between them. */
    .entry[b-m8kj9jcus4]  .answer:focus {
        outline: none;
        border-bottom-color: var(--text);
        color: var(--bright);
    }

    /* Written by the framework once the field has been touched or a send has been refused. Brighter
       than focus on purpose - it is the one thing on the plaque asking to be looked at, and the line
       under the rule says which and why. */
    .entry[b-m8kj9jcus4]  .answer.invalid {
        border-bottom-color: var(--bright);
    }

.entry[b-m8kj9jcus4]  textarea.answer {
    /* Three lines, and it stays three: a handle in the corner of a plaque that sizes itself to its
       contents would be two things arguing about the same height. */
    resize: none;
    line-height: 1.5;
}

/* The rule across the plaque, and the one thing under it. Nothing lays the row out: the button is
   the only child and it is already inline, so it sits where the sketch puts it.

   A full inset above and below the rule. Any less and it lands close enough to the message field's
   own rule that the two read as one doubled line rather than as a field and a floor. */
.foot[b-m8kj9jcus4] {
    margin-top: var(--inset);
    padding-top: var(--inset);
    border-top: 1px solid var(--line);
}

/* Drawn by the global .go, which the landing and the 404 draw too. All this adds is that it is a
   button here rather than a link, and a button brings a border and a background of its own. */
.go[b-m8kj9jcus4] {
    border-width: 0 0 1px;
    border-style: solid;
    background: none;
    cursor: pointer;
}

    .go:disabled[b-m8kj9jcus4] {
        color: var(--dim);
        border-bottom-color: var(--line);
        cursor: default;
    }

/* Holds its line whether or not it has anything in it, so pressing Send does not move the plaque it
   is written on. */
.report[b-m8kj9jcus4] {
    margin: 0;
    min-height: calc(0.75rem * 1.4);
    color: var(--muted);
}

.report.refused[b-m8kj9jcus4] {
    color: var(--text);
}

/* Air above it rather than a second rule. One rule in a plaque this size is a floor; two is a form
   cut into pieces, and what is below is not another part of the form. Most of that air is the line
   the readout is holding, so this only has to add the little the readout does not. */
.elsewhere[b-m8kj9jcus4] {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* The landing's navigation row, to the column width the landing uses, so a row that says "somewhere
   else" is the same row wherever it is drawn. Inside a panel rather than over the field, so the ink
   steps back down to what a name and a note are worth in the drawer. */
.row[b-m8kj9jcus4] {
    display: grid;
    grid-template-columns: 4.75rem 1fr;
    align-items: baseline;
    text-decoration: none;
}

.row .name[b-m8kj9jcus4] {
    color: var(--muted);
    transition: color var(--hover) var(--ease);
}

.row:hover .name[b-m8kj9jcus4],
.row:focus-visible .name[b-m8kj9jcus4] {
    color: var(--bright);
}

.row .note[b-m8kj9jcus4] {
    color: var(--dim);
}

/* Two fields side by side stop being two fields somewhere around here: at that width the plaque is
   most of the window and the columns are narrower than the addresses going into them. */
@media (max-width: 30rem) {
    .pair[b-m8kj9jcus4] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* The name column stops paying for itself once the note beside it is wrapping anyway. */
    .row[b-m8kj9jcus4] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}
/* /Components/Shell/Corner.razor.rz.scp.css */
/* The shape is the global .plaque, mirrored by .right. All that is left here is what is inside it and
   when the whole thing moves. */
.corner[b-vd5t3me72u] {
    /* One beat after the mark, both ways, which is the beat it kept when it was laid out beside the
       mark instead of above it. It is landing furniture and leaves with the rest of the landing -
       the plaque it shares its shape with is the one arriving as this goes. */
    --delay: var(--stagger);
}

.corner.shown[b-vd5t3me72u] {
    --delay: calc(var(--handover) + var(--stagger));
}

/* An exhibit, as a word: the back plaque's word in the other corner, so the two corners weigh the
   same. The one on screen is lit and the rest are dim until they are pointed at. */
.tab[b-vd5t3me72u] {
    color: var(--dim);
    font: 400 0.75rem/1 var(--mono);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color var(--hover) var(--ease);
}

    .tab + .tab[b-vd5t3me72u] {
        margin-left: calc(var(--inset) * 0.75);
    }

    .tab.here[b-vd5t3me72u] {
        color: var(--bright);
    }

    .tab:hover[b-vd5t3me72u],
    .tab:focus-visible[b-vd5t3me72u] {
        color: var(--bright);
    }

/* Between the places on this site and the places that are not, a hairline the height of a capital. */
.rule[b-vd5t3me72u] {
    width: 1px;
    height: 0.75rem;
    margin: 0 calc(var(--inset) * 0.75);
    background: var(--line-strong);
}

.icon[b-vd5t3me72u] {
    display: flex;
    color: var(--dim);
    transition: color var(--hover) var(--ease);
}

    .icon:hover[b-vd5t3me72u],
    .icon:focus-visible[b-vd5t3me72u] {
        color: var(--bright);
    }

/* Sized against the words beside them rather than against the bar: a mark much larger than the cap
   height of the tabs would make one end of the plaque heavier than the other. */
.icon svg[b-vd5t3me72u] {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

.icon + .icon[b-vd5t3me72u] {
    margin-left: calc(var(--inset) * 0.75);
}
/* /Components/Shell/Drawer.razor.rz.scp.css */
/* Held to the top edge and stopped at the strip, because the two ends of the window are not the
   same kind of thing. The strip is a bar: it spans the whole width, and a drawer running under it
   would be sliding a panel behind the readout. The plaque in the top left corner is not a bar - it
   is a tab the width of the word in it - so insetting to clear it clears a band that only exists for
   the first few rem of the window and hangs a strip of bare field above the drawer for all the rest.
   The plaque draws over this instead, which is what the inspector panel on the other side has done
   from the start. */
.drawer[b-ob8wren7az] {
    position: fixed;
    top: 0;
    bottom: var(--strip);
    left: 0;
    z-index: 2;
    display: flex;
    align-items: stretch;

    /* Parked off the left edge for the whole of the landing. By its own width rather than by a fixed
       distance, so a drawer that is somehow open when it leaves still clears the edge. */
    transform: translateX(-100%);

    /* The rail is the first of the shell to arrive and the last of it to leave, and it waits for the
       landing to be off the left edge before it comes across it. The delay lives on the state rather
       than on the element so that each direction gets its own: nothing here is symmetric. */
    --delay: calc(var(--stagger) * 2);
    transition: transform var(--panel) var(--ease) var(--delay);
}

.drawer.revealed[b-ob8wren7az] {
    --delay: var(--handover);
    transform: translateX(0);
}

.rail[b-ob8wren7az] {
    flex: none;
    width: 2.25rem;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--surface);
    backdrop-filter: blur(10px);
    color: var(--dim);
    cursor: pointer;
    transition: color var(--hover) var(--ease);
}

    .rail:hover[b-ob8wren7az],
    .rail:focus-visible[b-ob8wren7az] {
        color: var(--bright);
    }

.drawer.open .rail[b-ob8wren7az] {
    color: var(--text);
}

.spine[b-ob8wren7az] {
    display: block;
    /* Reads up the rail, so the label runs with the strip rather than across it. */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 500 0.6875rem/1 var(--display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-left: 10px;
}

/* Width rather than a transform, so the drawer opens by taking room rather than by sliding a fixed
   slab over the field: closed, it occupies nothing and cannot cover a dot that might be clicked. */
.body[b-ob8wren7az] {
    width: 0;
    overflow: hidden;
    background: var(--surface);
    backdrop-filter: blur(10px);
    transition: width var(--panel) var(--ease);
}

.drawer.open .body[b-ob8wren7az] {
    width: 17.5rem;
    border-right: 1px solid var(--line);
}

/* Fixed to the open width so the contents lay out once and then hold still, instead of reflowing on
   every frame of the transition.

   The surface runs to the top of the window; what is written on it does not. The plaque lies over
   the first --strip of this corner, so the top padding carries the band it holds and the first
   control starts below it rather than under the word `back`. The controls are where they always
   were - it is the ground under them that grew. */
.inner[b-ob8wren7az] {
    width: 17.5rem;
    height: 100%;
    padding: calc(var(--strip) + var(--inset) * 1.5) var(--inset) calc(var(--inset) * 1.5);
    overflow-y: auto;
}

/* A phone has no room beside the field for a drawer seventeen rem wide, and half the field left over is
   not a field anybody can use. Open, it takes the whole width past the rail instead - one sheet over the
   field, and the panel steps out of its way while it is. */
@media (max-width: 40rem) {
    .drawer.open .body[b-ob8wren7az],
    .inner[b-ob8wren7az] {
        width: calc(100vw - 2.25rem);
    }
}
/* /Components/Shell/Landing.razor.rz.scp.css */
/* Inset into the same frame the shell uses - the strip along the bottom, and the plaque height along
   the top - so nothing here ever has to move out of the way of what replaces it. The landing's own
   plaque, the exhibit tabs, sits in that top band and is a sibling rather than a child for exactly
   that reason: see Corner.razor. */
.landing[b-21n1pnzvos] {
    position: fixed;
    top: var(--strip);
    right: 0;
    bottom: var(--strip);
    left: 0;
    z-index: 1;

    display: grid;

    /* Three pieces at the top and the aside on the floor: the first three tracks are their own
       height and the fourth takes everything left over, which is what holds the aside down in the
       corner however tall the window is. `align-content: start` would pack all four against the
       top, and an aside sitting directly under the navigation is a fifth navigation row. */
    grid-template-rows: repeat(3, auto) 1fr;
    padding: calc(var(--inset) * 1.5) var(--inset);

    /* The field runs underneath the whole of this and a drag has to reach it, so the page itself is
       deaf and only the things that are genuinely clickable take the pointer back. See .name and .ask
       - and note that it is .name rather than .link, for the reason given there. */
    pointer-events: none;
}

/* Every other thing in this interface that puts text over the field stands on --surface, and this is
   the one that cannot: it has no edges to draw, and a panel behind the name would make the front of
   the site a box. So it gets the same surface as a gradient that runs out before it reaches the
   middle of the screen - dense enough under the column to hold a 250 weight against a bright dot,
   gone by the time it would be dimming the field itself. The band along the top is what carries the
   long second line of the name, which reaches further right than the left ramp alone can hold; it
   also runs under the profile plaque, so the plaque sits on a ground rather than on bare field.

   Stretched past the container at both ends so neither gradient stops on a visible line: the top runs
   to the edge of the window and the bottom finishes underneath the status strip. */
.landing[b-21n1pnzvos]::before {
    content: "";
    position: absolute;
    inset: calc(var(--strip) * -1) 0;
    z-index: -1;

    /* Every stop is a share of the width or a floor in rem, whichever is further out. A share alone
       works on a desktop and fails on a phone, where half the width is narrower than the column it is
       meant to be covering and the sentence runs out past the end of its own scrim. The floor is what
       makes a narrow window scrim nearly all of itself, which is the right answer there: at that size
       the text is most of the width, so there is no field beside it left to keep clear. */
    background: linear-gradient(to right,
                                rgb(10 11 13 / 0.88),
                                rgb(10 11 13 / 0.62) max(16%, 8rem),
                                rgb(10 11 13 / 0.22) max(33%, 17rem),
                                transparent max(50%, 26rem)),
                linear-gradient(to bottom, rgb(10 11 13 / 0.62), rgb(10 11 13 / 0.35) 8%, transparent 17%);

    opacity: 0;

    /* First in and last out. It is the ground the rest of this stands on, so it is never absent while
       any of it is present. */
    transition: opacity var(--panel) var(--ease) calc(var(--stagger) * 3);
}

.landing.revealed[b-21n1pnzvos]::before {
    opacity: 1;
    transition-delay: var(--handover);
}

/* Three pieces here, one beat apart, in the order they are read: the mark, the call to action, then
   the navigation. The profile plaque takes the beat between the first two and keeps to it from
   outside - see Corner.razor.css. The same order both ways, so leaving is arriving run backwards
   from the top rather than a different gesture. --handover is the wait for the shell to get out of
   the way first; on the way out there is nothing to wait for, so there is no wait. */
.landing > *[b-21n1pnzvos] {
    opacity: 0;
    transition: opacity var(--panel) var(--ease) calc(var(--stagger) * var(--i)),
                transform var(--panel) var(--ease) calc(var(--stagger) * var(--i));
}

.landing.revealed > *[b-21n1pnzvos] {
    opacity: 1;
    transform: translate(0);
    transition-delay: calc(var(--handover) + var(--stagger) * var(--i));
}

/* inert already takes the subtree out of hit testing, but the pieces below hand the pointer back
   explicitly, and it is worth one rule to be sure none of them hands it back while it is not there:
   an invisible link lighting up under the cursor is exactly the kind of thing that would only be
   found by somebody dragging the field past where the navigation used to be. */
.landing:not(.revealed) *[b-21n1pnzvos] {
    pointer-events: none;
}

/* The whole column withdraws to the left, which is the edge it holds, so the page empties outward
   rather than dissolving in place. The plaque above it goes up into the top edge instead, for the
   same reason. The indices skip 1, which is the profile plaque's beat. */
.mark[b-21n1pnzvos] {
    --i: 0;
    transform: translateX(-1.25rem);
}

.cta[b-21n1pnzvos] {
    --i: 2;
    transform: translateX(-0.75rem);
}

.where[b-21n1pnzvos] {
    --i: 3;
    transform: translateX(-0.75rem);
}

.wonder[b-21n1pnzvos] {
    --i: 4;
    transform: translateX(-0.75rem);
}

/* The name, and the only place on the page with any size to it. Two weights of the one variable face
   rather than two colours, because the shell is achromatic and the field is the only thing on screen
   entitled to be looked at first. */
.mark[b-21n1pnzvos] {
    display: grid;
    margin: 0;
    font-size: clamp(2.5rem, 8vw, 5.25rem);
    line-height: 0.88;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}

.given[b-21n1pnzvos] {
    font-weight: 600;
    color: var(--bright);
}

.family[b-21n1pnzvos] {
    font-weight: 250;
    color: var(--text);
}

.cta[b-21n1pnzvos] {
    margin-top: calc(var(--inset) * 2.5);
    max-width: 30rem;
}

/* The one sentence on the page, and it does the work of a tagline by saying what the site is: a set
   of things to take hold of, one of which is already on screen behind it. */
.lead[b-21n1pnzvos] {
    margin: 0 0 calc(var(--inset) * 0.75);
    color: var(--muted);
    font: 400 0.75rem/1.5 var(--mono);
    letter-spacing: 0.02em;
}

.where[b-21n1pnzvos] {
    margin-top: calc(var(--inset) * 2.5);
}

/* One step up from --dim, which is what a label is worth everywhere else in the interface. Everywhere
   else it is sitting on --surface inside a panel; here it is over the field itself, and even with the
   scrim behind it a #4a4e57 label loses to a bright dot. The whole of the landing is written a step
   brighter for the same reason - see .name and .note below, and .lead above.

   ::deep because the divider is drawn by Micro, so the element carries Micro's scope and not this
   one's. */
.where[b-21n1pnzvos]  .micro {
    color: var(--muted);
}

    .where ul[b-21n1pnzvos] {
        margin: calc(var(--inset) * 0.75) 0 0;
        padding: 0;
        list-style: none;
    }

    .where li + li[b-21n1pnzvos] {
        margin-top: 0.5rem;
    }

/* A fixed name column and a note beside it, so every note begins on the same line down the page
   whatever the label in front of it is.

   The row is deaf to the pointer and only the name takes it back. The row reaches most of the way
   across the screen, and a hit area that wide would be a band of field nobody could drag - while a
   hover on the name still matches :hover on the row, which is what reveals the note. */
.link[b-21n1pnzvos] {
    display: grid;
    grid-template-columns: 4.75rem 1fr;
    align-items: baseline;
    text-decoration: none;
    pointer-events: none;

    /* One of these rows is a button rather than a link - see Landing.razor - and a button arrives
       with a border, a background, a font and a centred alignment of its own. Stated here rather
       than in a rule of its own, because the whole point is that the rows are indistinguishable. */
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

    /* The outline belongs on the word rather than on the row, for the same reason the hit area does. */
    .link:focus-visible[b-21n1pnzvos] {
        outline: none;
    }

.name[b-21n1pnzvos] {
    color: var(--muted);
    font: 400 0.75rem/1.4 var(--mono);
    letter-spacing: 0.02em;
    pointer-events: auto;
    transition: color var(--hover) var(--ease);
}

    .link:hover .name[b-21n1pnzvos],
    .link:focus-visible .name[b-21n1pnzvos],
    .link.here .name[b-21n1pnzvos] {
        color: var(--bright);
    }

    .link:focus-visible .name[b-21n1pnzvos] {
        outline: 1px solid var(--line-strong);
        outline-offset: 2px;
    }

/* Held back until the label is asked about. Three of these showing at once is a paragraph, and the
   navigation is meant to be four words and a name. */
.note[b-21n1pnzvos] {
    color: var(--muted);
    font: 400 0.75rem/1.4 var(--mono);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateX(-0.35rem);
    transition: opacity var(--hover) var(--ease), transform var(--hover) var(--ease);
}

    .link:hover .note[b-21n1pnzvos],
    .link:focus-visible .note[b-21n1pnzvos] {
        opacity: 1;
        transform: translateX(0);
    }

/* The aside, held to the floor of the column by the last grid track. A rule down the left edge,
   which is what this interface marks an opened thing with everywhere else - and it holds the whole
   block rather than the question alone, so unfolding lengthens the rule instead of putting a second
   mark beside it. --line-strong rather than --line for the same reason everything on the landing is
   a step brighter: there is no surface behind it, only a gradient. */
.wonder[b-21n1pnzvos] {
    align-self: end;
    max-width: 32rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--line-strong);
}

/* The question. Not the global .action, which is --dim and sized for a footer; this is the landing,
   where every label is written one step up. The row above it is deaf to the pointer and so is this
   block - only the question itself takes the pointer back, exactly as .name does. */
.ask[b-21n1pnzvos] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: 400 0.75rem/1.4 var(--mono);
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    transition: color var(--hover) var(--ease);
}

    .ask:hover[b-21n1pnzvos],
    .ask:focus-visible[b-21n1pnzvos] {
        color: var(--bright);
    }

    /* One glyph turned rather than two glyphs swapped. It is the same arrow .go carries, and turning
       it a quarter is the difference between somewhere else and further down the same block. */
    .ask .arrow[b-21n1pnzvos] {
        display: inline-block;
        transition: transform var(--hover) var(--ease);
    }

    .ask[aria-expanded="true"] .arrow[b-21n1pnzvos] {
        transform: rotate(90deg);
    }

/* 0fr to 1fr, which is how the contact plaque grows out of its own corner - the same gesture at the
   scale of a paragraph. The row can only collapse because the element inside it clips: a grid item's
   automatic minimum size is its content until something takes it away. */
.answer[b-21n1pnzvos] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--panel) var(--ease);
}

.wonder.open .answer[b-21n1pnzvos] {
    grid-template-rows: 1fr;
}

.text[b-21n1pnzvos] {
    overflow: hidden;
}

    .text p[b-21n1pnzvos] {
        margin: 0.75rem 0 0;
        color: var(--muted);
        font: 400 0.75rem/1.6 var(--mono);
        letter-spacing: 0.02em;
    }

/* The first thing to go when the window is short, the way the notes are the first thing to go when
   it is narrow. Everything above this is the site; this is an aside about the backdrop, and it is
   the one piece here that can be missing without anything being unreachable. */
@media (max-height: 40rem) {
    .wonder[b-21n1pnzvos] {
        display: none;
    }
}

/* Nothing hovers on a touch screen, so a note that only appears on hover would never appear at all.
   They are shown outright instead - there is no pointer to be led by, so there is nothing to lead. */
@media (hover: none) {
    .note[b-21n1pnzvos] {
        opacity: 1;
        transform: translateX(0);
    }
}

/* The notes are the first thing to go when there is no room, exactly as the footer hint is: the
   labels still say where they lead, and a note wrapping onto a second line would push the rows apart
   only while a cursor happened to be over one of them. */
@media (max-width: 45rem) {
    .note[b-21n1pnzvos] {
        display: none;
    }
}
/* /Components/Shell/Panel.razor.rz.scp.css */
.panel[b-3ms8f78nv4] {
    position: fixed;
    top: 0;
    bottom: var(--strip);
    right: 0;
    z-index: 2;
    width: 22rem;
    max-width: 100vw;
    border-left: 1px solid var(--line);
    background: var(--surface);
    backdrop-filter: blur(10px);

    /* Closed, it is parked off the edge and deaf to the pointer: the field runs underneath it, and a
       dot at the right edge has to stay clickable through the space the panel is not using. */
    transform: translateX(100%);
    pointer-events: none;
    transition: transform var(--panel) var(--ease);
}

.panel.open[b-3ms8f78nv4] {
    transform: translateX(0);
    pointer-events: auto;
}

.inner[b-3ms8f78nv4] {
    height: 100%;
    padding: calc(var(--inset) * 1.5) var(--inset);
    overflow-y: auto;
}

/* The way to put the card away without leaving the point it is about: a tab hung off its edge, the
   pair of the drawer's rail on the other side. Folded, the card slides off and leaves only this, so
   the whole of the field can be turned and clicked while the camera stays where it is. */
.handle[b-3ms8f78nv4] {
    position: absolute;
    top: calc(var(--strip) + var(--inset));
    left: -2.25rem;
    width: 2.25rem;
    height: 7rem;
    padding: 0;
    border: 1px solid var(--line);
    border-right: 0;
    background: var(--surface);
    backdrop-filter: blur(10px);
    color: var(--dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--hover) var(--ease);

    /* Both outer corners cut at 45 degrees, the way the plaques are, so the tab reads as part of the
       same frame rather than a box stuck to the card. Half the plaques' cut: theirs is as deep as the
       strip is tall, and this is barely wider than that. The border is clipped by the same polygon,
       which stops each hairline where its diagonal begins. */
    --notch: calc(var(--cut) / 2);
    clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
}

    /* The hairlines along the two cuts, drawn as the plaques draw theirs: a line the length of the
       diagonal, hung from where it starts and rotated onto it, with its body inboard so the clip
       leaves all of it. */
    .handle[b-3ms8f78nv4]::before,
    .handle[b-3ms8f78nv4]::after {
        content: "";
        position: absolute;
        left: calc(var(--notch) - 1px);
        width: 1px;
        height: calc(var(--notch) * 1.4143);
        background: var(--line);
    }

    .handle[b-3ms8f78nv4]::before {
        top: -1px;
        transform-origin: 0 0;
        transform: rotate(45deg);
    }

    .handle[b-3ms8f78nv4]::after {
        bottom: -1px;
        transform-origin: 0 100%;
        transform: rotate(-45deg);
    }

/* The grip, at about the cap height of the micro labels it replaced. */
.handle svg[b-3ms8f78nv4] {
    width: 0.5rem;
    height: 0.875rem;
    fill: currentColor;
}

    .handle:hover[b-3ms8f78nv4],
    .handle:focus-visible[b-3ms8f78nv4] {
        color: var(--bright);
    }

/* A closed panel is parked off the edge, and its tab with it would be left standing at the edge of
   the window with nothing to show. */
.panel:not(.open) .handle[b-3ms8f78nv4] {
    visibility: hidden;
}

.panel.open.folded[b-3ms8f78nv4] {
    transform: translateX(100%);
}

/* A phone is too narrow for a column beside the field: a card the width of the panel would cover all
   of it. So the panel is a sheet across the bottom instead, tall enough to read and short enough that
   the point it is about - in the middle of the view - is still above it. It folds down to its handle
   to give the field back, and steps out of the way altogether while the drawer is open. */
@media (max-width: 40rem) {
    .panel[b-3ms8f78nv4] {
        /* How much of it a fold leaves showing: the handle and nothing else. */
        --handle: 2.5rem;
        top: auto;

        /* Clear of the drawer's rail, which stays the way to the drawer whatever this is doing. */
        left: 2.25rem;
        width: auto;
        height: 38vh;
        border-left: 0;
        border-top: 1px solid var(--line);
        transform: translateY(100%);
    }

    .panel.open[b-3ms8f78nv4] {
        transform: translateY(0);
    }

    .panel.open.folded[b-3ms8f78nv4] {
        transform: translateY(calc(100% - var(--handle)));
    }

    .panel.open.yielded[b-3ms8f78nv4] {
        transform: translateY(100%);
        pointer-events: none;
    }

    .handle[b-3ms8f78nv4] {
        position: static;
        width: 100%;
        height: var(--handle);
        padding: 0 var(--inset);
        border: 0;
        border-bottom: 1px solid var(--line);
        background: none;
        backdrop-filter: none;
        justify-content: flex-start;

        /* The top of the sheet rather than a tab off its edge: there are no outer corners to cut. */
        clip-path: none;
    }

        .handle[b-3ms8f78nv4]::before,
        .handle[b-3ms8f78nv4]::after {
            content: none;
        }

    .inner[b-3ms8f78nv4] {
        height: calc(100% - var(--handle));
        padding: var(--inset);
    }
}
/* /Components/Shell/StatusStrip.razor.rz.scp.css */
/* The floor of the page, and the only thing on screen in both stages - which is exactly what made it
   an outlier once the landing had a front on it. A bar with a surface and a hairline along the bottom
   of a page where nothing else had either read as left over from another screen.

   So it is a plaque there instead: the bottom right corner, holding nothing but the guide, and the
   pair to the profile plaque directly above it - the same shape mirrored across the horizon. Engaging
   the field grows it into the full width bar the instrument needs. The readout does not arrive from
   somewhere else; it comes out of the break-off as the diagonal flattens. See LANDING.md. */
.strip[b-31j4wqlggf] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inset);
    height: var(--strip);
    padding: 0 var(--inset);

    /* The corner is not always this one's. Contact grows out of this same plaque, so when it does,
       the strip parks below the bottom edge - the gesture the plaques along the top make into their
       own corner - and comes back only once that corner is free again. Coming back is what waits,
       because leaving is what the panel is waiting for. */
    --delay: var(--handover);
    transition: transform var(--panel) var(--ease) var(--delay);
}

.strip.yielded[b-31j4wqlggf] {
    --delay: 0ms;
    transform: translateY(100%);
}

.status[b-31j4wqlggf] {
    margin: 0;
    color: var(--muted);
    /* One line, and the left end is the part worth keeping: a narrow window drops the renderer name
       off the end rather than wrapping the bar into two rows. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    /* There is nothing to read about a field nobody has touched: how many colours are in it and how
       long they took to sort is telemetry, and the landing is not the instrument. It leaves by moving
       back toward the break-off and comes out of it again, which is why it travels right to left
       rather than sliding in from an edge it was never behind. */
    opacity: 0;
    transform: translateX(0.75rem);
    transition: opacity var(--panel) var(--ease), transform var(--panel) var(--ease);
}

/* Two beats, not one: the bar sweeps left past this spot on its way to the edge, and the readout
   should not be fading up on bare field ahead of the ground arriving under it. */
.strip.full .status[b-31j4wqlggf] {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(var(--handover) + var(--stagger) * 2);
}

/* Positioned so the bar below can be measured against it, and padded on the left by the same margin
   the plaques above use, so the diagonal clears what is inside rather than shaving it. In the full
   state that padding costs nothing: this box is at the end of the row, so widening it to the left
   moves its left edge and not its contents. */
.trailing[b-31j4wqlggf] {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: calc(var(--inset) + var(--cut));
}

/* On the landing it is exactly as wide as the trailing content, plus the inset that carries it to the
   edge of the window. Engaged it is the width of the window. Both resolve to a length, which is the
   whole reason it can grow from one into the other rather than being swapped for it - and the width
   being a share of the content is what keeps the guide's own width out of this stylesheet. */
.bar[b-31j4wqlggf] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--inset) * -1);
    z-index: -1;
    width: calc(100% + var(--inset));

    background: var(--surface);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);

    /* Bottom edge longest, which is the plaque along the top edge mirrored: the cut falls away from
       the bottom right corner back toward the middle, so this reads as coming out of that corner the
       way `back` reads as coming out of the one opposite it. The border above is clipped by the same
       polygon, so the top hairline stops exactly where the diagonal begins. */
    clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);

    /* --flight rather than --panel, which is the only place in the shell that asks for it. Everything
       else in the handover travels a rem or two; this crosses most of the window, and --ease is front
       loaded enough that at panel speed it covers half that distance in the first forty milliseconds
       and reads as a snap with a tail on it. At the camera's own duration it reads as the floor
       being laid. */
    transition: width var(--flight) var(--ease) var(--stagger),
                clip-path var(--flight) var(--ease) var(--stagger);
}

.strip.full .bar[b-31j4wqlggf] {
    width: 100vw;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition-delay: var(--handover);
}

    /* The other half of the hairline, as on the plaques above: the border runs the top edge as far as
       the cut and this runs the cut. Hung from the bottom left corner, which is the bottom end of the
       diagonal, and rotated onto it. It goes when the cut goes - once the bar is the whole width
       there is no diagonal left for it to be lying along. */
    .bar[b-31j4wqlggf]::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1px;
        height: calc(var(--strip) * 1.4143);
        background: var(--line);
        transform-origin: 0 100%;
        transform: rotate(45deg);

        /* In step with the cut it is lying on, or it would be a loose diagonal crossing a bar that no
           longer has one. */
        transition: opacity var(--flight) var(--ease) var(--stagger);
    }

    .strip.full .bar[b-31j4wqlggf]::before {
        opacity: 0;
        transition-delay: var(--handover);
    }

/* Below this the guide does not fit in a plaque, and a plaque with nothing in it is worse than no
   plaque at all - so at that width the landing simply has no footer. The instrument keeps its bar at
   every width, because the readout is the one thing it cannot do without.

   The plaque measures 31.9rem, so this leaves about four rem of field beside it at the narrowest it
   is ever drawn. Much less than that and the diagonal is against the edge of the window with nothing
   on the far side of it, which is a cut rather than a corner. */
@media (max-width: 36rem) {
    .strip:not(.full)[b-31j4wqlggf] {
        display: none;
    }
}
/* /Components/Solar/BodyCard.razor.rz.scp.css */
/* The star card's look, for a body in the solar system: the same light at the top, the same values
   under labels. See StarCard.razor.css, which this follows. */
.card[b-p9tp7c68qe] >  p.micro {
    margin-bottom: 0.5rem;
}

.card[b-p9tp7c68qe] >  p.micro:not(:first-child) {
    margin-top: 1.5rem;
}

/* The swatch, for a star. A light on black rather than a flat block of color, because that is what
   the star is on the canvas next to it and a flat block of pale yellow says nothing about a sun. */
.light[b-p9tp7c68qe] {
    position: relative;
    height: 7.5rem;
    background: #000;
    overflow: hidden;
}

.glow[b-p9tp7c68qe] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
                                #fff 0,
                                var(--tint) 0.6rem,
                                color-mix(in srgb, var(--tint) 35%, transparent) 2rem,
                                transparent 4.5rem);
    transition: background var(--panel) var(--ease);
}

.name[b-p9tp7c68qe] {
    margin: 1rem 0 0;
    color: var(--bright);
    font: 500 1.375rem/1.15 var(--display);
    letter-spacing: -0.005em;
}

.designations[b-p9tp7c68qe] {
    margin: 0.375rem 0 0;
    color: var(--muted);
}

.stats[b-p9tp7c68qe] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.375rem 1rem;
    margin: 0;
}

    .stats dt[b-p9tp7c68qe] {
        margin: 0;
        white-space: nowrap;
    }

    .stats dd[b-p9tp7c68qe] {
        margin: 0;
        color: var(--text);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

.credit[b-p9tp7c68qe] {
    margin: 2rem 0 0;
    color: var(--dim);
    font: 400 0.6875rem/1.5 var(--display);
}

    .credit a[b-p9tp7c68qe] {
        color: var(--muted);
    }

        .credit a:hover[b-p9tp7c68qe],
        .credit a:focus-visible[b-p9tp7c68qe] {
            color: var(--bright);
        }


/* What the card says about a date its orbit is no good for, in the star card's small print. */
.aside[b-p9tp7c68qe] {
    margin: 0.75rem 0 0;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}
/* /Components/Solar/SolarControls.razor.rz.scp.css */
/* The star drawer's look - see StarControls.razor.css - and the clock, which only this drawer has. */
.controls[b-blqdqzzsyw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .controls[b-blqdqzzsyw]  .micro:not(:first-child) {
        margin-top: 1.25rem;
    }

/* The one input in the interface, drawn as the share line is: a rule down the left and nothing else,
   so it reads as a line to write on rather than a box to fill in. */
.search[b-blqdqzzsyw] {
    width: 100%;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.02);
    color: var(--bright);
    outline: none;
    transition: border-color var(--hover) var(--ease), background var(--hover) var(--ease);
}

    .search[b-blqdqzzsyw]::placeholder {
        color: var(--dim);
    }

    .search:focus[b-blqdqzzsyw] {
        border-left-color: var(--muted);
        background: rgba(255, 255, 255, 0.04);
    }

.found[b-blqdqzzsyw],
.moments[b-blqdqzzsyw] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The moments say when as well as what, on a line of their own: a date does not fit beside a name. */
.moments .hit[b-blqdqzzsyw] {
    flex-direction: column;
    gap: 0.125rem;
}

.moments .how[b-blqdqzzsyw] {
    white-space: normal;
    font-size: 0.75rem;
}

/* The date to go to, written on as the search is. */
.go-to[b-blqdqzzsyw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0 0.75rem;
}

    .go-to input[b-blqdqzzsyw] {
        flex: 1;
        padding: 0.375rem 0 0.375rem 0.5rem;
        border: 0;
        border-left: 1px solid var(--line-strong);
        background: rgba(255, 255, 255, 0.02);
        color: var(--bright);
        color-scheme: dark;
        outline: none;
    }

.hit[b-blqdqzzsyw] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 0.375rem 0 0.375rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: 400 0.8125rem/1.3 var(--display);
    text-align: left;
    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .hit:hover[b-blqdqzzsyw],
    .hit:focus-visible[b-blqdqzzsyw] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

.how[b-blqdqzzsyw] {
    color: var(--muted);
    white-space: nowrap;
}

.presets[b-blqdqzzsyw] {
    display: flex;
    gap: calc(var(--inset) * 1.25);
    margin: 0.25rem 0 0 0.75rem;
}

.aside[b-blqdqzzsyw] {
    margin: 0.5rem 0 0 0.75rem;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}

/* The link, as the color field's drawer draws its own. See FieldControls.razor.css. */
.share[b-blqdqzzsyw] {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--muted);
    text-align: left;
    overflow-wrap: break-word;
    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .share:hover[b-blqdqzzsyw],
    .share:focus-visible[b-blqdqzzsyw] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

.report[b-blqdqzzsyw] {
    margin: 0.5rem 0 0 0.75rem;
    min-height: 1.4em;
    color: var(--dim);
}

/* The way out, at the top of the drawer where the way in left off. The global .go, which the landing
   and the 404 draw too. */
.out[b-blqdqzzsyw] {
    margin-bottom: 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    background: none;
    cursor: pointer;
}

/* The date the positions are for, as large as anything in the drawer: it is what the whole view is a
   picture of. */
.date[b-blqdqzzsyw] {
    margin: 0 0 0 0.75rem;
    color: var(--bright);
    font-size: 0.9375rem;
}

.rates[b-blqdqzzsyw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.25rem 0 0 0.75rem;
}

    .rates .on[b-blqdqzzsyw] {
        color: var(--bright);
        text-decoration: underline;
        text-underline-offset: 0.3em;
    }

.now[b-blqdqzzsyw] {
    align-self: flex-start;
    margin: 0.5rem 0 0 0.75rem;
}
/* /Components/Stars/StarCard.razor.rz.scp.css */
/* The same rhythm as the color inspector, so the two cards the panel can hold read as one instrument
   pointed at two different things. The section labels only: the labels down the left of the values
   below are micro text too, and are spaced by their own grid. */
.card[b-z6r3qicaf0] >  p.micro {
    margin-bottom: 0.5rem;
}

.card[b-z6r3qicaf0] >  p.micro:not(:first-child) {
    margin-top: 1.5rem;
}

/* The swatch, for a star. A light on black rather than a flat block of color, because that is what
   the star is on the canvas next to it and a flat block of pale yellow says nothing about a sun. */
.light[b-z6r3qicaf0] {
    position: relative;
    height: 7.5rem;
    background: #000;
    overflow: hidden;
}

.glow[b-z6r3qicaf0] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
                                #fff 0,
                                var(--tint) 0.6rem,
                                color-mix(in srgb, var(--tint) 35%, transparent) 2rem,
                                transparent 4.5rem);
    transition: background var(--panel) var(--ease);
}

.name[b-z6r3qicaf0] {
    margin: 1rem 0 0;
    color: var(--bright);
    font: 500 1.375rem/1.15 var(--display);
    letter-spacing: -0.005em;
}

/* The ways further in, under the star's name. The global .go, drawn as buttons. */
.ways[b-z6r3qicaf0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
}

.enter[b-z6r3qicaf0] {
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    background: none;
    cursor: pointer;
}

.designations[b-z6r3qicaf0] {
    margin: 0.375rem 0 0;
    color: var(--muted);
}

.stats[b-z6r3qicaf0] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.375rem 1rem;
    margin: 0;
}

    .stats dt[b-z6r3qicaf0] {
        margin: 0;
        white-space: nowrap;
    }

    .stats dd[b-z6r3qicaf0] {
        margin: 0;
        color: var(--text);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

.near[b-z6r3qicaf0] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row per neighbour, drawn as text the way every other button here is. The rule down the left is
   the option rows' rule, so a row reads as something that can be chosen. */
.hop[b-z6r3qicaf0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 0.375rem 0 0.375rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: 400 0.8125rem/1.3 var(--display);
    text-align: left;
    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .hop:hover[b-z6r3qicaf0],
    .hop:focus-visible[b-z6r3qicaf0] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

.how[b-z6r3qicaf0] {
    color: var(--muted);
    white-space: nowrap;
}

.credit[b-z6r3qicaf0] {
    margin: 2rem 0 0;
    color: var(--dim);
    font: 400 0.6875rem/1.5 var(--display);
}

    .credit a[b-z6r3qicaf0] {
        color: var(--muted);
    }

        .credit a:hover[b-z6r3qicaf0],
        .credit a:focus-visible[b-z6r3qicaf0] {
            color: var(--bright);
        }

.planets[b-z6r3qicaf0] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A planet, as a block of lines under its name, with the option rows' rule down the left. The rule is
   the one place the card takes the color of a habitable system's line on the map, so the two can be
   matched at a glance. */
.planet[b-z6r3qicaf0] {
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 1px solid var(--line);
}

    .planet + .planet[b-z6r3qicaf0] {
        margin-top: 0.25rem;
    }

    .planet.habitable[b-z6r3qicaf0] {
        border-left-color: rgb(107 219 158);
    }

.title[b-z6r3qicaf0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    margin: 0 0 0.25rem;
}

.called[b-z6r3qicaf0] {
    color: var(--bright);
    font: 500 0.8125rem/1.3 var(--display);
}

.tag[b-z6r3qicaf0] {
    color: var(--muted);
    font: 500 0.625rem/1 var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    .tag.life[b-z6r3qicaf0] {
        color: rgb(107 219 158);
    }

.line[b-z6r3qicaf0] {
    margin: 0;
    color: var(--text);
}

    .line.found[b-z6r3qicaf0] {
        color: var(--dim);
    }

.aside[b-z6r3qicaf0] {
    margin: 0.75rem 0 0;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}

/* The metallicity ramp the map colors stars with in its metals view, with a notch where this star sits
   on it. The stops are StarField.Metal's, placed on the same -0.6 to +0.35 dex the notch is. */
.ramp[b-z6r3qicaf0] {
    position: relative;
    height: 0.375rem;
    margin: 0.25rem 0 0.375rem;
    background: linear-gradient(to right,
                                rgb(64 104 214) 0%,
                                rgb(112 168 236) 36.8%,
                                rgb(214 214 200) 63.2%,
                                rgb(246 192 76) 78.9%,
                                rgb(238 106 40) 100%);
}

.notch[b-z6r3qicaf0] {
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    left: calc(var(--at) * 100%);
    width: 2px;
    margin-left: -1px;
    background: var(--bright);
    box-shadow: 0 0 0 1px #000;
}

/* The three words under the ramp, at its ends and at the sun - which is about two thirds of the way
   along, not in the middle. */
.ends[b-z6r3qicaf0] {
    position: relative;
    height: 1em;
    margin-bottom: 0.75rem;
    color: var(--dim);
    font-size: 0.625rem;
}

    .ends span[b-z6r3qicaf0] {
        position: absolute;
        top: 0;
    }

    .ends span:nth-child(1)[b-z6r3qicaf0] {
        left: 0;
    }

    .ends span:nth-child(2)[b-z6r3qicaf0] {
        left: 63.2%;
        transform: translateX(-50%);
    }

    .ends span:nth-child(3)[b-z6r3qicaf0] {
        right: 0;
    }
/* /Components/Stars/StarControls.razor.rz.scp.css */
.controls[b-wkx1jkokvd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .controls[b-wkx1jkokvd]  .micro:not(:first-child) {
        margin-top: 1.25rem;
    }

/* The one input in the interface, drawn as the share line is: a rule down the left and nothing else,
   so it reads as a line to write on rather than a box to fill in. */
.search[b-wkx1jkokvd] {
    width: 100%;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.02);
    color: var(--bright);
    outline: none;
    transition: border-color var(--hover) var(--ease), background var(--hover) var(--ease);
}

    .search[b-wkx1jkokvd]::placeholder {
        color: var(--dim);
    }

    .search:focus[b-wkx1jkokvd] {
        border-left-color: var(--muted);
        background: rgba(255, 255, 255, 0.04);
    }

.found[b-wkx1jkokvd] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hit[b-wkx1jkokvd] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 0.375rem 0 0.375rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: 400 0.8125rem/1.3 var(--display);
    text-align: left;
    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .hit:hover[b-wkx1jkokvd],
    .hit:focus-visible[b-wkx1jkokvd] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

.how[b-wkx1jkokvd] {
    color: var(--muted);
    white-space: nowrap;
}

.presets[b-wkx1jkokvd] {
    display: flex;
    gap: calc(var(--inset) * 1.25);
    margin: 0.25rem 0 0 0.75rem;
}

.aside[b-wkx1jkokvd] {
    margin: 0.5rem 0 0 0.75rem;
    color: var(--dim);
    font: 400 0.6875rem/1.45 var(--display);
}

/* The link, as the color field's drawer draws its own. See FieldControls.razor.css. */
.share[b-wkx1jkokvd] {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    color: var(--muted);
    text-align: left;
    overflow-wrap: break-word;
    cursor: pointer;
    transition: color var(--hover) var(--ease),
                border-color var(--hover) var(--ease),
                background var(--hover) var(--ease);
}

    .share:hover[b-wkx1jkokvd],
    .share:focus-visible[b-wkx1jkokvd] {
        background: rgba(255, 255, 255, 0.03);
        border-left-color: var(--line-strong);
        color: var(--bright);
    }

.report[b-wkx1jkokvd] {
    margin: 0.5rem 0 0 0.75rem;
    min-height: 1.4em;
    color: var(--dim);
}

/* The star clock, set out as the solar system's is. The year the stars are drawn at is what the whole
   view is a picture of. */
.year[b-wkx1jkokvd] {
    margin: 0 0 0 0.75rem;
    color: var(--bright);
    font-size: 0.9375rem;
}

.rates[b-wkx1jkokvd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.25rem 0 0 0.75rem;
}

    .rates .on[b-wkx1jkokvd] {
        color: var(--bright);
        text-decoration: underline;
        text-underline-offset: 0.3em;
    }

.now[b-wkx1jkokvd] {
    align-self: flex-start;
    margin: 0.5rem 0 0 0.75rem;
}
/* /Pages/Home.razor.rz.scp.css */
/* The row of exhibits, full-bleed and behind everything, one window-wide tile each. --at is the
   position of the exhibit on screen, and moving it is the whole of going from one exhibit to another:
   the row slides, and both tiles draw while it does. The panels overlay it rather than pushing it, so
   a field never reframes itself because a drawer opened. */
.tiles[b-1bzabfo5sj] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    background: #000;
    transform: translateX(calc(var(--at) * -100vw));
    transition: transform var(--slide) var(--glide);
}

/* The label layer the renderer puts over each canvas is absolutely placed, and this is what it is
   placed against. */
.tile[b-1bzabfo5sj] {
    position: relative;
    flex: none;
    width: 100vw;
    height: 100%;
    overflow: hidden;
}

    .tile 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. The page does not scroll, so both axes go to the camera: pan-y would
           hand every vertical drag to a scroll that does not exist and leave the pitch unreachable. */
        touch-action: none;
    }

        /* A field laid over another on the same tile - the solar system over the stars - faded in and
           out rather than slid. Deaf to the pointer while it is out, so the field under it is the one
           being dragged. */
        .tile canvas.tier[b-1bzabfo5sj] {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 700ms var(--ease);
        }

            .tile canvas.tier.on[b-1bzabfo5sj] {
                opacity: 1;
                pointer-events: auto;
            }

        .tile canvas.pointing[b-1bzabfo5sj] {
            /* Something under the cursor that a click would fly to. */
            cursor: pointer;
        }

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

        .tile canvas.inside[b-1bzabfo5sj] {
            /* In among the points 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 point to go and stand at. */
            cursor: crosshair;
        }

.hint[b-1bzabfo5sj] {
    margin: 0;
    color: var(--dim);
    font: 400 0.75rem/1 var(--mono);
    letter-spacing: 0.02em;
}

/* The guide is the first thing to go when the bar is full and there is no room for it - the field is
   still usable without being told how, and the readout is not. On the landing the guide is the only
   thing in the footer, so it stays: what goes at that width instead is the footer itself, which
   StatusStrip.razor.css handles because it is the one that knows the plaque cannot hold it. */
@media (max-width: 60rem) {
    .strip.full .hint[b-1bzabfo5sj] {
        display: none;
    }
}

/* Set against the global .action, which declares a colour transition and nothing else. Re-declared
   as a whole, because a transition list replaces rather than adds to one.

   It collapses out of the row rather than fading in place. Fading alone left a button's width of
   empty bar to the right of the guide for the whole of the landing, reserved for something that was
   not there - and on the landing the guide is the only thing in the plaque, so that gap was the
   plaque being wider than it had any reason to be. Going means the guide takes the space back and
   the plaque shrink-wraps it; coming back pushes the guide left again.

   max-width rather than width, because the button is as wide as its own words and nothing else
   should decide that. The ceiling only has to clear them - a much larger one would spend most of the
   transition growing a box that had already stopped getting wider.

   It arrives alongside the back plaque and leaves with it, so the two ends of the frame answer the
   handover as one thing - see Back.razor.css for what the wait is for. */
.reset[b-1bzabfo5sj],
.copy[b-1bzabfo5sj] {
    overflow: hidden;
    white-space: nowrap;

    /* Its own leading space rather than a gap on the row, so that the space goes when the button
       does. The row cannot do that: a gap is only drawn between things that are there, but a
       zero-width button is still a thing that is there. */
    margin-left: calc(var(--inset) * 1.25);

    --delay: calc(var(--handover) + var(--stagger) * 2);
    transition: opacity var(--panel) var(--ease) var(--delay),
                max-width var(--panel) var(--ease) var(--delay),
                margin-left var(--panel) var(--ease) var(--delay),
                color var(--hover) var(--ease);
}

    .reset.away[b-1bzabfo5sj],
    .copy.away[b-1bzabfo5sj] {
        --delay: 0ms;
        opacity: 0;
        max-width: 0;
        margin-left: 0;
    }

/* Each one clears its own words and no more, for the reason given above. The copy button swaps its
   label for what happened, so its ceiling has to clear the longer of the two - which is the report,
   not the offer. */
.reset[b-1bzabfo5sj] {
    max-width: 7rem;
}

.copy[b-1bzabfo5sj] {
    max-width: 6rem;
}
/* /Pages/NotFound.razor.rz.scp.css */
/* The same frame inset the landing uses, so the two read as the same site with the field missing
   rather than as a page from somewhere else. There is no canvas behind this one and no shell around
   it: a 404 with a drawer on it would be offering to configure a field that is not there. */
.gone[b-aecnwgxka4] {
    display: grid;
    justify-items: start;
    min-height: 100dvh;
    align-content: center;
    padding: calc(var(--inset) * 1.5) var(--inset);
}

h1[b-aecnwgxka4] {
    margin: calc(var(--inset) * 0.75) 0 0;
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--bright);
}

.lead[b-aecnwgxka4] {
    margin: var(--inset) 0 calc(var(--inset) * 1.75);
    max-width: 30rem;
    color: var(--muted);
    font: 400 0.75rem/1.5 var(--mono);
    letter-spacing: 0.02em;
}