:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:light dark}body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:#fff}#header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.header-container{max-width:1280px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:4rem}.header-title{margin:0;font-size:1.5rem;font-weight:700;color:#1a202c}.header-nav{display:flex;align-items:center;gap:1.5rem}.header-nav a{font-size:.875rem;font-weight:400;line-height:1.25rem;color:#4a5568;text-decoration:none;transition:color .2s;white-space:nowrap}.header-nav a:hover{color:#1a202c}.header-how-it-works-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;line-height:1.25rem;color:#2563eb;background:#fff;border:1px solid #2563eb;border-radius:.5rem;cursor:pointer;transition:all .2s;white-space:nowrap}.header-how-it-works-btn:hover{color:#1d4ed8;background:#eff6ff}@media (max-width: 640px){.header-title{font-size:1.25rem}.header-nav{gap:.75rem}}main{flex:1;display:flex;justify-content:center;align-items:center;gap:2rem;padding:2rem}.main-content{display:flex;align-items:flex-start;gap:2rem;padding:2rem;background:#fffc;border-radius:1rem;box-shadow:0 1rem 2rem #0000001a}#ring{width:580px;height:580px;border:none;background:transparent;flex-shrink:0}#controls{display:flex;flex-direction:column;gap:1rem;min-width:340px;max-width:380px;height:580px;padding:1rem;border:1px solid #cbd5f5;border-radius:.75rem;background:#ffffffe6;color:#2d3748;overflow-y:auto}.modal{position:fixed;inset:0;z-index:100;overflow-y:auto}.modal-backdrop{position:fixed;inset:0;background:#00000080}.modal-content{position:relative;margin:4rem auto;max-width:42rem;width:calc(100% - 2rem);background:#fff;border-radius:.5rem;box-shadow:0 1.25rem 2.5rem #0000004d}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e2e8f0}.modal-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#1a202c}.modal-close{background:none;border:none;font-size:2rem;line-height:1;color:#a0aec0;cursor:pointer;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.modal-close:hover{color:#4a5568}.modal-body{padding:1.5rem;color:#4a5568}.modal-body h3{font-size:1.125rem;font-weight:600;color:#1a202c;margin-top:1.5rem;margin-bottom:.75rem}.modal-body h3:first-child{margin-top:0}.modal-body ul{margin:.5rem 0;padding-left:1.5rem}.modal-body li{margin:.5rem 0}.how-it-works-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:#3182ce;background:#fff;border:1px solid #3182ce;border-radius:.5rem;cursor:pointer;transition:all .2s}.how-it-works-btn:hover{background:#ebf8ff}