@import "brand-type.css";

/* Pekan OS round 11: the takeover.

   Everything the funny post conversion sequence paints lives under one host,
   #os-takeover, at z-index 1000000, above every OS layer: the old swarm sat
   at 999990, the capture scrim at 999992 and the update toast at 999997. The
   blue screen mounts on body at 1000010 so aria-modal is a true claim.

   Two eras, chosen by viewport in takeover.js:

     .tk-win     Windows 95 and 98. Grey #C0C0C0 body, navy to blue title
                 bar, two pixel bevels, MS Sans Serif stack at 11 and 12 px,
                 the classic red circle and yellow triangle drawn inline.
     .tk-ios     light iOS and Android alerts. Opaque surfaces keep the
                 text legible through the stack; system typography and
                 generous action rows retain each family’s character.

   The freeze, the dim, the spinner and the fade are classes on the host.
   Reduced motion strips every animation and keeps the fades short.
   No dashes as punctuation in this file. */

#os-takeover {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  pointer-events: none;
  overflow: hidden;
}

/* announced once, never seen */
.tk-status {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
}

/* ===== the mute toggle, top right for the whole sequence ===== */

.tk-mute {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 900;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  padding: 0;
  background: rgba(10, 12, 24, 0.8);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.tk-mute svg {
  width: 20px;
  height: 20px;
}

.tk-mute:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tk-skip {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 900;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(10, 12, 24, 0.78);
  color: #fff;
  cursor: pointer;
  font-family: var(--pk-font);
  font-size: 13px;
  font-weight: 600;
  pointer-events: auto;
}

.tk-skip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===== every card ===== */

.tk-card {
  position: absolute;
  translate: -50% -50%;
  rotate: var(--tk-rot, 0deg);
  scale: 0.96;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 110ms ease, scale 110ms ease;
}

.tk-card.in {
  opacity: 1;
  scale: 1;
}

.tk-card.out {
  opacity: 0;
  scale: 0.97;
  transition: opacity 160ms ease, scale 160ms ease;
}

/* the variety in the fill */
.tk-card.tk-shake.in {
  animation: tk-shake 300ms ease-in-out 120ms 3;
}

.tk-card.tk-drift.in {
  animation: tk-drift 1300ms ease-in-out 200ms infinite alternate;
}

.tk-card.tk-dodge {
  transition: left 180ms cubic-bezier(0.2, 0.9, 0.3, 1.1), top 180ms cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 110ms ease;
}

@keyframes tk-shake {
  0%, 100% { translate: -50% -50%; }
  20% { translate: calc(-50% - 5px) calc(-50% + 1px); }
  40% { translate: calc(-50% + 5px) calc(-50% - 1px); }
  60% { translate: calc(-50% - 4px) -50%; }
  80% { translate: calc(-50% + 3px) -50%; }
}

@keyframes tk-drift {
  from { translate: -50% -50%; }
  to { translate: calc(-50% + 6px) calc(-50% + 4px); }
}

/* the freeze at the gate: nothing moves, nothing takes input */
#os-takeover.tk-frozen .tk-card {
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

/* ===== Windows 95 and 98 ===== */

.tk-win {
  width: 340px;
  max-width: calc(100vw - 16px);
  padding: 3px;
  background: #c0c0c0;
  color: #000;
  font-family: var(--pk-font);
  font-size: 12px;
  line-height: 1.35;
  box-shadow:
    inset -1px -1px 0 #0a0a0a,
    inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset 2px 2px 0 #dfdfdf,
    6px 6px 0 rgba(0, 0, 0, 0.28);
}

.tk-win.tk-small {
  width: 250px;
}

.tk-win.tk-taskmgr,
.tk-win.tk-contact-card {
  width: 360px;
}

.tk-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 2px 0 5px;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tk-bar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tk-x,
.tk-btn {
  border: 0;
  padding: 0;
  background: #c0c0c0;
  color: #000;
  cursor: pointer;
  font-family: var(--pk-font);
  box-shadow:
    inset -1px -1px 0 #0a0a0a,
    inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset 2px 2px 0 #dfdfdf;
}

.tk-x {
  flex: none;
  width: 16px;
  height: 14px;
  display: grid;
  place-items: center;
}

.tk-x svg {
  width: 8px;
  height: 7px;
}

.tk-x:active,
.tk-btn:active {
  box-shadow:
    inset 1px 1px 0 #0a0a0a,
    inset -1px -1px 0 #ffffff,
    inset 2px 2px 0 #808080,
    inset -2px -2px 0 #dfdfdf;
}

.tk-x:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

.tk-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 6px;
}

.tk-icon {
  flex: none;
  width: 32px;
  height: 32px;
}

.tk-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.tk-msg {
  flex: 1;
  min-width: 0;
  padding-top: 5px;
}

.tk-text {
  margin: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.tk-small .tk-text {
  font-size: 11px;
}

.tk-acts {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 8px 10px;
}

.tk-btn {
  min-width: 75px;
  height: 23px;
  padding: 0 12px;
  font-size: 11px;
}

.tk-btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* the progress bar, blocks or a fill, on white with a sunken edge */
.tk-prog {
  height: 16px;
  margin: 9px 0 2px;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset 2px 2px 0 #0a0a0a,
    inset -2px -2px 0 #dfdfdf;
  padding: 2px;
}

.tk-prog-fill {
  display: block;
  width: 0;
  height: 100%;
  background: #000080;
  transition: width 60ms linear;
}

.tk-prog-blocks {
  background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px);
}

.tk-prog-pct {
  display: block;
  font-size: 11px;
  color: #333;
  text-align: right;
}

.tk-dl {
  margin-top: 4px;
  font-size: 11px;
  color: #333;
}

/* the scan: rows appearing one by one */
.tk-scan {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
}

.tk-scan li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}

.tk-scan-dot {
  flex: none;
  width: 7px;
  height: 7px;
  background: #c00;
  box-shadow: inset -1px -1px 0 #600;
}

.tk-scan li.tk-good {
  font-weight: 700;
}

.tk-scan li.tk-good .tk-scan-dot {
  background: #080;
  box-shadow: inset -1px -1px 0 #040;
}

/* the task manager table */
.tk-taskmgr .tk-msg {
  padding-top: 0;
}

.tk-taskmgr .tk-text:empty {
  display: none;
}

.tk-task {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 11px;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset 2px 2px 0 #0a0a0a,
    inset -2px -2px 0 #dfdfdf;
}

.tk-task th {
  padding: 4px 8px;
  background: #c0c0c0;
  text-align: left;
  font-weight: 400;
  box-shadow:
    inset -1px -1px 0 #808080,
    inset 1px 1px 0 #ffffff;
}

.tk-task td {
  padding: 3px 8px;
  border-bottom: 1px dotted #ccc;
}

.tk-task td.tk-bad {
  color: #a00;
}

.tk-task td.tk-good {
  color: #060;
  font-weight: 700;
}

/* the contact card, the two real numbers */
.tk-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}

.tk-contact-row {
  display: block;
}

.tk-tel {
  font-size: 13px;
  font-weight: 700;
  color: #000080;
  text-decoration: none;
}

.tk-ios .tk-tel {
  color: #fff;
  font-size: 16px;
  text-decoration: underline;
}

.tk-after {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
}

/* ===== iPhone alerts ===== */

.tk-veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 8, 0);
  transition: background 300ms ease;
  pointer-events: auto;
}

.tk-veil.in {
  background: rgba(21, 29, 43, 0.18);
}

.tk-ios {
  width: 284px;
  max-width: calc(100vw - 28px);
  border: 1px solid rgba(20, 27, 42, 0.2);
  border-radius: 16px;
  background: #f8f8fa;
  color: #17181c;
  font-family: var(--pk-font);
  text-shadow: none;
  box-shadow: 0 1px 1px rgba(25, 30, 45, 0.1), 0 16px 38px rgba(25, 30, 45, 0.28);
  overflow: hidden;
}

.tk-ios::before { display: none; }

.tk-ios.tk-small {
  width: 236px;
}

.tk-ios.tk-back {
  scale: 0.94;
  filter: brightness(0.82);
}

.tk-ios-in {
  position: relative;
  padding: 16px 16px 10px;
  text-align: center;
}

.tk-ios-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.tk-ios-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.tk-ios-body.tk-reveal {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tk-small .tk-ios-title {
  font-size: 15px;
}

.tk-small .tk-ios-body {
  font-size: 13px;
}

.tk-ios-acts {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
}

.tk-ios-btn {
  flex: 1;
  min-height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 9px;
  background: linear-gradient(180deg, #98a9d8 0%, #6a80bd 48%, #46609f 52%, #5069ad 100%);
  color: #fff;
  cursor: pointer;
  font-family: var(--pk-font);
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.tk-ios-call {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.tk-ios-btn:active {
  background: linear-gradient(180deg, #46609f 0%, #33487f 100%);
}

.tk-ios-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* cards rising from the bottom */
.tk-card.tk-rise.in {
  animation: tk-rise 420ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

@keyframes tk-rise {
  from { translate: -50% 40vh; opacity: 0; }
  to { translate: -50% -50%; opacity: 1; }
}

/* banners sliding down from the top */
.tk-banner {
  left: 8px;
  right: 64px;
  translate: 0 0;
  scale: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(24, 26, 38, 0.94);
  color: #fff;
  font-family: var(--pk-font);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.tk-banner.in {
  animation: tk-drop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes tk-drop {
  from { translate: 0 -120px; }
  to { translate: 0 0; }
}

.tk-banner-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(#3a55b5, #1a2a6c);
  color: #ffd166;
  display: grid;
  place-items: center;
}

.tk-banner-icon svg {
  width: 18px;
  height: 18px;
}

.tk-banner-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.tk-banner-txt b {
  font-size: 12px;
  opacity: 0.85;
}

.tk-banner-txt span {
  font-size: 13.5px;
}

.tk-banner-x {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.tk-banner-x:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* the home screen icon with the badge that will not stop */
.tk-home {
  left: 18px;
  top: auto;
  bottom: 118px;
  translate: 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tk-home.in {
  animation: tk-pop 380ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes tk-pop {
  from { scale: 0.4; }
  to { scale: 1; }
}

.tk-home-tile {
  position: relative;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: linear-gradient(180deg, #3f5bc0 0%, #1a2a6c 100%);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px rgba(0, 0, 0, 0.45);
}

.tk-home-tile img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.tk-home-tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tk-home-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: linear-gradient(#ff5b52, #e0261c);
  color: #fff;
  font-family: var(--pk-font);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.tk-home-label {
  color: #fff;
  font-family: var(--pk-font);
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ===== the ending ===== */

.tk-dim {
  position: absolute;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0);
  transition: background 300ms ease;
  pointer-events: auto;
}

.tk-dim.in {
  background: rgba(0, 0, 0, 0.45);
}

.tk-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 450;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  opacity: 0;
  transition: opacity 200ms ease;
}

.tk-spin.in {
  opacity: 1;
}

.tk-spin-ring {
  display: block;
  width: 72px;
  height: 72px;
  animation: tk-turn 900ms linear infinite;
}

@keyframes tk-turn {
  to { rotate: 360deg; }
}

/* the desktop going: the dim closes to black and the cards go with it */
#os-takeover.tk-fade .tk-dim.in {
  background: rgba(0, 0, 0, 1);
  transition: background 400ms ease;
}

#os-takeover.tk-fade .tk-card,
#os-takeover.tk-fade .tk-veil {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* ===== the blue screen ===== */

#os-takeover-bsod {
  position: fixed;
  inset: 0;
  z-index: 1000010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px 80px;
  background: linear-gradient(160deg, #0b3d91 0%, #0a2a6a 100%);
  color: #fff;
  font-family: var(--pk-font);
  opacity: 0;
  transition: opacity 400ms ease;
  overflow: auto;
}

#os-takeover-bsod.in {
  opacity: 1;
}

.tk-bsod-in {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.tk-bsod-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 26px;
  object-fit: contain;
}

.tk-bsod-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tk-bsod-body {
  margin: 0 auto 30px;
  max-width: 640px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.tk-bsod-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.tk-bsod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--pk-font);
  font-size: 15px;
  font-weight: 600;
}

/* the glyph rides with the label rather than floating beside it, and it
   never shrinks on a narrow phone where the label wraps */
.tk-bsod-ico,
.tk-bsod-btn .pk-fa {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 1;
}

.tk-bsod-btn.tk-primary {
  background: #fff;
  color: #0b3d91;
}

.tk-bsod-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The line Escape and the site button write into. It has no height until it
   says something, so the ending is not carrying an empty row waiting for a
   key that most visitors never press. */
.tk-bsod-hint {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
  opacity: 0;
  transition: opacity 200ms ease;
}

.tk-bsod-hint.in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tk-bsod-hint { transition: none; }
}

.tk-bsod-stop {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 24px;
  margin: 0;
  text-align: center;
  font-family: var(--pk-font);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

#os-takeover-bsod .tk-mute {
  top: 16px;
  right: 16px;
}

@media (max-width: 700px) {
  #os-takeover.tk-phone .tk-ios {
    width: min(312px, calc(100vw - 24px));
  }

  #os-takeover.tk-phone .tk-ios-btn,
  #os-takeover.tk-phone .tk-banner-x,
  #os-takeover.tk-phone .tk-home-tile,
  #os-takeover.tk-phone .tk-skip {
    min-height: 44px;
    min-width: 44px;
  }

  #os-takeover.tk-phone .tk-banner {
    right: 16px;
    left: 16px;
  }

  #os-takeover.tk-phone .tk-home {
    bottom: max(24px, env(safe-area-inset-bottom, 0px) + 88px);
  }

  #os-takeover-bsod {
    padding: 36px 22px 96px;
    align-items: flex-start;
  }

  .tk-bsod-acts {
    flex-direction: column;
    align-items: stretch;
  }

  .tk-bsod-stop {
    left: 22px;
    right: 22px;
    bottom: 18px;
    font-size: 11px;
  }
}

/* ===== the capture surfaces: the spinning refresh glyph ===== */

.tk-spin-glyph {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  animation: tk-turn 900ms linear infinite;
}

/* ===== reduced motion: three centre cards, no shake, same ending ===== */

@media (prefers-reduced-motion: reduce) {
  .tk-card,
  .tk-card.in,
  .tk-card.tk-shake.in,
  .tk-card.tk-drift.in,
  .tk-card.tk-rise.in,
  .tk-banner.in,
  .tk-home.in {
    animation: none !important;
    scale: 1;
    transition: opacity 120ms ease;
  }

  .tk-card.tk-dodge {
    transition: none;
  }

  .tk-spin-ring {
    animation-duration: 2400ms;
  }

  .tk-spin-glyph {
    animation-duration: 2400ms;
  }

  #os-takeover-bsod,
  .tk-dim,
  .tk-veil {
    transition-duration: 160ms;
  }
}

/* ===== the retro families =====

   Six skins over ONE card structure. pekan/takeover.js sets .tk-fam-<name>
   on the same markup every family uses, so a skin cannot change what a card
   does, only how the decade it came from felt.

   The rule that keeps six variants from reading as a broken theme: each
   family changes only bevel or gradient or blur, corner radius, and where
   the title sits. Type scale, spacing, icon slot and the action row are
   shared, inherited from .tk-win and .tk-ios above.

   Desktop uses pekan, win98, vista and aqua. Phone uses ios and android.
   No dashes as punctuation in this file. */

/* Pekan native, the house style and the one the ending rhymes with */
.tk-win.tk-fam-pekan {
  padding: 0;
  border-radius: 12px;
  background: #f9fafc;
  color: #1c2330;
  border: 1px solid #b6becb;
  font-family: var(--pk-font);
  box-shadow:
    0 1px 0 #fff inset,
    0 18px 44px rgba(24, 34, 54, 0.24);
  overflow: hidden;
}

.tk-fam-pekan .tk-bar {
  height: 34px;
  padding: 0 6px 0 12px;
  background: linear-gradient(#fff, #edf0f5);
  border-bottom: 1px solid #d2d7e0;
  color: #1c2330;
  font-size: 12px;
  font-weight: 600;
}

.tk-fam-pekan .tk-x { color: #273345; box-shadow: none; background: transparent; }
.tk-fam-pekan .tk-x:hover { background: #e2e6ef; }
.tk-fam-pekan .tk-body { padding: 14px 14px 6px; }
.tk-fam-pekan .tk-text { color: #1c2330; }
.tk-fam-pekan .tk-acts { padding: 6px 14px 14px; }

.tk-fam-pekan .tk-btn {
  height: 30px;
  border-radius: 8px;
  background: var(--pm-purple, #6E5AE8);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}

.tk-fam-pekan .tk-btn:active { transform: translateY(1px); }

/* Windows 98, the default skin the others vary from. Nothing to
   restate here: .tk-win above already is this family. */

/* Windows Vista, glass and a strong blue glow */
.tk-win.tk-fam-vista {
  padding: 1px;
  border-radius: 7px;
  background: rgba(222, 236, 250, 0.93);
  color: #06284a;
  font-family: var(--pk-font);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 1px rgba(38, 105, 170, 0.5),
    0 0 22px rgba(74, 155, 226, 0.42),
    0 16px 34px rgba(0, 0, 0, 0.38);
}

.tk-fam-vista .tk-bar {
  height: 30px;
  padding: 0 4px 0 11px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(206, 228, 248, 0.86) 48%, rgba(174, 208, 240, 0.9) 52%, rgba(214, 234, 252, 0.92) 100%);
  color: #06284a;
  font-size: 12px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.tk-fam-vista .tk-x { background: transparent; box-shadow: none; color: #06284a; }
.tk-fam-vista .tk-x:hover { background: rgba(232, 84, 84, 0.85); color: #fff; }
.tk-fam-vista .tk-body { padding: 13px 14px 6px; }

.tk-fam-vista .tk-btn {
  height: 25px;
  border-radius: 4px;
  border: 1px solid #8ba7c4;
  background: linear-gradient(180deg, #fbfdff 0%, #e4eef8 48%, #d2e2f2 52%, #eef5fc 100%);
  color: #06284a;
  font-size: 12px;
  box-shadow: none;
}

/* macOS Aqua, pinstripe grey, centred title, lozenge button */
.tk-win.tk-fam-aqua {
  padding: 0;
  border-radius: 10px;
  background: #ededed;
  color: #1c1c1c;
  font-family: var(--pk-font);
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.tk-fam-aqua .tk-bar {
  height: 26px;
  padding: 0 8px;
  background: linear-gradient(180deg, #f6f6f6 0%, #d8d8d8 100%);
  border-bottom: 1px solid #b4b4b4;
  color: #3a3a3a;
  font-size: 12px;
  font-weight: 700;
}

/* the one place a family moves an element: Aqua centres its title, which is
   the single most recognisable thing about that era's chrome */
.tk-fam-aqua .tk-bar-title { text-align: center; }

.tk-fam-aqua .tk-x {
  order: -1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  border: 1px solid #d84740;
  box-shadow: none;
  color: transparent;
}

.tk-fam-aqua .tk-x svg { display: none; }
.tk-fam-aqua .tk-body { padding: 15px 16px 6px; }
.tk-fam-aqua .tk-acts { padding: 6px 16px 15px; }

.tk-fam-aqua .tk-btn {
  height: 26px;
  border-radius: 13px;
  border: 1px solid #9dbbdd;
  background: linear-gradient(180deg, #ffffff 0%, #dbe9f8 100%);
  color: #17324e;
  font-size: 12px;
  box-shadow: none;
}

/* Windows XP Luna: saturated blue title, olive body, distinct from Vista glass */
.tk-win.tk-fam-xp {
  padding: 3px;
  border-radius: 6px 6px 4px 4px;
  background: #ece9d8;
  color: #000;
  font-family: var(--pk-font);
  border: 1px solid #0054e3;
  box-shadow:
    inset 1px 1px 0 #fff,
    0 8px 0 rgba(0, 0, 0, 0.18),
    8px 12px 18px rgba(0, 0, 0, 0.28);
}

.tk-fam-xp .tk-bar {
  height: 24px;
  padding: 0 4px 0 8px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #245edb 0%, #3b6ea5 48%, #1c4fba 52%, #1941a5 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.tk-fam-xp .tk-x {
  width: 18px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e88989 0%, #c44 48%, #a11 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.tk-fam-xp .tk-body { padding: 13px 12px 6px; }

.tk-fam-xp .tk-btn {
  height: 24px;
  border-radius: 3px;
  border: 1px solid #003c74;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  color: #000;
  font-size: 11px;
  box-shadow: none;
}

/* Modern macOS: frosted light panel, traffic-light close, SF stack */
.tk-win.tk-fam-macos {
  padding: 0;
  border-radius: 12px;
  background: rgba(246, 246, 248, 0.92);
  color: #1d1d1f;
  font-family: var(--pk-font);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

.tk-fam-macos .tk-bar {
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
}

.tk-fam-macos .tk-bar-title { text-align: center; }

.tk-fam-macos .tk-x {
  order: -1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  border: 1px solid #e24640;
  box-shadow: none;
  color: transparent;
}

.tk-fam-macos .tk-x svg { display: none; }
.tk-fam-macos .tk-body { padding: 16px 16px 6px; }
.tk-fam-macos .tk-acts { padding: 6px 16px 14px; justify-content: flex-end; }

.tk-fam-macos .tk-btn {
  height: 28px;
  min-width: 72px;
  border-radius: 6px;
  border: 0;
  background: #0a84ff;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

/* iOS uses the light alert above; Android retains its left-aligned layout. */

/* Android, Material: flat card, left aligned, text buttons in caps */
.tk-ios.tk-fam-android {
  border-radius: 4px;
  background: #fafafa;
  color: #212121;
  font-family: var(--pk-font);
  border: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

.tk-ios.tk-fam-android::before { display: none; }

.tk-fam-android .tk-ios-in { padding: 20px 22px 8px; text-align: left; }

.tk-fam-android .tk-ios-title {
  color: #212121;
  font-size: 19px;
  font-weight: 500;
  text-align: left;
  text-shadow: none;
}

.tk-fam-android .tk-ios-body {
  color: #5f5f5f;
  font-size: 14.5px;
  text-align: left;
  text-shadow: none;
}

.tk-fam-android .tk-ios-acts {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px 12px 10px;
  border-top: 0;
}

.tk-fam-android .tk-ios-btn {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #6E5AE8;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
}

.tk-fam-android .tk-ios-btn:active { background: rgba(110, 90, 232, 0.12); }

/* Distinct era compositions. Shared controls retain the same close contract. */
.tk-era-status {border-top:1px solid #fff;padding:5px 9px;font-size:10px;color:#000;}
.tk-app-mini {font-size:16px;margin-right:6px;}
.tk-vista-sheet {background:#fff;margin:2px 5px 5px;}
.tk-vista-heading {display:flex;align-items:center;gap:12px;padding:16px 16px 0;color:#000;font-size:16px;}
.tk-vista-heading .tk-icon {flex:0 0 32px;}
.tk-vista-sheet .tk-body {padding:10px 16px 18px;}
.tk-vista-sheet .tk-command-row {background:#edf1f6;padding:12px 16px;border-top:1px solid #ccd3dc;}
.tk-lights {display:flex;align-items:center;gap:6px;margin-right:12px;}
.tk-lights > span {display:block;width:10px;height:10px;border:1px solid #999;border-radius:50%;background:#ddd;}
.tk-aqua-sheet {background:repeating-linear-gradient(#fff 0 1px,#ededed 1px 3px);padding:10px 8px 4px;}
.tk-fam-aqua .tk-x {color:#000;display:flex;width:18px;height:18px;align-items:center;justify-content:center;}
.tk-fam-aqua .tk-x .pk-fa {font-size:9px;}
.tk-fam-aqua .tk-btn {border-radius:4px;background:linear-gradient(#fff,#c3defe 48%,#84b7ef 52%,#d7eafa);color:#000;}
.tk-fam-macos.tk-win {width:292px;}
.tk-fam-macos .tk-mac-chrome {justify-content:space-between;border:0;background:transparent;}
.tk-fam-macos .tk-x {color:#000;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.tk-fam-macos .tk-x .pk-fa {font-size:9px;}
.tk-mac-alert {padding:10px 18px 18px;text-align:center;}
.tk-mac-alert > .tk-icon {display:block;margin:0 auto 12px;width:48px;height:48px;}
.tk-mac-title {margin:0;font-size:17px;color:#000;line-height:1.25;}
.tk-mac-alert .tk-body {display:block;padding:10px 0 16px;}
.tk-mac-alert .tk-acts {display:block;padding:0;}
.tk-mac-alert .tk-btn {width:100%;height:32px;}
.tk-pekan-notice .tk-acts {justify-content:space-between;gap:16px;}
.tk-prop-label {font-size:10px;color:#526075;}
.tk-android-head {display:flex;align-items:center;gap:10px;padding:12px 22px 0;font-size:11px;color:#000;}
.tk-android-app {font-size:22px;}
.tk-android-content.tk-ios-in {padding-top:10px;}
.tk-android-footer {border-top:1px solid #ddd;}
.tk-fam-android .tk-ios-btn {text-transform:none;letter-spacing:0;color:#000;}
#os-takeover .tk-fam-pekan {background:#f9fafc;color:#1c2330;}
#os-takeover .tk-fam-pekan .tk-btn {background:#5956E9;border-radius:4px;}
#os-takeover .tk-win:not(.tk-fam-pekan),
#os-takeover .tk-win:not(.tk-fam-pekan) .tk-text,
#os-takeover .tk-win:not(.tk-fam-pekan) .tk-btn,
#os-takeover .tk-fam-android .tk-ios-title,
#os-takeover .tk-fam-android .tk-ios-body {color:#000;}
#os-takeover .tk-fam-pekan .tk-text,#os-takeover .tk-fam-pekan .tk-bar {color:#1c2330;}
#os-takeover .tk-fam-vista .tk-bar,#os-takeover .tk-fam-aqua .tk-bar,#os-takeover .tk-fam-macos .tk-bar {color:#000;}
#os-takeover .tk-fam-macos .tk-btn {color:#fff;}
#os-takeover .tk-prog-pct,#os-takeover .tk-dl,#os-takeover .tk-tel,#os-takeover .tk-task td {color:#000;}
#os-takeover .tk-ios:not(.tk-fam-android) .tk-tel {color:#124b9d;}
#os-takeover .tk-x .pk-fa {width:auto;height:auto;margin:0;}
#os-takeover .tk-card:focus-visible {outline:2px solid #000;outline-offset:3px;}
#os-takeover .tk-skip {border-radius:4px;color:#fff;min-height:44px;}
#os-takeover .tk-mute,#os-takeover-bsod .tk-mute {border-radius:4px;color:#fff;background:rgba(0,0,0,.65);min-height:44px;min-width:44px;}
#os-takeover-bsod {background:#423EF3;box-sizing:border-box;padding:64px max(24px,env(safe-area-inset-right)) 64px max(24px,env(safe-area-inset-left));align-items:center;font-family: var(--pk-font);}
#os-takeover-bsod .tk-bsod-in {margin:auto;}
#os-takeover-bsod .tk-bsod-body,#os-takeover-bsod .tk-bsod-hint,#os-takeover-bsod .tk-bsod-stop {color:#fff;}
#os-takeover-bsod .tk-primary {color:#000;}
#os-takeover-bsod .tk-bsod-btn {border-radius:4px;min-height:48px;}
#os-takeover-bsod .tk-bsod-hint {min-height:3em;margin-bottom:-3em;transition:none;}
#os-takeover-bsod .tk-bsod-hint.in {opacity:1;}
#os-sound,#os-sound.on {color:#000!important;background:rgba(255,255,255,.85)!important;border-radius:4px!important;}
@media (max-width:700px) {
  #os-takeover-bsod {align-items:center;padding-top:max(64px,env(safe-area-inset-top));padding-bottom:max(64px,env(safe-area-inset-bottom));}
  #os-takeover-bsod .tk-bsod-title {font-size:30px;}
  #os-takeover-bsod .tk-bsod-body {font-size:16px;line-height:1.5;}
  #os-takeover-bsod .tk-bsod-mark {margin-bottom:20px;}
  #os-takeover-bsod .tk-bsod-acts {width:100%;}
  #os-takeover-bsod .tk-bsod-btn {width:100%;box-sizing:border-box;}
  #os-takeover-bsod .tk-bsod-body {text-wrap:pretty;}
  #os-takeover-bsod .tk-bsod-stop {font-size:10px;bottom:12px;}
  #os-takeover.tk-phone .tk-banner {max-width:calc(100vw - 32px);box-sizing:border-box;}
}
@media (prefers-reduced-motion:reduce) {
  #os-takeover .tk-card,#os-takeover .tk-card.in {transition:none!important;rotate:0deg!important;}
  #os-takeover .tk-spin-ring,#os-takeover .tk-spin-glyph {animation:none;}
}

/* Light native notification stack. The burst supplies the escalation;
   upright windows retain their recognisable operating-system geometry. */
#os-takeover .tk-card { rotate:0deg; box-sizing:border-box; }
#os-takeover .tk-win { max-height:calc(100dvh - 12px); overflow:auto; }
#os-takeover .tk-bar { min-height:28px; height:auto; }
#os-takeover .tk-bar-title { line-height:1.4; }
#os-takeover .tk-x { width:26px; height:26px; min-width:26px; border-radius:3px; }
#os-takeover .tk-x .pk-fa { font-size:11px; }
#os-takeover .tk-btn { min-height:28px; height:auto; padding:5px 16px; line-height:1.3; }
#os-takeover .tk-acts { align-items:center; }
#os-takeover .tk-win:not(.tk-fam-win98):not(.tk-small) .tk-text { font-size:13px; line-height:1.4; }
#os-takeover .tk-fam-win98 .tk-bar { background:linear-gradient(90deg,#000080,#006ca9); }
#os-takeover .tk-fam-pekan { border-radius:8px; }
#os-takeover .tk-fam-pekan .tk-bar { min-height:34px; }
#os-takeover .tk-fam-pekan .tk-acts { padding:10px 14px 12px; margin-top:8px; border-top:1px solid #e0e4eb; background:#f0f2f6; }
#os-takeover .tk-fam-pekan .tk-btn { min-height:32px; color:#fff; background:#514dc9; border:1px solid #4541b2; }
#os-takeover .tk-fam-pekan .tk-btn:hover { background:#423eb7; }
#os-takeover .tk-fam-vista { background:#dceaf5; }
#os-takeover .tk-fam-vista .tk-x { border:1px solid #b0c4d5; background:linear-gradient(#f6fafc,#d3e3ef); }
#os-takeover .tk-fam-aqua .tk-x,
#os-takeover .tk-fam-macos .tk-x { background:radial-gradient(circle,#ff655b 0 7px,transparent 7.5px); border:0; box-shadow:none; }
#os-takeover .tk-fam-aqua .tk-lights,
#os-takeover .tk-fam-macos .tk-lights { gap:4px; }
#os-takeover .tk-fam-macos { background:#f4f4f6; border:1px solid #b6b8c1; -webkit-backdrop-filter:none; backdrop-filter:none; }
#os-takeover .tk-win.tk-fam-macos .tk-btn { background:linear-gradient(#086ed9,#0060cc); color:#fff; min-height:32px; border:1px solid #075bb9; }
#os-takeover .tk-fam-macos .tk-mac-title { font-size:16px; font-weight:600; }
#os-takeover .tk-ios { max-height:calc(100dvh - 12px); overflow:auto; }
#os-takeover .tk-fam-ios .tk-ios-in { padding:20px 20px 18px; }
#os-takeover .tk-fam-ios .tk-ios-title { color:#17181c; font-weight:600; }
#os-takeover .tk-fam-ios .tk-ios-body { color:#292c33; font-size:14px; line-height:1.4; }
#os-takeover .tk-fam-ios .tk-ios-acts { padding:0; gap:0; border-top:1px solid #cfd1d8; }
#os-takeover .tk-fam-ios .tk-ios-btn { border:0; border-radius:0; min-height:48px; background:#f8f8fa; color:#0061c8; font-weight:600; font-size:16px; box-shadow:none; text-shadow:none; padding:10px 14px; }
#os-takeover .tk-fam-ios .tk-ios-btn:hover { background:#e9edf4; }
#os-takeover .tk-fam-ios .tk-ios-btn + .tk-ios-btn { border-left:1px solid #cfd1d8; }
#os-takeover .tk-fam-android { background:#fff; border:1px solid #c1c7d1; border-radius:12px; text-shadow:none; }
#os-takeover .tk-fam-android .tk-ios-title { font-size:18px; font-weight:500; }
#os-takeover .tk-fam-android .tk-ios-body { line-height:1.45; font-size:14px; }
#os-takeover .tk-fam-android .tk-ios-btn { color:#235ab7; font-weight:600; }
#os-takeover .tk-android-head { color:#526075; font-weight:500; }
#os-takeover .tk-banner { border:1px solid #c8cdd6; border-radius:14px; background:#f7f8fb; color:#202632; box-shadow:0 2px 3px rgba(30,40,60,.08),0 12px 24px rgba(30,40,60,.23); }
#os-takeover .tk-banner-txt b { color:#505b6b; opacity:1; font-size:11px; }
#os-takeover .tk-banner-txt span { font-size:13px; line-height:1.3; }
#os-takeover .tk-banner-x { background:#e5e9f0; color:#344054; }
#os-takeover .tk-banner-icon { background:linear-gradient(#6489ff,#3a52d3); color:#fff; }
#os-takeover .tk-ios-btn:focus-visible,
#os-takeover .tk-banner-x:focus-visible,
#os-takeover .tk-btn:focus-visible,
#os-takeover .tk-x:focus-visible { outline:2px solid #124b9d; outline-offset:-3px; }
#os-takeover .tk-skip,
#os-takeover .tk-mute { border:1px solid #b9c1cf; background:#f8faff; color:#23304a; border-radius:8px; box-shadow:0 4px 16px rgba(23,35,59,.2); }
#os-takeover .tk-skip:focus-visible,
#os-takeover .tk-mute:focus-visible { outline:2px solid #124b9d; outline-offset:2px; }
@media (max-width:700px) {
  #os-takeover.tk-phone .tk-ios.tk-small { width:min(274px,calc(100vw - 28px)); }
  #os-takeover.tk-phone .tk-ios.tk-back { filter:none; }
}
@media (pointer:coarse) {
  #os-takeover .tk-x { width:44px; height:44px; min-width:44px; }
  #os-takeover .tk-btn { min-height:44px; }
  #os-takeover .tk-bar { min-height:46px; }
}

/* Client-preview finale: full classic blue, with a centred, stable ending. */
#os-takeover { pointer-events:auto; }
#os-takeover-bsod {
  background:#0078d7;
  padding:64px max(24px,env(safe-area-inset-right)) 64px max(24px,env(safe-area-inset-left));
  font-family: var(--pk-font);
  overscroll-behavior:contain;
}
#os-takeover-bsod .tk-bsod-in {
  position:relative;
  flex:0 1 680px;
  width:100%;
  max-width:680px;
  margin:auto;
  text-align:center;
}
#os-takeover-bsod .tk-bsod-kicker {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 0 16px;
  font-size:11px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.16em;
}
#os-takeover-bsod .tk-bsod-mark {
  width:20px;
  height:20px;
  margin:0;
}
#os-takeover-bsod .tk-bsod-face {
  font-family: var(--pk-font);
  font-size:104px;
  font-weight:200;
  line-height:1.05;
  letter-spacing:.025em;
  margin:0 0 14px;
}
#os-takeover-bsod .tk-bsod-title {
  font-size:clamp(28px,4vw,43px);
  font-weight:500;
  line-height:1.15;
  margin:0 0 18px;
  text-wrap:balance;
}
#os-takeover-bsod .tk-bsod-body {
  max-width:580px;
  font-size:17px;
  line-height:1.55;
  margin:0 auto 24px;
  text-wrap:pretty;
}
#os-takeover-bsod .tk-bsod-progress {
  width:min(360px,100%);
  margin:0 auto 20px;
  text-align:left;
}
#os-takeover-bsod .tk-bsod-progress p {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px;
  font-size:13px;
  line-height:1.3;
}
#os-takeover-bsod .tk-bsod-progress strong {
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
#os-takeover-bsod .tk-bsod-progress-track {
  height:3px;
  background:rgba(255,255,255,.25);
  overflow:hidden;
}
#os-takeover-bsod .tk-bsod-progress-track span {
  display:block;
  width:0;
  height:100%;
  background:white;
  transition:width 220ms ease-out;
}
#os-takeover-bsod .tk-bsod-reveal {
  max-width:52ch;
  margin:0 auto 24px;
  font-size:13px;
  line-height:1.5;
  text-wrap:pretty;
}
#os-takeover-bsod .tk-bsod-hint {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  min-height:0;
  margin:12px auto 0;
  font-size:12px;
}
#os-takeover-bsod .tk-bsod-stop {
  font-size:10px;
  line-height:1.35;
  letter-spacing:.035em;
  bottom:14px;
  opacity:.8;
}
#os-takeover-bsod .tk-bsod-btn { transition:background 130ms ease,transform 130ms ease; }
#os-takeover-bsod .tk-bsod-btn:hover { background:rgba(255,255,255,.12); }
#os-takeover-bsod .tk-bsod-btn.tk-primary { color:#005a9e; }
#os-takeover-bsod .tk-bsod-btn.tk-primary:hover { background:#eef7ff; }
#os-takeover-bsod .tk-bsod-btn:active { transform:translateY(1px); }
@media (max-width:700px) {
  #os-takeover-bsod .tk-bsod-face { font-size:80px; margin-bottom:12px; }
  #os-takeover-bsod .tk-bsod-kicker { font-size:10px; letter-spacing:.12em; margin-bottom:12px; }
  #os-takeover-bsod .tk-bsod-body { font-size:15px; line-height:1.5; margin-bottom:18px; }
  #os-takeover-bsod .tk-bsod-progress { margin-bottom:16px; }
  #os-takeover-bsod .tk-bsod-reveal { font-size:12px; margin-bottom:18px; }
  #os-takeover-bsod .tk-bsod-acts { gap:10px; }
}
@media (max-height:650px) {
  #os-takeover-bsod { padding-top:60px; padding-bottom:60px; }
  #os-takeover-bsod .tk-bsod-face { font-size:52px; margin-bottom:8px; }
  #os-takeover-bsod .tk-bsod-title { font-size:26px; margin-bottom:12px; }
  #os-takeover-bsod .tk-bsod-body { font-size:13px; line-height:1.4; margin-bottom:14px; }
  #os-takeover-bsod .tk-bsod-kicker { margin-bottom:6px; }
  #os-takeover-bsod .tk-bsod-progress { margin-bottom:12px; }
  #os-takeover-bsod .tk-bsod-reveal { font-size:11px; margin-bottom:14px; }
  #os-takeover-bsod .tk-bsod-btn { min-height:44px; font-size:13px; }
  #os-takeover-bsod .tk-bsod-stop { font-size:9px; bottom:8px; }
}
@media (prefers-reduced-motion:reduce) {
  #os-takeover-bsod .tk-bsod-progress-track span,
  #os-takeover-bsod .tk-bsod-btn { transition:none; }
}
@media (max-height:480px) and (min-width:701px) {
  #os-takeover-bsod { padding-top:58px; padding-bottom:58px; }
  #os-takeover-bsod .tk-bsod-in { display:grid; grid-template-columns:90px minmax(0,1fr); column-gap:20px; max-width:730px; }
  #os-takeover-bsod .tk-bsod-in > * { grid-column:2; }
  #os-takeover-bsod .tk-bsod-face { grid-column:1; grid-row:1/7; font-size:82px; margin:0; align-self:center; }
  #os-takeover-bsod .tk-bsod-title { margin-bottom:8px; }
  #os-takeover-bsod .tk-bsod-body { margin-bottom:10px; }
  #os-takeover-bsod .tk-bsod-reveal { margin-bottom:10px; }
  #os-takeover-bsod .tk-bsod-hint { grid-column:2; margin-top:8px; }
}