:root {
  --osi-paper: #f6f5f1;
  --osi-ink: #151515;
  --osi-line: rgba(21, 21, 21, .2);
  --osi-muted: rgba(21, 21, 21, .52);
}

html.ourobor-intro-active,
html.ourobor-intro-active body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.osi,
.osi * {
  box-sizing: border-box;
}

.osi {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  background: var(--osi-paper);
  color: var(--osi-ink);
  opacity: 1;
  visibility: visible;
  transition: opacity .42s ease, visibility .42s step-end;
}

.osi.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.osi-enter {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  min-height: 100%;
  padding: clamp(18px, 2.25vw, 38px);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.osi-enter:disabled {
  opacity: 1;
}

.osi-topline,
.osi-bottomline {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font: 500 10px/1.2 "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.osi-topline { color: var(--osi-muted); }
.osi-bottomline { align-items: end; }

.osi-center {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 180px;
}

.osi-logo-mark {
  position: relative;
  display: block;
  width: clamp(140px, 18vw, 310px);
  aspect-ratio: 1386 / 482;
  overflow: hidden;
}

.osi-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .18;
  filter: grayscale(1) contrast(.82);
  mix-blend-mode: multiply;
  animation: osi-logo-pulse 2.8s ease-in-out infinite;
}

.osi-logo-mark span {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(106deg, transparent 32%, rgba(255,255,255,.7) 50%, transparent 68%);
  -webkit-mask: url("/image/stor3034-3834-4538-a532-643736633363__8e2a1a7703e3731c74373c18f46500b2.png") center / contain no-repeat;
  mask: url("/image/stor3034-3834-4538-a532-643736633363__8e2a1a7703e3731c74373c18f46500b2.png") center / contain no-repeat;
  transform: translateX(-145%);
  opacity: .2;
  animation: osi-logo-sheen 2.8s ease-in-out infinite;
}

.osi-scan {
  display: block;
  width: clamp(72px, 9vw, 160px);
  height: 1px;
  margin-top: clamp(22px, 3vw, 46px);
  background: var(--osi-ink);
  transform-origin: center;
  animation: osi-scan 1.2s ease-in-out infinite;
}

.osi-status::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 9px 1px 0;
  border-radius: 50%;
  background: currentColor;
  content: "";
  animation: osi-status 1s steps(2, end) infinite;
}

.osi-entry-signal {
  display: none;
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: clamp(22px, 3vw, 46px);
}

.osi-entry-prompt {
  display: none;
  margin-top: clamp(22px, 3vw, 46px);
  color: var(--osi-ink);
  font: 500 9px/1.2 "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: .14em;
  text-align: center;
}

.osi-entry-signal i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--osi-ink);
  border-radius: 50%;
  animation: osi-entry-pulse 1.4s ease-out infinite;
}

.osi-entry-signal i:last-child {
  animation-delay: .7s;
}

.osi.is-ready .osi-enter {
  cursor: pointer;
}

.osi.is-ready .osi-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.osi.is-ready .osi-status::before {
  animation: none;
}

.osi.is-ready .osi-entry-signal {
  display: block;
}

.osi.is-ready .osi-entry-prompt {
  display: block;
}

.osi.is-ready .osi-scan {
  display: none;
}

.osi-enter:focus-visible {
  outline: 2px solid var(--osi-ink);
  outline-offset: -8px;
}

@keyframes osi-scan {
  0%, 100% { transform: scaleX(.22); opacity: .25; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes osi-logo-pulse {
  0%, 100% { opacity: .13; filter: grayscale(1) contrast(.74); transform: scale(.985); }
  50% { opacity: .28; filter: grayscale(1) contrast(1); transform: scale(1); }
}

@keyframes osi-logo-sheen {
  0%, 20% { transform: translateX(-145%); opacity: 0; }
  45% { opacity: .42; }
  70%, 100% { transform: translateX(145%); opacity: 0; }
}

@keyframes osi-status {
  50% { opacity: .3; }
}

@keyframes osi-entry-pulse {
  0% { transform: scale(.22); opacity: 1; }
  75%, 100% { transform: scale(1); opacity: 0; }
}

@media (max-width: 640px) {
  .osi-enter { padding: 20px; }
  .osi-topline,
  .osi-bottomline { font-size: 8px; letter-spacing: .12em; }
  .osi-topline span:last-child { display: none; }
  .osi-logo-mark { width: clamp(118px, 38vw, 180px); }
  .osi-bottomline { align-items: flex-start; }
  .osi-entry-prompt { font-size: 8px; }
}

@media (min-width: 641px) {
  .osi-entry-signal,
  .osi-entry-prompt { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .osi,
  .osi-logo-mark img,
  .osi-logo-mark span,
  .osi-scan,
  .osi-status::before,
  .osi-entry-signal i { animation: none; transition: none; }
}