:root {
    --bg: #000;
    --fg: #fff;
    --muted: rgba(255,255,255,.75);
    --muted2: rgba(255,255,255,.35);
    --panel: rgba(255,255,255,.10);
    --panel2: rgba(255,255,255,.16);
    --btn: rgba(255,255,255,.12);
    --btn2: rgba(255,255,255,.18);
    --radius: 14px;
}
[data-theme="light"] {
    --bg: #fff;
    --fg: #000;
    --muted: rgba(0,0,0,.70);
    --muted2: rgba(0,0,0,.35);
    --panel: rgba(0,0,0,.06);
    --panel2: rgba(0,0,0,.12);
    --btn: rgba(0,0,0,.06);
    --btn2: rgba(0,0,0,.10);
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Monospace;
}
body {
    overflow: hidden;
}

.stage {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    padding: 18px;
    box-sizing: border-box;
}

.topbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 12px;
    pointer-events: none;
}
.top-left, .top-right {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
}
.top-right{
    justify-self: end;
}

.chip {
    border-radius: 999px;
    border: 1px solid var(--panel2);
    background: var(--panel);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--muted);
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.chip strong {
    color: var(--fg);
    font-weight: 650;
}
.chip:active {
    transform: translateY(1px);
}

#fsLabel svg {
    display: block;
}

.clock {
    width: auto;
    user-select: none;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.subline {
    min-height: 1.2em;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
}

.bottom {
    width: min(980px, 96vw);
    display: grid;
    justify-items: center;
    gap: 10px;
    pointer-events: none;
}

.panel {
    pointer-events: auto;
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--panel2);
    background: var(--panel);
    padding: 14px;
    box-sizing: border-box;
    display: none;
}

.row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
}
@media (min-width: 820px) {
    .row.two {
        grid-template-columns: 1fr 1fr;
    }
    .row.three {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .row.four {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .row.five {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    .row.six {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

select, input, button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--panel2);
    background: rgba(0,0,0,.0);
    color: var(--fg);
    outline: none;
    height: 39px;
    font-size: 14px;
}
input::placeholder {
    color: var(--muted2);
}

button {
    cursor: pointer;
    background: var(--btn);
}
button:hover {
    background: var(--btn2);
}
button:active {
    transform: translateY(1px);
}

.inline3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

.collapsed .panel {
    display: none !important;
}
.expanded .panel.active {
    display: block;
}

.cursor-hidden {
    cursor: none;
}