/* 7IT design language (docs/redesign-plan.md). One house, three worlds.
   The world is a class on <body>: w-studio (default), w-guard, w-maps. Worlds change only the variables
   and the type width; every component below is shared. Loaded after the compiled app CSS, so the
   compatibility layer at the end re-themes the Tailwind classes the page builders already use. */

:root, .w-studio{
  --paper:#f3f3ef; --paper-2:#eaeae4; --ink:#151515; --mute:#5d5d58; --faint:#8a8a83; --rule:#cfcfc8;
  --sig:#c8371f; --tile:#151515; --tile-ink:#f3f3ef; --live:#0a8f5a; --code-bg:#151515; --code-ink:#f3f3ef;
  --wd:100%; color-scheme:light;
}
.w-guard{
  --paper:#0c121d; --paper-2:#111a28; --ink:#e8ecf2; --mute:#8d98aa; --faint:#5d6a80; --rule:#243149;
  --sig:#ffb020; --tile:#ffb020; --tile-ink:#0c121d; --live:#3ccf8e; --code-bg:#070b12; --code-ink:#e8ecf2;
  --wd:118%; color-scheme:dark;
}
.w-maps{
  --paper:#efe7cb; --paper-2:#e6dcb9; --ink:#16202a; --mute:#56605f; --faint:#8a8a72; --rule:#c9bd94;
  --sig:#b8236e; --tile:#16202a; --tile-ink:#efe7cb; --live:#0a7f52; --code-bg:#16202a; --code-ink:#efe7cb;
  --sea:#cfe5ee; --wd:86%; color-scheme:light;
}

/* ---------- base ---------- */
html{scroll-padding-top:72px}
body.ds{background:var(--paper)!important;color:var(--ink)!important;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
  font-variation-settings:normal;-webkit-font-smoothing:antialiased}
.ds ::selection{background:var(--sig);color:var(--paper)}
.ds :focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.ds h1,.ds h2,.ds h3,.ds h4{font-family:'Archivo',sans-serif;font-stretch:var(--wd);color:var(--ink);letter-spacing:-.02em}
.ds code,.ds kbd,.ds .mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.ds a{color:inherit}
.ds hr{border:0;border-top:1.5px solid var(--ink)}
@media (prefers-reduced-motion:reduce){.ds *{animation:none!important;transition:none!important}}

/* ---------- chrome: nav, sub-nav, footer, stamp ---------- */
.ds-nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1.5px solid var(--ink)}
.ds-nav-in{max-width:1440px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:28px}
.ds-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;font-stretch:var(--wd);text-decoration:none!important;color:var(--ink)!important;white-space:nowrap}
.ds-tile{width:26px;height:26px;display:inline-grid;place-items:center;background:var(--tile);color:var(--tile-ink);font-weight:800;font-size:15px;line-height:1;flex:none}
.ds-links{display:flex;gap:26px;margin-left:auto;font-size:15px}
.ds-links a{color:var(--mute)!important;text-decoration:none}
.ds-links a:hover,.ds-links a.is-on{color:var(--ink)!important}
.ds-links a.is-on{text-decoration:underline;text-decoration-color:var(--sig);text-decoration-thickness:2px;text-underline-offset:7px}
.ds-switch{display:flex;border:1.5px solid var(--ink);font:600 11.5px 'JetBrains Mono',monospace;letter-spacing:.04em}
.ds-switch a{padding:6px 11px;text-decoration:none!important;color:var(--ink)!important}
.ds-switch a.is-on{background:var(--ink);color:var(--paper)!important}
.ds-burger{display:none;background:none;border:1.5px solid var(--ink);color:var(--ink);font:600 12px 'JetBrains Mono',monospace;padding:7px 10px}
.ds-mmenu{border-top:1px solid var(--rule);padding:12px 32px 20px;display:flex;flex-direction:column}
.ds-mmenu a{padding:10px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)!important;font-size:17px}
.ds-mmenu[hidden]{display:none}
.ds-sub{max-width:1440px;margin:0 auto;padding:10px 32px;display:flex;gap:24px;align-items:center;font-size:14px;color:var(--mute);border-top:1px solid var(--rule);overflow-x:auto;white-space:nowrap}
.ds-sub a{color:var(--mute)!important;text-decoration:none}
.ds-sub a:hover,.ds-sub a.is-on{color:var(--ink)!important}
.ds-sub b{color:var(--ink);font-weight:700}
.ds-sub .ds-live{margin-left:auto}
@media (max-width:900px){.ds-links,.ds-switch{display:none}.ds-burger{display:block;margin-left:auto}.ds-nav-in{padding:0 16px}.ds-sub{padding:10px 16px}.ds-mmenu{padding:8px 16px 18px}}

.ds-foot{border-top:1.5px solid var(--ink);background:var(--paper);color:var(--mute);font-size:14px}
.ds-foot-in{max-width:1440px;margin:0 auto;padding:40px 32px 32px;display:grid;grid-template-columns:260px repeat(4,1fr);gap:40px}
.ds-foot h3{font:600 12px 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--ink);margin:0 0 10px;text-transform:uppercase}
.ds-foot a{display:block;color:var(--mute)!important;text-decoration:none;line-height:1.95}
.ds-foot a:hover{color:var(--ink)!important}
.ds-foot a.ds-brand{display:flex;color:var(--ink)!important;margin-bottom:10px;line-height:1.2}
.ds-foot-base{max-width:1440px;margin:0 auto;padding:16px 32px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;border-top:1px solid var(--rule)}
.ds-foot-base a{display:inline;margin-left:14px}
@media (max-width:900px){.ds-foot-in{grid-template-columns:1fr 1fr;padding:32px 16px}.ds-foot-in>div:first-child{grid-column:1/-1}.ds-foot-base{padding:14px 16px 24px}}
.ds-stamp{border-top:1.5px solid var(--ink);background:var(--paper)}
.ds-stamp-in{max-width:1440px;margin:0 auto;padding:14px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font:500 12.5px 'JetBrains Mono',monospace;color:var(--mute)}
.ds-stamp b{color:var(--ink);font-weight:600}
.ds-stamp a{color:var(--ink)!important;font-family:'Archivo',sans-serif;font-size:14px}
@media (max-width:900px){.ds-stamp-in{padding:12px 16px}}

/* the live layer: only real, current data */
.ds-live{color:var(--live)!important;font-family:'JetBrains Mono',monospace;font-size:12.5px}
.ds-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);vertical-align:1px;margin-right:8px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent);animation:ds-pulse 2.4s cubic-bezier(.23,1,.32,1) infinite}
@keyframes ds-pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--live) 6%,transparent)}}

/* ---------- components ---------- */
.ds-wrap{max-width:1440px;margin:0 auto;padding:0 32px}
@media (max-width:900px){.ds-wrap{padding:0 16px}}
.ds-hero{max-width:1440px;margin:0 auto;padding:88px 32px 64px}
.ds-hero h1{font-size:clamp(44px,7vw,104px);line-height:.95;font-weight:760;letter-spacing:-.03em;margin:0}
.ds-lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--mute);max-width:720px;margin-top:26px}
.ds-ch{max-width:1440px;margin:0 auto;padding:56px 32px;display:grid;grid-template-columns:300px 1fr;gap:56px;border-top:1.5px solid var(--ink)}
.ds-ch>div:first-child h2{font-size:30px;line-height:1.05;font-weight:760;margin:0}
.ds-ch>div:first-child p{margin-top:12px;color:var(--mute);font-size:15px;line-height:1.55}
@media (max-width:900px){.ds-ch{grid-template-columns:1fr;gap:20px;padding:40px 16px}.ds-hero{padding:56px 16px 40px}}
.ds-ledger{width:100%;border-collapse:collapse}
.ds-ledger td,.ds-ledger th{padding:14px 12px 14px 0;border-top:1px solid var(--rule);font-size:16px;vertical-align:top;text-align:left}
.ds-ledger tr:first-child td,.ds-ledger thead th{border-top:1.5px solid var(--ink)}
.ds-ledger th{font:600 12px 'JetBrains Mono',monospace;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.ds-ledger .m{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--mute)}
.ds-plate{border:1.5px solid var(--ink);background:var(--paper)}
.ds-cap{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1.5px solid var(--ink);font:500 12px 'JetBrains Mono',monospace;color:var(--mute);text-transform:uppercase;letter-spacing:.03em}
.ds-btn{display:inline-block;background:var(--ink);color:var(--paper)!important;padding:14px 24px;font-weight:700;font-size:15px;text-decoration:none!important;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.ds-btn:hover{transform:translateY(-1px)}
.w-guard .ds-btn{background:var(--sig);color:var(--paper)!important}
.ds-tx{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--sig);text-decoration-thickness:2px;text-underline-offset:4px}
.ds-field{display:flex;border:1.5px solid var(--ink);max-width:640px}
.ds-field input{flex:1;background:transparent;border:0;padding:15px 16px;font:400 15px 'JetBrains Mono',monospace;color:var(--ink);outline:none;min-width:0}
.ds-field button{background:var(--ink);color:var(--paper);border:0;padding:0 22px;font-weight:700}

/* ---------- prose (articles: blog, guides, news, research) ---------- */
.ds .prose{color:var(--ink)!important;font-size:1.08rem;line-height:1.75}
.ds .prose>p:first-of-type{color:var(--ink)!important;font-size:1.2rem}
.ds .prose h2{color:var(--ink)!important;font-size:1.75rem;border-top:1.5px solid var(--ink);padding-top:1.4rem;margin:3rem 0 1rem}
.ds .prose h3{color:var(--ink)!important}
.ds .prose a{color:var(--ink)!important;text-decoration-color:var(--sig)!important;text-decoration-thickness:2px!important}
.ds .prose strong{color:var(--ink)!important}
.ds .prose li::marker{color:var(--sig)}
.ds .prose ul li::before{border-color:var(--sig)!important}
.ds .prose blockquote{border-left:3px solid var(--sig)!important;background:transparent!important;border-radius:0!important;color:var(--ink)!important;font-style:normal}
.ds .prose code{background:var(--paper-2)!important;color:var(--ink)!important;border-radius:0!important}
.ds .prose pre{background:var(--code-bg)!important;border:1.5px solid var(--ink)!important;border-radius:0!important}
.ds .prose pre code{background:none!important;color:var(--code-ink)!important}
.ds .prose hr{border-top:1.5px solid var(--ink)!important}
.ds .prose img,.ds .guide-cover{border-radius:0!important;border:1.5px solid var(--ink)!important}
.ds .prose .g-h2 h2::after,.ds .prose h2.b-h2::before{display:none}
.ds .prose h2.b-h2{padding-left:0}
.ds .g-h2-num{background:var(--ink)!important;color:var(--paper)!important;border-radius:0!important;box-shadow:none!important}
.ds .g-art-ico{border-radius:0!important;border:1.5px solid var(--ink)!important;background:var(--paper-2)!important}
.ds .g-art-rule{background:var(--rule)!important}
.ds #reading-progress>span{background:var(--sig)!important;box-shadow:none!important}

/* ---------- compatibility layer: the Tailwind classes the builders use ---------- */
.ds .bg-black,.ds .bg-gray-950,.ds .bg-\[\#000\],.ds .bg-slate-950{background:var(--paper)!important}
.ds [class*="bg-gray-900"],.ds [class*="bg-gray-800"],.ds [class*="bg-slate-900"],.ds [class*="bg-white\/"],.ds .bg-\[\#0b1220\],.ds [class*="bg-\[\#0"],.ds [class*="bg-\[\#1"]{background:transparent!important}
.ds .text-white,.ds .text-gray-50,.ds .text-gray-100,.ds .text-gray-200,.ds .text-slate-100,.ds .text-slate-200{color:var(--ink)!important}
.ds .text-gray-300,.ds .text-gray-400,.ds .text-slate-300,.ds .text-slate-400{color:var(--mute)!important}
.ds .text-gray-500,.ds .text-gray-600,.ds .text-slate-500{color:var(--faint)!important}
.ds [class*="border-gray-7"],.ds [class*="border-gray-8"],.ds [class*="border-gray-9"],.ds [class*="border-slate-"],.ds [class*="border-white\/"]{border-color:var(--rule)!important}
.ds [class*="text-\[\#a48bff\]"],.ds [class*="text-\[\#6d4aff\]"],.ds [class*="text-\[\#7c5cff\]"],.ds [class*="text-violet"],.ds [class*="text-indigo"],.ds [class*="text-purple"]{color:var(--sig)!important}
.ds [class*="bg-\[\#6d4aff\]"],.ds [class*="bg-violet"],.ds [class*="bg-indigo"]{background:transparent!important}
.ds .bg-\[\#6d4aff\],.ds .lx-btn,.ds .cta-primary,.ds .gx-btn{background:var(--ink)!important;color:var(--paper)!important;border-radius:0!important;box-shadow:none!important}
.w-guard.ds .bg-\[\#6d4aff\],.w-guard.ds .lx-btn,.w-guard.ds .cta-primary,.w-guard.ds .gx-btn{background:var(--sig)!important}
.ds [class*="border-\[\#6d4aff\]"],.ds [class*="border-violet"],.ds [class*="border-indigo"]{border-color:var(--ink)!important}
.ds [class*="rounded"]{border-radius:0!important}
.ds .rounded-full.w-2,.ds .rounded-full.h-2,.ds .rounded-full.w-1\.5,.ds .rounded-full.w-2\.5{border-radius:50%!important}
.ds .tag,.ds .chip-active,.ds [class*="rounded-full"][class*="px-3"]{background:transparent!important;border:1px solid var(--rule)!important;color:var(--mute)!important}
.ds .chip-active{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.ds .blur-3xl,.ds [class*="blur-"][class*="absolute"],.ds .pointer-events-none.absolute[class*="bg-"]{display:none!important}
.ds [class*="shadow"]{box-shadow:none!important}
.ds [class*="hover\:-translate-y"]:hover{transform:none!important}
.ds [class*="bg-gradient"],.ds [class*="from-"][class*="to-"]{background-image:none!important}
.ds [class*="bg-clip-text"]{-webkit-text-fill-color:currentColor!important;background:none!important}
.ds .card,.ds .post-card,.ds [class*="rounded-2xl"][class*="border"]{border:1.5px solid var(--ink)!important;background:var(--paper)!important}
.ds input,.ds textarea,.ds select{background:transparent!important;color:var(--ink)!important;border-color:var(--ink)!important;border-radius:0!important}
.ds input::placeholder,.ds textarea::placeholder{color:var(--faint)!important}
/* old lx chrome, if a page still prints it */
.ds .lx-nav,.ds .lx-foot{display:none!important}
.ds .lx-nav+div[aria-hidden]{display:none!important}

/* ---------- the agent view: a different world on purpose (a terminal transcript) ---------- */
body.ds.ds-agent{--paper:#0b0e12;--paper-2:#11161c;--ink:#d6e2d3;--mute:#7d8a80;--faint:#55605a;--rule:#1d2620;
  --sig:#7ee787;--tile:#7ee787;--tile-ink:#0b0e12;--live:#7ee787;--wd:100%;color-scheme:dark;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  background-image:linear-gradient(rgba(126,231,135,.035) 1px,transparent 1px);background-size:100% 3px}
body.ds-agent .ds-nav,body.ds-agent .ds-foot,body.ds-agent .ds-stamp{font-family:'JetBrains Mono',monospace}
body.ds-agent .ds-brand{font-family:'JetBrains Mono',monospace;font-size:16px}
#ds-agent-bar{position:sticky;top:0;z-index:60;background:#7ee787;color:#0b0e12;font:600 13px 'JetBrains Mono',monospace;
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 32px;flex-wrap:wrap}
#ds-agent-bar b{margin-right:10px;letter-spacing:.06em}
#ds-agent-bar .ds-dot{background:#0b0e12;box-shadow:none;animation:none}
#ds-agent-bar a{color:#0b0e12!important;text-decoration:underline;text-underline-offset:3px}
body.ds-agent .ds-nav{top:37px}
#ds-agent{max-width:1180px;margin:0 auto;padding:48px 32px 72px}
.ag-head p{font-size:12.5px;color:var(--mute);letter-spacing:.08em}
.ag-head h1{font-family:'JetBrains Mono',monospace;font-size:clamp(28px,4vw,46px);font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:10px 0 36px}
.ag-cursor{display:inline-block;width:.55em;height:1em;background:var(--sig);margin-left:6px;vertical-align:-.12em;animation:ag-blink 1.1s steps(1) infinite}
@keyframes ag-blink{50%{opacity:0}}
.ag-pane{border:1px solid var(--rule);background:var(--paper-2);margin-bottom:22px}
.ag-cmd{padding:12px 16px;border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink);overflow-x:auto;white-space:nowrap}
.ag-ps{color:var(--sig);font-weight:600;margin-right:6px}
.ag-note{color:var(--faint);margin-left:14px}
.ag-out{margin:0;padding:14px 16px 16px;font:400 13.5px/1.75 'JetBrains Mono',monospace;color:#b9c6b6;white-space:pre-wrap;word-break:break-word;max-height:520px;overflow:auto}
.ag-ln{display:inline-block;width:3.2em;color:#3c4a40;user-select:none;text-align:right;padding-right:1.2em}
.ag-k{color:#9ecbff}.ag-s{color:#ffd580}.ag-n{color:#f2a6ff}.ag-u{color:#7ee787}.ag-h{color:#ffffff;font-weight:600}
@media (max-width:900px){#ds-agent{padding:32px 16px 56px}#ds-agent-bar{padding:9px 16px}.ag-ln{width:2.4em;padding-right:.8em}}
@media (prefers-reduced-motion:reduce){.ag-cursor{animation:none}}
