/* extracted from legions/index.html by ops/inline_style_extract.py — linked in the same document position to preserve cascade order */
:root{
    --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,monospace;
    --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
    --ink:#f2eadf;--mist:rgba(242,234,223,.72);--faint:rgba(242,234,223,.46);
    --sand:#d89b2b;--sand-hi:#d89b2b;--act:#22c55e;--move:#3b82f6;--tab:#8b5cf6;
    --edge:#2f343a;--edge2:#2f343a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;line-height:1.5;
    background-image:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb, var(--act) 5%, transparent),transparent 55%)}
  .wrap{max-width:820px;margin:0 auto;padding:var(--space-40) var(--space-16) var(--space-64)}
  .top{display:flex;align-items:center;gap:var(--space-8);font-size:var(--text-12);color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--space-40)}
  .top .dot{width:9px;height:9px;border-radius:var(--radius-2);background:var(--sand);transform:rotate(45deg)}
  .top b{color:var(--sand);font-weight:600;letter-spacing:.16em}
  .top .r{margin-left:auto;color:var(--move);letter-spacing:.05em}
  .boot{color:var(--move);font-size:var(--text-12);margin-bottom:var(--space-12)}
  h1{font-family:var(--serif);font-weight:600;color:var(--sand);font-size:clamp(var(--text-28),5vw,var(--text-40));line-height:1.08;margin-bottom:var(--space-4)}
  .mantra{font-family:var(--mono);color:var(--act);font-size:var(--text-14);letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--space-24)}
  .lede{color:var(--mist);font-size:var(--text-16);line-height:1.65;max-width:64ch;margin-bottom:var(--space-12)}
  .lede b{color:var(--ink);font-weight:600}
  .principle{font-family:var(--serif);color:var(--sand-hi);font-size:var(--text-20);line-height:1.5;border-left:2px solid var(--sand);
    padding:var(--space-12) var(--space-16);background:color-mix(in srgb, var(--sand) 4%, transparent);border-radius:0 var(--radius-8) var(--radius-8) 0;margin:var(--space-8) 0 var(--space-40);max-width:62ch}
  h2{font-size:var(--text-12);letter-spacing:.16em;text-transform:uppercase;color:var(--move);margin:var(--space-40) 0 var(--space-16);font-weight:600}
  ol.rules{list-style:none;counter-reset:r;display:grid;gap:var(--space-12)}
  ol.rules li{counter-increment:r;position:relative;padding:var(--space-12) var(--space-16) var(--space-12) var(--space-40);border:1px solid var(--edge);border-radius:var(--radius-8);
    background:color-mix(in srgb, var(--ink) 1.2%, transparent);font-size:var(--text-14);color:var(--ink)}
  ol.rules li::before{content:counter(r);position:absolute;left:13px;top:13px;width:22px;height:22px;border-radius:var(--radius-8);
    background:color-mix(in srgb, var(--sand) 13%, transparent);color:var(--sand);font-size:var(--text-12);font-weight:700;display:grid;place-items:center}
  ol.rules li b{color:var(--sand)}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-12)}
  .card{border:1px solid var(--edge);border-radius:var(--radius-8);padding:var(--space-16) var(--space-16);background:color-mix(in srgb, var(--ink) 1.2%, transparent)}
  .card h3{color:var(--move);font-size:var(--text-13);letter-spacing:.06em;margin-bottom:var(--space-8);font-weight:600}
  .card p{color:var(--mist);font-size:var(--text-14);line-height:1.55}
  .links{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:var(--space-4) 0 var(--space-8)}
  a.go{font-family:var(--mono);font-weight:700;font-size:var(--text-14);text-decoration:none;padding:var(--space-12) var(--space-16);border-radius:var(--radius-8);
    background:var(--act);color:var(--bg);border:1px solid var(--act);transition:all .16s}
  a.go:hover{background:var(--sand-hi);border-color:var(--sand-hi)}
  a.ghost{font-family:var(--mono);font-size:var(--text-14);text-decoration:none;padding:var(--space-12) var(--space-16);border-radius:var(--radius-8);
    background:color-mix(in srgb, var(--move) 5%, transparent);border:1px solid var(--edge2);color:var(--move);transition:all .16s}
  a.ghost:hover{border-color:var(--move)}
  .note{color:var(--faint);font-size:var(--text-13);line-height:1.6;margin-top:var(--space-12);max-width:64ch}
  .formula{border:1px solid color-mix(in srgb, var(--act) 35%, transparent);border-radius:var(--radius-8);padding:var(--space-16);margin:var(--space-12) 0 var(--space-16);
    background:linear-gradient(135deg,color-mix(in srgb, var(--act) 7%, transparent),color-mix(in srgb, var(--move) 2.5%, transparent))}
  .formula strong{display:block;color:var(--act);font-size:var(--text-16);margin-bottom:var(--space-8)}
  .formula p{color:var(--mist);font-size:var(--text-14);line-height:1.6}
  .formula code{color:var(--sand-hi);font-family:var(--mono)}
  .note b{color:var(--mist)}
  footer{margin-top:var(--space-40);padding-top:var(--space-16);border-top:1px solid var(--edge);color:var(--faint);font-size:var(--text-12);line-height:1.7}
  footer a{color:var(--move);text-decoration:none}
  .not{color:var(--faint);font-size:var(--text-12);margin-top:var(--space-8)}
  .not span{color:var(--rose)}