@font-face {
    font-family: "Roboto";
    src: url("/static/fonts/Roboto-latin.woff2") format("woff2-variations");
    font-weight: 100 900; font-style: normal; font-display: swap;
  }
  :root {
    --primary: #522462;
    --primary-light: #953CB4;
    --primary-dark: #2E0A3B;
    --gradient-light: #713287;
    --grey-dark: #494949;
    --grey: #8D8D8D;
    --grey-pale: #D1D1D1;
    --grey-whited: #F4F4F4;
    --white: #FFFFFF;
    --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.65;
         color: #1B1B1B; background: var(--white); }
  header.hero {
    background: linear-gradient(135deg, var(--gradient-light) 0%, var(--primary-dark) 100%);
    color: var(--white); padding: 3rem 1.5rem 3.5rem;
  }
  .hero-inner, main, footer .inner { max-width: 48rem; margin: 0 auto; }
  .hero-badge { background: var(--white); display: inline-flex; padding: 10px 16px;
                border-radius: 8px; margin-bottom: 1.75rem; }
  .hero-badge img { height: 32px; display: block; }
  h1 { font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.15;
       letter-spacing: 0.44px; margin-bottom: 0.75rem; }
  .hero p { font-size: 1.1rem; max-width: 38rem; opacity: 0.94; }
  nav.toc { background: var(--grey-whited); padding: 1rem 1.5rem; border-bottom: 1px solid var(--grey-pale); }
  nav.toc .inner { max-width: 48rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
                   font-size: 0.88rem; }
  nav.toc a { color: var(--primary); text-decoration: none; font-weight: 700; }
  nav.toc a:hover { text-decoration: underline; }
  main { padding: 3rem 1.5rem 4rem; display: flex; flex-direction: column; gap: 3rem; }
  section { display: flex; flex-direction: column; gap: 1rem; }
  h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.25; color: var(--primary);
       padding-bottom: 0.5rem; border-bottom: 2px solid var(--grey-pale); }
  h3 { font-weight: 700; font-size: 1.05rem; margin-top: 0.5rem; }
  p, li { max-width: 44rem; }
  ul, ol { padding-left: 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; }
  a { color: var(--primary); }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em;
         background: var(--grey-whited); padding: 0.12em 0.35em; border-radius: 3px; overflow-wrap: anywhere; }
  .note { background: var(--grey-whited); border-left: 4px solid var(--primary-light);
          border-radius: 0 6px 6px 0; padding: 1rem 1.15rem; }
  .warn { background: #FBF4D2; border-left: 4px solid #6F5C00; border-radius: 0 6px 6px 0;
          padding: 1rem 1.15rem; }
  .prompt { background: var(--grey-whited); border: 1px solid var(--grey-pale); border-radius: 6px;
            padding: 0.85rem 1.05rem; font-style: italic; color: var(--grey-dark); }
  .prompt b { display: block; font-style: normal; color: #1B1B1B; font-size: 0.78rem;
              text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
  .prompts { display: flex; flex-direction: column; gap: 0.7rem; }
  .table-scroll { overflow-x: auto; border: 1px solid var(--grey-pale); border-radius: 6px; }
  table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
  th, td { text-align: left; padding: 0.7rem 0.95rem; vertical-align: top; border-bottom: 1px solid var(--grey-pale); }
  tr:last-child td { border-bottom: none; }
  th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
       color: var(--grey-dark); background: var(--grey-whited); white-space: nowrap; }
  td code { white-space: nowrap; }
  .pill { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
          text-transform: uppercase; padding: 0.15em 0.55em; border-radius: 999px; white-space: nowrap; }
  .pill.read { color: #2A5A8C; background: #E3F0FB; }
  .pill.write { color: #46660A; background: #EEF6DC; }
  .pill.gate { color: var(--primary); background: #F2ECF5; }
  details { border: 1px solid var(--grey-pale); border-radius: 6px; padding: 0.9rem 1.1rem; max-width: 44rem; }
  details + details { margin-top: 0.6rem; }
  summary { font-weight: 700; cursor: pointer; color: var(--primary); }
  details p { margin-top: 0.6rem; }
  .client { border: 1px solid var(--grey-pale); border-radius: 6px; padding: 1.15rem 1.3rem; max-width: 44rem; }
  .client + .client { margin-top: 0.8rem; }
  .client h3 { margin-top: 0; }
  footer { background: var(--grey-whited); border-top: 1px solid var(--grey-pale);
           padding: 2rem 1.5rem; font-size: 0.88rem; color: var(--grey-dark); }
  footer .inner { display: flex; flex-direction: column; gap: 0.4rem; }

  .langbar { display: flex; justify-content: flex-end; max-width: 48rem; margin: 0 auto 1.25rem; }
  select.lang {
    font-family: var(--font); font-size: 0.88rem; font-weight: 700;
    color: var(--white); background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.45); border-radius: 6px;
    padding: 0.4rem 0.7rem; cursor: pointer;
  }
  select.lang option { color: #1B1B1B; }