:root{color-scheme:dark;--bg: #05070b;--bg-elevated: #090d14;--panel: rgba(13, 18, 29, .86);--panel-strong: #0d121d;--panel-soft: rgba(255, 255, 255, .045);--ink: #f4f7fb;--muted: #a9b4c6;--subtle: #7e8da3;--line: rgba(181, 204, 237, .18);--line-strong: rgba(190, 213, 246, .28);--accent: #3f7cff;--teal: #0fd4da;--green: #2ee58c;--orange: #ff9a3d;--violet: #9a67ff;--shadow: 0 30px 80px rgba(0, 0, 0, .42);--small-shadow: 0 18px 42px rgba(0, 0, 0, .28);--nav-height: 72px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;overflow-x:hidden;background:radial-gradient(circle at 50% 0%,rgba(37,83,160,.12),transparent 34rem),linear-gradient(180deg,#010106,#04070d 42rem,#05070b)}body,button,input{font:inherit}a{color:inherit;text-decoration:none}button{border:0}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,video:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site{--mode-accent: var(--accent);position:relative;isolation:isolate;min-height:100vh}.site:before{position:fixed;inset:0;z-index:-2;pointer-events:none;content:"";background:radial-gradient(circle at 18% 28%,rgba(63,124,255,.07),transparent 28rem),radial-gradient(circle at 86% 36%,rgba(15,212,218,.055),transparent 32rem),linear-gradient(180deg,#01010652,#05070be6 52%,#05070b)}.topNav{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(120px,1fr);align-items:center;gap:24px;width:100%;min-height:var(--nav-height);padding:16px clamp(18px,5vw,56px);background:#05070bd1;border-bottom:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.brand{display:inline-flex;align-items:center;justify-self:start;min-width:0}.brandLogo{display:block;width:188px;max-width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(35,202,255,.16))}.topNav nav{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,38px);min-width:0}.topNav nav a,.githubLink{position:relative;color:#d7deeb;font-size:14px;font-weight:760;line-height:1;white-space:nowrap}.topNav nav a{display:inline-flex;align-items:center;min-height:34px}.topNav nav a:after{position:absolute;right:0;bottom:2px;left:0;height:1px;content:"";background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .16s ease}.topNav nav a:hover,.githubLink:hover{color:#fff}.topNav nav a:hover:after{transform:scaleX(1)}.githubLink{display:inline-flex;align-items:center;justify-content:center;justify-self:end;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#ffffff14;box-shadow:0 12px 32px #00000038}main{position:relative;width:100%;background:linear-gradient(180deg,#010106,#02050a 38rem,#05070b 64rem 100%)}.hero{position:relative;isolation:isolate;min-height:calc(100vh - var(--nav-height) - 34px);display:flex;align-items:center;justify-content:center;width:100%;margin:0 auto;padding:78px max(36px,calc((100vw - 1280px)/2 + 36px)) 78px;overflow:hidden;border-bottom:1px solid rgba(181,204,237,.11)}.heroBackdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#010106,#02040a 68%,#04070d)}.heroBackdrop:after{position:absolute;inset:0;content:"";background:radial-gradient(circle at 50% 42%,rgba(36,93,184,.14),transparent 43%),linear-gradient(90deg,#010106a8,#01010614,#010106a8),linear-gradient(180deg,#0101060f,#01010614 62%,#04070d)}.heroGrid{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(205,230,255,.06) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),repeating-linear-gradient(90deg,rgba(212,229,255,.012) 0 1px,transparent 1px 132px),repeating-linear-gradient(0deg,rgba(212,229,255,.008) 0 1px,transparent 1px 132px);opacity:.48;-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.86),transparent 80%);mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.86),transparent 80%)}.heroScan{position:absolute;inset:-30% 0;background:linear-gradient(100deg,transparent 41%,rgba(175,218,255,.018) 50%,transparent 59%);animation:heroScan 24s ease-in-out infinite;opacity:.28}.heroGlow{position:absolute;border-radius:999px;filter:blur(112px);opacity:.24}.heroGlowOne{top:20%;left:50%;width:700px;height:360px;background:#2765c629;transform:translate(-50%)}.heroGlowTwo{right:50%;bottom:8%;width:760px;height:300px;background:#1180b40e;opacity:.12;transform:translate(50%)}.heroCopy{position:relative;z-index:1;width:min(100%,1120px);max-width:1120px;margin:0 auto;padding:24px 0;text-align:center}.heroCopy:before{position:absolute;inset:-46px -74px -44px;z-index:-1;display:none;content:"";border-radius:999px;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.76),rgba(0,0,0,.42) 38%,transparent 72%);filter:blur(12px)}.heroTitleMedia{position:relative;width:min(88vw,1030px);height:min(25.25vw,296px);aspect-ratio:2510 / 720;margin:0 auto;display:grid;place-items:center}.heroTitleVideo{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;opacity:0;object-fit:contain;pointer-events:none;filter:brightness(1.12) contrast(1.06) saturate(1.16) drop-shadow(0 0 22px rgba(69,133,255,.2));transition:opacity .32s ease}.heroTitleMedia.isVideoReady .heroTitleVideo{opacity:1}.heroTitleMedia.isVideoFailed .heroTitleVideo{display:none}.heroTitleFallback{position:relative;z-index:3;grid-area:1 / 1;opacity:1;color:#fff;font-size:clamp(58px,7vw,96px);line-height:1.02;letter-spacing:0;font-weight:900;text-shadow:0 18px 68px rgba(0,0,0,.58);text-wrap:balance;transition:opacity .18s ease}.heroTitleMedia.isVideoFailed .heroTitleFallback{opacity:1}.heroTitleMedia.isVideoReady .heroTitleFallback{opacity:0}.hero p{max-width:760px;margin:clamp(14px,1.5vw,22px) auto 0;color:#d3dbea;font-size:clamp(18px,1.6vw,23px);line-height:1.6;white-space:nowrap;text-shadow:0 12px 38px rgba(0,0,0,.48)}.heroActions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}.primaryAction,.secondaryAction{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:820;line-height:1}.primaryAction{position:relative;overflow:hidden;background:linear-gradient(135deg,#2f6fff,#5b8cff 46%,#0fd4da);color:#fff;box-shadow:none}.primaryAction:after{position:absolute;inset:1px;content:"";border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);pointer-events:none}.primaryAction>*{position:relative;z-index:1}@keyframes heroScan{0%{transform:translate(-62%) skew(-8deg)}52%{transform:translate(32%) skew(-8deg)}to{transform:translate(72%) skew(-8deg)}}.section{position:relative;width:min(100%,1280px);margin:0 auto;padding:58px 36px 68px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-height) + 18px)}.sectionHead{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:26px}.sectionHead h2{margin:0;color:#fff;font-size:42px;line-height:1.08;font-weight:900;letter-spacing:0}.sectionHead p{max-width:560px;margin:0;color:var(--muted);font-size:15px;line-height:1.6}.featureGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.featureCard{position:relative;display:flex;flex-direction:column;min-height:386px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#fff1,#ffffff07),#090d14e0;box-shadow:var(--small-shadow);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.featureCard:before{position:absolute;top:0;right:0;left:0;height:2px;content:"";background:linear-gradient(90deg,var(--mode-accent),transparent)}.featureCard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--mode-accent) 42%,var(--line));box-shadow:0 26px 60px #00000061}.featureMedia{position:relative;overflow:hidden;background:#080c13}.featureMedia img,.featureMedia video{display:block;width:100%;aspect-ratio:1.55 / 1;object-fit:cover;opacity:.86;filter:saturate(.94) contrast(1.06);transform:scale(1.01)}.featureMedia:after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,transparent 42%,rgba(5,7,11,.72));pointer-events:none}.featureMedia span{position:absolute;right:12px;bottom:10px;z-index:1;color:color-mix(in srgb,var(--mode-accent) 76%,#ffffff);font-size:12px;font-weight:900}.featureCardBody{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px}.quickStep h3,.featureCard h3{margin:0;color:#fff;font-size:18px;line-height:1.25;font-weight:840}.quickStep p,.featureCard p{margin:9px 0 0;color:var(--muted);font-size:14px;line-height:1.58}.featureCard a{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:auto;padding-top:20px;color:color-mix(in srgb,var(--mode-accent) 78%,#ffffff);font-size:13px;font-weight:860}.arrowIcon{width:18px;height:18px;flex:0 0 auto;margin-left:10px}.featureCard .arrowIcon{width:15px;height:15px;margin-left:0}.quickGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.osTabs{display:inline-flex;gap:4px;margin-bottom:20px;padding:4px;border:1px solid var(--line);border-radius:8px;background:#ffffff09}.osTabs button{min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;font-weight:820}.osTabs button.active{border-color:#3f7cff7a;background:#3f7cff29;color:#fff}.quickStep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;min-height:268px;padding:20px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#ffffff0f,#ffffff06),#090d14e0;box-shadow:var(--small-shadow)}.quickStepRail{position:relative;display:flex;justify-content:center}.quickStepRail:after{position:absolute;top:42px;bottom:0;width:1px;content:"";background:linear-gradient(180deg,rgba(63,124,255,.62),transparent)}.stepNumber{position:relative;z-index:1;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(63,124,255,.58);border-radius:8px;background:#3f7cff29;color:#fff;font-size:14px;font-weight:900;box-shadow:0 0 24px #3f7cff38}.codePanel{margin-top:18px;overflow:hidden;border:1px solid rgba(154,190,255,.18);border-radius:8px;background:#05070b}.codePanelTop{height:31px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);background:#ffffff0a}.windowDots{display:inline-flex;gap:7px}.windowDots i{width:8px;height:8px;display:block;border-radius:999px;background:#ff665f}.windowDots i:nth-child(2){background:#ffbd2d}.windowDots i:nth-child(3){background:#28c840}.copyButton{min-height:25px;padding:0 9px;border:1px solid rgba(154,190,255,.22);border-radius:5px;background:#ffffff0e;color:#cbd8ea;cursor:pointer;font-size:11px;font-weight:800}.copyButton:hover{border-color:#9abeff6b;color:#fff}.quickStep pre{min-height:104px;margin:0;overflow:hidden;padding:14px;color:#dce8ff;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.footer{width:min(100%,1280px);margin:0 auto;display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(120px,.6fr));gap:42px;padding:44px 36px 58px;border-top:1px solid var(--line)}.footer p{max-width:340px;margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.6}.footer .brandLogo{width:210px}.footer h3{margin:0 0 12px;color:#fff;font-size:13px;font-weight:860}.footer a{display:block;margin-top:9px;color:var(--muted);font-size:13px}.footer a:hover{color:#fff}.workflowTutorial{border:1px solid var(--line-strong);border-radius:8px;background:linear-gradient(180deg,#ffffff0f,#ffffff07),#060a11e6;box-shadow:var(--shadow);overflow:hidden}.workflowTabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;padding:8px;border-bottom:1px solid var(--line);background:#ffffff09}.workflowTabs button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:11px 10px;color:#aeb9ca;background:#ffffff09;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:820;line-height:1.2}.workflowTabs button:hover{color:#fff;background:#ffffff0e}.workflowTabs button.active{color:#fff;border-color:color-mix(in srgb,var(--mode-accent) 46%,rgba(255,255,255,.14));background:color-mix(in srgb,var(--mode-accent) 17%,rgba(255,255,255,.04));box-shadow:inset 0 -2px 0 var(--mode-accent),0 0 24px color-mix(in srgb,var(--mode-accent) 20%,transparent)}.tabLabelShort{display:none}.workflowLayout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),#04070cb8}.tutorialSteps{position:relative;grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;min-width:0}.tutorialSteps:before{position:absolute;top:18px;bottom:18px;left:25px;width:1px;content:"";background:linear-gradient(180deg,var(--mode-accent),rgba(255,255,255,.08),transparent)}.tutorialSteps button{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-height:58px;padding:10px;border:1px solid rgba(190,213,246,.16);border-radius:8px;background:#ffffff0a;color:#c8d2e0;text-align:left;cursor:pointer;box-shadow:0 12px 26px #0003}.tutorialSteps button:hover{border-color:#ffffff3d;background:#ffffff0f}.tutorialSteps button>span{position:relative;z-index:1;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(207,224,255,.2);border-radius:8px;color:#aeb9ca;background:#080c13;font-size:12px;font-weight:900}.tutorialSteps button b{display:block;color:#edf3fb;font-size:13px;line-height:1.25}.tutorialSteps button.active{border-color:color-mix(in srgb,var(--mode-accent) 52%,rgba(255,255,255,.18));background:color-mix(in srgb,var(--mode-accent) 13%,rgba(255,255,255,.04));box-shadow:0 18px 34px #00000042}.tutorialSteps button.active>span{color:#fff;border-color:var(--mode-accent);background:var(--mode-accent);box-shadow:0 0 22px color-mix(in srgb,var(--mode-accent) 38%,transparent)}.tutorialStageWorkspace{grid-column:2;grid-row:1;min-width:0;border:1px solid rgba(190,213,246,.17);border-radius:8px;background:#080c13e6;box-shadow:0 18px 42px #00000047;overflow:hidden}.tutorialStageHeader{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border-bottom:1px solid rgba(190,213,246,.14);background:#ffffff09}.tutorialPrompt{margin:0;max-width:100%;color:#c8d2e0;font-size:13px;line-height:1.5}.lessonNavigation{display:flex;flex-wrap:wrap;justify-content:end;gap:8px}.lessonNavigation button{min-height:38px;padding:0 12px;border:1px solid rgba(190,213,246,.18);border-radius:8px;color:#e8eef8;background:#ffffff0e;cursor:pointer;font-size:13px;font-weight:840}.lessonNavigation button:hover{border-color:#ffffff47;background:#ffffff14}.lessonNavigation button:disabled{opacity:.42;cursor:not-allowed}.lessonNavigation button.primary{color:#fff;border-color:var(--mode-accent);background:var(--mode-accent);box-shadow:0 12px 28px color-mix(in srgb,var(--mode-accent) 25%,transparent)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media(max-width:1120px){.heroCopy{max-width:920px}.heroTitleMedia{width:min(92vw,880px);height:min(26.39vw,252px)}.featureGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.workflowLayout{grid-template-columns:178px minmax(0,1fr)}}@media(max-width:920px){.topNav{grid-template-columns:1fr auto;gap:12px 18px}.topNav nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start;overflow-x:auto;padding-bottom:3px}.githubLink{grid-column:2;grid-row:1}.hero,.section,.footer{padding-right:20px;padding-left:20px}.heroTitleFallback{font-size:52px}.hero p{font-size:18px}.sectionHead{display:block}.sectionHead p{margin-top:10px}.quickGrid{grid-template-columns:1fr}.workflowTabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.workflowTabs button{min-width:142px;scroll-snap-align:start}.tutorialStageHeader{grid-template-columns:1fr}.workflowLayout{grid-template-columns:1fr;padding:12px}.tutorialStageWorkspace{grid-column:1;grid-row:1}.tutorialSteps{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tutorialSteps:before{content:none}.lessonNavigation{justify-content:start}.footer{grid-template-columns:1fr 1fr}}@media(max-width:640px){:root{--nav-height: 104px}.topNav{padding:14px 16px}.brandLogo{width:172px}.githubLink{min-height:36px;padding:0 12px;font-size:13px}.topNav nav{gap:16px}.topNav nav a{min-height:28px;font-size:13px}.hero{min-height:calc(100vh - var(--nav-height) - 44px);padding-top:46px;padding-bottom:54px}.heroTitleMedia{width:min(100%,620px);height:min(28.7vw,178px)}.heroTitleFallback{max-width:340px;font-size:38px;line-height:1.1;overflow-wrap:break-word}.hero p{font-size:16px;white-space:normal}.heroActions{display:flex;width:auto;justify-content:center}.primaryAction,.secondaryAction{width:auto;min-width:172px}.section{padding-top:44px;padding-bottom:54px}.sectionHead h2{font-size:34px}.featureGrid,.footer{grid-template-columns:1fr}.featureCard{min-height:0}.quickStep{grid-template-columns:1fr;min-height:0}.quickStepRail{justify-content:flex-start}.quickStepRail:after{content:none}.workflowTutorial{margin-left:-4px;margin-right:-4px}.workflowTabs{display:flex;overflow-x:auto;padding:6px}.workflowTabs button{min-width:132px;min-height:48px;padding:9px 4px;font-size:12px}.tabLabelFull{display:inline}.tabLabelShort{display:none}.tutorialSteps{grid-template-columns:1fr}.tutorialStageHeader{padding:14px}.tutorialPrompt{white-space:normal}.lessonNavigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.lessonNavigation button{width:100%}}.tutorialStageShell{position:relative;min-width:0;overflow:hidden;background:#05070b}.tutorialViewport{position:relative;width:100%;overflow:hidden;overscroll-behavior-y:auto;touch-action:pan-y;background:#030509}.tutorialCanvas{position:relative;width:100%;margin:0 auto;overflow:hidden;background:#030509}.tutorialCanvas img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.tutorialTargetBox{position:absolute;z-index:2;border:2px solid color-mix(in srgb,var(--mode-accent) 80%,#ffffff);border-radius:10px;background:color-mix(in srgb,var(--mode-accent) 5%,transparent);pointer-events:none;box-shadow:0 0 0 1px #ffffffdb,0 0 24px color-mix(in srgb,var(--mode-accent) 34%,transparent);transition:background .16s ease,box-shadow .16s ease}.tutorialTargetBox:before{position:absolute;inset:-12px;border:1px solid color-mix(in srgb,var(--mode-accent) 72%,transparent);border-radius:15px;content:"";animation:manualTargetPulse 1.8s ease-out infinite}.tutorialTargetBox:has(+.tutorialTarget:hover),.tutorialTargetBox:has(+.tutorialTarget:focus-visible){background:color-mix(in srgb,var(--mode-accent) 13%,transparent);box-shadow:0 0 0 2px #fff,0 0 32px color-mix(in srgb,var(--mode-accent) 52%,transparent)}.tutorialTarget{position:absolute;z-index:3;min-width:44px;min-height:44px;padding:0;border:0;color:#fff;background:transparent;cursor:pointer;transform:translate(-50%,-50%)}.tutorialTarget>span{position:absolute;top:-15px;right:-15px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #ffffff;border-radius:50%;color:#fff;background:var(--mode-accent);box-shadow:0 8px 22px #0000006b;font-size:11px;font-weight:950}.imageFallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;color:#fff;text-align:center;background:linear-gradient(135deg,rgba(31,111,255,.14),transparent),#0a101a}.imageFallback span{color:#ffbf70;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.imageFallback h4{margin:8px 0 0;font-size:25px}.imageFallback p{max-width:540px;margin:8px 0 0;color:#b8c3d2;font-size:13px;line-height:1.5}.tutorialTarget:focus-visible,.tutorialSteps button:focus-visible,.workflowTabs button:focus-visible,.lessonNavigation button:focus-visible{outline:3px solid #ffffff;outline-offset:3px}@keyframes manualTargetPulse{0%{opacity:.9;transform:scale(.98)}to{opacity:0;transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.tutorialTargetBox:before{animation:none;opacity:.72}.tutorialTargetBox{transition:none}}