/* Site shell primitives authored in .luis using shared tokens and objects. */
--siteWidth: 100%;
--spaceScale: [8px,12px,16px,24px,32px,48px,72px];
--siteRadius: { sm: 10px; md: 16px; lg: 24px; pill: 999px; };
--siteShadow: { card: 0 10px 30px rgba(20, 42, 88, 0.08); };
--siteFrame: { width: var(--siteWidth); margin: 0; };
--siteSurfaceCard: { padding: var(--spaceScale[3]); border-radius: var(--siteRadius.sm); border: 1px solid var(--site-border); background: var(--site-surface); box-shadow: var(--siteShadow.card); };
--sitePill: { padding: 10px 14px; border-radius: var(--siteRadius.pill); border: 1px solid var(--site-border); background: var(--site-surface); };
--siteCopy: { margin: 0; line-height: 1.7; color: var(--site-muted); };
--c-sun:#ffa200;
--c-moon:#5bb7fb;

@fun:apply-copy(selector) {
  ${selector} { var(--siteCopy); }
}

:root { --site-bg: #f6f7fb; --site-surface: #ffffff; --site-text: #111827; --site-muted: #5b6473; --site-border: #d8deea; --site-accent: #0069c6; --site-accent-soft: #e0efff; --site-accent2: #0098a7; --site-accent2-soft: #e0f4f5; --site-mobile-header-height: 61px; --logo-text:#3a5c7c;}
html[data-theme='dark'] { --site-bg: #0d1117; --site-surface: #151b23; --site-text: #f3f6fb; --site-muted: #a7b0c0; --site-border: #2a3341; --site-accent: #5ab8f5; --site-accent-soft: #0a1e30; --site-accent2: #00cce0; --site-accent2-soft: #031a1d; --logo-text:#fff;}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Barlow", "Segoe UI", system-ui, sans-serif; background: var(--site-bg); color: var(--site-text); }
a { color: inherit; text-decoration: none; }
.svg-ico{min-width:16px; max-width:100%;fill:#000}
.social-ico{min-width:24px}
html[data-theme='dark'] .svg-ico{fill:var(--site-muted)}
.logo{width:100%;max-width:180px }
.logo .logo-text{fill:var(--logo-text)}
.site-github-link{display:flex;align-items:center}
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-shell > main { var(--siteFrame); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.site-header{ position: sticky; top: 0; z-index: 100; padding:0; border-bottom: 1px solid var(--site-border); background: color-mix(in srgb, var(--site-surface) 92%, transparent); backdrop-filter: blur(10px); display:flex;justify-content:center;}
.header{padding:0;}
.site-content{width:100%;margin-left:auto;margin-right:auto;padding:0 var(--spaceScale[3]);}
.site-header{height:64px;display: flex; align-items: center; }
.site-header-bar {height:64px;display: flex; align-items: center; justify-content: space-between; var(--siteFrame); gap: var(--spaceScale[3]); margin:0 auto; height:100%;}
.site-brand { max-width:180px;display:flex;align-items:center }
.site-brand img { max-width:100% }
.site-desktop-nav? { display: none; }
.site-mobile-menu? { display: block; margin-left: 0; position: relative; margin-left: auto;}
.site-mobile-menu summary { list-style: none; }
.site-mobile-menu summary::-webkit-details-marker { display: none; }
.site-nav { display: flex; gap: 18px; padding: 0; margin: 0; color: var(--site-muted); list-style: none; }
.site-nav a { padding: 10px 0; display: inline-flex; align-items: center; font-size:1.1rem }
.site-nav a:hover { color: var(--site-text); }
.site-actions { display: flex; gap: 12px; align-items: center; }
.site-mobile-menu-toggle { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--siteRadius.pill); border: 1px solid var(--site-border); background: var(--site-surface); color: var(--site-text); cursor: pointer; }
.site-mobile-menu-icon { width: 18px; display: grid; gap: 4px; }
.site-mobile-menu-icon span { height: 2px; border-radius: 999px; background: currentColor; }
.site-mobile-menu-panel? { display:flex; flex-direction: column; position: fixed; top: 100%;right:0; height: calc(100vh - 78px);inset-inline-end: 0; z-index: 120; width: min(280px, calc(100vw - 32px)); padding: 12px;  gap: 8px; border: 1px solid var(--site-border); background: var(--site-surface); box-shadow: var(--siteShadow.card); }
.site-mobile-menu-panel a? { padding: 4px; color: var(--site-muted); }
.site-mobile-menu-panel a:hover? { color: var(--site-text); background: var(--site-accent-soft); }
.site-mobile-menu-panel a.github-link?{padding:0}
.site-mobile-menu-panel .theme-toggle? { justify-self: start; margin-top: 4px; }
.site-search-shell { position: relative;margin-left:auto; }
.site-search-trigger { var(--sitePill); padding:4px 8px;color: var(--site-muted); cursor: pointer; height: 28px; display:flex; align-items: center;}
.site-search-trigger > span{display:flex; align-items: center; text-align: start;}
.site-search-trigger .svg-ico{ margin-left:8px}
.site-search { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 0; min-width: 100%; border-radius: 4px; border: 1px solid var(--site-border); background: var(--site-surface); overflow: hidden; }
.site-search input { width: 100%; border: 0; background: transparent; padding: 11px 14px; color: var(--site-text); outline: none; }
.site-search button { border: 0; border-inline-start: 1px solid var(--site-border); background: transparent; color: var(--site-muted); padding: 11px 14px; cursor: pointer; }
.site-search-modal[hidden]? { display: none; };
.site-search-modal? { height:100vh; top:0; position: fixed; inset: 0; background: rgba(11, 18, 33, 0.48); display: grid; place-items: flex-start center; padding: 100px 20px 20px; z-index: 60; }
.site-search-dialog { width: min(760px, 100%); max-height: calc(100% - 100px); height:auto;var(--siteSurfaceCard); display: grid; gap: 12px; grid-template-rows: auto minmax(0,1fr); position: relative; overflow: hidden; }
.site-search-panel { min-height: 0; display: grid; gap: 10px; overflow: hidden auto; padding-inline-end: 4px; }
.site-search-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; flex-direction: column; max-width:100%};
.site-search-group { margin: 0 0 8px; font-weight: 700; color: var(--site-accent); }
.site-search-group-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width:100% }
.site-search-list li{max-width:calc(100% - 32px);}
.site-search-hit { display: block; padding: 10px 12px; border-radius: 16px; border: 1px solid transparent; background: color-mix(in srgb, var(--site-surface) 88%, var(--site-accent-soft) 12%); }
.site-search-hit:hover { border-color: var(--site-border); }
.site-search-hit-line { margin: 0; color: var(--site-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-search-hit strong { color: var(--site-text); font-weight: 700; }
.site-search-hit mark { background: transparent; color: var(--site-accent); font-weight: 700; }
.theme-toggle, .button { var(--sitePill); }
.theme-toggle { padding: 6px; color: var(--site-text); cursor: pointer; width: 64px; border:none;};
.theme-toggle-track { border:1px solid var(--site-border);width: 100%; height: 28px; display: block; border-radius: 999px; background: color-mix(in srgb, var(--site-accent-soft) 76%, var(--site-surface) 24%); position: relative; }
.theme-toggle-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--c-sun); position: absolute; inset-block-start: 3px; inset-inline-start: 2px; transition: transform 0.2s ease; }
html[data-theme='dark'] .theme-toggle-thumb { transform: translateX(24px); background: var(--c-moon);}
.button { background: var(--site-accent); border-color: var(--site-accent); color: white; };
.button.secondary { background: var(--site-surface); color: var(--site-text); };
.hero { padding: var(--spaceScale[6]) 0 var(--spaceScale[4]); display: grid; gap: var(--spaceScale[3]); };
.eyebrow { margin: 0; color: var(--site-accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; };
.hero h1 { margin: 0; font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: 1.04; max-width: 12ch; };
.lead { font-size: 1.05rem; max-width: 64ch; };
.actions { display: flex; flex-wrap: wrap; gap: 14px; };
.page-section { padding: var(--spaceScale[3]) 0 var(--spaceScale[6]); };
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; };
.section-card { var(--siteSurfaceCard); };
.section-card h2 { display: block; margin: 0 0 12px; };
.site-footer { padding: var(--spaceScale[3]) 0 40px; border-top: 1px solid var(--site-border); };
.site-footer-bar { display: flex; justify-content: space-between; gap: var(--spaceScale[3]); align-items: center; };
.site-locale-link { color: var(--site-text); font-weight: 700; };
.page-stack { padding: var(--spaceScale[5]) 0 var(--spaceScale[6]); display: grid; gap: var(--spaceScale[4]); };
.page-heading { display: grid; gap: 12px; max-width: 72ch; };
.page-heading h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; };
.section-shell { var(--siteSurfaceCard); };

@fun.apply-copy('.site-search-empty');
@fun.apply-copy('.lead');
@fun.apply-copy('.section-card p');
@fun.apply-copy('.site-footer p');
@fun.apply-copy('.page-heading p');
.hero-split { grid-template-columns: 1fr 1fr; gap: var(--spaceScale[5]); align-items: center; };
.hero-code { display: block; };
.code-window { background: #0d1117; border-radius: var(--siteRadius.md); overflow: hidden; border: 1px solid #2a3341; };
.code-window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #161b22; border-bottom: 1px solid #2a3341; };
.code-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a3341; flex-shrink: 0; };
.code-dot-r { background: #ff5f56; };
.code-dot-y { background: #febc2e; };
.code-dot-g { background: #28c840; };
.code-filename { margin-left: auto; font-size: 0.78rem; color: #7d8590; font-family: ui-monospace, monospace; };
.code-body { margin: 0; padding: 20px 22px; font-size: 0.88rem; font-family: ui-monospace, SFMono-Regular, monospace; line-height: 1.65; color: #e6edf3; overflow-x: auto; };
.home-banner { padding: var(--spaceScale[4]) var(--spaceScale[3]); border-radius: var(--siteRadius.lg); background: linear-gradient(135deg, var(--site-accent), var(--site-accent2)); color: white; text-align: center; display: grid; gap: 20px; margin-bottom: var(--spaceScale[4]); };
.home-banner h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); color: white; };
.home-banner p { margin: 0; opacity: 0.9; max-width: 56ch; justify-self: center; };
.home-banner .button { background: white; color: var(--site-accent); border-color: white; };
.home-banner .button.secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.5); };
.github-link {display:inline-block; width:24px;height:24px; pad}
.github-link img{max-width:100%}
.site-footer { padding: var(--spaceScale[5]) 0 36px; border-top: 1.5px solid var(--site-border); background: var(--site-surface); }
.site-footer-inner { var(--siteFrame); display: grid; grid-template-columns: 1fr; gap: var(--spaceScale[4]); margin:0 auto var(--spaceScale[4]) auto ; }
.site-footer-brand img { width: 180px; max-width: 100%; display: block; margin-bottom: 16px; }
.site-footer h2 { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--site-muted); }
.site-footer p { margin: 0; color: var(--site-muted); line-height: 1.7; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--site-muted); }
.site-footer a:hover { color: var(--site-accent); }
.site-footer .site-locale-link { display: inline-flex; margin-top: 18px; color: var(--site-text); }
.site-footer-bottom { var(--siteFrame); display: flex; justify-content: space-between; gap: var(--spaceScale[3]); align-items: center; padding-top: 28px; margin-top: 32px; border-top: 1px solid var(--site-border); };
.site-footer-bottom div { display: flex; gap: 8px; flex-wrap: wrap; };
.site-footer-bottom span { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--site-accent-soft); color: var(--site-accent); border: 1px solid color-mix(in srgb, var(--site-accent) 18%, transparent); font-size: 11px; font-weight: 700; };

@media (min-width: 560px) {
  
}

@media (min-width: 720px) {
  .site-header-bar { align-items: center; }
  .site-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .site-search { min-width: 100%; }
  .site-footer-bar { flex-direction: column; align-items: flex-start; }
  .site-footer-inner { grid-template-columns: repeat(4,1fr);}
  .site-footer-bottom {flex-direction: column; align-items: flex-start; }
  .section-grid { grid-template-columns: 1fr; }
}

@media (min-width: 920px) {
  .site-content{width:90%; max-width:1400px;}
  .site-mobile-menu? { display: none;}
  .site-desktop-nav? { display: flex; align-items: center; gap: 18px; }
  .site-header-bar { flex-wrap: nowrap; }
  .site-brand { max-width: 172px; }
  .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-split { grid-template-columns: 1fr; }
  .hero-code { display: none; }
  .site-footer .site-locale-link{margin-top:0}
  .docs-wide-footer .site-footer-inner,.docs-wide-footer .site-content{margin:0 auto var(--spaceScale[4]) 3.5rem ;}
}