.demo{background:radial-gradient(60em 46em at 50% 46%,rgba(54,173,248,.13),transparent 62%),linear-gradient(180deg,var(--night),var(--night-2));padding:112px 24px 72px;overflow:hidden}.demo__inner{max-width:1180px;margin:0 auto;display:grid;gap:28px 32px;grid-template-columns:minmax(0,1fr);justify-items:center}.demo__copy{display:contents}.demo__copy>*{width:100%;max-width:30rem;order:3}.demo__copy>.demo__title,.demo__copy>.demo__lead{order:0;margin-top:0}.demo__stage{order:1;display:flex;flex-direction:column;align-items:center;gap:20px}.demo__props{order:2;display:flex;flex-direction:column;align-items:center;gap:32px}@media (min-width: 1024px){.demo__inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:48px 32px}.demo__copy{display:block;justify-self:start;max-width:30rem;order:0}.demo__copy>.demo__lead{margin-top:20px}.demo__props{align-items:flex-start;justify-self:end;gap:44px}}.demo__title{font-size:clamp(2.6rem,6vw,4.25rem);font-weight:700;line-height:1;letter-spacing:-.03em}.demo__lead{margin-top:20px;font-size:1.0625rem;line-height:1.6;color:var(--muted)}.demo__methods{margin-top:36px;display:grid;gap:4px}.demo__methods li{display:flex;gap:16px;align-items:flex-start;padding:12px 14px;margin-left:-14px;border-radius:12px;transition:background-color .3s ease}.demo__methods .mi{font-size:24px;margin-top:2px;color:var(--muted);transition:color .3s ease}.demo__methods strong{font-weight:600}.demo__methods p{margin-top:2px;font-size:.9rem;line-height:1.5;color:var(--muted)}.demo__methods li.is-used{background:#3ddc9714}.demo__methods li.is-used .mi{color:var(--open)}.demo__log{margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}.demo__log h2{font-size:1rem;font-weight:600}.demo__log-note{margin-top:4px;font-size:.9rem;color:var(--muted)}.demo__log ol{margin-top:16px;min-height:9.5rem;font-size:.9rem}.demo__log li{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}.demo__log time{color:var(--muted);font-variant-numeric:tabular-nums}.demo__log li[data-kind=denied] span{color:var(--deny)}.demo__log-empty{color:var(--muted);border-bottom:0!important}.demo__spare{display:flex;align-items:center;gap:8px;max-width:17rem;font-size:.85rem;line-height:1.45;color:var(--muted)}.demo__spare .mi{font-size:20px}.demo__device{display:flex;flex-direction:column;align-items:stretch;gap:16px}.demo__status{padding:9px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;text-align:center;font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums;transition:color .25s ease,border-color .25s ease}.demo__status[data-tone=open]{color:var(--open);border-color:#3ddc9766}.demo__status[data-tone=deny]{color:var(--deny);border-color:#ff6b6b66}.demo__status[data-tone=busy]{color:var(--signal);border-color:#36adf866}.lock{--led: rgba(255, 255, 255, .28);position:relative;width:16.5em;height:66em;font-size:clamp(5.5px,calc((100vh - 300px) / 66),9px)}.lock__plate{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2.8em;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),linear-gradient(90deg,#6f7378,#c9ccd0 14%,#a9adb1 46%,#cfd2d5 86%,#74787d);box-shadow:0 4em 8em #0009,0 0 0 1px #ffffff24 inset}.lock__plate:after{content:"";position:absolute;right:1.3em;bottom:6em;width:.45em;height:.45em;border-radius:50%;background:#4a4d51;box-shadow:0 1.1em #4a4d51,0 2.2em #4a4d51}.lock__glass{position:absolute;inset:.3em .3em auto;height:28.4em;border-radius:2.5em 2.5em .2em .2em;background:linear-gradient(150deg,#1d2025,#07080b 34%,#050608);box-shadow:0 0 0 1px #ffffff0d inset}.lock__sensor{position:absolute;top:2em;left:50%;width:5em;height:5em;margin-left:-2.5em;border-radius:50%;display:grid;place-items:center;color:#ffffff38;background:radial-gradient(circle,#08090c 60%,transparent 62%),conic-gradient(var(--open) calc(var(--scan, 0) * 1turn),#c3c6ca 0);box-shadow:0 0 0 1px #0009;touch-action:none;cursor:pointer}.lock__sensor .mi{font-size:2.6em}.lock__led{position:absolute;top:8.5em;left:50%;width:5em;height:.28em;margin-left:-2.5em;border-radius:1em;background:var(--led);box-shadow:0 0 1.4em .1em var(--led);transition:background-color .25s ease,box-shadow .25s ease}.lock__keys{position:absolute;top:10.9em;left:50%;transform:translate(-50%);display:grid;grid-template-columns:repeat(3,3.7em);gap:.5em .75em}.lock__key{width:3.7em;height:3.7em;border-radius:50%;display:grid;place-items:center;color:#f4f7fa;text-shadow:0 0 .5em rgba(255,255,255,.55);cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;line-height:1}.lock__key span{font-size:2.1em;pointer-events:none}.lock__key:hover{background:#ffffff14}.lock__key.is-pressed{background:#ffffff4d;box-shadow:0 0 1.6em #ffffff80;transition-duration:0s}.lock__card{position:absolute;top:10.75em;left:0;right:0;text-align:center;font-size:.72em;line-height:1;letter-spacing:.1em;color:#fff9;pointer-events:none}.lock__handle{position:absolute;top:50.5em;left:50%;width:0;height:0}.lock__rosette{position:absolute;width:7.8em;height:7.8em;margin:-3.9em 0 0 -3.9em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e2e4e6,#8a8e93 70%);box-shadow:0 .6em 1.4em #00000080}.lock__lever{position:absolute;z-index:1;width:25em;height:3.5em;margin:-1.75em 0 0 -1.75em;border-radius:1.75em;background:linear-gradient(180deg,#eceeef,#9da1a6 55%,#74787d);box-shadow:0 1em 1.8em #0000008c;transform-origin:1.75em 50%;transition:transform .55s cubic-bezier(.34,1.3,.64,1)}.lock__lever:after{content:"";position:absolute;right:0;top:0;width:1.5em;height:100%;border-radius:50%;background:linear-gradient(180deg,#c9ccd0,#8f9398)}.lock[data-state=unlocked]{--led: var(--open)}.lock[data-state=unlocked] .lock__lever{transform:rotate(26deg)}.lock[data-state=unlocked] .lock__sensor{color:var(--open)}.lock[data-state=denied]{--led: var(--deny)}.lock[data-state=busy]{--led: var(--signal)}.phone{--app-primary: #064f85;--app-locked: #16a34a;--app-open: #eab308;--app-text: #1e293b;--app-muted: #64748b;font-size:clamp(7.5px,1.25vh + .2vw,10px);width:22em;padding:.7em;border-radius:3.4em;background:#0b0d10;box-shadow:0 3em 6em #00000080,0 0 0 1px #ffffff24 inset}.phone__screen{border-radius:2.8em;overflow:hidden;background:#f8fafc;color:var(--app-text);text-align:center}.phone__top{padding:1.1em 1.8em 1.3em;background:var(--app-primary);color:#fff}.phone__bar{display:flex;justify-content:space-between;align-items:center;font-size:1.15em;font-weight:600}.phone__bar .mi{font-size:1.2em;margin-left:.2em}.phone__title{margin-top:.9em;font-size:1.5em;font-weight:600}.phone__body{padding:2.2em 1.4em 1.6em}.phone__button{position:relative;width:9.6em;height:9.6em;margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--app-locked);box-shadow:0 0 0 .5em #16a34a38,0 0 0 1em #16a34a1a;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease,transform .15s ease}.phone__button .mi{font-size:4em}.phone__button:active{transform:scale(.96)}.phone__button[data-open]{background:var(--app-open);box-shadow:0 0 0 .5em #eab3083d,0 0 0 1em #eab3081a}.phone__button:before,.phone__button:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--app-primary);opacity:0}.phone__button[data-sending]:before,.phone__button[data-sending]:after{animation:nl-ping 1s ease-out infinite}.phone__button[data-sending]:after{animation-delay:.35s}@keyframes nl-ping{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}.phone__name{margin-top:1.3em;font-size:1.8em;font-weight:700}.phone__state{margin-top:.5em}.phone__state span{display:inline-flex;align-items:center;gap:.45em;padding:.3em .9em;border-radius:99em;font-size:1.15em;font-weight:600;color:#15803d;background:#16a34a24}.phone__state span:before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor}.phone__button[data-open]~.phone__state span{color:#a16207;background:#eab3082e}.phone__hint{margin-top:.9em;min-height:1.5em;font-size:1.15em;color:var(--app-muted)}.phone__modes{margin-top:1.1em;display:grid;grid-template-columns:1fr 1fr;gap:.3em;padding:.3em;border-radius:1.2em;border:1px solid #e2e8f0;background:#fff}.phone__modes button{display:flex;align-items:center;justify-content:center;gap:.2em;padding:.7em .2em;border-radius:.9em;font-size:1.1em;font-weight:600;color:var(--app-muted);cursor:pointer}.phone__modes .mi{font-size:1.25em}.phone__modes button[aria-pressed=true]{background:#e8f0f6;color:var(--app-primary)}.phone__card{margin-top:1em;padding:1em 1.2em 1.1em;border-radius:1.2em;border:1px solid #e2e8f0;background:#fff}.phone__card p{display:flex;justify-content:space-between;align-items:center;font-size:1.2em}.phone__card p>span{display:inline-flex;align-items:center;gap:.4em;font-weight:600}.phone__card .mi{font-size:1.2em;color:var(--app-muted)}.phone__card i{display:block;height:.5em;margin-top:.7em;border-radius:1em;background:linear-gradient(90deg,var(--app-locked) 85%,#dcfce7 85%)}.chip{font-size:clamp(7.5px,1.25vh + .2vw,10px);position:relative;z-index:5;width:7em;height:9.4em;border-radius:3.5em/3.5em 3.5em 4.6em 4.6em;display:grid;place-items:center;color:#ffffffd9;background:linear-gradient(160deg,#2a8fe0,#064f85);box-shadow:0 1.4em 2.6em #00000080,0 0 0 1px #fff3 inset;cursor:grab;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.chip:before{content:"";position:absolute;top:.9em;width:1.5em;height:1.5em;border-radius:50%;background:var(--night);box-shadow:0 0 0 .25em #ffffff59}.chip .mi{font-size:3.4em;margin-top:.5em}.chip.is-dragging{cursor:grabbing}.nl-dark :is(.lock__key,.lock__sensor,.chip,.phone button):focus-visible{outline:2px solid var(--signal);outline-offset:3px}.demo-cta{padding:72px 24px 88px;text-align:center;background:var(--night-2)}.demo-cta h2{font-size:1.875rem;font-weight:700;letter-spacing:-.01em}.demo-cta p{margin-top:12px;color:var(--muted)}.demo-cta div{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.demo-cta a{padding:12px 26px;border-radius:8px;font-weight:600}.demo-cta__primary{background:var(--ink);color:var(--night)}.demo-cta__secondary{border:1px solid rgba(255,255,255,.28)}@media (prefers-reduced-motion: reduce){.lock__lever,.lock__led,.lock__key{transition:none}.phone__button[data-sending]:before,.phone__button[data-sending]:after{animation:none}}