/* Shared chrome for every page of the Lightshadow mockup: tokens, header, footer, language switch.
   Brand palette = the current lightshadow.app palette. Display: Archivo (expanded). Body: IBM Plex Sans. Data: IBM Plex Mono.
   Fonts are self-hosted below (OFL); the site makes no third-party request. */
:root{
  --bg:#fbf9f4; --panel:#ffffff; --ink:#1c1a16; --muted:#5d574c; --line:#e2ddd1;
  --sun:#c98a10; --sun-soft:#f6e7c4; --leaf:#2f6b46; --accent:#1f5c3d; --leaf-soft:#e3eee6;
  --shade:#3d4a44; --shade-soft:#cfd6d0; --sky:#eef1ea; --warn-bg:#fdf6e4; --warn-line:#e8d5a3; --chk:#9a5b00;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#14150f; --panel:#1d1f18; --ink:#eeeade; --muted:#a7a294; --line:#32352a;
  --sun:#e8b64b; --sun-soft:#3a3018; --leaf:#7fc39a; --accent:#8ed0a8; --leaf-soft:#1f3327;
  --shade:#b9c4bd; --shade-soft:#2c332e; --sky:#1a1d16; --warn-bg:#241f12; --warn-line:#4d411f; --chk:#e8b64b;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#14150f; --panel:#1d1f18; --ink:#eeeade; --muted:#a7a294; --line:#32352a;
  --sun:#e8b64b; --sun-soft:#3a3018; --leaf:#7fc39a; --accent:#8ed0a8; --leaf-soft:#1f3327;
  --shade:#b9c4bd; --shade-soft:#2c332e; --sky:#1a1d16; --warn-bg:#241f12; --warn-line:#4d411f; --chk:#e8b64b;
  color-scheme:dark }

html[lang="en"] .ls-es{display:none !important}
html:not([lang="en"]) .ls-en{display:none !important}

.ls-ribbon{background:var(--warn-bg); border-bottom:1px solid var(--warn-line); color:var(--ink);
  font:12.5px/1.4 var(--body); padding:7px 16px; text-align:center}
.ls-ribbon b{font-weight:600}

.ls-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--bg);
  border-bottom:1px solid var(--line)}
.ls-head-in{max-width:1120px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; gap:18px}
.ls-word{display:flex; align-items:center; gap:9px; font:720 19px/1 var(--display); font-stretch:108%;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none; flex:none}
.ls-word img{width:28px; height:28px; border-radius:7px; display:block}
.ls-word .g{color:var(--leaf)}
.ls-nav{display:flex; gap:4px 18px; flex-wrap:wrap; margin-left:auto; font:500 14px/1 var(--body)}
.ls-nav a{color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
.ls-nav a:hover{border-bottom-color:var(--line)}
.ls-nav a.cur{color:var(--leaf); border-bottom-color:var(--leaf)}
.ls-lang{display:flex; gap:4px; flex:none}
.ls-lang button{font:600 12px/1 var(--body); padding:7px 10px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer}
.ls-lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.ls-menu{display:none; margin-left:auto; font:600 13px/1 var(--body); padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
@media (max-width:860px){
  .ls-head-in{flex-wrap:wrap; gap:10px 12px; padding:10px 16px}
  .ls-menu{display:inline-block}
  .ls-nav{display:none; order:5; flex-basis:100%; flex-direction:column; gap:0; margin:0}
  .ls-nav a{padding:11px 0; border-bottom:1px solid var(--line)}
  .ls-head.open .ls-nav{display:flex}
}

.ls-foot{border-top:1px solid var(--line); margin-top:56px; background:var(--panel)}
.ls-foot-in{max-width:1120px; margin:0 auto; padding:34px 22px 44px; display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:24px; font:13.5px/1.5 var(--body); color:var(--muted)}
@media (max-width:760px){ .ls-foot-in{grid-template-columns:repeat(2,minmax(0,1fr)); padding:28px 16px 36px} }
@media (max-width:420px){ .ls-foot-in{grid-template-columns:minmax(0,1fr)} }
.ls-foot h5{font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0 0 10px}
.ls-foot a{display:block; color:var(--muted); text-decoration:none; margin:5px 0}
.ls-foot a:hover{color:var(--ink)}
.ls-foot .ls-word{margin-bottom:10px}
.ls-credits{grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px; font:11.5px/1.55 var(--mono); color:var(--muted)}

.ls-head a:focus-visible,.ls-head button:focus-visible,.ls-foot a:focus-visible{outline:2px solid var(--sun); outline-offset:2px}

/* ---- fonts (OFL) ---- */
/* Archivo normal 400 800 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/archivo-normal-400-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo normal 400 800 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/archivo-normal-400-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono normal 400 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexmono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono normal 400 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexmono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono normal 500 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono normal 500 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans italic 400 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans italic 400 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans normal 400 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans normal 400 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans normal 500 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans normal 500 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans normal 600 latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans normal 600 latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibmplexsans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}