.fu-stage { background: #000; cursor: zoom-in; }
.fu-stage.is-full { cursor: default; }
.fu-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fu-screen { position: absolute; inset: 0; container-type: size; display: grid; place-items: center; text-align: center; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transition: background .4s; }
.fu-inner { display: grid; justify-items: center; gap: 2.2cqmin; width: 86%; }
.fu-inner p { margin: 0; }
.fu-logo, .fu-dots, .fu-ring, .fu-barwrap, .fu-blocks, .fu-foot:empty, .fu-sub:empty { display: none; }
.fu-title { font-size: clamp(14px, 5.2cqmin, 54px); font-weight: 300; }
.fu-pct { font-size: clamp(12px, 3.8cqmin, 36px); font-variant-numeric: tabular-nums; }
.fu-sub, .fu-foot { font-size: clamp(10px, 2.9cqmin, 26px); opacity: .85; max-width: 60ch; }
.fu-foot { margin-top: 5cqmin !important; opacity: .7; }

/* orbiting dots */
.fu-dots { position: relative; width: 11cqmin; height: 11cqmin; margin-bottom: 3cqmin; }
.fu-dots i { position: absolute; inset: 0; animation: fu-orbit 4.2s cubic-bezier(.55, .1, .45, .9) infinite; }
.fu-dots i::before { content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 13%; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.fu-dots i:nth-child(2) { animation-delay: .14s; } .fu-dots i:nth-child(3) { animation-delay: .28s; }
.fu-dots i:nth-child(4) { animation-delay: .42s; } .fu-dots i:nth-child(5) { animation-delay: .56s; }
@keyframes fu-orbit { 0% { transform: rotate(0); opacity: 1; } 75% { transform: rotate(720deg); opacity: 1; } 76%, 100% { transform: rotate(720deg); opacity: 0; } }
.fu-ring { width: 9cqmin; height: 9cqmin; border-radius: 50%; border: .9cqmin solid rgba(127, 127, 127, .25); border-top-color: currentColor; animation: fu-spin 1s linear infinite; margin-bottom: 2cqmin; }
@keyframes fu-spin { to { transform: rotate(360deg); } }
.fu-barwrap { width: min(60cqw, 520px); height: 1.1cqmin; min-height: 4px; border-radius: 99px; background: rgba(127, 127, 127, .3); overflow: hidden; }
.fu-bar { height: 100%; width: 0; background: currentColor; border-radius: 99px; transition: width .6s linear; }

.fu-screen[data-style="blue"] { background: #0f5bb5; color: #fff; }
.fu-screen[data-style="blue"] .fu-dots { display: block; }

.fu-screen[data-style="dark"] { background: #0c0d10; color: #e8eaef; }
.fu-screen[data-style="dark"] .fu-ring, .fu-screen[data-style="dark"] .fu-barwrap { display: block; }
.fu-screen[data-style="dark"] .fu-bar { background: #4d8dff; }

.fu-screen[data-style="light"] { background: #f5f6f8; color: #1d2230; }
.fu-screen[data-style="light"] .fu-barwrap { display: block; }
.fu-screen[data-style="light"] .fu-bar { background: #2f6fe0; }
.fu-screen[data-style="light"] .fu-title { font-weight: 500; }

.fu-screen[data-style="phone"] { background: #000; color: #f2f2f2; }
.fu-screen[data-style="phone"] .fu-logo { display: block; width: 16cqmin; height: 16cqmin; margin-bottom: 6cqmin; color: #f2f2f2; }
.fu-screen[data-style="phone"] .fu-logo svg { width: 100%; height: 100%; animation: fu-spin 12s linear infinite; }
.fu-screen[data-style="phone"] .fu-barwrap { display: block; width: min(34cqw, 300px); background: #3a3a3a; }
.fu-screen[data-style="phone"] .fu-bar { background: #f2f2f2; }
.fu-screen[data-style="phone"] .fu-title, .fu-screen[data-style="phone"] .fu-pct { display: none; }
.fu-screen[data-style="phone"] .fu-sub { font-size: clamp(10px, 2.6cqmin, 20px); opacity: .7; }

.fu-screen[data-style="retro"] { background: #0000a8; color: #dcdcdc; font-family: ui-monospace, "Courier New", Consolas, monospace; }
.fu-screen[data-style="retro"] .fu-inner { border: .7cqmin double #dcdcdc; border-width: 1.2cqmin; border-style: double; padding: 4cqmin 5cqmin; width: min(86%, 90cqh * 1.6); background: #0000a8;
  box-shadow: 2cqmin 2cqmin 0 #000; gap: 2.5cqmin; }
.fu-screen[data-style="retro"] .fu-title { font-weight: 700; letter-spacing: .06em; font-size: clamp(12px, 4.2cqmin, 44px); background: #dcdcdc; color: #0000a8; padding: 0 1em; }
.fu-screen[data-style="retro"] .fu-blocks { display: block; font-size: clamp(10px, 3.6cqmin, 36px); letter-spacing: -0.05em; white-space: pre; color: #ffff55; }
.fu-screen[data-style="retro"] .fu-pct { color: #ffff55; }
.fu-screen[data-style="retro"] .fu-sub, .fu-screen[data-style="retro"] .fu-foot { opacity: 1; }
.fu-screen[data-style="retro"] .fu-foot { color: #ff5555; font-weight: 700; }

.fu-screen.done .fu-dots, .fu-screen.done .fu-ring, .fu-screen.done .fu-barwrap, .fu-screen.done .fu-blocks, .fu-screen.done .fu-logo { display: none !important; }
.fu-screen.restarting .fu-barwrap, .fu-screen.restarting .fu-blocks, .fu-screen.restarting .fu-pct { display: none !important; }

.px-under { margin-top: 12px; }
.panel select, .panel input[type="text"] { width: 100%; margin-top: 6px; }
.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) { .fu-dots i { animation-duration: 9s; } .fu-ring { animation-duration: 3s; } .fu-screen[data-style="phone"] .fu-logo svg { animation: none; } }