@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap";:root{color:#f8f7f5;font-synthesis:none;--red:#ff3047;--ink:#050506;--line:#ffffff24;--mono:Space Mono,monospace;background:#050506;font-family:Inter,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#050506}body{color:#f8f7f5;background:#050506;min-width:320px;margin:0;overflow-x:hidden}button,a{font:inherit;color:inherit}a{text-decoration:none}button{cursor:pointer}::selection{background:var(--red);color:#fff}.app{background:radial-gradient(circle at 70% 0,#ff233e1c,#0000 27%),#050506;min-height:100vh}header{border-bottom:1px solid var(--line);z-index:5;justify-content:space-between;align-items:center;height:86px;padding:0 clamp(20px,4vw,66px);display:flex;position:relative}.brand{letter-spacing:-.04em;align-items:center;gap:11px;font-size:17px;font-weight:850;display:flex}.brand b{font:700 9px var(--mono);letter-spacing:.15em;color:#ffffff6b;margin-left:10px}.mark{background:var(--red);clip-path:polygon(0 0,44% 0,100% 56%,100% 100%,56% 100%,0 44%);flex:none;place-items:center;width:28px;height:28px;display:grid;transform:rotate(45deg)}.mark i{background:#050506;border-radius:50%;width:8px;height:8px}.back{font:700 9px var(--mono);letter-spacing:.12em;align-items:center;gap:9px;transition:all .2s;display:flex}.back svg{width:14px}.back:hover{color:var(--red);transform:translate(-4px)}.intro{grid-template-columns:1.45fr .55fr;align-items:end;gap:5vw;min-height:calc(100svh - 86px);padding:clamp(70px,9vh,120px) clamp(20px,4vw,66px) 65px;display:grid;position:relative;overflow:hidden}.intro:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:7.15vw 7.15vw;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 18% 83%,#0000);mask-image:linear-gradient(#0000,#000 18% 83%,#0000)}.intro-copy,.intro-side{position:relative}.eyebrow{font:700 9px var(--mono);letter-spacing:.18em;align-items:center;gap:9px;margin:0;display:flex}.eyebrow span{background:var(--red);width:6px;height:6px;box-shadow:0 0 14px var(--red);border-radius:50%;display:block}.intro h1{letter-spacing:-.09em;margin:7vh 0 0;font-size:clamp(76px,12.2vw,190px);font-weight:900;line-height:.75}.intro h1 em{color:#0000;-webkit-text-stroke:2px #fff;margin-left:8vw;font-style:normal}.intro-side{padding-bottom:1.5vh}.intro-side>p:first-child{color:#ffffffa8;max-width:460px;margin:0 0 38px;font-size:clamp(15px,1.3vw,20px);line-height:1.65}.connection{border:1px solid var(--line);background:#ffffff06;align-items:center;gap:17px;padding:19px;display:flex}.connection i{color:#ffffff59;border:1px solid #fff3;place-items:center;width:52px;height:52px;font-style:normal;display:grid}.connection i svg{width:24px}.connection span{min-width:0}.connection b,.connection small{display:block}.connection b{font:700 9px var(--mono);letter-spacing:.1em;margin-bottom:7px}.connection small{color:#fff6;text-overflow:ellipsis;white-space:nowrap;max-width:320px;font-size:10px;overflow:hidden}.connection.online{border-color:#ff3047a6}.connection.online i{background:var(--red);color:#050506;border-color:var(--red);box-shadow:0 0 35px #ff304740}.connection.online b{color:var(--red)}.demo-button{color:#050506;width:100%;font:800 9px var(--mono);letter-spacing:.1em;background:#f8f7f5;border:0;justify-content:space-between;align-items:center;margin-top:10px;padding:17px 19px;display:flex}.demo-button:hover{background:var(--red)}.demo-button svg{width:16px}.key-help{letter-spacing:.08em;font:700 8px/1.7 var(--mono)!important;color:#ffffff5c!important;margin:14px 0 0!important}.playground{border:1px solid var(--line);background:#020203;margin:0 clamp(20px,4vw,66px) 120px;position:relative}.scene-head{border-bottom:1px solid var(--line);height:54px;font:700 9px var(--mono);letter-spacing:.12em;justify-content:space-between;align-items:center;padding:0 20px;display:flex}.scene-head span{align-items:center;gap:9px;display:flex}.scene-head svg{width:15px;color:var(--red)}.scene-head b{color:var(--red)}.scene{background:radial-gradient(circle,#ff2c4414,#0000 35%);height:min(64vw,700px);min-height:420px;position:relative;overflow:hidden}.scene canvas{z-index:2;width:100%;height:100%;display:block;position:relative}.scene-grid{pointer-events:none;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:60px 60px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000,#0000 82%);mask-image:radial-gradient(circle,#000,#0000 82%)}.scene-tip{font:700 8px/1.7 var(--mono);letter-spacing:.1em;color:#ffffff59;z-index:3;margin:0;position:absolute;bottom:18px;left:22px}.diagnostics{color:#0b0b0c;background:#f2f0eb;padding:110px clamp(20px,4vw,66px) 130px}.section-label{font:700 9px var(--mono);letter-spacing:.14em;border-bottom:1px solid #00000038;justify-content:space-between;padding-bottom:17px;display:flex}.section-label span:last-child{color:#d91d32}.diag-title{grid-template-columns:1.5fr .5fr;align-items:end;gap:50px;margin:75px 0;display:grid}.diag-title h2{letter-spacing:-.08em;margin:0;font-size:clamp(58px,9vw,140px);line-height:.78}.diag-title p{color:#00000094;font-size:13px;line-height:1.65}.progress{background:#00000024;height:3px;margin-top:28px}.progress i{background:var(--red);height:100%;transition:width .35s;display:block}.axes-grid{border:1px solid #0003;grid-template-columns:1fr 1fr;display:grid}.axis-card{padding:24px 30px 28px;transition:all .25s;position:relative}.axis-card+*{border-left:1px solid #0003}.axis-card.tested{color:#fff;background:#0a0a0b}.axis-head,.axis-values{font:700 9px var(--mono);letter-spacing:.1em;justify-content:space-between;align-items:center;display:flex}.axis-head b{color:#d91d32;align-items:center;gap:7px;display:flex}.axis-head svg{width:13px}.axis-field{opacity:.9;border:1px solid;border-radius:50%;width:190px;height:190px;margin:45px auto;position:relative}.axis-ring{opacity:.25;border:1px dashed;border-radius:50%;position:absolute;inset:25%}.axis-h,.axis-v{opacity:.16;background:currentColor;position:absolute}.axis-h{height:1px;top:50%;left:-10%;right:-10%}.axis-v{width:1px;top:-10%;bottom:-10%;left:50%}.axis-dot{background:var(--red);width:42px;height:42px;box-shadow:0 0 calc(5px + var(--power) * 30px) #ff3047b3;border-radius:50%;transition:transform 50ms;position:absolute;top:50%;left:50%}.axis-dot:after{content:"";border:1px solid #ffffff80;border-radius:50%;position:absolute;inset:8px}.axis-values{color:#00000078}.axis-card.tested .axis-values{color:#ffffff73}.axis-values b{color:currentColor;margin-left:7px}.buttons-title{font:700 9px var(--mono);letter-spacing:.12em;justify-content:space-between;align-items:end;margin:80px 0 20px;display:flex}.buttons-title small{color:#0006;text-align:right;max-width:460px;line-height:1.5}.button-grid{border:1px solid #0003;grid-template-columns:repeat(4,1fr);display:grid}.button-cell{border-bottom:1px solid #00000026;border-right:1px solid #00000026;flex-direction:column;justify-content:space-between;min-height:170px;padding:20px;display:flex;position:relative;overflow:hidden}.button-cell:nth-child(4n){border-right:0}.button-cell:nth-last-child(-n+4){border-bottom:0}.button-cell:before{content:"";height:calc(var(--value) * 100%);background:var(--red);width:100%;transition:height 50ms;position:absolute;bottom:0;left:0}.button-orb,.button-copy,.check{position:relative}.button-orb{width:50px;height:50px;font:700 10px var(--mono);border:1px solid #00000073;border-radius:50%;place-items:center;display:grid}.button-orb i{opacity:.35;border:1px dashed;border-radius:50%;position:absolute;inset:6px}.button-copy{font:700 9px var(--mono);justify-content:space-between;align-items:end;display:flex}.button-copy span{letter-spacing:-.05em;font-size:18px}.button-copy em{font:400 8px var(--mono);letter-spacing:0;text-align:right;opacity:.5;display:block}.button-cell.active{color:#fff}.button-cell.tested .button-orb{color:#fff;background:#0b0b0c}.check{color:#d91d32;width:14px;position:absolute;top:15px;right:16px}.button-cell.active .check{color:#fff}.haptics{color:#fff;background:#0a0a0b;grid-template-columns:1.3fr .7fr;align-items:end;gap:70px;margin-top:80px;padding:60px;display:grid;position:relative;overflow:hidden}.haptics:after{content:"";border:1px solid #ff304759;border-radius:50%;width:500px;height:500px;position:absolute;bottom:-340px;left:-180px;box-shadow:0 0 90px #ff30471f}.haptics h3{letter-spacing:-.075em;margin:30px 0 0;font-size:clamp(55px,7vw,106px);line-height:.82}.haptic-copy{z-index:1;position:relative}.haptic-copy p{color:#ffffff8c;font-size:13px;line-height:1.65}.haptic-copy button{border:1px solid var(--red);background:var(--red);color:#09090a;width:100%;font:800 9px var(--mono);letter-spacing:.09em;justify-content:space-between;align-items:center;margin:25px 0 11px;padding:19px;display:flex}.haptic-copy button:hover:not(:disabled){background:#fff;border-color:#fff}.haptic-copy button:disabled{opacity:.35;cursor:not-allowed}.haptic-copy button svg{width:18px}.haptic-copy small{font:700 7px/1.5 var(--mono);color:#ffffff59;letter-spacing:.08em}footer{border-top:1px solid var(--line);background:#050506;grid-template-columns:1fr 1fr 1fr;align-items:end;min-height:180px;padding:35px clamp(20px,4vw,66px);display:grid}footer>div{align-items:center;gap:11px;display:flex}footer button{color:#ffffff8c;font:700 8px var(--mono);letter-spacing:.1em;background:0 0;border:0;justify-self:center;align-items:center;gap:8px;display:flex}footer button:hover{color:var(--red)}footer button svg{width:14px}footer>span{text-align:right;color:#ffffff57;font:400 8px/1.7 var(--mono);letter-spacing:.08em;justify-self:end}@media (width<=900px){.intro{grid-template-columns:1fr;align-items:center}.intro-side{max-width:560px;margin-left:auto}.intro h1{font-size:18vw}.diag-title{grid-template-columns:1fr}.button-grid{grid-template-columns:repeat(3,1fr)}.button-cell:nth-child(4n){border-right:1px solid #00000026}.button-cell:nth-child(3n){border-right:0}.button-cell:nth-last-child(-n+4){border-bottom:1px solid #00000026}.button-cell:nth-last-child(-n+2){border-bottom:0}.haptics{grid-template-columns:1fr}}@media (width<=650px){header{height:72px}.brand b{display:none}.back{font-size:0}.back svg{width:20px}.intro{min-height:auto;padding-block:70px 80px}.intro h1{margin-bottom:65px;font-size:22vw;line-height:.79}.intro h1 em{margin-left:0}.intro-side{width:100%}.playground{border-inline:0;margin-inline:0}.scene{min-height:500px}.scene-tip{font-size:7px}.diagnostics{padding-block:80px}.diag-title{margin:55px 0}.diag-title h2{font-size:14vw}.axes-grid{grid-template-columns:1fr}.axis-card+*{border-top:1px solid #0003;border-left:0}.axis-field{width:160px;height:160px}.buttons-title{align-items:start;gap:20px}.buttons-title small{font-size:7px}.button-grid{grid-template-columns:repeat(2,1fr)}.button-cell:nth-child(3n){border-right:1px solid #00000026}.button-cell:nth-child(2n){border-right:0}.button-cell:nth-last-child(-n+2){border-bottom:0}.button-cell{min-height:145px;padding:15px}.button-copy b{font-size:7px}.haptics{padding:34px 24px}.haptics h3{font-size:16vw}footer{grid-template-columns:1fr 1fr;gap:45px}footer>span{text-align:left;grid-column:1/-1;justify-self:start}footer button{justify-self:end}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.axis-dot,.progress i{transition:none}}
