/* Static content pages. Deliberately small and dependency free: these are
   served as plain HTML so they stay indexable and fast. Palette matches the
   app's dusk welcome scene. */
*,*::before,*::after{box-sizing:border-box}
:root{--ink:#2e1c35;--body:#4b3f52;--muted:#7c6d80;--line:#ecdfd6;--accent:#5a4ce6;--warm:#f2795f}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--body);background:linear-gradient(180deg,#fff6ec 0,#fdf7f3 320px,#fbfafd 900px);font:16px/1.65 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
img{max-width:100%;height:auto}
a{color:var(--accent)}
main{width:min(760px,100%);margin:0 auto;padding:8px 22px 72px}
/* A restrained nod to the welcome page: sunset sky and a hill silhouette
   behind the header only. The reading column stays plain, because scenery
   behind body text costs legibility for decoration. */
.site-head-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff8ef 0%,#fff0e3 55%,#ffe9db 100%)}
.site-head-wrap::after{content:'';position:absolute;right:0;bottom:0;left:0;height:26px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath fill='%23e8c2b0' opacity='.34' d='M0 26V16c90-8 180-9 300-2 130 8 240 6 360-3 110-8 250-7 540 4v11Z'/%3E%3Cpath fill='%23b6cbaf' opacity='.4' d='M0 26v-5c120-8 230-7 350 1 140 9 260 7 420-3 120-7 280-6 430 3v4Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.site-head{position:relative;z-index:1;width:min(1100px,100%);margin:0 auto;padding:20px 22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.4px;text-decoration:none}
.site-head nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.site-head nav a{padding:8px 12px;color:var(--body);border-radius:9px;font-size:14px;font-weight:650;text-decoration:none}
.site-head nav a:hover{background:rgba(255,255,255,.75);color:var(--ink)}
.site-head nav .cta{color:#fff;background:linear-gradient(135deg,#7061e8,#5647d4);box-shadow:0 8px 18px rgba(80,65,201,.25)}
.site-head nav .cta:hover{color:#fff}
h1{margin:.4em 0 .3em;color:var(--ink);font-family:Manrope,sans-serif;font-size:clamp(32px,5vw,46px);line-height:1.08;letter-spacing:-1.4px}
h2{margin:2em 0 .5em;color:var(--ink);font-family:Manrope,sans-serif;font-size:clamp(22px,3vw,28px);line-height:1.2;letter-spacing:-.7px}
h3{margin:1.7em 0 .4em;color:var(--ink);font-size:18px;letter-spacing:-.3px}
.lede{color:var(--muted);font-size:clamp(17px,2vw,19px);line-height:1.55}
.updated{margin:0;color:var(--muted);font-size:13px}
ul,ol{padding-left:1.2em}
li{margin:.42em 0}
table{width:100%;margin:1.2em 0;border-collapse:collapse;font-size:15px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.note{margin:1.6em 0;padding:14px 16px;background:#fff8f2;border:1px solid var(--line);border-left:3px solid var(--warm);border-radius:12px;font-size:14.5px}
.cta-card{margin:3em 0 0;padding:26px;display:flex;align-items:center;gap:22px;background:linear-gradient(120deg,#fff4e8,#ffeee3);border:1px solid #f2ddcb;border-radius:18px}
.cta-card>div{flex:1;min-width:0}
.cta-card img{width:132px;height:auto;flex:none;filter:drop-shadow(0 14px 20px rgba(120,70,50,.16))}
.cta-card h2{margin-top:0}
/* Figures: a real workspace shot and simple diagrams, so an article is not a
   wall of prose to a stranger who landed here from search. */
figure{margin:1.8em 0;padding:0}
figure img,figure svg{display:block;width:100%;height:auto;border-radius:14px}
figure img{border:1px solid var(--line);box-shadow:0 14px 34px rgba(90,60,45,.12)}
figcaption{margin-top:9px;color:var(--muted);font-size:13px;text-align:center}
.diagram{background:linear-gradient(140deg,#fff6ec,#fdf3f6);border:1px solid var(--line);padding:14px}
@media (max-width:560px){.cta-card{flex-direction:column-reverse;text-align:center}.cta-card img{width:104px}}
.button{display:inline-block;margin-top:6px;padding:12px 20px;color:#fff;background:linear-gradient(135deg,#7061e8,#5647d4);border-radius:12px;box-shadow:0 10px 22px rgba(80,65,201,.26);font-weight:700;text-decoration:none}
.cards{margin:1.4em 0;padding:0;list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cards a{display:block;height:100%;padding:18px;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none}
.cards a:hover{border-color:#dcc9bb;box-shadow:0 10px 24px rgba(120,80,60,.09)}
.cards strong{display:block;margin-bottom:4px;color:var(--ink);font-size:16px}
.cards span{color:var(--muted);font-size:14px}
.site-foot{width:min(1100px,100%);margin:0 auto;padding:26px 22px 40px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.site-foot nav{display:flex;gap:14px;flex-wrap:wrap}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root{--ink:#f1ecf6;--body:#c9c1d2;--muted:#9a90a6;--line:#332c3d}
  body{background:linear-gradient(180deg,#1a151f 0,#16131c 500px)}
  .cards a{background:#211c29}
  .note{background:#241d24}
  .cta-card{background:linear-gradient(120deg,#2a2028,#241d26);border-color:#3a2f38}
  .site-head nav a:hover{background:rgba(255,255,255,.06)}
}