#inline-guide{
    --bg:#0b0d10;
    --panel:#111419;
    --ink:#e8ecf1;
    --muted:#aab6c4;
    --accent:#ff4c4c;
    --ring:#2a3340;
    --link:#65b3ff;
    --code:#1a1f27;
    --wrap-pad:24px;
  }
  #inline-guide *{box-sizing:border-box}
  #inline-guide,#inline-guide{
    margin:0;
    height:100%;
    background:var(--bg);
    color:var(--ink);
    font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  }
  #inline-guide a{color:var(--link);text-decoration:none}
  #inline-guide a:hover{text-decoration:underline}

  #inline-guide .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:var(--wrap-pad);
  }

  /* Page header (matches Palettes page) */
  #inline-guide .page-head{
    padding: max(20px, calc(20px + env(safe-area-inset-top))) 0 18px;
    border-bottom:1px solid var(--ring);
    margin-bottom:8px;
  }
  @media (min-width:900px){
    #inline-guide .page-head{
      padding: calc(28px + env(safe-area-inset-top)) 0 22px;
    }
  }
  #inline-guide .page-head > .wrap{
    padding-left: var(--wrap-pad);
    padding-right: var(--wrap-pad);
    padding-top: 0;
    padding-bottom: 0;
  }
  #inline-guide .eyebrow{
    display:inline-block;
    padding:4px 10px;
    border:1px solid var(--ring);
    border-radius:999px;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:10px;
  }
  #inline-guide .page-head h1{
    font-size:clamp(32px,5vw,56px);
    line-height:1.1;
    margin:0;
  }
  #inline-guide .page-head .sub{
    max-width:860px;
    color:var(--muted);
    font-size:18px;
    margin:10px 0 0;
  }

  /* Panels & layout */
  #inline-guide .panel{
    background:var(--panel);
    border:1px solid var(--ring);
    border-radius:18px;
    padding:22px;
  }
  #inline-guide .grid{
    display:grid;
    gap:18px;
  }
  #inline-guide .grid.columns-2{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }

  #inline-guide .section-heading{
    margin:0 0 8px;
    font-size:22px;
  }
  #inline-guide .section-kicker{
    margin:0 0 8px;
    color:var(--muted);
  }

  /* Code + kbd + callouts */
  #inline-guide code{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:0.95em;
    background:var(--code);
    color:#e8ecf1;
    padding:0 4px;
    border-radius:4px;
  }
  #inline-guide kbd,#inline-guide  .kbd{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;
    background:var(--code);
    color:#e8ecf1;
    border:1px solid var(--ring);
    border-radius:6px;
    padding:2px 6px;
  }
  #inline-guide .callout{
    border-left:4px solid var(--accent);
    padding:10px 14px;
    background:rgba(255,76,76,.08);
    border-radius:12px;
    margin-top:10px;
  }
  #inline-guide .note{
    font-size:13px;
    color:var(--muted);
    margin-top:8px;
  }

  /* Mini chips */
  #inline-guide .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
  }
  #inline-guide .chip{
    font-size:12px;
    padding:6px 10px;
    border:1px solid var(--ring);
    border-radius:999px;
    color:var(--muted);
    background:rgba(255,255,255,.03);
  }

  /* Simple inline "stacked" list layout for numbered sections */
  #inline-guide .guide-main.wrap > section{
    margin-top:24px;
  }

  #inline-guide .guide-footer{
    padding-top:16px;
    padding-bottom:24px;
  }
  #inline-guide .footer-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
    font-size:13px;
    color:var(--muted);
  }