/* Softanza compass family stylesheet, extracted 2026-09-30 from the Agent Stack Compass page.
   Tokens on :root; dark mode under prefers-color-scheme guarded by :root:not([data-theme=light]) and :root[data-theme=dark].
   Fonts: Fraunces (display), IBM Plex Sans (text), IBM Plex Mono (code). */

  :root{
    --paper:#F1F3F1; --panel:#FBFCFB; --panel-2:#EAEEEB;
    --ink:#1B211F; --ink-2:#3E4744; --ink-3:#5E6864;
    --line:#D5DBD7; --line-2:#C3CAC6;
    --accent:#1B6B72; --accent-ink:#0E4E54;
    --strong:#2E7D5B; --strong-bg:#E4F1EA;
    --solid:#3E6E9E; --solid-bg:#E4ECF4;
    --partial:#B77A24; --partial-bg:#F6ECD9;
    --emerging:#B4462F; --emerging-bg:#F6E3DD;
    --peer:#6B4E8A; --peer-bg:#EEE7F4;
    --code-bg:#F4F6F5;
    --shadow:0 1px 2px rgba(27,33,31,.04),0 6px 18px rgba(27,33,31,.05);
    --maxw:1180px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#121614; --panel:#1A201E; --panel-2:#232B28;
      --ink:#EAEEEB; --ink-2:#B7C1BC; --ink-3:#8A958F;
      --line:#2C3532; --line-2:#3A443F;
      --accent:#5FB6BC; --accent-ink:#8FD3D8;
      --strong:#63B98C; --strong-bg:#1B2F26;
      --solid:#7BA8D4; --solid-bg:#1B2733;
      --partial:#D6A559; --partial-bg:#302811;
      --emerging:#DB8069; --emerging-bg:#31201B;
      --peer:#B99AD8; --peer-bg:#27203A;
      --code-bg:#151A18;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);
    }
  }
  :root[data-theme="dark"]{
    --paper:#121614; --panel:#1A201E; --panel-2:#232B28;
    --ink:#EAEEEB; --ink-2:#B7C1BC; --ink-3:#8A958F;
    --line:#2C3532; --line-2:#3A443F;
    --accent:#5FB6BC; --accent-ink:#8FD3D8;
    --strong:#63B98C; --strong-bg:#1B2F26;
    --solid:#7BA8D4; --solid-bg:#1B2733;
    --partial:#D6A559; --partial-bg:#302811;
    --emerging:#DB8069; --emerging-bg:#31201B;
    --peer:#B99AD8; --peer-bg:#27203A;
    --code-bg:#151A18;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);
  }
  *{box-sizing:border-box}
  body{background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
  h1,h2,h3{font-family:"Fraunces",Georgia,serif;text-wrap:balance;margin:0}
  .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
  a{color:var(--accent-ink)}
  p{margin:0} p+p{margin-top:14px}
  b{color:var(--ink);font-weight:600}
  code{font-family:"IBM Plex Mono",monospace;font-size:.86em;color:var(--ink);background:var(--panel-2);padding:1px 5px;border-radius:5px}
  pre{margin:0;font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.55;color:var(--ink);background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:13px 15px;overflow-x:auto;white-space:pre}
  pre .c{color:var(--ink-3)}

  header{border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--paper)),var(--paper))}
  .eyebrow{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:600;color:var(--accent-ink)}
  h1{font-size:clamp(36px,6.4vw,64px);font-weight:600;line-height:1.0;letter-spacing:-.018em;margin-top:16px}
  h1 i{font-weight:500;color:var(--accent-ink)}
  .thesis{font-size:clamp(17.5px,2.3vw,21px);color:var(--ink-2);max-width:72ch;margin-top:22px;line-height:1.55}
  .head-pad{padding-block:50px 36px}
  .basis{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-3);margin-top:20px;max-width:96ch;line-height:1.6}
  .dists{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 28px;margin-top:26px}
  .dist .lbl{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-3);margin-bottom:6px;font-weight:600;letter-spacing:.04em}
  .distbar{display:flex;height:14px;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2)}
  .distbar span{display:block}
  .legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
  .legend .k{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2);font-weight:500}
  .dot{width:10px;height:10px;border-radius:3px;flex:none}

  section{padding-block:44px}
  section.tint{background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--accent) 5%,var(--paper)))}
  .kicker{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-ink)}
  h2{font-size:clamp(26px,3.6vw,36px);font-weight:600;margin-top:8px;letter-spacing:-.012em}
  .lede{color:var(--ink-2);max-width:72ch;margin-top:14px;font-size:17px}
  .prose{max-width:72ch;margin-top:18px;color:var(--ink-2)}

  .quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
  @media (max-width:760px){.quotes{grid-template-columns:1fr}}
  .q{padding:16px 20px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
  .q.w{border-left:4px solid var(--peer)} .q.s{border-left:4px solid var(--accent)}
  .q p{font-family:"Fraunces",serif;font-size:clamp(16.5px,2vw,19px);line-height:1.4;color:var(--ink);font-style:italic;font-weight:500}
  .q .who{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);margin-top:10px;font-style:normal}

  /* the layer stack */
  .stack{margin-top:24px;display:flex;flex-direction:column;gap:8px}
  .layer{display:grid;grid-template-columns:200px 1fr 1fr;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
  @media (max-width:820px){.layer{grid-template-columns:1fr}}
  .layer > div{padding:13px 16px;border-right:1px solid var(--line)}
  .layer > div:last-child{border-right:0}
  @media (max-width:820px){.layer > div{border-right:0;border-bottom:1px solid var(--line)} .layer > div:last-child{border-bottom:0}}
  .layer .nm{background:var(--panel-2)}
  .layer .nm .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--accent-ink);font-weight:600;letter-spacing:.08em}
  .layer .nm .t{font-family:"Fraunces",serif;font-weight:600;font-size:17.5px;margin-top:2px;line-height:1.2}
  .layer .nm .s{font-size:12.5px;color:var(--ink-3);margin-top:4px}
  .layer .h{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:4px}
  .layer p{font-size:14px;color:var(--ink-2)}
  .layer.home{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent),var(--shadow)}
  .layer.home .nm{background:color-mix(in srgb,var(--accent) 12%,var(--panel-2))}

  .chip{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;display:inline-block}
  .chip.strong{color:var(--strong);background:var(--strong-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--strong) 32%,transparent)}
  .chip.solid{color:var(--solid);background:var(--solid-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--solid) 32%,transparent)}
  .chip.partial{color:var(--partial);background:var(--partial-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--partial) 34%,transparent)}
  .chip.emerging{color:var(--emerging);background:var(--emerging-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--emerging) 34%,transparent)}

  .twrap{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:var(--panel)}
  table{border-collapse:separate;border-spacing:0;width:100%;min-width:1080px;font-size:13.6px}
  th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
  th:last-child,td:last-child{border-right:0}
  th{background:var(--panel-2);font-family:"IBM Plex Sans",sans-serif;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
  th.us{color:var(--accent-ink)}
  tr:last-child td{border-bottom:0}
  td{color:var(--ink-2)}
  td.g{font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:var(--ink);width:12%;position:sticky;left:0;background:var(--panel)}
  td.us{background:color-mix(in srgb,var(--accent) 4%,var(--panel))}
  td .c{display:block;margin-top:6px}

  .two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
  @media (max-width:760px){.two{grid-template-columns:1fr}}
  .col{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
  .col h3{font-size:20px}
  .col.a{border-top:3px solid var(--solid)} .col.b{border-top:3px solid var(--partial)}
  .col ul{margin:10px 0 0;padding-left:18px;color:var(--ink-2);font-size:15px} .col li+li{margin-top:7px}

  .moves{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:24px}
  .move{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 19px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--accent)}
  .move .t{font-family:"Fraunces",serif;font-size:19px;font-weight:600;line-height:1.2}
  .move p{font-size:14.6px;color:var(--ink-2);flex:1}
  .ve{display:flex;gap:8px;flex-wrap:wrap}
  .tag{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:7px}
  .tag.v{color:var(--strong);background:var(--strong-bg)} .tag.e{color:var(--ink-2);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}

  .note{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:18px 22px;box-shadow:var(--shadow)}
  .note p{color:var(--ink-2);font-size:15.5px} .note+.note{margin-top:14px}
  .note.warn{border-left-color:var(--partial)}
  .close{margin-top:26px;max-width:68ch}
  .close p{font-family:"Fraunces",serif;font-size:clamp(19px,2.6vw,25px);line-height:1.4;color:var(--ink);font-weight:500}
  .close p+p{margin-top:16px}

  footer{border-top:1px solid var(--line);padding-block:28px 44px;margin-top:20px}
  .foot p{font-size:13.5px;color:var(--ink-3);max-width:100ch;line-height:1.6}
  .foot ul{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:var(--ink-3);columns:2;column-gap:28px}
  @media (max-width:760px){.foot ul{columns:1}}
  .mark{font-family:"Fraunces",serif;font-weight:600;color:var(--accent-ink);font-size:15px;display:block;margin-top:14px}