/* Boot sequence overlay + PIN entry (ADR-019). Co-located with boot.js. Hidden by default; the inline head script adds .hmb-booting to on the first visit of a session to reveal it, and boot.js tears it down when done. */ .hmb-boot { display: none; position: fixed; inset: 0; z-index: 10000; background: var(--bg); padding: clamp(20px, 6vw, 80px); overflow: hidden; cursor: default; &::before, &::after { content: ""; position: fixed; inset: 0; pointer-events: none; } &::before { z-index: 50; background: repeating-linear-gradient( to bottom, var(--black-alpha-0) 0px, var(--black-alpha-0) 2px, var(--black-alpha-18) 3px, var(--black-alpha-18) 4px ); mix-blend-mode: multiply; } &::after { z-index: 2; background: radial-gradient(ellipse at center, var(--black-alpha-0) 55%, var(--black-alpha-55) 100%); } &.is-leaving { animation: lk-boot-out 0.45s ease forwards; } } .hmb-booting { .hmb-boot { display: block; } body { overflow: hidden; } } .hmb-boot-log { position: relative; z-index: 3; margin: 0; font-family: var(--font-mono); font-size: clamp(0.9rem, 2.4vw, 1.15rem); line-height: 1.6; color: var(--text); white-space: pre-wrap; text-shadow: 0 0 6px var(--amber-alpha-45); .ok { color: var(--green); } .err { color: var(--danger); } .cursor { display: inline-block; animation: lk-blink 1.1s steps(1) infinite; width: 10px; margin-right: -10px; } } .hmb-boot-auth { display: inline-flex; align-items: baseline; min-width: min(100%, 36rem); margin: 0; color: var(--text); } .hmb-boot-auth-label { flex: 0 0 auto; } .hmb-boot-auth-mask { letter-spacing: 0; /* No phantom column while empty (it would shift the mask on the first keystroke), and no ligatures (runs of dots would fuse into an ellipsis). */ font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0; } /* Separators and unfilled placeholder dots stay a dim light gray. */ .hmb-boot-auth-dim { color: #ccc; } /* The entered PIN is amber while incomplete, green once all seven characters are in (Enter can then confirm it). */ .hmb-boot-auth-val { color: var(--amber); } .hmb-boot-auth-val.is-complete { color: var(--green); } .hmb-boot-auth-field { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; } .hmb-boot-auth-status { color: var(--muted); } @keyframes lk-boot-out { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }