/* The demo shell: a quiet frame around the screens being judged. */
:root {
  --shell: #1d2327;
  --shell-2: #262d32;
  --shell-ink: #dfe5e7;
  --shell-ink-2: #98a4a9;
  --shell-line: #343d43;
  --shell-on: #e8eef0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--shell);
  color: var(--shell-ink);
  font-family: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  font-size: 15px;
  display: flex;
  flex-direction: column;
}

.bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 22px;
  padding: 12px 18px 12px;
  border-bottom: 1px solid var(--shell-line);
}
.brand { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.brand strong { font-size: 19px; font-weight: 600; }
.brand span { color: var(--shell-ink-2); }

.field { display: flex; flex-direction: column; gap: 4px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { color: var(--shell-ink-2); font-size: 13px; padding: 0; }
select {
  font: inherit;
  color: var(--shell-ink);
  background: var(--shell-2);
  border: 1px solid var(--shell-line);
  border-radius: 6px;
  padding: 5px 8px;
  max-width: 260px;
}
.seg { flex-direction: row; flex-wrap: wrap; gap: 0; }
.seg legend { width: 100%; margin-bottom: 4px; float: left; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label span {
  display: block;
  padding: 5px 11px;
  background: var(--shell-2);
  border: 1px solid var(--shell-line);
  margin-left: -1px;
}
.seg label:first-of-type span { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg label:last-of-type span { border-radius: 0 6px 6px 0; }
.seg input:checked + span { background: var(--shell-on); color: #101518; border-color: var(--shell-on); }
.seg input:focus-visible + span, select:focus-visible { outline: 2px solid #4aaae8; outline-offset: 2px; }

main {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
main.fit .bsw-screen { position: absolute; inset: 0; }

/* Fixed-size frames, scaled down to fit the window */
.frames {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
}
.frame { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.frame .cap { color: var(--shell-ink-2); font-size: 13px; }
.frame .slot { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--shell-line); }
.frame .bsw-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

body.bare .bar { display: none; }
body.bare main .bsw-screen { position: absolute; inset: 0; }

@media (max-width: 700px) {
  .brand span { display: none; }
  .bar { gap: 10px 14px; padding: 10px 14px; }
}

/* The page couldn't start (demo.js): the reason, where the screen would be. */
.bsw-fatal { margin: 24px; padding: 16px 20px; max-width: 70ch; border: 2px solid #c42b1c; border-radius: 8px; font: 600 17px/1.4 system-ui, sans-serif; color: #c42b1c; background: #fff; }