.guides-page{color:#090a0a;background:#f4f4ef;min-height:100vh}.guides-page header{background:#fff;border-bottom:1px solid #d8d9d3;justify-content:space-between;align-items:center;height:78px;padding:0 max(24px,50vw - 640px);display:flex}.guides-page header img{width:145px}.guides-page header nav{font:700 9px var(--font-mono);gap:24px;display:flex}.guide-hero,.gate{max-width:1280px;margin:auto;padding:80px 24px 60px}.guide-hero{grid-template-columns:1.35fr .65fr;align-items:end;gap:60px;display:grid}.guide-hero span,.gate span,.lesson-copy>span,.guide-footer>span{font:700 8px var(--font-mono);letter-spacing:.1em;color:#73766f}.guide-hero h1,.gate h1{letter-spacing:-.075em;margin:18px 0 0;font-size:clamp(52px,7vw,96px);line-height:.9}.guide-hero h1 em{color:#a5a7a1;font-style:normal}.guide-hero p,.gate p{color:#6d7069;max-width:440px;font-size:12px;line-height:1.7}.hero-guide-copy button{font:700 8px var(--font-mono);cursor:pointer;background:#fff;border:1px solid #cfd0ca;margin-top:14px;padding:11px 13px}.gate a{color:#fff;font:700 9px var(--font-mono);background:#090a0a;margin-top:20px;padding:14px 18px;display:inline-block}.lesson-list{max-width:1280px;margin:auto;padding:0 24px 90px}.lesson{background:#fff;border:1px solid #d8d9d3;grid-template-columns:300px 1fr;margin-bottom:18px;display:grid}.lesson-copy{border-right:1px solid #d8d9d3;padding:30px}.lesson-copy h2{letter-spacing:-.045em;margin:14px 0;font-size:32px}.lesson-copy>p{color:#686b65;font-size:11px;line-height:1.65}.transfer{border-top:1px solid #ddd;margin-top:30px;padding-top:18px;font-size:10px;line-height:1.55}.transfer b{font:700 8px var(--font-mono);color:#6a9d20;margin-bottom:7px;display:block}.comparison{grid-template-columns:1fr 1fr;gap:12px;padding:18px;display:grid}.comparison>div{background:#f8f8f4;border:1px solid #dfe0da}.demo-label{flex-direction:column;gap:6px;height:72px;padding:14px;display:flex}.demo-label b{font:800 9px var(--font-mono);color:#5b8b16}.demo-label.wrong b{color:#a33}.demo-label span{color:#73766f;font-size:9px;line-height:1.35}.motion-demo{background:#0a0b0b;height:250px;position:relative;overflow:hidden}.grid-lines{background-image:linear-gradient(#282b281c 1px,#0000 1px),linear-gradient(90deg,#282b281c 1px,#0000 1px);background-size:26px 26px;position:absolute;inset:0}.target{border:1px solid #b9ff3d;border-radius:50%;width:34px;height:34px;position:absolute;top:43%;right:16%;transform:translateY(-50%)}.target i{background:#b9ff3d;border-radius:50%;width:6px;height:6px;position:absolute;inset:50%;transform:translate(-50%,-50%)}.crosshair{width:22px;height:22px;animation-duration:3.2s;animation-timing-function:cubic-bezier(.55,.08,.25,1);animation-iteration-count:infinite;position:absolute;top:72%;left:14%;transform:translate(-50%,-50%)}.crosshair i{background:#fff;position:absolute}.crosshair i:first-child{width:22px;height:1px;top:10px}.crosshair i:last-child{width:1px;height:22px;left:10px}.trail{opacity:.65;position:absolute}.good.static .trail{clip-path:polygon(0 100%,0 calc(100% - 2px),100% 0,100% 2px);background:#b9ff3d;inset:43% calc(16% + 17px) 28% 14%}.good.static .crosshair{animation-name:straight}.bad.static .crosshair{animation-name:curve}.bad.static .trail{background:0 0;border:0 dashed #c85555;border-width:1px 0 0 1px;border-top-left-radius:100%;inset:43% calc(16% + 17px) 28% 14%}@keyframes straight{0%,12%{top:72%;left:14%}65%,88%{top:43%;left:calc(84% - 17px)}to{top:72%;left:14%}}@keyframes curve{0%,12%{top:72%;left:14%}32%{top:28%;left:35%}52%{top:22%;left:64%}72%,88%{top:43%;left:calc(84% - 17px)}to{top:72%;left:14%}}.smooth .target{animation:3s ease-in-out infinite target-strafe;right:auto}.smooth .crosshair{animation-duration:3s;top:43%}.good.smooth .crosshair{animation-name:smooth-follow;animation-timing-function:ease-in-out}.bad.smooth .crosshair{animation-name:jitter-follow;animation-timing-function:linear}.smooth .trail{display:none}@keyframes target-strafe{0%,to{left:18%}50%{left:78%}}@keyframes smooth-follow{0%,to{top:43%;left:calc(18% + 17px)}50%{top:43%;left:calc(78% + 17px)}}@keyframes jitter-follow{0%,to{top:48%;left:10%}10%{top:43%;left:18%}20%{top:53%;left:27%}30%{top:45%;left:34%}40%{top:54%;left:49%}50%{top:44%;left:69%}60%{top:53%;left:58%}75%{top:45%;left:39%}90%{top:54%;left:23%}}.tension{font:700 7px var(--font-mono);color:#777;position:absolute;bottom:14px;left:14px;right:14px}.tension b{transform-origin:0;background:#b9ff3d;height:4px;margin-top:5px;animation:3s ease-in-out infinite breathe;display:block}.bad .tension b{background:#d34;animation:1s steps(3,end) infinite tight}@keyframes breathe{0%,to{transform:scaleX(.2)}50%{transform:scaleX(.42)}}@keyframes tight{0%,to{transform:scaleX(.8)}50%{transform:scaleX(1)}}.reactive .target{animation:3.2s ease-in-out infinite reactive-target;top:44%;right:auto}.reactive .crosshair{animation-duration:3.2s;top:44%}.good.reactive .crosshair{animation-name:react-good}.bad.reactive .crosshair{animation-name:react-bad}.reactive .trail{display:none}.direction{font:700 7px var(--font-mono);color:#777;position:absolute;top:14px;left:50%;transform:translate(-50%)}@keyframes reactive-target{0%,12%{left:18%}46%,58%{left:78%}92%,to{left:30%}}@keyframes react-good{0%,17%{top:44%;left:calc(18% + 17px)}51%,63%{top:44%;left:calc(78% + 17px)}97%,to{top:44%;left:calc(30% + 17px)}}@keyframes react-bad{0%{left:12%}35%{left:88%}52%{left:62%}76%{left:17%}to{left:38%}}.micro .trail{display:none}.micro .target{top:35%;right:18%}.micro .crosshair{animation-duration:3.2s}.good.micro .crosshair{animation-name:micro-good}.bad.micro .crosshair{animation-name:micro-bad}.correction-label{font:700 7px var(--font-mono);color:#777;position:absolute;top:16%;right:12%}@keyframes micro-good{0%,12%{top:70%;left:14%}58%{top:39%;left:calc(82% - 17px)}72%,88%{top:35%;left:calc(82% - 17px)}to{top:70%;left:14%}}@keyframes micro-bad{0%,12%{top:70%;left:14%}48%{top:27%;left:84%}58%{top:39%;left:69%}68%{top:29%;left:83%}78%,88%{top:35%;left:calc(82% - 17px)}to{top:70%;left:14%}}.guide-footer{color:#fff;background:#0a0b0b;max-width:1232px;margin:0 auto 90px;padding:45px;position:relative;overflow:hidden}.guide-footer:after{content:"";background:#b9ff3d;border-radius:50%;width:220px;height:220px;position:absolute;top:-100px;right:-50px}.guide-footer h2{margin:12px 0;font-size:42px}.guide-footer p{color:#a5a7a1;max-width:500px;font-size:11px;line-height:1.6}.guide-footer a{color:#090a0a;font:700 8px var(--font-mono);background:#b9ff3d;margin-top:14px;padding:13px 16px;display:inline-block}@media (max-width:900px){.guide-hero,.lesson{grid-template-columns:1fr}.lesson-copy{border-bottom:1px solid #ddd;border-right:0}.guide-hero{gap:25px}.comparison{grid-template-columns:1fr}.motion-demo{height:220px}}@media (max-width:560px){.guides-page header nav a:last-child{display:none}.guide-hero,.gate{padding-top:55px}.lesson-list{padding-inline:12px}.lesson-copy{padding:22px}.comparison{padding:10px}.demo-label{height:auto;min-height:70px}.guide-footer{margin:0 12px 50px;padding:30px}.guide-footer:after{display:none}}.guides-page.paused .motion-demo *{animation-play-state:paused!important}