/* The lock (desktop-lock.mjs), as imperfect.computer draws it: Kinso's grey ground, the bare bloom, and under it the square
   password field, its 2px near-black outline solid once it has the keyboard, and the hint. CSS pixels, over the whole page.
   The bloom spawns big at the screen's centre and stays there; once it has opened the field and hint fade in under it. */
.desktop-lock { position: fixed; inset: 0; z-index: 20; overflow: hidden; color: #111111; color-scheme: light;
  background: radial-gradient(62% 78% at 6% 100%, rgba(120,120,120,.34), rgba(120,120,120,.12) 45%, rgba(120,120,120,0) 72%),
    radial-gradient(48% 62% at 50% 44%, #F7F7F7, #E8E8E8 62%, #D8D8D8) #E8E8E8;
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
.desktop-lock[hidden] { display: none; }
.desktop-lock[data-state="leaving"] { pointer-events: none; }
/* The bloom's centre 49px over the screen's, the field 22px under it, as on imperfect.computer (its mark at 45vh). */
.desktop-lock-user { --bloom: min(45vh, 80vw); position: absolute; left: 50%; top: calc(50% - 49px - var(--bloom) / 2); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.desktop-lock-bloom { position: relative; width: var(--bloom); height: var(--bloom); }
.desktop-lock-bloom .bloom-wall { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.desktop-lock-form { display: flex; flex-direction: column; align-items: center; margin: 22px 0 0; transition: opacity .7s ease; }
.desktop-lock[data-bloom="spawning"] .desktop-lock-form { opacity: 0; }
.desktop-lock-field { width: 180px; height: 28px; border-radius: 0; background: #ffffff66; box-shadow: inset 0 0 0 2px #11111199; }
.desktop-lock-field:focus-within { box-shadow: inset 0 0 0 2px #111111; }
.desktop-lock-field input { display: block; width: 100%; height: 100%; margin: 0; padding: 0 14px; border: 0; border-radius: inherit; outline: 0; background: transparent;
  color: #111111; caret-color: #111111; text-align: center; font: 13px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: 1px; }
.desktop-lock-hint { margin: 10px 0 0; font-size: 12px; color: #6e6e73; }
.desktop-lock-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .desktop-lock-form { transition: none; } }