@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--navy:#061426;--navy-2:#0b1d33;--surface:#10243b;--muted:#8ea1b8;--white:#f7f9fc;--green:#48d597;--red:#ff6672;--line:rgba(209,225,245,.1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--navy);color:var(--white);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif}body{min-height:100dvh;background:radial-gradient(ellipse at 50% -20%,#193553 0,transparent 55%),var(--navy);padding-bottom:calc(134px + env(safe-area-inset-bottom))}.app-shell{max-width:540px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 22px 12px}.topbar{display:flex;align-items:center;gap:12px}.brand-mark{width:39px;height:39px;border-radius:13px;background:#15304e;display:flex;align-items:center;justify-content:center;gap:3px}.brand-mark span{width:5px;height:16px;border:1.5px solid #d7e9fb;border-radius:5px;position:relative}.brand-mark span:before{content:'';position:absolute;width:8px;height:7px;border:1.5px solid #d7e9fb;border-radius:7px 7px 0 0;left:-3px;top:-7px;border-bottom:0}.brand-copy{flex:1}.eyebrow{margin:0;color:#7f96b0;font-size:9px;letter-spacing:1.7px;font-weight:700}.brand-copy h1{font-family:Manrope,sans-serif;font-size:15px;line-height:1.25;margin:3px 0 0;font-weight:500;letter-spacing:-.3px}.brand-copy h1 b{font-weight:800}.profile-button{border:1px solid rgba(145,176,208,.16);background:rgba(13,32,53,.8);border-radius:20px;color:#b8c8d9;font-size:9px;font-weight:700;letter-spacing:1px;padding:9px 11px;display:flex;gap:7px;align-items:center}.online-dot,.connection-dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #48d59790}.welcome-row{display:flex;justify-content:space-between;align-items:end;margin:33px 0 18px}.welcome-row h2{font-family:Manrope,sans-serif;font-size:25px;letter-spacing:-1px;margin:5px 0 0;font-weight:700}.connection{display:flex;align-items:center;gap:7px;color:#8fa4ba;font-size:10px;padding-bottom:4px;white-space:nowrap}.connection-dot{width:5px;height:5px}.locks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lock-card{min-width:0;position:relative;background:linear-gradient(150deg,rgba(20,43,67,.97),rgba(11,29,49,.98));border:1px solid rgba(160,188,219,.09);border-radius:20px;min-height:153px;padding:14px 13px 12px;display:flex;flex-direction:column;align-items:center;transition:transform .2s,border-color .2s;overflow:hidden}.lock-card:active{transform:scale(.975)}.lock-card.busy{border-color:rgba(112,179,231,.35)}.lock-card-top{width:100%;display:flex;justify-content:space-between;align-items:center}.lock-name{font-size:13px;font-weight:700;letter-spacing:.15px}.more{color:#7790aa;font-size:17px;line-height:12px}.lock-button{width:73px;height:73px;border:0;border-radius:50%;margin:10px 0 8px;background:#f7f9fc;color:#10243a;display:grid;place-items:center;position:relative;box-shadow:0 5px 18px #0003;cursor:pointer;-webkit-tap-highlight-color:transparent}.lock-button svg{width:31px;height:31px;overflow:visible}.lock-button .shackle{transition:transform .25s}.lock-button.unlocked .shackle{transform:translateY(5px) rotate(-12deg);transform-origin:50% 60%}.lock-button .lock-body{fill:var(--red)}.lock-button.unlocked .lock-body{fill:var(--green)}.lock-button.busy svg{opacity:0}.lock-button.busy:after{content:'';position:absolute;width:26px;height:26px;border:2.5px solid #16304b30;border-top-color:#16304b;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.lock-status{font-size:10px;font-weight:700;letter-spacing:.2px;color:#ff8290}.lock-status.unlocked{color:var(--green)}.lock-footer{width:100%;display:flex;justify-content:center;align-items:center;gap:5px;color:#8da2b8;font-size:9px;margin-top:8px}.battery-icon{width:13px;height:7px;border:1px solid #7188a0;border-radius:2px;position:relative;padding:1px}.battery-icon:after{content:'';position:absolute;right:-3px;top:1px;height:3px;width:2px;background:#7188a0;border-radius:0 1px 1px 0}.battery-level{display:block;height:100%;border-radius:1px;background:#8ea7be}.battery-low .battery-level{background:#e8a95c}.page-nav{height:45px;margin-top:11px;display:flex;align-items:center;justify-content:center;gap:12px}.page-arrow{border:0;background:transparent;color:#91a7bd;font-size:23px;padding:4px 8px;cursor:pointer}.page-dots{display:flex;gap:7px;align-items:center}.page-dot{height:6px;width:6px;border-radius:9px;border:0;padding:0;background:#40556d;cursor:pointer;transition:all .2s}.page-dot.active{width:19px;background:#dce9f6}.page-count{color:#7790a9;font-size:9px;letter-spacing:1px;font-weight:700;margin-left:3px}.demo-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#748ba4;font-size:9px;margin-top:0}.note-icon{width:13px;height:13px;border:1px solid #637f9c;border-radius:50%;display:grid;place-items:center;font-family:serif;font-style:italic;font-size:9px}.portals-dock{position:fixed;z-index:5;left:0;right:0;bottom:0;padding:13px 20px calc(16px + env(safe-area-inset-bottom));background:rgba(7,22,39,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line)}.dock-heading{max-width:496px;margin:0 auto 11px;display:flex;justify-content:space-between;align-items:center}.dock-heading>span:first-child{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#d7e2ed}.dock-subtitle{font-size:9px;color:#788fa7}.portal-list{max-width:496px;margin:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.portal-button{border:0;background:none;color:#a8b9ca;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}.portal-circle{width:43px;height:43px;border-radius:50%;border:1px solid rgba(190,211,233,.16);background:linear-gradient(145deg,#142b44,#0e2137);display:grid;place-items:center;color:#f0f5fa;font-size:12px;font-weight:700;box-shadow:0 3px 12px #0002;transition:all .2s}.portal-button:active .portal-circle,.portal-button.opening .portal-circle{background:#edf3f8;color:#10243b;transform:scale(.94)}.portal-button.opening .portal-circle{box-shadow:0 0 0 5px #48d59724}.portal-label{font-size:9px;color:#91a4b8}.toast{position:fixed;z-index:10;left:50%;bottom:calc(115px + env(safe-area-inset-bottom));transform:translate(-50%,12px);background:#e8f0f8;color:#14283c;padding:10px 15px;border-radius:13px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;transition:all .2s;box-shadow:0 8px 22px #0004;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.swipe-hint{touch-action:pan-y}@media(min-width:600px){.app-shell{padding-top:36px}.locks-grid{gap:15px}.lock-card{min-height:166px}.lock-button{width:78px;height:78px}.portals-dock{padding-bottom:18px}}@media(max-height:760px){.welcome-row{margin:23px 0 12px}.lock-card{min-height:137px;padding-top:11px}.lock-button{width:65px;height:65px;margin:7px 0 6px}.lock-button svg{width:28px;height:28px}.locks-grid{gap:9px}.page-nav{margin-top:5px;height:38px}}