:root{--bg-primary: #ffffff;--text-secondary: #a1a1aa;--surface-01: #f4f4f5;--dot-base: #e4e4e7;--dot-active-rgb: 152, 152, 152;--dot-base-rgb: 228, 228, 231}body{margin:0;padding:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--bg-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{display:flex;flex-direction:column;gap:20px}.title{color:var(--text-secondary);font-size:15px;font-weight:400;padding-left:4px;letter-spacing:.3px;display:flex;align-items:center;gap:8px}.title:after{content:"";display:inline-block;width:4px;height:4px;background-color:var(--text-secondary);border-radius:50%;animation:pulse 1.5s infinite opacity}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.card{width:420px;height:420px;background-color:var(--surface-01);border-radius:24px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 6px -1px #00000003,0 2px 4px -1px #00000003}.grid{display:grid;grid-template-columns:repeat(20,18px);grid-template-rows:repeat(20,18px);place-items:center}.dot{width:12px;height:12px;background-color:var(--dot-base);border-radius:50%;will-change:transform,background-color;backface-visibility:hidden;transform:translateZ(0) scale(.333)}