:root {
  --wqxt-orientation-bg: #08090d;
  --wqxt-orientation-text: #f2eee7;
  --wqxt-orientation-soft: rgba(242, 238, 231, 0.58);
  --wqxt-orientation-gold: #ffd479;
  --wqxt-orientation-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --wqxt-orientation-sans: "PingFang SC", "Microsoft YaHei", sans-serif;
  --wqxt-orientation-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

wqxt-orientation-guard {
  position: fixed;
  z-index: 10000;
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  display: none;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 212, 121, 0.055), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 42%),
    var(--wqxt-orientation-bg);
  color: var(--wqxt-orientation-text);
  text-align: center;
  isolation: isolate;
  pointer-events: auto;
  overscroll-behavior: none;
}

wqxt-orientation-guard[active] { display: grid; }
wqxt-orientation-guard[inline] {
  position: absolute;
  z-index: 1;
  width: 100%;
  min-height: 100%;
}

.wqxt-orientation-guard__content {
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 0;
}

.wqxt-orientation-guard__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
  fill: none;
  stroke: var(--wqxt-orientation-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wqxt-orientation-guard__eyebrow {
  color: rgba(255, 212, 121, 0.76);
  font: 600 9px/1.2 var(--wqxt-orientation-mono);
  letter-spacing: .28em;
}

.wqxt-orientation-guard__title {
  margin: 28px 0 0;
  color: var(--wqxt-orientation-text);
  font: 600 20px/1.2 var(--wqxt-orientation-serif);
  letter-spacing: .12em;
}

.wqxt-orientation-guard__description {
  margin: 24px 0 0;
  color: var(--wqxt-orientation-soft);
  font: 400 11px/1.5 var(--wqxt-orientation-sans);
}

wqxt-orientation-guard:focus { outline: none; }

/* Current pages may still carry retired page-local rotate markup while migrating.
   The shared guard is the sole visible orientation layer. */
html[data-wqxt-orientation-guard] body > .orientation-guard,
html[data-wqxt-orientation-guard] body > .orientation,
html[data-wqxt-orientation-guard] body > .rotate,
html[data-wqxt-orientation-guard] .entry-rotate,
html[data-wqxt-orientation-guard] .rotate-overlay,
html[data-wqxt-orientation-guard] .rotate-gate,
html[data-wqxt-orientation-guard] .orientation-tip,
html[data-wqxt-orientation-guard] .portrait-tip,
html[data-wqxt-orientation-guard] #orientation,
html[data-wqxt-orientation-guard] #orientation-guard,
html[data-wqxt-orientation-guard] #rotate {
  display: none !important;
}

html.wqxt-orientation-blocked,
html.wqxt-orientation-blocked body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-height: 560px) {
  .wqxt-orientation-guard__icon { width: 56px; height: 56px; margin-bottom: 20px; }
  .wqxt-orientation-guard__title { margin-top: 20px; font-size: 18px; }
  .wqxt-orientation-guard__description { margin-top: 16px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  wqxt-orientation-guard { scroll-behavior: auto; }
}