/* ═══════════════════════════════════════════════════════════════════════ Locally Uncensored — shared design system Ported from the lu-labs.ai marketing design (uselu/apps/web marketing.css + home.css). Applied site-wide via :root so every static page shares one look. IMPORTANT: purely visual. Brand stays "Locally Uncensored"; all page content, links, headings and SEO are owned by the HTML, not this file. Dark is default; light flips on (existing toggle). ═══════════════════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box} :root{ /* ── Brand ─────────────────────────────────────────────── */ --brand-violet:#491999; --brand-violet-strong:#5b21b6; --accent:#8b5cf6; /* links / accents (kept name for legacy rules) */ --accent-soft:#a78bfa; --brand-iridescent:#bc82f2; --brand-discord:#5865f2; --green:#34d399; /* secondary pop */ /* ── Surface ramp (dark) ───────────────────────────────── */ --bg:#141414; /* page canvas */ --bg-2:#1a1a1a; --panel:#202020; --panel-2:#262626; --raised:#2d2d2d; --overlay:#363636; /* ── Hairlines / fills ─────────────────────────────────── */ --rule:rgba(255,255,255,0.08); --line-faint:rgba(255,255,255,0.04); --line-subtle:rgba(255,255,255,0.07); --line-strong:rgba(255,255,255,0.12); --fill-faint:rgba(255,255,255,0.03); --fill-subtle:rgba(255,255,255,0.06); --fill-strong:rgba(255,255,255,0.12); /* ── Text ──────────────────────────────────────────────── */ --fg:#f4f4f5; --fg-70:#d4d4d8; --fg-50:#9ca3af; --fg-30:#6b7280; --fg-12:rgba(255,255,255,0.09); /* ── Type ──────────────────────────────────────────────── */ --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --serif:var(--sans); --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --display:'Space Grotesk','Inter',system-ui,sans-serif; --radius-sm:0.375rem; --radius-md:0.5rem; --radius-lg:0.625rem; --radius-xl:0.75rem; --ease:cubic-bezier(.22,1,.36,1); } /* Light flip — surfaces/borders/text invert, accents stay. Keeps the existing data-theme toggle working. */ html[data-theme="light"]{ --bg:#ffffff; --bg-2:#f7f7f8; --panel:#f3f4f6; --panel-2:#eceef1; --raised:#f3f4f6; --overlay:#ffffff; --rule:rgba(0,0,0,0.10); --line-faint:rgba(0,0,0,0.06); --line-subtle:rgba(0,0,0,0.10); --line-strong:rgba(0,0,0,0.15); --fill-faint:rgba(0,0,0,0.03); --fill-subtle:rgba(0,0,0,0.05); --fill-strong:rgba(0,0,0,0.10); --fg:#111827; --fg-70:#374151; --fg-50:#4b5563; --fg-30:#6b7280; --fg-12:rgba(0,0,0,0.07); --accent:#7c3aed; --green:#16a34a; } html{scroll-behavior:smooth} html,body{overflow-x:hidden} body{ font-family:var(--sans); font-optical-sizing:auto; background:var(--bg);color:var(--fg-70); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55; transition:background .4s ease,color .4s ease; min-height:100vh; } a{color:inherit;text-decoration:none} button{background:none;border:0;font:inherit;color:inherit;cursor:pointer} ::selection{background:rgba(139,92,246,0.35)} /* ── Drifting glow-blob background (JS injects .lu-bg) ─────────────────── */ .lu-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)} .lu-blob{position:absolute;border-radius:9999px;filter:blur(90px);opacity:.5;will-change:transform} .lu-blob.b1{width:46vw;height:46vw;left:-8vw;top:-10vh;background:radial-gradient(circle,rgba(73,25,153,0.55),transparent 68%);animation:lu-bg1 22s ease-in-out infinite} .lu-blob.b2{width:42vw;height:42vw;right:-10vw;top:6vh;background:radial-gradient(circle,rgba(139,92,246,0.32),transparent 68%);animation:lu-bg2 26s ease-in-out infinite} .lu-blob.b3{width:40vw;height:40vw;left:12vw;bottom:-16vh;background:radial-gradient(circle,rgba(91,33,182,0.34),transparent 70%);animation:lu-bg3 30s ease-in-out infinite} .lu-blob.b4{width:34vw;height:34vw;right:6vw;bottom:-8vh;background:radial-gradient(circle,rgba(188,130,242,0.18),transparent 70%);animation:lu-bg4 28s ease-in-out infinite} html[data-theme="light"] .lu-blob{opacity:.28} @keyframes lu-bg1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,5vh) scale(1.18)}} @keyframes lu-bg2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-7vw,-4vh) scale(1)}} @keyframes lu-bg3{0%,100%{transform:translate(0,0)}50%{transform:translate(5vw,-7vh)}} @keyframes lu-bg4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vh) scale(1.12)}} /* ── Atmosphere: vignette + film grain (JS injects .lu-atmosphere) ────── */ .lu-atmosphere{position:fixed;inset:0;z-index:40;pointer-events:none} .lu-vignette{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 42%,transparent 52%,rgba(0,0,0,0.28) 100%)} html[data-theme="light"] .lu-vignette{background:radial-gradient(120% 100% at 50% 42%,transparent 60%,rgba(0,0,0,0.06) 100%)} .lu-grain{position:absolute;inset:0;opacity:.1;mix-blend-mode:overlay;background-size:200px 200px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} html[data-theme="light"] .lu-grain{mix-blend-mode:multiply;opacity:.05} /* Themed scrollbars */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)} :is(button,a):focus-visible{outline:1px solid rgba(96,165,250,.6);outline-offset:1px} /* ═══════════════════════════════════════════════════════════════════════ Sticky nav ═══════════════════════════════════════════════════════════════════════ */ .lu-nav{ position:sticky;top:0;z-index:50;height:60px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:clamp(8px,2vw,24px); padding:0 clamp(16px,4vw,40px); background:rgba(20,20,20,0.72); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-subtle); font-family:var(--sans); } html[data-theme="light"] .lu-nav{background:rgba(255,255,255,0.72)} .lu-nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .lu-nav-word{font-weight:600;font-size:0.98rem;letter-spacing:-0.01em;color:var(--fg);white-space:nowrap} .lu-nav-word .accent{color:var(--accent-soft)} .lu-nav-links{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:nowrap} .lu-nav-link{ position:relative;display:flex;align-items:center;padding:8px 12px; font-size:0.8rem;font-weight:500;color:var(--fg-50);border-radius:var(--radius-sm); transition:color .15s,background .15s;white-space:nowrap; } .lu-nav-link:hover{color:var(--fg);background:var(--fill-faint)} .lu-nav-right{display:flex;align-items:center;gap:6px;justify-self:end} .lu-nav-icon{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);color:var(--fg-50);transition:color .15s,background .15s} .lu-nav-icon:hover{color:var(--fg);background:var(--fill-faint)} .lu-nav-icon.discord:hover{color:#5865f2} /* Tiny count badge on the top-right corner of a nav icon (GitHub stars, Discord online) — matched 1:1 to the lu-labs.ai .lu-mkt-nav-badge. */ .lu-nav-badge{ position:absolute;top:0;right:-2px; padding:1px 3.5px; font-family:var(--mono);font-size:8.5px;font-weight:700;line-height:1;letter-spacing:0.02em; color:#fff;background:var(--accent);border-radius:9999px; box-shadow:0 0 0 1.5px var(--bg); pointer-events:none;white-space:nowrap; } .lu-nav-icon.discord:hover{color:var(--brand-discord)} .lu-nav-sep{width:1px;height:20px;background:var(--line-subtle);margin:0 2px} .lu-nav-dl{ display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px;margin-left:2px; font-size:0.8rem;font-weight:500;color:var(--bg);background:var(--fg); border:1px solid var(--fg);border-radius:var(--radius-sm); transition:filter .15s,transform .12s; } .lu-nav-dl:hover{filter:brightness(0.9)} .lu-nav-dl:active{transform:scale(0.96)} .lu-nav-toggle{display:none} /* mobile hamburger, shown < 900px */ /* Nav monogram: nudge down (sat too high) + no autonomous motion. The hero monogram keeps its sway/sheen — this is nav-only. */ .lu-mono[data-mono="nav"]{transform:translateY(3px)} .lu-mono[data-mono="nav"] .lu-mono-sway{animation:none} .lu-mono[data-mono="nav"] .lu-mono-sheen{display:none} /* ── Cloud CTA — links out to lu-labs.ai (email capture lives there) ───── */ .he-cta{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.76rem;font-weight:600;line-height:1;text-decoration:none;color:var(--accent-soft);background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.32);border-radius:999px;padding:5px 11px;cursor:pointer;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s} .he-cta:hover{background:rgba(139,92,246,.22);color:#fff;border-color:rgba(139,92,246,.6)} .he-cta svg{width:12px;height:12px} /* ── Theme toggle (kept behaviour, restyled) ──────────────────────────── */ .switch{width:36px;height:20px;background:var(--fill-strong);border-radius:100px;position:relative;cursor:pointer;transition:background .25s;border:1px solid var(--rule);flex-shrink:0} .switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg);transition:transform .25s var(--ease)} html[data-theme="dark"] .switch{background:rgba(139,92,246,.25)} html[data-theme="dark"] .switch::after{transform:translateX(16px);background:var(--accent)} /* ═══════════════════════════════════════════════════════════════════════ 3D monogram (JS builds layers into [data-mono]) ═══════════════════════════════════════════════════════════════════════ */ .lu-mono{display:inline-block;position:relative} .lu-mono-stage{position:relative} .lu-mono-tilt{position:relative;transform-style:preserve-3d;transition:transform .3s var(--ease);will-change:transform} .lu-mono-halo{position:absolute;left:50%;top:52%;width:100%;height:100%;border-radius:9999px; background:radial-gradient(circle,rgba(139,92,246,0.6) 0%,rgba(139,92,246,0.22) 44%,transparent 72%); transform:translate(-50%,-50%);filter:blur(28px);animation:lu-halo 4.5s ease-in-out infinite;pointer-events:none;will-change:opacity} .lu-mono-sway{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:lu-sway 9s ease-in-out infinite} .lu-mono-extrude{position:absolute;inset:0;transform-style:preserve-3d} .lu-mono-layer{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden} .lu-mono-sheen{position:absolute;inset:0;overflow:hidden; -webkit-mask:url(/assets/marketing/lu-mark.png) center/contain no-repeat; mask:url(/assets/marketing/lu-mark.png) center/contain no-repeat; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,0.85) 50%,transparent 60%); background-repeat:no-repeat;background-size:250% 250%;animation:lu-sheen 6.4s linear infinite} @keyframes lu-halo{0%,100%{opacity:.5}50%{opacity:.82}} @keyframes lu-sway{0%{transform:rotateX(15deg) rotateY(-19deg)}25%{transform:rotateX(8deg) rotateY(-9deg)}50%{transform:rotateX(15deg) rotateY(11deg)}75%{transform:rotateX(9deg) rotateY(9deg)}100%{transform:rotateX(15deg) rotateY(-19deg)}} @keyframes lu-sheen{0%{background-position:160% 160%}100%{background-position:-160% -160%}} /* ═══════════════════════════════════════════════════════════════════════ Hero (brand block: monogram + H1 wordmark + kicker) ═══════════════════════════════════════════════════════════════════════ */ .lu-hero{ padding:clamp(48px,8vh,110px) clamp(24px,5vw,72px) clamp(28px,4vh,52px); display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;position:relative; } .lu-hero-mono{opacity:0;animation:lu-fade-in 1.1s var(--ease) .2s forwards} @keyframes lu-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .mast-title,.lu-hero-title{ font-family:var(--display);font-weight:700; font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;letter-spacing:-0.035em; color:var(--fg);margin:0;text-shadow:0 2px 14px rgba(0,0,0,0.5);text-wrap:balance; } .mast-title .accent{color:var(--accent-soft);font-weight:700} .mast-kicker{ font-family:var(--mono);font-size:clamp(.66rem,1.1vw,.8rem);font-weight:500; letter-spacing:0.22em;text-transform:uppercase;color:var(--fg-50); display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0; } .mast-kicker .k-dot{color:var(--accent);font-weight:700;letter-spacing:0} /* ═══════════════════════════════════════════════════════════════════════ Shared section chrome ═══════════════════════════════════════════════════════════════════════ */ section{padding:clamp(72px,10vh,130px) clamp(24px,5vw,72px);position:relative} .container{max-width:1160px;margin:0 auto;width:100%} .narrow{max-width:820px;margin:0 auto} .eyebrow{ font-family:var(--mono);font-size:.7rem;letter-spacing:0.16em;text-transform:uppercase; color:var(--accent-soft);display:inline-flex;align-items:center;gap:10px;margin-bottom:24px; } .eyebrow::before{content:'';width:24px;height:1px;background:var(--accent)} /* Section headings (Space Grotesk display) */ .things h2,.manifesto h2,.compare h2,.get h2, .how h2,.models h2,.blog h2,.faq h2{ font-family:var(--display);font-weight:700; font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-0.03em; margin-bottom:20px;max-width:22ch;color:var(--fg); } .things h2 em,.manifesto h2 em,.compare h2 em,.get h2 em, .how h2 em,.models h2 em,.blog h2 em,.faq h2 em{font-style:normal;color:var(--accent-soft);font-weight:700} .section-lead{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;color:var(--fg-50);max-width:60ch} /* ── Hero download banner ─────────────────────────────────────────────── */ .hero{padding:clamp(8px,2vh,24px) clamp(24px,5vw,72px) clamp(24px,4vh,48px);position:relative} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .dl-card{ margin:0 auto;padding:18px 22px;max-width:560px; background:var(--panel);color:var(--fg);border:1px solid var(--line-subtle);border-radius:var(--radius-xl); display:flex;justify-content:space-between;align-items:center;gap:20px; transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;position:relative;overflow:hidden;text-align:left; } .hero .dl-card{opacity:0;animation:fadeUp .9s var(--ease) .1s forwards} .dl-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 130%,rgba(139,92,246,0.5),transparent 60%);opacity:.5} .dl-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5);box-shadow:0 24px 60px -20px rgba(0,0,0,.7)} .dl-info{position:relative;z-index:2;flex:1;min-width:0} .dl-info h3{font-family:var(--sans);font-weight:600;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.1;letter-spacing:-0.02em;margin-bottom:5px;color:var(--fg)} .dl-info h3 em{font-style:normal;color:var(--accent-soft);font-weight:700} .dl-info p{font-family:var(--mono);font-size:.62rem;letter-spacing:0.05em;color:var(--fg-50)} .dl-btn{ font-family:var(--sans);font-size:.82rem;font-weight:600;padding:11px 18px; background:var(--accent);color:#fff;border-radius:var(--radius-sm); display:inline-flex;align-items:center;gap:7px;white-space:nowrap;position:relative;z-index:2; transition:transform .25s var(--ease),filter .25s; } .dl-btn:hover{transform:translateX(3px);filter:brightness(1.08)} .dl-btn svg{width:14px;height:14px} .dl-alts{margin-top:22px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center;font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--fg-50)} .dl-alts a{position:relative;transition:color .2s} .dl-alts a:hover{color:var(--accent-soft)} .dl-alts a::after{content:'→';margin-left:6px;opacity:.6;transition:transform .2s;display:inline-block} .dl-alts a:hover::after{transform:translateX(3px)} /* ── Scroll affordance ────────────────────────────────────────────────── */ .scroll-zone{padding:clamp(24px,5vh,56px) 24px;display:flex;justify-content:center;align-items:center;min-height:clamp(120px,24vh,240px)} .scroll-arrow{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 24px;color:var(--fg-50);transition:color .25s,transform .25s;text-decoration:none} .scroll-arrow .arrow-line{width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--fg-30));transition:background .3s} .scroll-arrow svg{width:26px;height:26px;stroke-width:1.5;animation:arrow-bounce 2.2s ease-in-out infinite} .scroll-arrow .arrow-label{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-50);transition:color .25s} .scroll-arrow:hover{color:var(--accent-soft);transform:translateY(2px)} .scroll-arrow:hover .arrow-label{color:var(--accent-soft)} .scroll-arrow:hover .arrow-line{background:linear-gradient(180deg,transparent,var(--accent))} @keyframes arrow-bounce{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(6px);opacity:1}} /* ── Tagline ──────────────────────────────────────────────────────────── */ .tagline{padding:clamp(56px,9vh,120px) clamp(24px,5vw,72px) clamp(24px,4vh,44px);text-align:center} .tagline h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-0.035em;color:var(--fg);max-width:22ch;margin:0 auto 16px} .tagline h2 .t-sub{display:block;font-size:0.62em;font-weight:600;margin-top:12px;letter-spacing:-0.02em;color:var(--fg-70)} .tagline h2 .t-accent{color:var(--accent-soft);font-weight:700;position:relative;display:inline-block} .tagline h2 .t-accent::after{content:'';position:absolute;left:0;right:0;bottom:0.1em;height:0.06em;background:var(--accent);opacity:.4} .tagline-sub{font-family:var(--mono);font-size:clamp(.66rem,1vw,.8rem);font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-50);margin-top:18px} /* ── Showcase ─────────────────────────────────────────────────────────── */ .showcase{padding-top:36px;padding-bottom:36px} .showcase-inner{position:relative;max-width:1120px;margin:0 auto} .showcase-img{width:100%;display:block;border-radius:14px;border:1px solid var(--line-subtle);box-shadow:0 2px 4px rgba(0,0,0,.3),0 20px 50px rgba(0,0,0,.45),0 40px 120px -20px rgba(73,25,153,.25)} .showcase-cap{margin-top:26px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--fg-50);line-height:1.6;max-width:720px} .showcase-cap em{font-style:normal;color:var(--accent-soft);font-weight:500} /* ── Things grid ──────────────────────────────────────────────────────── */ .things > .container{text-align:center} .things > .container > .eyebrow{display:inline-flex} .things > .container > h2{margin-left:auto;margin-right:auto} .things-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:56px;text-align:left} .thing{ padding:32px 30px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-xl); transition:transform .22s var(--ease),border-color .22s,box-shadow .22s; display:flex;flex-direction:column;gap:12px;position:relative;min-height:260px; } .thing:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)} .thing-num{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:0.08em} .thing-head{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.2;letter-spacing:-0.02em;color:var(--fg)} .thing-head em{font-style:normal;font-weight:600;color:var(--accent-soft)} .thing p{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--fg-50);max-width:44ch} .thing-tags{margin-top:auto;padding-top:18px;display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:.6rem;letter-spacing:0.06em;color:var(--fg-50)} .thing-tags span{padding:4px 9px;background:var(--fill-faint);border:1px solid var(--line-subtle);border-radius:100px} /* ── Manifesto ────────────────────────────────────────────────────────── */ .manifesto .narrow{max-width:760px} .manifesto p{font-family:var(--sans);font-size:clamp(1.05rem,1.3vw,1.28rem);line-height:1.6;color:var(--fg-70);margin-bottom:24px;font-weight:400} .manifesto p em{color:var(--accent-soft);font-style:normal;font-weight:500} .manifesto p strong{font-weight:600;color:var(--fg)} /* ── Compare (prose) ──────────────────────────────────────────────────── */ .compare .narrow{max-width:920px} .compare p{font-family:var(--sans);font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.55;color:var(--fg-50);margin-bottom:18px} .compare p strong{color:var(--fg);font-weight:600} .compare p em{font-style:normal;color:var(--accent-soft);font-weight:500} .compare .tools{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 24px;font-family:var(--mono);font-size:.72rem;color:var(--fg-50);letter-spacing:0.05em} /* ── How it works ─────────────────────────────────────────────────────── */ .how{text-align:center} .how .container{max-width:1080px} .how h2,.how .section-lead{margin-left:auto;margin-right:auto} .how .eyebrow{justify-content:center;display:inline-flex} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:56px 0 36px;text-align:left} .step{padding:32px 28px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-xl);transition:border-color .3s,transform .3s} .step:hover{border-color:var(--line-strong);transform:translateY(-3px)} .step-num{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:0.15em;color:var(--accent);display:block;margin-bottom:16px;text-transform:uppercase} .step h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-0.02em;line-height:1.2;margin-bottom:10px;color:var(--fg)} .step p{font-family:var(--sans);font-size:.9rem;color:var(--fg-50);line-height:1.6} .guide-link{font-family:var(--sans);font-size:.9rem;color:var(--fg-50);margin-top:14px} .guide-link a{color:var(--accent-soft);font-weight:500;transition:color .2s} .guide-link a:hover{color:var(--fg)} /* ── Models ───────────────────────────────────────────────────────────── */ .models{text-align:center} .models .container{max-width:1160px} .models h2,.models .section-lead{margin-left:auto;margin-right:auto} .models .eyebrow{justify-content:center;display:inline-flex} .model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px;text-align:left} .model-card{padding:26px 24px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);transition:border-color .3s,transform .3s;display:flex;flex-direction:column;gap:10px;min-height:180px} .model-card:hover{border-color:var(--line-strong);transform:translateY(-2px)} .model-type{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:0.12em;color:var(--accent);text-transform:uppercase} .model-card h3{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.2rem);letter-spacing:-0.01em;line-height:1.2;color:var(--fg)} .model-card p{font-family:var(--sans);font-size:.82rem;color:var(--fg-50);line-height:1.55;flex:1} .model-meta{font-family:var(--mono);font-size:.6rem;letter-spacing:0.08em;color:var(--fg-50);text-transform:uppercase;padding-top:8px;border-top:1px solid var(--rule);margin-top:6px} /* ── Blog teaser grid ─────────────────────────────────────────────────── */ .blog{text-align:center} .blog .container{max-width:1160px} .blog h2,.blog .section-lead{margin-left:auto;margin-right:auto} .blog .eyebrow{justify-content:center;display:inline-flex} .post-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:52px;text-align:left} .post{padding:24px 22px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-xl);transition:border-color .15s,transform .15s;display:block;position:relative;color:var(--fg)} .post:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px)} .post-cat{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:0.12em;color:var(--accent-soft);text-transform:uppercase;display:block;margin-bottom:10px} .post h3{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.4vw,1.18rem);letter-spacing:-0.01em;line-height:1.3;margin-bottom:8px;color:var(--fg);transition:color .2s} .post:hover h3{color:var(--accent-soft)} .post p{font-family:var(--sans);font-size:.82rem;color:var(--fg-50);line-height:1.55} .blog-all{margin-top:32px;font-family:var(--sans);font-size:.9rem} .blog-all a{color:var(--accent-soft);font-weight:500;transition:color .2s} .blog-all a:hover{color:var(--fg)} /* ── FAQ ──────────────────────────────────────────────────────────────── */ .faq .container{max-width:820px} .faq h2{margin-bottom:36px} .faq-list{display:flex;flex-direction:column} .faq-item{padding:24px 0;border-top:1px solid var(--rule)} .faq-item:last-child{border-bottom:1px solid var(--rule)} .faq-item h3{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.35vw,1.18rem);letter-spacing:-0.01em;line-height:1.3;margin-bottom:10px;color:var(--fg)} .faq-item p{font-family:var(--sans);font-size:.95rem;color:var(--fg-50);line-height:1.65} .faq-item p strong{color:var(--fg-70);font-weight:600} /* ── Get-it band ──────────────────────────────────────────────────────── */ .get .narrow{max-width:820px;text-align:center} .get .dl-card{margin:0 auto} .get .dl-alts{justify-content:center} /* ═══════════════════════════════════════════════════════════════════════ Footer ═══════════════════════════════════════════════════════════════════════ */ footer{ padding:48px clamp(24px,5vw,72px) 32px;border-top:1px solid var(--line-subtle); background:var(--bg-2);display:flex;flex-direction:column;gap:18px; font-family:var(--sans);font-size:.82rem;color:var(--fg-50); } .footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .footer-links{gap:22px;justify-content:flex-start;flex-wrap:wrap} .footer-links a{color:var(--fg-50);transition:color .2s} .footer-links a:hover{color:var(--accent-soft)} .footer-meta span{font-family:var(--mono);font-size:.7rem;letter-spacing:0.04em;color:var(--fg-30)} /* ═══════════════════════════════════════════════════════════════════════ Responsive + reduced motion ═══════════════════════════════════════════════════════════════════════ */ @media(max-width:900px){ .lu-nav{grid-template-columns:auto auto;gap:8px} .lu-nav-links{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column; background:rgba(20,20,20,0.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-subtle);padding:8px 16px;gap:2px} html[data-theme="light"] .lu-nav-links{background:rgba(255,255,255,0.97)} .lu-nav-links.open{display:flex} .lu-nav-link{padding:12px} .lu-nav-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--fg-50)} .things-list,.steps,.post-list{grid-template-columns:1fr} .model-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .model-grid{grid-template-columns:1fr} .dl-card{flex-direction:column;align-items:flex-start} .dl-btn{width:100%;justify-content:center} .footer-row{flex-direction:column;align-items:flex-start;gap:12px} /* Trim the nav right cluster so it never overflows a phone width. GitHub/Discord live in the footer + hero; download lives in the hero. */ .lu-nav-icon,.lu-nav-dl,.lu-nav-sep,.lu-nav .switch{display:none} .lu-nav-word{font-size:0.9rem} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .lu-blob{animation:none} } /* ═══════════════════════════════════════════════════════════════════════ Document / prose layer — blog articles, blog index, guide, remote, 404. Scoped under .lu-doc (added to each sub-page's content root) so it never collides with the homepage's classed sections. ═══════════════════════════════════════════════════════════════════════ */ :root{--accent-amber:#fbbf24;--accent-blue:#60a5fa} .lu-doc{max-width:820px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,5vw,32px) 80px} .lu-doc h1{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.08;letter-spacing:-0.03em;color:var(--fg);margin:0 0 20px} .lu-doc h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;letter-spacing:-0.02em;color:var(--fg);margin:44px 0 16px} .lu-doc h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.3;color:var(--fg);margin:32px 0 12px} .lu-doc p{font-size:1rem;line-height:1.75;color:var(--fg-70);margin:0 0 18px} .lu-doc a{color:var(--accent-soft);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s} .lu-doc a:hover{color:var(--fg);border-bottom-color:var(--accent)} .lu-doc strong{color:var(--fg);font-weight:600} .lu-doc ul,.lu-doc ol{margin:0 0 18px;padding-left:1.4em;color:var(--fg-70)} .lu-doc li{margin:0 0 8px;line-height:1.7} .lu-doc code{font-family:var(--mono);font-size:.85em;background:var(--fill-subtle);border:1px solid var(--line-subtle);border-radius:5px;padding:1px 6px;color:var(--accent-soft)} .lu-doc pre{background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);padding:18px 20px;overflow-x:auto;margin:0 0 20px} .lu-doc pre code{background:none;border:none;padding:0;color:var(--fg-70);font-size:.82rem;line-height:1.6} .lu-doc hr{border:none;border-top:1px solid var(--rule);margin:36px 0} .lu-doc img{max-width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line-subtle);margin:6px 0 22px;display:block} .lu-doc .subtitle{font-size:1.1rem;color:var(--fg-50);margin:0 0 32px;line-height:1.6} .lu-doc table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.9rem;display:block;overflow-x:auto} .lu-doc th,.lu-doc td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top} .lu-doc th{font-family:var(--mono);font-size:.68rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--fg-50);background:var(--fill-faint)} .lu-doc td{color:var(--fg-70)} /* doc chrome */ .lu-doc .back{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--fg-50);margin-bottom:24px;border:none} .lu-doc .back:hover{color:var(--accent-soft)} .lu-doc .breadcrumb{font-family:var(--mono);font-size:.72rem;color:var(--fg-50);margin-bottom:20px} .lu-doc .breadcrumb a{color:var(--fg-50);border:none} .lu-doc .breadcrumb a:hover{color:var(--accent-soft)} .lu-doc .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;color:var(--fg-50);margin-bottom:10px} .lu-doc .post-tag,.lu-doc .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-soft);background:var(--fill-faint);border:1px solid var(--line-subtle);border-radius:9999px;padding:3px 9px} /* TOC (guide/remote) */ .lu-doc .toc{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);padding:18px 20px;margin:0 0 32px} .lu-doc .toc-title{font-family:var(--mono);font-size:.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-50);margin-bottom:8px} .lu-doc .toc a{color:var(--fg-70);font-size:.9rem;padding:3px 0;border:none} .lu-doc .toc a:hover{color:var(--accent-soft)} /* callouts */ .lu-doc .callout{border:1px solid var(--line-subtle);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:14px 18px;margin:0 0 22px;background:var(--fill-faint);font-size:.92rem;line-height:1.65;color:var(--fg-70)} .lu-doc .callout-title{font-weight:600;color:var(--fg);margin-bottom:4px} .lu-doc .callout.warn{border-left-color:var(--accent-amber)} .lu-doc .callout.tip{border-left-color:var(--green)} .lu-doc .callout.info{border-left-color:var(--accent-blue)} /* numbered steps (guide) */ .lu-doc .step{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:20px 0;border-top:1px solid var(--rule)} .lu-doc .step-num{grid-row:span 2;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--fill-strong);color:var(--accent-soft);font-family:var(--mono);font-size:.82rem;font-weight:600} .lu-doc .step-title{font-weight:600;color:var(--fg);align-self:center} .lu-doc .step-body{grid-column:2} .lu-doc .step-body p:first-child{margin-top:4px} /* blog index */ .lu-doc .filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px} .lu-doc .filter-btn{font-family:var(--mono);font-size:.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-50);background:var(--fill-faint);border:1px solid var(--line-subtle);border-radius:9999px;padding:7px 15px;cursor:pointer;transition:color .15s,border-color .15s,background .15s} .lu-doc .filter-btn:hover{color:var(--fg);border-color:var(--line-strong)} .lu-doc .filter-btn.active{color:var(--fg);background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.4)} .lu-doc .post-card{padding:22px 24px;border:1px solid var(--line-subtle);border-radius:var(--radius-xl);background:var(--panel);margin:0 0 14px;transition:border-color .15s,transform .15s} .lu-doc .post-card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px)} .lu-doc .post-card h2{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.3;margin:0 0 8px} .lu-doc .post-card h2 a{color:var(--fg);border:none} .lu-doc .post-card:hover h2 a{color:var(--accent-soft)} .lu-doc .post-card p{font-size:.9rem;color:var(--fg-50);margin:0 0 12px;line-height:1.55} .lu-doc .post-card .meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.66rem;color:var(--fg-30)} /* article footer CTA */ .lu-doc .post-footer{margin-top:44px;padding:26px;border:1px solid var(--line-subtle);border-radius:var(--radius-xl);background:var(--panel);text-align:center} .lu-doc .post-footer p{margin:0 0 14px} .lu-doc .cta-btn,.lu-doc .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;border:none} .lu-doc .cta-btn:hover,.lu-doc .btn:hover{filter:brightness(1.08);color:#fff;border:none} /* 404 */ main.wrap.lu-doc{text-align:center;min-height:56vh;display:flex;flex-direction:column;justify-content:center;align-items:center} .lu-doc .code{font-family:var(--mono);font-size:.8rem;letter-spacing:0.1em;color:var(--accent-soft);text-transform:uppercase;margin-bottom:16px} .lu-doc .a{color:var(--accent-soft)} .lu-doc .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:26px} /* legacy .footer alias (guide/remote keep their own

) */ .footer{padding:40px clamp(24px,5vw,72px);border-top:1px solid var(--line-subtle);background:var(--bg-2); font-family:var(--sans);font-size:.82rem;color:var(--fg-50);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:center;max-width:none} .footer a{color:var(--fg-50);transition:color .2s;border:none} .footer a:hover{color:var(--accent-soft)} /* article/blog top nav variants that survive (belt-and-braces restyle) */ .nav-logo{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--fg)} .nav-links,.btn-nav{color:var(--fg-50)} /* discord join page */ .lu-doc .stack{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0} .lu-doc .cta-primary{display:inline-flex;align-items:center;padding:12px 22px;background:var(--brand-discord);color:#fff;border-radius:var(--radius-sm);font-weight:600;border:none} .lu-doc .cta-primary:hover{filter:brightness(1.08);color:#fff;border:none} .lu-doc .cta-secondary{display:inline-flex;align-items:center;padding:12px 22px;background:var(--fill-subtle);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-weight:600} .lu-doc .cta-secondary:hover{border-color:var(--brand-discord);color:var(--fg)} .lu-doc .divider{margin:30px 0;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-30);border-top:1px solid var(--rule);height:1px} .lu-doc .divider span{position:relative;top:-.7em;background:var(--bg);padding:0 12px} .lu-doc .manual{background:var(--panel);border:1px solid var(--line-subtle);border-radius:var(--radius-lg);padding:20px 24px;font-size:.95rem;line-height:1.7;color:var(--fg-70)} .lu-doc .copy-row{display:flex;gap:10px;align-items:center;margin-top:16px} .lu-doc .copy-code{font-family:var(--mono);font-size:.95rem;background:var(--fill-subtle);border:1px solid var(--line-subtle);border-radius:6px;padding:8px 14px;color:var(--accent-soft);user-select:all} .lu-doc .copy-btn{padding:8px 14px;background:var(--accent);color:#fff;border-radius:6px;font-size:.8rem;font-weight:600} .lu-doc .copy-btn.copied{background:var(--green)} .lu-doc .small{font-size:.8rem;color:var(--fg-30);margin-top:20px}