:root{color-scheme:dark;--bg:#101016;--panel:#191921;--line:#30303c;--muted:#aaa9bd;--purple:#ba9aff;--green:#89e6bb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f5f3ff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}header,main{max-width:1180px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:inherit;font-weight:750;font-size:19px;display:flex;align-items:center;gap:12px}.logo{background:var(--purple);color:#241640;border-radius:12px;padding:4px 10px;font-size:26px}.privacy{color:var(--green);font-size:13px}main{padding:46px 32px 0}.intro{margin-bottom:36px}.eyebrow{letter-spacing:2px;font-size:11px;color:var(--purple);font-weight:750}h1{font-size:clamp(40px,6vw,66px);line-height:1.08;letter-spacing:-3px;margin:18px 0}h1 span{color:var(--purple)}.intro>p:last-child{color:var(--muted);line-height:1.7}h2,h3,p{margin-top:0}h2{font-size:18px;margin-bottom:8px}h3{font-size:14px}small{font-size:11px;font-weight:500;color:var(--muted);margin-left:8px}.connection{border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px;background:#1c1828}.connection h2{display:inline;font-size:16px}.dot{display:inline-block;width:8px;height:8px;background:#c1a4ff;border-radius:50%;margin-right:10px}.dot.connected{background:var(--green)}.connection p{font-size:13px;color:var(--muted);margin:10px 0 0;max-width:620px}.selector{min-width:220px;max-width:360px}.selector label{font-size:11px;color:var(--muted);display:block;margin-bottom:8px}select{width:100%;padding:10px;background:#101016;border:1px solid #514361;border-radius:8px;color:inherit}select:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}.workspace{display:grid;grid-template-columns:1.55fr 1fr;gap:24px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:24px}.section-heading h2{margin:0}.section-heading>span{font-size:10px;letter-spacing:1px;color:var(--muted)}.stick-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.stick-card h3{text-align:center}.stick-field{width:164px;height:164px;border:1px solid #555163;border-radius:50%;position:relative;margin:18px auto;background:radial-gradient(circle,#252130 0,#191921 70%)}.stick-field:after{content:'';position:absolute;inset:25%;border:1px dashed #47424f;border-radius:50%}.cross{position:absolute;background:#3d3948}.horizontal{top:50%;height:1px;width:100%}.vertical{left:50%;width:1px;height:100%}.stick-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--purple);box-shadow:0 0 18px #b590ff55;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}.coordinates{display:flex;justify-content:center;gap:22px;font-size:11px;color:var(--muted)}.coordinates b{font:13px ui-monospace,monospace;color:#eee9fc;margin-left:6px}.hint{font-size:12px;line-height:1.6;color:var(--muted);margin:24px 0 0}.trigger{margin:34px 0}.trigger>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.trigger h3{margin:0}.trigger b{font:16px ui-monospace,monospace;color:var(--purple)}meter{display:block;width:100%;height:16px;appearance:none;border:0;background:#30303d;border-radius:6px;overflow:hidden}meter::-webkit-meter-bar{background:#30303d;border:0}meter::-webkit-meter-optimum-value{background:var(--purple)}meter::-moz-meter-bar{background:var(--purple)}.buttons-panel{margin-top:24px}.button-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.button{border:1px solid #3c3948;background:#22222d;border-radius:10px;padding:15px 8px;text-align:center}.button.active{background:#b99bff;color:#211332;border-color:#dacaff}.button .label{font-weight:700;font-size:13px}.button .value{display:block;font:11px ui-monospace,monospace;color:var(--muted);margin-top:9px}.button.active .value{color:#372451}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin:44px 0}.steps span{font:12px ui-monospace,monospace;color:var(--purple)}.steps h3{margin:12px 0 8px}.steps p{color:var(--muted);font-size:13px;line-height:1.6;max-width:280px}footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:11px}@media(max-width:760px){header{padding:20px}.privacy{font-size:11px}main{padding:30px 20px 0}.connection{align-items:stretch;flex-direction:column}.selector{max-width:none}.workspace{grid-template-columns:1fr}.button-grid{grid-template-columns:repeat(4,1fr)}.steps{gap:20px}footer{flex-direction:column}h1{letter-spacing:-2px}}@media(max-width:420px){.panel{padding:18px}.stick-pair{gap:8px}.stick-field{width:124px;height:124px}.coordinates{gap:9px}.steps{grid-template-columns:1fr;gap:16px}.steps p{max-width:none}.section-heading>span{font-size:9px}}