:root {
  color-scheme: dark;
  --black: #08070a;
  --gold: #c7aa6c;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-width: 250px;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 43% 51% at 49% 44%, rgba(68, 54, 53, .33) 0%, rgba(19, 15, 20, .16) 55%, transparent 100%),
    radial-gradient(ellipse 37% 52% at 84% 14%, rgba(120, 86, 59, .09), transparent 80%),
    radial-gradient(ellipse 32% 43% at 9% 77%, rgba(94, 58, 69, .09), transparent 80%),
    var(--black);
  color: #eee7dc;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(ellipse 72% 78% at 50% 44%, transparent 38%, rgba(0, 0, 0, .46) 100%);
}
.frame {
  position: fixed;
  inset: clamp(12px, 2vw, 28px);
  border: 1px solid rgba(199, 170, 108, .13);
  pointer-events: none;
  z-index: 5;
}
.frame::before, .frame::after {
  content: "";
  position: absolute;
  width: 29px;
  height: 29px;
  border-color: rgba(199, 170, 108, .38);
  border-style: solid;
}
.frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.frame::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(17px, 3.2vh, 37px);
  padding: 42px 36px 50px;
  isolation: isolate;
}
.orb-wrap {
  width: min(66vw, 66svh, 700px);
  min-width: 180px;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
}
.orb-halo {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 143, 90, .22), rgba(141, 100, 65, .1) 36%, transparent 72%);
  filter: blur(45px);
  transform: scale(1.28);
  animation: breathe 8s ease-in-out infinite;
}
.orb {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, .8));
}
.orb picture, .orb img { display: block; width: 100%; height: 100%; }
.orb img { object-fit: contain; user-select: none; }
.orb canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.canvas-ready .orb picture { opacity: 0; }
.canvas-ready .orb canvas { opacity: 1; }
.light-play {
  position: absolute;
  z-index: 2;
  width: 84%;
  height: 84%;
  left: 8%;
  top: 8%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 25% 28%, rgba(255, 242, 213, .2), transparent 27%),
    radial-gradient(circle at 76% 42%, rgba(255, 235, 175, .12), transparent 22%);
  animation: glint 11s ease-in-out infinite alternate;
}
.password-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 9px;
  width: min(370px, calc(100vw - 96px));
  flex: none;
}
.password {
  width: 100%;
  height: 54px;
  padding: 0 16px 0 24px;
  border: 1px solid rgba(199, 170, 108, .44);
  border-radius: 1px;
  background: rgba(10, 9, 12, .36);
  box-shadow: inset 0 1px 0 rgba(255, 232, 193, .08), 0 10px 35px rgba(0, 0, 0, .22);
  color: #f4e9d1;
  caret-color: var(--gold);
  outline: none;
  text-align: center;
  font: 400 21px/1 Arial, sans-serif;
  letter-spacing: .42em;
  transition: border-color .25s, box-shadow .25s;
}
.password:focus-visible, .password:focus {
  border-color: rgba(224, 193, 128, .87);
  box-shadow: inset 0 1px 0 rgba(255, 232, 193, .1), 0 0 0 3px rgba(199, 170, 108, .11), 0 10px 36px rgba(0, 0, 0, .3);
}
.lock-button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(199, 170, 108, .65);
  border-radius: 1px;
  background: linear-gradient(145deg, rgba(199, 170, 108, .16), rgba(33, 26, 24, .65));
  box-shadow: inset 0 1px 0 rgba(255, 232, 193, .14), 0 10px 35px rgba(0, 0, 0, .22);
  color: #e2c993;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.lock-button svg { display: block; width: 17px; height: 23px; }
.lock-button:hover {
  border-color: #e2c993;
  background: linear-gradient(145deg, rgba(199, 170, 108, .27), rgba(33, 26, 24, .77));
  transform: translateY(-1px);
}
.lock-button:active { transform: translateY(1px); }
.lock-button:focus-visible {
  outline: 2px solid #e2c993;
  outline-offset: 4px;
}
.denied-toast {
  position: fixed;
  left: 50%;
  bottom: clamp(42px, 8vh, 88px);
  z-index: 8;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(211, 139, 128, .66);
  border-radius: 50%;
  background: rgba(18, 12, 16, .94);
  box-shadow: 0 0 0 8px rgba(211, 139, 128, .06), 0 15px 42px rgba(0, 0, 0, .6);
  color: #db9389;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(.82);
}
.denied-toast svg { display: block; width: 36px; height: 36px; }
.denied-toast.is-visible {
  visibility: visible;
  animation: denied-flash 1.8s ease-out both;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes breathe { 50% { opacity: .54; transform: scale(1.16); } }
@keyframes glint { to { opacity: .58; transform: scale(1.04); } }
@keyframes denied-flash {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.82); }
  13%, 68% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  82% { opacity: .9; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(.95); }
}

@media (max-width: 650px) {
  .stage { padding: 40px 24px; gap: 19px; }
  .orb-wrap { width: min(87vw, 65svh, 520px); }
  .password-entry { width: min(318px, calc(100vw - 82px)); grid-template-columns: minmax(0, 1fr) 52px; }
  .password, .lock-button { height: 52px; }
  .lock-button { width: 52px; }
  .frame { inset: 11px; }
}
@media (max-height: 590px) {
  .orb-wrap { width: min(51svh, 65vw, 500px); }
  .stage { gap: 14px; padding-block: 20px; }
  .password, .lock-button { height: 48px; }
  .lock-button { width: 48px; }
  .password-entry { grid-template-columns: minmax(0, 1fr) 48px; }
  .denied-toast { bottom: 24px; width: 60px; height: 60px; }
  .denied-toast svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-halo, .light-play { animation: none; }
  .denied-toast.is-visible { animation: none; opacity: 1; transform: translate(-50%, 0); }
}