:root {
    color-scheme: light dark;
    --edge: color-mix(in srgb, currentColor 18%, transparent);
    --muted: color-mix(in srgb, currentColor 60%, transparent);
    --panel: color-mix(in srgb, currentColor 4%, transparent);
}

body {
    font: 15px/1.55 ui-sans-serif, system-ui, sans-serif;
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

h1 {
    font-size: 1.4rem;
    margin-bottom: .25rem;
}

.lede {
    color: var(--muted);
    margin-top: 0;
}

nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: .9rem;
}

fieldset {
    border: 1px solid var(--edge);
    border-radius: .5rem;
    padding: 1rem 1.25rem 1.25rem;
    margin: 1rem 0;
    background: var(--panel);
}

legend {
    font-weight: 600;
    padding: 0 .4rem;
}

label {
    display: block;
    margin: .75rem 0;
}

input[type=range] {
    width: 100%;
    margin-top: .35rem;
}

button {
    font: inherit;
    padding: .45rem .9rem;
    border: 1px solid var(--edge);
    border-radius: .4rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

button:hover:not(:disabled) {
    background: var(--panel);
}

button:disabled {
    opacity: .45;
    cursor: default;
}

.controls {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Stacked canvases: Canvas2D grid underneath, WebGL bars on top. Both are sized
   by CSS and scaled to device pixels in JS. */
.timeline {
    position: relative;
    width: 100%;
    height: 15rem;
    margin: 1rem 0;
    border: 1px solid var(--edge);
    border-radius: .5rem;
    overflow: hidden;
    background: #0b0b0b;
}

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

label.inline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.readout {
    font: 13px/1.6 ui-monospace, monospace;
    white-space: pre;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: .5rem;
    padding: .85rem 1rem;
    overflow-x: auto;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
}

.status::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--muted);
}

.status.online::before { background: #2e9e4f; }
.status.offline::before { background: #b23; }

.warn {
    color: #b23;
}


/* Identity: forms, the recovery code, and the device list. */

.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;
}

.stack label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.stack input {
    padding: .5rem .6rem;
    font: inherit;
}

.hint {
    color: var(--muted);
    font-size: .85rem;
}

.error {
    color: #b23;
    border-left: 3px solid #b23;
    padding-left: .7rem;
}

.warning {
    color: #8a5a00;
}

.code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.15rem;
    letter-spacing: .06em;
    word-break: break-all;
    padding: .9rem 1rem;
    border: 1px solid var(--muted);
    border-radius: .4rem;
    max-width: 26rem;
}

a.button {
    display: inline-block;
    text-decoration: none;
}

.sessions {
    list-style: none;
    padding: 0;
    max-width: 34rem;
}

.sessions li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}

.sessions .kind {
    font-weight: 600;
}

.sessions .label {
    color: var(--muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.badge {
    font-size: .75rem;
    padding: .1rem .4rem;
    border: 1px solid var(--muted);
    border-radius: .3rem;
}

h2.danger,
button.danger {
    color: #b23;
}