.bs-stage { background: #000; cursor: zoom-in; }
.bs-stage.is-full { cursor: default; }
.bs-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bs-screen { --c: #0b57b8; position: absolute; inset: 0; container-type: size; overflow: hidden; background: var(--c); color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bs-screen p { margin: 0; }
.bs-err, .bs-boot, .bs-joke { display: none; }
.bs-screen[data-phase="err"][data-layout="modern"] .bs-modern,
.bs-screen[data-phase="err"][data-layout="term"] .bs-term,
.bs-screen[data-phase="err"][data-layout="min"] .bs-min { display: grid; }
.bs-screen[data-phase="black"], .bs-screen[data-phase="boot"] { background: #000; }
.bs-screen[data-phase="boot"] .bs-boot { display: grid; }
.bs-screen[data-phase="joke"] .bs-joke { display: grid; }

.bs-modern { position: absolute; left: 11cqw; right: 11cqw; top: 14cqh; align-content: start; gap: 3.2cqmin; max-width: 80ch; }
.bs-modern .bs-icon { width: 12cqmin; height: 12cqmin; }
.bs-modern .bs-h { font-size: clamp(18px, 7cqmin, 72px); font-weight: 300; line-height: 1.1; }
.bs-modern .bs-p { font-size: clamp(11px, 3.3cqmin, 30px); font-weight: 300; line-height: 1.35; max-width: 42em; }
.bs-modern .bs-pct { font-size: clamp(11px, 3.3cqmin, 30px); font-weight: 300; font-variant-numeric: tabular-nums; }
.bs-meta { margin-top: 3cqmin; display: grid; gap: .5cqmin; font-size: clamp(9px, 2.1cqmin, 18px); opacity: .9; }
.bs-meta b { font-weight: 600; letter-spacing: .02em; }

.bs-term { position: absolute; inset: 0; padding: 5cqmin 6cqmin; align-content: start; font: clamp(8px, 2.5cqmin, 22px)/1.35 ui-monospace, "Courier New", Consolas, monospace; }
.bs-term pre { margin: 0; font: inherit; white-space: pre-wrap; opacity: .92; }
.bs-term b { font-weight: 700; }
.bs-cur { margin-top: 2cqmin !important; }

.bs-min { position: absolute; inset: 0; place-items: center; align-content: center; gap: 3cqmin; text-align: center; padding: 6cqmin; }
.bs-min .bs-icon { width: 16cqmin; height: 16cqmin; }
.bs-min .bs-h { font: 600 clamp(12px, 4.4cqmin, 40px)/1.2 ui-monospace, "Courier New", Consolas, monospace; letter-spacing: .03em; word-break: break-word; }
.bs-min .bs-p { font-size: clamp(10px, 3cqmin, 26px); opacity: .9; max-width: 36em; }
.bs-bar { width: min(50cqw, 420px); height: 1.2cqmin; min-height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.bs-bar i { display: block; height: 100%; width: 0; background: #fff; transition: width .5s linear; }

.bs-boot { position: absolute; inset: 0; place-items: center; align-content: center; gap: 4cqmin; color: #ddd; font-size: clamp(10px, 2.8cqmin, 24px); }
.bs-spin { position: relative; width: 10cqmin; height: 10cqmin; }
.bs-spin i { position: absolute; left: 50%; top: 0; width: 12%; height: 30%; margin-left: -6%; border-radius: 99px; background: #eee; transform-origin: 50% 166%; opacity: .15;
  animation: bs-fade 1s linear infinite; }
.bs-spin i:nth-child(1) { transform: rotate(0deg); animation-delay: -0.875s; } .bs-spin i:nth-child(2) { transform: rotate(45deg); animation-delay: -0.75s; }
.bs-spin i:nth-child(3) { transform: rotate(90deg); animation-delay: -0.625s; } .bs-spin i:nth-child(4) { transform: rotate(135deg); animation-delay: -0.5s; }
.bs-spin i:nth-child(5) { transform: rotate(180deg); animation-delay: -0.375s; } .bs-spin i:nth-child(6) { transform: rotate(225deg); animation-delay: -0.25s; }
.bs-spin i:nth-child(7) { transform: rotate(270deg); animation-delay: -0.125s; } .bs-spin i:nth-child(8) { transform: rotate(315deg); animation-delay: 0s; }
@keyframes bs-fade { 0% { opacity: 1; } 100% { opacity: .15; } }

.bs-joke { position: absolute; inset: 0; place-items: center; align-content: center; gap: 3cqmin; text-align: center; padding: 6cqmin; background: var(--c); }
.bs-jk { font-size: clamp(26px, 13cqmin, 130px); font-weight: 900; line-height: 1; }
.bs-jm { font-size: clamp(12px, 4cqmin, 36px); font-weight: 600; max-width: 30ch; }
.bs-je { font-size: clamp(10px, 2.6cqmin, 20px); opacity: .8; }

.px-under { margin-top: 12px; }
.panel select, .panel input[type="text"] { width: 100%; margin-top: 6px; }
.panel input[hidden] { display: none; }
.px-exit { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 7; display: none; align-items: center; gap: 4px;
  font: 600 13px/1 system-ui, sans-serif; padding: 8px 12px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .35); color: #fff;
  opacity: .5; cursor: pointer; transition: opacity .3s; }
.px-exit span { font-size: 17px; line-height: 13px; }
.is-full .px-exit { display: inline-flex; }
.is-full.st-idle:not(.px-show) .px-exit { opacity: 0; pointer-events: none; }
.tool-stage.is-full .fs-btn { display: none; }
@media (prefers-reduced-motion: reduce) { .bs-spin i { animation-duration: 3s; } }