/* Fake Windows "Working on updates" screen. Sized with container units so the
   same markup works full screen and inside the small preview box. */

/* Point at the real Windows 11 font by every name browsers look it up by
   (variable family, Display instances, PostScript names). */
@font-face {
  font-family: "FU Segoe UI Variable";
  font-weight: 300 400;
  src: local("Segoe UI Variable Display Semilight"), local("SegoeUIVariable-DisplaySemilight"),
       local("Segoe UI Variable Display"), local("Segoe UI Variable"), local("SegoeUIVariable");
}
@font-face {
  font-family: "FU Segoe UI Variable";
  font-weight: 500 700;
  src: local("Segoe UI Variable Display Semibold"), local("SegoeUIVariable-DisplaySemibold"),
       local("Segoe UI Variable Text Semibold"), local("Segoe UI Variable"), local("SegoeUIVariable"),
       local("Segoe UI Semibold"), local("SegoeUI-Semibold");
}

.fu {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  color: #fff;
  font-family: "Segoe UI Variable Display", "Segoe UI", "Selawik", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
}
.fu.win11, .fu.bsod.modern {
  /* Windows 11 draws these screens in Segoe UI Variable, not Windows 10's Segoe UI. */
  font-family: "FU Segoe UI Variable", "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", "Selawik", "Noto Sans", sans-serif;
  font-weight: 350;
}
/* The 24H2 update screen uses small semibold text. */
.fu.win11 { font-weight: 600; }
.fu.win10 { background: #0067b8; }
.fu.win11 { background: #000; }
.fu.off { background: #000; }
.fu.off > * { visibility: hidden; }

.fu-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 41%;
  text-align: center;
}
.fu-text p { margin: 0; line-height: 1.45; white-space: pre-wrap; }
.fu.win10 .fu-text { margin-top: min(5.5cqh, 9cqw); font-size: min(2.35cqh, 4.6cqw); }
/* Win11 positions measured from a real 24H2 screenshot (ring centre at 47.8%, footer at 84%). */
.fu.win11 .fu-center { top: calc(47.8% - min(1.6cqh, 3.2cqw)); }
.fu.win11 .fu-text { margin-top: min(1.1cqh, 2.2cqw); font-size: min(2.15cqh, 4.2cqw); }
.fu.win11 .fu-text p { line-height: 1.3; }
.fu.win11 .fu-foot { bottom: auto; top: calc(83.9% - min(1.4cqh, 2.7cqw)); font-size: min(2.15cqh, 4.2cqw); }

.fu-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7cqh;
  margin: 0;
  text-align: center;
  font-size: min(1.9cqh, 3.8cqw);
}

/* The classic Windows dots spinner. */
.fu-spinner { position: relative; margin: 0 auto; width: min(5.2cqh, 10cqw); height: min(5.2cqh, 10cqw); }
.fu.win11 .fu-spinner { width: min(4.4cqh, 9cqw); height: min(4.4cqh, 9cqw); }
.fu-spinner i {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fu-orbit 5.5s infinite;
}
.fu-spinner i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 13%;
  height: 13%;
  margin-left: -6.5%;
  border-radius: 50%;
  background: #fff;
}
.fu-spinner i:nth-child(2) { animation-delay: .24s; }
.fu-spinner i:nth-child(3) { animation-delay: .48s; }
.fu-spinner i:nth-child(4) { animation-delay: .72s; }
.fu-spinner i:nth-child(5) { animation-delay: .96s; }
@keyframes fu-orbit {
  0%   { transform: rotate(225deg); opacity: 1; animation-timing-function: ease-out; }
  7%   { transform: rotate(345deg); animation-timing-function: linear; }
  30%  { transform: rotate(455deg); animation-timing-function: ease-in-out; }
  39%  { transform: rotate(690deg); animation-timing-function: linear; }
  70%  { transform: rotate(815deg); opacity: 1; animation-timing-function: ease-out; }
  75%  { transform: rotate(945deg); animation-timing-function: ease-out; }
  76%  { transform: rotate(945deg); opacity: 0; }
  100% { transform: rotate(945deg); opacity: 0; }
}

/* The Windows 11 progress ring: an arc that grows and shrinks while it spins. */
.fu-ring { margin: 0 auto; width: min(3.2cqh, 6.4cqw); height: min(3.2cqh, 6.4cqw); }
.fu-ring svg { display: block; width: 100%; height: 100%; overflow: visible; animation: fu-ring-spin 2s linear infinite; }
.fu-ring circle {
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 1 86.4;
  stroke-dashoffset: 0;
  transform-origin: 16px 16px;
  animation: fu-ring-arc 2s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes fu-ring-spin { to { transform: rotate(360deg); } }
@keyframes fu-ring-arc {
  0%   { stroke-dasharray: 1 86.4;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 66 86.4; stroke-dashoffset: -12; }
  100% { stroke-dasharray: 1 86.4;  stroke-dashoffset: -85.4; }
}

/* Full-screen run mode. */
html.fu-running, html.fu-running body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
  background: #000;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
html.fu-running body > :not(.fu-stage) { display: none !important; }
.fu-stage { position: fixed; inset: 0; z-index: 1000; }
.fu-stage, .fu-stage * { cursor: none; }
:fullscreen, ::backdrop { background: #000; }

/* ---------- blue screen of death ---------- */

.fu.bsod.classic { background: #0078d7; color: #fff; }
.fu.bsod.modern { background: #000; color: #fff; }
.bs-body p { margin: 0; }

.classic .bs-body {
  position: absolute;
  left: min(10.5cqw, 12cqh);
  right: 8cqw;
  top: 13.5cqh;
  max-width: min(64cqw, 110cqh);
}
.bs-face { font-size: min(15cqh, 26cqw); line-height: 1; margin-bottom: min(4.5cqh, 6cqw); }
.classic .bs-msg, .classic .bs-pct { font-size: min(2.75cqh, 4.6cqw); line-height: 1.45; }
.classic .bs-pct { margin-top: min(3.6cqh, 5cqw); }
.bs-more { display: flex; align-items: flex-start; gap: min(1.6cqw, 2.4cqh); margin-top: min(4.6cqh, 7cqw); }
.bs-qr { flex: none; width: min(10cqh, 16cqw); height: min(10cqh, 16cqw); color: #0078d7; }
.classic .bs-info { font-size: min(1.45cqh, 2.6cqw); line-height: 1.5; padding-top: .1em; }
.bs-gap { margin-top: 1.4em !important; }

/* New Windows 11 screen: everything centred, no face, no QR. Positions measured
   from Microsoft's own screenshot (message at 46%, percent at 54.5%, stop code at 91.5%). */
.modern .bs-body { position: absolute; inset: 0; text-align: center; }
.modern .bs-msg, .modern .bs-pct, .modern .bs-info { position: absolute; left: 4cqw; right: 4cqw; }
.modern .bs-msg { top: calc(46.2% - .3em); font-size: min(3.9cqh, 4.3cqw); line-height: 1.3; font-weight: 300; }
.modern .bs-pct { top: calc(54.6% - .3em); font-size: min(3.9cqh, 4.3cqw); line-height: 1.3; font-weight: 300; }
.modern .bs-info { bottom: 3.4cqh; font-size: min(1.85cqh, 2.5cqw); line-height: 1.47; font-weight: 350; }

/* ---------- iPhone ---------- */

.fu.apple { background: #000; }
.ap-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.ap-logo { width: min(26cqw, 12cqh); height: min(26cqw, 12cqh); display: block; }
.ap-bar { position: relative; margin-top: min(17cqw, 8cqh); width: min(40cqw, 19cqh); height: max(3px, min(1.1cqw, .5cqh)); border-radius: 999px; background: #3a3a3c; overflow: hidden; }
.ap-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #fff; transition: width .6s linear; }
.fu.apple.boot .ap-bar { visibility: hidden; }

/* ---------- Samsung One UI ---------- */

.fu.samsung { background: #000; font-family: "SamsungOne", Roboto, "Noto Sans", "Segoe UI", sans-serif; font-weight: 400; }
.ss-center { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.ss-logo {
  font-family: "Samsung Sharp Sans", "Poppins", "Montserrat", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: min(12.5cqw, 5.8cqh);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}
/* Four dots that spin as a group while closing in on the centre and opening out again. */
.ss-dots { position: relative; margin-top: min(9cqw, 4.2cqh); width: min(7cqw, 3.3cqh); height: min(7cqw, 3.3cqh); animation: ss-turn 1.4s linear infinite; }
.ss-dots i { position: absolute; inset: 0; }
.ss-dots i:nth-child(2) { transform: rotate(90deg); }
.ss-dots i:nth-child(3) { transform: rotate(180deg); }
.ss-dots i:nth-child(4) { transform: rotate(270deg); }
.ss-dots i::after {
  content: "";
  position: absolute;
  left: 38%;
  top: 38%;
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: #4d8dff;
  animation: ss-breathe 1.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
.ss-dots i:nth-child(1)::after { background: #3ad07a; } /* one of the four is green */
@keyframes ss-turn { to { transform: rotate(360deg); } }
@keyframes ss-breathe {
  0%, 100% { transform: translateY(-170%); }
  50%      { transform: translateY(-65%); }
}
.ss-bar { position: relative; margin-top: min(13cqw, 6cqh); width: min(68cqw, 31cqh); height: max(5px, min(3cqw, 1.4cqh)); border-radius: 999px; background: #2a2b30; overflow: hidden; }
.ss-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #3e8bff; transition: width .6s linear; }
.ss-pct { margin: min(4cqw, 1.9cqh) 0 0; font-size: min(4.6cqw, 2.1cqh); color: #d0d0d0; font-variant-numeric: tabular-nums; }

/* ---------- Mac update (Apple silicon) ----------
   Measured from Apple's support image: logo 11% of the height, centred;
   bar 28% of the height wide, 0.73% thick, centred at 90%. */

.fu.mac { background: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
.mc-logo { position: absolute; left: 50%; top: 50%; width: min(11cqh, 17cqw); height: min(11cqh, 17cqw); transform: translate(-50%, -50%); display: block; }
.mc-bar { position: absolute; left: 50%; top: calc(90.1% - max(1.5px, .36cqh)); width: min(28.2cqh, 45cqw); height: max(3px, .73cqh); transform: translateX(-50%); border-radius: 999px; background: #262626; overflow: hidden; }
.mc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #d3d3d3; transition: width .6s linear; }
.mc-left { position: absolute; left: 0; right: 0; top: 92.4%; margin: 0; text-align: center; font-size: min(1.55cqh, 3cqw); color: #c8c8c8; }
.fu.mac.boot .mc-bar, .fu.mac.boot .mc-left { visibility: hidden; }

/* ---------- Mac kernel panic ---------- */

.fu.panic { background: #222; font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Noto Sans CJK JP", sans-serif; }
.kp-power { position: absolute; left: 50%; top: 50%; width: min(33cqh, 52cqw); height: min(33cqh, 52cqw); transform: translate(-50%, -50%); }
.kp-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27.5em; max-width: 86cqw; font-size: min(2.4cqh, 3.4cqw); line-height: 1.27; color: #fff; }
.kp-text p { margin: 0 0 1.27em; }
.kp-text p:last-child { margin-bottom: 0; }