
/* Lucion Docs shared shell: header, footer, search dialog, page transitions. Source of truth: approved homepage. */
:root{--lx-bg:#fff;--lx-bg2:#F3F7FF;--lx-tx:#0B1B3A;--lx-mu:#566887;--lx-ln:#D9E3F6;--lx-ac:#1F5BFF;--lx-acf:#fff;--lx-glass:rgba(255,255,255,.72);--lx-gs:rgba(255,255,255,.9);--lx-hl:#FFE98A;
--lx-d:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;--lx-b:"Figtree","Avenir Next","Segoe UI",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lx-bg:#060D1F;--lx-bg2:#0A1630;--lx-tx:#EAF0FF;--lx-mu:#97A8CB;--lx-ln:#1B2B4F;--lx-ac:#6E9BFF;--lx-acf:#061031;--lx-glass:rgba(10,22,48,.7);--lx-gs:rgba(10,22,48,.92);--lx-hl:#5C4B00}}
:root[data-theme="dark"]{--lx-bg:#060D1F;--lx-bg2:#0A1630;--lx-tx:#EAF0FF;--lx-mu:#97A8CB;--lx-ln:#1B2B4F;--lx-ac:#6E9BFF;--lx-acf:#061031;--lx-glass:rgba(10,22,48,.7);--lx-gs:rgba(10,22,48,.92);--lx-hl:#5C4B00}

/* Page transitions: native cross-document transitions, with a fade fallback */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
::view-transition-group(lx-hd){animation:none}
@keyframes lx-in{from{opacity:0}to{opacity:1}}
@keyframes lx-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.lx-fb body{animation:lx-in .3s ease both}
.lx-fb.lx-out body{opacity:0;transition:opacity .16s ease}

.lx-skip{position:absolute;left:-999px;top:8px;background:var(--lx-ac);color:var(--lx-acf);padding:10px 16px;border-radius:99px;z-index:60;font:600 15px var(--lx-b);text-decoration:none}
.lx-skip:focus{left:12px}
.lx-hd,.lx-dlg,.lx-ft{font-family:var(--lx-b);font-size:15px;line-height:1.5;color:var(--lx-tx);-webkit-font-smoothing:antialiased}
.lx-hd a,.lx-ft a{color:inherit}
.lx-hd :focus-visible,.lx-dlg :focus-visible,.lx-ft :focus-visible,.lx-skip:focus-visible{outline:3px solid var(--lx-ac);outline-offset:3px;border-radius:6px}

/* Header */
.lx-hd{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);background:var(--lx-glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--lx-ln);view-transition-name:lx-hd}
.lx-w{max-width:1120px;margin:0 auto;padding:0 24px}
.lx-bar{display:flex;align-items:center;gap:10px;height:60px}
.lx-logo{font:700 20px var(--lx-d);letter-spacing:-.02em;text-decoration:none;display:flex;gap:10px;align-items:center;margin-right:14px;white-space:nowrap}
.lx-logo i{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 210deg,#1F5BFF,#8CC1FF,#fff,#1F5BFF);box-shadow:0 0 18px rgba(31,91,255,.55)}
.lx-nv{margin-left:auto}
.lx-nv ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.lx-nv a{display:block;padding:8px 13px;border-radius:99px;text-decoration:none;font-size:15px;color:var(--lx-mu);font-weight:500;transition:color .2s,background .2s}
.lx-nv a:hover,.lx-nv a[aria-current]{color:var(--lx-tx);background:var(--lx-bg2)}
.lx-bt{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lx-ln);background:transparent;color:var(--lx-tx);border-radius:99px;padding:7px 14px;min-height:40px;font:500 14px var(--lx-b);cursor:pointer;transition:background .2s}
.lx-bt:hover{background:var(--lx-bg2)}
.lx-bt kbd{font:500 12px var(--lx-b);color:var(--lx-mu);border:1px solid var(--lx-ln);border-radius:7px;padding:1px 6px}
.lx-mb{display:none}
.lx-mp{border-top:1px solid var(--lx-ln);background:var(--lx-gs)}
.lx-mp[hidden]{display:none}
.lx-mp ul{list-style:none;margin:0;padding:8px 24px 16px}
.lx-mp a{display:block;padding:14px 4px;border-bottom:1px solid var(--lx-ln);text-decoration:none;font:600 18px var(--lx-d)}
.lx-mp a[aria-current]{color:var(--lx-ac)}
@media(max-width:960px){.lx-nv{display:none}.lx-sb{margin-left:auto}.lx-sb kbd,.lx-sb .lx-t{display:none}.lx-sb{padding:7px 12px}.lx-mb{display:inline-flex}}

/* Footer */
.lx-ft{border-top:1px solid var(--lx-ln);background:var(--lx-bg2);padding:44px 0 56px;color:var(--lx-mu)}
.lx-fg{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.lx-fg .lx-logo{color:var(--lx-tx);margin:0 0 10px}
.lx-fg p{margin:0;max-width:36ch;font-size:15px}
.lx-fh{font:600 16px var(--lx-d);letter-spacing:0;margin:0 0 10px;max-width:none;color:var(--lx-tx);text-wrap:wrap}
.lx-fg ul{list-style:none;margin:0;padding:0}
.lx-fg li a{display:inline-block;padding:5px 0;text-decoration:none;font-size:15px}
.lx-fg li a:hover{color:var(--lx-tx);text-decoration:underline}
.lx-nt{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--lx-ln);font-size:14px;max-width:80ch}
@media(max-width:700px){.lx-fg{grid-template-columns:1fr 1fr}.lx-fg>div:first-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}.lx-fb body{animation:none}.lx-fb.lx-out body{opacity:1;transition:none}dialog.lx-dlg[open]{animation:none}.lx-nv a,.lx-bt{transition:none}}
