/* ─────────────────────────────────────────────
   Demo shell: site nav, back control, footer.
   Scoped to .ds-* class names only. Deliberately
   defines no :root variables and no bare element
   selectors, so demo internals stay untouched.
   ───────────────────────────────────────────── */

/* Shared layout + semantic tokens.
   Deliberately prefixed so they cannot collide with the tokens each
   demo defines in its own :root (several demos use --ink for the
   BACKGROUND, where the site uses it for text). */
:root{
  --shell-max:1100px;      /* one container width for shell + demo body */
  --shell-gutter:32px;     /* one left/right gutter                     */
  --shell-lead:48px;       /* space from back control to first content  */
  --accent-agent:#5B8DEF;  /* semantic: agent-owned paths and output    */
  --accent-agent-soft:rgba(91,141,239,0.13);
  --accent-agent-line:rgba(91,141,239,0.55);
}

.ds-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(12,12,14,0.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(237,238,242,0.08);
  font-family:'Instrument Sans',system-ui,sans-serif;
}
.ds-nav-inner{
  max-width:var(--shell-max);margin:0 auto;padding:0 var(--shell-gutter);
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.ds-logo{
  font-weight:600;font-size:17px;letter-spacing:-0.02em;
  color:#EDEEF2;text-decoration:none;white-space:nowrap;
}
.ds-links{display:flex;gap:32px;list-style:none;align-items:center;margin:0;padding:0}
.ds-links a{
  color:#9BA1AE;text-decoration:none;font-size:15px;font-weight:500;
  transition:color .2s;
}
.ds-links a:hover{color:#EDEEF2}
.ds-cta{
  color:#EDEEF2;border:1px solid rgba(237,238,242,0.14);
  border-radius:100px;padding:8px 20px;white-space:nowrap;
  transition:background .2s,border-color .2s;
}
.ds-cta:hover{background:#18181C;border-color:#EDEEF2}

.ds-back-bar{
  max-width:var(--shell-max);margin:0 auto;padding:24px var(--shell-gutter) 0;
  font-family:'Instrument Sans',system-ui,sans-serif;
}
.ds-back{
  display:inline-flex;align-items:center;gap:8px;
  color:#9BA1AE;text-decoration:none;font-size:15px;font-weight:500;
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color .2s,border-color .2s;
}
.ds-back:hover{color:#EDEEF2;border-bottom-color:rgba(237,238,242,0.14)}

.ds-footer{
  border-top:1px solid rgba(237,238,242,0.08);
  margin-top:64px;padding:32px 0;
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:14px;color:#6B7080;
}
.ds-footer-inner{
  max-width:var(--shell-max);margin:0 auto;padding:0 var(--shell-gutter);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.ds-footer a{color:inherit;text-decoration:none}
.ds-footer a:hover{color:#9BA1AE}

@media(max-width:900px){
  :root{--shell-gutter:20px;--shell-lead:32px}
  .ds-nav-inner{gap:12px}
  .ds-links{gap:16px}
  .ds-links li:not(.ds-keep){display:none}
  .ds-back-bar{padding-top:20px}
  .ds-logo{font-size:15px}
}