:root {
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-family: var(--font);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
.window {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.icon-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    display: grid;
    place-items: center;
    padding: 0;
    color: inherit;
}
.icon-btn svg { width: 16px; height: 16px; display: block; }
.icon-btn:hover { background: rgb(0 0 0 / .08); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.nav { display: flex; align-items: center; gap: 2px; }
.omnibox {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.omnibox input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: inherit;
}
.stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #cfcfd4;
    touch-action: none;
}
.stage img[data-frame],
.stage [data-vnc] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: #fff;
    user-select: none;
}
.stage [data-vnc] canvas {
    display: block;
    image-rendering: auto;
}
.stage [data-vnc],
.stage [data-vnc] canvas,
.stage [data-vnc] div {
    cursor: url("pointer.svg") 1 1, crosshair !important;
}
.stage img[data-frame].is-empty,
.stage [data-vnc][hidden] { display: none !important; }
.status {
    position: absolute;
    left: 16px;
    bottom: 16px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    z-index: 3;
    pointer-events: none;
}
.start {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 32px;
    z-index: 2;
}
.start[hidden] { display: none !important; }
.start-inner { text-align: center; max-width: 32rem; }
.start h1 { margin: 0 0 .4rem; font-size: 28px; font-weight: 650; letter-spacing: -.03em; }
.start p { margin: 0; line-height: 1.45; }
.locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.location-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: #fff;
    color: #1d1d1f;
    box-shadow: inset 0 0 0 1px #d2d2d7;
    font: inherit;
    font-weight: 600;
}
.location-btn:hover { background: #f2f2f7; }
.location-btn:disabled { opacity: .45; cursor: default; }
.countdown {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0 8px;
    color: inherit;
    opacity: .72;
}
.tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }