@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap";:root{--mine-black: #0F1115;--surface: #1A1D24;--surface-elevated: #242830;--primary: #3B82F6;--primary-hover: #2563EB;--primary-muted: rgba(59, 130, 246, .15);--primary-glow: rgba(59, 130, 246, .3);--text-white: #FFFFFF;--silver: #A1A1A1;--silver-muted: #6B6B6B;--border: #2C2C2E;--border-light: #3A3A3E;--success: #00C853;--success-muted: rgba(0, 200, 83, .15);--error: #FF3B30;--error-muted: rgba(255, 59, 48, .15);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--mine-black);color:var(--text-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px;pointer-events:none}body:after{content:"";position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(59,130,246,.25) 0%,rgba(59,130,246,.08) 40%,transparent 70%);z-index:0;pointer-events:none;opacity:1;animation:glowPulse 8s ease-in-out infinite}@keyframes glowPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.05);opacity:.85}}#app{position:relative;z-index:1;height:100%}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.screen.active{opacity:1;transform:translateY(0);pointer-events:all}.screen.exit-up{opacity:0;transform:translateY(-24px)}.pin-container{display:flex;flex-direction:column;align-items:center;gap:0;padding:48px;max-width:420px;width:100%}.lock-icon{width:56px;height:56px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:28px;animation:fadeInScale .6s cubic-bezier(.34,1.56,.64,1) both}.lock-icon svg{width:24px;height:24px;fill:none;stroke:var(--silver);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pin-container h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;animation:fadeInUp .5s ease both .1s}.pin-container .subtitle{font-size:15px;color:var(--silver-muted);margin-bottom:40px;animation:fadeInUp .5s ease both .15s}.pin-inputs{display:flex;gap:14px;margin-bottom:16px;animation:fadeInUp .5s ease both .2s}.pin-digit{width:64px;height:76px;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--surface-elevated);color:var(--text-white);font-family:var(--font-mono);font-size:28px;font-weight:500;text-align:center;outline:none;caret-color:transparent;transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease,background-color .2s ease;-webkit-appearance:none;-moz-appearance:textfield}.pin-digit::-webkit-inner-spin-button,.pin-digit::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pin-digit::selection{background:transparent}.pin-digit:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-muted),0 0 24px var(--primary-muted)}.pin-digit.filled{animation:digitPop .2s cubic-bezier(.34,1.56,.64,1)}.pin-digit.success{border-color:var(--success);box-shadow:0 0 0 4px var(--success-muted);background:#00c8530d}.pin-digit.error{border-color:var(--error);box-shadow:0 0 0 4px var(--error-muted);background:#ff3b300d}.pin-error{font-size:13px;color:var(--error);opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease;height:20px;display:flex;align-items:center;margin-bottom:8px}.pin-error.visible{opacity:1;transform:translateY(0)}.pin-inputs.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.clear-btn{background:none;border:none;color:var(--silver-muted);font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;padding:8px 20px;border-radius:var(--radius-sm);transition:color .2s ease,background .2s ease;animation:fadeInUp .5s ease both .25s}.clear-btn:hover{color:var(--silver);background:var(--surface)}#grid-screen{flex-direction:column;padding:0;overflow:hidden}.grid-wrapper{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.grid-wrapper::-webkit-scrollbar{width:6px}.grid-wrapper::-webkit-scrollbar-track{background:transparent}.grid-wrapper::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.grid-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 32px;min-height:min-content}.grid-header{display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:0 auto 40px;width:100%}.grid-header h1{font-size:28px;font-weight:700;letter-spacing:-.02em}.grid-header .subtitle{font-size:14px;color:var(--silver-muted);margin-top:4px}.lock-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--border);color:var(--silver-muted);font-family:var(--font-sans);font-size:13px;font-weight:500;padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}.lock-btn:hover{color:var(--text-white);border-color:var(--border-light);background:var(--surface)}.lock-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.company-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;max-width:900px;margin:0 auto;width:100%}.company-tile{display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;cursor:pointer;transition:transform .25s cubic-bezier(.4,0,.2,1),border-color .25s ease,box-shadow .25s ease;opacity:0;animation:tileReveal .45s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i) * .07s)}.company-tile:hover{transform:translateY(-3px);border-color:var(--primary-glow);box-shadow:0 8px 32px #0000004d,0 0 0 1px var(--primary-glow)}.company-tile:active{transform:translateY(-1px) scale(.99)}.tile-avatar{width:48px;height:48px;min-width:48px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary),var(--primary-hover));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--text-white);letter-spacing:-.02em}.tile-info{flex:1;min-width:0}.tile-info h3{font-size:15px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-domain{font-size:13px;color:var(--silver-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.tile-arrow{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--surface-elevated);display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.tile-arrow svg{width:16px;height:16px;fill:none;stroke:var(--silver-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}.company-tile:hover .tile-arrow{background:var(--primary-muted);transform:translate(2px)}.company-tile:hover .tile-arrow svg{stroke:var(--primary)}.empty-state{text-align:center;padding:80px 24px;color:var(--silver-muted);grid-column:1 / -1}.empty-state p{font-size:15px;line-height:1.6}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes digitPop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-6px)}30%,70%{transform:translate(6px)}}@keyframes tileReveal{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.pin-container{padding:32px 24px}.pin-container h1{font-size:24px}.pin-digit{width:56px;height:68px;font-size:24px}.pin-inputs{gap:10px}.grid-content{padding:32px 20px}.grid-header{margin-bottom:28px}.grid-header h1{font-size:22px}.grid-header .subtitle{font-size:13px}.company-grid{grid-template-columns:1fr;gap:12px}.company-tile{padding:16px 20px}}@media(max-width:380px){.pin-digit{width:48px;height:60px;font-size:22px}.pin-inputs{gap:8px}}
