/* The lock screen in front of the OS demo: the OS's own tokens and wallpaper. */
:root {
  color-scheme: light;
  --cream: #FFFCF5; --ink: #0E1714; --green: #0F6E56; --mint: #3FD0A4; --muted: #5F6B65;
  --border: #D9D3C5; --red: #C9443A; --sky: #EEF3F1;
  --surface: rgba(255, 255, 255, .72);
  --snap: 120ms cubic-bezier(.2, 0, 0, 1);
  --glide: 460ms cubic-bezier(.22, .72, .12, 1);
  --f-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-head: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; color: var(--ink); background: var(--cream);
  font: 14px/1.5 var(--f-body); -webkit-font-smoothing: antialiased;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- wallpaper: the OS's clouds ---- */
.wall { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, var(--cream) 70%); }
.cloud { position: absolute; max-width: none; user-select: none; opacity: .95; }
.cloud.a { left: -10%; top: 6%; width: 48%; animation: drift 80s linear infinite alternate; }
.cloud.b { right: -12%; top: 22%; width: 54%; animation: drift 95s linear infinite alternate-reverse; }
@keyframes drift { to { translate: 90px 0; } }

/* ---- power-on: the mark on black, then the lock screen ---- */
.power {
  position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 28px;
  background: #050807; pointer-events: none;
  animation: off .55s ease-in 1.75s forwards;
}
.power .mark { width: 64px; height: 64px; opacity: 0; animation: mark 1s cubic-bezier(.16, 1, .3, 1) .15s forwards; }
.power .bar { width: 120px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.power .bar i { display: block; height: 100%; width: 100%; background: var(--mint); transform: scaleX(0); transform-origin: left; animation: fill 1.3s cubic-bezier(.4, 0, .2, 1) .35s forwards; }
@keyframes mark { from { opacity: 0; scale: .92; filter: blur(4px); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes off { to { opacity: 0; visibility: hidden; } }
.skip .power { animation: off .25s ease-in forwards; }
.refused .power { display: none; }

/* ---- the lock ---- */
.lock {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7vh; padding: 24px 16px 64px;
  animation: rise .9s cubic-bezier(.16, 1, .3, 1) 1.9s both;
}
.skip .lock { animation-delay: .1s; }
.refused .lock { animation-delay: 0s; animation-duration: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(1.01); } }

.time { display: flex; flex-direction: column; align-items: center; min-height: 128px; }
.time b { font: 200 clamp(64px, 11vw, 112px)/1 var(--f-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.time span { margin-top: 10px; color: var(--muted); font: 500 16px/1 var(--f-head); }

form { width: min(300px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avatar {
  position: relative; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(14, 23, 20, .04), 0 12px 30px -14px rgba(14, 23, 20, .35);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background var(--glide), border-color var(--glide);
}
.avatar .who { width: 34px; height: 34px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; transition: opacity var(--snap); }
.avatar span { position: absolute; font: 600 24px/1 var(--f-head); letter-spacing: .02em; color: #fff; opacity: 0; transition: opacity var(--snap); }
.avatar.named { background: var(--green); border-color: var(--green); }
.avatar.named .who { opacity: 0; }
.avatar.named span { opacity: 1; }

input {
  width: 100%; height: 40px; padding: 0 16px; font: 500 14px/1 var(--f-body); color: var(--ink); text-align: center;
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .9); border-radius: 99px; outline: none;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(14, 23, 20, .04), 0 8px 24px -16px rgba(14, 23, 20, .3);
  transition: border-color var(--snap), box-shadow var(--snap);
}
input::placeholder { color: var(--muted); font-weight: 400; }
input:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 110, 86, .16); }
input[aria-invalid="true"] { border-color: var(--red); }
/* The browser's autofill paints the field sky blue; keep the glass white. */
input:-webkit-autofill, input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  box-shadow: 0 0 0 40px #FDFDFB inset, 0 8px 24px -16px rgba(14, 23, 20, .3);
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:-webkit-autofill:focus { box-shadow: 0 0 0 40px #FDFDFB inset, 0 0 0 3px rgba(15, 110, 86, .16); }
#code { letter-spacing: .12em; padding: 0 44px; }
#code::placeholder { letter-spacing: 0; }
.code { position: relative; width: 100%; }
.code button {
  position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: var(--green); color: #fff;
  transition: background var(--snap), translate var(--snap);
}
.code button:hover { background: #0c5c48; translate: 1px 0; }
.code button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.code button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.said { margin: 2px 0 0; color: var(--red); font-size: 13px; }
.refused form { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

/* ---- fine print: a few words; the detail shows on hover or focus ---- */
.fine {
  position: fixed; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px;
  padding: 0 16px; color: var(--muted); font-size: 12px;
  animation: rise .9s cubic-bezier(.16, 1, .3, 1) 2.1s both;
}
.skip .fine { animation-delay: .2s; }
.refused .fine { animation-delay: 0s; animation-duration: .5s; }
.tip { position: relative; cursor: default; outline: none; border-radius: 4px; transition: color var(--snap); }
.tip:hover, .tip:focus-within { color: var(--ink); }
.tip:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.pop {
  position: absolute; left: 50%; bottom: calc(100% + 10px); width: 240px; padding: 10px 12px; border-radius: 10px;
  color: var(--ink); font-size: 12.5px; line-height: 1.45; text-align: left;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 2px 0 rgba(14, 23, 20, .03), 0 18px 40px -18px rgba(14, 23, 20, .4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
  transition: opacity var(--snap), transform var(--snap), visibility 0s linear 120ms;
}
.tip:hover .pop, .tip:focus-within .pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.tip:first-child .pop { left: 0; transform: translate(0, 4px); }
.tip:first-child:hover .pop, .tip:first-child:focus-within .pop { transform: none; }
.tip:last-child .pop { left: auto; right: 0; transform: translate(0, 4px); }
.tip:last-child:hover .pop, .tip:last-child:focus-within .pop { transform: none; }
.pop a { color: var(--green); font-weight: 500; }
.pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* keeps the hover on the way up to a link */

@media (max-height: 560px) { .lock { gap: 4vh; } .time { min-height: 100px; } }
@media (prefers-reduced-motion: reduce) {
  .power { display: none; }
  .cloud, .lock, .fine, .refused form { animation: none; }
}