.landing-root.guide-root{min-height:100vh}.landing-root .guide-main{padding:0}.landing-root .guide-hero{text-align:center;height:500px;padding:clamp(92px,12vw,150px) 0 clamp(82px,10vw,126px)}.landing-root .guide-eyebrow{color:#fafafac7;background:#202020b8;border:1px solid #ffffff1a;border-radius:999px;width:fit-content;margin:0 auto 24px;padding:8px 16px;font-size:15px;font-weight:600}.landing-root .guide-brand-word{font-family:var(--font-brand);font-weight:600}.landing-root .guide-hero h1{color:#fafafab8;letter-spacing:0;gap:4px;margin:0;font-size:44px;font-weight:600;line-height:1.451;display:grid}.landing-root .guide-hero h1 strong{color:#0000;background:linear-gradient(90deg,#fffa5f,var(--accent-2));-webkit-background-clip:text;background-clip:text;font-weight:700}.landing-root .guide-tabbar{z-index:8;-webkit-backdrop-filter:blur(18px)saturate(145%);background:#0f0f0f94;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:fit-content;margin:-44px auto 86px;padding:7px;display:flex;position:sticky;top:126px;box-shadow:0 16px 48px #00000038}.landing-root .guide-tab{color:#fafafa94;min-width:150px;height:40px;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:9px;font-size:15px;font-weight:700;transition:color .2s,background .2s,box-shadow .2s}.landing-root .guide-tab:hover{color:var(--text)}.landing-root .guide-tab.active{color:var(--text);background:#eaff5f21;box-shadow:inset 0 0 0 1px #eaff5f57,0 0 22px #eaff5f1f}.landing-root .guide-panel{width:min(1160px,100%);margin:0 auto}.landing-root .guide-panel-head{width:min(1200px,100%);margin:0 0 72px}.landing-root .guide-panel-kicker,.landing-root .guide-step-index{color:var(--accent);font-weight:700}.landing-root .guide-panel-head h2{color:var(--text);letter-spacing:-.01em;margin:12px 0 18px;font-size:clamp(34px,4.4vw,58px);font-weight:650;line-height:1.32}.landing-root .guide-panel-head p{color:#fafafab8;margin:0;font-size:clamp(17px,1.7vw,20px);line-height:1.82}.landing-root .guide-steps{flex-direction:column;gap:30px;display:flex}.landing-root .guide-step-card{background:linear-gradient(120deg,#ffffff0a,#ffffff05),#1c1c1cd6;border:1px solid #ffffff1f;border-radius:16px;grid-template-columns:minmax(280px,390px) minmax(0,1fr);grid-template-areas:"copy media";align-items:center;gap:36px;width:100%;padding:clamp(28px,4vw,42px);display:grid;box-shadow:inset 0 1px #ffffff14,0 22px 70px #0000003d}.landing-root .guide-step-card.text-only{grid-template-columns:1fr;grid-template-areas:"copy"}.landing-root .guide-step-copy{grid-area:copy;width:700px;min-width:0}.landing-root .guide-step-index{background:#eaff5f17;border:1px solid #eaff5f3b;border-radius:12px;justify-content:center;align-items:center;width:42px;height:42px;margin-bottom:22px;font-size:15px;display:inline-flex}.landing-root .guide-step-copy h3{color:var(--text);letter-spacing:-.01em;margin:0 0 14px;font-size:clamp(25px,2.8vw,32px);font-weight:650;line-height:1.32}.landing-root .guide-step-copy p{color:#fafafac2;margin:0 0 18px;font-size:16px;line-height:1.78}.landing-root .guide-step-copy ul{color:#fafafadb;gap:10px;margin:0;padding:0;font-size:15px;line-height:1.55;list-style:none;display:grid}.landing-root .guide-step-copy li{padding-left:26px;position:relative}.landing-root .guide-step-copy li:before{content:"";background:var(--accent);border:0;border-radius:999px;width:7px;height:7px;position:absolute;top:.63em;left:0;box-shadow:0 0 10px #eaff5f38}.landing-root .guide-step-copy li:after{content:none}.landing-root .guide-figure,.landing-root .guide-figure-stack{grid-area:media}.landing-root .guide-figure{background:#111;border:1px solid #ffffff1a;border-radius:16px;justify-self:stretch;min-width:0;margin:0;overflow:hidden;box-shadow:0 24px 54px #0000004d}.landing-root .guide-figure img{-o-object-fit:contain;object-fit:contain;width:100%;height:100%;display:block}.landing-root .guide-figure.compact{background:0 0;justify-self:end;width:fit-content;max-width:370px}.landing-root .guide-figure.compact img{width:auto;max-width:100%;height:auto;max-height:430px}.landing-root .guide-figure.map-compact{background:0 0;justify-self:end;width:fit-content;max-width:480px}.landing-root .guide-figure.map-compact img{width:auto;max-width:100%;height:auto;max-height:430px}.landing-root .guide-figure.full{justify-content:center;align-items:center;height:380px;min-height:0;display:flex}.landing-root .guide-figure.full img{width:100%;height:auto;max-height:100%}.landing-root .guide-figma-edit{background:#202020;height:430px}.landing-root .guide-figma-topbar{color:#ffffffe0;background:#2c2c2c;border-bottom:1px solid #ffffff14;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;height:42px;padding:0 14px;display:grid}.landing-root .guide-figma-topbar strong{font-size:12px;font-weight:600}.landing-root .guide-figma-topbar button{color:#fff;background:#0d99ff;border:0;border-radius:6px;height:26px;padding:0 13px;font-size:11px;font-weight:700}.landing-root .guide-figma-logo{width:20px;height:28px;position:relative}.landing-root .guide-figma-logo span{border-radius:99px;width:10px;height:10px;position:absolute}.landing-root .guide-figma-logo span:first-child{background:#f24e1e;top:0;left:0}.landing-root .guide-figma-logo span:nth-child(2){background:#ff7262;top:0;left:10px}.landing-root .guide-figma-logo span:nth-child(3){background:#a259ff;top:9px;left:0}.landing-root .guide-figma-logo span:nth-child(4){background:#1abcfe;top:9px;left:10px}.landing-root .guide-figma-logo span:nth-child(5){background:#0acf83;top:18px;left:0}.landing-root .guide-figma-body{grid-template-columns:116px minmax(0,1fr) 128px;min-width:0;height:calc(100% - 42px);display:grid}.landing-root .guide-figma-layers,.landing-root .guide-figma-properties{color:#ffffffb8;background:#2b2b2b;min-width:0;padding:14px 10px;font-size:10px}.landing-root .guide-figma-layers{border-right:1px solid #00000059;align-content:start;gap:9px;display:grid}.landing-root .guide-figma-layers strong,.landing-root .guide-figma-properties>strong{color:#f5f5f5;font-size:12px;font-weight:700}.landing-root .guide-figma-layers span{text-overflow:ellipsis;white-space:nowrap;border-radius:5px;padding:6px 8px;overflow:hidden}.landing-root .guide-figma-layers span:not(.active){opacity:.72}.landing-root .guide-figma-layers span.active{color:#fff;background:#eaff5f1f;border:1px solid #eaff5f94}.landing-root .guide-figma-canvas{background-color:#181818;background-image:linear-gradient(#ffffff0b 1px,#0000 1px),linear-gradient(90deg,#ffffff0b 1px,#0000 1px);background-size:24px 24px;place-items:center;min-width:0;display:grid;position:relative;overflow:hidden}.landing-root .guide-figma-frame-label{color:#ffffffa8;width:min(520px,100% - 24px);font-size:11px;font-weight:700;position:absolute;top:19px;left:calc(50% + 46px);transform:translate(-50%)}.landing-root .guide-figma-frame{box-sizing:border-box;background:#f4f6fa;border-radius:4px;width:min(520px,100% - 24px);padding:64px 56px;box-shadow:0 20px 52px #00000061}.landing-root .guide-figma-card{box-sizing:border-box;color:#111827;background:#fff;border:1px solid #dfe5ee;border-radius:16px;gap:10px;width:100%;padding:22px 24px;display:grid;position:relative;box-shadow:0 12px 38px #1e293b24}.landing-root .guide-figma-card small{color:#7d8797;font-size:10px;font-weight:700}.landing-root .guide-figma-card strong{text-overflow:ellipsis;white-space:nowrap;font-size:20px;line-height:1.1;overflow:hidden}.landing-root .guide-figma-card p{color:#667085;margin:0;font-size:11px;line-height:1.45}.landing-root .guide-figma-card button{z-index:1;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-inline-size:0;background:var(--accent);color:#111;border:0;border-radius:14px;justify-self:stretch;height:38px;padding:0 16px;font-size:12px;font-weight:800;transition:background-color .55s cubic-bezier(.16,1,.3,1),box-shadow .55s;position:relative;box-shadow:0 0 0 1px #11111114}.landing-root .guide-figma-edit.applied .guide-figma-card button{box-shadow:0 0 0 1px #11111114,0 8px 22px #eaff5f73}.landing-root .guide-figma-selection{pointer-events:none;border:1.5px solid #0d99ff;border-radius:14px;height:40px;animation:.2s cubic-bezier(.16,1,.3,1) guideSelectIn;position:absolute;bottom:21px;left:24px;right:24px}.landing-root .guide-figma-selection .handle{background:#fff;border:1px solid #0d99ff;border-radius:1px;width:7px;height:7px;position:absolute}.landing-root .guide-figma-selection .handle.tl{top:-4px;left:-4px}.landing-root .guide-figma-selection .handle.tr{top:-4px;right:-4px}.landing-root .guide-figma-selection .handle.bl{bottom:-4px;left:-4px}.landing-root .guide-figma-selection .handle.br{bottom:-4px;right:-4px}@keyframes guideSelectIn{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}.landing-root .guide-click-ripple{pointer-events:none;z-index:6;background:#b0b0b0eb;border-radius:50%;width:30px;height:30px;margin:-15px 0 0 -15px;animation:.6s cubic-bezier(.16,1,.3,1) forwards guideClickRipple;position:absolute;top:50%;left:50%}@keyframes guideClickRipple{0%{opacity:.92;transform:scale(.25)}70%{opacity:.32}to{opacity:0;transform:scale(2.6)}}.landing-root .guide-figma-properties{border-left:1px solid #00000059;align-content:start;gap:12px;display:grid}.landing-root .guide-figma-properties label{color:#f2f2f2;gap:6px;font-weight:700;display:grid}.landing-root .guide-figma-properties label>span{color:#ffffffb3;text-overflow:ellipsis;white-space:nowrap;background:#ffffff13;border-radius:5px;align-items:center;gap:7px;min-width:0;padding:6px 8px;font-weight:600;display:flex;position:relative;overflow:hidden}.landing-root .guide-figma-properties label>span.guide-fill-row{transition:box-shadow .2s,background-color .2s}.landing-root .guide-figma-properties label>span.guide-fill-row.active{background:#eaff5f1f;box-shadow:0 0 0 1px #eaff5fb3}.landing-root .guide-figma-properties i{background:var(--accent);border-radius:4px;flex:none;width:13px;height:13px;transition:background-color .55s cubic-bezier(.16,1,.3,1);box-shadow:inset 0 0 0 1px #ffffff1f}.landing-root .guide-fill-label{position:relative}.landing-root .guide-color-popover{z-index:8;background:#2c2c2c;border:1px solid #ffffff24;border-radius:9px;width:184px;padding:10px;animation:.16s cubic-bezier(.16,1,.3,1) guidePopoverIn;position:absolute;top:54px;right:0;box-shadow:0 18px 44px #00000073}@keyframes guidePopoverIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.landing-root .guide-color-field{color:#fff;background:#383838;border-radius:6px;align-items:center;gap:7px;height:30px;padding:0 8px;font-size:11px;font-weight:800;display:flex}.landing-root .guide-color-field span{border:1px solid #fff3;border-radius:4px;flex:none;width:14px;height:14px}.landing-root .guide-swatch-grid{grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px;display:grid}.landing-root .guide-swatch-grid .swatch{aspect-ratio:1;border:1px solid #fff3;border-radius:7px;width:100%;position:relative}.landing-root .guide-swatch-grid .swatch.target.active{border-color:#eaff5ff2;box-shadow:0 0 0 2px #eaff5fe6,0 0 16px #eaff5f80}.landing-root .guide-figure-stack{grid-template-columns:repeat(2,minmax(0,1fr));justify-self:end;align-items:center;gap:18px;width:min(500px,100%);display:grid}.landing-root .guide-figure-stack .guide-figure{height:420px;min-height:0}.landing-root .guide-code{color:var(--accent);background:#111;border:1px solid #ffffff1a;border-radius:10px;margin:18px 0 0;padding:16px 18px;overflow-x:auto}.landing-root .guide-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1.7}.landing-root .guide-code-diff{gap:8px;padding:12px;display:grid;overflow-x:hidden}.landing-root .guide-diff-line{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:6px;margin:0;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.6}.landing-root .guide-diff-line.remove{color:#d2d2d2;background:#5a2020}.landing-root .guide-diff-line.add{color:#fff;background:#114116}.landing-root .guide-diff-hl{color:var(--accent);font-weight:700}.landing-root.guide-root .landing-footer{margin-top:68px}@media (max-width:960px){.landing-root .guide-main{padding:0}.landing-root .guide-hero{padding:72px 0 88px}.landing-root .guide-tabbar{width:100%;margin:-42px auto 72px;position:static}.landing-root .guide-tab{flex:1;min-width:0}.landing-root .guide-panel-head{margin-bottom:42px}.landing-root .guide-step-card{grid-template-columns:1fr;grid-template-areas:"copy""media"}.landing-root .guide-step-card.text-only{grid-template-areas:"copy"}.landing-root .guide-figure.compact,.landing-root .guide-step-card>.guide-figure,.landing-root .guide-step-card>.guide-figure-stack{justify-self:stretch}.landing-root .guide-figure-stack{grid-template-columns:1fr}.landing-root .guide-figure.full,.landing-root .guide-figure-stack .guide-figure{min-height:auto}}@media (max-width:640px){.landing-root .guide-hero h1{font-size:32px}.landing-root .guide-tabbar{margin-bottom:52px}.landing-root .guide-panel-head h2{font-size:34px}.landing-root .guide-panel-head p{font-size:16px}.landing-root .guide-step-card{border-radius:12px;padding:22px}}@media (prefers-reduced-motion:reduce){.landing-root .guide-figma-card button,.landing-root .guide-figma-properties i{transition:none}.landing-root .guide-figma-selection,.landing-root .guide-color-popover,.landing-root .guide-click-ripple{animation:none}}