.gf-access-demo { --access-green: #279b75; --access-red: #d64c66; --access-color: var(--access-green); padding: 24px; border: 1px solid #e5e9f2; border-radius: 24px; background: linear-gradient(145deg, #fbfcff, #f0f5f9); color: #222c49; box-shadow: 0 14px 45px #25364e0b; }
.gf-access-demo[data-result="blocked"] { --access-color: var(--access-red); }
.gf-access-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.gf-access-eyebrow { display: block; font-size: 9px; color: #7d899e; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 7px; }.gf-access-heading h3 { font-size: 19px; letter-spacing: -.03em; line-height: 1.3; margin: 0; }.gf-access-demo-badge { background: #e9eef6; color: #7e8b9e; border-radius: 5px; font-size: 8px; padding: 5px 6px; letter-spacing: .08em; }
.gf-access-scenarios { display: flex; gap: 6px; margin: 18px 0 0; }.gf-access-scenarios button { border: 1px solid #dfe5ef; border-radius: 20px; background: #fff; color: #8490a4; padding: 6px 11px; font-size: 10px; cursor: pointer; }.gf-access-scenarios button[aria-pressed="true"] { color: #fff; background: #222956; border-color: #222956; }.gf-access-demo button:focus-visible { outline: 3px solid #9f9aca; outline-offset: 3px; }
.gf-access-scene { position: relative; height: 360px; margin-top: 6px; }.gf-access-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.gf-access-wires path { fill: none; stroke: #d5dee9; stroke-width: 2; stroke-dasharray: 4 6; }.gf-access-wires path.gf-access-wire-one,.gf-access-wires path.gf-access-wire-two { stroke: var(--access-color); opacity: 0; }.gf-access-dot-one,.gf-access-dot-two { fill: var(--access-color); opacity: 0; filter: drop-shadow(0 0 5px var(--access-color)); }
.gf-access-reader { position: absolute; left: 6%; top: 24px; width: 29%; padding: 12px 8px 10px; border-radius: 17px; background: linear-gradient(145deg, #293244, #101825); color: #fff; text-align: center; box-shadow: 0 10px 18px #1d283521; }.gf-access-device-camera { display: block; width: 6px; height: 6px; margin: 0 auto 8px; border: 2px solid #4f5a71; border-radius: 50%; background: #090e17; }.gf-access-reader>strong { font-size: 9px; display: block; }.gf-access-scan { position: relative; width: 60px; height: 65px; margin: 9px auto 6px; border: 1px solid #45526a; border-radius: 9px; background: #1e2b3d; overflow: hidden; display: grid; place-items: center; }.gf-access-scan i { font-size: 41px; color: #9ed9d2; }.gf-access-scan>span { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #7cedc0; box-shadow: 0 0 10px #7cedc0; animation: gf-access-scan 1.6s ease-in-out infinite; }.gf-access-reader>small { display: block; font-size: 7px; color: #8c9db4; }.gf-access-device-light { display: block; width: 4px; height: 4px; border-radius: 50%; background: #69d5a7; margin: 8px auto 0; box-shadow: 0 0 6px #69d5a7; }
.gf-access-workspace { position: absolute; z-index: 2; left: 13%; top: 183px; width: 65%; background: #fff; border: 1px solid #dce3ee; border-radius: 11px; overflow: hidden; box-shadow: 0 10px 24px #25364e10; }.gf-access-window { display: flex; gap: 3px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #edf0f6; background: #fafbfe; }.gf-access-window>span { width: 4px; height: 4px; border-radius: 50%; background: #c9d1df; }.gf-access-window>strong { font-size: 8px; color: #5e6c85; margin-left: auto; }.gf-access-member { padding: 11px 11px 5px; display: flex; align-items: center; gap: 8px; }.gf-access-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #edf0fb; color: #7079a2; font-size: 17px; }.gf-access-member strong { display: block; font-size: 9px; }.gf-access-member small { display: block; font-size: 6px; color: #96a0b2; margin-top: 2px; }.gf-access-member>i { margin-left: auto; font-size: 16px; color: #b5bfce; }.gf-access-record { display: flex; justify-content: space-between; gap: 6px; padding: 6px 12px; font-size: 7px; }.gf-access-record>span { color: #93a0b3; }.gf-access-record strong { font-size: 7px; font-weight: 600; }.gf-access-workspace-foot { font-size: 6px; color: #9da7b8; padding: 8px 11px; background: #fafbfd; margin-top: 3px; }
.gf-access-gate { position: absolute; top: 31px; right: 3%; width: 31%; text-align: center; }.gf-access-gate-label { display: block; font-size: 8px; color: #7d8a9e; margin-bottom: 8px; }.gf-access-gate-icon { display: grid; place-items: center; width: 33px; height: 33px; background: #e9edf5; border-radius: 50%; margin: 0 auto 10px; color: #98a3b7; font-size: 16px; }.gf-access-gate-machine { position: relative; height: 59px; width: 30px; margin-left: 17%; background: linear-gradient(90deg,#b8c3d4,#e3e8f0 50%,#aebacf); border-radius: 8px 8px 3px 3px; box-shadow: 0 8px 12px #25364e12; }.gf-access-gate-led { position: absolute; top: 8px; left: 10px; width: 10px; height: 4px; border-radius: 3px; background: #bdc6d2; }.gf-access-gate-arm { position: absolute; top: 20px; left: 15px; width: 78px; height: 9px; border-radius: 4px; background: repeating-linear-gradient(110deg,#fbfbfd 0,#fbfbfd 12px,#db6174 12px,#db6174 25px); transform-origin: 4px center; transition: transform .7s ease; box-shadow: 0 2px 3px #252e4415; }.gf-access-gate>strong { display: block; font-size: 8px; color: #93a0b3; margin-top: 13px; }
.gf-access-link-label { position: absolute; font-size: 6px; background: #f5f8fc; color: #a3adbe; padding: 3px; }.gf-access-link-label-one { left: 36%; top: 96px; }.gf-access-link-label-two { right: 3%; top: 266px; }
.gf-access-progress { display: flex; gap: 5px; margin: 0 0 14px; }.gf-access-progress>span { flex: 1; text-align: center; border-top: 2px solid #dfe5ee; padding-top: 7px; font-size: 8px; color: #98a2b4; }.gf-access-progress>span.is-current { border-color: var(--access-color); color: var(--access-color); font-weight: 700; }.gf-access-progress>span.is-done { border-color: #a9cdbf; }
.gf-access-outcome { display: flex; align-items: center; gap: 10px; padding: 13px; min-height: 72px; background: #fff; border: 1px solid #e5eaf1; border-radius: 12px; }.gf-access-outcome-icon { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; background: #f0f3f9; color: #8593ac; border-radius: 50%; }.gf-access-outcome strong { display: block; font-size: 10px; }.gf-access-outcome p { font-size: 8px; color: #919bad; line-height: 1.5; margin: 4px 0 0; }.gf-access-outcome button { margin-left: auto; flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e3e7f0; border-radius: 50%; background: #fff; color: #7f89a0; cursor: pointer; }.gf-access-disclaimer { font-size: 7px; text-align: center; color: #a0a8b7; margin: 13px 0 0; }
.gf-access-demo[data-phase="1"] .gf-access-wire-one,.gf-access-demo[data-phase="1"] .gf-access-dot-one,.gf-access-demo[data-phase="2"] .gf-access-wire-one { opacity: 1; }.gf-access-demo[data-phase="3"] .gf-access-wire-two,.gf-access-demo[data-phase="3"] .gf-access-dot-two { opacity: 1; }
.gf-access-demo[data-phase="2"] .gf-access-member>i,.gf-access-demo[data-phase="3"] .gf-access-member>i,.gf-access-demo[data-phase="3"] .gf-access-gate>strong { color: var(--access-color); }.gf-access-demo[data-phase="3"] .gf-access-gate-icon,.gf-access-demo[data-phase="3"] .gf-access-outcome-icon { background: color-mix(in srgb,var(--access-color) 10%,white); color: var(--access-color); }.gf-access-demo[data-phase="3"] .gf-access-gate-led { background: var(--access-color); box-shadow: 0 0 6px var(--access-color); }.gf-access-demo[data-phase="3"][data-result="allowed"] .gf-access-gate-arm { transform: rotate(-78deg); }
.gf-access-demo[data-paused="true"] * { animation-play-state: paused !important; }.gf-access-demo[data-paused="true"] .gf-access-dot-one,.gf-access-demo[data-paused="true"] .gf-access-dot-two { display: none; }
@keyframes gf-access-scan { 0%,100% { transform: translateY(5px); } 50% { transform: translateY(55px); } }
@media (max-width: 991px) { .gf-access-demo { padding: 16px; }.gf-access-heading h3 { font-size: 16px; }.gf-access-scene { height: 330px; }.gf-access-workspace { top: 170px; width: 73%; left: 6%; }.gf-access-gate-arm { width: 55px; }.gf-access-link-label-two { top: 251px; } }
@media (prefers-reduced-motion: reduce) { .gf-access-demo * { animation: none !important; transition: none !important; }.gf-access-demo .gf-access-dot-one,.gf-access-demo .gf-access-dot-two { display: none; } }